112 lines
3.8 KiB
TypeScript
112 lines
3.8 KiB
TypeScript
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";
|
|
import { usePaywall } from "@/hooks/paywall/usePaywall";
|
|
import { EPlacementKeys } from "@/api/resources/Paywall";
|
|
|
|
function MarketingLanding() {
|
|
const birthdate = useSelector(selectors.selectBirthdate);
|
|
const zodiacSign = getZodiacSignByDate(birthdate);
|
|
const navigate = useNavigate();
|
|
const { paywall, products, getText } = usePaywall({
|
|
placementKey: EPlacementKeys["aura.placement.email.marketing"],
|
|
});
|
|
|
|
const handleNext = () => {
|
|
navigate(routes.client.email("marketing-trial-payment"));
|
|
};
|
|
|
|
return (
|
|
<section className={`${styles.page} page`}>
|
|
<SpecialOfferBanner title={paywall?.name || ""} />
|
|
<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, 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"
|
|
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="/understanding.webp"
|
|
alt="Understanding"
|
|
style={{ minHeight: "323px" }}
|
|
/>
|
|
<ComparePrices
|
|
oldPrice={getText("text.old.price", {}) as string}
|
|
newPrice={`${((products[0]?.trialPrice || 0) / 100).toFixed(2)}`}
|
|
/>
|
|
<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"
|
|
style={{ minHeight: "140px" }}
|
|
/>
|
|
<footer className={styles.footer}>
|
|
<MainButton className={styles.button} onClick={handleNext}>
|
|
Continue
|
|
</MainButton>
|
|
</footer>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default MarketingLanding;
|