diff --git a/packages/fakeyou.com/src/components/common/Card/Card.scss b/packages/fakeyou.com/src/components/common/Card/Card.scss index fbc93b28e..44b094781 100644 --- a/packages/fakeyou.com/src/components/common/Card/Card.scss +++ b/packages/fakeyou.com/src/components/common/Card/Card.scss @@ -87,6 +87,17 @@ &:hover .card-video-play { color: rgba($white, 0.7); } + + &.card-hover-border-red { + &:hover { + border: 1px solid $primary; + } + } + + &.bottom-text-hover { + background-color: lighten($panel-inner, 2%); + border: 1px solid $primary; + } } h6 { @@ -97,3 +108,14 @@ overflow: hidden; } } + +.card-bottom-text { + padding-top: 0.75rem; + cursor: pointer; +} + +.centered-row { + display: flex; + justify-content: center; + flex-wrap: wrap; +} diff --git a/packages/fakeyou.com/src/components/common/Card/Card.tsx b/packages/fakeyou.com/src/components/common/Card/Card.tsx index 80bf4b667..fdbd2bc03 100644 --- a/packages/fakeyou.com/src/components/common/Card/Card.tsx +++ b/packages/fakeyou.com/src/components/common/Card/Card.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import "./Card.scss"; interface CardProps { @@ -8,6 +8,12 @@ interface CardProps { canHover?: boolean; onMouseEnter?: () => void; onMouseLeave?: () => void; + backgroundImage?: string; + height?: string; + borderWidth?: string; + hoverPrimaryColor?: true; + aspectRatio?: string; + bottomText?: string; } export default function Card({ @@ -17,17 +23,48 @@ export default function Card({ canHover, onMouseEnter, onMouseLeave, + backgroundImage, + height, + borderWidth, + hoverPrimaryColor, + aspectRatio = "auto", + bottomText, }: CardProps) { + const [textHovered, setTextHovered] = useState(false); + return ( -
- {children} -
+ <> +
+ {children} +
+ {bottomText && ( +
setTextHovered(true)} + onMouseLeave={() => setTextHovered(false)} + > + {bottomText} +
+ )} + ); } diff --git a/packages/fakeyou.com/src/utils/domainConfig.ts b/packages/fakeyou.com/src/utils/domainConfig.ts index a37eade05..7b2ba0c47 100644 --- a/packages/fakeyou.com/src/utils/domainConfig.ts +++ b/packages/fakeyou.com/src/utils/domainConfig.ts @@ -4,20 +4,20 @@ export enum Website { } export interface DomainConfig { - website: Website, - logo: string, - title: string, - link: string, + website: Website; + logo: string; + title: string; + link: string; } const domainConfigs: Record = { - "storyteller": { + fakeyou: { website: Website.StorytellerAi, logo: "/fakeyou/Storyteller-Logo-1.png", title: "Storyteller AI", link: "https://storyteller.ai", }, - "fakeyou": { + storyteller: { website: Website.FakeYou, logo: "/fakeyou/FakeYou-Logo-2.png", title: "FakeYou", @@ -35,7 +35,7 @@ export const getCurrentDomainConfig = (): DomainConfig => { } if (window.location.hostname.includes("storyteller")) { - return domainConfigs.storyteller; + return domainConfigs.storyteller; } // Default fallback 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 5f684760d..eafc84f8f 100644 --- a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx @@ -2,14 +2,12 @@ import React from "react"; import { usePrefixedDocumentTitle } from "../../../../common/UsePrefixedDocumentTitle"; import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper"; -import {} from "@fortawesome/pro-solid-svg-icons"; import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient"; import { Container } from "components/common"; import FakeYouLandingHeader from "./fakeyou/FakeYouLandingHeader"; import Dashboard from "./Dashboard"; import { useDomainConfig } from "context/DomainConfigContext"; -import StorytellerLanding from "./storyteller/StorytellerLanding"; -import LandingVideoReel from "./components/LandingVideoReel"; +import LandingVideoReel from "./components/LandingVideoReel/LandingVideoReel"; import { FrontendInferenceJobType, InferenceJob, @@ -20,6 +18,8 @@ import "./LandingPage.scss"; import VstSectionV2 from "./components/VstSectionV2"; import FakeYouLandingBody from "./fakeyou/FakeYouLandingBody"; import { DomainConfig, Website } from "utils/domainConfig"; +import OnboardingSelection from "./storyteller/OnboardingSelection"; +import TtsDemoSection from "./components/TtsDemoSection/TtsDemoSection"; interface Props { sessionWrapper: SessionWrapper; @@ -39,13 +39,15 @@ function LandingPage(props: Props) { PosthogClient.recordPageview(); - const domain : DomainConfig = useDomainConfig(); + const domain: DomainConfig = useDomainConfig(); const isLoggedIn = props.sessionWrapper.isLoggedIn(); return ( <> - {domain.website === Website.StorytellerAi && !isLoggedIn && } + {domain.website === Website.StorytellerAi && !isLoggedIn && ( + + )} {domain.website === Website.FakeYou ? ( <> @@ -76,15 +78,23 @@ function LandingPage(props: Props) { <> {/* STORYTELLER,AI */} {!isLoggedIn ? ( - + <> + + + + + + ) : ( )} diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel/LandingVideoReel.scss b/packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel/LandingVideoReel.scss new file mode 100644 index 000000000..efe02c181 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel/LandingVideoReel.scss @@ -0,0 +1,34 @@ +@import "scss/colours.scss"; + +.storyteller-landing-reel { + display: flex; + height: 74vh; + justify-content: center; + position: relative; + + video { + position: absolute; + width: 100%; + height: 100%; + object-fit: cover; + } + + .reel-overlay { + z-index: 0; + position: absolute; + width: 100%; + height: 100%; + background-color: rgba(20, 20, 27, 0.6); + + &:after { + content: ""; + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 20%; + background: linear-gradient(transparent, $bg); + z-index: 1; + } + } +} diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel/LandingVideoReel.tsx similarity index 63% rename from packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel.tsx rename to packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel/LandingVideoReel.tsx index a9da927bf..e30351546 100644 --- a/packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel/LandingVideoReel.tsx @@ -1,5 +1,7 @@ +import { faArrowRight } from "@fortawesome/pro-solid-svg-icons"; import { Button } from "components/common"; import React, { useEffect } from "react"; +import "./LandingVideoReel.scss"; interface LandingVideoReelProps {} @@ -42,27 +44,30 @@ export default function LandingVideoReel(props: LandingVideoReelProps) { }, [isOnLandingPage]); return ( -
-
); diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel/index.ts b/packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel/index.ts new file mode 100644 index 000000000..d29a8fcd8 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/landing/components/LandingVideoReel/index.ts @@ -0,0 +1 @@ +export { default } from "./LandingVideoReel"; diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/components/TtsDemoSection/TtsDemoSection.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/components/TtsDemoSection/TtsDemoSection.tsx new file mode 100644 index 000000000..c0e663ae6 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/landing/components/TtsDemoSection/TtsDemoSection.tsx @@ -0,0 +1,60 @@ +import { faArrowRight } from "@fortawesome/pro-solid-svg-icons"; +import { Button, Panel } from "components/common"; +import React from "react"; +import LandingDemo from "../../fakeyou/LandingDemo/FakeYouLandingDemo"; +import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; +import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper"; +import { + FrontendInferenceJobType, + InferenceJob, +} from "@storyteller/components/src/jobs/InferenceJob"; +import { TtsInferenceJob } from "@storyteller/components/src/jobs/TtsInferenceJobs"; + +interface TtsDemoSectionProps { + sessionWrapper: SessionWrapper; + sessionSubscriptionsWrapper: SessionSubscriptionsWrapper; + inferenceJobs: Array; + ttsInferenceJobs: Array; + enqueueInferenceJob: ( + jobToken: string, + frontendInferenceJobType: FrontendInferenceJobType + ) => void; + inferenceJobsByCategory: Map>; + enqueueTtsJob: (jobToken: string) => void; +} + +export default function TtsDemoSection(props: TtsDemoSectionProps) { + return ( + +
+
+

Generate Text to Speech

+

+ Create audio of any character saying anything you want. +

+
+
+
+
+ +
+
+
+ ); +} diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/FakeYouLandingBody.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/FakeYouLandingBody.tsx index ea5ddf0a1..5f77627d6 100644 --- a/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/FakeYouLandingBody.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/FakeYouLandingBody.tsx @@ -79,7 +79,7 @@ export default function FakeYouLandingBody(props: FakeYouLandingBodyProps) { background dots diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/FakeYouLandingDemo.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/FakeYouLandingDemo.tsx index 3d8091a42..23a52d143 100644 --- a/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/FakeYouLandingDemo.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/FakeYouLandingDemo.tsx @@ -35,6 +35,8 @@ interface TtsInferencePanelProps { ) => void; inferenceJobsByCategory: Map>; enqueueTtsJob: (jobToken: string) => void; + showHanashi?: boolean; + autoFocusTextBox?: boolean; } export default function LandingDemo({ @@ -44,6 +46,8 @@ export default function LandingDemo({ enqueueInferenceJob, enqueueTtsJob, inferenceJobsByCategory, + showHanashi = true, + autoFocusTextBox = true, }: TtsInferencePanelProps) { const [textBuffer, setTextBuffer] = useState(""); const [maybeTtsError, setMaybeTtsError] = useState< @@ -221,18 +225,21 @@ export default function LandingDemo({ return (
- Hanashi Demo setIsHanashiHovered(true)} - onMouseLeave={() => setIsHanashiHovered(false)} - className="hanashi-demo-image" - draggable="false" - /> + {showHanashi && ( + Hanashi Demo setIsHanashiHovered(true)} + onMouseLeave={() => setIsHanashiHovered(false)} + className="hanashi-demo-image" + draggable="false" + /> + )} +
@@ -265,7 +272,7 @@ export default function LandingDemo({ onChange={handleChangeText} rows={4} resize={false} - autoFocus={isMobile ? false : true} + autoFocus={isMobile ? false : autoFocusTextBox ? true : false} />
diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/OnboardingSelection/OnboardingSelection.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/OnboardingSelection/OnboardingSelection.tsx new file mode 100644 index 000000000..7620cc1de --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/OnboardingSelection/OnboardingSelection.tsx @@ -0,0 +1,67 @@ +import { Panel } from "components/common"; +import Card from "components/common/Card"; +import React from "react"; +import { useHistory } from "react-router-dom"; + +interface OnboardingSelectionProps {} + +export default function OnboardingSelection(props: OnboardingSelectionProps) { + const history = useHistory(); + + const cards = [ + { + text: "Scene 1", + backgroundImage: "", + onClick: () => { + history.push("/studio-intro/"); + }, + }, + { + text: "Scene 2", + backgroundImage: "", + onClick: () => { + history.push("/studio-intro/"); + }, + }, + { + text: "Scene 3", + backgroundImage: "", + onClick: () => { + history.push("/studio-intro/"); + }, + }, + { + text: "Scene 4", + backgroundImage: "", + onClick: () => { + history.push("/studio-intro/"); + }, + }, + ]; + + return ( + +
+

Explore scene examples

+

+ Try generating a movie by clicking a scene below +

+
+ {cards.map((card, index) => ( +
+ +
+ ))} +
+
+
+ ); +} diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/OnboardingSelection/index.ts b/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/OnboardingSelection/index.ts new file mode 100644 index 000000000..bcd45e84f --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/OnboardingSelection/index.ts @@ -0,0 +1 @@ +export { default } from "./OnboardingSelection"; diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/StorytellerLanding.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/StorytellerLanding.tsx index f388851c2..dc5761498 100644 --- a/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/StorytellerLanding.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/landing/storyteller/StorytellerLanding.tsx @@ -31,220 +31,5 @@ export default function StorytellerLanding({ }: StorytellerLandingProps) { // const { t } = useLocalize("LandingPage"); - return ( - <> - {/* - - - {/* - -
-
-
-
- -
- background dots -
-
-
-

- Enabling Anyone to Create Quality Movies with AI -

-

- We are combining generative AI and User Generated Content to - radically democratize both audio and video production. -

-
-
-
-
-
-
*/} - - {/*
- - -
-
-

AI Audio Generation

-

{t("ctaText")}

-
- hanashi before - red chevrons - hanashi after -
- hanashi before - grey chevrons - red chevrons - hanashi after -
-
-
-
- -
-

- - Text to Speech -

- - Try more voices{" "} - - -
- -
- -
-
-
-
-
-
- -
-

- - Voice to Voice -

- - Try more voices{" "} - - -
-
-