diff --git a/packages/fakeyou.com/src/components/common/Panel/Panel.tsx b/packages/fakeyou.com/src/components/common/Panel/Panel.tsx index 3e14b59a52..779f419aac 100644 --- a/packages/fakeyou.com/src/components/common/Panel/Panel.tsx +++ b/packages/fakeyou.com/src/components/common/Panel/Panel.tsx @@ -7,6 +7,7 @@ interface PanelProps { mt?: boolean; className?: string; clear?: boolean; + style?: React.CSSProperties; } export default function Panel({ @@ -16,6 +17,7 @@ export default function Panel({ mt, className, clear, + style, }: PanelProps) { return (
{children}
diff --git a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx index 339c0ec48c..ff934654bf 100644 --- a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx +++ b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx @@ -8,7 +8,6 @@ import { faWaveformLines, faXmark, faClipboardList, - faMessageImage, faPortalEnter, faHome, faCompass, @@ -18,6 +17,7 @@ import { faFilms, faUser, faSignOutAlt, + faScrewdriverWrench, } from "@fortawesome/pro-solid-svg-icons"; import { Button } from "components/common"; import SearchBar from "components/common/SearchBar"; @@ -164,34 +164,34 @@ export default function TopNav({ ); } - const aiToolsDropdown = [ - { id: 1, name: "Text to Speech", link: "/tts", icon: faMessageDots }, - { - id: 2, - name: "Voice to Voice", - link: "/voice-conversion", - icon: faWaveformLines, - }, - { - id: 3, - name: "Face Animator", - link: "/face-animator", - icon: faFaceViewfinder, - }, - { - id: 4, - name: "Voice Designer", - link: "/voice-designer", - icon: faWandMagicSparkles, - }, - { - id: 5, - name: "Text to Image", - link: "/text-to-image", - icon: faMessageImage, - }, - // { id: 4, name: "Text to Image", link: "/text-to-image" }, - ]; + // const aiToolsDropdown = [ + // { id: 1, name: "Text to Speech", link: "/tts", icon: faMessageDots }, + // { + // id: 2, + // name: "Voice to Voice", + // link: "/voice-conversion", + // icon: faWaveformLines, + // }, + // { + // id: 3, + // name: "Face Animator", + // link: "/face-animator", + // icon: faFaceViewfinder, + // }, + // { + // id: 4, + // name: "Voice Designer", + // link: "/voice-designer", + // icon: faWandMagicSparkles, + // }, + // { + // id: 5, + // name: "Text to Image", + // link: "/text-to-image", + // icon: faMessageImage, + // }, + // // { id: 4, name: "Text to Image", link: "/text-to-image" }, + // ]; useEffect(() => { const pageContentWrapper = document.getElementById("page-content-wrapper"); @@ -347,9 +347,9 @@ export default function TopNav({
+ + + + {/* // // {t("productUploadModels")} -

AI Tools

@@ -195,7 +194,6 @@ function FooterNav(props: Props) {
  • {t("productFaceAnimator")}
    • -

    {t("infoTitle")}

    diff --git a/packages/fakeyou.com/src/v2/view/pages/creator_tools/CreatorTools.scss b/packages/fakeyou.com/src/v2/view/pages/creator_tools/CreatorTools.scss new file mode 100644 index 0000000000..db316cf917 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/creator_tools/CreatorTools.scss @@ -0,0 +1,24 @@ +@import "scss/colours.scss"; + +.enter-storyteller-button { + font-size: 20px !important; + font-weight: 500; + color: #fff; + background-color: $primary; + border-radius: 1rem; + cursor: pointer; + transition: all 0.2s; + padding: 14px; + width: 300px; + border: 4px solid lighten($primary, 12%); + + &:hover { + background-color: lighten($primary, 5%); + color: #fff; + border: 4px solid lighten($primary, 12%); + } + &:active, + &:focus { + border: 4px solid lighten($primary, 12%); + } +} diff --git a/packages/fakeyou.com/src/v2/view/pages/creator_tools/CreatorToolsPage.tsx b/packages/fakeyou.com/src/v2/view/pages/creator_tools/CreatorToolsPage.tsx new file mode 100644 index 0000000000..84092ab43b --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/creator_tools/CreatorToolsPage.tsx @@ -0,0 +1,165 @@ +import { + faFlask, + faPortalEnter, + faScrewdriverWrench, + faSparkles, +} from "@fortawesome/pro-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; +import { Button, Container, Panel } from "components/common"; +import { useLocalize } from "hooks"; +import React from "react"; +import DashboardRow from "../landing/components/DashboardRow"; +import "./CreatorTools.scss"; + +interface CreatorToolsPageProps { + sessionWrapper: SessionWrapper; +} + +export default function CreatorToolsPage(props: CreatorToolsPageProps) { + const { t } = useLocalize("LandingPage"); + const isLoggedIn = props.sessionWrapper.isLoggedIn(); + + const videoProducts = [ + { + to: "/face-animator", + title: t("productFaceAnimatorTitle"), + text: t("productFaceAnimatorText"), + imgSrc: "/images/landing/select-fa.webp", + imgAlt: "Face Animator", + }, + // { + // to: "/text-to-image", + // title: t("productImageGenTitle"), + // text: t("productImageGenText"), + // imgSrc: "/images/landing/select-tti.webp", + // imgAlt: "AI Image Generation", + // badgeContent: { + // type: "new", + // icon: faSparkles, + // label: "NEW", + // }, + // }, + { + to: "/video-styletransfer", + title: t("productVideoStyleTransferTitle"), + text: t("productVideoStyleTransferText"), + imgSrc: "/images/landing/select-vst.webp", + imgAlt: "Video Style Transfer", + badgeContent: { + type: "new", + icon: faSparkles, + label: "NEW", + }, + }, + ]; + + const voiceProducts = [ + { + to: "/tts", + title: t("productTtsTitle"), + text: t("productTtsText"), + imgSrc: "/images/landing/select-tts.webp", + imgAlt: "Text to Speech", + }, + { + to: "/voice-conversion", + title: t("productVcTitle"), + text: t("productVcText"), + imgSrc: "/images/landing/select-v2v.webp", + imgAlt: "Voice Conversion", + }, + { + to: "/voice-designer", + title: t("productVdTitle"), + text: t("productVdText"), + imgSrc: "/images/landing/select-vd.webp", + imgAlt: "Voice Cloning", + badgeContent: { + type: "beta", + icon: faFlask, + label: "BETA", + }, + }, + ]; + + return ( + + +

    + + Creator Tools +

    + +
    +
    + +
    +
    +
    + Fox Video +
    +
    +
    +
    + Dinosaur Video +
    +
    +
    +
    + Girl Video +
    +
    +
    +
    + Portal Video +
    +
    +
    +
    +
    +

    Storyteller Studio

    +
    + Easily create your own movie in any style with our AI 3D + Engine. +
    +
    + +
    +     +
    +
    +

    Video

    + +
    +
    +

    Voice & Audio

    + +
    +
    +     +     + ); +} diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/components/DashboardRow.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/components/DashboardRow.tsx index 47048a82ff..29b7943684 100644 --- a/packages/fakeyou.com/src/v2/view/pages/landing/components/DashboardRow.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/landing/components/DashboardRow.tsx @@ -68,24 +68,34 @@ export function DashboardItem({ interface DashboardRowProps { items: DashboardItemProps[]; + bgDotsLeft?: boolean; + bgDotsRight?: boolean; } -export function DashboardRow({ items }: DashboardRowProps) { +export function DashboardRow({ + items, + bgDotsLeft, + bgDotsRight, +}: DashboardRowProps) { return (
    {items.map((item, index) => ( ))} - background dots - background dots + {bgDotsLeft && ( + background dots + )} + {bgDotsRight && ( + background dots + )}
    ); }