Preview/discount pages

2024-02-18 16:54:33 +00:00 · 2024-02-18 16:54:33 +00:00 · 08b4113c09
commit 08b4113c09
parent 9ade31a25c
41 changed files with 1274 additions and 78 deletions
--- a/public/aboutPlan.webp
+++ b/public/aboutPlan.webp
--- a/public/credit-card-white.svg
+++ b/public/credit-card-white.svg
@ -0,0 +1,15 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg" title="card"
+    class="sc-296fc55c-6 dYvWaK">
+    <g clip-path="url(#clip0_7128_73411)">
+        <path
+            d="M21.5 4.5H3.5C2.39543 4.5 1.5 5.39543 1.5 6.5V18.5C1.5 19.6046 2.39543 20.5 3.5 20.5H21.5C22.6046 20.5 23.5 19.6046 23.5 18.5V6.5C23.5 5.39543 22.6046 4.5 21.5 4.5Z"
+            stroke="#FAFAFA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+        <path d="M1.5 10.5H23.5" stroke="#FAFAFA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        </path>
+    </g>
+    <defs>
+        <clipPath id="clip0_7128_73411">
+            <rect width="24" height="24" fill="white" transform="translate(0.5 0.5)"></rect>
+        </clipPath>
+    </defs>
+</svg>
--- a/public/guide.webp
+++ b/public/guide.webp
--- a/public/horoscopePhone.webp
+++ b/public/horoscopePhone.webp
--- a/public/info.svg
+++ b/public/info.svg
@ -0,0 +1,10 @@
+<svg color="#fff" width="44" height="44" viewBox="0 0 44 44" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
+    title="info" class="sc-e45f26f3-3 dJvKuW">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M2 22C2 10.9596 10.9596 2 22 2C33.0404 2 42 10.9596 42 22C42 33.0404 33.0404 42 22 42C10.9596 42 2 33.0404 2 22ZM22 4.7907C12.5009 4.7907 4.7907 12.5009 4.7907 22C4.7907 31.4991 12.5009 39.2093 22 39.2093C31.4991 39.2093 39.2093 31.4991 39.2093 22C39.2093 12.5009 31.4991 4.7907 22 4.7907Z"
+        fill="currentColor"></path>
+    <path
+        d="M21.6696 15.8122C22.1381 15.8122 22.5361 15.6494 22.8666 15.3239C23.1968 14.998 23.3623 14.6025 23.3623 14.1381C23.3623 13.614 23.1948 13.2014 22.8623 12.9017C22.5283 12.602 22.1388 12.4522 21.6936 12.4522C21.2403 12.4522 20.8451 12.5998 20.5071 12.8959C20.1696 13.1912 20.0008 13.606 20.0008 14.1376C20.0008 14.6019 20.1623 14.9975 20.4853 15.3233C20.8083 15.6494 21.2031 15.8122 21.6703 15.8122"
+        fill="currentColor"></path>
+    <rect x="20" y="18" width="3.36" height="13" rx="1.68" fill="currentColor"></rect>
+</svg>
--- a/public/medal.svg
+++ b/public/medal.svg
@ -0,0 +1,20 @@
+<svg width="55" height="70" viewBox="0 0 55 70" fill="none" xmlns="http://www.w3.org/2000/svg"
+    class="sc-c1d7bb74-4 ktPlSb">
+    <path d="M26.9181 25.4622L14.2259 0H1.07422L13.7221 25.4622H26.9181Z" fill="#FBFBFF"></path>
+    <path d="M41.2539 25.4622L53.9103 0H40.8851L28.0664 25.4622H41.2539Z" fill="#FBFBFF"></path>
+    <path
+        d="M27.4914 64.7819C39.5097 64.7819 49.2524 55.0914 49.2524 43.1375C49.2524 31.1837 39.5097 21.4932 27.4914 21.4932C15.4732 21.4932 5.73047 31.1837 5.73047 43.1375C5.73047 55.0914 15.4732 64.7819 27.4914 64.7819Z"
+        fill="#FBFBFF"></path>
+    <path
+        d="M27.4941 62.395C38.1871 62.395 46.8554 53.7731 46.8554 43.1374C46.8554 32.5018 38.1871 23.8799 27.4941 23.8799C16.8012 23.8799 8.13281 32.5018 8.13281 43.1374C8.13281 53.7731 16.8012 62.395 27.4941 62.395Z"
+        fill="#27AE60"></path>
+    <path
+        d="M21.7841 52.5511L15.8818 46.6804C14.8832 45.6872 14.8832 44.0713 15.8818 43.078L15.9116 43.0483C16.9102 42.0551 18.5348 42.0551 19.5334 43.0483L23.2 46.6953C23.4683 46.9621 23.9005 46.9621 24.1688 46.6953L36.346 34.5833C37.3446 33.5901 38.9693 33.5901 39.9679 34.5833L39.9977 34.613C40.9963 35.6062 40.9963 37.2222 39.9977 38.2154L25.5848 52.5511C24.5415 53.5888 22.8274 53.5888 21.7841 52.5511Z"
+        fill="#FBFBFF"></path>
+    <path
+        d="M21.3348 52.1063L15.4326 46.2356C14.4339 45.2424 14.4339 43.6264 15.4326 42.6332L15.4624 42.6035C16.461 41.6103 18.0856 41.6103 19.0842 42.6035L22.7508 46.2504C23.0191 46.5173 23.4513 46.5173 23.7196 46.2504L35.8968 34.1385C36.8954 33.1452 38.52 33.1452 39.5187 34.1385L39.5485 34.1682C40.5471 35.1614 40.5471 36.7773 39.5485 37.7706L25.1356 52.1063C24.0922 53.144 22.3782 53.144 21.3348 52.1063Z"
+        fill="#FBFBFF"></path>
+    <path
+        d="M51.3104 47.8368C51.6383 46.2357 54.5 44.8274 54.5 43.1225C54.5 41.4176 51.6383 40.0241 51.3104 38.4082C50.9825 36.7478 53.084 34.3758 52.4431 32.8488C52.1301 32.1076 51.2359 31.6628 50.2969 31.2626C49.2684 30.8326 48.1655 30.4324 47.6885 29.706C46.7495 28.3124 47.778 25.3178 46.5856 24.1318C46.0937 23.6426 45.2889 23.524 44.4095 23.5091C43.1724 23.4647 41.8011 23.5833 40.9814 23.0496C40.5193 22.7382 40.1765 22.1749 39.8933 21.5374C39.312 20.2773 38.8649 18.7355 37.8365 18.3056C36.3013 17.6681 33.9016 19.7584 32.2472 19.4323C30.6226 19.121 29.2215 16.2598 27.5075 16.2598C25.7934 16.2598 24.3924 19.1061 22.7677 19.4323C22.5889 19.4619 22.3951 19.4768 22.2014 19.4619C20.5916 19.3433 18.5348 17.7423 17.1784 18.3056C15.6134 18.9431 15.4197 22.1156 14.0335 23.0347C12.6325 23.9687 9.62172 22.9458 8.42934 24.1318C7.23696 25.3178 8.26539 28.3124 7.32639 29.706C6.40229 31.0847 3.21267 31.2922 2.57176 32.834C2.00538 34.1979 3.6151 36.2289 3.73434 37.83C3.74924 38.0227 3.74924 38.2154 3.70453 38.3933C3.36172 40.0241 0.5 41.4324 0.5 43.1373C0.5 44.8422 3.36172 46.2357 3.68962 47.8516C4.01753 49.512 1.91595 51.8988 2.55686 53.411C2.9891 54.4339 4.53919 54.8786 5.8061 55.4568C6.44701 55.7533 7.01339 56.0794 7.32639 56.5538C7.87786 57.3692 7.74372 58.7331 7.78844 59.9636C7.81825 60.8382 7.92258 61.6388 8.41444 62.128C9.59191 63.314 12.6176 62.2911 14.0186 63.2251C14.7341 63.6994 15.1365 64.7965 15.5836 65.8194C15.9861 66.7682 16.4332 67.6429 17.1784 67.9542C18.7136 68.5917 21.1133 66.5014 22.7677 66.8275C24.3924 67.1388 25.7934 70 27.5075 70C29.2215 70 30.6226 67.1536 32.2472 66.8275C33.9165 66.5014 36.3013 68.5917 37.8365 67.9542C39.4015 67.3167 39.5952 64.1442 40.9814 63.2251C42.3824 62.2911 45.3932 63.314 46.5856 62.128C47.778 60.942 46.7495 57.9474 47.6885 56.5538C48.6126 55.1751 51.8022 54.9676 52.4431 53.4258C53.084 51.884 50.9825 49.4972 51.3104 47.8368ZM27.4925 64.2331C24.452 64.2331 21.5604 63.5957 18.9521 62.4393C15.9115 61.1051 13.2585 59.0889 11.1569 56.5835C10.1583 55.3827 9.29382 54.0781 8.57839 52.6846C7.10282 49.8233 6.28305 46.5767 6.28305 43.1373C6.28305 39.1791 7.38601 35.458 9.30872 32.2855C11.0973 29.3205 13.6013 26.8299 16.5823 25.0509C19.7719 23.1385 23.4981 22.0415 27.4925 22.0415C30.9505 22.0415 34.1997 22.8717 37.0912 24.3245C38.4923 25.0361 39.8039 25.896 41.0112 26.8892C43.5301 28.9647 45.572 31.6184 46.8986 34.6426C48.0611 37.237 48.702 40.113 48.702 43.1373C48.702 54.76 39.1928 64.2331 27.4925 64.2331Z"
+        fill="#27AE60"></path>
+</svg>
--- a/public/messanging.webp
+++ b/public/messanging.webp
--- a/public/payments.svg
+++ b/public/payments.svg
--- a/public/timerBackground.png
+++ b/public/timerBackground.png
--- a/public/understanding.webp
+++ b/public/understanding.webp
--- a/public/user1.webp
+++ b/public/user1.webp
--- a/public/user2.webp
+++ b/public/user2.webp
--- a/public/user3.webp
+++ b/public/user3.webp
--- a/public/wrapped-gift.webp
+++ b/public/wrapped-gift.webp
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@ -93,6 +93,8 @@ import TrialPaymentPage from "../pages/TrialPayment";
 import ReactGA from "react-ga4";
 import AdditionalDiscount from "../pages/AdditionalDiscount";
 import TrialPaymentWithDiscount from "../pages/TrialPaymentWithDiscount";
+import MarketingLanding from "../pages/EmailLetters/MarketingLanding";
+import MarketingTrialPayment from "../pages/EmailLetters/MarketingTrialPayment";

 const isProduction = import.meta.env.MODE === "production";

@ -279,6 +281,17 @@ function App(): JSX.Element {
        </Route>
        {/* Test Routes End */}

+        {/* Email Letters */}
+        <Route
+          path={routes.client.email("marketing-landing")}
+          element={<MarketingLanding />}
+        />
+        <Route
+          path={routes.client.email("marketing-trial-payment")}
+          element={<MarketingTrialPayment />}
+        />
+        {/* Email Letters End */}
+
        <Route
          path={routes.client.paymentResult()}
          element={<PaymentResultPage />}
--- a/src/components/StripePage/ApplePayButton/index.tsx
+++ b/src/components/StripePage/ApplePayButton/index.tsx
@ -70,17 +70,6 @@ function ApplePayButton({
        );
      paymentIntent;

-      fetch("https://9bbb-78-85-20-145.ngrok-free.app/test", {
-        method: "POST",
-        body: JSON.stringify({
-          paymentIntent: JSON.stringify(paymentIntent),
-          stripeError: JSON.stringify(stripeError),
-        }),
-        headers: {
-          "Content-type": "application/json; charset=UTF-8",
-        },
-      });
-
      if (stripeError) {
        // Show error to your customer (e.g., insufficient funds)
        navigate(
--- a/src/components/pages/EmailLetters/MarketingLanding/components/ComparePrices/index.tsx
+++ b/src/components/pages/EmailLetters/MarketingLanding/components/ComparePrices/index.tsx
@ -0,0 +1,32 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.css";
+
+function ComparePrices() {
+  return (
+    <div className={styles.container}>
+      <div className={`${styles["old-price"]} ${styles["price-container"]}`}>
+        <div className={styles["header-container"]}>
+          <Title variant="h3" className={styles.title}>
+            old price
+          </Title>
+        </div>
+        <div className={styles["main-container"]}>
+          <p className={styles.text}>up to $13.67</p>
+        </div>
+      </div>
+      <div className={`${styles["new-price"]} ${styles["price-container"]}`}>
+        <div className={styles.free}>free</div>
+        <div className={styles["header-container"]}>
+          <Title variant="h3" className={styles.title}>
+            new price
+          </Title>
+        </div>
+        <div className={styles["main-container"]}>
+          <p className={styles.text}>$0</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ComparePrices;
--- a/src/components/pages/EmailLetters/MarketingLanding/components/ComparePrices/styles.module.css
+++ b/src/components/pages/EmailLetters/MarketingLanding/components/ComparePrices/styles.module.css
@ -0,0 +1,98 @@
+.container {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 18px;
+  margin-top: 40px;
+}
+
+.old-price {
+  display: flex;
+  flex-direction: column;
+  border-radius: 16px;
+  width: 135px;
+  border: 1px solid rgb(106, 58, 162);
+  position: relative;
+}
+
+.header-container {
+  border-radius: 16px 16px 0px 0px;
+  display: flex;
+  -webkit-box-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  align-items: center;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid rgb(106, 58, 162);
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 140%;
+}
+
+.header-container > .title {
+  text-transform: uppercase;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 140%;
+  margin: 0;
+}
+
+.main-container {
+  padding-top: 30px;
+  padding-bottom: 30px;
+}
+
+.main-container > .text {
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 120%;
+  color: #333333;
+}
+
+.new-price {
+  border-radius: 16px;
+  border: none;
+  width: 160px;
+  padding: 4px;
+  background: rgb(142, 140, 240);
+}
+
+.new-price > .header-container > .title {
+  color: rgb(251, 251, 255);
+}
+
+.new-price > .main-container {
+  background-color: #fff;
+  border-radius: 0px 0px 16px 16px;
+  display: flex;
+  -webkit-box-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  align-items: center;
+}
+
+.new-price > .main-container > .text {
+  font-weight: bold;
+  font-size: 48px;
+  -webkit-text-fill-color: rgb(52, 52, 52);
+}
+
+.price-container {
+  position: relative;
+}
+
+.free {
+  position: absolute;
+  top: calc(-0.5em - 5px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgb(86, 204, 242);
+  padding: 6px 15px;
+  color: #fff;
+  border-radius: 20px;
+  text-transform: uppercase;
+  font-size: 14px;
+  font-weight: 600;
+}
--- a/src/components/pages/EmailLetters/MarketingLanding/components/LastWeek/index.tsx
+++ b/src/components/pages/EmailLetters/MarketingLanding/components/LastWeek/index.tsx
@ -0,0 +1,14 @@
+import styles from "./styles.module.css";
+
+function LastWeek() {
+  return (
+    <div className={styles.container}>
+      <p className={styles.text}>
+        Last week alone <b>2000+ people</b> got this relationship guide
+      </p>
+      <img className={styles.image} src="/info.svg" alt="Info" />
+    </div>
+  );
+}
+
+export default LastWeek;
--- a/src/components/pages/EmailLetters/MarketingLanding/components/LastWeek/styles.module.css
+++ b/src/components/pages/EmailLetters/MarketingLanding/components/LastWeek/styles.module.css
@ -0,0 +1,22 @@
+.container {
+  display: flex;
+  -webkit-box-pack: justify;
+  justify-content: space-between;
+  -webkit-box-align: center;
+  align-items: center;
+  width: 100%;
+  padding: 20px;
+  margin: 20px 0;
+  background: rgb(106, 58, 162);
+  border-radius: 15px;
+}
+
+.text {
+  color: rgb(251, 251, 255);
+  font-size: 14px;
+  line-height: 140%;
+}
+
+.image {
+  width: 32px;
+}
--- a/src/components/pages/EmailLetters/MarketingLanding/components/MoneyBack/index.tsx
+++ b/src/components/pages/EmailLetters/MarketingLanding/components/MoneyBack/index.tsx
@ -0,0 +1,22 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.css";
+
+function MoneyBack() {
+  return (
+    <div className={styles.container}>
+      <Title className={styles.title} variant="h3">
+        Money-back guarantee
+      </Title>
+      <img className={styles.image} src="/medal.svg" alt="Ok" />
+      <p className={styles.text}>
+        We are convinced that we will help you get a deeper understanding of
+        your partner and how you can improve your relationship. After all of our
+        stellar customer reviews, we are ready to return your money if you feel
+        that this report doesn’t provide any value. Find more about applicable
+        limitations in our Money-back policy.
+      </p>
+    </div>
+  );
+}
+
+export default MoneyBack;
--- a/src/components/pages/EmailLetters/MarketingLanding/components/MoneyBack/styles.module.css
+++ b/src/components/pages/EmailLetters/MarketingLanding/components/MoneyBack/styles.module.css
@ -0,0 +1,34 @@
+.container {
+  background: linear-gradient(
+    165.54deg,
+    rgb(20, 19, 51) -33.39%,
+    rgb(32, 34, 97) 15.89%,
+    rgb(84, 60, 151) 55.84%,
+    rgb(105, 57, 162) 74.96%
+  );
+  border-radius: 20px;
+  position: relative;
+  padding: 30px 15px 20px;
+  width: 100%;
+}
+
+.title {
+  text-align: start;
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 120%;
+  color: rgb(251, 251, 255);
+  max-width: calc(100% - 60px);
+}
+
+.text {
+  font-size: 14px;
+  line-height: 24px;
+  color: rgb(251, 251, 255);
+}
+
+.image {
+  position: absolute;
+  top: 0;
+  right: 12px;
+}
--- a/src/components/pages/EmailLetters/MarketingLanding/components/SpecialOfferBanner/index.tsx
+++ b/src/components/pages/EmailLetters/MarketingLanding/components/SpecialOfferBanner/index.tsx
@ -0,0 +1,18 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.css";
+
+function SpecialOfferBanner() {
+  return (
+    <div className={styles.container}>
+      <img src="/wrapped-gift.webp" alt="Wrapped Gift" />
+      <div className="text-container">
+        <Title className={styles.title} variant="h3">
+          Special Offer!
+        </Title>
+        <p className={styles.text}>Everything for free. Trial include!</p>
+      </div>
+    </div>
+  );
+}
+
+export default SpecialOfferBanner;
--- a/src/components/pages/EmailLetters/MarketingLanding/components/SpecialOfferBanner/styles.module.css
+++ b/src/components/pages/EmailLetters/MarketingLanding/components/SpecialOfferBanner/styles.module.css
@ -0,0 +1,32 @@
+.container {
+  position: -webkit-sticky;
+  position: sticky;
+  width: 100%;
+  max-width: 360px;
+  top: 0px;
+  z-index: 3;
+  background: rgb(142, 140, 240);
+  padding: 20px;
+  display: flex;
+  gap: 10px;
+  color: #e8e8fc;
+}
+
+.text-container {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.title {
+  font-size: 24px;
+  line-height: 29px;
+  margin: 0;
+  text-align: left;
+}
+
+.text {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 140%;
+}
--- a/src/components/pages/EmailLetters/MarketingLanding/index.tsx
+++ b/src/components/pages/EmailLetters/MarketingLanding/index.tsx
@ -0,0 +1,86 @@
+import Title from "@/components/Title";
+import SpecialOfferBanner from "./components/SpecialOfferBanner";
+import styles from "./styles.module.css";
+import ComparePrices from "./components/ComparePrices";
+import PointsList from "../../TrialPayment/components/PointsList";
+import { marketingLandingPointsList } from "@/data/pointsLists";
+import Reviews from "../../TrialPayment/components/Reviews";
+import { marketingLandingReviews } from "@/data/reviews";
+import LastWeek from "./components/LastWeek";
+import MoneyBack from "./components/MoneyBack";
+import GuardPayments from "../../TrialPayment/components/GuardPayments";
+import MainButton from "@/components/MainButton";
+import { useSelector } from "react-redux";
+import { selectors } from "@/store";
+import { getZodiacSignByDate } from "@/services/zodiac-sign";
+import { useNavigate } from "react-router-dom";
+import routes from "@/routes";
+
+function MarketingLanding() {
+  const birthdate = useSelector(selectors.selectBirthdate);
+  const zodiacSign = getZodiacSignByDate(birthdate);
+  const navigate = useNavigate();
+
+  const handleNext = () => {
+    navigate(routes.client.email("marketing-trial-payment"));
+  };
+
+  return (
+    <section className={`${styles.page} page`}>
+      <SpecialOfferBanner />
+      <div className={styles.wrapper}>
+        <Title variant="h2" className={`${styles.title} ${styles["hi-title"]}`}>
+          Hey, {zodiacSign} Sun 👋
+        </Title>
+        <p className={styles.subtitle}>
+          Your wellness and happiness are key for us!
+        </p>
+        <img
+          className={styles.image}
+          style={{ marginTop: 0 }}
+          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="/horoscopePhone.webp"
+          alt="Horoscope phone"
+        />
+        <img className={styles.image} src="/guide.webp" alt="Guide" />
+        <img
+          className={styles.image}
+          src="/understanding.webp"
+          alt="Understanding"
+        />
+        <ComparePrices />
+        <PointsList
+          points={marketingLandingPointsList}
+          title="Your plan also includes:"
+          titleClassName={`${styles.title} ${styles["points-title"]}`}
+          containerClassName={styles["points-container"]}
+        />
+        <Title className={styles.title}>Customer reviews</Title>
+        <Reviews reviews={marketingLandingReviews} />
+        <Title
+          variant="h2"
+          className={`${styles.title} ${styles["customers-counter"]}`}
+        >
+          Over <span style={{ color: "#6a3aa2" }}>247 254</span> happy customers
+        </Title>
+        <LastWeek />
+        <MoneyBack />
+        <GuardPayments />
+        <img className={styles.payments} src="/payments.svg" alt="Payments" />
+        <footer className={styles.footer}>
+          <MainButton className={styles.button} onClick={handleNext}>
+            Continue
+          </MainButton>
+        </footer>
+      </div>
+    </section>
+  );
+}
+
+export default MarketingLanding;
--- a/src/components/pages/EmailLetters/MarketingLanding/styles.module.css
+++ b/src/components/pages/EmailLetters/MarketingLanding/styles.module.css
@ -0,0 +1,91 @@
+.page {
+  position: relative;
+  height: fit-content;
+  min-height: 100dvh;
+  background-color: #fff0f0;
+  overflow: visible;
+  padding-bottom: 70px;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 330px;
+}
+
+.image {
+  width: 100%;
+  margin-top: 20px;
+}
+
+.title {
+  font-size: 18px;
+  line-height: 28px;
+  text-align: center;
+  color: rgb(51, 51, 51);
+  width: 100%;
+  margin: 0;
+  font-weight: 700;
+  margin-top: 30px;
+}
+
+.hi-title {
+  text-align: left;
+}
+
+.subtitle {
+  font-size: 15px;
+  line-height: 180%;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+.points-title {
+  margin-bottom: 20px;
+}
+
+.title.customers-counter {
+  font-weight: 700;
+  font-size: 24px;
+}
+
+.points-container {
+  margin: 0;
+}
+
+.payments {
+  margin-top: 20px;
+}
+
+.footer {
+  position: fixed;
+  bottom: 0px;
+  top: auto;
+  height: 70px;
+  background: rgba(255, 240, 240, 0.3);
+  backdrop-filter: blur(4px);
+  display: flex;
+  -webkit-box-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  align-items: center;
+  width: 100%;
+}
+
+.button {
+  max-width: 280px;
+  margin-bottom: 0px;
+  border-radius: 16px;
+  min-height: 0;
+  height: 49px;
+  font-weight: 600;
+  font-size: 14px;
+  background: linear-gradient(
+    165.54deg,
+    rgb(20, 19, 51) -33.39%,
+    rgb(32, 34, 97) 15.89%,
+    rgb(84, 60, 151) 55.84%,
+    rgb(105, 57, 162) 74.96%
+  );
+}
--- a/src/components/pages/EmailLetters/MarketingTrialPayment/components/ReservedTimer/index.tsx
+++ b/src/components/pages/EmailLetters/MarketingTrialPayment/components/ReservedTimer/index.tsx
@ -0,0 +1,54 @@
+import { useEffect, useMemo, useState } from "react";
+import styles from "./styles.module.css";
+
+function ReservedTimer() {
+  const [currentDate, setCurrentDate] = useState(new Date());
+  const endDate = useMemo(
+    () => new Date().setMinutes(currentDate.getMinutes() + 20),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentDate(new Date());
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [endDate, currentDate]);
+
+  const getMinutes = () => {
+    const diff = endDate - currentDate.getTime();
+    let minutes = Math.floor(diff / 1000 / 60);
+    if (minutes < 0) {
+      minutes = 0;
+    }
+    return minutes.toString().padStart(2, "0");
+  };
+
+  const getSeconds = () => {
+    const diff = endDate - currentDate.getTime();
+    let seconds = Math.floor(diff / 1000) % 60;
+    if (seconds < 0) {
+      seconds = 0;
+    }
+    return seconds.toString().padStart(2, "0");
+  };
+
+  return (
+    <div className={styles.container}>
+      <img
+        className={styles.background}
+        src="/timerBackground.png"
+        alt="Timer background"
+      />
+      <div className={styles["text-container"]}>
+        <span>Reserved for</span>
+        <div className={styles.value}>
+          {getMinutes()}:{getSeconds()}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ReservedTimer;
--- a/src/components/pages/EmailLetters/MarketingTrialPayment/components/ReservedTimer/styles.module.css
+++ b/src/components/pages/EmailLetters/MarketingTrialPayment/components/ReservedTimer/styles.module.css
@ -0,0 +1,41 @@
+.container {
+  position: relative;
+  height: 24px;
+  width: 165px;
+}
+
+.background {
+  position: absolute;
+  inset: 0px;
+  max-width: 100%;
+}
+
+.text-container {
+  position: relative;
+  display: flex;
+  -webkit-box-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  align-items: center;
+  color: rgb(251, 251, 255);
+  padding-left: 12px;
+  font-weight: 400 !important;
+  font-size: 14px !important;
+  line-height: 1.4;
+}
+
+.text-container > span {
+  margin-right: -10px;
+  color: rgb(251, 251, 255);
+  font-weight: 400 !important;
+  font-size: 14px !important;
+}
+
+.text-container > .value {
+  padding: 3px 15px;
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  justify-content: center;
+}
--- a/src/components/pages/EmailLetters/MarketingTrialPayment/index.tsx
+++ b/src/components/pages/EmailLetters/MarketingTrialPayment/index.tsx
@ -0,0 +1,77 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.css";
+import ReservedTimer from "./components/ReservedTimer";
+import MainButton from "@/components/MainButton";
+import Modal from "@/components/Modal";
+import PaymentModal from "../../TrialPayment/components/PaymentModal";
+import { useState } from "react";
+
+function MarketingTrialPayment() {
+  const [isOpenPaymentModal, setIsOpenPaymentModal] = useState<boolean>(false);
+
+  const openStripeModal = () => {
+    setIsOpenPaymentModal(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsOpenPaymentModal(false);
+  };
+
+  return (
+    <>
+      <Modal
+        containerClassName={styles.modal}
+        open={isOpenPaymentModal}
+        onClose={handleCloseModal}
+      >
+        <PaymentModal />
+      </Modal>
+      <section className={`${styles.page} page`}>
+        <div className={styles.wrapper}>
+          <div className={styles.banner}>Special Offer</div>
+          <Title variant="h2" className={styles.title}>
+            Start your 7-day trial
+          </Title>
+          <p className={styles.description}>No pressure. Cancel anytime</p>
+          <div className={styles["total-today"]}>
+            <p className={styles.description}>Total today:</p>
+            <p className={styles.value}>$0</p>
+          </div>
+          <div className={styles.line} />
+          <div className={styles["code-container"]}>
+            <p>Code applied!</p>
+            <ReservedTimer />
+          </div>
+          <div className={styles["sale-container"]}>
+            <p className={styles.description}>
+              Your cost per 2 weeks after trial
+            </p>
+            <p className={styles.value}>
+              <span className={styles["old-price"]}>$29</span>
+              <span className={styles["new-price"]}>$19</span>
+            </p>
+          </div>
+          <p className={styles["sale-description"]}>Save $10 every period</p>
+          <div className={styles.line} />
+          <p className={styles["text-description"]}>
+            You will be charged only <b>$0 for your 7-day trial.</b>{" "}
+            Subscription <b>renews automatically</b> until cancelled. You{" "}
+            <b>can cancel at any time</b> before the end of the trial.
+          </p>
+          <MainButton className={styles.button} onClick={openStripeModal}>
+            <img src="/credit-card-white.svg" alt="Credit card" />
+            <p>Get access</p>
+          </MainButton>
+          <p className={styles.policy}>
+            By continuing you agree that if you don't cancel prior to the end of
+            the 3-days trial, you will automatically be charged $19 every 2
+            weeks until you cancel in settings. Learn more about cancellation
+            and refund policy in Subscription terms
+          </p>
+        </div>
+      </section>
+    </>
+  );
+}
+
+export default MarketingTrialPayment;
--- a/src/components/pages/EmailLetters/MarketingTrialPayment/styles.module.css
+++ b/src/components/pages/EmailLetters/MarketingTrialPayment/styles.module.css
@ -0,0 +1,150 @@
+.page {
+  background-color: #fff0f0;
+  padding: 60px 45px;
+  min-width: 100vw;
+  height: fit-content;
+  min-height: 100dvh;
+}
+
+.wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  max-width: 330px;
+}
+
+.banner {
+  border: 1px solid rgb(39, 174, 96);
+  color: rgb(39, 174, 96);
+  border-radius: 8px;
+  margin-bottom: 10px;
+  padding: 5px 10px;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.5;
+}
+
+.title {
+  margin-bottom: -10px;
+  font-size: 19px;
+  line-height: 28px;
+  text-align: center;
+  color: rgb(51, 51, 51);
+  font-weight: 800;
+}
+
+.description {
+  margin-bottom: 10px;
+  font-size: 15px;
+  font-weight: 500;
+}
+
+.total-today {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.total-today .description {
+  font-size: 15px;
+  font-weight: 800;
+  margin: 0;
+}
+
+.total-today .value {
+  font-size: 17px;
+  font-weight: 800;
+  color: #9974f6;
+}
+
+.code-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.code-container > p {
+  font-size: 15px;
+  color: rgb(39, 174, 96);
+  font-weight: 500;
+}
+
+.line {
+  margin-top: 0px;
+  background: rgb(153, 116, 246);
+  height: 1px;
+  width: 100%;
+}
+
+.sale-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.sale-container > .description {
+  margin: 0;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.sale-container > .value {
+  margin: 0;
+}
+
+.sale-container > .value > .old-price {
+  font-weight: normal;
+  font-size: 18px;
+  text-decoration: line-through;
+  color: rgb(130, 130, 130);
+}
+
+.sale-container > .value > .new-price {
+  font-size: 18px;
+  margin-left: 20px;
+}
+
+.sale-description {
+  font-size: 14px;
+  margin: 0;
+  font-weight: 600;
+  color: rgb(130, 130, 130);
+  align-self: flex-start;
+}
+
+.text-description {
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.text-description > b {
+  font-weight: 600;
+}
+
+.button {
+  background: rgb(105, 177, 63);
+  box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px;
+  border-radius: 30px;
+  min-height: 0;
+  height: 49px;
+  font-size: 18px;
+  gap: 10px;
+}
+
+.policy {
+  font-size: 12px;
+  line-height: 20px;
+  padding: 0px 6px;
+}
+
+.modal {
+  max-height: calc(100dvh - 40px);
+}
--- a/src/components/pages/TrialPayment/components/PaymentMethodsChoice/styles.module.css
+++ b/src/components/pages/TrialPayment/components/PaymentMethodsChoice/styles.module.css
@ -2,6 +2,7 @@
  width: 100%;
  display: flex;
  justify-content: space-between;
+  gap: 8px;
 }

 .payment-method {
@ -15,6 +16,7 @@
  height: 68px;
  padding-top: 8px;
  padding-bottom: 8px;
+  cursor: pointer;
 }

 .payment-method.active {
--- a/src/components/pages/TrialPayment/components/PointsList/index.tsx
+++ b/src/components/pages/TrialPayment/components/PointsList/index.tsx
@ -0,0 +1,34 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.css";
+
+interface IPointsListProps {
+  points: string[];
+  title: string;
+  titleClassName?: string;
+  containerClassName?: string;
+}
+
+function PointsList({
+  points,
+  title,
+  titleClassName = "",
+  containerClassName = "",
+}: IPointsListProps) {
+  return (
+    <div className={`${styles["you-get"]} ${containerClassName}`}>
+      <Title variant="h2" className={`${styles.title} ${titleClassName}`}>
+        {title}
+      </Title>
+      <ul>
+        {points.map((point, index) => (
+          <li key={index}>
+            <img src="/check-mark-purple.svg" alt="Check mark" />
+            {point}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default PointsList;
--- a/src/components/pages/TrialPayment/components/PointsList/styles.module.css
+++ b/src/components/pages/TrialPayment/components/PointsList/styles.module.css
--- a/src/components/pages/TrialPayment/components/Reviews/Review.tsx
+++ b/src/components/pages/TrialPayment/components/Reviews/Review.tsx
@ -1,19 +1,18 @@
 import Title from "@/components/Title";
 import styles from "./styles.module.css";
+import { IReview } from "@/data/reviews";

-interface IReviewProps {
-  username: string;
-  date: string;
-  text: string;
-  mark: number;
-}
+type IReviewProps = IReview;

-function Review({ username, date, text, mark }: IReviewProps) {
+function Review({ username, date, text, mark, image }: IReviewProps) {
  return (
    <div className={styles.review}>
      <div className={styles.header}>
-        <div className={styles.avatar}>
-          <span>{username.slice(0, 2)}</span>
+        <div className={`${styles.avatar} ${image?.length && styles.middle}`}>
+          {!image?.length && <span>{username.slice(0, 2)}</span>}
+          {!!image?.length && (
+            <img className={styles.image} src={image} alt="Customer Avatar" />
+          )}
        </div>
        <div className={styles.info}>
          <Title variant="h6" className={styles.title}>
@ -21,16 +20,18 @@ function Review({ username, date, text, mark }: IReviewProps) {
          </Title>
          <p>{date}</p>
        </div>
-        <span
-          className={styles.stars}
-          style={{
-            background: `linear-gradient(
+        {!!mark && (
+          <span
+            className={styles.stars}
+            style={{
+              background: `linear-gradient(
                90deg,
                rgb(255, 204, 0) ${(mark / 5) * 100}%,
                rgb(238, 238, 238) 0px
            )`,
-          }}
-        ></span>
+            }}
+          ></span>
+        )}
      </div>
      <div className={styles.content}>
        <div className={styles.opostrafs}>
--- a/src/components/pages/TrialPayment/components/Reviews/index.tsx
+++ b/src/components/pages/TrialPayment/components/Reviews/index.tsx
@ -1,14 +1,14 @@
-import Title from "@/components/Title";
 import styles from "./styles.module.css";
-import { reviews } from "@/data/reviews";
+import { IReview } from "@/data/reviews";
 import Review from "./Review";

-function Reviews() {
+interface IReviewsProps {
+  reviews: IReview[];
+}
+
+function Reviews({ reviews }: IReviewsProps) {
  return (
    <div className={styles.reviews}>
-      <Title variant="h2" className={styles.title}>
-        Users love us
-      </Title>
      <ul>
        {reviews.map((review, index) => (
          <li key={index}>
--- a/src/components/pages/TrialPayment/components/Reviews/styles.module.css
+++ b/src/components/pages/TrialPayment/components/Reviews/styles.module.css
@ -2,7 +2,6 @@
  display: flex;
  flex-direction: column;
  justify-content: center;
-  margin-top: 88px;
 }

 .reviews > ul > li {
@ -34,6 +33,11 @@
  justify-content: center;
 }

+.avatar.middle {
+  width: 45px;
+  height: 45px;
+}
+
 .avatar > span {
  font-weight: 600;
  font-size: 16px;
@ -94,3 +98,9 @@
  line-height: 140%;
  color: rg#0f0f0f;
 }
+
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
--- a/src/components/pages/TrialPayment/components/YouGet/index.tsx
+++ b/src/components/pages/TrialPayment/components/YouGet/index.tsx
@ -1,37 +0,0 @@
-import Title from "@/components/Title";
-import styles from "./styles.module.css";
-
-function YouGet() {
-  return (
-    <div className={styles["you-get"]}>
-      <Title variant="h2" className={styles.title}>
-        What you get
-      </Title>
-      <ul>
-        <li>
-          <img src="/check-mark-purple.svg" alt="Check mark" />
-          Your personalised plan
-        </li>
-        <li>
-          <img src="/check-mark-purple.svg" alt="Check mark" />
-          1:1 advice from your own astrologer
-        </li>
-        <li>
-          <img src="/check-mark-purple.svg" alt="Check mark" />
-          Finding the most compatible partner
-        </li>
-        <li>
-          <img src="/check-mark-purple.svg" alt="Check mark" />
-          Insights into your relationship patterns, and emotional and sexual
-          needs
-        </li>
-        <li>
-          <img src="/check-mark-purple.svg" alt="Check mark" />
-          Better understanding of yourself
-        </li>
-      </ul>
-    </div>
-  );
-}
-
-export default YouGet;
--- a/src/components/pages/TrialPayment/index.tsx
+++ b/src/components/pages/TrialPayment/index.tsx
@ -11,7 +11,7 @@ import routes from "@/routes";
 import { getZodiacSignByDate } from "@/services/zodiac-sign";
 import YourReading from "./components/YourReading";
 import Reviews from "./components/Reviews";
-import YouGet from "./components/YouGet";
+import PointsList from "./components/PointsList";
 import OftenAsk from "./components/OftenAsk";
 import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans";
 import { useEffect, useState } from "react";
@ -21,6 +21,8 @@ import { Locale } from "@/components/PaymentTable";
 import WithPartnerInformation from "./components/WithPartnerInformation";
 import Modal from "@/components/Modal";
 import PaymentModal from "./components/PaymentModal";
+import { trialPaymentPointsList } from "@/data/pointsLists";
+import { trialPaymentReviews } from "@/data/reviews";

 const locale = getClientLocale() as Locale;

@ -119,7 +121,11 @@ function TrialPaymentPage() {

  return (
    <section className={`${styles.page} page`}>
-      <Modal containerClassName={styles.modal} open={isOpenPaymentModal} onClose={handleDiscount}>
+      <Modal
+        containerClassName={styles.modal}
+        open={isOpenPaymentModal}
+        onClose={handleDiscount}
+      >
        <PaymentModal />
      </Modal>
      <Header buttonClick={openStripeModal} />
@ -158,8 +164,15 @@ function TrialPaymentPage() {
        buttonClick={openStripeModal}
        singleOrWithPartner={singleOrWithPartner}
      />
-      <Reviews />
-      <YouGet />
+      <Title
+        variant="h2"
+        className={styles.title}
+        style={{ marginTop: "88px" }}
+      >
+        Users love us
+      </Title>
+      <Reviews reviews={trialPaymentReviews} />
+      <PointsList title="What you get" points={trialPaymentPointsList} />
      <OftenAsk />
      <PaymentTable subPlan={activeSubPlan} buttonClick={openStripeModal} />
    </section>
--- a/src/data/pointsLists.ts
+++ b/src/data/pointsLists.ts
@ -0,0 +1,14 @@
+export const trialPaymentPointsList = [
+  "Your personalised plan",
+  "1:1 advice from your own astrologer",
+  "Finding the most compatible partner",
+  "Insights into your relationship patterns, and emotional and sexual needs",
+  "Better understanding of yourself",
+];
+
+export const marketingLandingPointsList = [
+  "Unlimited daily/weekly/monthly/yearly horoscopes",
+  "Astrology lessons and articles inside the app",
+  "Beauty/health/travel and more calendars",
+  "Compatibility check with zodiac signs inside the app",
+];
--- a/src/data/reviews.ts
+++ b/src/data/reviews.ts
@ -1,11 +1,12 @@
-interface IReview {
+export interface IReview {
  username: string;
  date: string;
  text: string;
  mark: number;
+  image?: string;
 }

-export const reviews: IReview[] = [
+export const trialPaymentReviews: IReview[] = [
  {
    username: "ria._.panwar",
    date: "02/17/2024",
@ -25,3 +26,27 @@ export const reviews: IReview[] = [
    mark: 4.6,
  },
 ];
+
+export const marketingLandingReviews: IReview[] = [
+  {
+    username: "@ria._.panwar",
+    date: "01/17/2024",
+    text: "Horoscope tells realistic facts about day to day life, which can be easily relatable. It shows direction.",
+    mark: 0,
+    image: "/user1.webp",
+  },
+  {
+    username: "@jp63_",
+    date: "01/29/2024",
+    text: "It makes me feel safe, seeing, warm and smart.",
+    mark: 0,
+    image: "/user2.webp",
+  },
+  {
+    username: "@therealslimmazi",
+    date: "01/28/2024",
+    text: "I love that we have the “my profile” option. I love learning about myself.",
+    mark: 0,
+    image: "/user3.webp",
+  },
+];
--- a/src/routes.ts
+++ b/src/routes.ts
@ -42,7 +42,6 @@ const routes = {
    energyVampirismResult: () => [host, "energy-vampirism"].join("/"),
    nameHoroscopeResult: () => [host, "name-horoscope"].join("/"),

-    // test routes
    gender: () => [host, "gender"].join("/"),
    questionnaire: () => [host, "questionnaire"].join("/"),
    goalSetup: () => [host, "goal-setup"].join("/"),
@ -77,6 +76,9 @@ const routes = {
    additionalDiscount: () => [host, "additional-discount"].join("/"),
    trialPaymentWithDiscount: () =>
      [host, "trial-payment-with-discount"].join("/"),
+
+    // Email letters
+    email: (path: string) => [host, "email", path].join("/"),
    notFound: () => [host, "404"].join("/"),
  },
  server: {
@ -226,6 +228,8 @@ export const withoutFooterRoutes = [
  routes.client.trialPayment(),
  routes.client.additionalDiscount(),
  routes.client.trialPaymentWithDiscount(),
+  routes.client.email("marketing-landing"),
+  routes.client.email("marketing-trial-payment"),
 ];

 export const withoutFooterPartOfRoutes = [routes.client.questionnaire()];
@ -288,9 +292,19 @@ export const withoutHeaderRoutes = [
  routes.client.trialPayment(),
  routes.client.additionalDiscount(),
  routes.client.trialPaymentWithDiscount(),
+  routes.client.email("marketing-landing"),
+  routes.client.email("marketing-trial-payment"),
 ];
 export const hasNoHeader = (path: string) => {
-  return !withoutHeaderRoutes.includes(`/${path.split("/")[1]}`);
+  let result = true;
+
+  withoutHeaderRoutes.forEach((route) => {
+    if (path.includes(route)) {
+      result = false;
+    }
+  });
+
+  return result;
 };

 export const withFullDataModalRoutes = [routes.client.home()];