Merge pull request #133 from storytold/bflat-fakeyou-landing

landing page

packages/fakeyou.com/src/scss/site-refresh.scss

@@ -54,7 +54,6 @@ styles with important tags:
   .btn:active,
   .btn.focus {
     outline: 0px !important;
-    -webkit-appearance: none;
     box-shadow: none !important;
   }
 
@@ -637,6 +636,43 @@ input {
   color: $white !important;
 }
 
+.img-product {
+  &.img-tts {
+    margin-top: -100px;
+    max-height: 240px;
+  }
+
+  &.img-vc {
+    margin-top: -100px;
+    max-height: 240px;
+  }
+}
+
+.index-title {
+  line-height: 5;
+}
+
+.panel-select {
+  transition: 0.2s all;
+  cursor: pointer;
+  border-radius: 8px !important;
+  max-width: 512px;
+  border-width: 3px !important;
+
+  &:hover {
+    border-color: $primary !important;
+  }
+}
+
+.mw-lead {
+  max-width: 480px;
+}
+
+.zi-2 {
+  position: relative;
+  z-index: 2;
+}
+
 @media (min-width: 992px) {
   .fakeyou-refresh {
     .panel {
@@ -689,5 +725,15 @@ input {
     .video-card {
       min-height: 220px;
     }
+
+    .img-product {
+      &.img-tts {
+        max-height: 300px;
+      }
+
+      &.img-vc {
+        max-height: 300px;
+      }
+    }
   }
 }

packages/fakeyou.com/src/v2/nav/TopNav.tsx

@@ -355,7 +355,7 @@ function TopNav(props: Props) {
                     aria-labelledby="offcanvasNavbarLgDropdown-tts"
                   >
                     <li data-bs-toggle="offcanvas">
-                      <Link className="dropdown-item" to="/">
+                      <Link className="dropdown-item" to="/tts">
                         <FontAwesomeIcon icon={faVolumeUp} className="me-2" />
                         TTS
                       </Link>

packages/fakeyou.com/src/v2/view/PageContainer.tsx

@@ -62,6 +62,7 @@ import { CheckoutSuccessPage } from "./premium/CheckoutSuccessPage";
 import { CheckoutCancelPage } from "./premium/CheckoutCancelPage";
 import { PortalSuccessPage } from "./premium/PortalSuccessPage";
 import { PrivacyPage } from "./about/privacy_page/PrivacyPage";
+import { LandingPage } from "./landing/LandingPage";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -144,7 +145,9 @@ class PageContainer extends React.Component<Props, State> {
             logoutHandler={this.logout}
             sessionWrapper={this.props.sessionWrapper}
             querySessionCallback={this.props.querySessionAction}
-            querySessionSubscriptionsCallback={this.props.querySessionSubscriptionsAction}
+            querySessionSubscriptionsCallback={
+              this.props.querySessionSubscriptionsAction
+            }
           />
 
           <ScrollToTop />
@@ -162,7 +165,9 @@ class PageContainer extends React.Component<Props, State> {
               <LoginPage
                 sessionWrapper={this.props.sessionWrapper}
                 querySessionAction={this.props.querySessionAction}
-                querySessionSubscriptionsAction={this.props.querySessionSubscriptionsAction}
+                querySessionSubscriptionsAction={
+                  this.props.querySessionSubscriptionsAction
+                }
               />
             </Route>
 
@@ -251,7 +256,9 @@ class PageContainer extends React.Component<Props, State> {
             <Route path="/tts/:token">
               <TtsModelViewPage
                 sessionWrapper={this.props.sessionWrapper}
-                sessionSubscriptionsWrapper={this.props.sessionSubscriptionsWrapper}
+                sessionSubscriptionsWrapper={
+                  this.props.sessionSubscriptionsWrapper
+                }
                 enqueueTtsJob={this.props.enqueueTtsJob}
                 ttsInferenceJobs={this.props.ttsInferenceJobs}
                 textBuffer={this.props.textBuffer}
@@ -428,7 +435,7 @@ class PageContainer extends React.Component<Props, State> {
               <VocodesPage />
             </Route>
 
-            <Route path="/">
+            <Route path="/tts">
               <TtsModelListPage
                 sessionWrapper={this.props.sessionWrapper}
                 sessionSubscriptionsWrapper={
@@ -476,6 +483,15 @@ class PageContainer extends React.Component<Props, State> {
                 setMaybeSelectedTtsModel={this.props.setMaybeSelectedTtsModel}
               />
             </Route>
+
+            <Route path="/">
+              <LandingPage
+                sessionWrapper={this.props.sessionWrapper}
+                sessionSubscriptionsWrapper={
+                  this.props.sessionSubscriptionsWrapper
+                }
+              />
+            </Route>
           </Switch>
 
           <FooterNav sessionWrapper={this.props.sessionWrapper} />

packages/fakeyou.com/src/v2/view/landing/LandingPage.tsx

@@ -0,0 +1,173 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { motion } from "framer-motion";
+import { container, item, panel } from "../../../data/animation";
+import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper";
+import { t } from "i18next";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faUsers, faStar } from "@fortawesome/free-solid-svg-icons";
+import { faDiscord, faTwitter } from "@fortawesome/free-brands-svg-icons";
+
+interface Props {
+  sessionWrapper: SessionWrapper;
+  sessionSubscriptionsWrapper: SessionSubscriptionsWrapper;
+}
+
+function LandingPage(props: Props) {
+  let signUpButton = <></>;
+  let upgradeButton = <></>;
+
+  if (!props.sessionWrapper.isLoggedIn()) {
+    signUpButton = (
+      <>
+        <Link to="/signup">
+          <button type="button" className="btn btn-primary w-100">
+            {t("tts.TtsModelListPage.heroSection.buttons.signUp")}
+          </button>
+        </Link>
+      </>
+    );
+  }
+
+  if (props.sessionWrapper.isLoggedIn()) {
+    if (!props.sessionSubscriptionsWrapper.hasPaidFeatures()) {
+      upgradeButton = (
+        <>
+          <Link to="/pricing">
+            <button type="button" className="btn btn-primary w-100">
+              <FontAwesomeIcon icon={faStar} className="me-2" />
+              Upgrade Plan
+            </button>
+          </Link>
+        </>
+      );
+    }
+  }
+
+  return (
+    <motion.div initial="hidden" animate="visible" variants={container}>
+      <div className="container my-5 text-center d-flex flex-column align-items-center">
+        <div>
+          <motion.h1
+            className="display-4 fw-bold lh-2 mb-3 zi-2"
+            variants={item}
+          >
+            Text to Speech,
+            <br />
+            Voice, and AI Tools
+          </motion.h1>
+        </div>
+        <div>
+          <motion.p className="lead mw-lead mb-3" variants={item}>
+            Use FakeYou deep fake technology to say stuff with your favorite
+            characters.
+          </motion.p>
+        </div>
+        <motion.div
+          className="d-flex flex-column flex-md-row gap-3 justify-content-center justify-content-lg-start my-4"
+          variants={item}
+        >
+          {upgradeButton}
+          {signUpButton}
+          <Link to="/clone">
+            <button type="button" className="btn btn-secondary w-100">
+              {t("tts.TtsModelListPage.heroSection.buttons.cloneVoice")}
+            </button>
+          </Link>
+        </motion.div>
+      </div>
+      {/* <div className="d-flex justify-content-center">
+        <img
+          className="bg-audiowave"
+          src="/bg/audiowave.png"
+          height="110"
+          alt=""
+        />
+      </div> */}
+
+      <motion.div
+        className="container container-panel-blur mt-5 mb-5"
+        variants={panel}
+      >
+        <div className="row pt-5 gy-5">
+          <div className="col-12 col-md-6 text-center">
+            <Link
+              to="tts"
+              className="w-100 d-flex flex-column align-items-center"
+            >
+              <div className="panel p-3 p-lg-4 mt-5 mt-lg-0 panel-select">
+                <img
+                  className="img-fluid img-product img-tts"
+                  src="/mascot/TTS-img.webp"
+                  alt="Text to speech"
+                />
+                <h2 className="fw-bold text-white">Text to Speech</h2>
+                <h6 className="fw-normal opacity-75 text-white">
+                  Generate audio with your text input
+                </h6>
+              </div>
+            </Link>
+          </div>
+          <div className="col-12 col-md-6 text-center">
+            <Link
+              to="vc"
+              className="w-100 d-flex flex-column align-items-center"
+            >
+              <div className="panel p-3 p-lg-4 mt-5 mt-lg-0 panel-select">
+                <img
+                  className="img-fluid img-product img-vc"
+                  src="/mascot/VC-img.webp"
+                  alt="Text to speech"
+                />
+                <h2 className="fw-bold text-white">Voice Conversion</h2>
+                <h6 className="fw-normal opacity-75 text-white">
+                  Speak as someone else
+                </h6>
+              </div>
+            </Link>
+          </div>
+        </div>
+      </motion.div>
+
+      <motion.div className="container-panel my-5 py-5" variants={panel}>
+        <div className="panel p-3 p-lg-4 d-flex flex-column align-items-center justify-content-center">
+          <h2 className="panel-title fw-bold">
+            <FontAwesomeIcon icon={faUsers} className="me-3" /> Join Our
+            Community
+          </h2>
+
+          <p className="text-center mt-3 mb-4">
+            We'd love to chat with you!
+            <br />
+            Please join us in Discord if you have any questions.
+          </p>
+          <div className="d-flex flex-column flex-lg-row gap-3 mt-3 align-items-center">
+            <a
+              href="https://twitter.com/intent/follow?screen_name=FakeYouApp"
+              rel="noreferrer"
+              target="_blank"
+            >
+              <button className="btn btn-secondary">
+                <FontAwesomeIcon icon={faTwitter} className="me-2" />
+                Follow on Twitter
+              </button>
+            </a>
+            <a
+              href="https://discord.gg/fakeyou"
+              rel="noreferrer"
+              target="_blank"
+            >
+              <button className="btn btn-primary">
+                <FontAwesomeIcon icon={faDiscord} className="me-2" />
+                Join our Discord
+              </button>
+            </a>
+          </div>
+        </div>
+      </motion.div>
+    </motion.div>
+  );
+}
+
+export { LandingPage };