[-]:feat/fixes

src/assets/lang/en/metatags-descriptions.json

@@ -31,7 +31,7 @@
   },
   {
     "id": "free-cloud-storage",
-    "title": "Free Secure & Encrypted Cloud Storage — Intenxt Drive",
+    "title": "Free Secure & Encrypted Cloud Storage — Internxt Drive",
     "description": "Get free secure cloud storage with Internxt Drive. Easily store, share, and back up your files and photos using our open-source, end-to-end encrypted platform for guaranteed privacy."
   },
   {

src/assets/lang/es/coupons.json

@@ -6,7 +6,8 @@
       "cleaner": "Limpiador",
       "vpn": "VPN",
       "meet": "Meet",
-      "mail": "Mail"
+      "mail": "Mail",
+      "ai":"AI"
     },
     "title": "**Descuentos** y **promociones** de Internxt",
     "subtitle": "¡Has desbloqueado un {{discount}}% de descuento! Obtén tu código de cupón de Internxt aquí",

src/components/cloud-object-storage/HeroSection.tsx

@@ -6,7 +6,7 @@ import { getImage } from '@/lib/getImage';
 export const HeroSection = ({ textContent }) => {
   return (
     <section
-      className="flex h-min w-full flex-col items-center justify-between gap-8 px-5 pt-28 lg:flex-row lg:gap-16 lg:px-10 lg:py-10 lg:pt-10 xl:px-32 3xl:px-80"
+      className="flex h-min w-full flex-col items-center justify-between gap-8 px-5 pt-28 lg:flex-row lg:gap-16 lg:px-10 lg:pt-10 xl:px-32 3xl:px-80"
       style={{ background: 'linear-gradient(360deg, #FFFFFF 0%, #E5EFFF 85.17%)' }}
     >
       <div

src/components/cloud-object-storage/certificationsSections.tsx

@@ -3,16 +3,16 @@ import Image from 'next/image';
 
 export const CertificationsSection = () => {
     const certifications = [   
-        { src: '/images/datacenters-and-certifications/ISO.webp', width: 40, alt: 'ISO Certification' },
-        { src: '/images/datacenters-and-certifications/HipaaCompilance.webp', width: 85, alt: 'HIPAA Compliance' },
-        { src: '/images/datacenters-and-certifications/AICPA.webp', width: 100, alt: 'AICPA Certification' },
-        { src: '/images/datacenters-and-certifications/GDPR.webp', width: 122, alt: 'GDPR Compliance' },
-        { src: '/images/datacenters-and-certifications/ENS.webp', width: 115, alt: 'ENS Certification' },
-        { src: '/images/datacenters-and-certifications/CSA.webp', width: 40, alt: 'CSA Certification' },
+        { src: '/images/datacenters-and-certifications/ISO.webp', width: 48, alt: 'ISO Certification' },
+        { src: '/images/datacenters-and-certifications/HipaaCompilance.webp', width: 102, alt: 'HIPAA Compliance' },
+        { src: '/images/datacenters-and-certifications/AICPA.webp', width: 120, alt: 'AICPA Certification' },
+        { src: '/images/datacenters-and-certifications/GDPR.webp', width: 146, alt: 'GDPR Compliance' },
+        { src: '/images/datacenters-and-certifications/ENS.webp', width: 138, alt: 'ENS Certification' },
+        { src: '/images/datacenters-and-certifications/CSA.webp', width: 48, alt: 'CSA Certification' },
     ];
   return (
     <section
-      className="flex h-min w-full flex-col items-center justify-between gap-8 px-5 pt-28 lg:flex-row lg:gap-16 lg:px-10 lg:py-10 lg:pt-10 xl:px-32 3xl:px-80"
+      className="flex h-min w-full  flex-col items-center justify-between gap-8 px-5 pt-28 lg:pt-0 lg:flex-row lg:gap-16 lg:px-10 lg:py-10 xl:px-32 3xl:px-80"
     >
      <div className="flex flex-row items-center gap-16 w-full justify-between">
         {certifications.map((cert, index) => (

src/components/coupons/HeroSection.tsx

@@ -90,8 +90,8 @@ export default function HeroSection({
       className={`flex h-min w-full flex-row items-center justify-center overflow-hidden py-10 pt-28 lg:h-[705px] lg:justify-between lg:pl-10 lg:pt-36 xl:pl-32 3xl:pl-80`}
       style={{ background: 'linear-gradient(180deg, #E5EFFF 0%, #FFFFFF 100%)' }}
     >
-      <div className="flex h-min w-[345px] flex-col justify-center gap-6 lg:h-[564px] lg:w-[736px] lg:justify-between">
-        <div className="flex w-full flex-wrap items-start justify-start gap-2 lg:flex-nowrap lg:justify-between">
+      <div className="flex h-min w-[345px] flex-col justify-center gap-6 lg:h-[460px] lg:w-[736px] lg:justify-between">
+        <div className="flex w-full flex-wrap items-start justify-start gap-2 lg:flex-nowrap lg:justify-between w-m">
           {products.map((feature, index) => (
             <div
               key={index}

src/components/shared/pricing/PriceCard.tsx

@@ -316,7 +316,7 @@ export const PriceCard = ({
                     : darkMode
                     ? 'border-blue-55  bg-transparent text-white hover:bg-gray-90'
                     : 'border-primary bg-transparent text-primary hover:bg-gray-1'
-                } flex h-[48px] w-[270px] items-center justify-center rounded-md border-[1.5px] text-base lg:w-[290px]`}
+                } flex h-[48px] w-[270px] items-center justify-center rounded-md border-[1.5px] text-base lg:w-[290px]whi`}
               >
                 <p className={`text-base font-medium`}>{ctaText}</p>
               </button>
@@ -330,7 +330,7 @@ export const PriceCard = ({
 
                   return (
                     <>
-                      <div key={index} className="flex items-start gap-3 px-4 lg:px-0">
+                      <div key={index} className="flex items-start gap-3 px-2 lg:px-0">
                         {Icon && <Icon size={24} className={`shrink-0 text-primary`} />}
                         <div className="flex flex-row items-center gap-2">
                           <p

src/components/shared/pricing/PriceCard/HorizontalPriceCard.tsx

@@ -1,21 +1,21 @@
-import React from 'react';
 import {
   ArrowsClockwise,
-  Broom,
+  CellTower,
   CirclesThreePlus,
+  Code,
   CodeBlock,
-  CreditCard,
   Database,
-  Detective,
   Envelope,
+  Files,
   Fingerprint,
-  Fire,
-  Gauge,
+  Image,
   Key,
   LockSimple,
   Password,
-  ShieldPlus,
-  VideoConference,
+  Shield,
+  Sparkle,
+  VideoCamera,
+
 } from '@phosphor-icons/react';
 import { checkout } from '@/lib/auth';
 import { PromoCodeProps } from '@/lib/types';
@@ -41,7 +41,11 @@ export const HorizontalPriceCard = ({
   planId,
   currencyValue,
   coupon,
-}: HorizontalPriceCardProps): JSX.Element => {
+}: HorizontalPriceCardProps): JSX.Element | null => {
+  if (!storage) {
+    return null;
+  }
+
   const contentText = require(`@/assets/lang/en/priceCard.json`);
 
   const priceNow = decimalDiscountValue
@@ -56,21 +60,22 @@ export const HorizontalPriceCard = ({
     }[storage] || null;
 
   const iconsFeatures = [
-    Database,
+   Database,
     Key,
-    Gauge,
-    ShieldPlus,
+    LockSimple,
+    Fingerprint,
     ArrowsClockwise,
     Password,
     CirclesThreePlus,
-    LockSimple,
-    Fingerprint,
+    Files,
+    Image,
     CodeBlock,
-    Broom,
-    Detective,
-    VideoConference,
+    Code,
+    CellTower,
+    Shield,
+    Sparkle,
+    VideoCamera,
     Envelope,
-    CreditCard,
   ];
 
   function onCheckoutButtonClicked() {
@@ -84,16 +89,13 @@ export const HorizontalPriceCard = ({
   }
   return (
     <div className="flex w-[320px] flex-col overflow-hidden rounded-2xl ring-1 ring-gray-10 lg:h-[328px] lg:w-[1100px] lg:flex-row lg-xl:w-[1100px] xl:w-[1200px]">
-      <div className="flex w-full flex-col items-center justify-center space-y-4 bg-white p-6 pb-10 pt-10 lg:w-[455px] lg:border-r lg:border-neutral-20">
+      <div className="flex w-full flex-col items-center justify-center space-y-4 bg-white p-6 pb-10 pt-10 lg:w-1/4 lg:border-r lg:border-neutral-20">
         <div className="flex flex-col items-center justify-center space-y-4">
           <div className="flex rounded-full px-3 py-0.5">
             <p className="text-3xl font-semibold text-gray-100 lg:text-5xl">{cardLabel}</p>
           </div>
         </div>
-        <p className="flex rounded-2 bg-green-100 px-1 py-0.5 text-base font-semibold text-green-0">
-          {percentOff}
-          {contentText.discount}
-        </p>
+
         <div className={`flex flex-col items-center justify-center ${priceBefore ? 'space-y-1' : 'space-y-4'}`}>
           <div className="flex flex-row items-end space-x-px text-neutral-700">
             <p className="flex flex-row items-end whitespace-nowrap font-medium text-gray-100">
@@ -109,52 +111,36 @@ export const HorizontalPriceCard = ({
         <button
           id={`planButton${storage}`}
           onClick={() => onCheckoutButtonClicked()}
-          className="mt-4 w-full rounded-lg bg-primary px-20 py-2.5 font-medium text-white hover:bg-primary-dark"
+          className="mt-4 w-full rounded-lg bg-primary px-20 py-2.5 font-medium text-white hover:bg-primary-dark whitespace-nowrap"
         >
-          {contentText.cta.selectPlan}
+          {contentText.cta}
         </button>
       </div>
 
-      <div className="flex flex-col border-t border-neutral-20 bg-neutral-10 pb-6 pt-6 text-sm lg:h-[590px] lg:border-t-0">
-        <div className="grid w-full grid-cols-1 gap-y-2 px-6 text-start sm:grid-cols-1 lg:h-[264px] lg:w-[830px] lg:grid-cols-2 lg:items-center">
-          <div className="flex flex-col space-y-2">
-            {contentText.productFeatures.individuals[storage].slice(0, 7).map((feature: string, index: number) => {
-              const Icon = iconsFeatures[index % iconsFeatures.length];
-              return (
-                <div className="flex flex-row items-start space-x-2" key={feature}>
-                  <Icon size={24} className="text-primary" />
-                  <span className={`text-lg+ text-gray-80 ${index === 0 ? 'font-semibold' : 'font-regular'}`}>
-                    {feature}
-                    {index > 9 && (
-                      <span className="ml-2 rounded-md bg-orange-100 px-1 text-orange-1">
-                        {contentText.commingSoon}
-                      </span>
-                    )}
-                  </span>
-                </div>
-              );
-            })}
-          </div>
+      <div className="flex w-full flex-col border-t border-neutral-20 bg-neutral-10 pb-6 pt-6 text-sm lg:h-[590px] lg:border-t-0">
+        <div className="grid w-full grid-cols-1 gap-y-4 gap-x-4 px-6 text-start sm:grid-cols-2 lg:h-[264px] lg:w-fit lg:gap-x-12 lg:grid-cols-3 lg:items-center lg:justify-center">
+            {contentText.productFeatures.individualPlans[storage].map((feature: {name: string, status: string}, index: number) => {
+              const Icon = iconsFeatures[index] || iconsFeatures[iconsFeatures.length - 1];
+              const isComingSoon = feature.status === 'Coming soon';
+              const formattedName = feature.name.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
 
-          <div className="flex flex-col space-y-2 lg:pl-8">
-            {contentText.productFeatures.individuals[storage].slice(7, 14).map((feature: string, index: number) => {
-              const adjustedIndex = index + 7;
-              const Icon = iconsFeatures[adjustedIndex % iconsFeatures.length];
               return (
-                <div className="flex flex-row items-start space-x-2" key={feature}>
-                  <Icon size={24} className="text-primary" />
-                  <span className="font-regular text-lg+ text-gray-80">
-                    {feature}
-                    {adjustedIndex > 9 && (
-                      <span className="ml-2 rounded-md bg-orange-100 px-1 text-orange-1">
-                        {contentText.commingSoon}
+                <div key={index} className="flex items-center gap-2">
+                  {Icon && <Icon size={24} className="shrink-0 text-primary" />}
+                  <div className="flex flex-row items-center gap-2">
+                    <p
+                      className="font-regular text-lg+ text-gray-80"
+                      dangerouslySetInnerHTML={{ __html: formattedName }}
+                    />
+                    {isComingSoon && (
+                      <span className="rounded-2 bg-purple-1 px-1 py-0.5 text-base font-semibold text-purple-10">
+                        {contentText.productFeatures.comingSoonLabel || contentText.commingSoon}
                       </span>
                     )}
-                  </span>
+                  </div>
                 </div>
               );
             })}
-          </div>
         </div>
       </div>
     </div>

src/hooks/useSpecialOfferConfig.ts

@@ -40,14 +40,16 @@ export const ALLOWED_PATHS = [
   'genius',
   'letosa',
   'cninternxtl',
-  'cooltechzone'
+  'cooltechzone',
+  'lifetime'
 ];
 export const ALTERNATE_RECOMENDATED_PLAN_PATHS = new Set<string>([]);
 export const DARK_MODE_PATHS = new Set<string>(['baity', 'xavier', 'oscar', 'rimembah', 'believemy', 'ghareeb']);
 export const ALTERNATIVE_IMAGES_PATHS = new Set<string>(['baity']);
 export const ONLY_ULTIMATE_PLANS_PATHS = new Set<string>(['ultimate']);
-export const ULTIMATE_PREMIUM_PLANS_PATHS = new Set<string>(['annual']);
+export const ULTIMATE_PREMIUM_PLANS_PATHS = new Set<string>([]);
 export const ANNUAL_PLANS_PATHS = new Set<string>(['annual', 'ultimate']);
+export const LIFETIME_PLANS_PATHS = new Set<string>(['lifetime']);
 
 export const COUPON_CODES = {
   baity: PromoCodeName.BaityBait,
@@ -87,7 +89,8 @@ export const COUPON_CODES = {
   genius: PromoCodeName.genius,
   letosa: PromoCodeName.letosa,
   cninternxtl: PromoCodeName.cninternxtl,
-  cooltechzone: PromoCodeName.CTZ
+  cooltechzone: PromoCodeName.CTZ,
+  lifetime: PromoCodeName.lifetime
 };
 
 interface OfferConfig {
@@ -99,6 +102,7 @@ interface OfferConfig {
   onlyUltimatePlan: boolean;
   ultimateAndPremiumPlans: boolean;
   annualPlans: boolean;
+  lifetimePlans: boolean;
 }
 
 export const useOfferConfig = (pathname: string): OfferConfig => {
@@ -115,6 +119,7 @@ export const useOfferConfig = (pathname: string): OfferConfig => {
         onlyUltimatePlan: false,
         ultimateAndPremiumPlans: false,
         annualPlans: false,
+        lifetimePlans: false,
       };
     }
 
@@ -124,6 +129,7 @@ export const useOfferConfig = (pathname: string): OfferConfig => {
     const onlyUltimatePlan = ONLY_ULTIMATE_PLANS_PATHS.has(selectedPathname);
     const ultimateAndPremiumPlans = ULTIMATE_PREMIUM_PLANS_PATHS.has(selectedPathname);
     const annualPlans = ANNUAL_PLANS_PATHS.has(selectedPathname);
+    const lifetimePlans = LIFETIME_PLANS_PATHS.has(selectedPathname);
 
     const alternativeImages = ALTERNATIVE_IMAGES_PATHS.has(selectedPathname)
       ? selectedPathname
@@ -138,6 +144,7 @@ export const useOfferConfig = (pathname: string): OfferConfig => {
       onlyUltimatePlan,
       ultimateAndPremiumPlans,
       annualPlans,
+      lifetimePlans,
     };
   }, [pathname]);
 };

src/lib/types/index.ts

@@ -230,6 +230,7 @@ export enum PromoCodeName {
   whereby='WHEREBY87',
   CLOUDWARDS='CLOUDWARDS',
   CTZ='CTZ',
+  lifetime='LIFETIME'
 }
 
 export interface PromoCodeProps {