From b8b7ee67fbb6b11904bc3cfbb6278b167f2778a2 Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Wed, 21 Aug 2024 16:31:35 -0700
Subject: [PATCH] relocated footer for improved CLS

---
 src/website/packages/fakeyou.com/src/App.tsx  |   27 +-
 .../StorytellerStudioCTA.tsx                  |    1 +
 .../fakeyou.com/src/v2/view/PageContainer.tsx | 1153 ++++++++---------
 3 files changed, 574 insertions(+), 607 deletions(-)

diff --git a/src/website/packages/fakeyou.com/src/App.tsx b/src/website/packages/fakeyou.com/src/App.tsx
index a66f89f0c5..879daea97f 100644
--- a/src/website/packages/fakeyou.com/src/App.tsx
+++ b/src/website/packages/fakeyou.com/src/App.tsx
@@ -31,6 +31,8 @@ import {
 import { VoiceConversionModelListItem } from "@storyteller/components/src/api/voice_conversion/ListVoiceConversionModels";
 import HttpBackend from "i18next-http-backend";
 
+import { FooterNav } from "./v2/view/nav/FooterNav";
+
 import { CoreServicesProvider } from "components/providers";
 
 // NB: We're transitioning over to this instance of i18n-next that loads translations over HTTP from Json Files.
@@ -447,29 +449,6 @@ class App extends React.Component<Props, State> {
                       clearBootstrapLanguageNotice={
                         this.clearBootstrapLanguageNotice
                       }
-                      // enqueueInferenceJob={this.enqueueInferenceJob}
-                      // inferenceJobs={this.state.inferenceJobs}
-                      // inferenceJobsByCategory={
-                      //   this.state.inferenceJobsByCategory
-                      // }
-                      // enqueueTtsJob={this.enqueueTtsJob}
-                      // ttsInferenceJobs={this.state.ttsInferenceJobs}
-                      // enqueueW2lJob={this.enqueueW2lJob}
-                      // w2lInferenceJobs={this.state.w2lInferenceJobs}
-                      // enqueueTtsModelUploadJob={this.enqueueTtsModelUploadJob}
-                      // ttsModelUploadJobs={this.state.ttsModelUploadJobs}
-                      // enqueueW2lTemplateUploadJob={
-                      //   this.enqueueW2lTemplateUploadJob
-                      // }
-                      // w2lTemplateUploadJobs={this.state.w2lTemplateUploadJobs}
-                      // enqueueVocoderUploadJob={this.enqueueVocoderUploadJob}
-                      // vocoderUploadJobs={this.state.vocoderUploadJobs}
-                      // enqueueVoiceConversionModelUploadJob={
-                      //   this.enqueueVoiceConversionModelUploadJob
-                      // }
-                      // voiceConversionModelUploadJobs={
-                      //   this.state.voiceConversionModelUploadJobs
-                      // }
                       textBuffer={this.state.textBuffer}
                       setTextBuffer={this.setTextBuffer}
                       clearTextBuffer={this.clearTextBuffer}
@@ -517,6 +496,8 @@ class App extends React.Component<Props, State> {
                     />
                   </Route>
                 </Switch>
+
+                <FooterNav sessionWrapper={this.state.sessionWrapper} />
               </CoreServicesProvider>
             </div>
           </div>
diff --git a/src/website/packages/fakeyou.com/src/components/common/StorytellerStudioCTA/StorytellerStudioCTA.tsx b/src/website/packages/fakeyou.com/src/components/common/StorytellerStudioCTA/StorytellerStudioCTA.tsx
index fea79b54c3..84fbe80a06 100644
--- a/src/website/packages/fakeyou.com/src/components/common/StorytellerStudioCTA/StorytellerStudioCTA.tsx
+++ b/src/website/packages/fakeyou.com/src/components/common/StorytellerStudioCTA/StorytellerStudioCTA.tsx
@@ -95,6 +95,7 @@ const StorytellerStudioCTA = ({
             }}
           >
             <video
+              className="ratio-16x9"
               preload="metadata"
               style={{
                 width: "100%",
diff --git a/src/website/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/src/website/packages/fakeyou.com/src/v2/view/PageContainer.tsx
index cac89d1fdf..3e17aed014 100644
--- a/src/website/packages/fakeyou.com/src/v2/view/PageContainer.tsx
+++ b/src/website/packages/fakeyou.com/src/v2/view/PageContainer.tsx
@@ -104,7 +104,6 @@ import SearchPage from "./pages/search/SearchPage";
 import { SearchProvider } from "context/SearchContext";
 import WeightEditPage from "./pages/weight/WeightEditPage";
 
-import { FooterNav } from "./nav/FooterNav";
 import FbxToGltfPage from "./pages/fbx_to_gltf/FbxToGltfPage";
 
 import VideoWorkflowPage from "./pages/video_workflow/VideoWorkflow";
@@ -237,79 +236,76 @@ class PageContainer extends React.Component<
             />
 
             <div id="page-content-wrapper">
-              <div id="main">
-                <Switch>
-                  <Route path="/comp-lib">
-                    <ComponentsLibrary
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
-                  <Route path="/firehose">
-                    <FirehoseEventListPage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+              <Switch>
+                <Route path="/comp-lib">
+                  <ComponentsLibrary
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
+                <Route path="/firehose">
+                  <FirehoseEventListPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/news">
-                    <NewsPage
-                      sessionWrapper={this.props.sessionWrapper}
-                      sessionSubscriptionsWrapper={
-                        this.props.sessionSubscriptionsWrapper
-                      }
-                    />
-                  </Route>
+                <Route path="/news">
+                  <NewsPage
+                    sessionWrapper={this.props.sessionWrapper}
+                    sessionSubscriptionsWrapper={
+                      this.props.sessionSubscriptionsWrapper
+                    }
+                  />
+                </Route>
 
-                  <Route path="/channels">
-                    <ChannelsPage
-                      sessionWrapper={this.props.sessionWrapper}
-                      sessionSubscriptionsWrapper={
-                        this.props.sessionSubscriptionsWrapper
-                      }
-                    />
-                  </Route>
+                <Route path="/channels">
+                  <ChannelsPage
+                    sessionWrapper={this.props.sessionWrapper}
+                    sessionSubscriptionsWrapper={
+                      this.props.sessionSubscriptionsWrapper
+                    }
+                  />
+                </Route>
 
-                  <Route path="/leaderboard">
-                    <LeaderboardPage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/leaderboard">
+                  <LeaderboardPage sessionWrapper={this.props.sessionWrapper} />
+                </Route>
 
-                  <Route path="/login">
-                    <LoginPage
-                      sessionWrapper={this.props.sessionWrapper}
-                      querySessionAction={this.props.querySessionAction}
-                      querySessionSubscriptionsAction={
-                        this.props.querySessionSubscriptionsAction
-                      }
-                    />
-                  </Route>
+                <Route path="/login">
+                  <LoginPage
+                    sessionWrapper={this.props.sessionWrapper}
+                    querySessionAction={this.props.querySessionAction}
+                    querySessionSubscriptionsAction={
+                      this.props.querySessionSubscriptionsAction
+                    }
+                  />
+                </Route>
 
-                  <Route path="/password-reset/verify">
-                    <PasswordResetVerificationPage
-                      sessionWrapper={this.props.sessionWrapper}
-                      querySessionAction={this.props.querySessionAction}
-                      querySessionSubscriptionsAction={
-                        this.props.querySessionSubscriptionsAction
-                      }
-                    />
-                  </Route>
+                <Route path="/password-reset/verify">
+                  <PasswordResetVerificationPage
+                    sessionWrapper={this.props.sessionWrapper}
+                    querySessionAction={this.props.querySessionAction}
+                    querySessionSubscriptionsAction={
+                      this.props.querySessionSubscriptionsAction
+                    }
+                  />
+                </Route>
 
-                  <Route path="/password-reset">
-                    <PasswordResetEmailPage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/password-reset">
+                  <PasswordResetEmailPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/profile/:username/edit">
-                    <ProfileEditFc sessionWrapper={this.props.sessionWrapper} />
-                  </Route>
+                <Route path="/profile/:username/edit">
+                  <ProfileEditFc sessionWrapper={this.props.sessionWrapper} />
+                </Route>
 
-                  <Route path="/profile/:username/ban">
-                    <ProfileBanFc sessionWrapper={this.props.sessionWrapper} />
-                  </Route>
+                <Route path="/profile/:username/ban">
+                  <ProfileBanFc sessionWrapper={this.props.sessionWrapper} />
+                </Route>
 
-                  {/* Old Profile Page */}
-                  {/* <Route path="/profile/:username">
+                {/* Old Profile Page */}
+                {/* <Route path="/profile/:username">
                     <NewProfilePage
                       sessionWrapper={this.props.sessionWrapper}
                       sessionSubscriptionsWrapper={
@@ -318,339 +314,333 @@ class PageContainer extends React.Component<
                     />
                   </Route> */}
 
-                  <Route path="/profile/:username">
-                    <ProfilePageV3
-                      sessionWrapper={this.props.sessionWrapper}
-                      sessionSubscriptionsWrapper={
-                        this.props.sessionSubscriptionsWrapper
-                      }
-                    />
-                  </Route>
+                <Route path="/profile/:username">
+                  <ProfilePageV3
+                    sessionWrapper={this.props.sessionWrapper}
+                    sessionSubscriptionsWrapper={
+                      this.props.sessionSubscriptionsWrapper
+                    }
+                  />
+                </Route>
 
-                  <Route path="/signup">
-                    <SignupPage
-                      querySessionCallback={() => {}}
-                      sessionWrapper={this.props.sessionWrapper}
-                      querySessionAction={this.props.querySessionAction}
-                    />
-                  </Route>
+                <Route path="/signup">
+                  <SignupPage
+                    querySessionCallback={() => {}}
+                    sessionWrapper={this.props.sessionWrapper}
+                    querySessionAction={this.props.querySessionAction}
+                  />
+                </Route>
 
-                  <Route path="/pricing" exact={true}>
-                    <PricingPage
-                      sessionWrapper={this.props.sessionWrapper}
-                      sessionSubscriptionsWrapper={
-                        this.props.sessionSubscriptionsWrapper
-                      }
-                    />
-                  </Route>
+                <Route path="/pricing" exact={true}>
+                  <PricingPage
+                    sessionWrapper={this.props.sessionWrapper}
+                    sessionSubscriptionsWrapper={
+                      this.props.sessionSubscriptionsWrapper
+                    }
+                  />
+                </Route>
 
-                  <Route path="/checkout_success" exact={true}>
-                    <CheckoutSuccessPage
-                      querySessionCallback={() => {}}
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
-                  <Route path="/checkout_cancel" exact={true}>
-                    <CheckoutCancelPage
-                      querySessionCallback={() => {}}
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
-                  <Route path="/portal_success" exact={true}>
-                    <PortalSuccessPage
-                      querySessionCallback={() => {}}
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/checkout_success" exact={true}>
+                  <CheckoutSuccessPage
+                    querySessionCallback={() => {}}
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
+                <Route path="/checkout_cancel" exact={true}>
+                  <CheckoutCancelPage
+                    querySessionCallback={() => {}}
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
+                <Route path="/portal_success" exact={true}>
+                  <PortalSuccessPage
+                    querySessionCallback={() => {}}
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/media/rename/:media_file_token">
-                    <MediaRenamePage />
-                  </Route>
+                <Route path="/media/rename/:media_file_token">
+                  <MediaRenamePage />
+                </Route>
 
-                  <Route path="/media/:token">
-                    <MediaPageSwitch />
-                  </Route>
+                <Route path="/media/:token">
+                  <MediaPageSwitch />
+                </Route>
 
-                  {/*                <Route path="/media/:token">
+                {/*                <Route path="/media/:token">
                     <MediaPage />
                   </Route>*/}
 
-                  {/*                 <Route path="/dev-media/:token">
+                {/*                 <Route path="/dev-media/:token">
                     <DevMediaPage />
                   </Route>*/}
 
-                  <Route path="/edit-cover-image/:token">
-                    <EditCoverImage />
-                  </Route>
+                <Route path="/edit-cover-image/:token">
+                  <EditCoverImage />
+                </Route>
 
-                  <Route path="/explore">
-                    <ExplorePage />
-                  </Route>
+                <Route path="/explore">
+                  <ExplorePage />
+                </Route>
 
-                  <Route path="/weight/:weight_token/edit">
-                    <WeightEditPage
-                      sessionWrapper={this.props.sessionWrapper}
+                <Route path="/weight/:weight_token/edit">
+                  <WeightEditPage sessionWrapper={this.props.sessionWrapper} />
+                </Route>
+
+                <Route
+                  path="/weight/:weight_token"
+                  render={props => (
+                    <WeightPage
+                      key={props.match.params.weight_token}
+                      sessionSubscriptionsWrapper={
+                        this.props.sessionSubscriptionsWrapper
+                      }
                     />
-                  </Route>
+                  )}
+                />
 
-                  <Route
-                    path="/weight/:weight_token"
-                    render={props => (
-                      <WeightPage
-                        key={props.match.params.weight_token}
-                        sessionSubscriptionsWrapper={
-                          this.props.sessionSubscriptionsWrapper
-                        }
-                      />
-                    )}
+                <Route path="/search/weights">
+                  <SearchPage />
+                </Route>
+
+                <Route path="/tts/result/:token/edit">
+                  <TtsResultEditPage
+                    sessionWrapper={this.props.sessionWrapper}
                   />
+                </Route>
 
-                  <Route path="/search/weights">
-                    <SearchPage />
-                  </Route>
+                <Route path="/tts/result/:token/delete">
+                  <TtsResultDeletePage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/tts/result/:token/edit">
-                    <TtsResultEditPage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/tts/result/:token">
+                  <TtsResultViewPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/tts/result/:token/delete">
-                    <TtsResultDeletePage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/tts/:token/edit">
+                  <TtsModelEditPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/tts/result/:token">
-                    <TtsResultViewPage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/tts/:token/delete">
+                  <TtsModelDeletePage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/tts/:token/edit">
-                    <TtsModelEditPage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/tts/:token/categories">
+                  <TtsEditCategoriesPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/tts/:token/delete">
-                    <TtsModelDeletePage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/tts/:token">
+                  <TtsModelViewPage
+                    sessionWrapper={this.props.sessionWrapper}
+                    sessionSubscriptionsWrapper={
+                      this.props.sessionSubscriptionsWrapper
+                    }
+                    textBuffer={this.props.textBuffer}
+                    setTextBuffer={this.props.setTextBuffer}
+                    clearTextBuffer={this.props.clearTextBuffer}
+                  />
+                </Route>
 
-                  <Route path="/tts/:token/categories">
-                    <TtsEditCategoriesPage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/w2l/result/:token/edit">
+                  <W2lResultEditPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/tts/:token">
-                    <TtsModelViewPage
-                      sessionWrapper={this.props.sessionWrapper}
-                      sessionSubscriptionsWrapper={
-                        this.props.sessionSubscriptionsWrapper
-                      }
-                      textBuffer={this.props.textBuffer}
-                      setTextBuffer={this.props.setTextBuffer}
-                      clearTextBuffer={this.props.clearTextBuffer}
-                    />
-                  </Route>
+                <Route path="/w2l/result/:token/delete">
+                  <W2lResultDeletePage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/w2l/result/:token/edit">
-                    <W2lResultEditPage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/w2l/result/:token">
+                  <W2lResultViewPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/w2l/result/:token/delete">
-                    <W2lResultDeletePage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/w2l/:templateToken/edit">
+                  <W2lTemplateEditPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/w2l/result/:token">
-                    <W2lResultViewPage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/w2l/:templateToken/approval">
+                  <W2lTemplateApprovePage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/w2l/:templateToken/edit">
-                    <W2lTemplateEditPage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/w2l/:templateToken/delete">
+                  <W2lTemplateDeletePage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/w2l/:templateToken/approval">
-                    <W2lTemplateApprovePage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/video">
+                  <W2lTemplateListPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/w2l/:templateToken/delete">
-                    <W2lTemplateDeletePage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/upload/tts">
+                  <UploadTtsModelPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/video">
-                    <W2lTemplateListPage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/upload/tts_model">
+                  <UploadNewTtsModelPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/upload/tts">
-                    <UploadTtsModelPage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/upload/sd">
+                  <UploadSdWeightPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/upload/tts_model">
-                    <UploadNewTtsModelPage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/upload/lora">
+                  <UploadLoraWeightPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/upload/sd">
-                    <UploadSdWeightPage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/upload/workflow">
+                  <UploadWorkflowPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/upload/lora">
-                    <UploadLoraWeightPage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/contribute">
+                  <ContributeIndexPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/upload/workflow">
-                    <UploadWorkflowPage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/moderation/user/list">
+                  <ModerationUserListFc
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/contribute">
-                    <ContributeIndexPage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/moderation/user_feature_flags/:username?">
+                  <ModerationUserFeatureFlagsPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/moderation/user/list">
-                    <ModerationUserListFc
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/moderation/ip_bans/:ipAddress">
+                  <ModerationViewIpBanFc
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/moderation/user_feature_flags/:username?">
-                    <ModerationUserFeatureFlagsPage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/moderation/ip_bans">
+                  <ModerationIpBanListFc
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/moderation/ip_bans/:ipAddress">
-                    <ModerationViewIpBanFc
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/moderation/voice_stats">
+                  <ModerationVoiceStatsFc
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/moderation/ip_bans">
-                    <ModerationIpBanListFc
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/moderation/job_stats">
+                  <ModerationJobStatsFc
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/moderation/voice_stats">
-                    <ModerationVoiceStatsFc
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/moderation/job_control">
+                  <ModerationJobControlPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
+                <Route path="/moderation/token_info">
+                  <ModerationTokenInfoPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/moderation/job_stats">
-                    <ModerationJobStatsFc
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/moderation/tts_category/list">
+                  <ModerationTtsCategoryListPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/moderation/job_control">
-                    <ModerationJobControlPage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
-                  <Route path="/moderation/token_info">
-                    <ModerationTokenInfoPage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/moderation/tts_category/edit/:token">
+                  <ModerationTtsCategoryEditPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/moderation/tts_category/list">
-                    <ModerationTtsCategoryListPage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/moderation/category/delete/:token">
+                  <ModerationCategoryDeletePage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/moderation/tts_category/edit/:token">
-                    <ModerationTtsCategoryEditPage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/moderation/approve/w2l_templates">
+                  <ModerationPendingW2lTemplatesFc
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/moderation/category/delete/:token">
-                    <ModerationCategoryDeletePage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/moderation">
+                  <ModerationPage sessionWrapper={this.props.sessionWrapper} />
+                </Route>
 
-                  <Route path="/moderation/approve/w2l_templates">
-                    <ModerationPendingW2lTemplatesFc
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route exact={true} path="/clone">
+                  <VoiceCloneRequestPage />
+                </Route>
 
-                  <Route path="/moderation">
-                    <ModerationPage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/patrons">
+                  <PatronPage sessionWrapper={this.props.sessionWrapper} />
+                </Route>
 
-                  <Route exact={true} path="/clone">
-                    <VoiceCloneRequestPage />
-                  </Route>
+                <Route path="/product-usage">
+                  <ProductUsageInfoPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/patrons">
-                    <PatronPage sessionWrapper={this.props.sessionWrapper} />
-                  </Route>
+                <Route path="/voice-conversion/:token/delete">
+                  <VcModelDeletePage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/product-usage">
-                    <ProductUsageInfoPage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/voice-conversion/:token/edit">
+                  <VcModelEditPage sessionWrapper={this.props.sessionWrapper} />
+                </Route>
 
-                  <Route path="/voice-conversion/:token/delete">
-                    <VcModelDeletePage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/voice-conversion/:token">
+                  <VcModelViewPage
+                    sessionWrapper={this.props.sessionWrapper}
+                    sessionSubscriptionsWrapper={
+                      this.props.sessionSubscriptionsWrapper
+                    }
+                    setMaybeSelectedInferenceJob={
+                      this.props.maybeSelectedVoiceConversionModel
+                    }
+                  />
+                </Route>
 
-                  <Route path="/voice-conversion/:token/edit">
-                    <VcModelEditPage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
-
-                  <Route path="/voice-conversion/:token">
-                    <VcModelViewPage
-                      sessionWrapper={this.props.sessionWrapper}
-                      sessionSubscriptionsWrapper={
-                        this.props.sessionSubscriptionsWrapper
-                      }
-                      setMaybeSelectedInferenceJob={
-                        this.props.maybeSelectedVoiceConversionModel
-                      }
-                    />
-                  </Route>
-
-                  {/* <Route path="/voice-conversion">
+                {/* <Route path="/voice-conversion">
                     <VcModelListPage
                       sessionWrapper={this.props.sessionWrapper}
                       sessionSubscriptionsWrapper={
@@ -669,32 +659,32 @@ class PageContainer extends React.Component<
                     />
                   </Route> */}
 
-                  <Route path="/dashboard">
-                    <DashboardPage sessionWrapper={this.props.sessionWrapper} />
-                  </Route>
+                <Route path="/dashboard">
+                  <DashboardPage sessionWrapper={this.props.sessionWrapper} />
+                </Route>
 
-                  <Route path="/welcome-to-studio">
-                    <WelcomePage sessionWrapper={this.props.sessionWrapper} />
-                  </Route>
+                <Route path="/welcome-to-studio">
+                  <WelcomePage sessionWrapper={this.props.sessionWrapper} />
+                </Route>
 
-                  <Route path="/about">
-                    <AboutPage />
-                  </Route>
+                <Route path="/about">
+                  <AboutPage />
+                </Route>
 
-                  <Route path="/face-animator/:mediaToken?">
-                    <FaceAnimator
-                      {...{
-                        sessionSubscriptionsWrapper:
-                          this.props.sessionSubscriptionsWrapper,
-                      }}
-                    />
-                  </Route>
+                <Route path="/face-animator/:mediaToken?">
+                  <FaceAnimator
+                    {...{
+                      sessionSubscriptionsWrapper:
+                        this.props.sessionSubscriptionsWrapper,
+                    }}
+                  />
+                </Route>
 
-                  <Route path="/fbx-to-gltf/:mediaToken?">
-                    <FbxToGltfPage />
-                  </Route>
+                <Route path="/fbx-to-gltf/:mediaToken?">
+                  <FbxToGltfPage />
+                </Route>
 
-                  {/*
+                {/*
                   // <Route path="/studio/:mediaToken?">
                   //   <StorytellerStudioListPage
                   //     sessionWrapper={this.props.sessionWrapper}
@@ -705,203 +695,200 @@ class PageContainer extends React.Component<
                   // </Route>
                     */}
 
-                  <Route path="/commissions">
-                    <CommunityCommissionsPage />
-                  </Route>
+                <Route path="/commissions">
+                  <CommunityCommissionsPage />
+                </Route>
 
-                  <Route path="/terms">
-                    <TermsPage />
-                  </Route>
+                <Route path="/terms">
+                  <TermsPage />
+                </Route>
 
-                  <Route path="/privacy">
-                    <PrivacyPage />
-                  </Route>
+                <Route path="/privacy">
+                  <PrivacyPage />
+                </Route>
 
-                  <Route path="/guide">
-                    <GuidePage />
-                  </Route>
+                <Route path="/guide">
+                  <GuidePage />
+                </Route>
 
-                  <Route path="/old">
-                    <VocodesPage />
-                  </Route>
+                <Route path="/old">
+                  <VocodesPage />
+                </Route>
 
-                  <Route path="/dev-upload">
-                    <DevUpload />
-                  </Route>
+                <Route path="/dev-upload">
+                  <DevUpload />
+                </Route>
 
-                  <Route path="/dev-upload-alt">
-                    <DevUploadAlt />
-                  </Route>
+                <Route path="/dev-upload-alt">
+                  <DevUploadAlt />
+                </Route>
 
-                  <Route path="/dev-media-input">
-                    <DevMediaInput />
-                  </Route>
+                <Route path="/dev-media-input">
+                  <DevMediaInput />
+                </Route>
 
-                  {/* NEW TTS PAGE */}
-                  <Route exact path="/tts">
-                    <NewTTS
-                      sessionSubscriptionsWrapper={
-                        this.props.sessionSubscriptionsWrapper
-                      }
-                    />
-                  </Route>
+                {/* NEW TTS PAGE */}
+                <Route exact path="/tts">
+                  <NewTTS
+                    sessionSubscriptionsWrapper={
+                      this.props.sessionSubscriptionsWrapper
+                    }
+                  />
+                </Route>
 
-                  {/* NEW VC PAGE */}
-                  <Route exact path="/voice-conversion">
-                    <NewVC
-                      sessionSubscriptionsWrapper={
-                        this.props.sessionSubscriptionsWrapper
-                      }
-                    />
-                  </Route>
+                {/* NEW VC PAGE */}
+                <Route exact path="/voice-conversion">
+                  <NewVC
+                    sessionSubscriptionsWrapper={
+                      this.props.sessionSubscriptionsWrapper
+                    }
+                  />
+                </Route>
 
-                  {/* NEW LIVE PORTRAIT PAGE */}
-                  <Route exact path="/ai-live-portrait">
-                    <LivePortrait
-                      sessionSubscriptionsWrapper={
-                        this.props.sessionSubscriptionsWrapper
-                      }
-                    />
-                  </Route>
+                {/* NEW LIVE PORTRAIT PAGE */}
+                <Route exact path="/ai-live-portrait">
+                  <LivePortrait
+                    sessionSubscriptionsWrapper={
+                      this.props.sessionSubscriptionsWrapper
+                    }
+                  />
+                </Route>
 
-                  {/* Route for initial voice creation */}
-                  <Route exact path="/voice-designer/create">
-                    <VoiceDesignerFormPage
-                      {...{
-                        sessionWrapper: this.props.sessionWrapper,
-                        sessionSubscriptionsWrapper:
-                          this.props.sessionSubscriptionsWrapper,
-                      }}
-                    />
-                  </Route>
+                {/* Route for initial voice creation */}
+                <Route exact path="/voice-designer/create">
+                  <VoiceDesignerFormPage
+                    {...{
+                      sessionWrapper: this.props.sessionWrapper,
+                      sessionSubscriptionsWrapper:
+                        this.props.sessionSubscriptionsWrapper,
+                    }}
+                  />
+                </Route>
 
-                  {/* Route for editing the dataset details */}
-                  <Route
-                    exact
-                    path="/voice-designer/dataset/:dataset_token/edit"
-                  >
-                    <VoiceDesignerFormPage
-                      {...{
-                        sessionWrapper: this.props.sessionWrapper,
-                        sessionSubscriptionsWrapper:
-                          this.props.sessionSubscriptionsWrapper,
-                      }}
-                    />
-                  </Route>
+                {/* Route for editing the dataset details */}
+                <Route exact path="/voice-designer/dataset/:dataset_token/edit">
+                  <VoiceDesignerFormPage
+                    {...{
+                      sessionWrapper: this.props.sessionWrapper,
+                      sessionSubscriptionsWrapper:
+                        this.props.sessionSubscriptionsWrapper,
+                    }}
+                  />
+                </Route>
 
-                  {/* Route for handling dataset token for uploading samples */}
-                  <Route
-                    exact
-                    path="/voice-designer/dataset/:dataset_token/upload"
-                  >
-                    <VoiceDesignerFormPage
-                      {...{
-                        sessionWrapper: this.props.sessionWrapper,
-                        sessionSubscriptionsWrapper:
-                          this.props.sessionSubscriptionsWrapper,
-                      }}
-                    />
-                  </Route>
+                {/* Route for handling dataset token for uploading samples */}
+                <Route
+                  exact
+                  path="/voice-designer/dataset/:dataset_token/upload"
+                >
+                  <VoiceDesignerFormPage
+                    {...{
+                      sessionWrapper: this.props.sessionWrapper,
+                      sessionSubscriptionsWrapper:
+                        this.props.sessionSubscriptionsWrapper,
+                    }}
+                  />
+                </Route>
 
-                  <Route path="/voice-designer/voice/:voice_token/edit">
-                    <VoiceDesignerVoiceEditPage />
-                  </Route>
+                <Route path="/voice-designer/voice/:voice_token/edit">
+                  <VoiceDesignerVoiceEditPage />
+                </Route>
 
-                  <Route path="/voice-designer/voice/:voice_token">
-                    <VoiceDesignerUseVoicePage
-                      sessionWrapper={this.props.sessionWrapper}
-                      sessionSubscriptionsWrapper={
-                        this.props.sessionSubscriptionsWrapper
-                      }
-                    />
-                  </Route>
+                <Route path="/voice-designer/voice/:voice_token">
+                  <VoiceDesignerUseVoicePage
+                    sessionWrapper={this.props.sessionWrapper}
+                    sessionSubscriptionsWrapper={
+                      this.props.sessionSubscriptionsWrapper
+                    }
+                  />
+                </Route>
 
-                  <Route path="/inference-jobs-list">
-                    <InferenceJobsPage />
-                  </Route>
+                <Route path="/inference-jobs-list">
+                  <InferenceJobsPage />
+                </Route>
 
-                  <Route path="/voice-designer">
-                    <VoiceDesignerMainPage />
-                  </Route>
+                <Route path="/voice-designer">
+                  <VoiceDesignerMainPage />
+                </Route>
 
-                  <Route path="/style-video/:mediaToken?">
-                    <StyleVideo />
-                  </Route>
+                <Route path="/style-video/:mediaToken?">
+                  <StyleVideo />
+                </Route>
 
-                  <Route path="/generate-speech">
-                    <GenerateSpeechPage />
-                  </Route>
+                <Route path="/generate-speech">
+                  <GenerateSpeechPage />
+                </Route>
 
-                  <Route path="/video-mocap/:mediaToken?">
-                    <VideoMocap
-                      {...{
-                        sessionWrapper: this.props.sessionWrapper,
-                      }}
-                    />
-                  </Route>
+                <Route path="/video-mocap/:mediaToken?">
+                  <VideoMocap
+                    {...{
+                      sessionWrapper: this.props.sessionWrapper,
+                    }}
+                  />
+                </Route>
 
-                  <Route path="/video-workflow">
-                    <VideoWorkflowPage
-                      {...{
-                        sessionWrapper: this.props.sessionWrapper,
-                      }}
-                    />
-                  </Route>
+                <Route path="/video-workflow">
+                  <VideoWorkflowPage
+                    {...{
+                      sessionWrapper: this.props.sessionWrapper,
+                    }}
+                  />
+                </Route>
 
-                  <Route path="/text-to-image">
-                    <TextToImagePage
-                      sessionSubscriptionsWrapper={
-                        this.props.sessionSubscriptionsWrapper
-                      }
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/text-to-image">
+                  <TextToImagePage
+                    sessionSubscriptionsWrapper={
+                      this.props.sessionSubscriptionsWrapper
+                    }
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/character/donald-trump">
-                    <TrumpTtsPage
-                      sessionWrapper={this.props.sessionWrapper}
-                      sessionSubscriptionsWrapper={
-                        this.props.sessionSubscriptionsWrapper
-                      }
-                      textBuffer={this.props.textBuffer}
-                      setTextBuffer={this.props.setTextBuffer}
-                      clearTextBuffer={this.props.clearTextBuffer}
-                      ttsModels={this.props.ttsModels}
-                      setTtsModels={this.props.setTtsModels}
-                      allTtsCategories={this.props.allTtsCategories}
-                      setAllTtsCategories={this.props.setAllTtsCategories}
-                      allTtsCategoriesByTokenMap={
-                        this.props.allTtsCategoriesByTokenMap
-                      }
-                      computedTtsCategoryAssignments={
-                        this.props.computedTtsCategoryAssignments
-                      }
-                      setComputedTtsCategoryAssignments={
-                        this.props.setComputedTtsCategoryAssignments
-                      }
-                      allTtsModelsByTokenMap={this.props.allTtsModelsByTokenMap}
-                      ttsModelsByCategoryToken={
-                        this.props.ttsModelsByCategoryToken
-                      }
-                      dropdownCategories={this.props.dropdownCategories}
-                      setDropdownCategories={this.props.setDropdownCategories}
-                      selectedCategories={this.props.selectedCategories}
-                      setSelectedCategories={this.props.setSelectedCategories}
-                      maybeSelectedTtsModel={this.props.maybeSelectedTtsModel}
-                      setMaybeSelectedTtsModel={
-                        this.props.setMaybeSelectedTtsModel
-                      }
-                      selectedTtsLanguageScope={
-                        this.props.selectedTtsLanguageScope
-                      }
-                      setSelectedTtsLanguageScope={
-                        this.props.setSelectedTtsLanguageScope
-                      }
-                    />
-                  </Route>
+                <Route path="/character/donald-trump">
+                  <TrumpTtsPage
+                    sessionWrapper={this.props.sessionWrapper}
+                    sessionSubscriptionsWrapper={
+                      this.props.sessionSubscriptionsWrapper
+                    }
+                    textBuffer={this.props.textBuffer}
+                    setTextBuffer={this.props.setTextBuffer}
+                    clearTextBuffer={this.props.clearTextBuffer}
+                    ttsModels={this.props.ttsModels}
+                    setTtsModels={this.props.setTtsModels}
+                    allTtsCategories={this.props.allTtsCategories}
+                    setAllTtsCategories={this.props.setAllTtsCategories}
+                    allTtsCategoriesByTokenMap={
+                      this.props.allTtsCategoriesByTokenMap
+                    }
+                    computedTtsCategoryAssignments={
+                      this.props.computedTtsCategoryAssignments
+                    }
+                    setComputedTtsCategoryAssignments={
+                      this.props.setComputedTtsCategoryAssignments
+                    }
+                    allTtsModelsByTokenMap={this.props.allTtsModelsByTokenMap}
+                    ttsModelsByCategoryToken={
+                      this.props.ttsModelsByCategoryToken
+                    }
+                    dropdownCategories={this.props.dropdownCategories}
+                    setDropdownCategories={this.props.setDropdownCategories}
+                    selectedCategories={this.props.selectedCategories}
+                    setSelectedCategories={this.props.setSelectedCategories}
+                    maybeSelectedTtsModel={this.props.maybeSelectedTtsModel}
+                    setMaybeSelectedTtsModel={
+                      this.props.setMaybeSelectedTtsModel
+                    }
+                    selectedTtsLanguageScope={
+                      this.props.selectedTtsLanguageScope
+                    }
+                    setSelectedTtsLanguageScope={
+                      this.props.setSelectedTtsLanguageScope
+                    }
+                  />
+                </Route>
 
-                  {/* OLD TTS PAGE */}
-                  {/* <Route path="/tts" exact={true}>
+                {/* OLD TTS PAGE */}
+                {/* <Route path="/tts" exact={true}>
                     <TtsModelListPage
                       sessionWrapper={this.props.sessionWrapper}
                       sessionSubscriptionsWrapper={
@@ -967,51 +954,51 @@ class PageContainer extends React.Component<
                     />
                   </Route> */}
 
-                  <Route path="/studio-mobile-check">
-                    <StudioMobileCheckPage />
-                  </Route>
+                <Route path="/studio-mobile-check">
+                  <StudioMobileCheckPage />
+                </Route>
 
-                  <Route path="/category/create">
-                    <CreateCategoryPage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/category/create">
+                  <CreateCategoryPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/creator-onboarding">
-                    <CreatorTypeformPage />
-                  </Route>
+                <Route path="/creator-onboarding">
+                  <CreatorTypeformPage />
+                </Route>
 
-                  <Route path="/welcome">
-                    <SignUpSuccessPage />
-                  </Route>
+                <Route path="/welcome">
+                  <SignUpSuccessPage />
+                </Route>
 
-                  <Route path="/beta-key/create">
-                    <CreateBetaKeyPage />
-                  </Route>
+                <Route path="/beta-key/create">
+                  <CreateBetaKeyPage />
+                </Route>
 
-                  <Route path="/beta-key/redeem/success">
-                    <RedeemSuccessPage />
-                  </Route>
+                <Route path="/beta-key/redeem/success">
+                  <RedeemSuccessPage />
+                </Route>
 
-                  <Route path="/beta-key/redeem/:token?">
-                    <RedeemBetaKeyPage />
-                  </Route>
+                <Route path="/beta-key/redeem/:token?">
+                  <RedeemBetaKeyPage />
+                </Route>
 
-                  <Route path="/beta-key/list">
-                    <BetaKeysListPage />
-                  </Route>
+                <Route path="/beta-key/list">
+                  <BetaKeysListPage />
+                </Route>
 
-                  <Route path="/tools">
-                    <CreatorToolsPage
-                      sessionWrapper={this.props.sessionWrapper}
-                    />
-                  </Route>
+                <Route path="/tools">
+                  <CreatorToolsPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-                  <Route path="/waitlist-next-steps">
-                    <WaitlistNextStepsPage />
-                  </Route>
+                <Route path="/waitlist-next-steps">
+                  <WaitlistNextStepsPage />
+                </Route>
 
-                  {/* <Route path="/ai-live-portrait">
+                {/* <Route path="/ai-live-portrait">
                     <AIFaceMirror
                       {...{
                         sessionSubscriptionsWrapper:
@@ -1020,7 +1007,7 @@ class PageContainer extends React.Component<
                     />
                   </Route> */}
 
-                  {/*
+                {/*
                   // <Route path="/engine-compositor">
                   //   <EngineCompositor
                   //     sessionWrapper={this.props.sessionWrapper}
@@ -1028,17 +1015,15 @@ class PageContainer extends React.Component<
                   // </Route>
                     */}
 
-                  <Route path="/" exact={true}>
-                    <LandingPage
-                      sessionWrapper={this.props.sessionWrapper}
-                      sessionSubscriptionsWrapper={
-                        this.props.sessionSubscriptionsWrapper
-                      }
-                    />
-                  </Route>
-                </Switch>
-              </div>
-              <FooterNav sessionWrapper={this.props.sessionWrapper} />
+                <Route path="/" exact={true}>
+                  <LandingPage
+                    sessionWrapper={this.props.sessionWrapper}
+                    sessionSubscriptionsWrapper={
+                      this.props.sessionSubscriptionsWrapper
+                    }
+                  />
+                </Route>
+              </Switch>
             </div>
           </div>
         </SearchProvider>