diff --git a/packages/fakeyou.com/public/fakeyou/Storyteller-Logo-5.png b/packages/fakeyou.com/public/fakeyou/Storyteller-Logo-5.png new file mode 100644 index 0000000000..e10ccb06fe Binary files /dev/null and b/packages/fakeyou.com/public/fakeyou/Storyteller-Logo-5.png differ diff --git a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx index a018d9fe56..c529a6e8cc 100644 --- a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx +++ b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx @@ -33,6 +33,7 @@ export default function TopNav({ const [isFocused, setIsFocused] = useState(false); const wrapper = document.getElementById("wrapper"); const [menuButtonIcon, setMenuButtonIcon] = useState(faBars); + // const { t } = useLocalize("TopNav"); const handleMenuButtonClick = () => { if (window.innerWidth < 1200) { @@ -181,20 +182,22 @@ export default function TopNav({
- - {`${domain.title}: - {`${domain.title}: - +
+ + {`${domain.title}: + {`${domain.title}: + +
@@ -234,6 +237,8 @@ export default function TopNav({
+ {/*
test
*/} + {/* Mobile Searchbar */} {isMobileSearchBarVisible && (
diff --git a/packages/fakeyou.com/src/utils/domainConfig.ts b/packages/fakeyou.com/src/utils/domainConfig.ts index a7bce46fbb..39162a6452 100644 --- a/packages/fakeyou.com/src/utils/domainConfig.ts +++ b/packages/fakeyou.com/src/utils/domainConfig.ts @@ -2,7 +2,7 @@ type DomainConfig = Record; const domainConfigs: Record = { "storyteller.ai": { - logo: "/fakeyou/Storyteller-Logo-2.png", + logo: "/fakeyou/Storyteller-Logo-5.png", title: "Storyteller AI", link: "https://storyteller.ai", }, diff --git a/packages/fakeyou.com/src/v2/view/pages/about/about_page/AboutPage.tsx b/packages/fakeyou.com/src/v2/view/pages/about/about_page/AboutPage.tsx index 6380c662b8..92000634ea 100644 --- a/packages/fakeyou.com/src/v2/view/pages/about/about_page/AboutPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/about/about_page/AboutPage.tsx @@ -77,21 +77,6 @@ function AboutPage(props: Props) { role: "Growth", imageSrc: "/images/avatars/default-pfp.png", }, - { - name: "Evgenii", - role: "Gen AI Artist", - imageSrc: "/images/avatars/default-pfp.png", - }, - { - name: "Steven", - role: "Gen AI Artist", - imageSrc: "/images/avatars/default-pfp.png", - }, - { - name: "Willis", - role: "Gen AI Artist", - imageSrc: "/images/avatars/default-pfp.png", - }, { name: "Jose", role: "Data Team", diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/Dashboard.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/Dashboard.tsx new file mode 100644 index 0000000000..d9947fb8e0 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/landing/Dashboard.tsx @@ -0,0 +1,193 @@ +import { + faArrowRight, + faFileArrowUp, + faFlask, + faSparkles, +} from "@fortawesome/pro-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; +import { Panel } from "components/common"; +import { useLocalize } from "hooks"; +import React from "react"; +import { Link } from "react-router-dom"; + +interface FakeYouDashboardProps { + sessionWrapper: SessionWrapper; +} + +export default function FakeYouDashboard(props: FakeYouDashboardProps) { + const { t } = useLocalize("LandingPage"); + const isLoggedIn = props.sessionWrapper.isLoggedIn(); + + let uploadModelSection = <>; + + if (isLoggedIn) { + uploadModelSection = ( + <> +

Upload Models

+
+
+
+ + + Upload TTS Model + +
+
+ + + Upload V2V Model + +
+
+ + + Upload W2L Model + +
+
+
+ + ); + } + + return ( + +

{t("productsTitle")}

+
+
+ +
+
+

+ {t("productTtsTitle")} +

+
+ {t("productTtsText")} +
+
+ + + +
+ + Text to speech + +
+
+ +
+
+

+ {t("productVcTitle")} +

+
+ {t("productVcText")} +
+
+ + + +
+ + Voice Conversion + +
+
+ +
+
+
+ + + BETA + + +

+ Voice Designer +

+
+ +
+ Create your own AI voice +
+
+ + + +
+ + Voice Designer + +
+
+ +
+
+
+ + + {t("productNewTag")} + + +

+ {t("productFaceAnimatorTitle")} +

+
+ +
+ {t("productFaceAnimatorText")} +
+
+ + + +
+ + Face Animator + +
+ background dots + background dots +
+ + {uploadModelSection} + + ); +} 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 3992ecf7ed..7ae0f66d27 100644 --- a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx @@ -1,29 +1,13 @@ import React from "react"; import { usePrefixedDocumentTitle } from "../../../../common/UsePrefixedDocumentTitle"; -import { Link } from "react-router-dom"; import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper"; -import { useLocalize } from "hooks"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faArrowRight } from "@fortawesome/free-solid-svg-icons"; -import { faDiscord, faTwitter } from "@fortawesome/free-brands-svg-icons"; -import { - faCompass, - faFileArrowUp, - faFlask, - faSparkles, - faTrashAlt, -} from "@fortawesome/pro-solid-svg-icons"; +import {} from "@fortawesome/pro-solid-svg-icons"; import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient"; -// import Alert from "components/common/Alert/Alert"; -import { - Button, - Container, - Input, - Modal, - Panel, - Select, -} from "components/common"; +import { Container } from "components/common"; +import FakeYouLandingHeader from "./fakeyou/FakeYouLandingHeader"; +import FakeYouDashboard from "./Dashboard"; +// import StorytellerLanding from "./StorytellerLanding"; interface Props { sessionWrapper: SessionWrapper; @@ -33,523 +17,22 @@ interface Props { function LandingPage(props: Props) { usePrefixedDocumentTitle("FakeYou Celebrity Voice Generator"); PosthogClient.recordPageview(); - const { t } = useLocalize("LandingPage"); + const isLoggedIn = props.sessionWrapper.isLoggedIn(); - // const isSubscribed = props.sessionSubscriptionsWrapper.hasPaidFeatures(); - // const [isFocused, setIsFocused] = useState(false); - - // let signUpButton = <>; - // let viewPricingButton = <>; - // let upgradeButton = <>; - // let myProfileButton = <>; - let uploadModelSection = <>; - - // if (!isLoggedIn) { - // signUpButton = ( - // <> - // { - // // Analytics.ttsClickHeroSignup(); - // // }} - // > - // - // - // - // ); - // viewPricingButton = ( - // <> - // { - // // Analytics.ttsClickHeroViewPricing(); - // // }} - // > - // - // - // - // ); - // } - if (isLoggedIn) { - // let displayName = props.sessionWrapper.getDisplayName() as string; // NB: If logged in, should be string - // let url = WebUrl.userProfilePage(displayName); - // myProfileButton = ( - // <> - // { - // // Analytics.ttsClickHeroViewProfile(); - // // }} - // > - // - // - // - // ); - - uploadModelSection = ( - <> -

Upload Models

-
-
-
- - - Upload TTS Model - -
-
- - - Upload V2V Model - -
-
- - - Upload W2L Model - -
-
-
- - ); - - // if (!isSubscribed) { - // upgradeButton = ( - // <> - // { - // // Analytics.ttsClickHeroUpgradePlan(); - // // }} - // > - // - // - // - // ); - // } - } - - // const randomHeroImage = useMemo(() => { - // const images = [ - // // Main Images: - // "mascot/kitsune_pose2.webp", - // // "mascot/may4th.webp", - // // "mascot/halloween_1.webp", - // // "mascot/halloween_2.webp", - // // "mascot/halloween_3.webp", - // // "mascot/xmas_1.webp", - // // "mascot/xmas_2.webp", - // // "mascot/xmas_3.webp", - // // "mascot/xmas_4.webp", - // ]; - - // return images[Math.floor(Math.random() * images.length)]; - // }, []); - - // const onFocusHandler = () => { - // setIsFocused(true); - // }; - - // const onBlurHandler = () => { - // // Search field blur/Unfocusing hack: needs a little bit of delay for the result click event to register - // setTimeout(() => { - // setIsFocused(false); - // }, 100); - // }; return ( <> - {isLoggedIn ? ( - - {/* - + + {/* HEADER IF NOT LOGGED IN */} + {!isLoggedIn && ( + + )} -
-
- FakeYou Mascot -
-
-

- {t("heroTitle")} -

-

- {t("heroText")} -

-
- {upgradeButton} - {signUpButton} - {viewPricingButton} - {myProfileButton} -
-
-
- */} - - -

{t("productsTitle")}

-
-
- -
-
-

- {t("productTtsTitle")} -

-
- {t("productTtsText")} -
-
- - - -
- - Text to speech - -
-
- -
-
-

- {t("productVcTitle")} -

-
- {t("productVcText")} -
-
- - - -
- - Voice Conversion - -
-
- -
-
-
- - - BETA - - -

- Voice Designer -

-
- -
- Create your own AI voice -
-
- - - -
- - Voice Designer - -
-
- -
-
-
- - - {t("productNewTag")} - - -

- {t("productFaceAnimatorTitle")} -

-
- -
- {t("productFaceAnimatorText")} -
-
- - - -
- - Face Animator - -
- background dots - background dots -
- - {uploadModelSection} - - - ) : ( - <> - - -
-
-
-
- -
- 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

-
- -
-
-
- -
-
- -

Voice to Voice

-
- + +
+
+
+ +
+
+ +
+

+ + Voice to Voice +

+ + Try more voices{" "} + + +
+
+