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 a67512ddad..421ee21358 100644 --- a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx +++ b/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) { /> )} + + {!isLoggedIn && } diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV1/VstSectionV1.scss b/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV1/VstSectionV1.scss new file mode 100644 index 0000000000..12ec15229b --- /dev/null +++ b/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; + } +} diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV1/VstSectionV1.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV1/VstSectionV1.tsx new file mode 100644 index 0000000000..64a51edef3 --- /dev/null +++ b/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 ( + +
+

Video Style Transfer

+

+ Transform your videos effortlessly with video style transfer. Apply + unique styles and effects to create visually captivating content. +

+
+ +
+ {columns.map((column, index) => ( +
+
+
+ +
+ +
+
+
+
+ ))} +
+
+ ); +} diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV1/index.ts b/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV1/index.ts new file mode 100644 index 0000000000..c3a0b98577 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV1/index.ts @@ -0,0 +1 @@ +export { default } from "./VstSectionV1"; diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/VstSectionV2.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/VstSectionV2.tsx new file mode 100644 index 0000000000..687c30a2c4 --- /dev/null +++ b/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 ( + +
+
+
+
+
Column 1
+
Column 1
+
+
+ ); +} diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/index.ts b/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/index.ts new file mode 100644 index 0000000000..a1e3f724e7 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/index.ts @@ -0,0 +1 @@ +export { default } from "./VstSectionV2";