Preview/discount pages

src/components/App/index.tsx

@@ -95,6 +95,7 @@ import AdditionalDiscount from "../pages/AdditionalDiscount";
 import TrialPaymentWithDiscount from "../pages/TrialPaymentWithDiscount";
 import MarketingLanding from "../pages/EmailLetters/MarketingLanding";
 import MarketingTrialPayment from "../pages/EmailLetters/MarketingTrialPayment";
+import { ScrollToTop } from "@/hooks/scrollToTop";
 
 const isProduction = import.meta.env.MODE === "production";
 
@@ -525,6 +526,7 @@ function Layout({ setIsSpecialOfferOpen }: LayoutProps): JSX.Element {
 
   return (
     <div className="container">
+      <ScrollToTop />
       {showHeader ? (
         <Header
           openMenu={() => setIsMenuOpen(true)}

src/components/AttentionPage/styles.module.css

@@ -9,6 +9,7 @@
 
 .icon {
   width: 96px;
+  height: 96px;
 }
 
 .text {

src/components/FeedbackPage/styles.module.css

@@ -33,6 +33,7 @@
 
 .profile-picture {
   width: 96px;
+  height: 96px;
   border-radius: 100%;
   object-fit: cover;
   object-position: center;

src/components/PaymentPage/results/ErrorPage/index.tsx

@@ -12,7 +12,11 @@ function PaymentFailPage(): JSX.Element {
 
   return (
     <section className={`${styles.page} page`}>
-      <img src="/ExclamationIcon.png" alt="Exclamation Icon" />
+      <img
+        src="/ExclamationIcon.png"
+        alt="Exclamation Icon"
+        style={{ minHeight: "180px" }}
+      />
       <div className={styles.text}>
         <Title variant="h1">{t("auweb.pay_bad.title")}</Title>
         <p className={styles.list}>{t("auweb.pay_bad.text1")}</p>

src/components/PaymentPage/results/SuccessPage/index.tsx

@@ -18,7 +18,11 @@ function PaymentSuccessPage(): JSX.Element {
 
   return (
     <section className={`${styles.page} page`}>
-      <img src="/SuccessIcon.png" alt="Success Icon" />
+      <img
+        src="/SuccessIcon.png"
+        alt="Success Icon"
+        style={{ minHeight: "98px" }}
+      />
       <div className={styles.text}>
         <Title variant="h1">{t("auweb.pay_good.title")}</Title>
         <p>{t("auweb.pay_good.text1")}</p>

src/components/pages/AdditionalDiscount/index.tsx

@@ -16,7 +16,7 @@ function AdditionalDiscount() {
       <Title variant="h2" className={styles.title}>
         Save 65% off!
       </Title>
-      <img src="/friends.webp" alt="Friends" />
+      <img src="/friends.webp" alt="Friends" style={{ minHeight: "180px" }} />
       <div className={styles["discount-point"]}>
         <img src="/fire.png" alt="Fire" />
         <p className={styles["discount-point-description"]}>

src/components/pages/AdditionalDiscount/styles.module.css

@@ -36,6 +36,7 @@
 
 .discount-point > img {
   width: 48px;
+  height: 48px;
 }
 
 .discount-point-description {

src/components/pages/AllRight/index.tsx

@@ -22,7 +22,7 @@ function AllRightPage() {
 
   return (
     <section className={`${styles.page} page`}>
-      <img src="/sun.svg" alt="The sun" />
+      <img src="/sun.svg" alt="The sun" style={{ minHeight: "188px" }} />
       <div>
         <Title variant="h1" className={styles.title}>
           All right! <br /> You keep your emotions in check{" "}

src/components/pages/AllRight/styles.module.css

@@ -13,6 +13,7 @@
   background-size: cover;
   color: #fff;
   padding-top: 64px;
+  background-color: #171717;
 }
 
 .title {

src/components/pages/AlmostThere/index.tsx

@@ -17,7 +17,7 @@ function AlmostTherePage() {
 
   return (
     <section className={`${styles.page} page`}>
-      <img src="/magnifier.svg" alt="The magnifier" />
+      <img src="/magnifier.svg" alt="The magnifier" style={{ minHeight: "220px" }} />
       <div>
         <Title variant="h1" className={styles.title}>
           Almost there! <br /> Now let's tailor your plan by understanding the{" "}

src/components/pages/Both/index.tsx

@@ -22,7 +22,7 @@ function BothPage() {
 
   return (
     <section className={`${styles.page} page`}>
-      <img src="/both.svg" alt="The both" />
+      <img src="/both.svg" alt="The both" style={{ minHeight: "255px" }} />
       <div>
         <Title variant="h1" className={styles.title}>
           Wonderful! <br />

src/components/pages/EmailConfirm/styles.module.css

@@ -34,6 +34,7 @@
 .eye-image {
   width: 100%;
   max-width: 180px;
+  min-height: 180px;
 }
 
 .top-section {

src/components/pages/EmailLetters/MarketingLanding/index.tsx

@@ -37,22 +37,34 @@ function MarketingLanding() {
         </p>
         <img
           className={styles.image}
-          style={{ marginTop: 0 }}
+          style={{ marginTop: 0, minHeight: "282px" }}
           src="/aboutPlan.webp"
           alt="About plan"
         />
         <Title className={styles.title}>Highlights of your plan:</Title>
-        <img className={styles.image} src="/messanging.webp" alt="Messanging" />
+        <img
+          className={styles.image}
+          src="/messanging.webp"
+          alt="Messanging"
+          style={{ minHeight: "214px" }}
+        />
         <img
           className={styles.image}
           src="/horoscopePhone.webp"
           alt="Horoscope phone"
+          style={{ minHeight: "315px" }}
+        />
+        <img
+          className={styles.image}
+          src="/guide.webp"
+          alt="Guide"
+          style={{ minHeight: "323px" }}
         />
-        <img className={styles.image} src="/guide.webp" alt="Guide" />
         <img
           className={styles.image}
           src="/understanding.webp"
           alt="Understanding"
+          style={{ minHeight: "323px" }}
         />
         <ComparePrices />
         <PointsList
@@ -72,7 +84,12 @@ function MarketingLanding() {
         <LastWeek />
         <MoneyBack />
         <GuardPayments />
-        <img className={styles.payments} src="/payments.svg" alt="Payments" />
+        <img
+          className={styles.payments}
+          src="/payments.svg"
+          alt="Payments"
+          style={{ minHeight: "140px" }}
+        />
         <footer className={styles.footer}>
           <MainButton className={styles.button} onClick={handleNext}>
             Continue

src/components/pages/EmailLetters/MarketingTrialPayment/styles.module.css

@@ -1,7 +1,6 @@
 .page {
   background-color: #fff0f0;
   padding: 60px 45px;
-  min-width: 100vw;
   height: fit-content;
   min-height: 100dvh;
 }

src/components/pages/GoalSetup/index.tsx

@@ -17,7 +17,11 @@ function GoalSetupPage() {
 
   return (
     <section className={`${styles.page} page`}>
-      <img src="/starry-sky.svg" alt="The starry sky" />
+      <img
+        src="/starry-sky.svg"
+        alt="The starry sky"
+        style={{ minHeight: "197px" }}
+      />
       <div>
         <Title variant="h1" className={styles.title}>
           Great! You just set your first goal!

src/components/pages/HyperPersonalizedAstrologyPage/styles.module.css

@@ -6,14 +6,16 @@
   justify-content: start;
   align-items: center;
   flex-direction: column;
-  gap: 20px;
+  gap: 16px;
   background: url("/moon_phases.webp");
   background-position-y: bottom;
   background-position-x: center;
   background-size: cover;
   background-repeat: no-repeat;
   color: #fff;
-  padding-top: 64px;
+  padding-top: 48px;
+  padding-bottom: 96px;
+  background-color: #171717;
 }
 
 .title {
@@ -56,5 +58,5 @@
   min-height: fit-content;
   border-radius: 12px;
   font-weight: 400;
-  margin-top: 30px;
+  margin-top: 20px;
 }

src/components/pages/NoBirthtime/index.tsx

@@ -26,7 +26,11 @@ function NoBirthtimePage() {
 
   return (
     <section className={`${styles.page} page`}>
-      <img src="/starry-clock.svg" alt="The clock" />
+      <img
+        src="/starry-clock.svg"
+        alt="The clock"
+        style={{ minHeight: "230px" }}
+      />
       <div>
         <Title variant="h1" className={styles.title}>
           No problem! You can still find plenty of great insights without

src/components/pages/NotAlone/index.tsx

@@ -22,7 +22,11 @@ function NotAlonePage() {
 
   return (
     <section className={`${styles.page} page`}>
-      <img src="/umbrella.svg" alt="The starry key" />
+      <img
+        src="/umbrella.svg"
+        alt="The starry key"
+        style={{ minHeight: "227px" }}
+      />
       <div>
         <Title variant="h1" className={styles.title}>
           You’re not alone. <br /> A lot of{" "}

src/components/pages/PartnerRightPlace/index.tsx

@@ -22,7 +22,7 @@ function PartnerRightPlacePage() {
 
   return (
     <section className={`${styles.page} page`}>
-      <img src="/darts.svg" alt="The darts" />
+      <img src="/darts.svg" alt="The darts" style={{ minHeight: "251px" }} />
       <div>
         <Title variant="h1" className={styles.title}>
           You’ve come to the right place, <br />

src/components/pages/PartnerThing/index.tsx

@@ -22,7 +22,11 @@ function PartnerThingPage() {
 
   return (
     <section className={`${styles.page} page`}>
-      <img src="/compass.svg" alt="The compass" />
+      <img
+        src="/compass.svg"
+        alt="The compass"
+        style={{ minHeight: "227px" }}
+      />
       <div>
         <Title variant="h1" className={styles.title}>
           <span style={{ color: "#f2c94c" }}>{zodiacSign}</span>, here’s the

src/components/pages/PartnerTotallyNormal/index.tsx

@@ -22,7 +22,7 @@ function PartnerTotallyNormalPage() {
 
   return (
     <section className={`${styles.page} page`}>
-      <img src="/clouds.svg" alt="The clouds" />
+      <img src="/clouds.svg" alt="The clouds" style={{ minHeight: "175px" }} />
       <div>
         <Title variant="h1" className={styles.title}>
           It’s totally normal to feel nervous,{" "}

src/components/pages/QuestionnaireIntermediate/index.tsx

@@ -10,9 +10,9 @@ import { textVariables } from "@/data";
 function QuestionnaireIntermediatePage() {
   const navigate = useNavigate();
   const { problems } = useSelector(selectors.selectQuestionnaire);
-  const path = window.location.href.split("/").pop();
+  const path = window.location.href.split("/").filter(Boolean).pop();
   const backgroundImages =
-    textVariables[path as keyof typeof textVariables].backgroundImages;
+    textVariables[path as keyof typeof textVariables]?.backgroundImages;
   const backgroundImage =
     backgroundImages && backgroundImages[problems]
       ? backgroundImages[problems]
@@ -24,7 +24,9 @@ function QuestionnaireIntermediatePage() {
 
   const handleNext = () => {
     if (path === "works-traits") {
-      return navigate(`${routes.client.questionnaire()}/personalityTraits/relateToStatement`);
+      return navigate(
+        `${routes.client.questionnaire()}/personalityTraits/relateToStatement`
+      );
     }
     navigate(`${routes.client.questionnaire()}/partnerProfile/partnerGender`);
   };
@@ -36,7 +38,11 @@ function QuestionnaireIntermediatePage() {
         backgroundImage: `url(${backgroundImage})`,
       }}
     >
-      <img src="/starry_key.svg" alt="The starry key" />
+      <img
+        src="/starry_key.svg"
+        alt="The starry key"
+        style={{ minHeight: "138px" }}
+      />
       <div>
         {path && (
           <Title variant="h1" className={styles.title}>

src/components/pages/RelationshipAlmostThere/index.tsx

@@ -17,7 +17,11 @@ function RelationshipAlmostTherePage() {
 
   return (
     <section className={`${styles.page} page`}>
-      <img src="/magnifier.svg" alt="The magnifier" />
+      <img
+        src="/magnifier.svg"
+        alt="The magnifier"
+        style={{ minHeight: "220px" }}
+      />
       <div>
         <Title variant="h1" className={styles.title}>
           Almost there! Now let's begin tailoring your plan by understanding

src/components/pages/RelationshipZodiacInfo/index.tsx

@@ -56,12 +56,12 @@ function RelationshipZodiacInfoPage() {
     <section className={`${styles.page} page`}>
       <div className={styles["image-container"]}>
         <img
-          src={`/questionnaire/zodiacs/${gender}/${zodiacSign.toLowerCase()}.webp`}
+          src={`/questionnaire/zodiacs/${gender}/${zodiacSign?.toLowerCase()}.webp`}
           alt="The zodiac signs"
         />
         <img src="/plus.svg" alt="Plus" />
         <img
-          src={`/questionnaire/zodiacs/${partnerGender}/${partnerZodiacSign.toLowerCase()}.webp`}
+          src={`/questionnaire/zodiacs/${partnerGender}/${partnerZodiacSign?.toLowerCase()}.webp`}
           alt="The zodiac signs"
         />
       </div>

src/components/pages/TrialPaymentWithDiscount/PaymentDiscountTable/styles.module.css

@@ -53,6 +53,7 @@
   flex-direction: row;
   align-items: center;
   justify-content: center;
+  gap: 4px;
 }
 
 .discount {

src/components/pages/WithHead/index.tsx

@@ -22,7 +22,11 @@ function WithHeadPage() {
 
   return (
     <section className={`${styles.page} page`}>
-      <img src="/scalesHead.svg" alt="The scales" />
+      <img
+        src="/scalesHead.svg"
+        alt="The scales"
+        style={{ minHeight: "255px" }}
+      />
       <div>
         <Title variant="h1" className={styles.title}>
           Based on our data, 39% of{" "}

src/components/pages/WithHeart/index.tsx

@@ -22,7 +22,11 @@ function WithHeartPage() {
 
   return (
     <section className={`${styles.page} page`}>
-      <img src="/scalesHeart.svg" alt="The scales" />
+      <img
+        src="/scalesHeart.svg"
+        alt="The scales"
+        style={{ minHeight: "255px" }}
+      />
       <div>
         <Title variant="h1" className={styles.title}>
           Based on our data, 49% of{" "}

src/hooks/scrollToTop.tsx

@@ -0,0 +1,16 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+export const ScrollToTop = () => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: "smooth",
+    });
+  }, [pathname]);
+
+  return null;
+};

src/index.css

@@ -184,6 +184,7 @@ div[class^="divider"] {
 
 #root {
   height: 100%;
+  min-width: 100vw;
 }
 
 a,