Merge pull request #533 from storytold/bflat-fy-storyteller-landing-reel

Bflat fy storyteller landing reel

packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss

@@ -16,12 +16,17 @@
     padding-top: 7.25px !important;
     padding-bottom: 7.25px !important;
     border-radius: 0.5rem 0 0 0.5rem !important;
+    background-color: $input-dark !important;
     position: relative;
     z-index: 3;
 
     &::placeholder {
       color: rgba($white, 0.3) !important;
     }
+
+    &.landing-search {
+      background-color: rgba($input-dark, 0.5) !important;
+    }
   }
 }
 

packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx

@@ -95,8 +95,15 @@ export default function TopNav({
   };
 
   useEffect(() => {
+    const topBarWrapper = document.getElementById("topbar-wrapper");
+
     const handleMenuToggle = (event: any) => {
       setMenuButtonIcon(event.detail.isOpen ? faXmark : faBars);
+      if (event.detail.isOpen) {
+        topBarWrapper?.classList.remove("topbar-wrapper-transparent");
+      } else {
+        topBarWrapper?.classList.add("topbar-wrapper-transparent");
+      }
     };
 
     window.addEventListener("menuToggle", handleMenuToggle);

packages/fakeyou.com/src/scss/nav.scss

@@ -61,6 +61,10 @@ $topbar-height: 66px;
   padding-left: 260px;
   padding-top: $topbar-height;
   transition: all 0.2s ease;
+
+  &.no-page-padding-top {
+    padding-top: 0;
+  }
 }
 
 /* Sidebar Styles */
@@ -171,7 +175,11 @@ $topbar-height: 66px;
   background: $panel;
   border-bottom: 1px solid rgba(255, 255, 255, 0.04);
   z-index: 1000;
-  transition: all 0.1s ease;
+  transition: 0.15s;
+
+  &.topbar-wrapper-transparent {
+    background: none;
+  }
 }
 
 .topbar-nav {

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

@@ -10,6 +10,7 @@ import Dashboard from "./Dashboard";
 import FakeYouLandingBody from "./fakeyou/FakeYouLandingBody";
 import { useDomainConfig } from "context/DomainConfigContext";
 import StorytellerLanding from "./storyteller/StorytellerLanding";
+import LandingVideoReel from "./components/LandingVideoReel";
 import {
   FrontendInferenceJobType,
   InferenceJob,
@@ -39,6 +40,7 @@ function LandingPage(props: Props) {
 
   return (
     <>
+      {domain.title === "Storyteller AI" && !isLoggedIn && <LandingVideoReel />}
       <Container type="panel">
         {domain.title === "FakeYou" ? (
           <>

packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel.tsx

@@ -0,0 +1,69 @@
+import { Button } from "components/common";
+import React, { useEffect } from "react";
+
+interface LandingVideoReelProps {}
+
+export default function LandingVideoReel(props: LandingVideoReelProps) {
+  const isOnLandingPage = window.location.pathname === "/";
+
+  useEffect(() => {
+    const contentWrapper = document.getElementById("page-content-wrapper");
+    const topBarWrapper = document.getElementById("topbar-wrapper");
+    const searchBar = document.querySelector(".search-field .form-control");
+
+    const handleScroll = () => {
+      if (window.scrollY > 100) {
+        topBarWrapper?.classList.remove("topbar-wrapper-transparent");
+        searchBar?.classList.remove("landing-search");
+      } else {
+        topBarWrapper?.classList.add("topbar-wrapper-transparent");
+        searchBar?.classList.add("landing-search");
+      }
+    };
+
+    if (isOnLandingPage) {
+      contentWrapper?.classList.add("no-page-padding-top");
+      topBarWrapper?.classList.add("topbar-wrapper-transparent");
+      searchBar?.classList.add("landing-search");
+      window.addEventListener("scroll", handleScroll);
+    } else {
+      contentWrapper?.classList.remove("no-page-padding-top");
+      topBarWrapper?.classList.remove("topbar-wrapper-transparent");
+      searchBar?.classList.remove("landing-search");
+      window.removeEventListener("scroll", handleScroll);
+    }
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      topBarWrapper?.classList.remove("topbar-wrapper-transparent");
+      searchBar?.classList.remove("landing-search");
+      contentWrapper?.classList.remove("no-page-padding-top");
+    };
+  }, [isOnLandingPage]);
+
+  return (
+    <div className="vh-100 d-flex align-items-center justify-content-center position-relative">
+      <video
+        autoPlay
+        muted
+        loop
+        className="position-absolute w-100 h-100"
+        style={{ objectFit: "cover" }}
+      >
+        <source src="/videos/landing-reel.mp4" type="video/mp4" />
+      </video>
+      <div
+        className="position-absolute w-100 h-100"
+        style={{ backgroundColor: "rgba(20, 20, 27, 0.6)", zIndex: 0 }}
+      />
+      <div className="text-center text-white d-flex flex-column align-items-center zi-2">
+        <h1 className="display-2 fw-bolder">Visuals and Audio with AI</h1>
+        <h5 className="fw-normal mb-3 mt-2 w-75 lh-base opacity-75">
+          We are combining generative AI and User Generated Content to radically
+          democratize both audio and video production.
+        </h5>
+        <Button label="Sign Up Now" to="/signup" className="mt-5" />
+      </div>
+    </div>
+  );
+}

packages/fakeyou.com/src/v2/view/pages/landing/storyteller/StorytellerLanding.tsx

@@ -18,7 +18,7 @@ export default function StorytellerLanding(props: StorytellerLandingProps) {
 
   return (
     <>
-      <Container type="panel" className="py-5">
+      {/* <Container type="panel" className="py-5">
         <Panel clear={true} className="py-lg-5">
           <div className="row g-5 g-lg-5 flex-row-reverse">
             <div className="col-12 col-md-6">
@@ -65,126 +65,121 @@ export default function StorytellerLanding(props: StorytellerLandingProps) {
             </div>
           </div>
         </Panel>
-      </Container>
+      </Container> */}
 
-      <div className="panel rounded-0 py-5 my-5">
-        <Container type="panel" className="py-lg-5">
-          <Panel clear={true}>
-            <div className="d-flex flex-column align-items-center rounded-0 mt-lg-4 pt-lg-4">
-              <div className="d-flex flex-column align-items-center text-center cta-container">
-                <h2 className="fw-bold">AI Audio Generation</h2>
-                <p className="mw-300 opacity-75">{t("ctaText")}</p>
-                <div className="d-flex d-lg-none align-items-center mt-2 cta-mobile">
-                  <img
-                    src="/images/landing/hanashi-before.webp"
-                    alt="hanashi before"
-                    width={200}
-                    height={200}
-                  />
-                  <img
-                    src="/images/landing/chevrons-red.webp"
-                    alt="red chevrons"
-                    width={95}
-                    height={80}
-                  />
-                  <img
-                    src="/images/landing/hanashi-after.webp"
-                    alt="hanashi after"
-                    width={200}
-                    height={200}
-                  />
-                </div>
+      <Container type="panel" className="py-lg-5 mt-5">
+        <Panel clear={true}>
+          <div className="d-flex flex-column align-items-center rounded-0 mt-lg-4 pt-lg-4">
+            <div className="d-flex flex-column align-items-center text-center cta-container">
+              <h2 className="fw-bold">AI Audio Generation</h2>
+              <p className="mw-300 opacity-75">{t("ctaText")}</p>
+              <div className="d-flex d-lg-none align-items-center mt-2 cta-mobile">
                 <img
                   src="/images/landing/hanashi-before.webp"
                   alt="hanashi before"
-                  className="hanashi-before d-none d-lg-block"
-                  width={311}
-                  height={311}
-                />
-                <img
-                  src="/images/landing/chevrons-grey.webp"
-                  alt="grey chevrons"
-                  className="chevrons-grey d-none d-lg-block"
-                  width={127}
-                  height={108}
+                  width={200}
+                  height={200}
                 />
                 <img
                   src="/images/landing/chevrons-red.webp"
                   alt="red chevrons"
-                  className="chevrons-red d-none d-lg-block"
-                  width={127}
-                  height={108}
+                  width={95}
+                  height={80}
                 />
                 <img
                   src="/images/landing/hanashi-after.webp"
                   alt="hanashi after"
-                  className="hanashi-after d-none d-lg-block"
-                  width={311}
-                  height={311}
+                  width={200}
+                  height={200}
                 />
               </div>
+              <img
+                src="/images/landing/hanashi-before.webp"
+                alt="hanashi before"
+                className="hanashi-before d-none d-lg-block"
+                width={311}
+                height={311}
+              />
+              <img
+                src="/images/landing/chevrons-grey.webp"
+                alt="grey chevrons"
+                className="chevrons-grey d-none d-lg-block"
+                width={127}
+                height={108}
+              />
+              <img
+                src="/images/landing/chevrons-red.webp"
+                alt="red chevrons"
+                className="chevrons-red d-none d-lg-block"
+                width={127}
+                height={108}
+              />
+              <img
+                src="/images/landing/hanashi-after.webp"
+                alt="hanashi after"
+                className="hanashi-after d-none d-lg-block"
+                width={311}
+                height={311}
+              />
             </div>
-            <div className="row gy-4 mt-lg-3">
-              <div className="col-12 col-md-6">
-                <Panel padding={true} className="panel-inner rounded h-100">
-                  <div className="d-flex gap-2">
-                    <h4 className="fw-semibold mb-4 flex-grow-1">
-                      <FontAwesomeIcon icon={faMessageDots} className="me-3" />
-                      Text to Speech
-                    </h4>
-                    <Link to="/tts">
-                      Try more voices{" "}
-                      <FontAwesomeIcon icon={faArrowRight} className="ms-1" />
-                    </Link>
-                  </div>
+          </div>
+          <div className="row gy-4 mt-lg-3">
+            <div className="col-12 col-md-6">
+              <Panel padding={true} className="panel-inner rounded h-100">
+                <div className="d-flex gap-2">
+                  <h4 className="fw-semibold mb-4 flex-grow-1">
+                    <FontAwesomeIcon icon={faMessageDots} className="me-3" />
+                    Text to Speech
+                  </h4>
+                  <Link to="/tts">
+                    Try more voices{" "}
+                    <FontAwesomeIcon icon={faArrowRight} className="ms-1" />
+                  </Link>
+                </div>
 
-                  <div className="d-flex flex-column gap-3">
-                    <Select label="Select a Voice" />
-                    <Input
-                      label="Your Text"
-                      placeholder="Type what you want your character to say"
+                <div className="d-flex flex-column gap-3">
+                  <Select label="Select a Voice" />
+                  <Input
+                    label="Your Text"
+                    placeholder="Type what you want your character to say"
+                  />
+                  <div className="d-flex gap-2 justify-content-end">
+                    <Button
+                      label="Generate"
+                      icon={faArrowRight}
+                      iconFlip={true}
                     />
-                    <div className="d-flex gap-2 justify-content-end">
-                      <Button
-                        label="Generate"
-                        icon={faArrowRight}
-                        iconFlip={true}
-                      />
-                    </div>
                   </div>
-                </Panel>
-              </div>
-              <div className="col-12 col-md-6">
-                <Panel padding={true} className="panel-inner rounded h-100">
-                  <div className="d-flex gap-2">
-                    <h4 className="fw-semibold mb-4 flex-grow-1">
-                      <FontAwesomeIcon
-                        icon={faWaveformLines}
-                        className="me-3"
-                      />
-                      Voice to Voice
-                    </h4>
-                    <Link to="/voice-conversion">
-                      Try more voices{" "}
-                      <FontAwesomeIcon icon={faArrowRight} className="ms-1" />
-                    </Link>
-                  </div>
-                  <div className="d-flex flex-column gap-3">
-                    <Select label="Select a Voice" />
-                    <div className="d-flex gap-2 justify-content-end">
-                      <Button
-                        label="Generate"
-                        icon={faArrowRight}
-                        iconFlip={true}
-                      />
-                    </div>
-                  </div>
-                </Panel>
-              </div>
+                </div>
+              </Panel>
             </div>
-          </Panel>
-        </Container>
-      </div>
+            <div className="col-12 col-md-6">
+              <Panel padding={true} className="panel-inner rounded h-100">
+                <div className="d-flex gap-2">
+                  <h4 className="fw-semibold mb-4 flex-grow-1">
+                    <FontAwesomeIcon icon={faWaveformLines} className="me-3" />
+                    Voice to Voice
+                  </h4>
+                  <Link to="/voice-conversion">
+                    Try more voices{" "}
+                    <FontAwesomeIcon icon={faArrowRight} className="ms-1" />
+                  </Link>
+                </div>
+                <div className="d-flex flex-column gap-3">
+                  <Select label="Select a Voice" />
+                  <div className="d-flex gap-2 justify-content-end">
+                    <Button
+                      label="Generate"
+                      icon={faArrowRight}
+                      iconFlip={true}
+                    />
+                  </div>
+                </div>
+              </Panel>
+            </div>
+          </div>
+        </Panel>
+      </Container>
 
       <Container type="panel" className="pt-5 my-5">
         <Panel padding={true}>