board storyteller page / ai tools section (#729)

src/website/packages/fakeyou.com/src/components/marketing/AITools/AITools.tsx

@@ -140,13 +140,20 @@ export default function AITools() {
       imgSrc: "/images/landing/select-cogvideo.webp",
       imgAlt: "Text and image to video generation",
     },
+    {
+      to: "/board",
+      title: "Storyteller Board",
+      text: "Create visual stories on our intelligent canvas",
+      imgSrc: "/images/landing/select-board.webp",
+      imgAlt: "Create visual stories on our intelligent canvas",
+    },
   ];
 
   if (
     currentPath.includes("/style-video") ||
     currentPath.includes("/ai-face-mirror") ||
     currentPath.includes("/ai-live-portrait") ||
-    currentPath.includes("/voice-conversion") ||
+    currentPath.includes("/voice-conversio  n") ||
     currentPath.includes("/tts") ||
     currentPath.includes("/live-portrait") ||
     currentPath.includes("/dev-lp") ||

src/website/packages/fakeyou.com/src/v2/view/PageContainer.tsx

@@ -445,6 +445,10 @@ const routes = [
     path: "/f5-tts",
     component: lazy(() => import("./pages/f5_tts/F5TTS")),
   },
+  {
+    path: "/board",
+    component: lazy(() => import("./pages/board/Board")),
+  },
   {
     path: "/seed-vc",
     component: lazy(() => import("./pages/seed_vc/SeedVC")),

src/website/packages/fakeyou.com/src/v2/view/pages/board/Board.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle";
+import { Button, Container, Panel } from "components/common";
+import { faArrowRight, faSparkles } from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+export default function Board() {
+  usePrefixedDocumentTitle("Storyteller Board");
+
+  return (
+    <div>
+      <Container
+        type="panel"
+        className="d-flex align-items-center justify-content-center mt-5"
+      >
+        <Panel padding={true} className="text-center p-4 p-lg-5">
+          <h1 className="fw-bold mb-2 display-5 d-flex gap-3 align-items-center justify-content-center">
+            <FontAwesomeIcon icon={faSparkles} className="fs-1" />
+            Storyteller Board
+          </h1>
+          <p className="lead mb-5">
+            Create stunning visual stories on our intelligent canvas.
+            <br className="d-none d-lg-block" />
+            Compose scenes, remove backgrounds, apply AI styles and render
+            videos in minutes.
+          </p>
+
+          <video
+            className="w-100 h-100 rounded"
+            style={{ maxWidth: "820px" }}
+            autoPlay
+            muted
+            loop
+            playsInline
+          >
+            <source
+              src="/videos/board/storyteller-board-demo.mp4"
+              type="video/mp4"
+            />
+          </video>
+
+          <div className="d-flex justify-content-center">
+            <Button
+              label="Try Storyteller Board Now"
+              className="mt-4 py-3"
+              icon={faArrowRight}
+              iconFlip={true}
+              href="https://board.storyteller.ai/"
+              target="_blank"
+            />
+          </div>
+          <p className="opacity-75 mt-3">
+            (You can log in with your FakeYou account)
+          </p>
+        </Panel>
+      </Container>
+    </div>
+  );
+}

src/website/packages/fakeyou.com/src/v2/view/pages/creator_tools/CreatorToolsPage.tsx

@@ -153,6 +153,13 @@ export default function CreatorToolsPage() {
       imgSrc: "/images/landing/select-cogvideo.webp",
       imgAlt: "Text and image to video generation",
     },
+    {
+      to: "/board",
+      title: "Storyteller Board",
+      text: "Create visual stories on our intelligent canvas",
+      imgSrc: "/images/landing/select-board.webp",
+      imgAlt: "Create visual stories on our intelligent canvas",
+    },
   ];
 
   const storytellerLink =