186 lines
11 KiB
TypeScript
186 lines
11 KiB
TypeScript
import { combineStyles } from "@/services/styles";
|
||
import styles from "./styles.module.scss";
|
||
import Title from "@/components/Title";
|
||
import GivePersonalizedPlan from "../../components/GivePersonalizedPlan";
|
||
import AdviceFromAstrologer from "../../components/AdviceFromAstrologer";
|
||
import FindingPartner from "../../components/FindingPartner";
|
||
import InsightsRelationship from "../../components/InsightsRelationship";
|
||
import UnderstandingYourself from "../../components/UnderstandingYourself";
|
||
import PriceComparison from "../../components/PriceComparison";
|
||
import PlanIncludes from "../../components/PlanIncludes";
|
||
import Reviews from "../../components/Reviews";
|
||
import CustomerCounter from "../../components/CustomerCounter";
|
||
import StatisticsBanner from "../../components/StatisticsBanner";
|
||
import MoneyBackGuarantee from "../../components/MoneyBackGuarantee";
|
||
import GuaranteedSecurityPayments from "../../components/GuaranteedSecurityPayments";
|
||
import Payments from "../../components/Payments";
|
||
import Button from "../../components/Button";
|
||
import { images } from "../../data";
|
||
import { useNavigate } from "react-router-dom";
|
||
import routes from "@/routes";
|
||
import { usePaywall } from "@/hooks/paywall/usePaywall";
|
||
import { EPlacementKeys } from "@/api/resources/Paywall";
|
||
import BlurComponent from "@/components/BlurComponent";
|
||
|
||
const features = [
|
||
{
|
||
text: "Unlimited daily / weekly / monthly / yearly horoscopes"
|
||
},
|
||
{
|
||
text: "Astrology lessons and articles inside the app"
|
||
},
|
||
{
|
||
text: "Beauty / health / travel and more calendars"
|
||
},
|
||
{
|
||
text: "Compatibility check with zodiac signs inside the app"
|
||
}
|
||
];
|
||
|
||
function MarketingLanding() {
|
||
const navigate = useNavigate();
|
||
const { products, getText } = usePaywall({
|
||
placementKey: EPlacementKeys["aura.placement.email.marketing"],
|
||
});
|
||
|
||
const handleContinue = () => {
|
||
navigate(routes.client.emailMarketingV1SpecialOffer());
|
||
}
|
||
|
||
return (
|
||
<div className={styles.container}>
|
||
{/* Background elements */}
|
||
<svg className={combineStyles(styles.backgroundElement, styles.backgroundElement1)} width="169" height="169" viewBox="0 0 169 169" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<circle cx="84.5" cy="84.5" r="84.5" fill="#5956E9" />
|
||
</svg>
|
||
<img className={combineStyles(styles.backgroundElement, styles.backgroundElement2)} src={images("gift-big.png")} alt="Gift" />
|
||
|
||
<Title className={combineStyles(styles.title, styles.titleSpecialOffer)} variant="h1">
|
||
<>
|
||
<img className={combineStyles(styles.backgroundElement, styles.backgroundElement3)} src={images("gift-small.png")} alt="Gift" />
|
||
Special Offer!
|
||
</>
|
||
</Title>
|
||
<p className={combineStyles(styles.description, styles.descriptionSpecialOffer)}>
|
||
<svg className={combineStyles(styles.backgroundElement, styles.backgroundElement4)} width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<circle cx="9" cy="9" r="9" fill="#FFDC60" />
|
||
</svg>
|
||
Everything for free. Trial include!
|
||
</p>
|
||
<Title className={combineStyles(styles.title, styles.titleHey)} variant="h1">
|
||
Hey, Sun <span>👋</span>
|
||
</Title>
|
||
<p className={combineStyles(styles.description, styles.descriptionHey)}>Your wellness and happiness are key for us!</p>
|
||
<GivePersonalizedPlan />
|
||
<Title className={combineStyles(styles.title, styles.titleHighlights)} variant="h1">
|
||
<svg className={combineStyles(styles.backgroundElement, styles.backgroundElement5)} width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<circle cx="15.5" cy="15.5" r="15.5" fill="#DEBA00" />
|
||
</svg>
|
||
Highlights of your plan:
|
||
</Title>
|
||
<div className={styles["relative-container"]}>
|
||
<svg className={combineStyles(styles.backgroundElement, styles.backgroundElement6)} width="169" height="169" viewBox="0 0 169 169" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<circle cx="84.5" cy="84.5" r="84.5" fill="#5956e961" />
|
||
</svg>
|
||
<svg className={combineStyles(styles.backgroundElement, styles.backgroundElement7)} width="183" height="352" viewBox="0 0 183 352" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<g filter="url(#filter0_b_20_191)">
|
||
<path d="M183 272.471C183 316.393 145.105 352 98.3585 352C51.6123 352 13.717 316.393 13.717 272.471C13.717 228.548 -23.0125 0 23.7337 0C70.4799 0 183 228.548 183 272.471Z" fill="#2656B0" fillOpacity="0.4" />
|
||
</g>
|
||
<defs>
|
||
<filter id="filter0_b_20_191" x="-22.1" y="-22.1" width="227.2" height="396.2" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||
<feGaussianBlur in="BackgroundImageFix" stdDeviation="11.05" />
|
||
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_20_191" />
|
||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_20_191" result="shape" />
|
||
</filter>
|
||
</defs>
|
||
</svg>
|
||
<AdviceFromAstrologer />
|
||
</div>
|
||
<FindingPartner />
|
||
<InsightsRelationship />
|
||
<div className={styles["relative-container"]}>
|
||
<svg className={combineStyles(styles.backgroundElement, styles.backgroundElement8)} width="132" height="261" viewBox="0 0 132 261" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<g filter="url(#filter0_f_13_1433)">
|
||
<circle cx="1.5" cy="130.5" r="84.5" fill="#FFDC60" />
|
||
</g>
|
||
<defs>
|
||
<filter id="filter0_f_13_1433" x="-128.7" y="0.299999" width="260.4" height="260.4" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||
<feGaussianBlur stdDeviation="22.85" result="effect1_foregroundBlur_13_1433" />
|
||
</filter>
|
||
</defs>
|
||
</svg>
|
||
<svg className={combineStyles(styles.backgroundElement, styles.backgroundElement9)} width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<circle cx="10.5" cy="10.5" r="10.5" fill="#993CFE" />
|
||
</svg>
|
||
<svg className={combineStyles(styles.backgroundElement, styles.backgroundElement10)} width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<circle cx="10" cy="10" r="10" fill="#FFDC60" />
|
||
</svg>
|
||
<svg className={combineStyles(styles.backgroundElement, styles.backgroundElement11)} width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<circle cx="17.5" cy="17.5" r="17.5" fill="#5956E9" />
|
||
</svg>
|
||
|
||
<UnderstandingYourself />
|
||
</div>
|
||
<PriceComparison oldPrice={getText("text.old.price", {}) as string} newPrice={`${((products[0]?.trialPrice || 0) / 100).toFixed(2)}`} />
|
||
<PlanIncludes title="Your plan also includes:" features={features} />
|
||
<Reviews />
|
||
<CustomerCounter count={267583} />
|
||
<StatisticsBanner count={2000} />
|
||
<div className={styles["relative-container"]}>
|
||
<svg className={combineStyles(styles.backgroundElement, styles.backgroundElement12)} width="261" height="261" viewBox="0 0 261 261" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<g filter="url(#filter0_f_20_555)">
|
||
<circle cx="130.5" cy="130.5" r="84.5" fill="#FFDC60" />
|
||
</g>
|
||
<defs>
|
||
<filter id="filter0_f_20_555" x="0.299999" y="0.299999" width="260.4" height="260.4" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||
<feGaussianBlur stdDeviation="22.85" result="effect1_foregroundBlur_20_555" />
|
||
</filter>
|
||
</defs>
|
||
</svg>
|
||
<svg className={combineStyles(styles.backgroundElement, styles.backgroundElement13)} width="216" height="216" viewBox="0 0 216 216" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<g filter="url(#filter0_f_20_557)">
|
||
<circle cx="108" cy="108" r="62" fill="#ADDBFC" />
|
||
</g>
|
||
<defs>
|
||
<filter id="filter0_f_20_557" x="0.299999" y="0.299999" width="215.4" height="215.4" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||
<feGaussianBlur stdDeviation="22.85" result="effect1_foregroundBlur_20_557" />
|
||
</filter>
|
||
</defs>
|
||
</svg>
|
||
<svg className={combineStyles(styles.backgroundElement, styles.backgroundElement14)} width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<g filter="url(#filter0_f_20_559)">
|
||
<circle cx="80" cy="80" r="34" fill="#FCADCE" />
|
||
</g>
|
||
<defs>
|
||
<filter id="filter0_f_20_559" x="0.299999" y="0.299999" width="159.4" height="159.4" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||
<feGaussianBlur stdDeviation="22.85" result="effect1_foregroundBlur_20_559" />
|
||
</filter>
|
||
</defs>
|
||
</svg>
|
||
|
||
|
||
<MoneyBackGuarantee />
|
||
</div>
|
||
<GuaranteedSecurityPayments />
|
||
<Payments />
|
||
<div className={styles.buttonContainer}>
|
||
<BlurComponent isActiveBlur={true}>
|
||
<Button className={styles.buttonContinue} onClick={handleContinue}>
|
||
Continue
|
||
</Button>
|
||
</BlurComponent>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default MarketingLanding |