Preview/discount pages

2024-02-21 06:24:50 +00:00 · 2024-02-21 06:24:50 +00:00 · ca220dfdf7
commit ca220dfdf7
parent 2d4d76477a
29 changed files with 114 additions and 29 deletions
--- a/src/components/App/index.tsx
+++ b/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)}
--- a/src/components/AttentionPage/styles.module.css
+++ b/src/components/AttentionPage/styles.module.css
@ -9,6 +9,7 @@

 .icon {
  width: 96px;
+  height: 96px;
 }

 .text {
--- a/src/components/FeedbackPage/styles.module.css
+++ b/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;
--- a/src/components/PaymentPage/results/ErrorPage/index.tsx
+++ b/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>
--- a/src/components/PaymentPage/results/SuccessPage/index.tsx
+++ b/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>
--- a/src/components/pages/AdditionalDiscount/index.tsx
+++ b/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"]}>
--- a/src/components/pages/AdditionalDiscount/styles.module.css
+++ b/src/components/pages/AdditionalDiscount/styles.module.css
@ -36,6 +36,7 @@

 .discount-point > img {
  width: 48px;
+  height: 48px;
 }

 .discount-point-description {
--- a/src/components/pages/AllRight/index.tsx
+++ b/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{" "}
--- a/src/components/pages/AllRight/styles.module.css
+++ b/src/components/pages/AllRight/styles.module.css
@ -13,6 +13,7 @@
  background-size: cover;
  color: #fff;
  padding-top: 64px;
+  background-color: #171717;
 }

 .title {
--- a/src/components/pages/AlmostThere/index.tsx
+++ b/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{" "}
--- a/src/components/pages/Both/index.tsx
+++ b/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 />
--- a/src/components/pages/EmailConfirm/styles.module.css
+++ b/src/components/pages/EmailConfirm/styles.module.css
@ -34,6 +34,7 @@
 .eye-image {
  width: 100%;
  max-width: 180px;
+  min-height: 180px;
 }

 .top-section {
--- a/src/components/pages/EmailLetters/MarketingLanding/index.tsx
+++ b/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
--- a/src/components/pages/EmailLetters/MarketingTrialPayment/styles.module.css
+++ b/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;
 }
--- a/src/components/pages/GoalSetup/index.tsx
+++ b/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!
--- a/src/components/pages/HyperPersonalizedAstrologyPage/styles.module.css
+++ b/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;
 }
--- a/src/components/pages/NoBirthtime/index.tsx
+++ b/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
--- a/src/components/pages/NotAlone/index.tsx
+++ b/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{" "}
--- a/src/components/pages/PartnerRightPlace/index.tsx
+++ b/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 />
--- a/src/components/pages/PartnerThing/index.tsx
+++ b/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
--- a/src/components/pages/PartnerTotallyNormal/index.tsx
+++ b/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,{" "}
--- a/src/components/pages/QuestionnaireIntermediate/index.tsx
+++ b/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}>
--- a/src/components/pages/RelationshipAlmostThere/index.tsx
+++ b/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
--- a/src/components/pages/RelationshipZodiacInfo/index.tsx
+++ b/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>
--- a/src/components/pages/TrialPaymentWithDiscount/PaymentDiscountTable/styles.module.css
+++ b/src/components/pages/TrialPaymentWithDiscount/PaymentDiscountTable/styles.module.css
@ -53,6 +53,7 @@
  flex-direction: row;
  align-items: center;
  justify-content: center;
+  gap: 4px;
 }

 .discount {
--- a/src/components/pages/WithHead/index.tsx
+++ b/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{" "}
--- a/src/components/pages/WithHeart/index.tsx
+++ b/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{" "}
--- a/src/hooks/scrollToTop.tsx
+++ b/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;
+};
--- a/src/index.css
+++ b/src/index.css
@ -184,6 +184,7 @@ div[class^="divider"] {

 #root {
  height: 100%;
+  min-width: 100vw;
 }

 a,