diff --git a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx index 2738440669..d245e6189d 100644 --- a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx +++ b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx @@ -188,6 +188,22 @@ export default function TopNav({ // { id: 4, name: "Text to Image", link: "/text-to-image" }, ]; + useEffect(() => { + const pageContentWrapper = document.getElementById("page-content-wrapper"); + + if (pageContentWrapper) { + if (domain.titlePart === "Storyteller AI" && isOnLandingPage) { + pageContentWrapper.style.padding = "0px"; + } else { + pageContentWrapper.style.padding = ""; + } + } + }, [domain.titlePart, isOnLandingPage]); + + if (domain.titlePart === "Storyteller AI" && isOnLandingPage) { + return null; + } + return (
- + @@ -681,7 +680,9 @@ class PageContainer extends React.Component< - + 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 ec302a15a9..fcc0a31cfa 100644 --- a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx @@ -7,7 +7,7 @@ import { Container } from "components/common"; import FakeYouLandingHeader from "./fakeyou/FakeYouLandingHeader"; import Dashboard from "./Dashboard"; import { useDomainConfig } from "context/DomainConfigContext"; -import LandingVideoReel from "./components/LandingVideoReel/LandingVideoReel"; +// import LandingVideoReel from "./components/LandingVideoReel/LandingVideoReel"; import { FrontendInferenceJobType, InferenceJob, @@ -17,9 +17,13 @@ import "./LandingPage.scss"; // import VstSectionV1 from "./components/VstSectionV1"; import VstSectionV2 from "./components/VstSectionV2"; import FakeYouLandingBody from "./fakeyou/FakeYouLandingBody"; -import { WebsiteConfig, Website } from "@storyteller/components/src/env/GetWebsite"; +import { + WebsiteConfig, + Website, +} from "@storyteller/components/src/env/GetWebsite"; import OnboardingSelection from "./storyteller/OnboardingSelection"; -import TtsDemoSection from "./components/TtsDemoSection/TtsDemoSection"; +// import TtsDemoSection from "./components/TtsDemoSection/TtsDemoSection"; +import PrelaunchLanding from "./storyteller/PrelaunchLanding/PrelaunchLanding"; interface Props { sessionWrapper: SessionWrapper; @@ -62,56 +66,58 @@ function LandingPage(props: Props) { return ( <> {domain.website === Website.StorytellerAi && ( - + // + )} - {domain.website === Website.FakeYou ? ( - <> - {/* FAKEYOU.COM */} - {!isLoggedIn && ( - <> - - {/* */} - - - )} + { + domain.website === Website.FakeYou ? ( + <> + {/* FAKEYOU.COM */} + {!isLoggedIn && ( + <> + + {/* */} + + + )} - + - {!isLoggedIn && } - - ) : ( - <> - {/* STORYTELLER,AI */} + {!isLoggedIn && } + + ) : null + // <> + // {/* STORYTELLER,AI */} - {protectedStudioOnboarding} + // {protectedStudioOnboarding} - - + // + // - + // - - - )} + // + // + } ); diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.scss b/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.scss new file mode 100644 index 0000000000..728fef697a --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.scss @@ -0,0 +1,121 @@ +@import "scss/colours.scss"; + +.grid-container { + display: grid; + grid-template-columns: repeat(7, 1fr); + grid-template-rows: repeat(7, calc(100vw / 7 * (9 / 16))); + gap: 16px; + padding: 16px; + position: relative; + + @media (max-width: 992px) { + grid-template-columns: repeat(5, 1fr); + grid-template-rows: repeat(5, calc(100vw / 5 * (9 / 16))); + gap: 16px; + padding: 16px; + } + + @media (max-width: 768px) { + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, calc(100vw / 3 * (9 / 16))); + gap: 12px; + padding: 12px; + } +} + +.grid-item { + position: relative; + background-color: rgba($white, 0.06); + display: flex; + align-items: center; + justify-content: center; + border-radius: 0.5rem; + overflow: hidden; + transition: transform 0.2s; + pointer-events: all; + border: none; + + &:hover { + transform: scale(1.1); + } + + &.double-grid { + grid-column: span 2; + } + + &.triple-grid { + grid-column: span 3; + height: 6rem; + } + + &.grid-item-custom { + overflow: visible; + position: relative; + + &:hover { + transform: none; + } + } + + img { + cursor: pointer; + } + + .logo { + position: absolute; + left: 0; + top: 0; + margin-left: 20%; + margin-top: 10%; + width: 270%; + cursor: default; + + @media (max-width: 992px) { + margin-left: 22%; + margin-top: 15%; + } + } + + .waitlist-button { + position: absolute; + left: 0; + top: 0; + margin-left: 10%; + margin-top: 4%; + font-size: 20px; + font-weight: 500; + color: #fff; + background-color: $primary; + border-radius: 50px; + cursor: pointer; + transition: all 0.2s; + width: 84%; + padding: 2.5%; + border: 4px solid lighten($primary, 12%); + box-shadow: 0 0 15px rgba(255, 255, 255, 0.7); // Soft white glow + animation: glow 1.5s infinite alternate; + + &:hover { + background-color: lighten($primary, 5%); + } + + @media (max-width: 992px) { + margin-left: 8%; + margin-top: 2%; + } + } + + @keyframes glow { + from { + box-shadow: 0 0 50px rgba(255, 170, 168, 0.25); + } + to { + box-shadow: 0 0 25px rgba(255, 170, 168, 0.5); + } + } +} + +.grid-item.blank { + background-color: transparent; + border: none; +} diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.tsx new file mode 100644 index 0000000000..6a9222d749 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/PrelaunchLanding/PrelaunchLanding.tsx @@ -0,0 +1,184 @@ +import React, { useEffect, useState } from "react"; +import "./PrelaunchLanding.scss"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faArrowRight } from "@fortawesome/pro-solid-svg-icons"; +import { BucketConfig } from "@storyteller/components/src/api/BucketConfig"; + +interface MediaItem { + token: string; + public_bucket_path: string; + maybe_creator: { + username: string; + }; +} + +const PrelaunchLanding: React.FC = () => { + const totalGrids = 63; + const [mediaItems, setMediaItems] = useState([]); + const [blankGrids, setBlankGrids] = useState([15, 16, 17, 22, 23]); + const [screenSize, setScreenSize] = useState("lg"); + + useEffect(() => { + fetchMediaItems(); + updateGridsForScreenSize(); + window.addEventListener("resize", updateGridsForScreenSize); + return () => window.removeEventListener("resize", updateGridsForScreenSize); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + const updateGridsForScreenSize = () => { + const screenWidth = window.innerWidth; + if (screenWidth < 768) { + setBlankGrids([7, 8, 9, 10, 11, 12]); + setScreenSize("sm"); + } else if (screenWidth < 992) { + setBlankGrids([12, 13, 14, 17, 18, 19]); + setScreenSize("md"); + } else { + setBlankGrids([15, 16, 17, 22, 23]); + setScreenSize("lg"); + } + }; + + const getCustomGridItemIndex = () => { + switch (screenSize) { + case "lg": + return 15; + case "md": + return 12; + case "sm": + return 7; + default: + return 15; + } + }; + + const fetchMediaItems = async () => { + try { + const response = await fetch( + "https://api.storyteller.ai/v1/media_files/list_featured?page_size=63&filter_media_classes=video" + ); + const data = await response.json(); + if (data.success) { + setMediaItems(shuffleArray(data.results)); + } + } catch (error) { + console.error("Error fetching media items:", error); + } + }; + + const shuffleArray = (array: any[]) => { + for (let i = array.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; + } + return array; + }; + + const renderGridItems = () => { + const gridItems = []; + const customGridItemIndex = getCustomGridItemIndex(); + + for (let i = 1; i <= totalGrids; i++) { + const isBlank = blankGrids.includes(i); + if (screenSize === "sm") { + if (i === 10) { + gridItems.push( +
+ +
+ ); + i += 2; + continue; + } + } else if (screenSize === "md") { + if (i === 17) { + gridItems.push( +
+ +
+ ); + i += 2; + continue; + } + } else { + if (i === 22) { + gridItems.push( +
+ +
+ ); + i++; + continue; + } + } + + const mediaItem = mediaItems[i - 1]; + const bucketConfig = new BucketConfig(); + const gifUrl = mediaItem + ? bucketConfig.getCdnUrl( + mediaItem.public_bucket_path + "-thumb.gif", + 360, + 20 + ) + : ""; + + gridItems.push( +
+ {isBlank ? ( + i === customGridItemIndex ? ( + Storyteller Logo + ) : null + ) : mediaItem ? ( + + window.open(`https://storyteller.ai/media/${mediaItem.token}`) + } + src={gifUrl} + className="w-100 h-100 object-fit-cover" + alt={`Video by ${mediaItem.maybe_creator.username}`} + /> + ) : null} +
+ ); + } + return gridItems; + }; + + return
{renderGridItems()}
; +}; + +export default PrelaunchLanding;