[MKT_487]: Update/Pcloud alternative Landing Page

src/assets/lang/en/pcloud-alternative.json

@@ -1,22 +1,24 @@
 {
   "HeaderSection": {
-    "title": "Internxt: a more secure pCloud alternative",
-    "description": "Worried about pCloud’s hidden source code and extra cost for encryption? Are you certain pCloud doesn’t store your password or access your files? Internxt offers free, built-in encryption and open-source transparency.",
+    "title": "Switch to Internxt",
+    "description": "The most private cloud storage, with open-source transparency and built-in post-quantum encryption to keep your data safe and secure.",
+
     "useCode": {
       "line1": "Use code ",
-      "code": "SPECIAL75",
-      "line2": " at checkout for 75% off any Internxt plan!"
+      "code": "PCLOUD80",
+      "line2": "and claim your 80% discount."
     },
-    "cta": "Choose plan"
+    "cta": "Select plan"
   },
   "HeroSection": {
-    "title": "Internxt vs. pCloud comparison",
+    "title": "Internxt vs pCloud comparison",
     "description": "Discover characteristics of Internxt that make it a more private pCloud alternative",
     "tooltip": "Although pCloud identifies as a Swiss company and claims compliance with Swiss privacy laws, it operates entirely in Bulgaria. Therefore, Bulgarian privacy laws apply. Users should consider this distinction regarding their data protection.",
     "tableSection": {
       "comparisons": {
         "codeTransparency": "Code transparency",
         "encryption": "Encryption",
+        "postQuantumEncryption": "Post-Quantum Encryption",
         "pricing": "Pricing",
         "securityAudits": "Security Audits",
         "liveSupport": "Live Support",
@@ -26,15 +28,17 @@
       "internxtFeatures": {
         "codeTransparency": "Open-Source",
         "encryption": "Included in all plans",
+        "postQuantumEncryption": "Yes",
         "pricing": "Competitive, no hidden costs",
-        "securityAudits": "Regular security audits",
+        "securityAudits": "Regular security audits by the community",
         "liveSupport": "Yes",
         "dataTrackers": "No",
         "privacyLaws": "GDPR, Spanish Data Protection Laws"
       },
       "features": {
         "codeTransparency": "Closed-Source",
         "encryption": "Paid extra (pCloud Crypto)",
+        "postQuantumEncryption": "No",
         "pricing": "Affordable, but extra for encryption",
         "securityAudits": "Not available",
         "liveSupport": "No",
@@ -60,8 +64,8 @@
             "description": "As Internxt's code is open to anyone, everyone may examine it and ensure its security. This transparency guarantees that no vulnerabilities are hidden."
           },
           {
-            "title": "End-to-End Encryption",
-            "description": "Your data is encrypted on the client side, guaranteeing that only you can access it."
+            "title": "Post-Quantum encryption",
+            "description": "Internxt uses post-quantum end-to-end encryption. This encrypts files on your device and protects against the threat of quantum computers breaking current encryption technology."
           },
           {
             "title": "Audited",
@@ -182,8 +186,8 @@
   "UseCodeSection": {
     "title": {
       "line1": "Use code ",
-      "code": "SPECIAL75 ",
-      "line2": "for 75% off secure, encrypted cloud storage"
+      "code": "PCLOUD80 ",
+      "line2": " for 80% off secure, encrypted cloud storage"
     },
     "cta": "Choose plan"
   },
@@ -235,13 +239,48 @@
         "description": "Internxt operates with complete transparency, ensuring your data privacy is protected by European laws. Our GDPR compliance guarantees your information is handled securely and according to strict regulations."
       },
       {
-        "title": "Privacy-focused encryption",
-        "description": "Internxt includes zero knowledge and end-to-end encryption for your free and paid accounts. We only store the encrypted version of your data, and only you have the key to decrypt and access it."
+        "title": "Advanced encryption",
+        "description": "Internxt includes post-quantum encryption, the most secure and advanced cryptography available for free and paid accounts. We only store the encrypted version of your data, and only you have the key to decrypt and access it. "
       },
       {
         "title": "Flexible storage plans",
         "description": "Internxt Drive offers more paid plans and greater storage options than the pCloud pricing structure. If you need a pCloud alternative that offers monthly, annual, and lifetime plans, choose from any of our affordable plans, starting at 200GB to 10TB."
       }
     ]
+  },
+  "tableSection": {
+    "planTitles": {
+      "individuals": "Individual Plans",
+      "homePage": "Choose the right plan for you",
+      "lifetime": "Lifetime Plans",
+      "business": "Business Plans",
+      "lifetimeCampaign": {
+        "blueText": "Get 50% OFF",
+        "normalText": "all our exclusive lifetime plans"
+      }
+    },
+    "lifetimeDescription": "Buy once and get privacy and security forever.",
+    "planDescription": "All Internxt plans are fully featured with complete access to all of our privacy services. Security for all shapes and sizes.",
+    "businessDescription": "We’re currently working on new Internxt plans designed exclusively to defend your business, protect your employees, and secure your bottom line.",
+    "businessDescription2": "Ensure business data security with Internxt's encrypted cloud storage plans.",
+    "billingFrequency": {
+      "monthly": "Monthly",
+      "annually": "Annually",
+      "individual": "Individual",
+      "lifetime": "Lifetime",
+      "business": "Business"
+    },
+    "freePlanCard": {
+      "getStarted": "Get started with our free plan",
+      "enjoy10gb": "Enjoy 1GB forever and get access to all our services",
+      "upTo": "1GB",
+      "freeForever": "Free forever",
+      "cta": "Select plan"
+    },
+    "features": {
+      "endToEnd": "End-to-end encrypted",
+      "openSource": "Open-source and audited",
+      "anonymousAccount": "Anonymous account creation"
+    }
   }
 }

src/components/comparison/ComparisonHeader.tsx

@@ -25,13 +25,13 @@ export const ComparisonHeader = ({ textContent, redirectUrl, maxWithForTitle }:
       </Header>
 
       <h2 className="max-w-3xl text-center text-xl">{textContent.description}</h2>
+
       {textContent.useCode ? <CodeComponent textContent={textContent.useCode} /> : undefined}
     </div>
 
     <div className="relative z-10 flex flex-col items-center justify-center">
       <Link
         href={redirectUrl}
-        target="_blank"
         rel="noopener noreferrer"
         id="get-started-link"
         className="flex w-full items-center justify-center rounded-lg border border-transparent bg-white px-6 py-2 text-lg font-medium text-primary hover:bg-blue-10 focus:outline-none sm:inline-flex sm:w-auto"

src/components/comparison/pCloud-alternative/CouponSection.tsx

@@ -18,13 +18,12 @@ const CodeComponent = ({ textContent }) => (
 
 export const CouponSection = ({ textContent, redirectUrl }: UseCouponSectionProps) => {
   return (
-    <section className="flex flex-col bg-primary-dark py-20 px-5">
+    <section className="flex flex-col bg-primary-dark px-5 py-20">
       <div className="flex flex-col items-center gap-12 text-center">
         <div className="flex max-w-[810px] flex-col items-center gap-8 text-center">
           <CodeComponent textContent={textContent.title} />
           <Link
             href={redirectUrl}
-            target="_blank"
             rel="noopener noreferrer"
             id="get-started-link"
             className="flex w-full items-center justify-center rounded-lg border border-transparent bg-white px-6 py-2 text-lg font-medium text-primary hover:bg-blue-10 focus:outline-none sm:inline-flex sm:w-max"

src/components/comparison/pCloud-alternative/HeroSection.tsx

@@ -23,6 +23,7 @@ export const HeroSection = ({ textContent, logo, hideTooltip }: HeroSectionProps
         liveSupport: textContent.tableSection.internxtFeatures.liveSupport,
         dataTrackers: textContent.tableSection.internxtFeatures.dataTrackers,
         privacyLaws: textContent.tableSection.internxtFeatures.privacyLaws,
+        postQuantumEncryption: textContent.tableSection.internxtFeatures.postQuantumEncryption,
       },
     },
     {
@@ -36,6 +37,7 @@ export const HeroSection = ({ textContent, logo, hideTooltip }: HeroSectionProps
         liveSupport: textContent.tableSection.features.liveSupport,
         dataTrackers: textContent.tableSection.features.dataTrackers,
         privacyLaws: textContent.tableSection.features.privacyLaws,
+        postQuantumEncryption: textContent.tableSection.features.postQuantumEncryption,
       },
     },
   ];
@@ -56,28 +58,33 @@ export const HeroSection = ({ textContent, logo, hideTooltip }: HeroSectionProps
           title: `${textContent.tableSection.comparisons.encryption}`,
           feature: getFeature('encryption'),
         },
+        {
+          id: 2,
+          title: `${textContent.tableSection.comparisons.postQuantumEncryption}`,
+          feature: getFeature('postQuantumEncryption'),
+        },
         {
           id: 2,
           title: `${textContent.tableSection.comparisons.pricing}`,
           feature: getFeature('pricing'),
         },
         {
-          id: 3,
+          id: 4,
           title: `${textContent.tableSection.comparisons.securityAudits}`,
           feature: getFeature('securityAudits'),
         },
         {
-          id: 4,
+          id: 5,
           title: `${textContent.tableSection.comparisons.liveSupport}`,
           feature: getFeature('liveSupport'),
         },
         {
-          id: 5,
+          id: 6,
           title: `${textContent.tableSection.comparisons.dataTrackers}`,
           feature: getFeature('dataTrackers'),
         },
         {
-          id: 6,
+          id: 7,
           title: `${textContent.tableSection.comparisons.privacyLaws}`,
           feature: getFeature('privacyLaws'),
         },
@@ -86,7 +93,7 @@ export const HeroSection = ({ textContent, logo, hideTooltip }: HeroSectionProps
   ];
 
   return (
-    <section className="overflow-hidden bg-gray-1 px-5 py-20">
+    <section className="overflow-hidden bg-white px-5 py-20">
       <div className="flex flex-col items-center justify-center gap-16">
         <div className="flex flex-col items-center gap-6 text-center">
           <h2 className="text-5xl font-semibold text-gray-100">{textContent.title}</h2>
@@ -180,7 +187,6 @@ export const HeroSection = ({ textContent, logo, hideTooltip }: HeroSectionProps
             ))}
           </table>
         </div>
-        <SignUpBanner lang="en" textContent={bannerText.SignUpPCloudAlternativeBanner} />
       </div>
     </section>
   );

src/components/comparison/pCloud-alternative/WhyChooseInxtSection.tsx

@@ -52,7 +52,7 @@ export const WhyChooseInxtSection = ({ textContent }) => {
               key={card.title}
               className={`flex flex-col items-start justify-start rounded-2xl bg-gray-1 p-8 sm:p-10 md:max-w-[488px]`}
             >
-              <card.icon className="mb-6 text-4xl text-green" size={32} />
+              <card.icon className="mb-6 text-4xl text-green-1" size={32} />
               <div className="flex w-full max-w-[400px] flex-col">
                 <p className="mb-6 text-2xl font-medium text-gray-100">{card.title}</p>
                 <p className="text-base text-cool-gray-80 sm:text-lg">{card.subtitle}</p>
@@ -70,7 +70,7 @@ export const WhyChooseInxtSection = ({ textContent }) => {
             quality={100}
             className="cursor-pointer"
             onClick={() => {
-              window.open(SIGNUP_DRIVE_WEB, '_blank', 'noopener noreferrer');
+              window.location.hash = 'priceTable';
             }}
           />
         </div>

src/lib/types/index.ts

@@ -114,6 +114,7 @@ export enum PromoCodeName {
   SoftSales = '70OFF4YOU',
   Christmas = 'SECRETSANTA80',
   Special80Coupon = 'SPECIAL80',
+  PCLOUD80 = 'PCLOUD80',
 }
 
 export interface PromoCodeProps {

src/pages/pcloud-alternative.tsx

@@ -8,28 +8,78 @@ import Layout from '@/components/layout/Layout';
 import { MinimalFooter } from '@/components/layout/footers/MinimalFooter';
 import Navbar from '@/components/layout/navbars/Navbar';
 import CtaSection from '@/components/shared/CtaSection';
-import { SIGNUP_DRIVE_WEB } from '@/constants';
 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 '@/components/services/stripe.service';
+import { SIGNUP_DRIVE_WEB } from '@/constants';
 
-const pCloudComparison = ({ metatagsDescriptions, langJson, lang, navbarLang, footerLang }): JSX.Element => {
+const PCloudComparison = ({ metatagsDescriptions, langJson, lang, navbarLang, footerLang }): JSX.Element => {
   const metatags = metatagsDescriptions.filter((desc) => desc.id === 'pcloud-alternative');
+  const {
+    products,
+    loadingCards,
+    currencyValue,
+    coupon: individualCoupon,
+    lifetimeCoupons,
+  } = usePricing({
+    couponCode: PromoCodeName.PCLOUD80,
+  });
+
+  const onCheckoutButtonClicked = (priceId: string, isCheckoutForLifetime: boolean) => {
+    const couponCodeForCheckout = individualCoupon?.name;
+
+    stripeService.redirectToCheckout(
+      priceId,
+      currencyValue,
+      'individual',
+      isCheckoutForLifetime,
+      couponCodeForCheckout,
+    );
+  };
+
+  const decimalDiscount = individualCoupon?.percentOff && 100 - individualCoupon.percentOff;
 
+  console.log('individualCoupon:', individualCoupon);
   return (
     <Layout title={metatags[0].title} description={metatags[0].description} segmentName="pCloud Comparison" lang={lang}>
-      <Navbar textContent={navbarLang} lang={lang} cta={['default']} fixed />
+      <Navbar textContent={navbarLang} lang={lang} cta={['priceTable']} fixed />
 
       <ComparisonHeader
         maxWithForTitle={'max-w-[600px]'}
         textContent={langJson.HeaderSection}
-        redirectUrl={'/pricing'}
+        redirectUrl={'#priceTable'}
       />
 
       <HeroSection textContent={langJson.HeroSection} />
 
+      <PricingSectionWrapper
+        textContent={langJson.tableSection}
+        decimalDiscount={{
+          individuals: decimalDiscount,
+          lifetime: decimalDiscount,
+        }}
+        lifetimeCoupons={lifetimeCoupons}
+        lang={lang}
+        products={products}
+        loadingCards={loadingCards}
+        onCheckoutButtonClicked={onCheckoutButtonClicked}
+        hideSwitchSelector
+        hideBusinessSelector
+        hideFreeCard
+        CustomDescription={
+          <span className="text-regular max-w-[800px] text-xl text-gray-80">
+            {langJson.tableSection.planDescription}
+          </span>
+        }
+        backgroundColorComponent="bg-gray-1"
+      />
+
       <TablesSection textContent={langJson.TablesSection} />
 
-      <CouponSection textContent={langJson.UseCodeSection} redirectUrl="/pricing" />
+      <CouponSection textContent={langJson.UseCodeSection} redirectUrl="#priceTable" />
 
       <IsPCloudSafeSection textContent={langJson.isPCloudSafeSection} />
 
@@ -63,4 +113,4 @@ export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   };
 }
 
-export default pCloudComparison;
+export default PCloudComparison;