ai tools rearrange, ai face mirror panel tweaks

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;
+  }
 }

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 (
-    <div
-      {...{
-        className: `cta-ai-face-mirror${className ? " " + className : ""}`,
-      }}
-    >
+    <Panel className="cta-ai-face-mirror">
       <Link
         {...{ className: "cta-ai-face-mirror-body", to: "/ai-face-mirror" }}
       >
@@ -42,6 +38,6 @@ export default function AIFaceMirrorCTA({ className }: Props) {
           />
         </div>
       </Link>
-    </div>
+    </Panel>
   );
 }

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 <AIToolsRow {...{ items }} />;
 }

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;
+    }
+  }
 }

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 (
-    <Container className="mt-3">
+    <Container type="panel" className="mt-3">
       <Panel {...{ className: "fy-ai-face-mirror-panel" }}>
         <header {...{ className: "fy-ai-face-mirror-header" }}>
           <video
@@ -91,7 +91,7 @@ export default function AIFaceMirror({ sessionSubscriptionsWrapper }: Props) {
           </video>
           <div {...{ className: "fy-ai-face-mirror-header-content" }}>
             <div {...{ className: "fy-ai-face-mirror-title" }}>
-              <h1>Live Portrait</h1>
+              <h1 className="fw-bold">Live Portrait</h1>
               <p>
                 Use AI to transfer facial expressions, audio, and vocals from
                 one face video to an image or a video