From aadef839f8a747fd032695a0e31be44646fe58da Mon Sep 17 00:00:00 2001
From: Victor <victor@storyteller.ai>
Date: Wed, 28 Aug 2024 22:45:10 -0700
Subject: [PATCH] 404 page designs

---
 .../fakeyou.com/public/404_fakeyou.html       | 135 +++++++++++++++++-
 .../fakeyou.com/public/404_storyteller.html   | 135 +++++++++++++++++-
 .../fakeyou.com/public/static-404.css         | 105 ++++++++++++++
 3 files changed, 373 insertions(+), 2 deletions(-)
 create mode 100644 src/website/packages/fakeyou.com/public/static-404.css

diff --git a/src/website/packages/fakeyou.com/public/404_fakeyou.html b/src/website/packages/fakeyou.com/public/404_fakeyou.html
index 457b297879..0686f9c864 100644
--- a/src/website/packages/fakeyou.com/public/404_fakeyou.html
+++ b/src/website/packages/fakeyou.com/public/404_fakeyou.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <link rel="stylesheet" href="static-404.css">
     <link
       rel="apple-touch-icon"
       sizes="180x180"
@@ -138,6 +139,138 @@
     -->
   </head>
   <body>
-    <h1>This Page Could Not Be Found</h1>
+    <h1>Uh oh, we couldn't find this page</h1>
+    <div class="subtitle">Maybe try one of our AI tools:</div>
+    <div class="tools-grid">
+      <a href="/style-video" class="tools-grid-item">
+        <header class="item-header">
+          <div>
+            <h2>Video Style Tranfer</h2>
+            <span>Apply styles to your videos</span>
+          </div>
+          <svg class="arrow-button">
+            <line x1="10" y1="20" x2="30" y2="20"/>
+            <polyline points="25,15 29.5,20 25,25" />
+          </svg>
+        </header>
+        <div class="banner-art">
+          <img src="images/ai-tools/vst_video_poster.jpg">
+        </div>
+      </a>
+      <a href="/ai-live-portrait" class="tools-grid-item">
+        <header class="item-header">
+          <div>
+            <h2>Live Portrait</h2>
+            <span>Transfer audio & motion between portraits</span>
+          </div>
+          <svg class="arrow-button">
+            <line x1="10" y1="20" x2="30" y2="20"/>
+            <polyline points="25,15 29.5,20 25,25" />
+          </svg>
+        </header>
+        <div class="banner-art">
+          <img src="images/ai-tools/lp_video_poster.jpg">
+        </div>
+      </a>
+      <a href="/face-animator" class="tools-grid-item">
+        <header class="item-header">
+          <div>
+            <h2>Lipsync</h2>
+            <span>Animate faces with audio</span>
+          </div>
+          <svg class="arrow-button">
+            <line x1="10" y1="20" x2="30" y2="20"/>
+            <polyline points="25,15 29.5,20 25,25" />
+          </svg>
+        </header>
+        <div class="banner-art">
+          <img src="images/ai-tools/ls_video_poster.jpg">
+        </div>
+      </a>
+      <a href="/beta/2d-video-compositor" class="tools-grid-item">
+        <header class="item-header">
+          <div>
+            <h2>2D Video Compositor</h2>
+            <span>Composite videos and images with AI</span>
+          </div>
+          <svg class="arrow-button">
+            <line x1="10" y1="20" x2="30" y2="20"/>
+            <polyline points="25,15 29.5,20 25,25" />
+          </svg>
+        </header>
+        <div class="banner-art">
+          <img src="images/ai-tools/vcomp_video_poster_2.jpg">
+        </div>
+      </a>
+      <a href="/beta/3d-video-compositor" class="tools-grid-item">
+        <header class="item-header">
+          <div>
+            <h2>3D Video Compositor</h2>
+            <span>Build videos with AI 3D engine</span>
+          </div>
+          <svg class="arrow-button">
+            <line x1="10" y1="20" x2="30" y2="20"/>
+            <polyline points="25,15 29.5,20 25,25" />
+          </svg>
+        </header>
+        <div class="banner-art">
+          <img src="images/ai-tools/vcomp_video_poster.jpg">
+        </div>
+      </a>
+      <a href="/beta/webcam-acting" class="tools-grid-item">
+        <header class="item-header">
+          <div>
+            <h2>Webcam Acting</h2>
+            <span>Act as your character through your camera</span>
+          </div>
+          <svg class="arrow-button">
+            <line x1="10" y1="20" x2="30" y2="20"/>
+            <polyline points="25,15 29.5,20 25,25" />
+          </svg>
+        </header>
+        <div class="banner-art">
+          <img src="images/ai-tools/ca_video_poster.jpg">
+        </div>
+      </a>
+      <a href="/tts" class="tools-grid-item">
+        <header class="item-header">
+          <div>
+            <h2>Text to Speech</h2>
+            <span>Generate audio from text</span>
+          </div>
+          <svg class="arrow-button">
+            <line x1="10" y1="20" x2="30" y2="20"/>
+            <polyline points="25,15 29.5,20 25,25" />
+          </svg>
+        </header>
+        <img class="hanashi-banner" src="images/landing/select-tts.webp">
+      </a>
+      <a href="/voice-conversion" class="tools-grid-item">
+        <header class="item-header">
+          <div>
+            <h2>Voice to Voice</h2>
+            <span>Speak in another voice</span>
+          </div>
+          <svg class="arrow-button">
+            <line x1="10" y1="20" x2="30" y2="20"/>
+            <polyline points="25,15 29.5,20 25,25" />
+          </svg>
+        </header>
+        <img class="hanashi-banner" src="images/landing/select-v2v.webp">
+      </a>
+      <a href="/voice-designer" class="tools-grid-item">
+        <header class="item-header">
+          <div>
+            <h2>Voice Designer</h2>
+            <span>Create your own AI voice</span>
+          </div>
+          <svg class="arrow-button">
+            <line x1="10" y1="20" x2="30" y2="20"/>
+            <polyline points="25,15 29.5,20 25,25" />
+          </svg>
+        </header>
+        <img class="hanashi-banner" src="images/landing/select-vd.webp">
+      </a>
+    </div>
   </body>
 </html>
\ No newline at end of file
diff --git a/src/website/packages/fakeyou.com/public/404_storyteller.html b/src/website/packages/fakeyou.com/public/404_storyteller.html
index 457b297879..0686f9c864 100644
--- a/src/website/packages/fakeyou.com/public/404_storyteller.html
+++ b/src/website/packages/fakeyou.com/public/404_storyteller.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <link rel="stylesheet" href="static-404.css">
     <link
       rel="apple-touch-icon"
       sizes="180x180"
@@ -138,6 +139,138 @@
     -->
   </head>
   <body>
-    <h1>This Page Could Not Be Found</h1>
+    <h1>Uh oh, we couldn't find this page</h1>
+    <div class="subtitle">Maybe try one of our AI tools:</div>
+    <div class="tools-grid">
+      <a href="/style-video" class="tools-grid-item">
+        <header class="item-header">
+          <div>
+            <h2>Video Style Tranfer</h2>
+            <span>Apply styles to your videos</span>
+          </div>
+          <svg class="arrow-button">
+            <line x1="10" y1="20" x2="30" y2="20"/>
+            <polyline points="25,15 29.5,20 25,25" />
+          </svg>
+        </header>
+        <div class="banner-art">
+          <img src="images/ai-tools/vst_video_poster.jpg">
+        </div>
+      </a>
+      <a href="/ai-live-portrait" class="tools-grid-item">
+        <header class="item-header">
+          <div>
+            <h2>Live Portrait</h2>
+            <span>Transfer audio & motion between portraits</span>
+          </div>
+          <svg class="arrow-button">
+            <line x1="10" y1="20" x2="30" y2="20"/>
+            <polyline points="25,15 29.5,20 25,25" />
+          </svg>
+        </header>
+        <div class="banner-art">
+          <img src="images/ai-tools/lp_video_poster.jpg">
+        </div>
+      </a>
+      <a href="/face-animator" class="tools-grid-item">
+        <header class="item-header">
+          <div>
+            <h2>Lipsync</h2>
+            <span>Animate faces with audio</span>
+          </div>
+          <svg class="arrow-button">
+            <line x1="10" y1="20" x2="30" y2="20"/>
+            <polyline points="25,15 29.5,20 25,25" />
+          </svg>
+        </header>
+        <div class="banner-art">
+          <img src="images/ai-tools/ls_video_poster.jpg">
+        </div>
+      </a>
+      <a href="/beta/2d-video-compositor" class="tools-grid-item">
+        <header class="item-header">
+          <div>
+            <h2>2D Video Compositor</h2>
+            <span>Composite videos and images with AI</span>
+          </div>
+          <svg class="arrow-button">
+            <line x1="10" y1="20" x2="30" y2="20"/>
+            <polyline points="25,15 29.5,20 25,25" />
+          </svg>
+        </header>
+        <div class="banner-art">
+          <img src="images/ai-tools/vcomp_video_poster_2.jpg">
+        </div>
+      </a>
+      <a href="/beta/3d-video-compositor" class="tools-grid-item">
+        <header class="item-header">
+          <div>
+            <h2>3D Video Compositor</h2>
+            <span>Build videos with AI 3D engine</span>
+          </div>
+          <svg class="arrow-button">
+            <line x1="10" y1="20" x2="30" y2="20"/>
+            <polyline points="25,15 29.5,20 25,25" />
+          </svg>
+        </header>
+        <div class="banner-art">
+          <img src="images/ai-tools/vcomp_video_poster.jpg">
+        </div>
+      </a>
+      <a href="/beta/webcam-acting" class="tools-grid-item">
+        <header class="item-header">
+          <div>
+            <h2>Webcam Acting</h2>
+            <span>Act as your character through your camera</span>
+          </div>
+          <svg class="arrow-button">
+            <line x1="10" y1="20" x2="30" y2="20"/>
+            <polyline points="25,15 29.5,20 25,25" />
+          </svg>
+        </header>
+        <div class="banner-art">
+          <img src="images/ai-tools/ca_video_poster.jpg">
+        </div>
+      </a>
+      <a href="/tts" class="tools-grid-item">
+        <header class="item-header">
+          <div>
+            <h2>Text to Speech</h2>
+            <span>Generate audio from text</span>
+          </div>
+          <svg class="arrow-button">
+            <line x1="10" y1="20" x2="30" y2="20"/>
+            <polyline points="25,15 29.5,20 25,25" />
+          </svg>
+        </header>
+        <img class="hanashi-banner" src="images/landing/select-tts.webp">
+      </a>
+      <a href="/voice-conversion" class="tools-grid-item">
+        <header class="item-header">
+          <div>
+            <h2>Voice to Voice</h2>
+            <span>Speak in another voice</span>
+          </div>
+          <svg class="arrow-button">
+            <line x1="10" y1="20" x2="30" y2="20"/>
+            <polyline points="25,15 29.5,20 25,25" />
+          </svg>
+        </header>
+        <img class="hanashi-banner" src="images/landing/select-v2v.webp">
+      </a>
+      <a href="/voice-designer" class="tools-grid-item">
+        <header class="item-header">
+          <div>
+            <h2>Voice Designer</h2>
+            <span>Create your own AI voice</span>
+          </div>
+          <svg class="arrow-button">
+            <line x1="10" y1="20" x2="30" y2="20"/>
+            <polyline points="25,15 29.5,20 25,25" />
+          </svg>
+        </header>
+        <img class="hanashi-banner" src="images/landing/select-vd.webp">
+      </a>
+    </div>
   </body>
 </html>
\ No newline at end of file
diff --git a/src/website/packages/fakeyou.com/public/static-404.css b/src/website/packages/fakeyou.com/public/static-404.css
new file mode 100644
index 0000000000..c5f46377eb
--- /dev/null
+++ b/src/website/packages/fakeyou.com/public/static-404.css
@@ -0,0 +1,105 @@
+:root {
+  --primary: #e66462;
+  --primary-light: #ea7a78;
+}
+html, body {
+  background-color: #1a1a27;
+  color: #fff;
+  font-family: "Source Sans 3";
+  font-weight: 400;
+  font-style: normal;
+  padding: 1rem;
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin-bottom: .5rem;
+  line-height: 1em;
+}
+
+.item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 0 2rem;
+  font-weight: 400;
+}
+
+.item-header h2 {
+  margin: 0;
+  line-height: 1em;
+  height: 1em;
+}
+
+.subtitle {
+  font-size: 1.25rem;
+  margin-bottom: 1rem;
+}
+.tools-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 1.5rem;
+}
+.tools-grid-item {
+  display: flex;
+  flex-direction: column;
+  background-color: #242433;
+  border: 2px solid rgba(255, 255, 255, .04);
+  border-radius: .5rem;
+  box-sizing: border-box;
+  height: 330px;
+  padding: 2rem 1.5rem 0;
+  text-decoration: none;
+  color: #fff;
+  transition: .2s all;
+  overflow: hidden;
+}
+
+.tools-grid-item:hover {
+  border-color: var(--primary);
+}
+
+.arrow-button {
+  display: inline-block;
+  background-color: var(--primary);
+  border-radius: .5rem;
+  height: 2.5rem;
+  width: 2.5rem;
+  transition: .2s all;
+}
+
+.tools-grid-item:hover .arrow-button {
+  background-color: var(--primary-light);
+}
+
+.arrow-button line, .arrow-button polyline {
+  stroke: #fff;
+  stroke-width: 2.5px;
+  stroke-linecap: round;
+  fill: none;
+  transition: .2s all;
+}
+
+.tools-grid-item:hover line, .tools-grid-item:hover polyline {
+  transform: translateX(3px);
+}
+
+.hanashi-banner {
+  transition: .2s all ease-in-out;
+}
+
+.tools-grid-item:hover .hanashi-banner {
+  transform: scale(1.1);
+}
+
+.banner-art {
+  width: 100%;
+  height: 100%;
+  border-radius: .5rem .5rem 0 0;
+  overflow: hidden;
+}
+
+.banner-art img {
+  width: 100%;
+  height: auto;
+}
\ No newline at end of file