From 563c5984e4f08242b33376c663317a19596752bb Mon Sep 17 00:00:00 2001 From: BFlat Date: Sun, 5 Feb 2023 20:26:36 +0700 Subject: [PATCH 1/8] waveform icon --- .../src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx index eabc69a8f0..24c9287c5e 100644 --- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx @@ -9,8 +9,8 @@ import { faStar, faUser, faArrowRight, - faVolumeHigh, -} from "@fortawesome/free-solid-svg-icons"; + faWaveformLines, +} from "@fortawesome/pro-solid-svg-icons"; import { item, image } from "../../../../../data/animation"; import { motion } from "framer-motion"; import { Analytics } from "../../../../../common/Analytics"; @@ -129,7 +129,7 @@ export function TtsPageHero(props: Props) {

- + {t("tts.TtsModelListPage.heroSection.title")}

From 645b5cb78e791015640c6b0923fd365d2e963600 Mon Sep 17 00:00:00 2001 From: BFlat Date: Sun, 5 Feb 2023 20:45:12 +0700 Subject: [PATCH 2/8] remove unwanted space at the bottom of page --- .../v2/view/_common/SessionTtsModelUploadResultsList.tsx | 6 ++++++ .../src/v2/view/_common/SessionW2lInferenceResultsList.tsx | 6 ++++++ .../view/_common/SessionW2lTemplateUploadResultsList.tsx | 6 ++++++ .../src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx | 7 ++----- 4 files changed, 20 insertions(+), 5 deletions(-) diff --git a/packages/fakeyou.com/src/v2/view/_common/SessionTtsModelUploadResultsList.tsx b/packages/fakeyou.com/src/v2/view/_common/SessionTtsModelUploadResultsList.tsx index c001c0c9d8..8d5aeb2079 100644 --- a/packages/fakeyou.com/src/v2/view/_common/SessionTtsModelUploadResultsList.tsx +++ b/packages/fakeyou.com/src/v2/view/_common/SessionTtsModelUploadResultsList.tsx @@ -76,6 +76,12 @@ function SessionTtsModelUploadResultList(props: Props) { ); } + let noResultsSection = <>; + + if (results.length === 0) { + return <>{noResultsSection}; + } + return (

diff --git a/packages/fakeyou.com/src/v2/view/_common/SessionW2lInferenceResultsList.tsx b/packages/fakeyou.com/src/v2/view/_common/SessionW2lInferenceResultsList.tsx index 23df9fe66d..5559909840 100644 --- a/packages/fakeyou.com/src/v2/view/_common/SessionW2lInferenceResultsList.tsx +++ b/packages/fakeyou.com/src/v2/view/_common/SessionW2lInferenceResultsList.tsx @@ -81,6 +81,12 @@ function SessionW2lInferenceResultList(props: Props) { ); } + let noResultsSection = <>; + + if (results.length === 0) { + return <>{noResultsSection}; + } + return (
diff --git a/packages/fakeyou.com/src/v2/view/_common/SessionW2lTemplateUploadResultsList.tsx b/packages/fakeyou.com/src/v2/view/_common/SessionW2lTemplateUploadResultsList.tsx index 133b9bdd7f..a0cfb97b8a 100644 --- a/packages/fakeyou.com/src/v2/view/_common/SessionW2lTemplateUploadResultsList.tsx +++ b/packages/fakeyou.com/src/v2/view/_common/SessionW2lTemplateUploadResultsList.tsx @@ -78,6 +78,12 @@ function SessionW2lTemplateUploadResultList(props: Props) { ); } + let noResultsSection = <>; + + if (results.length === 0) { + return <>{noResultsSection}; + } + return (
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx index 24c9287c5e..d3523e53dc 100644 --- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx @@ -138,15 +138,12 @@ export function TtsPageHero(props: Props) { characters.

- +
{upgradeButton} {signUpButton} {viewPricingButton} {myProfileButton} - +
From 3d8b694123d134054ba5f79e9bba6d86741fa50c Mon Sep 17 00:00:00 2001 From: BFlat Date: Sun, 5 Feb 2023 20:59:59 +0700 Subject: [PATCH 3/8] navbar icon and fix --- .../fakeyou.com/src/v2/view/nav/TopNav.tsx | 45 ++++++++++++------- .../pages/tts/tts_model_list/TtsPageHero.tsx | 2 +- 2 files changed, 30 insertions(+), 17 deletions(-) diff --git a/packages/fakeyou.com/src/v2/view/nav/TopNav.tsx b/packages/fakeyou.com/src/v2/view/nav/TopNav.tsx index a70ac63677..92e96a6f0b 100644 --- a/packages/fakeyou.com/src/v2/view/nav/TopNav.tsx +++ b/packages/fakeyou.com/src/v2/view/nav/TopNav.tsx @@ -6,7 +6,6 @@ import { WebUrl } from "../../../common/WebUrl"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faMicrophone, - faVolumeUp, faPlus, faUsers, faVideo, @@ -40,6 +39,7 @@ import "tippy.js/dist/tippy.css"; import "tippy.js/animations/shift-away.css"; import { ThirdPartyLinks } from "@storyteller/components/src/constants/ThirdPartyLinks"; import { Analytics } from "../../../common/Analytics"; +import { faWaveformLines } from "@fortawesome/pro-solid-svg-icons"; interface Props { sessionWrapper: SessionWrapper; @@ -203,8 +203,7 @@ function TopNav(props: Props) { await logoutHandler(); }} > - - {" "} + {" "} {t("nav.TopNav.buttons.logout")} @@ -216,19 +215,28 @@ function TopNav(props: Props) {
- { Analytics.topbarClickAbout() } }> + { + Analytics.topbarClickAbout(); + }} + > {t("nav.TopNav.topbar.aboutLink")} - { Analytics.topbarClickTerms() } }> + { + Analytics.topbarClickTerms(); + }} + > {t("nav.TopNav.topbar.termsLink")} {t("nav.TopNav.topbar.privacyLink")} - + {t("nav.TopNav.topbar.developersLink")}
@@ -265,8 +273,7 @@ function TopNav(props: Props) {

- {t("nav.TopNav.topbar.ttsQueued")}: - {" "} + {t("nav.TopNav.topbar.ttsQueued")}:{" "} {pendingTtsJobs.pending_job_count} @@ -327,7 +334,9 @@ function TopNav(props: Props) {

  • { Analytics.topbarClickPricing() } } + onClick={() => { + Analytics.topbarClickPricing(); + }} className="nav-link" > @@ -338,7 +347,9 @@ function TopNav(props: Props) {
  • { Analytics.topbarClickVoiceClone() } } + onClick={() => { + Analytics.topbarClickVoiceClone(); + }} className="nav-link" > @@ -365,7 +376,10 @@ function TopNav(props: Props) { >
  • - + {t("nav.TopNav.main.ttsOption")}
    • @@ -537,8 +551,7 @@ function TopNav(props: Props) { Online: 1,204

    */}
    - {t("nav.TopNav.topbar.ttsQueued")}: - {" "} + {t("nav.TopNav.topbar.ttsQueued")}:{" "} {pendingTtsJobs.pending_job_count} diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx index d3523e53dc..bcf4d3b03d 100644 --- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx @@ -11,7 +11,7 @@ import { faArrowRight, faWaveformLines, } from "@fortawesome/pro-solid-svg-icons"; -import { item, image } from "../../../../../data/animation"; +import { image } from "../../../../../data/animation"; import { motion } from "framer-motion"; import { Analytics } from "../../../../../common/Analytics"; import { WebUrl } from "../../../../../common/WebUrl"; From 70d93140e707de446f4ade9d4c04832079b4eaa2 Mon Sep 17 00:00:00 2001 From: BFlat Date: Sun, 5 Feb 2023 21:34:34 +0700 Subject: [PATCH 4/8] made page header reusable --- .../src/v2/view/_common/PageHeader.tsx | 47 ++++++++ .../pages/tts/tts_model_list/TtsPageHero.tsx | 100 +++++++++++------- 2 files changed, 111 insertions(+), 36 deletions(-) create mode 100644 packages/fakeyou.com/src/v2/view/_common/PageHeader.tsx diff --git a/packages/fakeyou.com/src/v2/view/_common/PageHeader.tsx b/packages/fakeyou.com/src/v2/view/_common/PageHeader.tsx new file mode 100644 index 0000000000..f05a0e7e5c --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/_common/PageHeader.tsx @@ -0,0 +1,47 @@ +import React from "react"; +import { motion } from "framer-motion"; +import { image } from "../../../data/animation"; + +interface Props { + headerImage: string; + titleIcon: JSX.Element; + title: JSX.Element; + subtext: JSX.Element; + showButtons: boolean; + actionButtons?: JSX.Element; +} + +function PageHeader(props: Props) { + return ( +
    +
    +
    +
    + +
    +
    +
    +

    + {props.titleIcon} + {props.title} +

    +

    {props.subtext}

    + {props.showButtons && ( +
    + {props.actionButtons} +
    + )} +
    +
    +
    +
    +
    + ); +} + +export { PageHeader }; diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx index bcf4d3b03d..74440f23d8 100644 --- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx @@ -11,10 +11,9 @@ import { faArrowRight, faWaveformLines, } from "@fortawesome/pro-solid-svg-icons"; -import { image } from "../../../../../data/animation"; -import { motion } from "framer-motion"; import { Analytics } from "../../../../../common/Analytics"; import { WebUrl } from "../../../../../common/WebUrl"; +import { PageHeader } from "../../../_common/PageHeader"; interface Props { sessionWrapper: SessionWrapper; @@ -114,40 +113,69 @@ export function TtsPageHero(props: Props) { } } + const titleIcon = ; + const title = <>{t("tts.TtsModelListPage.heroSection.title")}; + const subtext = ( + <> + + Use FakeYou's deepfake tech to say stuff with your favorite characters. + + + ); + const actionButtons = ( + <> + {upgradeButton} + {signUpButton} + {viewPricingButton} + {myProfileButton} + + ); + return ( -
    -
    -
    -
    - -
    -
    -
    -

    - - {t("tts.TtsModelListPage.heroSection.title")} -

    -

    - - Use FakeYou's deepfake tech to say stuff with your favorite - characters. - -

    -
    - {upgradeButton} - {signUpButton} - {viewPricingButton} - {myProfileButton} -
    -
    -
    -
    -
    -
    + <> + + + + //
    + //
    + //
    + //
    + // + //
    + //
    + //
    + //

    + // + // {t("tts.TtsModelListPage.heroSection.title")} + //

    + //

    + // + // Use FakeYou's deepfake tech to say stuff with your favorite + // characters. + // + //

    + //
    + // {upgradeButton} + // {signUpButton} + // {viewPricingButton} + // {myProfileButton} + //
    + //
    + //
    + //
    + //
    + //
    ); } From 328872e73ca495cdb39e19f28aa20f8c44689d94 Mon Sep 17 00:00:00 2001 From: BFlat Date: Sun, 5 Feb 2023 21:35:31 +0700 Subject: [PATCH 5/8] comments clean up --- .../pages/tts/tts_model_list/TtsPageHero.tsx | 35 ------------------- 1 file changed, 35 deletions(-) diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx index 74440f23d8..bd4b52cdb7 100644 --- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx @@ -142,40 +142,5 @@ export function TtsPageHero(props: Props) { actionButtons={actionButtons} /> - - //
    - //
    - //
    - //
    - // - //
    - //
    - //
    - //

    - // - // {t("tts.TtsModelListPage.heroSection.title")} - //

    - //

    - // - // Use FakeYou's deepfake tech to say stuff with your favorite - // characters. - // - //

    - //
    - // {upgradeButton} - // {signUpButton} - // {viewPricingButton} - // {myProfileButton} - //
    - //
    - //
    - //
    - //
    - //
    ); } From c941f10fdbab93d81da6a43de04598513f653163 Mon Sep 17 00:00:00 2001 From: BFlat Date: Sun, 5 Feb 2023 22:14:21 +0700 Subject: [PATCH 6/8] updates --- .../src/v2/view/_common/PageHeader.tsx | 40 +++++----------- .../v2/view/_common/PageHeaderWithImage.tsx | 48 +++++++++++++++++++ .../pages/contribute/ContributeIndexPage.tsx | 27 ++++++++++- .../pages/tts/tts_model_list/TtsPageHero.tsx | 8 ++-- 4 files changed, 90 insertions(+), 33 deletions(-) create mode 100644 packages/fakeyou.com/src/v2/view/_common/PageHeaderWithImage.tsx diff --git a/packages/fakeyou.com/src/v2/view/_common/PageHeader.tsx b/packages/fakeyou.com/src/v2/view/_common/PageHeader.tsx index f05a0e7e5c..dc1667dba8 100644 --- a/packages/fakeyou.com/src/v2/view/_common/PageHeader.tsx +++ b/packages/fakeyou.com/src/v2/view/_common/PageHeader.tsx @@ -1,12 +1,9 @@ import React from "react"; -import { motion } from "framer-motion"; -import { image } from "../../../data/animation"; interface Props { - headerImage: string; - titleIcon: JSX.Element; + titleIcon?: JSX.Element; title: JSX.Element; - subtext: JSX.Element; + subText: JSX.Element; showButtons: boolean; actionButtons?: JSX.Element; } @@ -15,29 +12,18 @@ function PageHeader(props: Props) { return (
    -
    -
    - -
    -
    -
    -

    - {props.titleIcon} - {props.title} -

    -

    {props.subtext}

    - {props.showButtons && ( -
    - {props.actionButtons} -
    - )} +
    +

    + {props.titleIcon} + {props.title} +

    +
    +

    {props.subText}

    + {props.showButtons && ( +
    + {props.actionButtons}
    -
    + )}
    diff --git a/packages/fakeyou.com/src/v2/view/_common/PageHeaderWithImage.tsx b/packages/fakeyou.com/src/v2/view/_common/PageHeaderWithImage.tsx new file mode 100644 index 0000000000..7754145b94 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/_common/PageHeaderWithImage.tsx @@ -0,0 +1,48 @@ +import React from "react"; +import { motion } from "framer-motion"; +import { image } from "../../../data/animation"; + +interface Props { + headerImage: string; + titleIcon?: JSX.Element; + title: JSX.Element; + subText: JSX.Element; + showButtons: boolean; + actionButtons?: JSX.Element; +} + +function PageHeaderWithImage(props: Props) { + return ( +
    +
    +
    +
    + +
    +
    +
    +

    + {props.titleIcon} + {props.title} +

    +
    +

    {props.subText}

    + {props.showButtons && ( +
    + {props.actionButtons} +
    + )} +
    +
    +
    +
    +
    + ); +} + +export { PageHeaderWithImage }; diff --git a/packages/fakeyou.com/src/v2/view/pages/contribute/ContributeIndexPage.tsx b/packages/fakeyou.com/src/v2/view/pages/contribute/ContributeIndexPage.tsx index 2f8efce513..da1eafb0ec 100644 --- a/packages/fakeyou.com/src/v2/view/pages/contribute/ContributeIndexPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/contribute/ContributeIndexPage.tsx @@ -18,6 +18,8 @@ import { import { motion } from "framer-motion"; import { container, item, panel } from "../../../../data/animation"; import { usePrefixedDocumentTitle } from "../../../../common/UsePrefixedDocumentTitle"; +import { PageHeader } from "../../_common/PageHeader"; +import { faHandHoldingHeart } from "@fortawesome/pro-solid-svg-icons"; interface Props { sessionWrapper: SessionWrapper; @@ -34,9 +36,24 @@ function ContributeIndexPage(props: Props) { usePrefixedDocumentTitle("Contribute to FakeYou"); + const title = <>{t("pages.contributeIndex.heroTitle")}; + const subText = ( + <> +
    + + You make FakeYou better by contributing + +
    + {t("pages.contributeIndex.introText")} + + ); + const titleIcon = ( + + ); + return ( -
    + {/*
    {t("pages.contributeIndex.heroTitle")} @@ -50,7 +67,13 @@ function ContributeIndexPage(props: Props) { {t("pages.contributeIndex.introText")}
    -
    +
    */} +
    diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx index bd4b52cdb7..d236f101ad 100644 --- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx @@ -13,7 +13,7 @@ import { } from "@fortawesome/pro-solid-svg-icons"; import { Analytics } from "../../../../../common/Analytics"; import { WebUrl } from "../../../../../common/WebUrl"; -import { PageHeader } from "../../../_common/PageHeader"; +import { PageHeaderWithImage } from "../../../_common/PageHeaderWithImage"; interface Props { sessionWrapper: SessionWrapper; @@ -115,7 +115,7 @@ export function TtsPageHero(props: Props) { const titleIcon = ; const title = <>{t("tts.TtsModelListPage.heroSection.title")}; - const subtext = ( + const subText = ( <> Use FakeYou's deepfake tech to say stuff with your favorite characters. @@ -133,11 +133,11 @@ export function TtsPageHero(props: Props) { return ( <> - From f6625600172eb7ef0e08f4bc8b2734081dfa7467 Mon Sep 17 00:00:00 2001 From: BFlat Date: Sun, 5 Feb 2023 22:36:34 +0700 Subject: [PATCH 7/8] update --- .../fakeyou.com/src/scss/site-refresh.scss | 4 +++ .../src/v2/view/_common/PageHeader.tsx | 26 ++++++++----------- .../src/v2/view/pages/landing/LandingPage.tsx | 5 +--- 3 files changed, 16 insertions(+), 19 deletions(-) diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss index 5ddb002bd3..f3874e6721 100644 --- a/packages/fakeyou.com/src/scss/site-refresh.scss +++ b/packages/fakeyou.com/src/scss/site-refresh.scss @@ -933,6 +933,10 @@ styles with important tags: margin-bottom: -4%; margin-top: -30%; } + + .border-thick { + border-width: 2px; + } } select { diff --git a/packages/fakeyou.com/src/v2/view/_common/PageHeader.tsx b/packages/fakeyou.com/src/v2/view/_common/PageHeader.tsx index dc1667dba8..fa97bc746a 100644 --- a/packages/fakeyou.com/src/v2/view/_common/PageHeader.tsx +++ b/packages/fakeyou.com/src/v2/view/_common/PageHeader.tsx @@ -10,22 +10,18 @@ interface Props { function PageHeader(props: Props) { return ( -
    -
    -
    -

    - {props.titleIcon} - {props.title} -

    -
    -

    {props.subText}

    - {props.showButtons && ( -
    - {props.actionButtons} -
    - )} +
    +

    + {props.titleIcon} + {props.title} +

    +
    +

    {props.subText}

    + {props.showButtons && ( +
    + {props.actionButtons}
    -
    + )}
    ); } 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 48934a82c3..8ee0e9bb7b 100644 --- a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx @@ -131,10 +131,7 @@ function LandingPage(props: Props) {
    - +
    Date: Sun, 5 Feb 2023 22:56:52 +0700 Subject: [PATCH 8/8] w2l page --- .../src/v2/view/_common/PageHeader.tsx | 26 +++++++++++-------- .../w2l_template_list/W2lTemplateListPage.tsx | 24 ++++++++++------- 2 files changed, 29 insertions(+), 21 deletions(-) diff --git a/packages/fakeyou.com/src/v2/view/_common/PageHeader.tsx b/packages/fakeyou.com/src/v2/view/_common/PageHeader.tsx index fa97bc746a..dc1667dba8 100644 --- a/packages/fakeyou.com/src/v2/view/_common/PageHeader.tsx +++ b/packages/fakeyou.com/src/v2/view/_common/PageHeader.tsx @@ -10,18 +10,22 @@ interface Props { function PageHeader(props: Props) { return ( -
    -

    - {props.titleIcon} - {props.title} -

    -
    -

    {props.subText}

    - {props.showButtons && ( -
    - {props.actionButtons} +
    +
    +
    +

    + {props.titleIcon} + {props.title} +

    +
    +

    {props.subText}

    + {props.showButtons && ( +
    + {props.actionButtons} +
    + )}
    - )} +
    ); } diff --git a/packages/fakeyou.com/src/v2/view/pages/w2l/w2l_template_list/W2lTemplateListPage.tsx b/packages/fakeyou.com/src/v2/view/pages/w2l/w2l_template_list/W2lTemplateListPage.tsx index a1c74a8d17..9949b1cd58 100644 --- a/packages/fakeyou.com/src/v2/view/pages/w2l/w2l_template_list/W2lTemplateListPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/w2l/w2l_template_list/W2lTemplateListPage.tsx @@ -14,9 +14,11 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faChevronLeft, faChevronRight, + faFilm, } from "@fortawesome/free-solid-svg-icons"; import { motion } from "framer-motion"; import { usePrefixedDocumentTitle } from "../../../../../common/UsePrefixedDocumentTitle"; +import { PageHeader } from "../../../_common/PageHeader"; const Fade = require("react-reveal/Fade"); @@ -176,7 +178,7 @@ function W2lTemplateListPage(props: Props) { if (props.sessionWrapper.isLoggedIn()) { extraDetails = ( -

    +

    Pick a template, then you can make it lip sync. If you want to use your own video or image, you can upload it as a template. You'll then be @@ -185,7 +187,7 @@ function W2lTemplateListPage(props: Props) { ); } else { extraDetails = ( -

    +

    Pick a template, then you can make it lip sync. If you want to use your own video or image, you'll need to{" "} create an account. You'll then be able to @@ -196,16 +198,18 @@ function W2lTemplateListPage(props: Props) { usePrefixedDocumentTitle("Create Deep Fake lip sync videos"); + const title = <>Video Lip Sync Templates; + const subText = <>{extraDetails}; + const titleIcon = ; + return ( -

    -
    - - Video Lip Sync Templates - - {extraDetails} -
    -
    +