From b697c537c04372483a152a20d514d3f3658d5f6c Mon Sep 17 00:00:00 2001
From: kasisnu <5044120+kasisnu@users.noreply.github.com>
Date: Fri, 17 Nov 2023 10:59:36 +0530
Subject: [PATCH] nav buttons

---
 .../src/components/layout/SideNav/SideNav.tsx |  7 ++--
 .../fakeyou.com/src/v2/view/nav/FooterNav.tsx |  5 +++
 .../fakeyou.com/src/v2/view/nav/TopNav.tsx    | 10 ++++++
 .../src/v2/view/pages/landing/LandingPage.tsx | 34 +++++++++++++++++++
 4 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
index aec522ed57..bb9f7134fd 100644
--- a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
+++ b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
@@ -9,6 +9,7 @@ import {
   faSignOutAlt,
   faFaceViewfinder,
   faCloudUpload,
+  faWandMagicSparkles,
 } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Button from "components/common/Button/Button";
@@ -39,7 +40,7 @@ export default function SideNav(props: SideNavProps) {
   let history = useHistory();
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
   const fakeYouFrontendEnv =  FakeYouFrontendEnvironment.getInstance();
-
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const isDevelopmentEnv = fakeYouFrontendEnv.isDevelopment()
   const handleNavLinkClick = () => {
     const wrapper = document.getElementById("wrapper");
@@ -270,7 +271,6 @@ export default function SideNav(props: SideNavProps) {
             {t("speechVc")}
           </NavLink>
         </li>
-        {isDevelopmentEnv && (
         <li>
           <NavLink
             to="/voice-designer"
@@ -278,13 +278,12 @@ export default function SideNav(props: SideNavProps) {
             onClick={handleNavLinkClick}
           >
             <FontAwesomeIcon
-              icon={faWaveformLines}
+              icon={faWandMagicSparkles}
               className="sidebar-heading-icon"
             />
             {"Voice Designer"}
           </NavLink>
         </li>
-        )}
         <hr className="mb-4 mt-3" />
         <li className="sidebar-heading">{t("videoTitle")}</li>
         <li>
diff --git a/packages/fakeyou.com/src/v2/view/nav/FooterNav.tsx b/packages/fakeyou.com/src/v2/view/nav/FooterNav.tsx
index ac4309b6b4..8ae4922ebc 100644
--- a/packages/fakeyou.com/src/v2/view/nav/FooterNav.tsx
+++ b/packages/fakeyou.com/src/v2/view/nav/FooterNav.tsx
@@ -10,6 +10,7 @@ import {
   faDiscord,
   faTwitter,
   faTiktok,
+
 } from "@fortawesome/free-brands-svg-icons";
 import { ThirdPartyLinks } from "@storyteller/components/src/constants/ThirdPartyLinks";
 import {
@@ -213,6 +214,10 @@ function FooterNav(props: Props) {
                 <Link to="/voice-conversion">{t("productVc")}</Link>
               </li>
 
+              <li>
+                <Link to="/voice-designer">Voice Designer</Link>
+              </li>
+
               <li>
                 <Link to="/face-animator">{t("productFaceAnimator")}</Link>
               </li>
diff --git a/packages/fakeyou.com/src/v2/view/nav/TopNav.tsx b/packages/fakeyou.com/src/v2/view/nav/TopNav.tsx
index f69bb2c789..6312fd0fc9 100644
--- a/packages/fakeyou.com/src/v2/view/nav/TopNav.tsx
+++ b/packages/fakeyou.com/src/v2/view/nav/TopNav.tsx
@@ -12,6 +12,7 @@ import {
   faSignOutAlt,
   faBook,
   faStar,
+  faWandMagicSparkles
 } from "@fortawesome/free-solid-svg-icons";
 import { faDiscord } from "@fortawesome/free-brands-svg-icons";
 import { Logout } from "@storyteller/components/src/api/session/Logout";
@@ -244,6 +245,15 @@ function TopNav(props: Props) {
                         {t("productVc")}
                       </Link>
                     </li>
+                    <li data-bs-toggle="offcanvas">
+                      <Link className="dropdown-item" to="/voice-designer">
+                        <FontAwesomeIcon
+                          icon={faWandMagicSparkles}
+                          className="me-2"
+                        />
+                        Voice Designer
+                      </Link>
+                    </li>
                     <li data-bs-toggle="offcanvas">
                       <Link className="dropdown-item" to="/face-animator">
                         <FontAwesomeIcon
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 c10d9516b2..e1be43d73a 100644
--- a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx
@@ -298,6 +298,40 @@ function LandingPage(props: Props) {
               />
             </Link>
           </div>
+          <div className="col-12 col-md-4">
+            <Link
+              to="/voice-designer"
+              className="panel panel-select d-flex flex-column align-items-center"
+            >
+              <div className="d-flex px-4 pt-4 align-items-start w-100">
+                <div className="flex-grow-1">
+                  <div className="mb-1">
+                    <span className="badge-new d-inline-flex align-items-center mb-2 me-2">
+                      <FontAwesomeIcon icon={faSparkles} className="me-1" />
+                      {t("productNewTag")}
+                    </span>
+
+                    <h4 className="fw-bold text-white d-inline-flex align-items-center mb-0">
+                      <span>Voice Designer</span>
+                    </h4>
+                  </div>
+
+                  <h6 className="fw-normal opacity-75 text-white">
+                    Make yourself sound like anyone
+                  </h6>
+                </div>
+                <Link to="/voice-designer" className="btn btn-square mt-1">
+                  <FontAwesomeIcon icon={faArrowRight} />
+                </Link>
+              </div>
+
+              <img
+                className="img-fluid"
+                src="/images/landing/hanashi-after.webp"
+                alt="Voice Designer"
+              />
+            </Link>
+          </div>
           <div className="col-12 col-md-4">
             <Link
               to="/face-animator"