From bf4e5d19409b658621ffff22af8375c59d038294 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Sun, 5 Feb 2023 18:10:13 +0700
Subject: [PATCH] fixes

---
 .../fakeyou.com/src/scss/site-refresh.scss    | 27 ++-------
 .../tts/tts_model_list/TtsModelListPage.tsx   |  3 +-
 .../pages/tts/tts_model_list/TtsPageHero.tsx  | 57 +++----------------
 3 files changed, 13 insertions(+), 74 deletions(-)

diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss
index a5f5b5d634..5ddb002bd3 100644
--- a/packages/fakeyou.com/src/scss/site-refresh.scss
+++ b/packages/fakeyou.com/src/scss/site-refresh.scss
@@ -915,37 +915,18 @@ styles with important tags:
     position: relative;
     min-height: 100%;
     overflow: hidden;
-
-    // &:after {
-    //   content: "";
-    //   position: absolute;
-    //   z-index: 1;
-    //   bottom: 0;
-    //   left: 0;
-    //   pointer-events: none;
-    //   background-image: linear-gradient(
-    //     to bottom,
-    //     rgba($panel, 0),
-    //     rgba($panel, 1) 90%
-    //   );
-    //   width: 100%;
-    //   height: 2em;
-    // }
   }
 
   .hero-img {
     pointer-events: none;
     position: absolute;
-    width: 80%;
+    width: 90%;
     margin: auto;
-    top: -26%;
-    right: 4%;
+    top: 30%;
+    right: 6%;
+    bottom: 0;
   }
 
-  // .hero-img-container-mobile {
-  //   // margin-top: 100px;
-  // }
-
   .hero-img-mobile {
     pointer-events: none;
     width: 65%;
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx
index aa854e8177..f2ea548077 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx
@@ -40,7 +40,6 @@ import {
   faDeleteLeft,
   faGlobe,
   faVolumeHigh,
-  faVolumeUp,
 } from "@fortawesome/free-solid-svg-icons";
 import { GenericNotice } from "./notices/GenericNotice";
 import { DiscordLink2 } from "@storyteller/components/src/elements/DiscordLink2";
@@ -478,7 +477,7 @@ function TtsModelListPage(props: Props) {
       />
 
       <motion.div className="container-panel pb-5 mb-4" variants={panel}>
-        <div className="panel p-3 py-4 p-lg-4">
+        <div className="panel p-3 py-4 p-md-4">
           <i className="fas fa-volume-high"></i>
 
           <div className="d-flex gap-4">
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx
index 5e86045ad6..eabc69a8f0 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx
@@ -118,7 +118,7 @@ export function TtsPageHero(props: Props) {
     <div className="container-panel hero-section pt-4 pt-lg-5 pb-5">
       <div className="panel">
         <div className="row gx-3 flex-md-row-reverse">
-          <div className="col-12 col-md-6 hero-img-container d-none d-md-block">
+          <div className="col-12 col-md-5 hero-img-container d-none d-md-block">
             <motion.img
               src={randomImage}
               className="hero-img"
@@ -126,14 +126,17 @@ export function TtsPageHero(props: Props) {
               variants={image}
             />
           </div>
-          <div className="col-12 col-md-6">
-            <div className="p-3 py-4 p-lg-4">
+          <div className="col-12 col-md-7">
+            <div className="p-3 py-4 p-md-4">
               <h1 className="fw-bold text-center text-md-start">
                 <FontAwesomeIcon icon={faVolumeHigh} className="me-3" />
-                Text to Speech
+                {t("tts.TtsModelListPage.heroSection.title")}
               </h1>
               <p className="text-center text-md-start">
-                {t("tts.TtsModelListPage.formTitle")}
+                <Trans i18nKey="tts.TtsModelListPage.heroSection.subtitle">
+                  Use FakeYou's deepfake tech to say stuff with your favorite
+                  characters.
+                </Trans>
               </p>
               <motion.div
                 className="d-flex flex-column flex-md-row gap-3 justify-content-center justify-content-md-start mt-4"
@@ -148,50 +151,6 @@ export function TtsPageHero(props: Props) {
           </div>
         </div>
       </div>
-
-      {/* <div className="row gx-3 flex-lg-row-reverse align-items-center">
-        <div className="col-lg-6">
-          <div className="d-flex justify-content-center">
-            <motion.img
-              src={randomImage}
-              className="img-fluid"
-              width="516"
-              height="508"
-              alt="FakeYou Mascot"
-              variants={image}
-            />
-          </div>
-        </div>
-        <div className="col-lg-6 px-md-2 px-lg-5 px-xl-2">
-          <div>
-            <motion.h1
-              className="display-3 fw-bold lh-1 mb-3 text-center text-lg-start"
-              variants={item}
-            >
-              {t("tts.TtsModelListPage.heroSection.title")}
-            </motion.h1>
-            <motion.p
-              className="lead mb-5 text-center text-lg-start pe-xl-2"
-              variants={item}
-            >
-              <Trans i18nKey="tts.TtsModelListPage.heroSection.subtitle">
-                Use FakeYou's deepfake tech to say stuff with your favorite
-                characters.
-              </Trans>
-            </motion.p>
-          </div>
-
-          <motion.div
-            className="d-flex flex-column flex-md-row gap-3 justify-content-center justify-content-lg-start mb-5 mb-lg-4"
-            variants={item}
-          >
-            {upgradeButton}
-            {signUpButton}
-            {viewPricingButton}
-            {myProfileButton}
-          </motion.div>
-        </div>
-      </div> */}
     </div>
   );
 }