From 533023211eacfcdad01d9a7d13a9adc064c36a62 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Thu, 22 Feb 2024 11:27:16 +0700
Subject: [PATCH 1/8] fakeyou landing demo

---
 .../src/components/common/Button/Button.scss  |   2 +
 .../src/components/common/Button/Button.tsx   |   6 +-
 .../SelectionBubbles/SelectionBubbles.scss    |  30 +++
 .../SelectionBubbles/SelectionBubbles.tsx     |  49 ++++
 .../common/SelectionBubbles/index.tsx         |   1 +
 .../common/TempTextArea/TempTextArea.tsx      |   1 -
 .../components/common/TextArea/TextArea.scss  |  31 +++
 .../components/common/TextArea/TextArea.tsx   |  27 +-
 .../src/components/common/index.tsx           |  16 +-
 .../fakeyou.com/src/v2/view/PageContainer.tsx |   7 +
 .../src/v2/view/pages/landing/LandingPage.tsx |  18 ++
 .../landing/fakeyou/FakeYouLandingDemo.tsx    | 231 ++++++++++++++++++
 .../landing/fakeyou/FakeYouLandingHeader.tsx  | 188 +++++---------
 13 files changed, 457 insertions(+), 150 deletions(-)
 create mode 100644 packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.scss
 create mode 100644 packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/SelectionBubbles/index.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/TextArea/TextArea.scss
 create mode 100644 packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/FakeYouLandingDemo.tsx

diff --git a/packages/fakeyou.com/src/components/common/Button/Button.scss b/packages/fakeyou.com/src/components/common/Button/Button.scss
index 60d0a00c0c..fe4a74b99d 100644
--- a/packages/fakeyou.com/src/components/common/Button/Button.scss
+++ b/packages/fakeyou.com/src/components/common/Button/Button.scss
@@ -15,11 +15,13 @@
   &-square {
     width: 46.5px;
     height: 46.5px;
+    padding: 0;
   }
 
   &-square-small {
     width: 37.5px;
     height: 37.5px;
+    padding: 0;
   }
 
   &:disabled,
diff --git a/packages/fakeyou.com/src/components/common/Button/Button.tsx b/packages/fakeyou.com/src/components/common/Button/Button.tsx
index c276f9214f..133ecf67e4 100644
--- a/packages/fakeyou.com/src/components/common/Button/Button.tsx
+++ b/packages/fakeyou.com/src/components/common/Button/Button.tsx
@@ -33,7 +33,9 @@ export default function Button({
 
   const SpinnerComponent = isLoading ? (
     <div
-      className="spinner-border spinner-border-sm text-white ms-2"
+      className={`spinner-border spinner-border-sm text-white ${
+        square ? "" : "ms-2"
+      }`.trim()}
       role="status"
     >
       <span className="visually-hidden">Loading...</span>
@@ -59,7 +61,7 @@ export default function Button({
     </>
   ) : (
     <>
-      {IconComponent}
+      {isLoading ? null : IconComponent}
       {LabelComponent}
       {SpinnerComponent}
     </>
diff --git a/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.scss b/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.scss
new file mode 100644
index 0000000000..ce8794debd
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.scss
@@ -0,0 +1,30 @@
+@import "scss/colours.scss";
+
+.selection-bubbles {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.bubble-button {
+  border: 2px solid darken($secondary, 3%);
+  padding: 8px 16px;
+  border-radius: 0.5rem;
+  background-color: darken($secondary, 3%);
+  cursor: pointer;
+  outline: none;
+  transition: all 0.2s ease;
+  font-size: 15px;
+  font-weight: 500;
+  color: rgba($white, 0.75);
+}
+
+.bubble-button:hover {
+  background-color: $secondary;
+  border-color: $secondary;
+}
+
+.bubble-button.selected {
+  color: $white;
+  border-color: $primary;
+  background-color: lighten($secondary, 6%);
+}
diff --git a/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.tsx b/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.tsx
new file mode 100644
index 0000000000..5e5597bd0e
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.tsx
@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from "react";
+import "./SelectionBubbles.scss";
+
+interface SelectionBubbleProps {
+  options: string[];
+  onSelect: (selected: string) => void;
+}
+
+export default function SelectionBubbles({
+  options,
+  onSelect,
+}: SelectionBubbleProps) {
+  //Select first one as default
+  const [selectedOption, setSelectedOption] = useState<string | null>(
+    options.length > 0 ? options[0] : null
+  );
+
+  const handleSelect = (
+    event: React.MouseEvent<HTMLButtonElement>,
+    option: string
+  ) => {
+    event.preventDefault();
+    setSelectedOption(option);
+    onSelect(option);
+  };
+
+  useEffect(() => {
+    if (selectedOption) {
+      onSelect(selectedOption);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className="selection-bubbles">
+      {options.map(option => (
+        <button
+          key={option}
+          className={`bubble-button ${
+            selectedOption === option ? "selected" : ""
+          }`}
+          onClick={event => handleSelect(event, option)}
+        >
+          {option}
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/packages/fakeyou.com/src/components/common/SelectionBubbles/index.tsx b/packages/fakeyou.com/src/components/common/SelectionBubbles/index.tsx
new file mode 100644
index 0000000000..b1f5697e45
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/SelectionBubbles/index.tsx
@@ -0,0 +1 @@
+export { default } from "./SelectionBubbles";
diff --git a/packages/fakeyou.com/src/components/common/TempTextArea/TempTextArea.tsx b/packages/fakeyou.com/src/components/common/TempTextArea/TempTextArea.tsx
index 4b49ff2b87..73e70b29d8 100644
--- a/packages/fakeyou.com/src/components/common/TempTextArea/TempTextArea.tsx
+++ b/packages/fakeyou.com/src/components/common/TempTextArea/TempTextArea.tsx
@@ -15,7 +15,6 @@ export default function TempTextArea({
   ...rest
 }: TextAreaProps) {
   return (
-    // Changed fragment to div here just so that it can be laid out with bootstrap easily using d-flex, flex-column and responsive gaps which requires grouping.
     <div className="fy-textarea">
       {label && (
         <label className={`sub-title ${required ? "required" : ""}`}>
diff --git a/packages/fakeyou.com/src/components/common/TextArea/TextArea.scss b/packages/fakeyou.com/src/components/common/TextArea/TextArea.scss
new file mode 100644
index 0000000000..294d16ae23
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/TextArea/TextArea.scss
@@ -0,0 +1,31 @@
+.fy-textarea {
+  margin-bottom: 1rem;
+
+  &:only-child,
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  .no-resize {
+    resize: none;
+  }
+}
+
+.d-flex:not(.flex-column) > .fy-textarea {
+  margin-bottom: 0;
+  margin-right: 0.5rem;
+
+  &:only-child,
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.gap-1 > .fy-textarea,
+.gap-2 > .fy-textarea,
+.gap-3 > .fy-textarea,
+.gap-4 > .fy-textarea,
+.gap-5 > .fy-textarea {
+  margin-bottom: 0;
+  margin-right: 0;
+}
diff --git a/packages/fakeyou.com/src/components/common/TextArea/TextArea.tsx b/packages/fakeyou.com/src/components/common/TextArea/TextArea.tsx
index d5fa949ea2..8d11021de7 100644
--- a/packages/fakeyou.com/src/components/common/TextArea/TextArea.tsx
+++ b/packages/fakeyou.com/src/components/common/TextArea/TextArea.tsx
@@ -1,19 +1,32 @@
 import React from "react";
+import "./TextArea.scss";
 
 interface TextAreaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   label?: string;
   textArea?: boolean;
+  required?: boolean;
+  resize?: boolean;
 }
 
-export default function TextArea({ label, textArea, ...rest }: TextAreaProps) {
+export default function TextArea({
+  label,
+  textArea,
+  required,
+  resize = true,
+  ...rest
+}: TextAreaProps) {
   return (
-    <div>
-      {label && <label className="sub-title">{label}</label>}
-
-      <div className="form-group">
-        <textarea className="form-control" {...rest} />
-      </div>
+    <div className="fy-textarea">
+      {label && (
+        <label className={`sub-title ${required ? "required" : ""}`.trim()}>
+          {label}
+        </label>
+      )}
+      <textarea
+        className={`form-control ${resize ? "" : "no-resize"}`.trim()}
+        {...rest}
+      />
     </div>
   );
 }
diff --git a/packages/fakeyou.com/src/components/common/index.tsx b/packages/fakeyou.com/src/components/common/index.tsx
index 31c7d4ac02..75144224f1 100644
--- a/packages/fakeyou.com/src/components/common/index.tsx
+++ b/packages/fakeyou.com/src/components/common/index.tsx
@@ -5,14 +5,10 @@ import Badge from "./Badge";
 import Button from "./Button";
 import ButtonRevertToDefault from "./ButtonRevertToDefault";
 import Checkbox from "./Checkbox";
-import {
-  MediaCards,
-  SkeletonCard,
-  WeightsCards,
-} from "./Card";
+import { MediaCards, SkeletonCard, WeightsCards } from "./Card";
 import Container from "./Container";
 import CoverImageInput from "./CoverImageInput";
-import ErrorMessage from "./ErrorMessage"
+import ErrorMessage from "./ErrorMessage";
 import FileActions from "./FileActions";
 import FileDetails from "./FileDetails";
 import FileWrapper from "./FileWrapper";
@@ -38,7 +34,7 @@ import Skeleton from "./Skeleton";
 import Slider from "./Slider";
 import Spinner from "./Spinner";
 import SplitPanel from "./SplitPanel";
-import Tabs, {NonRouteTabs} from "./Tabs";
+import Tabs, { NonRouteTabs } from "./Tabs";
 import TempAudioPlayer from "./TempAudioPlayer";
 import TempInput from "./TempInput";
 import TempSelect from "./TempSelect";
@@ -49,6 +45,7 @@ import TintSpinner from "./TintSpinner";
 import VideoBasic from "./VideoBasic";
 import VideoFakeyou from "./VideoFakeyou";
 import VideoInput from "./VideoInput";
+import SelectionBubbles from "./SelectionBubbles";
 
 export {
   Accordion,
@@ -102,5 +99,6 @@ export {
   TintSpinner,
   VideoBasic,
   VideoFakeyou,
-  VideoInput
-};
\ No newline at end of file
+  VideoInput,
+  SelectionBubbles,
+};
diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
index ae30a4966c..9a50ec8b25 100644
--- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx
+++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
@@ -1545,6 +1545,13 @@ class PageContainer extends React.Component<
                       sessionSubscriptionsWrapper={
                         this.props.sessionSubscriptionsWrapper
                       }
+                      enqueueInferenceJob={this.props.enqueueInferenceJob}
+                      inferenceJobs={this.props.inferenceJobs}
+                      inferenceJobsByCategory={
+                        this.props.inferenceJobsByCategory
+                      }
+                      ttsInferenceJobs={this.props.ttsInferenceJobs}
+                      enqueueTtsJob={this.props.enqueueTtsJob}
                     />
                   </Route>
                 </Switch>
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 21b3af732d..89b243ddf7 100644
--- a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx
@@ -10,10 +10,23 @@ import Dashboard from "./Dashboard";
 import FakeYouLandingBody from "./fakeyou/FakeYouLandingBody";
 import { useDomainConfig } from "context/DomainConfigContext";
 import StorytellerLanding from "./storyteller/StorytellerLanding";
+import {
+  FrontendInferenceJobType,
+  InferenceJob,
+} from "@storyteller/components/src/jobs/InferenceJob";
+import { TtsInferenceJob } from "@storyteller/components/src/jobs/TtsInferenceJobs";
 
 interface Props {
   sessionWrapper: SessionWrapper;
   sessionSubscriptionsWrapper: SessionSubscriptionsWrapper;
+  inferenceJobs: Array<InferenceJob>;
+  ttsInferenceJobs: Array<TtsInferenceJob>;
+  enqueueInferenceJob: (
+    jobToken: string,
+    frontendInferenceJobType: FrontendInferenceJobType
+  ) => void;
+  inferenceJobsByCategory: Map<FrontendInferenceJobType, Array<InferenceJob>>;
+  enqueueTtsJob: (jobToken: string) => void;
 }
 
 function LandingPage(props: Props) {
@@ -33,6 +46,11 @@ function LandingPage(props: Props) {
               <FakeYouLandingHeader
                 sessionWrapper={props.sessionWrapper}
                 sessionSubscriptionsWrapper={props.sessionSubscriptionsWrapper}
+                inferenceJobs={props.inferenceJobs}
+                ttsInferenceJobs={props.ttsInferenceJobs}
+                enqueueInferenceJob={props.enqueueInferenceJob}
+                inferenceJobsByCategory={props.inferenceJobsByCategory}
+                enqueueTtsJob={props.enqueueTtsJob}
               />
             )}
 
diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/FakeYouLandingDemo.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/FakeYouLandingDemo.tsx
new file mode 100644
index 0000000000..c772df8054
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/FakeYouLandingDemo.tsx
@@ -0,0 +1,231 @@
+import React, { useState } from "react";
+import { faDeleteLeft, faPlay } from "@fortawesome/pro-solid-svg-icons";
+import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper";
+import {
+  Panel,
+  Button,
+  TextArea,
+  SelectionBubbles,
+  Accordion,
+} from "components/common";
+import {
+  FrontendInferenceJobType,
+  InferenceJob,
+} from "@storyteller/components/src/jobs/InferenceJob";
+import { TtsInferenceJob } from "@storyteller/components/src/jobs/TtsInferenceJobs";
+import { v4 as uuidv4 } from "uuid";
+import {
+  GenerateTtsAudio,
+  GenerateTtsAudioErrorType,
+  GenerateTtsAudioIsError,
+  GenerateTtsAudioIsOk,
+} from "@storyteller/components/src/api/tts/GenerateTtsAudio";
+import { Analytics } from "common/Analytics";
+import { Link } from "react-router-dom";
+import { SessionTtsInferenceResultList } from "v2/view/_common/SessionTtsInferenceResultsList";
+
+interface TtsInferencePanelProps {
+  sessionSubscriptionsWrapper: SessionSubscriptionsWrapper;
+  inferenceJobs: Array<InferenceJob>;
+  ttsInferenceJobs: Array<TtsInferenceJob>;
+  enqueueInferenceJob: (
+    jobToken: string,
+    frontendInferenceJobType: FrontendInferenceJobType
+  ) => void;
+  inferenceJobsByCategory: Map<FrontendInferenceJobType, Array<InferenceJob>>;
+  enqueueTtsJob: (jobToken: string) => void;
+}
+
+export default function LandingDemo({
+  inferenceJobs,
+  sessionSubscriptionsWrapper,
+  ttsInferenceJobs,
+  enqueueInferenceJob,
+  enqueueTtsJob,
+  inferenceJobsByCategory,
+}: TtsInferencePanelProps) {
+  const [textBuffer, setTextBuffer] = useState("");
+  const [isEnqueuing, setIsEnqueuing] = useState(false);
+  const [maybeTtsError, setMaybeTtsError] = useState<
+    GenerateTtsAudioErrorType | undefined
+  >(undefined);
+  const [isAudioLimitAlertVisible, setAudioLimitAlertVisible] = useState(false);
+
+  const handleChangeText = (ev: React.FormEvent<HTMLTextAreaElement>) => {
+    const textValue = (ev.target as HTMLTextAreaElement).value;
+    setTextBuffer(textValue);
+    setAudioLimitAlertVisible(textValue.length > 100);
+  };
+
+  const voiceModelTokenMap: { [key: string]: string } = {
+    Spongebob: "weight_vrx7j407cxk45jenkrd769h9b",
+    Trump: "trump_model_token",
+    Messi: "messi_model_token",
+    // Add more voice options and their modelTokens as needed
+  };
+
+  const [voiceToken, setVoiceToken] = useState(voiceModelTokenMap["Spongebob"]);
+
+  const handleVoiceSelection = (selected: string) => {
+    console.log(`Selected option: ${selected}`);
+    setVoiceToken(voiceModelTokenMap[selected]);
+  };
+
+  const handleEnqueueTts = async (ev: React.FormEvent<HTMLButtonElement>) => {
+    ev.preventDefault();
+
+    if (!textBuffer) {
+      return false;
+    }
+
+    setIsEnqueuing(true);
+
+    const modelToken = voiceToken;
+
+    const request = {
+      uuid_idempotency_token: uuidv4(),
+      tts_model_token: modelToken,
+      inference_text: textBuffer,
+    };
+
+    const response = await GenerateTtsAudio(request);
+
+    Analytics.ttsGenerate(modelToken, textBuffer.length);
+
+    if (GenerateTtsAudioIsOk(response)) {
+      setMaybeTtsError(undefined);
+
+      if (response.inference_job_token_type === "generic") {
+        enqueueInferenceJob(
+          response.inference_job_token,
+          FrontendInferenceJobType.TextToSpeech
+        );
+      } else {
+        enqueueTtsJob(response.inference_job_token);
+      }
+    } else if (GenerateTtsAudioIsError(response)) {
+      setMaybeTtsError(response.error);
+    }
+
+    setIsEnqueuing(false);
+
+    return false;
+  };
+
+  let maybeError = <></>;
+  if (!!maybeTtsError) {
+    let hasMessage = false;
+    let message = <></>;
+    switch (maybeTtsError) {
+      case GenerateTtsAudioErrorType.TooManyRequests:
+        hasMessage = true;
+        message = <>Error: Too many requests. Please try again in a bit.</>;
+        break;
+      case GenerateTtsAudioErrorType.ServerError |
+        GenerateTtsAudioErrorType.BadRequest |
+        GenerateTtsAudioErrorType.NotFound:
+        break;
+    }
+
+    if (hasMessage) {
+      maybeError = (
+        <div
+          className="alert alert-primary alert-dismissible fade show m-0"
+          role="alert"
+        >
+          <button
+            className="btn-close"
+            onClick={() => setMaybeTtsError(undefined)}
+            data-bs-dismiss="alert"
+            aria-label="Close"
+          ></button>
+          {message}
+        </div>
+      );
+    }
+  }
+
+  let audioLimitAlert = <></>;
+  if (
+    isAudioLimitAlertVisible &&
+    !sessionSubscriptionsWrapper.hasPaidFeatures()
+  ) {
+    audioLimitAlert = (
+      <>
+        <div className="alert alert-warning fs-7 mb-0">
+          <span className="fw-semibold">
+            <u>Note:</u> Non-premium is limited to 12 seconds of audio.{" "}
+            <Link className="fw-semibold" to="/pricing">
+              Upgrade now
+            </Link>
+            .
+          </span>
+        </div>
+      </>
+    );
+  }
+
+  const voiceOptions = Object.keys(voiceModelTokenMap);
+
+  return (
+    <Panel padding={true}>
+      <form className="d-flex flex-column">
+        <div>
+          <div>
+            <label className="sub-title flex-grow-1">Select a Voice</label>
+          </div>
+          <SelectionBubbles
+            options={voiceOptions}
+            onSelect={handleVoiceSelection}
+          />
+        </div>
+
+        <div className="d-flex flex-column mt-3">
+          <div>
+            <label className="sub-title flex-grow-1">Your Text</label>
+          </div>
+          <TextArea
+            placeholder="Enter the text you want the voice to say here..."
+            value={textBuffer}
+            onChange={handleChangeText}
+            rows={4}
+            resize={false}
+          />
+          {audioLimitAlert}
+        </div>
+
+        <div className="d-flex gap-3 align-items-center mt-4">
+          <Button
+            icon={faPlay}
+            square={true}
+            onClick={handleEnqueueTts}
+            isLoading={isEnqueuing}
+            disabled={textBuffer.length === 0}
+          />
+          <>Autoplaying audio player here</>
+        </div>
+      </form>
+
+      {inferenceJobs[0] && (
+        <div className="mt-4">
+          <Accordion>
+            <Accordion.Item title="Session TTS Results" defaultOpen={true}>
+              <div className="p-3">
+                <SessionTtsInferenceResultList
+                  inferenceJobs={
+                    inferenceJobsByCategory.get(
+                      FrontendInferenceJobType.TextToSpeech
+                    )!
+                  }
+                  ttsInferenceJobs={ttsInferenceJobs}
+                  sessionSubscriptionsWrapper={sessionSubscriptionsWrapper}
+                />
+              </div>
+            </Accordion.Item>
+          </Accordion>
+          {maybeError}
+        </div>
+      )}
+    </Panel>
+  );
+}
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 8bbd88fa58..21a8a42c4b 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
@@ -1,124 +1,43 @@
-import {
-  faArrowRight,
-  faSparkles,
-  faStar,
-  faUser,
-} from "@fortawesome/pro-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowRight, faSparkles } from "@fortawesome/pro-solid-svg-icons";
 import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
-import { WebUrl } from "common/WebUrl";
-import { Panel } from "components/common";
 import Alert from "components/common/Alert/Alert";
 import { useLocalize } from "hooks";
-import React, { useMemo } from "react";
-import { Link } from "react-router-dom";
+import React from "react";
+import LandingDemo from "./FakeYouLandingDemo";
+import {
+  FrontendInferenceJobType,
+  InferenceJob,
+} from "@storyteller/components/src/jobs/InferenceJob";
+import { TtsInferenceJob } from "@storyteller/components/src/jobs/TtsInferenceJobs";
+import { Button, Panel } from "components/common";
 
 interface FakeYouLandingHeaderProps {
   sessionWrapper: SessionWrapper;
   sessionSubscriptionsWrapper: SessionSubscriptionsWrapper;
+  inferenceJobs: Array<InferenceJob>;
+  ttsInferenceJobs: Array<TtsInferenceJob>;
+  enqueueInferenceJob: (
+    jobToken: string,
+    frontendInferenceJobType: FrontendInferenceJobType
+  ) => void;
+  inferenceJobsByCategory: Map<FrontendInferenceJobType, Array<InferenceJob>>;
+  enqueueTtsJob: (jobToken: string) => void;
 }
 
-export default function FakeYouLandingHeader(props: FakeYouLandingHeaderProps) {
+export default function FakeYouLandingHeader({
+  sessionWrapper,
+  sessionSubscriptionsWrapper,
+  inferenceJobs,
+  ttsInferenceJobs,
+  enqueueInferenceJob,
+  inferenceJobsByCategory,
+  enqueueTtsJob,
+}: FakeYouLandingHeaderProps) {
   const { t } = useLocalize("LandingPage");
-  const isLoggedIn = props.sessionWrapper.isLoggedIn();
-  const isSubscribed = props.sessionSubscriptionsWrapper.hasPaidFeatures();
-
-  let signUpButton = <></>;
-  let viewPricingButton = <></>;
-  let upgradeButton = <></>;
-  let myProfileButton = <></>;
-
-  if (!isLoggedIn) {
-    signUpButton = (
-      <>
-        <Link
-          to="/signup"
-          // onClick={() => {
-          //   Analytics.ttsClickHeroSignup();
-          // }}
-        >
-          <button type="button" className="btn btn-primary w-100">
-            {t("heroButtonSignUp")}
-            <FontAwesomeIcon icon={faArrowRight} className="ms-2" />
-          </button>
-        </Link>
-      </>
-    );
-    viewPricingButton = (
-      <>
-        <Link
-          to={WebUrl.pricingPageWithReferer("tts_hero_new")}
-          // onClick={() => {
-          //   Analytics.ttsClickHeroViewPricing();
-          // }}
-        >
-          <button type="button" className="btn btn-secondary w-100">
-            <FontAwesomeIcon icon={faStar} className="me-2" />
-            {t("heroButtonPricing")}
-          </button>
-        </Link>
-      </>
-    );
-  }
-
-  if (isLoggedIn) {
-    let displayName = props.sessionWrapper.getDisplayName() as string; // NB: If logged in, should be string
-    let url = WebUrl.userProfilePage(displayName);
-    myProfileButton = (
-      <>
-        <Link
-          to={url}
-          // onClick={() => {
-          //   Analytics.ttsClickHeroViewProfile();
-          // }}
-        >
-          <button type="button" className="btn btn-secondary w-100">
-            <FontAwesomeIcon icon={faUser} className="me-2" />
-            {t("heroButtonProfile")}
-          </button>
-        </Link>
-      </>
-    );
-
-    if (!isSubscribed) {
-      upgradeButton = (
-        <>
-          <Link
-            to={WebUrl.pricingPageWithReferer("tts_hero_user")}
-            // onClick={() => {
-            //   Analytics.ttsClickHeroUpgradePlan();
-            // }}
-          >
-            <button type="button" className="btn btn-primary w-100">
-              <FontAwesomeIcon icon={faStar} className="me-2" />
-              {t("heroButtonUpgradePlan")}
-            </button>
-          </Link>
-        </>
-      );
-    }
-  }
-
-  const randomHeroImage = useMemo(() => {
-    const images = [
-      // Main Images:
-      "mascot/kitsune_pose2.webp",
-      // "mascot/may4th.webp",
-      // "mascot/halloween_1.webp",
-      // "mascot/halloween_2.webp",
-      // "mascot/halloween_3.webp",
-      // "mascot/xmas_1.webp",
-      // "mascot/xmas_2.webp",
-      // "mascot/xmas_3.webp",
-      // "mascot/xmas_4.webp",
-    ];
-
-    return images[Math.floor(Math.random() * images.length)];
-  }, []);
 
   return (
-    <Panel clear={true} className="mt-5">
+    <>
       <Alert
         id="text-to-image-alert"
         icon={faSparkles}
@@ -128,31 +47,38 @@ export default function FakeYouLandingHeader(props: FakeYouLandingHeaderProps) {
         linkText={t("alertTtiCta")}
       />
 
-      <div className="row flex-md-row-reverse">
-        <div className="col-12 col-lg-5 p-md-0 d-flex justify-content-center">
-          <img
-            src={randomHeroImage}
-            alt="FakeYou Mascot"
-            height={440}
-            width={447}
-            className="img-fluid"
-          />
-        </div>
-        <div className="col-12 col-lg-7 d-flex flex-column justify-content-center flex-reverse px-md-5 px-lg-3">
-          <h1 className="fw-bold display-5 text-center text-lg-start px-md-5 px-lg-0">
-            {t("heroTitle")}
-          </h1>
-          <p className="lead opacity-75 pb-4 text-center text-lg-start px-md-5 px-lg-0 pe-lg-5">
-            {t("heroText")}
-          </p>
-          <div className="d-flex flex-column flex-md-row gap-3 mt-3 mb-4 w-100 justify-content-center justify-content-lg-start">
-            {upgradeButton}
-            {signUpButton}
-            {viewPricingButton}
-            {myProfileButton}
+      <div className="my-5 py-5">
+        <div className="row g-5">
+          <div className="col-12 col-lg-6 order-lg-2">
+            <LandingDemo
+              inferenceJobs={inferenceJobs}
+              sessionSubscriptionsWrapper={sessionSubscriptionsWrapper}
+              enqueueInferenceJob={enqueueInferenceJob}
+              inferenceJobsByCategory={inferenceJobsByCategory}
+              ttsInferenceJobs={ttsInferenceJobs}
+              enqueueTtsJob={enqueueTtsJob}
+            />
+          </div>
+          <div className="col-12 col-lg-6 order-lg-1 d-flex flex-column align-items-center justify-content-center pt-3 pt-lg-0">
+            <Panel clear={true}>
+              <h1 className="fw-bold display-5 text-center text-lg-start px-md-5 px-lg-0">
+                {t("heroTitle")}
+              </h1>
+              <p className="lead opacity-75 pb-4 text-center text-lg-start px-md-5 px-lg-0 pe-lg-5">
+                {t("heroText")}
+              </p>
+              <div className="d-flex justify-content-center justify-content-lg-start">
+                <Button
+                  label="Get Started Free"
+                  to="/signup"
+                  icon={faArrowRight}
+                  iconFlip={true}
+                />
+              </div>
+            </Panel>
           </div>
         </div>
       </div>
-    </Panel>
+    </>
   );
 }

From b762c6fcda5d426af3ded0745e477c79606a1887 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Thu, 22 Feb 2024 15:34:39 +0700
Subject: [PATCH 2/8] landing demo update

---
 .../SelectionBubbles/SelectionBubbles.tsx     |   2 +-
 .../landing/fakeyou/FakeYouLandingHeader.tsx  |   2 +-
 .../fakeyou/LandingDemo/DemoAudioPlayer.tsx   |  36 ++++
 .../{ => LandingDemo}/FakeYouLandingDemo.tsx  | 169 ++++++++++--------
 .../fakeyou/LandingDemo/LandingDemo.scss      |  11 ++
 .../fakeyou/LandingDemo/RandomTexts.ts        |  88 +++++++++
 6 files changed, 235 insertions(+), 73 deletions(-)
 create mode 100644 packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/DemoAudioPlayer.tsx
 rename packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/{ => LandingDemo}/FakeYouLandingDemo.tsx (55%)
 create mode 100644 packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/LandingDemo.scss
 create mode 100644 packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/RandomTexts.ts

diff --git a/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.tsx b/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.tsx
index 5e5597bd0e..3f7c8f88a0 100644
--- a/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.tsx
+++ b/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.tsx
@@ -10,7 +10,7 @@ export default function SelectionBubbles({
   options,
   onSelect,
 }: SelectionBubbleProps) {
-  //Select first one as default
+  //Select first one as defaults
   const [selectedOption, setSelectedOption] = useState<string | null>(
     options.length > 0 ? options[0] : null
   );
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 21a8a42c4b..2a3f0fab5d 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
@@ -4,7 +4,7 @@ import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapp
 import Alert from "components/common/Alert/Alert";
 import { useLocalize } from "hooks";
 import React from "react";
-import LandingDemo from "./FakeYouLandingDemo";
+import LandingDemo from "./LandingDemo/FakeYouLandingDemo";
 import {
   FrontendInferenceJobType,
   InferenceJob,
diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/DemoAudioPlayer.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/DemoAudioPlayer.tsx
new file mode 100644
index 0000000000..ccc49c694c
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/DemoAudioPlayer.tsx
@@ -0,0 +1,36 @@
+import React, { useCallback, useState } from "react";
+import Wavesurfer from "react-wavesurfer.js";
+
+interface Props {
+  filename: string;
+  play: boolean;
+  onFinish?: () => void;
+}
+
+export default function DemoTtsAudioPlayer(props: Props) {
+  const [position, setPosition] = useState(0);
+
+  const handleFinish = useCallback(() => {
+    setPosition(0);
+    props.onFinish && props.onFinish();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.onFinish]);
+
+  return (
+    <div className="flex-grow-1 h-100 overflow-hidden">
+      <Wavesurfer
+        key={props.filename}
+        onFinish={handleFinish}
+        pos={position}
+        src={props.filename || ""}
+        height={36}
+        progressColor="#fc8481"
+        waveColor="#b09e9e"
+        cursorColor="#fc8481"
+        playing={props.play}
+        responsive={true}
+        normalize={true}
+      />
+    </div>
+  );
+}
diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/FakeYouLandingDemo.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/FakeYouLandingDemo.tsx
similarity index 55%
rename from packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/FakeYouLandingDemo.tsx
rename to packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/FakeYouLandingDemo.tsx
index c772df8054..86468612b3 100644
--- a/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/FakeYouLandingDemo.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/FakeYouLandingDemo.tsx
@@ -1,13 +1,7 @@
-import React, { useState } from "react";
-import { faDeleteLeft, faPlay } from "@fortawesome/pro-solid-svg-icons";
+import React, { useEffect, useState } from "react";
+import { faPause, faPlay, faShuffle } from "@fortawesome/pro-solid-svg-icons";
 import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper";
-import {
-  Panel,
-  Button,
-  TextArea,
-  SelectionBubbles,
-  Accordion,
-} from "components/common";
+import { Panel, Button, TextArea, SelectionBubbles } from "components/common";
 import {
   FrontendInferenceJobType,
   InferenceJob,
@@ -21,8 +15,14 @@ import {
   GenerateTtsAudioIsOk,
 } from "@storyteller/components/src/api/tts/GenerateTtsAudio";
 import { Analytics } from "common/Analytics";
-import { Link } from "react-router-dom";
-import { SessionTtsInferenceResultList } from "v2/view/_common/SessionTtsInferenceResultsList";
+import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
+import DemoTtsAudioPlayer from "./DemoAudioPlayer";
+import {
+  GetTtsInferenceJobStatus,
+  GetTtsInferenceJobStatusIsOk,
+} from "@storyteller/components/src/api/jobs/GetTtsInferenceJobStatus";
+import RandomTexts from "./RandomTexts";
+import "./LandingDemo.scss";
 
 interface TtsInferencePanelProps {
   sessionSubscriptionsWrapper: SessionSubscriptionsWrapper;
@@ -45,23 +45,29 @@ export default function LandingDemo({
   inferenceJobsByCategory,
 }: TtsInferencePanelProps) {
   const [textBuffer, setTextBuffer] = useState("");
-  const [isEnqueuing, setIsEnqueuing] = useState(false);
   const [maybeTtsError, setMaybeTtsError] = useState<
     GenerateTtsAudioErrorType | undefined
   >(undefined);
-  const [isAudioLimitAlertVisible, setAudioLimitAlertVisible] = useState(false);
+  const [currentAudioUrl, setCurrentAudioUrl] = useState<string | null>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [jobToken, setJobToken] = useState<string | null>(null);
+  const [lastEnqueuedText, setLastEnqueuedText] = useState<string | null>(null);
+  const [isAudioLoading, setIsAudioLoading] = useState(false);
+  const [lastSelectedVoice, setLastSelectedVoice] = useState<string | null>(
+    null
+  );
 
   const handleChangeText = (ev: React.FormEvent<HTMLTextAreaElement>) => {
     const textValue = (ev.target as HTMLTextAreaElement).value;
     setTextBuffer(textValue);
-    setAudioLimitAlertVisible(textValue.length > 100);
   };
 
+  //Set voices here
   const voiceModelTokenMap: { [key: string]: string } = {
-    Spongebob: "weight_vrx7j407cxk45jenkrd769h9b",
-    Trump: "trump_model_token",
-    Messi: "messi_model_token",
-    // Add more voice options and their modelTokens as needed
+    Rick: "weight_0f762jdzgsy1dhpb86qxy4ssm",
+    Mickey: "weight_sfyjyr67ag1647xs0r7gmvkks",
+    Eric: "weight_h8ebh6fyjyrr1vsjregw6yz8y",
+    "Angry Male": "weight_hehgvegadf08mfp5rzd69dmh4",
   };
 
   const [voiceToken, setVoiceToken] = useState(voiceModelTokenMap["Spongebob"]);
@@ -78,7 +84,14 @@ export default function LandingDemo({
       return false;
     }
 
-    setIsEnqueuing(true);
+    // Check if the text hasn't changed and the voice hasn't changed
+    if (textBuffer === lastEnqueuedText && voiceToken === lastSelectedVoice) {
+      setIsPlaying(!isPlaying);
+      setIsAudioLoading(false);
+      return false;
+    }
+
+    setIsAudioLoading(true);
 
     const modelToken = voiceToken;
 
@@ -103,15 +116,52 @@ export default function LandingDemo({
       } else {
         enqueueTtsJob(response.inference_job_token);
       }
+      // Store the job token
+      setJobToken(response.inference_job_token);
+      // Store the last enqueued text
+      setLastEnqueuedText(textBuffer);
+      // Store the last selected voice
+      setLastSelectedVoice(voiceToken);
     } else if (GenerateTtsAudioIsError(response)) {
       setMaybeTtsError(response.error);
     }
 
-    setIsEnqueuing(false);
-
     return false;
   };
 
+  useEffect(() => {
+    if (!jobToken) return;
+
+    const fetch = async () => {
+      const jobStatusResponse = await GetTtsInferenceJobStatus(jobToken);
+
+      if (GetTtsInferenceJobStatusIsOk(jobStatusResponse)) {
+        const job = inferenceJobs.find(job => job.jobToken === jobToken);
+        if (job && jobStatusResponse.state.maybe_public_bucket_wav_audio_path) {
+          const audioLink = new BucketConfig().getGcsUrl(
+            jobStatusResponse.state.maybe_public_bucket_wav_audio_path
+          );
+          setCurrentAudioUrl(audioLink);
+
+          if (audioLink !== currentAudioUrl) {
+            setIsAudioLoading(false);
+            setIsPlaying(true);
+          }
+        }
+      }
+    };
+
+    fetch();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [jobToken, inferenceJobs, isPlaying]);
+
+  const handleAudioFinish = () => {
+    setIsPlaying(false);
+  };
+
+  const voiceOptions = Object.keys(voiceModelTokenMap);
+
+  // Show errors on TTS failure
   let maybeError = <></>;
   if (!!maybeTtsError) {
     let hasMessage = false;
@@ -119,7 +169,9 @@ export default function LandingDemo({
     switch (maybeTtsError) {
       case GenerateTtsAudioErrorType.TooManyRequests:
         hasMessage = true;
-        message = <>Error: Too many requests. Please try again in a bit.</>;
+        message = (
+          <>Too many requests! Please wait a few minutes then try again.</>
+        );
         break;
       case GenerateTtsAudioErrorType.ServerError |
         GenerateTtsAudioErrorType.BadRequest |
@@ -145,33 +197,17 @@ export default function LandingDemo({
     }
   }
 
-  let audioLimitAlert = <></>;
-  if (
-    isAudioLimitAlertVisible &&
-    !sessionSubscriptionsWrapper.hasPaidFeatures()
-  ) {
-    audioLimitAlert = (
-      <>
-        <div className="alert alert-warning fs-7 mb-0">
-          <span className="fw-semibold">
-            <u>Note:</u> Non-premium is limited to 12 seconds of audio.{" "}
-            <Link className="fw-semibold" to="/pricing">
-              Upgrade now
-            </Link>
-            .
-          </span>
-        </div>
-      </>
-    );
-  }
-
-  const voiceOptions = Object.keys(voiceModelTokenMap);
+  const generateRandomText = () => {
+    const randomIndex = Math.floor(Math.random() * RandomTexts.length);
+    const randomText = RandomTexts[randomIndex];
+    setTextBuffer(randomText);
+  };
 
   return (
     <Panel padding={true}>
       <form className="d-flex flex-column">
         <div>
-          <div>
+          <div className="d-flex">
             <label className="sub-title flex-grow-1">Select a Voice</label>
           </div>
           <SelectionBubbles
@@ -181,8 +217,15 @@ export default function LandingDemo({
         </div>
 
         <div className="d-flex flex-column mt-3">
-          <div>
-            <label className="sub-title flex-grow-1">Your Text</label>
+          <div className="d-flex justify-content-center pb-2">
+            <label className="sub-title flex-grow-1 pb-0">Your Text</label>
+            <Button
+              icon={faShuffle}
+              label="Randomize Text"
+              onClick={generateRandomText}
+              variant="link"
+              className="fs-7 randomize-text-button"
+            />
           </div>
           <TextArea
             placeholder="Enter the text you want the voice to say here..."
@@ -191,41 +234,25 @@ export default function LandingDemo({
             rows={4}
             resize={false}
           />
-          {audioLimitAlert}
         </div>
 
+        {maybeError}
+
         <div className="d-flex gap-3 align-items-center mt-4">
           <Button
-            icon={faPlay}
+            icon={isPlaying ? faPause : faPlay}
             square={true}
             onClick={handleEnqueueTts}
-            isLoading={isEnqueuing}
+            isLoading={isAudioLoading}
             disabled={textBuffer.length === 0}
           />
-          <>Autoplaying audio player here</>
+          <DemoTtsAudioPlayer
+            filename={currentAudioUrl || ""}
+            play={isPlaying}
+            onFinish={handleAudioFinish}
+          />
         </div>
       </form>
-
-      {inferenceJobs[0] && (
-        <div className="mt-4">
-          <Accordion>
-            <Accordion.Item title="Session TTS Results" defaultOpen={true}>
-              <div className="p-3">
-                <SessionTtsInferenceResultList
-                  inferenceJobs={
-                    inferenceJobsByCategory.get(
-                      FrontendInferenceJobType.TextToSpeech
-                    )!
-                  }
-                  ttsInferenceJobs={ttsInferenceJobs}
-                  sessionSubscriptionsWrapper={sessionSubscriptionsWrapper}
-                />
-              </div>
-            </Accordion.Item>
-          </Accordion>
-          {maybeError}
-        </div>
-      )}
     </Panel>
   );
 }
diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/LandingDemo.scss b/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/LandingDemo.scss
new file mode 100644
index 0000000000..99e7c6679f
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/LandingDemo.scss
@@ -0,0 +1,11 @@
+@import "scss/colours.scss";
+
+.randomize-text-button {
+  color: desaturate($primary, 30%) !important;
+  opacity: 1;
+
+  &:hover {
+    color: desaturate($primary, 10%) !important;
+    opacity: 0.85;
+  }
+}
diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/RandomTexts.ts b/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/RandomTexts.ts
new file mode 100644
index 0000000000..b11bd9c7bd
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/RandomTexts.ts
@@ -0,0 +1,88 @@
+const RandomTexts = [
+  "Hello, world!",
+  "Welcome to the future.",
+  "The quick brown fox jumps over the lazy dog.",
+  "In a hole in the ground there lived a hobbit.",
+  "Once upon a time in a land far, far away.",
+  "Can't believe you've done this.",
+  "Sometimes, I wish I was an octopus, so I could slap eight people at once.",
+  "Explaining why one is right is not arguing, it's just clarifying.",
+  "Wallets are like onions; opening them brings tears.",
+  "I'm not lazy, I'm on energy-saving mode.",
+  "When life gives you melons, dyslexia might be involved.",
+  "Atoms are untrustworthy; they make up everything.",
+  "Glue history books are impossible to put down.",
+  "Time travel jokes are funny in any era, but you might have missed it.",
+  "I would lose weight, but I hate losing.",
+  "A messy room is just an open-air museum.",
+  "Trying to fail and succeeding is a real conundrum.",
+  "Procrastination is just engaging in numerous side quests.",
+  "Being early for tomorrow is a new kind of punctuality.",
+  "Adulthood is the longest test run that never ends.",
+  "Beauty sleep's advertising is misleading.",
+  "I'm on a whiskey diet. I've lost three days already.",
+  "Magical beds remember all forgotten tasks.",
+  "Pillows are the unsung heroes of hairstyling.",
+  "I'm not saying I'm Batman, but have you ever seen me and Batman in the same room?",
+  "Couches are the battlegrounds for avoiding problems.",
+  "Life's brevity demands self-laughter or outsourcing it.",
+  "Being a limited edition is far from weird.",
+  "Office chairs that spin make the job worth it.",
+  "Wake-up time defines personhood, not the time of day.",
+  "Math problems multiply in silence.",
+  "Physical conservatism is the new fitness trend.",
+  "Extra fries misunderstood as exercise is a common error.",
+  "I'm fluent in three languages: English, sarcasm, and profanity.",
+  "Multitasking involves listening, ignoring, and forgetting simultaneously.",
+  "Indecisiveness is a choice, sometimes.",
+  "I'm really good at stuff until people watch me do that stuff.",
+  "Correctness needs no argument, just explanation.",
+  "Coffee relationships are the most committed ones.",
+  "Rush hour is the greatest paradox.",
+  "I'm not bossy. I just have better ideas.",
+  "Silence and duct tape both have their merits.",
+  "I'm not procrastinating. I'm under a lot of pressure and very well could be a diamond soon.",
+  "Battery saver mode is essential for work avoidance.",
+  "Exploration is just being lost with style.",
+  "Pressing harder on a remote control seems like a valid effort when batteries are weak.",
+  "I'm convinced that bugs in software are just features in disguise.",
+  "Adulthood is getting excited about a new sponge for the kitchen, I've accepted this.",
+  "Life's too short, I always smile while I still have all my teeth.",
+  "In video games, I've learned that encountering enemies often means you're going in the right direction.",
+  "I'm often on the hunt for motivation, but it's like searching for a 404 error.",
+  "Debating with a computer, I've realized, is as effective as trying to solve algebra by chewing bubblegum.",
+  "During rush hour, I remind myself that patience is indeed a virtue.",
+  "I transformed a shy friend into a social butterfly, and now I wonder what I've unleashed.",
+  "The quest for sleep, sanity, and a peaceful hobbit life is something I'm still on.",
+  "My bed has a magical ability to remind me of forgotten tasks at night.",
+  "When the Wi-Fi goes down, I discover family members are actually nice people.",
+  "A cookie in each hand, I believe, is the true definition of a balanced diet.",
+  "Why use Google when I'm convinced someone believes they have all the answers?",
+  "Exploring the great indoors, I've found, is because outside is overrated.",
+  "I'm fluent in three languages: English, sarcasm, and late-night coding.",
+  "Why wait for a time machine when I have memories and music?",
+  "The best way to avoid chores, I've found, is to pretend not to know they exist.",
+  "If I can't find the sunshine, I've learned to be the person who switches on the light.",
+  "Realizing too late that adulthood is a trap is a lesson I've learned the hard way.",
+  "The art of being wise, I've discovered, is knowing what to overlook, like unread emails.",
+  "Why call it fast food if I have to wait in line for it?",
+  "I've discovered that my spirit animal is a sloth on weekdays.",
+  "Making a 'quick' phone call, I've realized, is never quick.",
+  "The mystery of how one sock always disappears in the laundry remains unsolved, I've noticed.",
+  "Finding out that my emergency contact is a pizza delivery service was a surprise.",
+  "The realization that autocorrect has become my worst enema... I mean, enemy, is frustrating.",
+  "Wondering why my coffee tastes like I should have made it myself is a daily ritual.",
+  "The silent joy of canceling plans is an underrated pleasure I cherish.",
+  "Discovering that my daily workout is trying to dodge spoilers online is a modern struggle.",
+  "Realizing that my phone's battery life lasts longer than my motivation is a harsh reality.",
+  "The paradox of being a perfectionist procrastinator is a real struggle I face.",
+  "Finding comfort in the fact that chocolate understands me is a sweet relief.",
+  "Realizing I'm not late, I'm just on a creative time schedule is how I cope.",
+  "Discovering that my hobby is collecting dust on my gym membership was an eye-opener.",
+  "The irony of being a tech expert but unable to fix my sleep schedule is not lost on me.",
+  "Understanding that my to-do list is more of a suggestion than a requirement helps me sleep at night.",
+  "The thrill of solving a bug in code is the coder's version of a plot twist, I've found.",
+  "Realizing that my idea of a balanced diet is having a piece of tech in both hands is a modern dilemma.",
+];
+
+export default RandomTexts;

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 3/8] 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}

From d5dcaae355b9f9c58672ce0b00b1ba146c0e82df Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Thu, 22 Feb 2024 18:29:03 +0700
Subject: [PATCH 4/8] fixed

---
 packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx
index 4923bdad09..5e8b5f6b40 100644
--- a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx
+++ b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx
@@ -213,7 +213,7 @@ export default function TopNav({
         <div className="topbar-nav-center">
           {/* Search Bar */}
           <div className="d-none d-lg-block">
-            {isScrolled && (
+            {(isOnLandingPage ? isScrolled : true) && (
               <SearchBar
                 onFocus={onFocusHandler}
                 onBlur={onBlurHandler}

From 014add93a454308dfa7fc2f666404de63cf82205 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Thu, 22 Feb 2024 18:30:12 +0700
Subject: [PATCH 5/8] navbar fixes

---
 packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx
index 5e8b5f6b40..c14fd9c077 100644
--- a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx
+++ b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx
@@ -213,7 +213,9 @@ export default function TopNav({
         <div className="topbar-nav-center">
           {/* Search Bar */}
           <div className="d-none d-lg-block">
-            {(isOnLandingPage ? isScrolled : true) && (
+            {(!isOnLandingPage ||
+              loggedIn ||
+              (isOnLandingPage && isScrolled)) && (
               <SearchBar
                 onFocus={onFocusHandler}
                 onBlur={onBlurHandler}

From efed9bba4ef65ee55c7f49b7145a3d6d323ad953 Mon Sep 17 00:00:00 2001
From: wil <test@local.host>
Date: Thu, 22 Feb 2024 11:32:30 -0500
Subject: [PATCH 6/8] fixed selecting bookmarked weights

---
 .../common/SelectModalWeightsTabs/tabBookmarkedWeights.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabBookmarkedWeights.tsx b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabBookmarkedWeights.tsx
index 0a4e7c3e2f..ae6dbbb682 100644
--- a/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabBookmarkedWeights.tsx
+++ b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/tabBookmarkedWeights.tsx
@@ -90,7 +90,7 @@ export default function WeightsTabsContent({
               showCreator: true,
               type: "weights",
               inSelectModal: true,
-              onResultSelect: onSelect,
+              onResultBookmarkSelect: onSelect,
             };
             return (
               <div

From a85917f548b8ca91a802ddf5eabbb99649355d9e Mon Sep 17 00:00:00 2001
From: wil <test@local.host>
Date: Thu, 22 Feb 2024 11:42:59 -0500
Subject: [PATCH 7/8] select modal for weight list now shows the title of the
 weight list instead

---
 .../common/SelectModal/SelectModalV2.tsx      | 20 +++++++------------
 .../SelectModalWeightsTabs.tsx                |  2 +-
 .../pageWorkflowControls/helpers.tsx          |  2 ++
 .../pageWorkflowControls.tsx                  |  6 +++++-
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/fakeyou.com/src/components/common/SelectModal/SelectModalV2.tsx b/packages/fakeyou.com/src/components/common/SelectModal/SelectModalV2.tsx
index 4a341e9e0e..0408f0aec2 100644
--- a/packages/fakeyou.com/src/components/common/SelectModal/SelectModalV2.tsx
+++ b/packages/fakeyou.com/src/components/common/SelectModal/SelectModalV2.tsx
@@ -21,7 +21,7 @@ export type SelectModalData = {
 interface SelectModalProps {
   label?: string;
   modalTitle?: string;
-  value?: string;
+  value?: string | SelectModalData;
   onClear: () => void;
   required?: boolean;
   children: ReactNode
@@ -32,21 +32,15 @@ export default memo(function SelectModal ({
   // tabs,
   modalTitle = "Select",
   onClear,
-  value = "",
+  value:valueProps = "",
   required,
   children
 }: SelectModalProps) {
-    const [isModalOpen, setModalOpen] = useState(false
-    )
-    const openModal = () => {
-      setModalOpen(true);
-    };
-
-    const closeModal = () => {
-      setModalOpen(false);
-    };
-
-    useEffect(closeModal, [value]);
+    const [isModalOpen, setModalOpen] = useState(false)
+    const openModal = () => setModalOpen(true);
+    const closeModal = () => setModalOpen(false);
+    useEffect(closeModal, [valueProps]);
+    const value = typeof valueProps === "string" ? valueProps : valueProps.title;
 
     return (
       <>
diff --git a/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/SelectModalWeightsTabs.tsx b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/SelectModalWeightsTabs.tsx
index 03b8204440..df5369def8 100644
--- a/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/SelectModalWeightsTabs.tsx
+++ b/packages/fakeyou.com/src/components/common/SelectModalWeightsTabs/SelectModalWeightsTabs.tsx
@@ -41,7 +41,7 @@ export default memo(function SelectModalWrapper({
     <SelectModalV2
       modalTitle={modalTitle}
       label={inputLabel}
-      value={value.title || value.token}
+      value={value}
       onClear={()=>{onSelect({title:"",token:""})}}
     >
       <NonRouteTabs tabs={tabs} />
diff --git a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/helpers.tsx b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/helpers.tsx
index 8ccad27ece..57fe469b0b 100644
--- a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/helpers.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/helpers.tsx
@@ -17,7 +17,9 @@ export type WorkflowValuesType = {
   workflowConfig: string;
   seed: string;
   sdModelToken: string;
+  sdModelTitle: string;
   loraModelToken: string;
+  loraModelTitle: string;
   posPrompt: string;
   negPrompt: string;
   // Advance Options Values
diff --git a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/pageWorkflowControls.tsx b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/pageWorkflowControls.tsx
index 5ccec551bd..af32811177 100644
--- a/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/pageWorkflowControls.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/video_workflow/components/pageWorkflowControls/pageWorkflowControls.tsx
@@ -57,7 +57,9 @@ export default function PageFilterControls({
     workflowConfig: "weight_q8sz47gmfw2zx02snrbz88ns9",
     seed: "",
     sdModelToken: "",
+    sdModelTitle:"",
     loraModelToken: "",
+    loraModelTitle: "",
     posPrompt: "",
     negPrompt: "",
     ...VideoIvs,
@@ -75,7 +77,9 @@ export default function PageFilterControls({
       workflowConfig: "weight_q8sz47gmfw2zx02snrbz88ns9",
       seed: curr.seed,
       sdModelToken: "",
+      sdModelTitle: "",
       loraModelToken: "",
+      loraModelTitle: "",
       posPrompt: "",
       negPrompt: "",
       ...VideoIvs,
@@ -178,7 +182,7 @@ export default function PageFilterControls({
                   }}
                   value={{
                     token:workflowValues.sdModelToken,
-                    title:""
+                    title:workflowValues.sdModelTitle,
                   }}
                 />
               </div>

From f9581eb4115446988eb89907d0d60668cc642006 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Fri, 23 Feb 2024 01:18:36 +0700
Subject: [PATCH 8/8] updates to selection bubbles and added voices

---
 .../src/components/common/Alert/Alert.tsx     |  6 +-
 .../SelectionBubbles/SelectionBubbles.scss    | 49 +++++++++++++
 .../SelectionBubbles/SelectionBubbles.tsx     | 73 +++++++++++++++----
 .../src/components/layout/TopNav/TopNav.tsx   | 45 +++++++-----
 .../landing/fakeyou/FakeYouLandingHeader.tsx  | 21 +++---
 .../LandingDemo/FakeYouLandingDemo.tsx        |  4 +-
 6 files changed, 154 insertions(+), 44 deletions(-)

diff --git a/packages/fakeyou.com/src/components/common/Alert/Alert.tsx b/packages/fakeyou.com/src/components/common/Alert/Alert.tsx
index 074f6f1cae..0d8b7e1952 100644
--- a/packages/fakeyou.com/src/components/common/Alert/Alert.tsx
+++ b/packages/fakeyou.com/src/components/common/Alert/Alert.tsx
@@ -22,6 +22,7 @@ interface AlertProps {
   icon?: IconProp;
   link?: string;
   linkText?: string;
+  className?: string;
 }
 
 function Alert({
@@ -32,6 +33,7 @@ function Alert({
   icon,
   linkText,
   link,
+  className,
 }: AlertProps) {
   const [show, setShow] = useState<boolean>(() => {
     const closedAt = localStorage.getItem(`alertClosedAt_${id}`);
@@ -55,7 +57,9 @@ function Alert({
     <>
       {show && (
         <div
-          className={`alert alert-${alertVariant} alert-dismissible fade show`}
+          className={`alert alert-${alertVariant} alert-dismissible fade show ${
+            className && className
+          }`.trim()}
           role="alert"
         >
           {icon && <FontAwesomeIcon icon={icon} className="me-2" />}
diff --git a/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.scss b/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.scss
index ce8794debd..689bc124af 100644
--- a/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.scss
+++ b/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.scss
@@ -1,11 +1,59 @@
 @import "scss/colours.scss";
 
+.selection-bubbles-wrapper {
+  position: relative;
+  overflow: hidden;
+  transition: all 0.4s;
+
+  .scroll-indicator {
+    position: absolute;
+    z-index: 2;
+    top: 50%;
+    right: 0px;
+    transform: translateY(-50%);
+    color: rgba($white, 0.2);
+    pointer-events: none;
+    transition: all 0.4s;
+  }
+
+  &:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 80px;
+    background: linear-gradient(to right, rgba($panel, 0), $panel);
+    pointer-events: none;
+    display: none;
+    transition: all 0.4s;
+  }
+
+  &.show-gradient:after {
+    display: block;
+    transition: all 0.4s;
+  }
+}
+
 .selection-bubbles {
   display: flex;
   gap: 0.5rem;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  @media (min-width: 768px) {
+    flex-wrap: wrap;
+    justify-content: start;
+    overflow-x: visible;
+  }
 }
 
 .bubble-button {
+  flex: 0 0 auto;
   border: 2px solid darken($secondary, 3%);
   padding: 8px 16px;
   border-radius: 0.5rem;
@@ -16,6 +64,7 @@
   font-size: 15px;
   font-weight: 500;
   color: rgba($white, 0.75);
+  white-space: nowrap;
 }
 
 .bubble-button:hover {
diff --git a/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.tsx b/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.tsx
index 3f7c8f88a0..356a04a4c3 100644
--- a/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.tsx
+++ b/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.tsx
@@ -1,5 +1,7 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import "./SelectionBubbles.scss";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronRight } from "@fortawesome/pro-solid-svg-icons";
 
 interface SelectionBubbleProps {
   options: string[];
@@ -14,6 +16,8 @@ export default function SelectionBubbles({
   const [selectedOption, setSelectedOption] = useState<string | null>(
     options.length > 0 ? options[0] : null
   );
+  const [showGradient, setShowGradient] = useState(true);
+  const bubblesRef = useRef<HTMLDivElement>(null);
 
   const handleSelect = (
     event: React.MouseEvent<HTMLButtonElement>,
@@ -31,19 +35,62 @@ export default function SelectionBubbles({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const handleScroll = () => {
+    if (bubblesRef.current) {
+      const { scrollLeft, scrollWidth, clientWidth } = bubblesRef.current;
+      const isAtEnd = scrollWidth - Math.round(scrollLeft + clientWidth) <= 1; // Adjust tolerance as needed
+      setShowGradient(!isAtEnd);
+    }
+  };
+
+  const checkForOverflowContent = () => {
+    if (bubblesRef.current) {
+      const { scrollWidth, clientWidth } = bubblesRef.current;
+      const isOverflowing = scrollWidth > clientWidth;
+      setShowGradient(isOverflowing);
+    }
+  };
+
+  useEffect(() => {
+    checkForOverflowContent();
+    window.addEventListener("resize", checkForOverflowContent);
+    return () => window.removeEventListener("resize", checkForOverflowContent);
+  }, [options]);
+
+  useEffect(() => {
+    if (bubblesRef.current) {
+      bubblesRef.current.addEventListener("scroll", handleScroll);
+      return () =>
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        bubblesRef.current?.removeEventListener("scroll", handleScroll);
+    }
+  }, []);
+
   return (
-    <div className="selection-bubbles">
-      {options.map(option => (
-        <button
-          key={option}
-          className={`bubble-button ${
-            selectedOption === option ? "selected" : ""
-          }`}
-          onClick={event => handleSelect(event, option)}
-        >
-          {option}
-        </button>
-      ))}
+    <div
+      className={`selection-bubbles-wrapper ${
+        showGradient ? "show-gradient" : ""
+      }`}
+    >
+      <div className="selection-bubbles" ref={bubblesRef}>
+        {options.map(option => (
+          <button
+            key={option}
+            className={`bubble-button ${
+              selectedOption === option ? "selected" : ""
+            }`}
+            onClick={event => handleSelect(event, option)}
+          >
+            {option}
+          </button>
+        ))}
+      </div>
+      {showGradient && (
+        <FontAwesomeIcon
+          icon={faChevronRight}
+          className="scroll-indicator fs-5"
+        />
+      )}
     </div>
   );
 }
diff --git a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx
index c14fd9c077..ca3447708a 100644
--- a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx
+++ b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx
@@ -213,15 +213,15 @@ export default function TopNav({
         <div className="topbar-nav-center">
           {/* Search Bar */}
           <div className="d-none d-lg-block">
-            {(!isOnLandingPage ||
-              loggedIn ||
-              (isOnLandingPage && isScrolled)) && (
+            {(!isOnLandingPage && !isOnLoginOrSignUpPage) ||
+            (loggedIn && !isOnLoginOrSignUpPage) ||
+            (isOnLandingPage && isScrolled && !isOnLoginOrSignUpPage) ? (
               <SearchBar
                 onFocus={onFocusHandler}
                 onBlur={onBlurHandler}
                 isFocused={isFocused}
               />
-            )}
+            ) : null}
           </div>
         </div>
 
@@ -271,22 +271,27 @@ export default function TopNav({
                 </>
               )}
             </div>
-            <Button
-              icon={faClipboardList}
-              variant="secondary"
-              small={true}
-              label="My Jobs"
-              onClick={openModal}
-              className="d-lg-none"
-            />
-            <Button
-              icon={faSearch}
-              variant="secondary"
-              small={true}
-              square={true}
-              onClick={handleSearchButtonClick}
-              className="d-lg-none"
-            />
+            {!showNavItem && (
+              <>
+                <Button
+                  icon={faClipboardList}
+                  variant="secondary"
+                  small={true}
+                  label="My Jobs"
+                  onClick={openModal}
+                  className="d-lg-none"
+                />
+                <Button
+                  icon={faSearch}
+                  variant="secondary"
+                  small={true}
+                  square={true}
+                  onClick={handleSearchButtonClick}
+                  className="d-lg-none"
+                />
+              </>
+            )}
+
             <Button
               icon={menuButtonIcon}
               variant="secondary"
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 f606b93162..764e252e87 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
@@ -38,16 +38,19 @@ export default function FakeYouLandingHeader({
 
   return (
     <div className="d-flex flex-column fy-header">
-      <Alert
-        id="text-to-image-alert"
-        icon={faSparkles}
-        message={t("alertTtiText")}
-        alertVariant="new"
-        link="/text-to-image"
-        linkText={t("alertTtiCta")}
-      />
+      <Panel clear={true}>
+        <Alert
+          id="text-to-image-alert"
+          icon={faSparkles}
+          message={t("alertTtiText")}
+          alertVariant="new"
+          link="/text-to-image"
+          linkText={t("alertTtiCta")}
+          className="my-3"
+        />
+      </Panel>
 
-      <div className="my-5 py-5">
+      <div className="my-lg-5 py-lg-5 pt-4 pb-5">
         <div className="row g-5">
           <div className="col-12 col-lg-6 order-lg-2">
             <LandingDemo
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 b83310382e..997b5b9841 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
@@ -84,6 +84,8 @@ export default function LandingDemo({
     Rick: "weight_0f762jdzgsy1dhpb86qxy4ssm",
     Mickey: "weight_sfyjyr67ag1647xs0r7gmvkks",
     Eric: "weight_h8ebh6fyjyrr1vsjregw6yz8y",
+    Stan: "weight_0cg1294gaf52c7rh0vz7a2ger",
+    Zelda: "weight_b8rncypy7gw6nb0wthnwe2kk4",
     "Angry Male": "weight_hehgvegadf08mfp5rzd69dmh4",
   };
 
@@ -199,7 +201,7 @@ export default function LandingDemo({
     if (hasMessage) {
       maybeError = (
         <div
-          className="alert alert-primary alert-dismissible fade show m-0"
+          className="alert alert-primary alert-dismissible fade show mt-3"
           role="alert"
         >
           <button