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] 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>