From 373cf566c19d646443f379b7ced2a0f5516d262e Mon Sep 17 00:00:00 2001 From: bflatastic Date: Wed, 7 Aug 2024 22:50:47 +0700 Subject: [PATCH] ai tools rearrange, ai face mirror panel tweaks --- .../AIFaceMirrorCTA/AIFaceMirrorCTA.scss | 8 +- .../AIFaceMirrorCTA/AIFaceMirrorCTA.tsx | 10 +- .../components/marketing/AITools/AITools.tsx | 35 +++- .../pages/ai_face_mirror/AIFaceMirror.scss | 179 +++++++++--------- .../pages/ai_face_mirror/AIFaceMirror.tsx | 4 +- 5 files changed, 129 insertions(+), 107 deletions(-) diff --git a/src/website/packages/fakeyou.com/src/components/marketing/AIFaceMirrorCTA/AIFaceMirrorCTA.scss b/src/website/packages/fakeyou.com/src/components/marketing/AIFaceMirrorCTA/AIFaceMirrorCTA.scss index 0b1984b1a5..8ff2c060d2 100644 --- a/src/website/packages/fakeyou.com/src/components/marketing/AIFaceMirrorCTA/AIFaceMirrorCTA.scss +++ b/src/website/packages/fakeyou.com/src/components/marketing/AIFaceMirrorCTA/AIFaceMirrorCTA.scss @@ -2,9 +2,7 @@ @import "scss/site-refresh.scss"; .cta-ai-face-mirror { - @media (max-width: 768px) { - padding: 1rem; - } + margin-top: 1rem; } .cta-ai-face-mirror-body { @@ -76,4 +74,8 @@ filter: drop-shadow(0px 7px 5px rgba(#191933, 0.15)); } } + + @media (max-width: 992px) { + height: 260px; + } } diff --git a/src/website/packages/fakeyou.com/src/components/marketing/AIFaceMirrorCTA/AIFaceMirrorCTA.tsx b/src/website/packages/fakeyou.com/src/components/marketing/AIFaceMirrorCTA/AIFaceMirrorCTA.tsx index e3e1a1a062..8311496f9f 100644 --- a/src/website/packages/fakeyou.com/src/components/marketing/AIFaceMirrorCTA/AIFaceMirrorCTA.tsx +++ b/src/website/packages/fakeyou.com/src/components/marketing/AIFaceMirrorCTA/AIFaceMirrorCTA.tsx @@ -1,6 +1,6 @@ import React from "react"; import { Link } from "react-router-dom"; -import { Button } from "components/common"; +import { Button, Panel } from "components/common"; import "./AIFaceMirrorCTA.scss"; interface Props { @@ -9,11 +9,7 @@ interface Props { export default function AIFaceMirrorCTA({ className }: Props) { return ( -
+ @@ -42,6 +38,6 @@ export default function AIFaceMirrorCTA({ className }: Props) { />
- + ); } 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 bc59d07eb2..bb07642c5d 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 @@ -2,10 +2,14 @@ import React from "react"; import { faFlask, faSparkles } from "@fortawesome/pro-solid-svg-icons"; import { useLocalize } from "hooks"; import AIToolsRow from "./AIToolsRow"; +import { useLocation } from "react-router-dom"; export default function AITools() { const { t } = useLocalize("LandingPage"); - const items = [ + const location = useLocation(); + const currentPath = location.pathname; + + let items = [ { to: "/tts", title: t("productTtsTitle"), @@ -32,13 +36,6 @@ export default function AITools() { label: "BETA", }, }, - { - to: "/face-animator", - title: t("productLipsyncTitle"), - text: t("productLipsyncText"), - imgSrc: "/images/landing/select-fa.webp", - imgAlt: "Lipsync", - }, { to: "/style-video", title: t("productVideoStyleTransferTitle"), @@ -63,7 +60,29 @@ export default function AITools() { label: "NEW", }, }, + { + to: "/face-animator", + title: t("productLipsyncTitle"), + text: t("productLipsyncText"), + imgSrc: "/images/landing/select-fa.webp", + imgAlt: "Lipsync", + }, ]; + if (currentPath === "/tts") { + items = items.filter(item => item.to !== "/tts"); + } + if (currentPath === "/voice-conversion") { + items = items.filter(item => item.to !== "/voice-conversion"); + } + + if (currentPath === "/tts") { + items = [items[0], items[2], items[3], items[4], items[1]]; + } + + if (currentPath === "/voice-conversion") { + items = [items[0], items[2], items[3], items[4], items[1]]; + } + return ; } diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/ai_face_mirror/AIFaceMirror.scss b/src/website/packages/fakeyou.com/src/v2/view/pages/ai_face_mirror/AIFaceMirror.scss index 2f7b944099..d746d44ce5 100644 --- a/src/website/packages/fakeyou.com/src/v2/view/pages/ai_face_mirror/AIFaceMirror.scss +++ b/src/website/packages/fakeyou.com/src/v2/view/pages/ai_face_mirror/AIFaceMirror.scss @@ -4,115 +4,120 @@ @import "scss/breakpoints.scss"; .fy-ai-face-mirror-panel { - // overflow: hidden; + // overflow: hidden; } .fy-ai-face-mirror-header { - display: flex; - justify-content: center; - overflow: hidden; - position: relative; - height: 250px; - margin-bottom: 1rem; - background: #f8f4f3; - border-radius: 0.5rem 0.5rem 0 0; + display: flex; + justify-content: center; + overflow: hidden; + position: relative; + height: 250px; + margin-bottom: 1rem; + background: #f8f4f3; + border-radius: 0.5rem 0.5rem 0 0; - video { - margin: auto; - position: relative; - height: 100%; - max-width: 75rem; - width: 100%; - object-fit: cover; - } + video { + margin: auto; + position: relative; + height: 100%; + max-width: 75rem; + width: 100%; + object-fit: cover; + } } .fy-ai-face-mirror-header-content { - // background: red; - position: absolute; - display: flex; - justify-content: space-between; - align-items: flex-end; - top: 0; - width: 100%; - height: 100%; - padding: 1rem; - background: linear-gradient( - 0deg, - rgba($panel, 0.95) 0%, - rgba(#191933, 0.75) 15%, - rgba(#191933, 0) 90% - ); + // background: red; + position: absolute; + display: flex; + justify-content: space-between; + align-items: flex-end; + top: 0; + width: 100%; + height: 100%; + padding: 1.4rem; + background: linear-gradient( + 0deg, + rgba($panel, 0.95) 0%, + rgba(#191933, 0.75) 15%, + rgba(#191933, 0) 90% + ); - button { - height: 3rem; - } + button { + height: 3rem; + } - h1 { - margin-bottom: 0; - font-size: 2.25rem; - } - p { - max-width: 33vw; - } + h1 { + margin-bottom: 0; + font-size: 2.25rem; + } + p { + max-width: 33vw; + } + + @include breakpoint($under992) { + padding: 16px; + } } .fy-ai-face-mirror-main-inputs { - display: inline-grid; - width: 100%; - gap: 1rem; - grid-template-columns: auto auto; - // margin-bottom: 1rem; - height: fit-content; - padding: 1rem; + display: inline-grid; + width: 100%; + gap: 2rem; + grid-template-columns: auto auto; + // margin-bottom: 1rem; + height: fit-content; + padding: 1.4rem; - .fy-ai-face-mirror-column { - // width: 33%; - display: inline-block; + .fy-ai-face-mirror-column { + // width: 33%; + display: inline-block; - .fy-entity-input { - width: 100%; - } - } + .fy-entity-input { + width: 100%; + } + } - @include breakpoint($under992) { - display: block; + @include breakpoint($under992) { + display: block; + padding: 16px; - .fy-ai-face-mirror-column { - width: 100%; - } - } + .fy-ai-face-mirror-column { + width: 100%; + } + } } .fy-ai-face-mirror-secondary-inputs { - display: flex; - // align-items: center; - // justify-content: space-between; - padding: 0 1rem 1rem; + display: flex; + // align-items: center; + // justify-content: space-between; + padding: 0 1rem 1rem; - legend { - color: #b6b6bb; - font-size: 0.75rem; - } + legend { + color: #b6b6bb; + font-size: 0.75rem; + } - .fy-premium-lock { - height: 150px; - } + .fy-premium-lock { + height: 150px; + } - .input-block:nth-child(2) { - margin-left: 1rem; - margin-right: auto; - } + .input-block:nth-child(2) { + margin-left: 1rem; + margin-right: auto; + } - button { - margin: auto 0 0; - width: 25%; - } + button { + margin: auto 0 0; + width: 25%; + } - .fy-ai-face-mirror-premium-label { - margin-bottom: 0.5rem; - a { - margin-left: 0.25em; - } - } + .fy-ai-face-mirror-premium-label { + margin-bottom: 0.5rem; + a { + margin-left: 0.25em; + } + } } diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/ai_face_mirror/AIFaceMirror.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/ai_face_mirror/AIFaceMirror.tsx index e8400b9239..7065772f25 100644 --- a/src/website/packages/fakeyou.com/src/v2/view/pages/ai_face_mirror/AIFaceMirror.tsx +++ b/src/website/packages/fakeyou.com/src/v2/view/pages/ai_face_mirror/AIFaceMirror.tsx @@ -81,7 +81,7 @@ export default function AIFaceMirror({ sessionSubscriptionsWrapper }: Props) { }; return ( - +