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/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 (
-

setIsHanashiHovered(true)}
- onMouseLeave={() => setIsHanashiHovered(false)}
- className="hanashi-demo-image"
- draggable="false"
- />
+ {showHanashi && (
+

setIsHanashiHovered(true)}
+ onMouseLeave={() => setIsHanashiHovered(false)}
+ className="hanashi-demo-image"
+ draggable="false"
+ />
+ )}
+