diff --git a/src/netlify_configs/fakeyou.com/_redirects b/src/netlify_configs/fakeyou.com/_redirects index e172ce9f72..5b4d6a1f7e 100644 --- a/src/netlify_configs/fakeyou.com/_redirects +++ b/src/netlify_configs/fakeyou.com/_redirects @@ -77,7 +77,7 @@ /terms* /website/index.html 200 /testing* /website/index.html 200 /text-to-image* /website/index.html 200 -/tools* /website/index.html 200 +/ai-tools* /website/index.html 200 /tts* /website/index.html 200 /tts_configs* /website/index.html 200 /twitch* /website/index.html 200 diff --git a/src/netlify_configs/storyteller.ai/_redirects b/src/netlify_configs/storyteller.ai/_redirects index fa32e8b0eb..eaf8519d02 100644 --- a/src/netlify_configs/storyteller.ai/_redirects +++ b/src/netlify_configs/storyteller.ai/_redirects @@ -77,7 +77,7 @@ /terms* /website/index.html 200 /testing* /website/index.html 200 /text-to-image* /website/index.html 200 -/tools* /website/index.html 200 +/ai-tools* /website/index.html 200 /tts* /website/index.html 200 /tts_configs* /website/index.html 200 /twitch* /website/index.html 200 diff --git a/src/website/_redirects b/src/website/_redirects index 688b070873..4dc5fe26ab 100644 --- a/src/website/_redirects +++ b/src/website/_redirects @@ -53,7 +53,7 @@ /terms* /index.html 200 /testing* /index.html 200 /text-to-image* /index.html 200 -/tools* /index.html 200 +/ai-tools* /index.html 200 /tts* /index.html 200 /tts_configs* /index.html 200 /twitch* /index.html 200 diff --git a/src/website/packages/fakeyou.com/public/images/ai-tools/lp_video_poster.jpg b/src/website/packages/fakeyou.com/public/images/ai-tools/lp_video_poster.jpg new file mode 100644 index 0000000000..a8b0edc715 Binary files /dev/null and b/src/website/packages/fakeyou.com/public/images/ai-tools/lp_video_poster.jpg differ diff --git a/src/website/packages/fakeyou.com/public/images/ai-tools/vst_video_poster.jpg b/src/website/packages/fakeyou.com/public/images/ai-tools/vst_video_poster.jpg new file mode 100644 index 0000000000..27dfa98f75 Binary files /dev/null and b/src/website/packages/fakeyou.com/public/images/ai-tools/vst_video_poster.jpg differ diff --git a/src/website/packages/fakeyou.com/public/videos/ai-tools/lp_video.mp4 b/src/website/packages/fakeyou.com/public/videos/ai-tools/lp_video.mp4 new file mode 100644 index 0000000000..7752392ed9 Binary files /dev/null and b/src/website/packages/fakeyou.com/public/videos/ai-tools/lp_video.mp4 differ diff --git a/src/website/packages/fakeyou.com/public/videos/ai-tools/vst_video.mp4 b/src/website/packages/fakeyou.com/public/videos/ai-tools/vst_video.mp4 new file mode 100644 index 0000000000..2f787efaea Binary files /dev/null and b/src/website/packages/fakeyou.com/public/videos/ai-tools/vst_video.mp4 differ diff --git a/src/website/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx b/src/website/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx index a31d355c76..c045e3d8f5 100644 --- a/src/website/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx +++ b/src/website/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx @@ -458,7 +458,7 @@ export default function TopNav({ )} @@ -605,7 +605,7 @@ export default function TopNav({
  • diff --git a/src/website/packages/fakeyou.com/src/components/marketing/AITools/AITools.tsx b/src/website/packages/fakeyou.com/src/components/marketing/AITools/AITools.tsx index bb07642c5d..d8869b41a4 100644 --- a/src/website/packages/fakeyou.com/src/components/marketing/AITools/AITools.tsx +++ b/src/website/packages/fakeyou.com/src/components/marketing/AITools/AITools.tsx @@ -40,7 +40,8 @@ export default function AITools() { to: "/style-video", title: t("productVideoStyleTransferTitle"), text: t("productVideoStyleTransferText"), - imgSrc: "/images/landing/select-vst.webp", + videoSrc: "/videos/ai-tools/vst_video.mp4", + videoPosterSrc: "/images/ai-tools/vst_video_poster.jpg", imgAlt: "Video Style Transfer", badgeContent: { type: "new", @@ -52,7 +53,8 @@ export default function AITools() { to: "/ai-face-mirror", title: t("productLivePortraitTitle"), text: t("productLivePortraitText"), - imgSrc: "/images/landing/select-fm.webp", + videoSrc: "/videos/ai-tools/lp_video.mp4", + videoPosterSrc: "/images/ai-tools/lp_video_poster.jpg", imgAlt: "Live Portrait", badgeContent: { type: "new", diff --git a/src/website/packages/fakeyou.com/src/components/marketing/AITools/AIToolsRow.tsx b/src/website/packages/fakeyou.com/src/components/marketing/AITools/AIToolsRow.tsx index 08e4212112..ec9a00cb37 100644 --- a/src/website/packages/fakeyou.com/src/components/marketing/AITools/AIToolsRow.tsx +++ b/src/website/packages/fakeyou.com/src/components/marketing/AITools/AIToolsRow.tsx @@ -1,8 +1,8 @@ -import React from "react"; +import React, { useEffect, useRef, useState } from "react"; import { Link } from "react-router-dom"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { IconDefinition } from "@fortawesome/fontawesome-svg-core"; -import { faArrowRight } from "@fortawesome/pro-solid-svg-icons"; +import { faLongArrowRight } from "@fortawesome/pro-solid-svg-icons"; interface BadgeContent { type: string; @@ -14,9 +14,11 @@ interface AIToolsItemProps { to: string; title: string; text?: string; - imgSrc: string; + imgSrc?: string; imgAlt: string; badgeContent?: BadgeContent; + videoSrc?: string; + videoPosterSrc?: string; } export function AIToolsItem({ @@ -26,14 +28,69 @@ export function AIToolsItem({ imgSrc, imgAlt, badgeContent, + videoSrc, + videoPosterSrc, }: AIToolsItemProps) { + const [isPlaying, setIsPlaying] = useState(false); + const [showPoster, setShowPoster] = useState(true); + const videoRef = useRef(null); + + const handleMouseEnter = () => { + if (videoRef.current && !isPlaying) { + setShowPoster(false); + videoRef.current.play(); + setIsPlaying(true); + } + }; + + const handleTouchStart = () => { + if (videoRef.current && !isPlaying) { + setShowPoster(false); + videoRef.current.play(); + setIsPlaying(true); + } + }; + + const handleVideoEnded = () => { + if (videoRef.current) { + videoRef.current.pause(); + setShowPoster(true); + setTimeout(() => { + if (videoRef.current) { + videoRef.current.currentTime = 0; + } + setIsPlaying(false); + }, 200); + } + }; + + const handleTimeUpdate = () => { + if (videoRef.current) { + const timeRemaining = + videoRef.current.duration - videoRef.current.currentTime; + if (timeRemaining <= 0.2) { + setShowPoster(true); + } + } + }; + + useEffect(() => { + const videoElement = videoRef.current; + if (videoElement) { + videoElement.addEventListener("timeupdate", handleTimeUpdate); + return () => { + videoElement.removeEventListener("timeupdate", handleTimeUpdate); + }; + } + }, []); + return (
    -
    +
    {badgeContent && (
    @@ -57,10 +114,63 @@ export function AIToolsItem({ )}
    - +
    - {imgAlt} + {imgSrc && {imgAlt}} + {videoSrc && ( +
    +
    + {videoPosterSrc && ( +
    + {imgAlt} +
    + )} + + +
    +
    + )}
    ); diff --git a/src/website/packages/fakeyou.com/src/scss/site-refresh.scss b/src/website/packages/fakeyou.com/src/scss/site-refresh.scss index d8ac29b23d..afa313b67d 100644 --- a/src/website/packages/fakeyou.com/src/scss/site-refresh.scss +++ b/src/website/packages/fakeyou.com/src/scss/site-refresh.scss @@ -1567,7 +1567,7 @@ styles with important tags: transition: 0.2s all; border-radius: 0.5rem !important; border-width: 2px !important; - height: 320px; + height: 330px; overflow: hidden; z-index: 2; @@ -1590,6 +1590,18 @@ styles with important tags: transition: 0.2s all; background-color: lighten($primary, 5%); } + + .btn-icon { + transition: 0.2s all; + } + + &:hover .btn .btn-icon { + transform: translateX(3px); + } + + @media (max-width: 768px) { + height: 280px; + } } .fs-14 { diff --git a/src/website/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/src/website/packages/fakeyou.com/src/v2/view/PageContainer.tsx index fcd5a3a80d..62ac2f53b6 100644 --- a/src/website/packages/fakeyou.com/src/v2/view/PageContainer.tsx +++ b/src/website/packages/fakeyou.com/src/v2/view/PageContainer.tsx @@ -990,7 +990,7 @@ class PageContainer extends React.Component< - + diff --git a/src/website/packages/fakeyou.com/src/v2/view/nav/FooterNav.tsx b/src/website/packages/fakeyou.com/src/v2/view/nav/FooterNav.tsx index e6f44a7dfc..5bf515ffc8 100644 --- a/src/website/packages/fakeyou.com/src/v2/view/nav/FooterNav.tsx +++ b/src/website/packages/fakeyou.com/src/v2/view/nav/FooterNav.tsx @@ -94,7 +94,7 @@ function FooterNav(props: Props) { }, { link: "/explore", text: "Explore Videos", icon: null }, ...(domain.titlePart === "FakeYou" - ? [{ link: "/tools", text: "AI Tools", icon: null }] + ? [{ link: "/ai-tools", text: "AI Tools", icon: null }] : []), // { link: "/upload-assets", text: "Upload Assets", icon: null }, ], diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/creator_tools/CreatorToolsPage.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/creator_tools/CreatorToolsPage.tsx index 8806fea5bc..3c7501b6a8 100644 --- a/src/website/packages/fakeyou.com/src/v2/view/pages/creator_tools/CreatorToolsPage.tsx +++ b/src/website/packages/fakeyou.com/src/v2/view/pages/creator_tools/CreatorToolsPage.tsx @@ -4,7 +4,6 @@ import { faScrewdriverWrench, faSparkles, } from "@fortawesome/pro-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; import { GetWebsite, @@ -17,6 +16,7 @@ import { useLocalize } from "hooks"; import React from "react"; import { AIToolsRow } from "components/marketing"; import "./CreatorTools.scss"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; interface CreatorToolsPageProps { sessionWrapper: SessionWrapper; @@ -28,13 +28,6 @@ export default function CreatorToolsPage(props: CreatorToolsPageProps) { usePrefixedDocumentTitle("Creator Tools"); const videoProducts = [ - { - to: "/face-animator", - title: t("productLipsyncTitle"), - text: t("productLipsyncText"), - imgSrc: "/images/landing/select-fa.webp", - imgAlt: "Lipsync", - }, // { // to: "/text-to-image", // title: t("productImageGenTitle"), @@ -51,7 +44,8 @@ export default function CreatorToolsPage(props: CreatorToolsPageProps) { to: "/style-video", title: t("productVideoStyleTransferTitle"), text: t("productVideoStyleTransferText"), - imgSrc: "/images/landing/select-vst.webp", + videoSrc: "/videos/ai-tools/vst_video.mp4", + videoPosterSrc: "/images/ai-tools/vst_video_poster.jpg", imgAlt: "Video Style Transfer", badgeContent: { type: "new", @@ -64,7 +58,8 @@ export default function CreatorToolsPage(props: CreatorToolsPageProps) { to: "/ai-face-mirror", title: t("productLivePortraitTitle"), text: t("productLivePortraitText"), - imgSrc: "/images/landing/select-fm.webp", + videoSrc: "/videos/ai-tools/lp_video.mp4", + videoPosterSrc: "/images/ai-tools/lp_video_poster.jpg", imgAlt: "Live Portrait", badgeContent: { type: "new", @@ -72,6 +67,14 @@ export default function CreatorToolsPage(props: CreatorToolsPageProps) { label: "NEW", }, }, + + { + to: "/face-animator", + title: t("productLipsyncTitle"), + text: t("productLipsyncText"), + imgSrc: "/images/landing/select-fa.webp", + imgAlt: "Lipsync", + }, ]; const voiceProducts = [ @@ -111,10 +114,15 @@ export default function CreatorToolsPage(props: CreatorToolsPageProps) { return ( -

    - - Creator Tools -

    +
    +

    + + Creator Tools +

    +
    + AI-powered tools for video and voice creation. +
    +