From c9ca9fec6ca45c30dcc6172d673618e8fc7e7130 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Thu, 22 Feb 2024 18:20:48 +0700
Subject: [PATCH] landing demo/nav update

---
 .../src/components/layout/TopNav/TopNav.scss  |  6 ++
 .../src/components/layout/TopNav/TopNav.tsx   | 68 +++++++++++++------
 packages/fakeyou.com/src/scss/nav.scss        |  3 +-
 .../v2/view/pages/landing/LandingPage.scss    | 11 +++
 .../src/v2/view/pages/landing/LandingPage.tsx |  1 +
 .../landing/fakeyou/FakeYouLandingHeader.tsx  |  4 +-
 .../LandingDemo/FakeYouLandingDemo.tsx        | 19 +++++-
 7 files changed, 87 insertions(+), 25 deletions(-)
 create mode 100644 packages/fakeyou.com/src/components/layout/TopNav/TopNav.scss
 create mode 100644 packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.scss

diff --git a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.scss b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.scss
new file mode 100644
index 0000000000..3ff22966dd
--- /dev/null
+++ b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.scss
@@ -0,0 +1,6 @@
+@import "scss/colours.scss";
+
+.topbar-bg-dark {
+  background-color: $bg !important;
+  border-bottom: 1px solid transparent !important;
+}
diff --git a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx
index 93011ebe2a..4923bdad09 100644
--- a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx
+++ b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx
@@ -20,6 +20,7 @@ import { InferenceJobsModal } from "components/modals";
 import { useDomainConfig } from "context/DomainConfigContext";
 import NavItem from "../../common/NavItem/NavItem";
 import ProfileDropdown from "components/common/ProfileDropdown";
+import "./TopNav.scss";
 
 interface TopNavProps {
   sessionWrapper: SessionWrapper;
@@ -50,6 +51,9 @@ export default function TopNav({
 
   const { open } = useModal();
   const openModal = () => open({ component: InferenceJobsModal });
+  const [isScrolled, setIsScrolled] = useState(false);
+  const loggedIn = sessionWrapper.isLoggedIn();
+  const showNavItem = !loggedIn && (isOnLandingPage || isOnLoginOrSignUpPage);
 
   const handleMenuButtonClick = () => {
     if (window.innerWidth < 1200) {
@@ -101,6 +105,22 @@ export default function TopNav({
     };
   }, []);
 
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 100) {
+        setIsScrolled(true);
+      } else {
+        setIsScrolled(false);
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
   const logoutHandler = async () => {
     await Logout();
     querySessionCallback();
@@ -108,8 +128,6 @@ export default function TopNav({
     history.push("/");
   };
 
-  const loggedIn = sessionWrapper.isLoggedIn();
-
   let profileDropdown = <></>;
 
   const { user } = useSession();
@@ -157,7 +175,12 @@ export default function TopNav({
   ];
 
   return (
-    <div id="topbar-wrapper" className="position-fixed">
+    <div
+      id="topbar-wrapper"
+      className={`position-fixed ${
+        !loggedIn && isOnLandingPage && !isScrolled ? "topbar-bg-dark" : ""
+      }`}
+    >
       <div className="topbar-nav">
         <div className="topbar-nav-left">
           <div className="d-flex gap-3 align-items-center">
@@ -175,8 +198,7 @@ export default function TopNav({
                 className="mb-0 d-block d-lg-none"
               />
             </Link>
-            {((!loggedIn && isOnLandingPage) ||
-              (!loggedIn && isOnLoginOrSignUpPage)) && (
+            {showNavItem && (
               <div className="d-none d-lg-block">
                 <NavItem
                   isHoverable={true}
@@ -191,17 +213,18 @@ export default function TopNav({
         <div className="topbar-nav-center">
           {/* Search Bar */}
           <div className="d-none d-lg-block">
-            <SearchBar
-              onFocus={onFocusHandler}
-              onBlur={onBlurHandler}
-              isFocused={isFocused}
-            />
+            {isScrolled && (
+              <SearchBar
+                onFocus={onFocusHandler}
+                onBlur={onBlurHandler}
+                isFocused={isFocused}
+              />
+            )}
           </div>
         </div>
 
         <div className="topbar-nav-right">
-          {((!loggedIn && isOnLandingPage) ||
-            (!loggedIn && isOnLoginOrSignUpPage)) && (
+          {showNavItem && (
             <NavItem
               icon={faStar}
               label="Pricing"
@@ -212,15 +235,18 @@ export default function TopNav({
 
           <div className="d-flex align-items-center gap-2">
             <div className="d-none d-lg-flex gap-2">
-              <Button
-                {...{
-                  icon: faClipboardList,
-                  label: "My Jobs",
-                  onClick: openModal,
-                  variant: "secondary",
-                  small: true,
-                }}
-              />
+              {!showNavItem && (
+                <Button
+                  {...{
+                    icon: faClipboardList,
+                    label: "My Jobs",
+                    onClick: openModal,
+                    variant: "secondary",
+                    small: true,
+                  }}
+                />
+              )}
+
               {loggedIn ? (
                 profileDropdown
               ) : (
diff --git a/packages/fakeyou.com/src/scss/nav.scss b/packages/fakeyou.com/src/scss/nav.scss
index e5130499c8..93641d91d4 100644
--- a/packages/fakeyou.com/src/scss/nav.scss
+++ b/packages/fakeyou.com/src/scss/nav.scss
@@ -168,8 +168,9 @@ $topbar-height: 66px;
   width: 100%;
   height: $topbar-height;
   background: $panel;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.0705882353) !important;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.0705882353);
   z-index: 1000;
+  transition: all 0.1s ease;
 }
 
 .topbar-nav {
diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.scss b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.scss
new file mode 100644
index 0000000000..51199176bf
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.scss
@@ -0,0 +1,11 @@
+.fy-header {
+  padding-top: 4rem;
+  padding-bottom: 7rem;
+}
+
+@media (max-width: 992px) {
+  .fy-header {
+    padding-top: 0rem;
+    padding-bottom: 0rem;
+  }
+}
diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx
index 89b243ddf7..a67512ddad 100644
--- a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx
@@ -15,6 +15,7 @@ import {
   InferenceJob,
 } from "@storyteller/components/src/jobs/InferenceJob";
 import { TtsInferenceJob } from "@storyteller/components/src/jobs/TtsInferenceJobs";
+import "./LandingPage.scss";
 
 interface Props {
   sessionWrapper: SessionWrapper;
diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/FakeYouLandingHeader.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/FakeYouLandingHeader.tsx
index 2a3f0fab5d..f606b93162 100644
--- a/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/FakeYouLandingHeader.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/FakeYouLandingHeader.tsx
@@ -37,7 +37,7 @@ export default function FakeYouLandingHeader({
   const { t } = useLocalize("LandingPage");
 
   return (
-    <>
+    <div className="d-flex flex-column fy-header">
       <Alert
         id="text-to-image-alert"
         icon={faSparkles}
@@ -79,6 +79,6 @@ export default function FakeYouLandingHeader({
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 }
diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/FakeYouLandingDemo.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/FakeYouLandingDemo.tsx
index 86468612b3..b83310382e 100644
--- a/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/FakeYouLandingDemo.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/FakeYouLandingDemo.tsx
@@ -56,6 +56,23 @@ export default function LandingDemo({
   const [lastSelectedVoice, setLastSelectedVoice] = useState<string | null>(
     null
   );
+  const [placeholder, setPlaceholder] = useState("");
+
+  const placeholderTexts = [
+    "You can make a video, animation, or any content you want with your favorite voices.",
+    "Try using this voice to make a custom greeting, away message, or something special for your friends.",
+    "You can change what I say with this voice. Just type it!",
+    "Enter the text you want the voice to say here...",
+  ];
+
+  useEffect(() => {
+    // Randomize placeholder text on component mount
+    const randomPlaceholderIndex = Math.floor(
+      Math.random() * placeholderTexts.length
+    );
+    setPlaceholder(placeholderTexts[randomPlaceholderIndex]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const handleChangeText = (ev: React.FormEvent<HTMLTextAreaElement>) => {
     const textValue = (ev.target as HTMLTextAreaElement).value;
@@ -228,7 +245,7 @@ export default function LandingDemo({
             />
           </div>
           <TextArea
-            placeholder="Enter the text you want the voice to say here..."
+            placeholder={placeholder}
             value={textBuffer}
             onChange={handleChangeText}
             rows={4}