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 (
-
+