landing demo/nav update

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;
+}

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
               ) : (

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 {

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;
+  }
+}

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;

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>
   );
 }

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}