From d9ade68bacb6e67f43f75db9ada007d64ab280e9 Mon Sep 17 00:00:00 2001
From: jaaaaavier <javipiagui13@gmail.com>
Date: Mon, 9 Mar 2026 09:45:57 +0100
Subject: [PATCH] feat: clubic LP

---
 .../partnersTemplate/HeroSection.tsx          | 48 +++++++++----------
 src/hooks/useSpecialOfferConfig.ts            |  6 +++
 src/pages/[filename].tsx                      |  5 +-
 3 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/src/components/partnersTemplate/HeroSection.tsx b/src/components/partnersTemplate/HeroSection.tsx
index a32a92135..72e6abc6a 100644
--- a/src/components/partnersTemplate/HeroSection.tsx
+++ b/src/components/partnersTemplate/HeroSection.tsx
@@ -22,6 +22,7 @@ interface HeroSectionForPartnerProps {
   darkMode?: boolean;
   image?: any;
   isValentinesMode?: boolean;
+  isClubic?: boolean;
 }
 
 export default function HeroSection({
@@ -31,6 +32,7 @@ export default function HeroSection({
   darkMode = false,
   isValentinesMode = false,
   image = 'internxt-private-cloud',
+  isClubic = false,
 }: Readonly<HeroSectionForPartnerProps>): JSX.Element {
   const [currency, setCurrency] = useState<string>('€');
 
@@ -57,31 +59,7 @@ export default function HeroSection({
     return typeof text === 'string' ? text.replace(/{{discount}}/g, percentOff) : text;
   };
 
-  const StyledTitle = ({ rawText }: { rawText: string }) => {
-    const parts = rawText.split(/(\/\/.*?\/\/|\*\*.*?\*\*)/g);
-
-    return (
-      <>
-        {parts.map((part, index) => {
-          if (part.startsWith('//') && part.endsWith('//')) {
-            return (
-              <span key={index} style={{ color: '#E93D82' }}>
-                {part.slice(2, -2)}
-              </span>
-            );
-          }
-          if (part.startsWith('**') && part.endsWith('**')) {
-            return (
-              <span key={index} style={{ color: '#007bff' }}>
-                {part.slice(2, -2)}
-              </span>
-            );
-          }
-          return part;
-        })}
-      </>
-    );
-  };
+  
 
   return (
     <section
@@ -115,6 +93,26 @@ export default function HeroSection({
           </div>
         )}
 
+        {isClubic && (
+          <div className="flex flex-row items-center justify-center space-x-3.5 lg:justify-start ">
+            <Image
+              src={getImage('/images/partnerships/Clubic.webp')}
+              width={117}
+              height={27}
+              alt="Clubic logo"
+            />
+            <X size={16} />
+            <Image
+              loading="lazy"
+              className="select-none"
+              src={`../../logos/internxt/cool-gray-90.svg`}
+              alt="Internxt logo"
+              width={130}
+              height={16}
+            />
+          </div>
+        )}
+
         <div className="flex w-full flex-wrap items-start justify-start gap-2 lg:flex-nowrap lg:justify-between">
           {products.map((feature, index) => (
             <div
diff --git a/src/hooks/useSpecialOfferConfig.ts b/src/hooks/useSpecialOfferConfig.ts
index 3247efcc7..75934a589 100644
--- a/src/hooks/useSpecialOfferConfig.ts
+++ b/src/hooks/useSpecialOfferConfig.ts
@@ -42,6 +42,7 @@ export const ALLOWED_PATHS = [
   'cninternxtl',
   'cooltechzone',
   'lifetime',
+  'clubic',
 ];
 export const ALTERNATE_RECOMENDATED_PLAN_PATHS = new Set<string>([]);
 export const DARK_MODE_PATHS = new Set<string>(['baity', 'xavier', 'oscar', 'rimembah', 'believemy', 'ghareeb']);
@@ -91,6 +92,7 @@ export const COUPON_CODES = {
   cninternxtl: PromoCodeName.cninternxtl,
   cooltechzone: PromoCodeName.CTZ,
   lifetime: PromoCodeName.lifetime,
+  clubic: PromoCodeName.DRIVE87,
 };
 
 interface OfferConfig {
@@ -103,6 +105,7 @@ interface OfferConfig {
   ultimateAndPremiumPlans: boolean;
   annualPlans: boolean;
   lifetimePlans: boolean;
+  isClubic: boolean;
 }
 
 export const useOfferConfig = (pathname: string): OfferConfig => {
@@ -120,6 +123,7 @@ export const useOfferConfig = (pathname: string): OfferConfig => {
         ultimateAndPremiumPlans: false,
         annualPlans: false,
         lifetimePlans: false,
+        isClubic: false,
       };
     }
 
@@ -130,6 +134,7 @@ export const useOfferConfig = (pathname: string): OfferConfig => {
     const ultimateAndPremiumPlans = ULTIMATE_PREMIUM_PLANS_PATHS.has(selectedPathname);
     const annualPlans = ANNUAL_PLANS_PATHS.has(selectedPathname);
     const lifetimePlans = LIFETIME_PLANS_PATHS.has(selectedPathname);
+    const isClubic = selectedPathname === 'clubic';
 
     const alternativeImages = ALTERNATIVE_IMAGES_PATHS.has(selectedPathname)
       ? selectedPathname
@@ -145,6 +150,7 @@ export const useOfferConfig = (pathname: string): OfferConfig => {
       ultimateAndPremiumPlans,
       annualPlans,
       lifetimePlans,
+      isClubic,
     };
   }, [pathname]);
 };
diff --git a/src/pages/[filename].tsx b/src/pages/[filename].tsx
index 1c39c8da7..945641aff 100644
--- a/src/pages/[filename].tsx
+++ b/src/pages/[filename].tsx
@@ -89,6 +89,7 @@ const LANG_MAP = {
   cninternxtl:'en',
   cooltechzone:'en',
   lifetime:'en',
+  clubic:'fr'
 };
 
 function CombinedSpecialOffer({
@@ -108,7 +109,8 @@ function CombinedSpecialOffer({
     onlyUltimatePlan,
     ultimateAndPremiumPlans,
     annualPlans,
-    lifetimePlans
+    lifetimePlans,
+    isClubic
   } = useOfferConfig(pathname);
   const {
     products,
@@ -181,6 +183,7 @@ function CombinedSpecialOffer({
         percentOff={percentOff}
         darkMode={isDarkMode}
         image={alternativeImages}
+        isClubic={isClubic}
       />
 
       <ReviewsSection textContent={langJson.ReviewSection} darkMode={isDarkMode} />