From d88b121b9d2d8835ed66cb134eba1da82253a22c Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Tue, 30 Jul 2024 14:37:53 -0700
Subject: [PATCH] relocated dashboard tools components to AITools and
 AIToolsRow within components/marketing for reuse elsewhere

---
 .../components/marketing/AITools/AITools.tsx  | 69 +++++++++++++++++++
 .../marketing/AITools/AIToolsRow.tsx}         | 18 +++--
 .../components/marketing/AITools/index.tsx    |  2 +
 .../src/components/marketing/index.tsx        |  3 +-
 .../pages/creator_tools/CreatorToolsPage.tsx  |  6 +-
 .../src/v2/view/pages/landing/Dashboard.tsx   | 64 +----------------
 .../tts/tts_model_list/TtsModelListPage.tsx   |  9 ++-
 7 files changed, 92 insertions(+), 79 deletions(-)
 create mode 100644 src/website/packages/fakeyou.com/src/components/marketing/AITools/AITools.tsx
 rename src/website/packages/fakeyou.com/src/{v2/view/pages/landing/components/DashboardRow.tsx => components/marketing/AITools/AIToolsRow.tsx} (89%)
 create mode 100644 src/website/packages/fakeyou.com/src/components/marketing/AITools/index.tsx

diff --git a/src/website/packages/fakeyou.com/src/components/marketing/AITools/AITools.tsx b/src/website/packages/fakeyou.com/src/components/marketing/AITools/AITools.tsx
new file mode 100644
index 0000000000..a6dde31f06
--- /dev/null
+++ b/src/website/packages/fakeyou.com/src/components/marketing/AITools/AITools.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+import { faFlask, faSparkles } from "@fortawesome/pro-solid-svg-icons";
+import { useLocalize } from "hooks";
+import AIToolsRow from "./AIToolsRow";
+
+export default function AITools() {
+  const { t } = useLocalize("LandingPage");
+  const items = [
+    {
+      to: "/tts",
+      title: t("productTtsTitle"),
+      text: t("productTtsText"),
+      imgSrc: "/images/landing/select-tts.webp",
+      imgAlt: "Text to Speech",
+    },
+    {
+      to: "/voice-conversion",
+      title: t("productVcTitle"),
+      text: t("productVcText"),
+      imgSrc: "/images/landing/select-v2v.webp",
+      imgAlt: "Voice Conversion",
+    },
+    {
+      to: "/voice-designer",
+      title: t("productVdTitle"),
+      text: t("productVdText"),
+      imgSrc: "/images/landing/select-vd.webp",
+      imgAlt: "Voice Cloning",
+      badgeContent: {
+        type: "beta",
+        icon: faFlask,
+        label: "BETA",
+      },
+    },
+    {
+      to: "/face-animator",
+      title: t("productFaceAnimatorTitle"),
+      text: t("productFaceAnimatorText"),
+      imgSrc: "/images/landing/select-fa.webp",
+      imgAlt: "Face Animator",
+    },
+    {
+      to: "/style-video",
+      title: t("productVideoStyleTransferTitle"),
+      text: t("productVideoStyleTransferText"),
+      imgSrc: "/images/landing/select-vst.webp",
+      imgAlt: "Video Style Transfer",
+      badgeContent: {
+        type: "new",
+        icon: faSparkles,
+        label: "NEW",
+      },
+    },
+    {
+      to: "/ai-face-mirror",
+      title: t("productFaceMirrorTitle"),
+      text: t("productFaceMirrorText"),
+      imgSrc: "/images/landing/select-fm.webp",
+      imgAlt: "AI Face Mirror",
+      badgeContent: {
+        type: "new",
+        icon: faSparkles,
+        label: "NEW",
+      },
+    },
+  ];
+
+  return <AIToolsRow {...{ items }} />;
+}
diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/landing/components/DashboardRow.tsx b/src/website/packages/fakeyou.com/src/components/marketing/AITools/AIToolsRow.tsx
similarity index 89%
rename from src/website/packages/fakeyou.com/src/v2/view/pages/landing/components/DashboardRow.tsx
rename to src/website/packages/fakeyou.com/src/components/marketing/AITools/AIToolsRow.tsx
index 29b7943684..08e4212112 100644
--- a/src/website/packages/fakeyou.com/src/v2/view/pages/landing/components/DashboardRow.tsx
+++ b/src/website/packages/fakeyou.com/src/components/marketing/AITools/AIToolsRow.tsx
@@ -10,7 +10,7 @@ interface BadgeContent {
   label: string;
 }
 
-interface DashboardItemProps {
+interface AIToolsItemProps {
   to: string;
   title: string;
   text?: string;
@@ -19,14 +19,14 @@ interface DashboardItemProps {
   badgeContent?: BadgeContent;
 }
 
-export function DashboardItem({
+export function AIToolsItem({
   to,
   title,
   text,
   imgSrc,
   imgAlt,
   badgeContent,
-}: DashboardItemProps) {
+}: AIToolsItemProps) {
   return (
     <div className="col-12 col-md-6 col-lg-4">
       <Link
@@ -66,21 +66,21 @@ export function DashboardItem({
   );
 }
 
-interface DashboardRowProps {
-  items: DashboardItemProps[];
+interface AIToolsRowProps {
+  items: AIToolsItemProps[];
   bgDotsLeft?: boolean;
   bgDotsRight?: boolean;
 }
 
-export function DashboardRow({
+export default function AIToolsRow({
   items,
   bgDotsLeft,
   bgDotsRight,
-}: DashboardRowProps) {
+}: AIToolsRowProps) {
   return (
     <div className="row g-4 position-relative">
       {items.map((item, index) => (
-        <DashboardItem key={index} {...item} />
+        <AIToolsItem key={index} {...item} />
       ))}
       {bgDotsLeft && (
         <img
@@ -99,5 +99,3 @@ export function DashboardRow({
     </div>
   );
 }
-
-export default DashboardRow;
diff --git a/src/website/packages/fakeyou.com/src/components/marketing/AITools/index.tsx b/src/website/packages/fakeyou.com/src/components/marketing/AITools/index.tsx
new file mode 100644
index 0000000000..972f1616fd
--- /dev/null
+++ b/src/website/packages/fakeyou.com/src/components/marketing/AITools/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./AITools";
+export { default as AIToolsRow } from "./AIToolsRow";
diff --git a/src/website/packages/fakeyou.com/src/components/marketing/index.tsx b/src/website/packages/fakeyou.com/src/components/marketing/index.tsx
index 7fec230b4c..ba39c2b964 100644
--- a/src/website/packages/fakeyou.com/src/components/marketing/index.tsx
+++ b/src/website/packages/fakeyou.com/src/components/marketing/index.tsx
@@ -1,3 +1,4 @@
 import AIFaceMirrorCTA from "./AIFaceMirrorCTA";
+import AITools, { AIToolsRow } from "./AITools";
 
-export { AIFaceMirrorCTA };
+export { AIFaceMirrorCTA, AITools, AIToolsRow };
diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/creator_tools/CreatorToolsPage.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/creator_tools/CreatorToolsPage.tsx
index 2cb5f10bf2..dce5683353 100644
--- a/src/website/packages/fakeyou.com/src/v2/view/pages/creator_tools/CreatorToolsPage.tsx
+++ b/src/website/packages/fakeyou.com/src/v2/view/pages/creator_tools/CreatorToolsPage.tsx
@@ -15,7 +15,7 @@ import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle";
 import { Button, Container, Panel } from "components/common";
 import { useLocalize } from "hooks";
 import React from "react";
-import DashboardRow from "../landing/components/DashboardRow";
+import { AIToolsRow } from "components/marketing";
 import "./CreatorTools.scss";
 
 interface CreatorToolsPageProps {
@@ -119,11 +119,11 @@ export default function CreatorToolsPage(props: CreatorToolsPageProps) {
         <div className="d-flex flex-column gap-5">
           <div>
             <h2 className="fw-bold mb-3 mt-4">Video</h2>
-            <DashboardRow items={videoProducts} />
+            <AIToolsRow items={videoProducts} />
           </div>
           <div>
             <h2 className="fw-bold mb-3 mt-4">Voice & Audio</h2>
-            <DashboardRow items={voiceProducts} />
+            <AIToolsRow items={voiceProducts} />
           </div>
           <div>
             <h2 className="fw-bold mb-3 mt-4">
diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/landing/Dashboard.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/landing/Dashboard.tsx
index 2be2d378ae..de066cc230 100644
--- a/src/website/packages/fakeyou.com/src/v2/view/pages/landing/Dashboard.tsx
+++ b/src/website/packages/fakeyou.com/src/v2/view/pages/landing/Dashboard.tsx
@@ -9,10 +9,10 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
 import { Panel } from "components/common";
+import { AITools } from "components/marketing";
 import { useLocalize } from "hooks";
 import React from "react";
 import { Link } from "react-router-dom";
-import DashboardRow from "./components/DashboardRow";
 
 interface DashboardProps {
   sessionWrapper: SessionWrapper;
@@ -66,71 +66,11 @@ export default function Dashboard(props: DashboardProps) {
     );
   }
 
-  const dashboardProducts = [
-    {
-      to: "/tts",
-      title: t("productTtsTitle"),
-      text: t("productTtsText"),
-      imgSrc: "/images/landing/select-tts.webp",
-      imgAlt: "Text to Speech",
-    },
-    {
-      to: "/voice-conversion",
-      title: t("productVcTitle"),
-      text: t("productVcText"),
-      imgSrc: "/images/landing/select-v2v.webp",
-      imgAlt: "Voice Conversion",
-    },
-    {
-      to: "/voice-designer",
-      title: t("productVdTitle"),
-      text: t("productVdText"),
-      imgSrc: "/images/landing/select-vd.webp",
-      imgAlt: "Voice Cloning",
-      badgeContent: {
-        type: "beta",
-        icon: faFlask,
-        label: "BETA",
-      },
-    },
-    {
-      to: "/face-animator",
-      title: t("productFaceAnimatorTitle"),
-      text: t("productFaceAnimatorText"),
-      imgSrc: "/images/landing/select-fa.webp",
-      imgAlt: "Face Animator",
-    },
-    {
-      to: "/style-video",
-      title: t("productVideoStyleTransferTitle"),
-      text: t("productVideoStyleTransferText"),
-      imgSrc: "/images/landing/select-vst.webp",
-      imgAlt: "Video Style Transfer",
-      badgeContent: {
-        type: "new",
-        icon: faSparkles,
-        label: "NEW",
-      },
-    },
-    {
-      to: "/ai-face-mirror",
-      title: t("productFaceMirrorTitle"),
-      text: t("productFaceMirrorText"),
-      imgSrc: "/images/landing/select-fm.webp",
-      imgAlt: "AI Face Mirror",
-      badgeContent: {
-        type: "new",
-        icon: faSparkles,
-        label: "NEW",
-      },
-    },
-  ];
-
   return (
     <Panel clear={true} className={`${!isLoggedIn ? "section" : "mt-5"}`}>
       <h1 className="fw-bold mb-4">{t("productsTitle")}</h1>
 
-      <DashboardRow items={dashboardProducts} />
+      <AITools />
 
       {uploadModelSection}
     </Panel>
diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx
index 6c3d868d4c..f8ce34b816 100644
--- a/src/website/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx
+++ b/src/website/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx
@@ -57,9 +57,10 @@ import { SearchOmnibar } from "./search/SearchOmnibar";
 import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 import { useInferenceJobs, useLocalize } from "hooks";
 import { Container, Panel } from "components/common";
+import { AITools } from "components/marketing";
 import PageHeaderWithImage from "components/layout/PageHeaderWithImage";
 import { faMessageDots } from "@fortawesome/pro-solid-svg-icons";
-import StorytellerStudioCTA from "components/common/StorytellerStudioCTA";
+// import StorytellerStudioCTA from "components/common/StorytellerStudioCTA";
 
 export interface EnqueueJobResponsePayload {
   success: boolean;
@@ -611,8 +612,10 @@ function TtsModelListPage(props: Props) {
         {/* <SessionTtsModelUploadResultList /> */}
       </Container>
 
-      <Container type="panel" className="py-5 mt-5 d-flex flex-column gap-5">
-        <StorytellerStudioCTA />
+      <Container type="panel" className="py-5 gap-5">
+        <h2 {...{ className: "mb-3" }}>Try our other AI tools</h2>
+        <AITools />
+        {/*<StorytellerStudioCTA />*/}
       </Container>
     </>
   );