diff --git a/public/aboutPlan.webp b/public/aboutPlan.webp new file mode 100644 index 0000000..e1c3081 Binary files /dev/null and b/public/aboutPlan.webp differ diff --git a/public/credit-card-white.svg b/public/credit-card-white.svg new file mode 100644 index 0000000..5c54400 --- /dev/null +++ b/public/credit-card-white.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/public/guide.webp b/public/guide.webp new file mode 100644 index 0000000..a2a841c Binary files /dev/null and b/public/guide.webp differ diff --git a/public/horoscopePhone.webp b/public/horoscopePhone.webp new file mode 100644 index 0000000..9a09ae0 Binary files /dev/null and b/public/horoscopePhone.webp differ diff --git a/public/info.svg b/public/info.svg new file mode 100644 index 0000000..0cfa433 --- /dev/null +++ b/public/info.svg @@ -0,0 +1,10 @@ + + + + + \ No newline at end of file diff --git a/public/medal.svg b/public/medal.svg new file mode 100644 index 0000000..883986c --- /dev/null +++ b/public/medal.svg @@ -0,0 +1,20 @@ + + + + + + + + + \ No newline at end of file diff --git a/public/messanging.webp b/public/messanging.webp new file mode 100644 index 0000000..f4a0422 Binary files /dev/null and b/public/messanging.webp differ diff --git a/public/payments.svg b/public/payments.svg new file mode 100644 index 0000000..c87f470 --- /dev/null +++ b/public/payments.svg @@ -0,0 +1,302 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/timerBackground.png b/public/timerBackground.png new file mode 100644 index 0000000..f253d45 Binary files /dev/null and b/public/timerBackground.png differ diff --git a/public/understanding.webp b/public/understanding.webp new file mode 100644 index 0000000..8a1db4d Binary files /dev/null and b/public/understanding.webp differ diff --git a/public/user1.webp b/public/user1.webp new file mode 100644 index 0000000..ec9f152 Binary files /dev/null and b/public/user1.webp differ diff --git a/public/user2.webp b/public/user2.webp new file mode 100644 index 0000000..4159e23 Binary files /dev/null and b/public/user2.webp differ diff --git a/public/user3.webp b/public/user3.webp new file mode 100644 index 0000000..b752c17 Binary files /dev/null and b/public/user3.webp differ diff --git a/public/wrapped-gift.webp b/public/wrapped-gift.webp new file mode 100644 index 0000000..0187815 Binary files /dev/null and b/public/wrapped-gift.webp differ diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index 331b8dc..9522749 100755 --- 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 { {/* Test Routes End */} + {/* Email Letters */} + } + /> + } + /> + {/* Email Letters End */} + } diff --git a/src/components/StripePage/ApplePayButton/index.tsx b/src/components/StripePage/ApplePayButton/index.tsx index abf3c9a..201ec02 100644 --- 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( diff --git a/src/components/pages/EmailLetters/MarketingLanding/components/ComparePrices/index.tsx b/src/components/pages/EmailLetters/MarketingLanding/components/ComparePrices/index.tsx new file mode 100644 index 0000000..5427f4b --- /dev/null +++ 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 ( +
+
+
+ + old price + +
+
+

up to $13.67

+
+
+
+
free
+
+ + new price + +
+
+

$0

+
+
+
+ ); +} + +export default ComparePrices; diff --git a/src/components/pages/EmailLetters/MarketingLanding/components/ComparePrices/styles.module.css b/src/components/pages/EmailLetters/MarketingLanding/components/ComparePrices/styles.module.css new file mode 100644 index 0000000..2b1814e --- /dev/null +++ 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; +} diff --git a/src/components/pages/EmailLetters/MarketingLanding/components/LastWeek/index.tsx b/src/components/pages/EmailLetters/MarketingLanding/components/LastWeek/index.tsx new file mode 100644 index 0000000..e252cad --- /dev/null +++ b/src/components/pages/EmailLetters/MarketingLanding/components/LastWeek/index.tsx @@ -0,0 +1,14 @@ +import styles from "./styles.module.css"; + +function LastWeek() { + return ( +
+

+ Last week alone 2000+ people got this relationship guide +

+ Info +
+ ); +} + +export default LastWeek; diff --git a/src/components/pages/EmailLetters/MarketingLanding/components/LastWeek/styles.module.css b/src/components/pages/EmailLetters/MarketingLanding/components/LastWeek/styles.module.css new file mode 100644 index 0000000..afa1dfa --- /dev/null +++ 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; +} diff --git a/src/components/pages/EmailLetters/MarketingLanding/components/MoneyBack/index.tsx b/src/components/pages/EmailLetters/MarketingLanding/components/MoneyBack/index.tsx new file mode 100644 index 0000000..67c02df --- /dev/null +++ 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 ( +
+ + Money-back guarantee + + Ok +

+ 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. +

+
+ ); +} + +export default MoneyBack; diff --git a/src/components/pages/EmailLetters/MarketingLanding/components/MoneyBack/styles.module.css b/src/components/pages/EmailLetters/MarketingLanding/components/MoneyBack/styles.module.css new file mode 100644 index 0000000..2323a41 --- /dev/null +++ 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; +} diff --git a/src/components/pages/EmailLetters/MarketingLanding/components/SpecialOfferBanner/index.tsx b/src/components/pages/EmailLetters/MarketingLanding/components/SpecialOfferBanner/index.tsx new file mode 100644 index 0000000..e2ae749 --- /dev/null +++ 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 ( +
+ Wrapped Gift +
+ + Special Offer! + +

Everything for free. Trial include!

+
+
+ ); +} + +export default SpecialOfferBanner; diff --git a/src/components/pages/EmailLetters/MarketingLanding/components/SpecialOfferBanner/styles.module.css b/src/components/pages/EmailLetters/MarketingLanding/components/SpecialOfferBanner/styles.module.css new file mode 100644 index 0000000..03f7eda --- /dev/null +++ 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%; +} diff --git a/src/components/pages/EmailLetters/MarketingLanding/index.tsx b/src/components/pages/EmailLetters/MarketingLanding/index.tsx new file mode 100644 index 0000000..a1a6d1b --- /dev/null +++ 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 ( +
+ +
+ + Hey, {zodiacSign} Sun 👋 + +

+ Your wellness and happiness are key for us! +

+ About plan + Highlights of your plan: + Messanging + Horoscope phone + Guide + Understanding + + + Customer reviews + + + Over <span style={{ color: "#6a3aa2" }}>247 254</span> happy customers + + + + + Payments +
+ + Continue + +
+
+
+ ); +} + +export default MarketingLanding; diff --git a/src/components/pages/EmailLetters/MarketingLanding/styles.module.css b/src/components/pages/EmailLetters/MarketingLanding/styles.module.css new file mode 100644 index 0000000..0c9d8c8 --- /dev/null +++ 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% + ); +} diff --git a/src/components/pages/EmailLetters/MarketingTrialPayment/components/ReservedTimer/index.tsx b/src/components/pages/EmailLetters/MarketingTrialPayment/components/ReservedTimer/index.tsx new file mode 100644 index 0000000..bcac6a6 --- /dev/null +++ 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 ( +
+ Timer background +
+ Reserved for +
+ {getMinutes()}:{getSeconds()} +
+
+
+ ); +} + +export default ReservedTimer; diff --git a/src/components/pages/EmailLetters/MarketingTrialPayment/components/ReservedTimer/styles.module.css b/src/components/pages/EmailLetters/MarketingTrialPayment/components/ReservedTimer/styles.module.css new file mode 100644 index 0000000..9e1171f --- /dev/null +++ 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; +} diff --git a/src/components/pages/EmailLetters/MarketingTrialPayment/index.tsx b/src/components/pages/EmailLetters/MarketingTrialPayment/index.tsx new file mode 100644 index 0000000..43113f9 --- /dev/null +++ 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(false); + + const openStripeModal = () => { + setIsOpenPaymentModal(true); + }; + + const handleCloseModal = () => { + setIsOpenPaymentModal(false); + }; + + return ( + <> + + + +
+
+
Special Offer
+ + Start your 7-day trial + +

No pressure. Cancel anytime

+
+

Total today:

+

$0

+
+
+
+

Code applied!

+ +
+
+

+ Your cost per 2 weeks after trial +

+

+ $29 + $19 +

+
+

Save $10 every period

+
+

+ You will be charged only $0 for your 7-day trial.{" "} + Subscription renews automatically until cancelled. You{" "} + can cancel at any time before the end of the trial. +

+ + Credit card +

Get access

+ +

+ 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 +

+
+
+ + ); +} + +export default MarketingTrialPayment; diff --git a/src/components/pages/EmailLetters/MarketingTrialPayment/styles.module.css b/src/components/pages/EmailLetters/MarketingTrialPayment/styles.module.css new file mode 100644 index 0000000..d718370 --- /dev/null +++ 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); +} diff --git a/src/components/pages/TrialPayment/components/PaymentMethodsChoice/styles.module.css b/src/components/pages/TrialPayment/components/PaymentMethodsChoice/styles.module.css index fb9e06c..bcdd5ae 100644 --- 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 { diff --git a/src/components/pages/TrialPayment/components/PointsList/index.tsx b/src/components/pages/TrialPayment/components/PointsList/index.tsx new file mode 100644 index 0000000..2189ed0 --- /dev/null +++ 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 ( +
+ + {title} + +
    + {points.map((point, index) => ( +
  • + Check mark + {point} +
    • + ))} +
+
+ ); +} + +export default PointsList; diff --git a/src/components/pages/TrialPayment/components/YouGet/styles.module.css b/src/components/pages/TrialPayment/components/PointsList/styles.module.css old mode 100755 new mode 100644 similarity index 100% rename from src/components/pages/TrialPayment/components/YouGet/styles.module.css rename to src/components/pages/TrialPayment/components/PointsList/styles.module.css diff --git a/src/components/pages/TrialPayment/components/Reviews/Review.tsx b/src/components/pages/TrialPayment/components/Reviews/Review.tsx index cebf9fb..39625d6 100755 --- 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 (
-
- {username.slice(0, 2)} +
+ {!image?.length && {username.slice(0, 2)}} + {!!image?.length && ( + Customer Avatar + )}
@@ -21,16 +20,18 @@ function Review({ username, date, text, mark }: IReviewProps) {

{date}

- + }} + > + )}
diff --git a/src/components/pages/TrialPayment/components/Reviews/index.tsx b/src/components/pages/TrialPayment/components/Reviews/index.tsx index 2af3efd..2c72054 100755 --- 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 (
- - Users love us -
    {reviews.map((review, index) => (
  • diff --git a/src/components/pages/TrialPayment/components/Reviews/styles.module.css b/src/components/pages/TrialPayment/components/Reviews/styles.module.css index e839398..bc1315f 100755 --- 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; +} diff --git a/src/components/pages/TrialPayment/components/YouGet/index.tsx b/src/components/pages/TrialPayment/components/YouGet/index.tsx deleted file mode 100755 index 323b6af..0000000 --- a/src/components/pages/TrialPayment/components/YouGet/index.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import Title from "@/components/Title"; -import styles from "./styles.module.css"; - -function YouGet() { - return ( -
    - - What you get - -
      -
    • - Check mark - Your personalised plan -
      • -
    • - Check mark - 1:1 advice from your own astrologer -
      • -
    • - Check mark - Finding the most compatible partner -
      • -
    • - Check mark - Insights into your relationship patterns, and emotional and sexual - needs -
      • -
    • - Check mark - Better understanding of yourself -
      • -
    -
    - ); -} - -export default YouGet; diff --git a/src/components/pages/TrialPayment/index.tsx b/src/components/pages/TrialPayment/index.tsx index 05a86c4..94513fd 100755 --- 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 (
    - +
    @@ -158,8 +164,15 @@ function TrialPaymentPage() { buttonClick={openStripeModal} singleOrWithPartner={singleOrWithPartner} /> - - + + Users love us + + +
    diff --git a/src/data/pointsLists.ts b/src/data/pointsLists.ts new file mode 100644 index 0000000..f15e221 --- /dev/null +++ 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", +]; diff --git a/src/data/reviews.ts b/src/data/reviews.ts index a661646..2ce568d 100755 --- 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", + }, +]; diff --git a/src/routes.ts b/src/routes.ts index 7b67cfb..8f35750 100755 --- 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()];