From cd38d557d08b4c524e1485fc75329583cf8f1a2c Mon Sep 17 00:00:00 2001 From: internxt-yu Date: Thu, 23 Jul 2026 16:19:24 +0200 Subject: [PATCH 1/4] created lifetime and google-alternative PPC LP --- next.config.js | 6 +- src/pages/ppc/google-drive-alternative.tsx | 189 ++++++++++++++++++ src/pages/ppc/lifetime.tsx | 214 +++++++++++++++++++++ 3 files changed, 406 insertions(+), 3 deletions(-) create mode 100644 src/pages/ppc/google-drive-alternative.tsx create mode 100644 src/pages/ppc/lifetime.tsx diff --git a/next.config.js b/next.config.js index ce7a3e716..d27ee1af9 100644 --- a/next.config.js +++ b/next.config.js @@ -112,11 +112,11 @@ module.exports = { destination: '/about', permanent: false, }, - { - source: '/:lang/lifetime', + ...['es', 'fr', 'it', 'zh', 'ru', 'de', 'zh-tw'].map((lang) => ({ + source: `/${lang}/lifetime`, destination: '/lifetime', permanent: false, - }, + })), { source: '/:lang/team', destination: '/:lang/about', diff --git a/src/pages/ppc/google-drive-alternative.tsx b/src/pages/ppc/google-drive-alternative.tsx new file mode 100644 index 000000000..9a7d586a1 --- /dev/null +++ b/src/pages/ppc/google-drive-alternative.tsx @@ -0,0 +1,189 @@ +import { TablesSection } from '@/components/comparison/TablesSection'; +import Layout from '@/components/layout/Layout'; +import Navbar from '@/components/layout/navbars/Navbar'; +import usePpcCoupon from '@/hooks/usePpcCoupon'; +import cookies from '@/lib/cookies'; +import { GetServerSidePropsContext } from 'next'; +import { PricingSectionWrapper } from '@/components/shared/pricing/PricingSectionWrapper'; +import { PromoCodeName } from '@/lib/types'; +import usePricing from '@/hooks/usePricing'; +import { stripeService } from '@/services/stripe.service'; +import FAQSection from '@/components/shared/sections/FaqSection'; +import HorizontalScrollableSection from '@/components/comparison/HorizontalScrollableSection'; +import { ComparisonTable } from '@/components/comparison/ComparisonTable'; +import { HeroSection } from '@/components/comparison/HeroSection'; +import Footer from '@/components/layout/footers/Footer'; +import FloatingCtaSectionv2 from '@/components/shared/FloatingCtaSectionV2'; +import HorizontalScrollableSectionWithPhotosSection from '@/components/coupons/HorizontalScrollableSectionWithPhotos'; +import ThreeCardsSection from '@/components/shared/sections/ThreeCardsSection'; +import { formatText } from '@/components/utils/format-text'; +import { sm_breadcrumb } from '@/components/utils/schema-markup-generator'; +import Script from 'next/script'; + +const GoogleDriveComparison = ({ metatagsDescriptions, langJson, lang, navbarLang, footerLang }): JSX.Element => { + const metatags = metatagsDescriptions.filter((desc) => desc.id === 'google-drive-alternative'); + const ppcCoupon = usePpcCoupon({ + couponCode: PromoCodeName.gdrive, + couponCodeForLifetime: PromoCodeName.gdrive + }); + + const { + products, + loadingCards, + currencyValue, + coupon: individualCoupon, + lifetimeCoupon: lifetimeCoupon, + lifetimeCoupons, + } = usePricing(ppcCoupon); + + const onCheckoutButtonClicked = async ( + priceId: string, + isCheckoutForLifetime: boolean, + interval: string, + storage: string, + ) => { + const couponCodeForCheckout = isCheckoutForLifetime ? lifetimeCoupon : individualCoupon; + + const finalPrice = await stripeService.calculateFinalPrice( + priceId, + interval, + currencyValue, + 'individuals', + couponCodeForCheckout, + ); + + stripeService.redirectToCheckout( + priceId, + finalPrice, + currencyValue, + 'individual', + isCheckoutForLifetime, + interval, + storage, + couponCodeForCheckout?.name, + ); + }; + + const locale = lang as string; + const decimalDiscount = lifetimeCoupon?.percentOff && 100 - lifetimeCoupon.percentOff; + const percentageDiscount = decimalDiscount ? 100 - decimalDiscount : 0; + const privacyBgGradient = 'linear-gradient(180deg, #FFFFFF 0%, #FFCECC 50%, #FFFFFF 100%)'; + const alternativeBgColor = 'linear-gradient(180deg, #FFFFFF 0%, #D6F3DD 50%, #FFFFFF 100%)'; + + return ( + <> + + + + + + + + + + + + + + + + + + + +

+ {formatText(langJson.CtaSection.title, { percentage: percentageDiscount?.toString() ?? '70' })} +

+

+ {formatText(langJson.CtaSection.description, { percentage: percentageDiscount?.toString() ?? '70' })} +

+ + } + containerDetails="shadow-lg backdrop-blur-[55px] bg-white" + bgGradientContainerColor="linear-gradient(115.95deg, rgba(244, 248, 255, 0.75) 10.92%, rgba(255, 255, 255, 0.08) 96.4%)" + bgPadding="px-20 py-10" + /> + + + +