From fd12a7910461452ebabe3e351fe1316c5df70b6d Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Fri, 22 Sep 2023 18:20:18 +0700
Subject: [PATCH 1/2] face animation on landing

---
 .../src/v2/view/pages/landing/LandingPage.tsx | 33 ++++++++++++++-----
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx
index e7f064ba12..097b4f866c 100644
--- a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx
@@ -2,7 +2,7 @@ import React, { useMemo } from "react";
 import { Link } from "react-router-dom";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
 import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper";
-import { useLocalize } from 'hooks';
+import { useLocalize } from "hooks";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faStar,
@@ -171,11 +171,10 @@ function LandingPage(props: Props) {
           </div>
           <div className="col-12 col-lg-7 d-flex flex-column justify-content-center flex-reverse px-md-5 px-lg-3">
             <h1 className="fw-bold display-5 text-center text-lg-start px-md-5 px-lg-0">
-              {t2('hero.top')}
+              {t2("hero.top")}
             </h1>
             <p className="lead opacity-75 pb-4 text-center text-lg-start px-md-5 px-lg-0 pe-lg-5">
-              {t2('hero.bottom')}
-             
+              {t2("hero.bottom")}
             </p>
             <div className="d-flex flex-column flex-md-row gap-3 mt-3 mb-4 w-100 justify-content-center justify-content-lg-start">
               {upgradeButton}
@@ -296,17 +295,17 @@ function LandingPage(props: Props) {
           </div>
           <div className="col-12 col-md-4">
             <Link
-              to="/video"
+              to="/face-animation"
               className="panel panel-select d-flex flex-column align-items-center"
             >
               <div className="d-flex px-4 pt-4 align-items-center w-100">
                 <div className="flex-grow-1">
-                  <h3 className="fw-bold text-white mb-1">Video Lip Sync</h3>
+                  <h3 className="fw-bold text-white mb-1">Face Animation</h3>
                   <h6 className="fw-normal opacity-75 text-white">
-                    Lip sync video to audio
+                    Create talking head videos
                   </h6>
                 </div>
-                <Link to="/video" className="btn btn-square">
+                <Link to="/face-animation" className="btn btn-square">
                   <FontAwesomeIcon icon={faArrowRight} />
                 </Link>
               </div>
@@ -318,6 +317,24 @@ function LandingPage(props: Props) {
               />
             </Link>
           </div>
+          <div className="col-12 col-md-4">
+            <Link
+              to="/video"
+              className="panel panel-select d-flex flex-column align-items-center h-auto pb-4"
+            >
+              <div className="d-flex px-4 pt-4 align-items-center w-100">
+                <div className="flex-grow-1">
+                  <h3 className="fw-bold text-white mb-1">Video Lip Sync</h3>
+                  <h6 className="fw-normal opacity-75 text-white mb-0">
+                    Lip sync video to audio
+                  </h6>
+                </div>
+                <Link to="/video" className="btn btn-square">
+                  <FontAwesomeIcon icon={faArrowRight} />
+                </Link>
+              </div>
+            </Link>
+          </div>
           <img
             src="/images/landing/bg-dots.webp"
             alt="background dots"

From 3a5dea52657e275ea367c534be7d7df1470fd7be Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Fri, 22 Sep 2023 20:38:52 +0700
Subject: [PATCH 2/2] added badge and updated sub title

---
 .../fakeyou.com/src/scss/site-refresh.scss    | 12 +++++++++
 .../src/v2/view/pages/landing/LandingPage.tsx | 26 ++++++++++++-------
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss
index 65f8940ed3..409986a865 100644
--- a/packages/fakeyou.com/src/scss/site-refresh.scss
+++ b/packages/fakeyou.com/src/scss/site-refresh.scss
@@ -689,6 +689,18 @@ styles with important tags:
     }
   }
 
+  .badge-new {
+    font-weight: 600;
+    font-size: 12px;
+    padding: 2px 6px;
+    border: none;
+    border-radius: 0.3rem;
+    opacity: 0.85;
+    max-height: 18px;
+    background-color: #fff3d0;
+    color: #833c00;
+  }
+
   .rounded-circle {
     border-radius: 50px;
   }
diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx
index 097b4f866c..f77e1a2940 100644
--- a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx
@@ -11,7 +11,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { faDiscord, faTwitter } from "@fortawesome/free-brands-svg-icons";
 import { WebUrl } from "../../../../common/WebUrl";
-import { faFileArrowUp } from "@fortawesome/pro-solid-svg-icons";
+import { faFileArrowUp, faSparkles } from "@fortawesome/pro-solid-svg-icons";
 import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 // import {
 //   faFileArrowUp,
@@ -250,14 +250,14 @@ function LandingPage(props: Props) {
               to="/tts"
               className="panel panel-select d-flex flex-column align-items-center"
             >
-              <div className="d-flex px-4 pt-4 align-items-center w-100">
+              <div className="d-flex px-4 pt-4 align-items-start w-100">
                 <div className="flex-grow-1">
                   <h3 className="fw-bold text-white mb-1">Text to Speech</h3>
                   <h6 className="fw-normal opacity-75 text-white">
                     Generate audio from text
                   </h6>
                 </div>
-                <Link to="/tts" className="btn btn-square">
+                <Link to="/tts" className="btn btn-square mt-1">
                   <FontAwesomeIcon icon={faArrowRight} />
                 </Link>
               </div>
@@ -274,14 +274,14 @@ function LandingPage(props: Props) {
               to="/voice-conversion"
               className="panel panel-select d-flex flex-column align-items-center"
             >
-              <div className="d-flex px-4 pt-4 align-items-center w-100">
+              <div className="d-flex px-4 pt-4 align-items-start w-100">
                 <div className="flex-grow-1">
                   <h3 className="fw-bold text-white mb-1">Voice to Voice</h3>
                   <h6 className="fw-normal opacity-75 text-white">
                     Speak as someone else
                   </h6>
                 </div>
-                <Link to="/voice-conversion" className="btn btn-square">
+                <Link to="/voice-conversion" className="btn btn-square mt-1">
                   <FontAwesomeIcon icon={faArrowRight} />
                 </Link>
               </div>
@@ -298,14 +298,20 @@ function LandingPage(props: Props) {
               to="/face-animation"
               className="panel panel-select d-flex flex-column align-items-center"
             >
-              <div className="d-flex px-4 pt-4 align-items-center w-100">
+              <div className="d-flex px-4 pt-4 align-items-start w-100">
                 <div className="flex-grow-1">
-                  <h3 className="fw-bold text-white mb-1">Face Animation</h3>
+                  <h4 className="fw-bold text-white mb-1 d-flex align-items-center text-nowrap">
+                    <span className="badge-new mt-0 me-2">
+                      <FontAwesomeIcon icon={faSparkles} className="me-1" />
+                      NEW
+                    </span>
+                    Face Animation
+                  </h4>
                   <h6 className="fw-normal opacity-75 text-white">
-                    Create talking head videos
+                    Create videos from audio
                   </h6>
                 </div>
-                <Link to="/face-animation" className="btn btn-square">
+                <Link to="/face-animation" className="btn btn-square mt-1">
                   <FontAwesomeIcon icon={faArrowRight} />
                 </Link>
               </div>
@@ -329,7 +335,7 @@ function LandingPage(props: Props) {
                     Lip sync video to audio
                   </h6>
                 </div>
-                <Link to="/video" className="btn btn-square">
+                <Link to="/video" className="btn btn-square mt-1">
                   <FontAwesomeIcon icon={faArrowRight} />
                 </Link>
               </div>