Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -9,6 +9,7 @@ import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboa
 import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
 
 export default function LandingPage() {
   return (
@@ -29,13 +30,9 @@ export default function LandingPage() {
       <NavbarStyleCentered
       navItems={[
         {
-          name: "Mandat",
+          name: "Mandat",          id: "hero"},
-          id: "hero",
-        },
         {
-          name: "Adéquation",
+          name: "Adéquation",          id: "features"},
-          id: "features",
-        },
       ]}
       brandName="PRAGMATAN"
     />
@@ -44,41 +41,22 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroBillboardRotatedCarousel
       background={{
-        variant: "plain",
+        variant: "plain"}}
-      }}
       title="PRAGMATAN"
       description="Recrutement RPO & Chasse de tête haute-précision. L'ingénierie du talent."
       carouselItems={[
         {
-          id: "1",
+          id: "1",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-empty-dark-white-grey-gradient-with-black-solid-vignette-lighting-studio-wall-floor-background-well-use-as-backdrop-background-empty-white-room-with-space-your-text-picture_1258-56187.jpg?_wi=1",          imageAlt: "Mandat Pragmatan"},
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-empty-dark-white-grey-gradient-with-black-solid-vignette-lighting-studio-wall-floor-background-well-use-as-backdrop-background-empty-white-room-with-space-your-text-picture_1258-56187.jpg?_wi=1",
-          imageAlt: "Mandat Pragmatan",
-        },
         {
-          id: "2",
+          id: "2",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-empty-dark-white-grey-gradient-with-black-solid-vignette-lighting-studio-wall-floor-background-well-use-as-backdrop-background-empty-white-room-with-space-your-text-picture_1258-56187.jpg?_wi=2",          imageAlt: "Mandat Pragmatan"},
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-empty-dark-white-grey-gradient-with-black-solid-vignette-lighting-studio-wall-floor-background-well-use-as-backdrop-background-empty-white-room-with-space-your-text-picture_1258-56187.jpg?_wi=2",
-          imageAlt: "Mandat Pragmatan",
-        },
         {
-          id: "3",
+          id: "3",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-empty-dark-white-grey-gradient-with-black-solid-vignette-lighting-studio-wall-floor-background-well-use-as-backdrop-background-empty-white-room-with-space-your-text-picture_1258-56187.jpg?_wi=3",          imageAlt: "Mandat Pragmatan"},
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-empty-dark-white-grey-gradient-with-black-solid-vignette-lighting-studio-wall-floor-background-well-use-as-backdrop-background-empty-white-room-with-space-your-text-picture_1258-56187.jpg?_wi=3",
-          imageAlt: "Mandat Pragmatan",
-        },
         {
-          id: "4",
+          id: "4",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-empty-dark-white-grey-gradient-with-black-solid-vignette-lighting-studio-wall-floor-background-well-use-as-backdrop-background-empty-white-room-with-space-your-text-picture_1258-56187.jpg?_wi=4",          imageAlt: "Mandat Pragmatan"},
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-empty-dark-white-grey-gradient-with-black-solid-vignette-lighting-studio-wall-floor-background-well-use-as-backdrop-background-empty-white-room-with-space-your-text-picture_1258-56187.jpg?_wi=4",
-          imageAlt: "Mandat Pragmatan",
-        },
         {
-          id: "5",
+          id: "5",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-empty-dark-white-grey-gradient-with-black-solid-vignette-lighting-studio-wall-floor-background-well-use-as-backdrop-background-empty-white-room-with-space-your-text-picture_1258-56187.jpg?_wi=5",          imageAlt: "Mandat Pragmatan"},
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-empty-dark-white-grey-gradient-with-black-solid-vignette-lighting-studio-wall-floor-background-well-use-as-backdrop-background-empty-white-room-with-space-your-text-picture_1258-56187.jpg?_wi=5",
-          imageAlt: "Mandat Pragmatan",
-        },
         {
-          id: "6",
+          id: "6",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-empty-dark-white-grey-gradient-with-black-solid-vignette-lighting-studio-wall-floor-background-well-use-as-backdrop-background-empty-white-room-with-space-your-text-picture_1258-56187.jpg?_wi=6",          imageAlt: "Mandat Pragmatan"},
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-empty-dark-white-grey-gradient-with-black-solid-vignette-lighting-studio-wall-floor-background-well-use-as-backdrop-background-empty-white-room-with-space-your-text-picture_1258-56187.jpg?_wi=6",
-          imageAlt: "Mandat Pragmatan",
-        },
       ]}
     />
   </div>
@@ -90,26 +68,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          id: "1",
+          id: "1",          title: "Protocole Alpha",          subtitle: "Identification des signaux faibles avec une précision absolue.",          category: "Extraction",          value: "150+"},
-          title: "Protocole Alpha",
-          subtitle: "Identification des signaux faibles avec une précision absolue.",
-          category: "Extraction",
-          value: "150+",
-        },
         {
-          id: "2",
+          id: "2",          title: "Adéquation Moléculaire",          subtitle: "Analyse de la porosité culturelle pour une fusion parfaite.",          category: "Analyse",          value: "100%"},
-          title: "Adéquation Moléculaire",
-          subtitle: "Analyse de la porosité culturelle pour une fusion parfaite.",
-          category: "Analyse",
-          value: "100%",
-        },
         {
-          id: "3",
+          id: "3",          title: "Ingénierie de Chasse",          subtitle: "Extraction chirurgicale dans les zones de haute confidentialité.",          category: "Chasse",          value: "30J"},
-          title: "Ingénierie de Chasse",
-          subtitle: "Extraction chirurgicale dans les zones de haute confidentialité.",
-          category: "Chasse",
-          value: "30J",
-        },
       ]}
       title="Protocole d'Extraction"
       description="Une approche moléculaire du recrutement."
@@ -123,12 +86,7 @@ export default function LandingPage() {
       title="Partenaires de Confiance"
       description="Un écosystème de leaders collaborant avec notre expertise."
       names={[
-        "Lumière",
+        "Lumière",        "Apex",        "Nova",        "Flux",        "Sigma"]}
-        "Apex",
-        "Nova",
-        "Flux",
-        "Sigma",
-      ]}
     />
   </div>
 
@@ -137,9 +95,7 @@ export default function LandingPage() {
       useInvertedBackground={false}
       heading={[
         {
-          type: "text",
+          type: "text",          content: "La précision est notre seule constante."},
-          content: "La précision est notre seule constante.",
-        },
       ]}
     />
   </div>
@@ -153,54 +109,45 @@ export default function LandingPage() {
       faqsAnimation="slide-up"
       faqs={[
         {
-          id: "1",
+          id: "1",          title: "Qu'est-ce que l'extraction moléculaire ?",          content: "Une méthode consistant à isoler chaque compétence spécifique sans interférence environnementale."},
-          title: "Qu'est-ce que l'extraction moléculaire ?",
-          content: "Une méthode consistant à isoler chaque compétence spécifique sans interférence environnementale.",
-        },
         {
-          id: "2",
+          id: "2",          title: "Comment garantissez-vous la confidentialité ?",          content: "Nous opérons dans des zones isolées du spectre public, garantissant une discrétion totale."},
-          title: "Comment garantissez-vous la confidentialité ?",
-          content: "Nous opérons dans des zones isolées du spectre public, garantissant une discrétion totale.",
-        },
         {
-          id: "3",
+          id: "3",          title: "Quels sont les délais habituels ?",          content: "Nos protocoles sont calibrés pour une résolution optimale sous 30 jours calendaires."},
-          title: "Quels sont les délais habituels ?",
-          content: "Nos protocoles sont calibrés pour une résolution optimale sous 30 jours calendaires.",
-        },
         {
-          id: "4",
+          id: "4",          title: "Le RPO est-il adapté à toutes les structures ?",          content: "Nous privilégions les entreprises en phase de croissance critique nécessitant un talent de haut niveau."},
-          title: "Le RPO est-il adapté à toutes les structures ?",
-          content: "Nous privilégions les entreprises en phase de croissance critique nécessitant un talent de haut niveau.",
-        },
       ]}
     />
   </div>
 
+  <div id="contact" data-section="contact">
+      <ContactCTA 
+        tag="Connexion"
+        title="Initier le Protocole"
+        description="L'ingénierie du talent commence par un échange."
+        buttons={[{ text: "Démarrer l'extraction", onClick: () => console.log("Void-snap interaction triggered") }]}
+        background={{ variant: "sparkles-gradient" }}
+        useInvertedBackground={false}
+      />
+  </div>
+
   <div id="footer" data-section="footer">
       <FooterLogoEmphasis
       columns={[
         {
           items: [
             {
-              label: "Mandat",
+              label: "Mandat",              href: "#hero"},
-              href: "#hero",
-            },
             {
-              label: "Protocoles",
+              label: "Protocoles",              href: "#features"},
-              href: "#features",
-            },
           ],
         },
         {
           items: [
             {
-              label: "Privacy",
+              label: "Privacy",              href: "#"},
-              href: "#",
-            },
             {
-              label: "Contact",
+              label: "Contact",              href: "#contact"},
-              href: "#",
-            },
           ],
         },
       ]}
@@ -210,4 +157,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
+  --background: #fdfdfb;
-  --card: #f9f9f9;
+  --card: #f8f7f4;
-  --foreground: #0a0a0a;
+  --foreground: #1a1a1a;
-  --primary-cta: #e60000;
+  --primary-cta: #dc2626;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #0a0a0a;
+  --secondary-cta: #d1d5db;
   --secondary-cta-text: #ffffff;
-  --accent: #e6e6e6;
+  --accent: #dc2626;
-  --background-accent: #e6e6e6;
+  --background-accent: #f3f4f6;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);