diff --git a/messages/en.json b/messages/en.json index 0bac1d5..29c7641 100644 --- a/messages/en.json +++ b/messages/en.json @@ -343,5 +343,54 @@ "description": "Most credits per dollar" } } + }, + "EmailMarketing": { + "Compatibility": { + "v1": { + "Landing": { + "title": "Special Offer!", + "description": "Everything for free. Trial include!", + "title-hey": "Hey, Sun 👋", + "description-hey": "Your wellness and happiness are key for us!", + "personalized-plan-title": "So we decided to give you your personalized plan and access to the trial of our app", + "personalized-plan-free": "FOR FREE!", + "title-highlights": "Highlights of your plan:", + "personal-astrologer-advice": "1:1 Advice from your personal astrologer", + "finding-compatible-partner": "Finding the most compatible partner", + "relationship-patterns-insights": "Insights into your relationship patterns, and emotional and sexual needs", + "better-understanding-yourself": "Better understanding of yourself and your needs", + "old-price-label": "OLD PRICE", + "new-price-label": "NEW PRICE", + "plan-includes-title": "Your plan also includes:", + "plan-includes-unlimited-horoscopes": "Unlimited daily / weekly / monthly / yearly horoscopes", + "plan-includes-astrology-lessons": "Astrology lessons and articles inside the app", + "plan-includes-lifestyle-calendars": "Beauty / health / travel and more calendars", + "plan-includes-compatibility-check": "Compatibility check with zodiac signs inside the app", + "review-1": "Horoscope tells realistic facts about day to day life, which can be easily relatable. It shows direction.", + "review-2": "It makes me feel safe, seeing, warm and smart.", + "review-3": "I love that we have the \"my profile\" option. I love learning about myself.", + "circular-text-image": "circular-text-en.png", + "statistics-banner-text": "Last week alone got this relationship guide", + "statistics-banner-count": "{count}+ people", + "money-back-guarantee-title": "Money-back guarantee", + "money-back-guarantee-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.", + "guaranteed-security-payments": "Guaranteed security payments", + "button-continue": "Continue", + "old-price": "up to {oldPrice}" + }, + "SpecialOffer": { + "title": "Special Offer!", + "start-trial": "Start your {days}-day trial", + "cancel-anytime": "No pressure. Cancel anytime", + "policy": "By continuing you agree that if you don't cancel prior to the end of the {days}-days trial, you will automatically be charged {price} every 2 weeks until you cancel in settings. Learn more about cancellation and refund policy in Subscription terms", + "button-continue": "Continue", + "pricing-summary-total-today": "Total today:", + "pricing-summary-code-applied": "Code applied!", + "pricing-summary-cost-after-trial": "Your cost per 2 weeks after trial", + "pricing-summary-trial-description": "You will be charged only {totalToday} for your {trialDuration}-day trial. Subscription renews automatically until cancelled. You can cancel at any time before the end of the trial.", + "reserved-for": "Reserved for {time}" + } + } + } } } diff --git a/public/email-marketing/comp/v1/andi36_11.png b/public/email-marketing/comp/v1/andi36_11.png new file mode 100644 index 0000000..d6b6b08 Binary files /dev/null and b/public/email-marketing/comp/v1/andi36_11.png differ diff --git a/public/email-marketing/comp/v1/aramaska.png b/public/email-marketing/comp/v1/aramaska.png new file mode 100644 index 0000000..833d526 Binary files /dev/null and b/public/email-marketing/comp/v1/aramaska.png differ diff --git a/public/email-marketing/comp/v1/circular-text-en.png b/public/email-marketing/comp/v1/circular-text-en.png new file mode 100644 index 0000000..8605ac0 Binary files /dev/null and b/public/email-marketing/comp/v1/circular-text-en.png differ diff --git a/public/email-marketing/comp/v1/gift-big.png b/public/email-marketing/comp/v1/gift-big.png new file mode 100644 index 0000000..74b1121 Binary files /dev/null and b/public/email-marketing/comp/v1/gift-big.png differ diff --git a/public/email-marketing/comp/v1/gift-small.png b/public/email-marketing/comp/v1/gift-small.png new file mode 100644 index 0000000..761163d Binary files /dev/null and b/public/email-marketing/comp/v1/gift-small.png differ diff --git a/public/email-marketing/comp/v1/guarantee.svg b/public/email-marketing/comp/v1/guarantee.svg new file mode 100644 index 0000000..4a6bd33 --- /dev/null +++ b/public/email-marketing/comp/v1/guarantee.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/email-marketing/comp/v1/guaranteed.svg b/public/email-marketing/comp/v1/guaranteed.svg new file mode 100644 index 0000000..e1f047e --- /dev/null +++ b/public/email-marketing/comp/v1/guaranteed.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/public/email-marketing/comp/v1/hand-with-eye.svg b/public/email-marketing/comp/v1/hand-with-eye.svg new file mode 100644 index 0000000..c3dbd64 --- /dev/null +++ b/public/email-marketing/comp/v1/hand-with-eye.svg @@ -0,0 +1,279 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/email-marketing/comp/v1/messages.svg b/public/email-marketing/comp/v1/messages.svg new file mode 100644 index 0000000..10e1bc1 --- /dev/null +++ b/public/email-marketing/comp/v1/messages.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/email-marketing/comp/v1/patterso.png b/public/email-marketing/comp/v1/patterso.png new file mode 100644 index 0000000..bd3e9a9 Binary files /dev/null and b/public/email-marketing/comp/v1/patterso.png differ diff --git a/public/email-marketing/comp/v1/payments.png b/public/email-marketing/comp/v1/payments.png new file mode 100644 index 0000000..6c60729 Binary files /dev/null and b/public/email-marketing/comp/v1/payments.png differ diff --git a/public/email-marketing/comp/v1/relationships.svg b/public/email-marketing/comp/v1/relationships.svg new file mode 100644 index 0000000..9bf0d09 --- /dev/null +++ b/public/email-marketing/comp/v1/relationships.svg @@ -0,0 +1,390 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/email-marketing/comp/v1/relieved-face.svg b/public/email-marketing/comp/v1/relieved-face.svg new file mode 100644 index 0000000..7d8bebd --- /dev/null +++ b/public/email-marketing/comp/v1/relieved-face.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/public/email-marketing/comp/v1/revolving-hearts.svg b/public/email-marketing/comp/v1/revolving-hearts.svg new file mode 100644 index 0000000..42dd5db --- /dev/null +++ b/public/email-marketing/comp/v1/revolving-hearts.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/email-marketing/comp/v1/smartphone.svg b/public/email-marketing/comp/v1/smartphone.svg new file mode 100644 index 0000000..5c24c44 --- /dev/null +++ b/public/email-marketing/comp/v1/smartphone.svg @@ -0,0 +1,706 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/email-marketing/comp/v1/sparkling-heart.svg b/public/email-marketing/comp/v1/sparkling-heart.svg new file mode 100644 index 0000000..ef63348 --- /dev/null +++ b/public/email-marketing/comp/v1/sparkling-heart.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/public/email-marketing/comp/v1/star.png b/public/email-marketing/comp/v1/star.png new file mode 100644 index 0000000..eb4910b Binary files /dev/null and b/public/email-marketing/comp/v1/star.png differ diff --git a/public/email-marketing/comp/v1/stars.svg b/public/email-marketing/comp/v1/stars.svg new file mode 100644 index 0000000..b64dc79 --- /dev/null +++ b/public/email-marketing/comp/v1/stars.svg @@ -0,0 +1,138 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/email-marketing/comp/v1/yellow-heart.svg b/public/email-marketing/comp/v1/yellow-heart.svg new file mode 100644 index 0000000..19cd17a --- /dev/null +++ b/public/email-marketing/comp/v1/yellow-heart.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/email-marketing/comp/v1/zodiac-in-space.svg b/public/email-marketing/comp/v1/zodiac-in-space.svg new file mode 100644 index 0000000..6d0a76c --- /dev/null +++ b/public/email-marketing/comp/v1/zodiac-in-space.svg @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/[locale]/(email-marketing)/em/(compatibility)/c/v1/landing/page.module.scss b/src/app/[locale]/(email-marketing)/em/(compatibility)/c/v1/landing/page.module.scss new file mode 100644 index 0000000..f773a2e --- /dev/null +++ b/src/app/[locale]/(email-marketing)/em/(compatibility)/c/v1/landing/page.module.scss @@ -0,0 +1,150 @@ +.container { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + max-width: 460px; + margin: 0 auto; + padding-bottom: 140px; + overflow-x: hidden; + height: fit-content; + min-height: 100dvh; +} + +.backgroundElement { + position: absolute; + z-index: -1; +} + +.backgroundElement1 { + top: 25px; + right: -99px; +} + +.backgroundElement2 { + width: 37px; + height: auto; + top: 116px; + right: 16px; +} + +.backgroundElement3 { + top: 8px; + left: 258px; +} + +.backgroundElement4 { + top: 13px; + left: 4px; +} + +.backgroundElement5 { + top: -40px; + left: 39px; +} + +.backgroundElement6 { + top: -40px; + right: -85px; +} + +.backgroundElement7 { + top: -35px; + left: -60px; +} + +.backgroundElement8 { + top: -50px; + left: 0; +} + +.backgroundElement9 { + top: 100px; + right: 8px; +} + +.backgroundElement10 { + top: 205px; + left: 40px; +} + +.backgroundElement11 { + bottom: 30px; + left: 30px; +} + +.backgroundElement12 { + bottom: -70px; + left: -130px; +} + +.backgroundElement13 { + top: -10px; + right: -30px; +} + +.backgroundElement14 { + bottom: -50px; + right: -30px; +} + +.title { + position: relative; + margin-bottom: 0; + line-height: 106%; + font-weight: 600; + padding: 0; +} + +.titleSpecialOffer { + font-size: 65px; + margin-top: 25px; + padding-left: 18px; + padding-right: 18px; +} + +.titleHighlights { + font-size: 50px; + padding-left: 17px; + font-weight: 500; + width: 100%; + margin-top: 52px; +} + +.description { + position: relative; + width: 100%; + line-height: 125%; + padding: 0; + font-weight: 500; +} + +.descriptionSpecialOffer { + font-size: 17px; + margin-top: 2px; + padding-left: 18px; +} + +.descriptionHey { + font-size: 14px; + margin-top: 3px; + padding-left: 34px; +} + +.titleHey { + font-size: 28px; + font-weight: 700; + padding-left: 34px; + width: 100%; + margin-top: 57px; + + & > span { + font-size: 22px; + } +} + +.relative-container { + position: relative; + width: 100%; +} diff --git a/src/app/[locale]/(email-marketing)/em/(compatibility)/c/v1/landing/page.tsx b/src/app/[locale]/(email-marketing)/em/(compatibility)/c/v1/landing/page.tsx new file mode 100644 index 0000000..107248a --- /dev/null +++ b/src/app/[locale]/(email-marketing)/em/(compatibility)/c/v1/landing/page.tsx @@ -0,0 +1,417 @@ +import Image from "next/image"; +import { getTranslations } from "next-intl/server"; +import clsx from "clsx"; + +import { + AdviceFromAstrologer, + CustomerCounter, + FindingPartner, + GivePersonalizedPlan, + GuaranteedSecurityPayments, + InsightsRelationship, + LandingButtonWrapper, + MoneyBackGuarantee, + Payments, + PlanIncludes, + PriceComparison, + Reviews, + StatisticsBanner, + UnderstandingYourself, +} from "@/components/domains/email-marketing/compatibility/v1"; +import { Typography } from "@/components/ui"; +import { loadFunnelPaymentById } from "@/entities/session/funnel/loaders"; +import { IFunnelPaymentPlacement } from "@/entities/session/funnel/types"; +import { emailMarketingCompV1Images } from "@/shared/constants/images"; +import { translatePathEmailMarketingCompatibilityV1 } from "@/shared/constants/translate"; +import { getFormattedPrice } from "@/shared/utils/price"; +import { Currency, ELocalesPlacement } from "@/types"; + +import styles from "./page.module.scss"; + +const payload = { + funnel: ELocalesPlacement.EmailMarketingCompatibilityV2, +}; + +export default async function EmailMarketingCompatibilityV1Landing() { + const t = await getTranslations( + translatePathEmailMarketingCompatibilityV1("Landing") + ); + + const payment = (await loadFunnelPaymentById( + payload, + "main" + )) as IFunnelPaymentPlacement | null; + + const variant = payment?.variants?.[0]; + const currency = payment?.currency || Currency.USD; + + const features = [ + { + text: t("plan-includes-unlimited-horoscopes"), + }, + { + text: t("plan-includes-astrology-lessons"), + }, + { + text: t("plan-includes-lifestyle-calendars"), + }, + { + text: t("plan-includes-compatibility-check"), + }, + ]; + + return ( +
+ + + + Gift + + + <> + Gift + {t("title")} + + + + + + + + {t("description")} + + + + {t("title-hey")} + + + {t("description-hey")} + + + + + + + + + {t("title-highlights")} + + +
+ + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + +
+ ); +} diff --git a/src/app/[locale]/(email-marketing)/em/(compatibility)/c/v1/special-offer/page.module.scss b/src/app/[locale]/(email-marketing)/em/(compatibility)/c/v1/special-offer/page.module.scss new file mode 100644 index 0000000..c378f35 --- /dev/null +++ b/src/app/[locale]/(email-marketing)/em/(compatibility)/c/v1/special-offer/page.module.scss @@ -0,0 +1,61 @@ +.container { + width: 100%; + max-width: 560px; + height: fit-content; + min-height: 100dvh; + // overflow-x: hidden; + display: flex; + flex-direction: column; + align-items: center; + background-color: #5956e9; + color: #fff; + padding-top: 39px; + margin: 0 auto; +} + +.title { + line-height: 125%; +} + +.content { + width: 100%; + height: fit-content; + background-color: #fff; + border-radius: 30px 30px 0 0; + min-height: calc(100dvh - 39px - 26px * 1.25 - 29px); + margin-top: 22px; + padding: 53px 18px 160px; + color: #000; + display: flex; + flex-direction: column; + align-items: center; + + & > .contentTitle { + font-size: 23px; + line-height: 125%; + } + + & > .contentDescription { + display: flex; + align-items: center; + gap: 8px; + font-size: 18px; + line-height: 125%; + margin-top: 21px; + } + + & > .contentPolicy { + font-size: 12px; + line-height: 125%; + font-weight: 300; + margin-bottom: 0; + margin-top: 39px; + text-align: center; + color: #6f6d6d; + } + + & > .button { + margin-top: 59px; + max-width: 307px; + } +} diff --git a/src/app/[locale]/(email-marketing)/em/(compatibility)/c/v1/special-offer/page.tsx b/src/app/[locale]/(email-marketing)/em/(compatibility)/c/v1/special-offer/page.tsx new file mode 100644 index 0000000..d866b8b --- /dev/null +++ b/src/app/[locale]/(email-marketing)/em/(compatibility)/c/v1/special-offer/page.tsx @@ -0,0 +1,116 @@ +import { getTranslations } from "next-intl/server"; + +import { + PricingSummary, + SpecialOfferButtonWrapper, +} from "@/components/domains/email-marketing/compatibility/v1"; +import { Typography } from "@/components/ui"; +import { loadFunnelPaymentById } from "@/entities/session/funnel/loaders"; +import { IFunnelPaymentPlacement } from "@/entities/session/funnel/types"; +import { translatePathEmailMarketingCompatibilityV1 } from "@/shared/constants/translate"; +import { getFormattedPrice } from "@/shared/utils/price"; +import { Currency, ELocalesPlacement } from "@/types"; + +import styles from "./page.module.scss"; + +const payload = { + funnel: ELocalesPlacement.EmailMarketingCompatibilityV2, +}; + +export default async function SpecialOfferPage() { + const t = await getTranslations( + translatePathEmailMarketingCompatibilityV1("SpecialOffer") + ); + + const payment = (await loadFunnelPaymentById( + payload, + "main" + )) as IFunnelPaymentPlacement | null; + + const trialInterval = payment?.trialInterval || 7; + const variant = payment?.variants?.[0]; + const productId = variant?.id || ""; + const placementId = payment?.placementId || ""; + const paywallId = payment?.paywallId || ""; + const trialPrice = variant?.trialPrice || 0; + const price = variant?.price || 0; + const currency = payment?.currency || Currency.USD; + + return ( +
+ + {t("title")} + +
+ + {t("start-trial", { days: trialInterval })} + + + + + + + + + + + + + + {t("cancel-anytime")} + + + + + + +

+ {t("policy", { + days: trialInterval, + price: getFormattedPrice(price, currency), + })} +

+
+
+ ); +} diff --git a/src/components/domains/email-marketing/compatibility/v1/AdviceFromAstrologer/AdviceFromAstrologer.module.scss b/src/components/domains/email-marketing/compatibility/v1/AdviceFromAstrologer/AdviceFromAstrologer.module.scss new file mode 100644 index 0000000..7245001 --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/AdviceFromAstrologer/AdviceFromAstrologer.module.scss @@ -0,0 +1,16 @@ +.container { + width: 100%; + height: fit-content; + border-radius: 30px; + backdrop-filter: blur(5px); + display: flex; + flex-direction: column; + align-items: center; + margin-top: 32px; + padding: 25px 18px 22px; + background: rgba(225, 225, 225, 0.44); +} + +.messages { + margin-top: 22px; +} diff --git a/src/components/domains/email-marketing/compatibility/v1/AdviceFromAstrologer/AdviceFromAstrologer.tsx b/src/components/domains/email-marketing/compatibility/v1/AdviceFromAstrologer/AdviceFromAstrologer.tsx new file mode 100644 index 0000000..074a44c --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/AdviceFromAstrologer/AdviceFromAstrologer.tsx @@ -0,0 +1,31 @@ +import Image from "next/image"; +import { useTranslations } from "next-intl"; + +import { emailMarketingCompV1Images } from "@/shared/constants/images"; +import { translatePathEmailMarketingCompatibilityV1 } from "@/shared/constants/translate"; + +import { TextWithEmoji } from ".."; + +import styles from "./AdviceFromAstrologer.module.scss"; + +export default function AdviceFromAstrologer() { + const t = useTranslations( + translatePathEmailMarketingCompatibilityV1("Landing") + ); + + return ( +
+ + messages +
+ ); +} diff --git a/src/components/domains/email-marketing/compatibility/v1/CountdownTimer/CountdownTimer.module.scss b/src/components/domains/email-marketing/compatibility/v1/CountdownTimer/CountdownTimer.module.scss new file mode 100644 index 0000000..ef8cf2e --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/CountdownTimer/CountdownTimer.module.scss @@ -0,0 +1,9 @@ +.timer { + background-color: #f95d53; + color: white; + padding: 3px 7px; + border-radius: 23px; + font-size: 13px; + font-weight: 500; + line-height: 125%; +} diff --git a/src/components/domains/email-marketing/compatibility/v1/CountdownTimer/CountdownTimer.tsx b/src/components/domains/email-marketing/compatibility/v1/CountdownTimer/CountdownTimer.tsx new file mode 100644 index 0000000..4644997 --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/CountdownTimer/CountdownTimer.tsx @@ -0,0 +1,20 @@ +"use client"; + +import { useTranslations } from "next-intl"; + +import { useTimer } from "@/hooks/timer/useTimer"; +import { translatePathEmailMarketingCompatibilityV1 } from "@/shared/constants/translate"; + +import styles from "./CountdownTimer.module.scss"; + +export default function CountdownTimer() { + const t = useTranslations( + translatePathEmailMarketingCompatibilityV1("SpecialOffer") + ); + + const { time } = useTimer({ + initialSeconds: 600, + }); + + return {t("reserved-for", { time })}; +} diff --git a/src/components/domains/email-marketing/compatibility/v1/CustomerCounter/CustomerCounter.module.scss b/src/components/domains/email-marketing/compatibility/v1/CustomerCounter/CustomerCounter.module.scss new file mode 100644 index 0000000..75ba73b --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/CustomerCounter/CustomerCounter.module.scss @@ -0,0 +1,88 @@ +.container { + position: relative; + width: 263px; + height: 263px; + // background: #7A6BE2; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin-top: 26px; + box-shadow: + 0px 0px 12px 0px rgba(0, 0, 0, 0.46), + inset 6px 6px 82px 0px rgba(0, 0, 0, 0.25); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} + +.circularText { + position: absolute; + width: calc(100% + 24px); + max-width: none; + height: calc(100% + 24px); + animation: rotate 20s linear infinite; + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-perspective: 1000; + perspective: 1000; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + + svg { + width: 100%; + height: 100%; + -webkit-transform: translateZ(0); + transform: translateZ(0); + } + + text { + fill: white; + font-size: 8px; + font-weight: 600; + -webkit-font-smoothing: antialiased; + + &:nth-of-type(2) { + -webkit-transform: rotate(180deg) translateZ(0); + -moz-transform: rotate(180deg) translateZ(0); + -ms-transform: rotate(180deg) translateZ(0); + -o-transform: rotate(180deg) translateZ(0); + transform: rotate(180deg) translateZ(0); + + -webkit-transform-origin: center center; + -moz-transform-origin: center center; + -ms-transform-origin: center center; + -o-transform-origin: center center; + transform-origin: center center; + } + } +} + +.count { + color: white; + font-size: 37px; + line-height: 41px; + font-weight: bold; + z-index: 1; +} + +@keyframes rotate { + from { + -webkit-transform: rotate(0deg) translateZ(0); + transform: rotate(0deg) translateZ(0); + } + + to { + -webkit-transform: rotate(360deg) translateZ(0); + transform: rotate(360deg) translateZ(0); + } +} + +@-webkit-keyframes rotate { + from { + -webkit-transform: rotate(0deg) translateZ(0); + } + + to { + -webkit-transform: rotate(360deg) translateZ(0); + } +} diff --git a/src/components/domains/email-marketing/compatibility/v1/CustomerCounter/CustomerCounter.tsx b/src/components/domains/email-marketing/compatibility/v1/CustomerCounter/CustomerCounter.tsx new file mode 100644 index 0000000..ee23d68 --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/CustomerCounter/CustomerCounter.tsx @@ -0,0 +1,30 @@ +import Image from "next/image"; +import { useTranslations } from "next-intl"; + +import { emailMarketingCompV1Images } from "@/shared/constants/images"; +import { translatePathEmailMarketingCompatibilityV1 } from "@/shared/constants/translate"; + +import styles from "./CustomerCounter.module.scss"; + +interface CustomerCounterProps { + count: number; +} + +export default function CustomerCounter({ count }: CustomerCounterProps) { + const t = useTranslations( + translatePathEmailMarketingCompatibilityV1("Landing") + ); + + return ( +
+ circular-text-image +
{count}
+
+ ); +} diff --git a/src/components/domains/email-marketing/compatibility/v1/FindingPartner/FindingPartner.module.scss b/src/components/domains/email-marketing/compatibility/v1/FindingPartner/FindingPartner.module.scss new file mode 100644 index 0000000..75cf09f --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/FindingPartner/FindingPartner.module.scss @@ -0,0 +1,16 @@ +.container { + width: 100%; + height: fit-content; + border-radius: 30px; + display: flex; + flex-direction: column; + align-items: center; + margin-top: 32px; + padding: 25px 20px 0; + background: linear-gradient(180deg, #13082b 0%, #401b91 100%); + color: #fff; +} + +.smartphone { + margin-top: 29px; +} diff --git a/src/components/domains/email-marketing/compatibility/v1/FindingPartner/FindingPartner.tsx b/src/components/domains/email-marketing/compatibility/v1/FindingPartner/FindingPartner.tsx new file mode 100644 index 0000000..f3afe93 --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/FindingPartner/FindingPartner.tsx @@ -0,0 +1,32 @@ +import Image from "next/image"; +import { useTranslations } from "next-intl"; + +import { emailMarketingCompV1Images } from "@/shared/constants/images"; +import { translatePathEmailMarketingCompatibilityV1 } from "@/shared/constants/translate"; + +import { TextWithEmoji } from ".."; + +import styles from "./FindingPartner.module.scss"; + +export default function FindingPartner() { + const t = useTranslations( + translatePathEmailMarketingCompatibilityV1("Landing") + ); + + return ( +
+ + smartphone +
+ ); +} diff --git a/src/components/domains/email-marketing/compatibility/v1/GivePersonalizedPlan/GivePersonalizedPlan.module.scss b/src/components/domains/email-marketing/compatibility/v1/GivePersonalizedPlan/GivePersonalizedPlan.module.scss new file mode 100644 index 0000000..d7251de --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/GivePersonalizedPlan/GivePersonalizedPlan.module.scss @@ -0,0 +1,34 @@ +.container { + width: 100%; + height: fit-content; + background-color: #27272e; + color: #fff; + border-radius: 41px; + margin-top: 27px; +} + +.title { + font-size: 21px; + font-weight: 600; + padding: 25px 30px 0; + margin: 0; + line-height: 125%; + + & > span { + color: #7da1ff; + font-weight: 700; + font-size: 24px; + } +} + +.stars { + width: 100%; + object-fit: cover; + margin-top: -46px; +} + +.zodiacs { + width: 100%; + object-fit: cover; + margin-top: -10px; +} diff --git a/src/components/domains/email-marketing/compatibility/v1/GivePersonalizedPlan/GivePersonalizedPlan.tsx b/src/components/domains/email-marketing/compatibility/v1/GivePersonalizedPlan/GivePersonalizedPlan.tsx new file mode 100644 index 0000000..e869604 --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/GivePersonalizedPlan/GivePersonalizedPlan.tsx @@ -0,0 +1,37 @@ +import Image from "next/image"; +import { useTranslations } from "next-intl"; + +import { Typography } from "@/components/ui"; +import { emailMarketingCompV1Images } from "@/shared/constants/images"; +import { translatePathEmailMarketingCompatibilityV1 } from "@/shared/constants/translate"; + +import styles from "./GivePersonalizedPlan.module.scss"; + +export default function GivePersonalizedPlan() { + const t = useTranslations( + translatePathEmailMarketingCompatibilityV1("Landing") + ); + + return ( +
+ + {t("personalized-plan-title")} + {t("personalized-plan-free")} + + stars + stars +
+ ); +} diff --git a/src/components/domains/email-marketing/compatibility/v1/GuaranteedSecurityPayments/GuaranteedSecurityPayments.module.scss b/src/components/domains/email-marketing/compatibility/v1/GuaranteedSecurityPayments/GuaranteedSecurityPayments.module.scss new file mode 100644 index 0000000..d7172a2 --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/GuaranteedSecurityPayments/GuaranteedSecurityPayments.module.scss @@ -0,0 +1,10 @@ +.container { + width: 100%; + max-width: 255px; + display: flex; + align-items: center; + gap: 10px; + font-size: 15px; + line-height: 25px; + margin-top: 30px; +} diff --git a/src/components/domains/email-marketing/compatibility/v1/GuaranteedSecurityPayments/GuaranteedSecurityPayments.tsx b/src/components/domains/email-marketing/compatibility/v1/GuaranteedSecurityPayments/GuaranteedSecurityPayments.tsx new file mode 100644 index 0000000..6b6cee9 --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/GuaranteedSecurityPayments/GuaranteedSecurityPayments.tsx @@ -0,0 +1,27 @@ +import Image from "next/image"; +import { useTranslations } from "next-intl"; + +import { Typography } from "@/components/ui"; +import { emailMarketingCompV1Images } from "@/shared/constants/images"; +import { translatePathEmailMarketingCompatibilityV1 } from "@/shared/constants/translate"; + +import styles from "./GuaranteedSecurityPayments.module.scss"; + +export default function GuaranteedSecurityPayments() { + const t = useTranslations( + translatePathEmailMarketingCompatibilityV1("Landing") + ); + return ( +
+ guaranteed + + {t("guaranteed-security-payments")} + +
+ ); +} diff --git a/src/components/domains/email-marketing/compatibility/v1/InsightsRelationship/InsightsRelationship.module.scss b/src/components/domains/email-marketing/compatibility/v1/InsightsRelationship/InsightsRelationship.module.scss new file mode 100644 index 0000000..3836ae5 --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/InsightsRelationship/InsightsRelationship.module.scss @@ -0,0 +1,16 @@ +.container { + width: 100%; + height: fit-content; + border-radius: 30px; + display: flex; + flex-direction: column; + align-items: center; + margin-top: 32px; + padding: 25px 20px 30px; + background: #fca3fd; + color: #fff; +} + +.image.image { + margin-top: 29px; +} diff --git a/src/components/domains/email-marketing/compatibility/v1/InsightsRelationship/InsightsRelationship.tsx b/src/components/domains/email-marketing/compatibility/v1/InsightsRelationship/InsightsRelationship.tsx new file mode 100644 index 0000000..f402904 --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/InsightsRelationship/InsightsRelationship.tsx @@ -0,0 +1,32 @@ +import Image from "next/image"; +import { useTranslations } from "next-intl"; + +import { emailMarketingCompV1Images } from "@/shared/constants/images"; +import { translatePathEmailMarketingCompatibilityV1 } from "@/shared/constants/translate"; + +import { TextWithEmoji } from ".."; + +import styles from "./InsightsRelationship.module.scss"; + +export default function InsightsRelationship() { + const t = useTranslations( + translatePathEmailMarketingCompatibilityV1("Landing") + ); + + return ( +
+ + relationships +
+ ); +} diff --git a/src/components/domains/email-marketing/compatibility/v1/LandingButtonWrapper/LandingButtonWrapper.module.scss b/src/components/domains/email-marketing/compatibility/v1/LandingButtonWrapper/LandingButtonWrapper.module.scss new file mode 100644 index 0000000..5953a53 --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/LandingButtonWrapper/LandingButtonWrapper.module.scss @@ -0,0 +1,23 @@ +.buttonContainer { + width: 100%; + display: flex; + justify-content: center; + position: fixed; + bottom: 0; + pointer-events: none; + z-index: 9999; + + .buttonContinue { + position: relative; + z-index: 1000; + max-width: 307px; + min-height: 59px; + margin-top: 48px; + margin-bottom: 64px; + pointer-events: all; + + & > .text { + font-size: 25px; + } + } +} diff --git a/src/components/domains/email-marketing/compatibility/v1/LandingButtonWrapper/LandingButtonWrapper.tsx b/src/components/domains/email-marketing/compatibility/v1/LandingButtonWrapper/LandingButtonWrapper.tsx new file mode 100644 index 0000000..1fa66fd --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/LandingButtonWrapper/LandingButtonWrapper.tsx @@ -0,0 +1,34 @@ +"use client"; + +import { useRouter } from "next/navigation"; +import { useTranslations } from "next-intl"; + +import { Button, Typography } from "@/components/ui"; +import { BlurComponent } from "@/components/widgets"; +import { ROUTES } from "@/shared/constants/client-routes"; +import { translatePathEmailMarketingCompatibilityV1 } from "@/shared/constants/translate"; + +import styles from "./LandingButtonWrapper.module.scss"; + +export default function LandingButtonWrapper() { + const router = useRouter(); + const t = useTranslations( + translatePathEmailMarketingCompatibilityV1("Landing") + ); + + const handleContinue = () => { + router.push(ROUTES.emailMarketingCompatibilityV1SpecialOffer()); + }; + + return ( +
+ + + +
+ ); +} diff --git a/src/components/domains/email-marketing/compatibility/v1/MoneyBackGuarantee/MoneyBackGuarantee.module.scss b/src/components/domains/email-marketing/compatibility/v1/MoneyBackGuarantee/MoneyBackGuarantee.module.scss new file mode 100644 index 0000000..ff7153b --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/MoneyBackGuarantee/MoneyBackGuarantee.module.scss @@ -0,0 +1,19 @@ +.container { + width: 100%; + height: fit-content; + border-radius: 30px; + backdrop-filter: blur(5px); + display: flex; + flex-direction: column; + align-items: center; + margin-top: 21px; + padding: 30px 30px 30px; + background-color: rgba(212, 212, 212, 0.35); +} + +.text { + font-size: 19px; + margin-top: 22px; + line-height: 25px; + color: #2c2c2c; +} diff --git a/src/components/domains/email-marketing/compatibility/v1/MoneyBackGuarantee/MoneyBackGuarantee.tsx b/src/components/domains/email-marketing/compatibility/v1/MoneyBackGuarantee/MoneyBackGuarantee.tsx new file mode 100644 index 0000000..3a93dff --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/MoneyBackGuarantee/MoneyBackGuarantee.tsx @@ -0,0 +1,23 @@ +import { useTranslations } from "next-intl"; + +import { translatePathEmailMarketingCompatibilityV1 } from "@/shared/constants/translate"; + +import { TextWithEmoji } from ".."; + +import styles from "./MoneyBackGuarantee.module.scss"; + +export default function MoneyBackGuarantee() { + const t = useTranslations( + translatePathEmailMarketingCompatibilityV1("Landing") + ); + + return ( +
+ +

{t("money-back-guarantee-text")}

+
+ ); +} diff --git a/src/components/domains/email-marketing/compatibility/v1/Payments/Payments.module.scss b/src/components/domains/email-marketing/compatibility/v1/Payments/Payments.module.scss new file mode 100644 index 0000000..44830a7 --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/Payments/Payments.module.scss @@ -0,0 +1,8 @@ +.container { + width: 100%; + margin: 30px auto 0; + + & > img { + width: 100%; + } +} diff --git a/src/components/domains/email-marketing/compatibility/v1/Payments/Payments.tsx b/src/components/domains/email-marketing/compatibility/v1/Payments/Payments.tsx new file mode 100644 index 0000000..a998720 --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/Payments/Payments.tsx @@ -0,0 +1,18 @@ +import Image from "next/image"; + +import { emailMarketingCompV1Images } from "@/shared/constants/images"; + +import styles from "./Payments.module.scss"; + +export default function Payments() { + return ( +
+ payments +
+ ); +} diff --git a/src/components/domains/email-marketing/compatibility/v1/PlanIncludes/PlanIncludes.module.scss b/src/components/domains/email-marketing/compatibility/v1/PlanIncludes/PlanIncludes.module.scss new file mode 100644 index 0000000..39ecdd3 --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/PlanIncludes/PlanIncludes.module.scss @@ -0,0 +1,39 @@ +.container { + margin-top: 48px; + max-width: 345px; +} + +.title { + font-size: 22px; + font-weight: 600; + text-align: center; +} + +.featuresList { + list-style: none; + padding: 0; + margin: 0; + margin-top: 30px; + display: flex; + flex-direction: column; + gap: 19px; +} + +.featureItem { + position: relative; + padding-left: 20px; + font-weight: 500; + font-size: 17px; + line-height: 21px; + + &:before { + content: "•"; + position: absolute; + left: 0; + color: black; + } + + &:last-child { + margin-bottom: 0; + } +} diff --git a/src/components/domains/email-marketing/compatibility/v1/PlanIncludes/PlanIncludes.tsx b/src/components/domains/email-marketing/compatibility/v1/PlanIncludes/PlanIncludes.tsx new file mode 100644 index 0000000..e064873 --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/PlanIncludes/PlanIncludes.tsx @@ -0,0 +1,29 @@ +import { Typography } from "@/components/ui"; + +import styles from "./PlanIncludes.module.scss"; + +interface PlanFeature { + text: string; +} + +interface PlanIncludesProps { + features: PlanFeature[]; + title: string; +} + +export default function PlanIncludes({ title, features }: PlanIncludesProps) { + return ( +
+ + {title} + + +
+ ); +} diff --git a/src/components/domains/email-marketing/compatibility/v1/PriceComparison/PriceComparison.module.scss b/src/components/domains/email-marketing/compatibility/v1/PriceComparison/PriceComparison.module.scss new file mode 100644 index 0000000..243042d --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/PriceComparison/PriceComparison.module.scss @@ -0,0 +1,75 @@ +// styles.module.scss +.container { + display: flex; + gap: 37px; + align-items: center; + margin-top: 42px; + color: #090909; +} + +.priceCard { + background: white; + border-radius: 8px; + overflow: hidden; + width: 200px; + box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.29); + + &.oldPriceCard { + width: 130px; + + & > .header { + padding: 20px 0; + } + + & > .priceContent { + padding: 8px 0 50px; + color: #838080; + font-weight: 600; + + & > .price { + font-size: 30px; + line-height: 40px; + } + } + } + + &.newPriceCard { + width: fit-content; + min-width: 152px; + max-width: 172px; + + & > .header { + padding: 24px 0; + background-color: #993cfe; + color: #fff; + } + + & > .priceContent { + padding: 55px 0 78px; + + & > .price { + font-size: 59px; + line-height: 25px; + font-weight: 600; + } + } + } +} + +.header { + background: #adaaab; + text-align: center; + font-weight: 600; + font-size: 18px; +} + +.priceContent { + text-align: center; +} + +.upTo { + color: #838080; + font-size: 21px; + line-height: 30px; + margin-bottom: 13px; +} diff --git a/src/components/domains/email-marketing/compatibility/v1/PriceComparison/PriceComparison.tsx b/src/components/domains/email-marketing/compatibility/v1/PriceComparison/PriceComparison.tsx new file mode 100644 index 0000000..cc131e9 --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/PriceComparison/PriceComparison.tsx @@ -0,0 +1,38 @@ +import { useTranslations } from "next-intl"; +import clsx from "clsx"; + +import { translatePathEmailMarketingCompatibilityV1 } from "@/shared/constants/translate"; + +import styles from "./PriceComparison.module.scss"; + +interface PriceComparisonProps { + oldPrice: number | string | React.ReactNode; + newPrice: number | string; +} + +export default function PriceComparison({ + oldPrice, + newPrice, +}: PriceComparisonProps) { + const t = useTranslations( + translatePathEmailMarketingCompatibilityV1("Landing") + ); + + return ( +
+
+
{t("old-price-label")}
+
+
{oldPrice}
+
+
+ +
+
{t("new-price-label")}
+
+
{newPrice}
+
+
+
+ ); +} diff --git a/src/components/domains/email-marketing/compatibility/v1/PricingSummary/PricingSummary.module.scss b/src/components/domains/email-marketing/compatibility/v1/PricingSummary/PricingSummary.module.scss new file mode 100644 index 0000000..40d8d9e --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/PricingSummary/PricingSummary.module.scss @@ -0,0 +1,102 @@ +.container { + display: flex; + align-items: center; + flex-direction: column; + width: 100%; +} + +.table { + background-color: white; + border-radius: 25px; + padding: 26px 13px 22px; + box-shadow: 0 2px 7px rgba(0, 0, 0, 0.25); + width: 100%; + margin-top: 39px; +} + +.row { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + padding: 10px 11px; +} + +.totalRow { + background-color: #ededed; + border-radius: 32px; + font-size: 17px; + line-height: 125%; + + .label { + font-weight: 500; + } + + .price { + font-weight: 500; + } +} + +.codeRow { + margin-top: 17px; + padding: 0 8px 0 11px; + + .codeApplied { + font-weight: 500; + font-size: 15px; + line-height: 125%; + } +} + +.costRow { + background-color: #ededed; + border-radius: 32px; + font-size: 17px; + line-height: 125%; + margin-top: 17px; + + .label { + font-size: 14px; + font-weight: 500; + max-width: 60%; + line-height: 125%; + } + + .prices { + display: flex; + gap: 14px; + align-items: flex-end; + } + + .originalPrice { + font-size: 13px; + text-decoration: line-through; + color: #5a5a5a; + line-height: 125%; + font-weight: 500; + } + + .discountedPrice { + font-weight: 700; + font-size: 17px; + line-height: 125%; + } +} + +.savingsRow { + width: 100%; + text-align: center; + color: #555; + font-size: 13px; + font-weight: 500; + margin-top: 15px; +} + +.description { + max-width: 295px; + font-size: 12px; + line-height: 125%; + margin-top: 20px; + text-align: center; + font-weight: 300; +} diff --git a/src/components/domains/email-marketing/compatibility/v1/PricingSummary/PricingSummary.tsx b/src/components/domains/email-marketing/compatibility/v1/PricingSummary/PricingSummary.tsx new file mode 100644 index 0000000..6e3dc5a --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/PricingSummary/PricingSummary.tsx @@ -0,0 +1,73 @@ +import { useTranslations } from "next-intl"; +import clsx from "clsx"; + +import { translatePathEmailMarketingCompatibilityV1 } from "@/shared/constants/translate"; +import { getFormattedPrice } from "@/shared/utils/price"; +import { Currency } from "@/types"; + +import { CountdownTimer } from ".."; + +import styles from "./PricingSummary.module.scss"; + +interface PricingSummaryProps { + totalToday: number | string; + originalPrice: number | string; + discountedPrice: number | string; + trialDuration: number | string; + saveText: string; + currency: Currency; +} + +export default function PricingSummary({ + totalToday, + originalPrice, + discountedPrice, + trialDuration, + saveText, + currency, +}: PricingSummaryProps) { + const t = useTranslations( + translatePathEmailMarketingCompatibilityV1("SpecialOffer") + ); + + return ( +
+
+
+ + {t("pricing-summary-total-today")} + + + {getFormattedPrice(Number(totalToday), currency)} + +
+
+ + {t("pricing-summary-code-applied")} + + +
+
+ + {t("pricing-summary-cost-after-trial")} + +
+ + {getFormattedPrice(Number(originalPrice), currency)} + + + {getFormattedPrice(Number(discountedPrice), currency)} + +
+
+
{saveText}
+
+

+ {t("pricing-summary-trial-description", { + totalToday: getFormattedPrice(Number(totalToday), currency), + trialDuration: trialDuration, + })} +

+
+ ); +} diff --git a/src/components/domains/email-marketing/compatibility/v1/Review/Review.module.scss b/src/components/domains/email-marketing/compatibility/v1/Review/Review.module.scss new file mode 100644 index 0000000..91d2d6e --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/Review/Review.module.scss @@ -0,0 +1,74 @@ +.container { + width: 100%; + border-radius: 10px; + padding: 6px 20px 14px 7px; + background-color: #fff; + box-shadow: 1px 4px 10px 0px rgba(0, 0, 0, 0.21); +} + +.header { + display: grid; + grid-template-columns: 35px 1fr; + align-items: center; + + gap: 4px; + + .avatar { + width: 35px; + height: 35px; + } + + & > .info { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: 2px; + color: #000; + + & .name { + line-height: 125%; + } + + & .date { + font-size: 12px; + line-height: 125%; + } + + & > .stars { + display: flex; + flex-direction: row; + align-items: center; + gap: 3px; + + & > img { + width: 14px; + } + } + } +} + +.tagline { + color: #224e90; + line-height: 125%; +} + +.text { + margin-top: 6px; + margin-left: 40px; + line-height: 125%; + font-weight: 300; +} + +.avatar-chars { + width: 26px; + height: 26px; + border-radius: 50%; + background-color: #e37fd9; + color: #0f1323; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + text-transform: uppercase; +} diff --git a/src/components/domains/email-marketing/compatibility/v1/Review/Review.tsx b/src/components/domains/email-marketing/compatibility/v1/Review/Review.tsx new file mode 100644 index 0000000..56e2ec9 --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/Review/Review.tsx @@ -0,0 +1,79 @@ +import Image from "next/image"; + +import { Typography } from "@/components/ui"; +import { emailMarketingCompV1Images } from "@/shared/constants/images"; + +import styles from "./Review.module.scss"; + +export interface IReviewProps { + username: string; + tagline?: string; + stars?: number; + avatar: string; + text: string; + date: string; + gender: "male" | "female"; +} + +export default function Review({ + username, + tagline, + stars = 5, + avatar, + text, + date, + gender, +}: IReviewProps) { + return ( +
+
+ {!!avatar?.length && ( + Avatar + )} + {!avatar?.length && ( +
{username.slice(0, 2)}
+ )} +
+
+ + {username} + + + {date} + +
+
+ {Array.from({ length: stars }).map((_, index) => ( + star + ))} +
+
+
+ {tagline && ( + + {tagline} + + )} + + {text} + +
+ ); +} diff --git a/src/components/domains/email-marketing/compatibility/v1/Reviews/Reviews.module.scss b/src/components/domains/email-marketing/compatibility/v1/Reviews/Reviews.module.scss new file mode 100644 index 0000000..27f83bc --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/Reviews/Reviews.module.scss @@ -0,0 +1,8 @@ +.container { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 40px; + max-width: 345px; + gap: 20px; +} diff --git a/src/components/domains/email-marketing/compatibility/v1/Reviews/Reviews.tsx b/src/components/domains/email-marketing/compatibility/v1/Reviews/Reviews.tsx new file mode 100644 index 0000000..6966b50 --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/Reviews/Reviews.tsx @@ -0,0 +1,46 @@ +import { useTranslations } from "next-intl"; + +import { emailMarketingCompV1Images } from "@/shared/constants/images"; +import { translatePathEmailMarketingCompatibilityV1 } from "@/shared/constants/translate"; + +import { IReviewProps, Review } from ".."; + +import styles from "./Reviews.module.scss"; + +export default function Reviews() { + const t = useTranslations( + translatePathEmailMarketingCompatibilityV1("Landing") + ); + + const reviews: IReviewProps[] = [ + { + avatar: emailMarketingCompV1Images("andi36_11.png"), + username: "@andi36_11", + date: "03/05/2025", + gender: "male", + text: t("review-1"), + }, + { + avatar: emailMarketingCompV1Images("aramaska.png"), + username: "@aramaska", + date: "02/17/2025", + gender: "female", + text: t("review-2"), + }, + { + avatar: emailMarketingCompV1Images("patterso.png"), + username: "@patterso", + date: "01/01/2025", + gender: "female", + text: t("review-3"), + }, + ]; + + return ( +
+ {reviews.map((review, index) => ( + + ))} +
+ ); +} diff --git a/src/components/domains/email-marketing/compatibility/v1/SpecialOfferButtonWrapper/SpecialOfferButtonWrapper.module.scss b/src/components/domains/email-marketing/compatibility/v1/SpecialOfferButtonWrapper/SpecialOfferButtonWrapper.module.scss new file mode 100644 index 0000000..7d2ca98 --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/SpecialOfferButtonWrapper/SpecialOfferButtonWrapper.module.scss @@ -0,0 +1,24 @@ +.buttonContainer { + width: 100%; + display: flex; + justify-content: center; + position: sticky; + bottom: calc(0dvh + 25px); + margin-top: 46px; + pointer-events: none; + z-index: 1000; + + .button { + position: relative; + z-index: 1000; + max-width: 300px; + margin-top: 24px; + margin-bottom: 12px; + pointer-events: all; + } +} + +.gradientBlur { + left: -18px !important; + right: -18px !important; +} diff --git a/src/components/domains/email-marketing/compatibility/v1/SpecialOfferButtonWrapper/SpecialOfferButtonWrapper.tsx b/src/components/domains/email-marketing/compatibility/v1/SpecialOfferButtonWrapper/SpecialOfferButtonWrapper.tsx new file mode 100644 index 0000000..50ee989 --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/SpecialOfferButtonWrapper/SpecialOfferButtonWrapper.tsx @@ -0,0 +1,53 @@ +"use client"; + +import { useRouter } from "next/navigation"; +import { useTranslations } from "next-intl"; + +import { Button, Typography } from "@/components/ui"; +import { BlurComponent } from "@/components/widgets"; +import { ROUTES } from "@/shared/constants/client-routes"; +import { translatePathEmailMarketingCompatibilityV1 } from "@/shared/constants/translate"; + +import styles from "./SpecialOfferButtonWrapper.module.scss"; + +interface SpecialOfferButtonWrapperProps { + productId: string; + placementId: string; + paywallId: string; +} + +export default function SpecialOfferButtonWrapper({ + productId, + placementId, + paywallId, +}: SpecialOfferButtonWrapperProps) { + const router = useRouter(); + const t = useTranslations( + translatePathEmailMarketingCompatibilityV1("SpecialOffer") + ); + + const openPaymentModal = () => { + router.push( + ROUTES.payment({ + productId, + placementId, + paywallId, + }) + ); + }; + + return ( +
+ + + +
+ ); +} diff --git a/src/components/domains/email-marketing/compatibility/v1/StatisticsBanner/StatisticsBanner.module.scss b/src/components/domains/email-marketing/compatibility/v1/StatisticsBanner/StatisticsBanner.module.scss new file mode 100644 index 0000000..e6a0501 --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/StatisticsBanner/StatisticsBanner.module.scss @@ -0,0 +1,28 @@ +.container { + background-color: #ff9c71; + margin-top: 27px; + padding: 22px 16px; + width: 100%; +} + +.content { + display: flex; + justify-content: space-between; + align-items: center; +} + +.text { + font-size: 19px; + line-height: 25px; +} + +.infoIcon { + color: #ffffff; + display: flex; + align-items: center; + + svg { + width: 24px; + height: 24px; + } +} diff --git a/src/components/domains/email-marketing/compatibility/v1/StatisticsBanner/StatisticsBanner.tsx b/src/components/domains/email-marketing/compatibility/v1/StatisticsBanner/StatisticsBanner.tsx new file mode 100644 index 0000000..53f7c8f --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/StatisticsBanner/StatisticsBanner.tsx @@ -0,0 +1,48 @@ +import { useTranslations } from "next-intl"; + +import { Typography } from "@/components/ui"; +import { translatePathEmailMarketingCompatibilityV1 } from "@/shared/constants/translate"; + +import styles from "./StatisticsBanner.module.scss"; + +interface StatisticsBannerProps { + count: number; +} + +export default function StatisticsBanner({ count }: StatisticsBannerProps) { + const t = useTranslations( + translatePathEmailMarketingCompatibilityV1("Landing") + ); + + return ( +
+
+ + {t.rich("statistics-banner-text", { + count: () => ( + + {t("statistics-banner-count", { + count, + })} + + ), + })} + +
+ + + +
+
+
+ ); +} diff --git a/src/components/domains/email-marketing/compatibility/v1/TextWithEmoji/TextWithEmoji.module.scss b/src/components/domains/email-marketing/compatibility/v1/TextWithEmoji/TextWithEmoji.module.scss new file mode 100644 index 0000000..50b99bb --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/TextWithEmoji/TextWithEmoji.module.scss @@ -0,0 +1,12 @@ +.container { + width: 100%; + display: flex; + align-items: start; + gap: 4px; +} + +.text { + font-size: 22px; + font-weight: 600; + line-height: 25px; +} diff --git a/src/components/domains/email-marketing/compatibility/v1/TextWithEmoji/TextWithEmoji.tsx b/src/components/domains/email-marketing/compatibility/v1/TextWithEmoji/TextWithEmoji.tsx new file mode 100644 index 0000000..c53e9d8 --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/TextWithEmoji/TextWithEmoji.tsx @@ -0,0 +1,36 @@ +import Image from "next/image"; + +import { Typography, TypographyProps } from "@/components/ui"; +import { emailMarketingCompV1Images } from "@/shared/constants/images"; + +import styles from "./TextWithEmoji.module.scss"; + +interface TextWithEmojiProps { + text: string; + emoji: string; + emojiWidth?: number; + emojiHeight?: number; + color?: TypographyProps["color"]; +} + +export default function TextWithEmoji({ + text, + emoji, + emojiWidth = 23, + emojiHeight = 23, + color = "default", +}: TextWithEmojiProps) { + return ( +
+ {emoji} + + {text} + +
+ ); +} diff --git a/src/components/domains/email-marketing/compatibility/v1/UnderstandingYourself/UnderstandingYourself.module.scss b/src/components/domains/email-marketing/compatibility/v1/UnderstandingYourself/UnderstandingYourself.module.scss new file mode 100644 index 0000000..52af69c --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/UnderstandingYourself/UnderstandingYourself.module.scss @@ -0,0 +1,16 @@ +.container { + width: 100%; + height: fit-content; + border-radius: 30px; + backdrop-filter: blur(5px); + display: flex; + flex-direction: column; + align-items: center; + margin-top: 50px; + padding: 25px 18px 0; + background-color: rgba(225, 225, 225, 0.44); +} + +.hand { + margin-top: -13px; +} diff --git a/src/components/domains/email-marketing/compatibility/v1/UnderstandingYourself/UnderstandingYourself.tsx b/src/components/domains/email-marketing/compatibility/v1/UnderstandingYourself/UnderstandingYourself.tsx new file mode 100644 index 0000000..adaf41e --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/UnderstandingYourself/UnderstandingYourself.tsx @@ -0,0 +1,31 @@ +import Image from "next/image"; +import { useTranslations } from "next-intl"; + +import { emailMarketingCompV1Images } from "@/shared/constants/images"; +import { translatePathEmailMarketingCompatibilityV1 } from "@/shared/constants/translate"; + +import { TextWithEmoji } from ".."; + +import styles from "./UnderstandingYourself.module.scss"; + +export default function UnderstandingYourself() { + const t = useTranslations( + translatePathEmailMarketingCompatibilityV1("Landing") + ); + + return ( +
+ + hand with eye +
+ ); +} diff --git a/src/components/domains/email-marketing/compatibility/v1/index.ts b/src/components/domains/email-marketing/compatibility/v1/index.ts new file mode 100644 index 0000000..264008c --- /dev/null +++ b/src/components/domains/email-marketing/compatibility/v1/index.ts @@ -0,0 +1,19 @@ +export { default as AdviceFromAstrologer } from "./AdviceFromAstrologer/AdviceFromAstrologer"; +export { default as CountdownTimer } from "./CountdownTimer/CountdownTimer"; +export { default as CustomerCounter } from "./CustomerCounter/CustomerCounter"; +export { default as FindingPartner } from "./FindingPartner/FindingPartner"; +export { default as GivePersonalizedPlan } from "./GivePersonalizedPlan/GivePersonalizedPlan"; +export { default as GuaranteedSecurityPayments } from "./GuaranteedSecurityPayments/GuaranteedSecurityPayments"; +export { default as InsightsRelationship } from "./InsightsRelationship/InsightsRelationship"; +export { default as LandingButtonWrapper } from "./LandingButtonWrapper/LandingButtonWrapper"; +export { default as MoneyBackGuarantee } from "./MoneyBackGuarantee/MoneyBackGuarantee"; +export { default as Payments } from "./Payments/Payments"; +export { default as PlanIncludes } from "./PlanIncludes/PlanIncludes"; +export { default as PriceComparison } from "./PriceComparison/PriceComparison"; +export { default as PricingSummary } from "./PricingSummary/PricingSummary"; +export { type IReviewProps, default as Review } from "./Review/Review"; +export { default as Reviews } from "./Reviews/Reviews"; +export { default as SpecialOfferButtonWrapper } from "./SpecialOfferButtonWrapper/SpecialOfferButtonWrapper"; +export { default as StatisticsBanner } from "./StatisticsBanner/StatisticsBanner"; +export { default as TextWithEmoji } from "./TextWithEmoji/TextWithEmoji"; +export { default as UnderstandingYourself } from "./UnderstandingYourself/UnderstandingYourself"; diff --git a/src/components/domains/retaining/second-chance/SecondChancePage/SecondChancePage.tsx b/src/components/domains/retaining/second-chance/SecondChancePage/SecondChancePage.tsx index a9bd934..8cd4350 100644 --- a/src/components/domains/retaining/second-chance/SecondChancePage/SecondChancePage.tsx +++ b/src/components/domains/retaining/second-chance/SecondChancePage/SecondChancePage.tsx @@ -14,7 +14,7 @@ import { useLottie } from "@/hooks/lottie/useLottie"; import { useRetainingStore } from "@/providers/retaining-store-provider"; import { useToast } from "@/providers/toast-provider"; import { ROUTES } from "@/shared/constants/client-routes"; -import { retainingImages } from "@/shared/constants/images/retaining"; +import { retainingImages } from "@/shared/constants/images"; import { ELottieKeys } from "@/shared/constants/lottie"; import { ERetainingFunnel } from "@/types"; diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts index 4d57779..98df716 100644 --- a/src/components/ui/index.ts +++ b/src/components/ui/index.ts @@ -29,7 +29,10 @@ export { type TextInputProps, } from "./TextInput/TextInput"; export { default as Toast } from "./Toast/Toast"; -export { default as Typography } from "./Typography/Typography"; +export { + default as Typography, + type TypographyProps, +} from "./Typography/Typography"; export { default as UserAvatar, type UserAvatarProps, diff --git a/src/hooks/timer/useTimer.ts b/src/hooks/timer/useTimer.ts index a5982f1..fe0ab58 100644 --- a/src/hooks/timer/useTimer.ts +++ b/src/hooks/timer/useTimer.ts @@ -2,20 +2,14 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import { formatSecondsToHHMMSS } from "@/shared/utils/date"; + interface UseTimerOptions { initialSeconds: number; persist?: boolean; storageKey?: string; } -function formatTime(seconds: number): string { - const m = Math.floor(seconds / 60) - .toString() - .padStart(2, "0"); - const s = (seconds % 60).toString().padStart(2, "0"); - return `${m}:${s}`; -} - export function useTimer({ initialSeconds, persist = false, @@ -67,7 +61,7 @@ export function useTimer({ return useMemo( () => ({ - time: formatTime(seconds), + time: formatSecondsToHHMMSS(seconds, { isHours: false }), seconds, reset, isFinished: seconds === 0, diff --git a/src/shared/constants/client-routes.ts b/src/shared/constants/client-routes.ts index 987a8a0..e15256e 100644 --- a/src/shared/constants/client-routes.ts +++ b/src/shared/constants/client-routes.ts @@ -1,11 +1,20 @@ const ROOT_ROUTE = "/"; +const createRoute = ( + segments: Array, + queryParams?: Record +): string => { + const url = ROOT_ROUTE + segments.filter(Boolean).join("/"); + if (queryParams) { + return url + "?" + new URLSearchParams(queryParams).toString(); + } + return url; +}; + const profilePrefix = "profile"; const retainingFunnelPrefix = "retaining"; - -const createRoute = (segments: Array): string => { - return ROOT_ROUTE + segments.filter(Boolean).join("/"); -}; +const emailMarketingPrefix = "em"; +const emailMarketingCompatibilityV1Prefix = `${emailMarketingPrefix}/c/v1`; export const ROUTES = { home: () => createRoute([]), @@ -56,7 +65,8 @@ export const ROUTES = { createRoute([retainingFunnelPrefix, "subscription-stopped"]), // Payment - payment: () => createRoute(["payment"]), + payment: (queryParams?: Record) => + createRoute(["payment"], queryParams), paymentSuccess: () => createRoute(["payment", "success"]), paymentFailed: () => createRoute(["payment", "failed"]), @@ -68,6 +78,12 @@ export const ROUTES = { addGuides: () => createRoute(["add-guides"]), additionalPurchases: (type?: string) => createRoute(["ap", type]), + // Email Marketing Compatibility V1 + emailMarketingCompatibilityV1Landing: () => + createRoute([emailMarketingCompatibilityV1Prefix, "landing"]), + emailMarketingCompatibilityV1SpecialOffer: () => + createRoute([emailMarketingCompatibilityV1Prefix, "special-offer"]), + // // Compatibility // compatibilities: () => createRoute(["compatibilities"]), diff --git a/src/shared/constants/images/email-marketing.ts b/src/shared/constants/images/email-marketing.ts new file mode 100644 index 0000000..219f856 --- /dev/null +++ b/src/shared/constants/images/email-marketing.ts @@ -0,0 +1,2 @@ +export const emailMarketingCompV1Images = (path: string) => + `/email-marketing/comp/v1/${path}`; diff --git a/src/shared/constants/images/index.ts b/src/shared/constants/images/index.ts new file mode 100644 index 0000000..102a360 --- /dev/null +++ b/src/shared/constants/images/index.ts @@ -0,0 +1,2 @@ +export * from "./email-marketing"; +export * from "./retaining"; diff --git a/src/shared/constants/translate/index.ts b/src/shared/constants/translate/index.ts new file mode 100644 index 0000000..c02ed5f --- /dev/null +++ b/src/shared/constants/translate/index.ts @@ -0,0 +1 @@ +export * from "./translate-path"; diff --git a/src/shared/constants/translate/translate-path.ts b/src/shared/constants/translate/translate-path.ts new file mode 100644 index 0000000..07f6cf3 --- /dev/null +++ b/src/shared/constants/translate/translate-path.ts @@ -0,0 +1,2 @@ +export const translatePathEmailMarketingCompatibilityV1 = (path: string) => + `EmailMarketing.Compatibility.v1.${path}`; diff --git a/src/shared/utils/date.ts b/src/shared/utils/date.ts index 394e25c..cef6707 100644 --- a/src/shared/utils/date.ts +++ b/src/shared/utils/date.ts @@ -17,7 +17,7 @@ export const formatTime = (date: string | null) => { export const formatSecondsToHHMMSS = ( seconds: number, - availableValues: Partial< + availableValues?: Partial< Record<"isHours" | "isMinutes" | "isSeconds", boolean> > ) => { @@ -25,7 +25,7 @@ export const formatSecondsToHHMMSS = ( isHours = true, isMinutes = true, isSeconds = true, - } = availableValues; + } = availableValues || {}; const hours = Math.floor(seconds / 3600); const minutes = Math.floor((seconds % 3600) / 60); const secs = seconds % 60;