vst section version 1

packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx

@@ -16,6 +16,7 @@ import {
 } from "@storyteller/components/src/jobs/InferenceJob";
 import { TtsInferenceJob } from "@storyteller/components/src/jobs/TtsInferenceJobs";
 import "./LandingPage.scss";
+import VstSectionV1 from "./components/VstSectionV1";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -55,6 +56,8 @@ function LandingPage(props: Props) {
               />
             )}
 
+            <VstSectionV1 />
+
             <Dashboard sessionWrapper={props.sessionWrapper} />
 
             {!isLoggedIn && <FakeYouLandingBody />}

packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV1/VstSectionV1.scss

@@ -0,0 +1,62 @@
+@import "scss/colours.scss";
+
+.vst-sbs-panel {
+  background-color: $panel;
+  height: 500px;
+  overflow: hidden;
+  border: lighten($panel, 10%) solid 1px;
+}
+
+.column-1 .vst-sbs-panel,
+.column-4 .vst-sbs-panel {
+  border-radius: 0.5rem 0 0 0.5rem;
+}
+
+.column-2 .vst-sbs-panel,
+.column-3 .vst-sbs-panel {
+  border-radius: 0;
+}
+
+.column-4 .vst-sbs-panel {
+  border-radius: 0 0.5rem 0.5rem 0;
+}
+
+.column-1 .vst-sbs-panel,
+.column-2 .vst-sbs-panel,
+.column-3 .vst-sbs-panel {
+  border-right: 1px solid $panel-inner;
+}
+
+.vst-sbs-video-cover {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  position: absolute;
+  z-index: 1;
+}
+
+.vst-sbs-video-overlay-container {
+  position: relative;
+  height: 100%;
+}
+
+.vst-sbs-video-overlay-text {
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  left: 0;
+  color: white;
+  padding: 0.75rem;
+}
+
+@media (max-width: 992px) {
+  .vst-sbs-panel {
+    height: 400px;
+  }
+}
+
+@media (max-width: 768px) {
+  .vst-sbs-panel {
+    height: 240px;
+  }
+}

packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV1/VstSectionV1.tsx

@@ -0,0 +1,47 @@
+import { Badge, Panel } from "components/common";
+import React from "react";
+import "./VstSectionV1.scss";
+
+interface VstSectionV1Props {}
+
+const columns = [
+  {
+    title: "Original Video",
+    videoSrc: "videos/face-animator-instruction-en.mp4",
+  },
+  { title: "Anime Style", videoSrc: "videos/face-animator-instruction-en.mp4" },
+  { title: "Pixel Style", videoSrc: "videos/face-animator-instruction-en.mp4" },
+  { title: "Ink Style", videoSrc: "videos/face-animator-instruction-en.mp4" },
+];
+
+export default function VstSectionV1(props: VstSectionV1Props) {
+  return (
+    <Panel clear={true} className="pb-5">
+      <div className="mb-5">
+        <h1 className="fw-bold">Video Style Transfer</h1>
+        <p>
+          Transform your videos effortlessly with video style transfer. Apply
+          unique styles and effects to create visually captivating content.
+        </p>
+      </div>
+
+      <div className="row g-0">
+        {columns.map((column, index) => (
+          <div className={`col-6 col-lg-3 column-${index + 1}`} key={index}>
+            <div className="vst-sbs-panel">
+              <div className="vst-sbs-video-overlay-container">
+                <video className="vst-sbs-video-cover" autoPlay loop muted>
+                  <source src={column.videoSrc} type="video/mp4" />
+                  Your browser does not support the video tag.
+                </video>
+                <div className="vst-sbs-video-overlay-text">
+                  <Badge label={column.title} color="gray" />
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </Panel>
+  );
+}

packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV1/index.ts

@@ -0,0 +1 @@
+export { default } from "./VstSectionV1";

packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/VstSectionV2.tsx

@@ -0,0 +1,18 @@
+import { Panel } from "components/common";
+import React from "react";
+
+interface VstSectionV2Props {}
+
+export default function VstSectionV2(props: VstSectionV2Props) {
+  return (
+    <Panel clear={true}>
+      <div className="d-flex">
+        <div>
+          <div className="ratio"></div>
+        </div>
+        <div>Column 1</div>
+        <div>Column 1</div>
+      </div>
+    </Panel>
+  );
+}

packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/index.ts

@@ -0,0 +1 @@
+export { default } from "./VstSectionV2";