Update src/app/page.tsx

Merge version_5 into main

src/app/page.tsx

@@ -7,7 +7,7 @@ import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
+import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
 import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
@@ -33,73 +33,34 @@ export default function LandingPage() {
       <NavbarStyleCentered
       navItems={[
         {
-          name: "Accueil",
+          name: "Accueil",          id: "hero"},
-          id: "hero",
-        },
         {
-          name: "À propos",
+          name: "À propos",          id: "about"},
-          id: "about",
-        },
         {
-          name: "Services",
+          name: "Services",          id: "services"},
-          id: "services",
-        },
         {
-          name: "Témoignages",
+          name: "Témoignages",          id: "testimonials"},
-          id: "testimonials",
-        },
         {
-          name: "Contact",
+          name: "Contact",          id: "contact"},
-          id: "contact",
-        },
       ]}
       brandName="Utopie en Réalité"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroBillboardCarousel
+      <HeroBillboardScroll
       background={{
-        variant: "gradient-bars",
+        variant: "gradient-bars"}}
-      }}
       title="Transformez votre potentiel en réalité"
       description="Coaching premium en neuroscience appliquée, développement personnel et transformation comportementale. Accompagnement stratégique haut de gamme."
       buttons={[
         {
-          text: "Réserver une séance",
+          text: "Réserver une séance",          href: "https://wa.me/24162781010"},
-          href: "https://wa.me/24162781010",
-        },
         {
-          text: "Découvrir l'accompagnement",
+          text: "Découvrir l'accompagnement",          href: "#services"},
-          href: "#services",
-        },
-      ]}
-      mediaItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/pencil-with-blueberries-plant-top-view-white-background-space-text_176474-5031.jpg",
-          imageAlt: "Abstract design",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/dried-lily-leaf-textured-background-design_53876-143099.jpg",
-          imageAlt: "Abstract design",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-desk-with-office-supplies_23-2148110231.jpg",
-          imageAlt: "Abstract design",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-desktop-with-notepad-glasses_23-2148430802.jpg",
-          imageAlt: "Abstract design",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/dried-palm-leaves-pink-background_53876-160520.jpg",
-          imageAlt: "Abstract design",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/brown-brush-stroke-textured-background_53876-165328.jpg",
-          imageAlt: "Abstract design",
-        },
       ]}
+      imageSrc="http://img.b2bpic.net/free-photo/pencil-with-blueberries-plant-top-view-white-background-space-text_176474-5031.jpg"
+      imageAlt="Abstract design"
     />
   </div>
 
@@ -110,20 +71,11 @@ export default function LandingPage() {
       tag="Statistiques"
       metrics={[
         {
-          id: "m1",
+          id: "m1",          value: "10+",          description: "Pays accompagnés"},
-          value: "10+",
-          description: "Pays accompagnés",
-        },
         {
-          id: "m2",
+          id: "m2",          value: "100%",          description: "Personnalisation"},
-          value: "100%",
-          description: "Personnalisation",
-        },
         {
-          id: "m3",
+          id: "m3",          value: "Scientifique",          description: "Approche moderne"},
-          value: "Scientifique",
-          description: "Approche moderne",
-        },
       ]}
       metricsAnimation="slide-up"
     />
@@ -136,19 +88,13 @@ export default function LandingPage() {
       metrics={[
         {
           icon: Award,
-          label: "Vision",
+          label: "Vision",          value: "Transformation"},
-          value: "Transformation",
-        },
         {
           icon: Lightbulb,
-          label: "Approche",
+          label: "Approche",          value: "Neuroscience"},
-          value: "Neuroscience",
-        },
         {
           icon: Heart,
-          label: "Philosophie",
+          label: "Philosophie",          value: "Accompagnement"},
-          value: "Accompagnement",
-        },
       ]}
       metricsAnimation="blur-reveal"
     />
@@ -161,40 +107,17 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          id: "f1",
+          id: "f1",          title: "Neuroscience appliquée",          author: "REAL Method",          description: "Compréhension profonde des mécanismes cognitifs.",          tags: [
-          title: "Neuroscience appliquée",
+            "Science",            "Évolution"],
-          author: "REAL Method",
+          imageSrc: "http://img.b2bpic.net/free-photo/desk-office-with-objects_23-2147982285.jpg",          imageAlt: "Brain study"},
-          description: "Compréhension profonde des mécanismes cognitifs.",
-          tags: [
-            "Science",
-            "Évolution",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/desk-office-with-objects_23-2147982285.jpg",
-          imageAlt: "Brain study",
-        },
         {
-          id: "f2",
+          id: "f2",          title: "Intelligence comportementale",          author: "REAL Method",          description: "Analyse avancée des comportements humains.",          tags: [
-          title: "Intelligence comportementale",
+            "Comportement",            "Stratégie"],
-          author: "REAL Method",
+          imageSrc: "http://img.b2bpic.net/free-photo/minimalist-workplace-with-notepad-pen-plant-vase_23-2148225527.jpg",          imageAlt: "Strategy"},
-          description: "Analyse avancée des comportements humains.",
-          tags: [
-            "Comportement",
-            "Stratégie",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/minimalist-workplace-with-notepad-pen-plant-vase_23-2148225527.jpg",
-          imageAlt: "Strategy",
-        },
         {
-          id: "f3",
+          id: "f3",          title: "Sensorialité",          author: "REAL Method",          description: "Intégration du ressenti et de l'intelligence sensible.",          tags: [
-          title: "Sensorialité",
+            "Sens"],
-          author: "REAL Method",
+          imageSrc: "http://img.b2bpic.net/free-photo/adolescent-undergoing-behavioral-therapy-address-anxiety-social-issues_482257-124729.jpg",          imageAlt: "Senses"},
-          description: "Intégration du ressenti et de l'intelligence sensible.",
-          tags: [
-            "Sens",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/adolescent-undergoing-behavioral-therapy-address-anxiety-social-issues_482257-124729.jpg",
-          imageAlt: "Senses",
-        },
       ]}
       title="Méthode scientifique"
       description="Nous intégrons la neuroscience et la compréhension émotionnelle pour une transformation durable."
@@ -209,41 +132,17 @@ export default function LandingPage() {
       useInvertedBackground={true}
       products={[
         {
-          id: "p1",
+          id: "p1",          name: "Développement personnel",          price: "Premium",          imageSrc: "http://img.b2bpic.net/free-photo/yoga-still-life_23-2148119617.jpg"},
-          name: "Développement personnel",
-          price: "Premium",
-          imageSrc: "http://img.b2bpic.net/free-photo/yoga-still-life_23-2148119617.jpg",
-        },
         {
-          id: "p2",
+          id: "p2",          name: "Coaching comportemental",          price: "Premium",          imageSrc: "http://img.b2bpic.net/free-photo/elegant-black-pink-background-with-transparent-bubble_23-2148290073.jpg"},
-          name: "Coaching comportemental",
-          price: "Premium",
-          imageSrc: "http://img.b2bpic.net/free-photo/elegant-black-pink-background-with-transparent-bubble_23-2148290073.jpg",
-        },
         {
-          id: "p3",
+          id: "p3",          name: "Neuroscience appliquée",          price: "Premium",          imageSrc: "http://img.b2bpic.net/free-photo/realistic-texture-with-peach-fuzz-shade_23-2151485183.jpg"},
-          name: "Neuroscience appliquée",
-          price: "Premium",
-          imageSrc: "http://img.b2bpic.net/free-photo/realistic-texture-with-peach-fuzz-shade_23-2151485183.jpg",
-        },
         {
-          id: "p4",
+          id: "p4",          name: "Sensorialité",          price: "Premium",          imageSrc: "http://img.b2bpic.net/free-photo/computer-mouse-surrounded-by-office-stuff_23-2148225483.jpg"},
-          name: "Sensorialité",
-          price: "Premium",
-          imageSrc: "http://img.b2bpic.net/free-photo/computer-mouse-surrounded-by-office-stuff_23-2148225483.jpg",
-        },
         {
-          id: "p5",
+          id: "p5",          name: "Coaching transformationnel",          price: "Premium",          imageSrc: "http://img.b2bpic.net/free-photo/circle-golden-lights-new-year-party_23-2148339535.jpg"},
-          name: "Coaching transformationnel",
-          price: "Premium",
-          imageSrc: "http://img.b2bpic.net/free-photo/circle-golden-lights-new-year-party_23-2148339535.jpg",
-        },
         {
-          id: "p6",
+          id: "p6",          name: "Accompagnement individuel",          price: "Premium",          imageSrc: "http://img.b2bpic.net/free-photo/earth-tone-paint-with-leaf-shadow-background-design_53876-97497.jpg"},
-          name: "Accompagnement individuel",
-          price: "Premium",
-          imageSrc: "http://img.b2bpic.net/free-photo/earth-tone-paint-with-leaf-shadow-background-design_53876-97497.jpg",
-        },
       ]}
       title="Nos accompagnements"
       description="Des solutions sur-mesure pour votre transformation personnelle et professionnelle."
@@ -257,16 +156,9 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          id: "r1",
+          id: "r1",          title: "Analyse comportementale",          author: "REAL",          description: "Outil unique de compréhension profonde.",          tags: [
-          title: "Analyse comportementale",
+            "Audit"],
-          author: "REAL",
+          imageSrc: "http://img.b2bpic.net/free-photo/desk-arrangement-with-laptop-high-angle_23-2149073071.jpg",          imageAlt: "Graph"},
-          description: "Outil unique de compréhension profonde.",
-          tags: [
-            "Audit",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/desk-arrangement-with-laptop-high-angle_23-2149073071.jpg",
-          imageAlt: "Graph",
-        },
       ]}
       title="Profil REAL"
       description="Testez votre capacité comportementale avec notre outil d'analyse avancée."
@@ -280,59 +172,28 @@ export default function LandingPage() {
       useInvertedBackground={true}
       testimonials={[
         {
-          id: "1",
+          id: "1",          name: "Sarah D.",          role: "Entrepreneure",          company: "Tech",          rating: 5,
-          name: "Sarah D.",
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021828.jpg"},
-          role: "Entrepreneure",
-          company: "Tech",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021828.jpg",
-        },
         {
-          id: "2",
+          id: "2",          name: "Marc L.",          role: "Cadre",          company: "Finance",          rating: 5,
-          name: "Marc L.",
+          imageSrc: "http://img.b2bpic.net/free-photo/confident-young-man-walking-european-city-street_158595-4722.jpg"},
-          role: "Cadre",
-          company: "Finance",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/confident-young-man-walking-european-city-street_158595-4722.jpg",
-        },
         {
-          id: "3",
+          id: "3",          name: "Julie M.",          role: "Étudiante",          company: "Gestion",          rating: 5,
-          name: "Julie M.",
+          imageSrc: "http://img.b2bpic.net/free-photo/long-haired-woman-with-copyspace_1398-1356.jpg"},
-          role: "Étudiante",
-          company: "Gestion",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/long-haired-woman-with-copyspace_1398-1356.jpg",
-        },
         {
-          id: "4",
+          id: "4",          name: "Paul B.",          role: "Professionnel",          company: "Leadership",          rating: 5,
-          name: "Paul B.",
+          imageSrc: "http://img.b2bpic.net/free-photo/picture-cheerful-caucasian-man-studio_176420-7231.jpg"},
-          role: "Professionnel",
-          company: "Leadership",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/picture-cheerful-caucasian-man-studio_176420-7231.jpg",
-        },
         {
-          id: "5",
+          id: "5",          name: "Claire T.",          role: "Transition",          company: "Personal",          rating: 5,
-          name: "Claire T.",
+          imageSrc: "http://img.b2bpic.net/free-photo/office-workers-working-together-as-team_23-2149310937.jpg"},
-          role: "Transition",
-          company: "Personal",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/office-workers-working-together-as-team_23-2149310937.jpg",
-        },
       ]}
       kpiItems={[
         {
-          value: "100%",
+          value: "100%",          label: "Satisfaction"},
-          label: "Satisfaction",
-        },
         {
-          value: "10",
+          value: "10",          label: "Pays"},
-          label: "Pays",
-        },
         {
-          value: "Expert",
+          value: "Expert",          label: "Coach"},
-          label: "Coach",
-        },
       ]}
       title="Expériences de transformation"
       description="Ils ont fait confiance à l'approche de Utopie en Réalité."
@@ -344,25 +205,13 @@ export default function LandingPage() {
       useInvertedBackground={false}
       faqs={[
         {
-          id: "q1",
+          id: "q1",          title: "Comment se déroule une séance ?",          content: "Nos séances sont structurées pour une transformation optimale."},
-          title: "Comment se déroule une séance ?",
-          content: "Nos séances sont structurées pour une transformation optimale.",
-        },
         {
-          id: "q2",
+          id: "q2",          title: "Les séances sont-elles en ligne ?",          content: "Oui, nous accompagnons à distance dans plus de 10 pays."},
-          title: "Les séances sont-elles en ligne ?",
-          content: "Oui, nous accompagnons à distance dans plus de 10 pays.",
-        },
         {
-          id: "q3",
+          id: "q3",          title: "Qu'est-ce que le Profil REAL ?",          content: "Un test de capacité comportementale exclusif."},
-          title: "Qu'est-ce que le Profil REAL ?",
-          content: "Un test de capacité comportementale exclusif.",
-        },
         {
-          id: "q4",
+          id: "q4",          title: "Comment réserver ?",          content: "Via le bouton WhatsApp en bas de page."},
-          title: "Comment réserver ?",
-          content: "Via le bouton WhatsApp en bas de page.",
-        },
       ]}
       sideTitle="Questions fréquentes"
       faqsAnimation="slide-up"
@@ -373,8 +222,7 @@ export default function LandingPage() {
       <ContactSplit
       useInvertedBackground={true}
       background={{
-        variant: "plain",
+        variant: "plain"}}
-      }}
       tag="Contact"
       title="Réserver une séance"
       description="Prêt pour votre transformation ? Contactez-nous sur WhatsApp."
@@ -389,33 +237,21 @@ export default function LandingPage() {
       <FooterBase
       columns={[
         {
-          title: "Navigation",
+          title: "Navigation",          items: [
-          items: [
             {
-              label: "Accueil",
+              label: "Accueil",              href: "#hero"},
-              href: "#hero",
-            },
             {
-              label: "Services",
+              label: "Services",              href: "#services"},
-              href: "#services",
-            },
             {
-              label: "Contact",
+              label: "Contact",              href: "#contact"},
-              href: "#contact",
-            },
           ],
         },
         {
-          title: "Social",
+          title: "Social",          items: [
-          items: [
             {
-              label: "Instagram",
+              label: "Instagram",              href: "https://www.instagram.com/utopiesenrealites"},
-              href: "https://www.instagram.com/utopiesenrealites",
-            },
             {
-              label: "WhatsApp",
+              label: "WhatsApp",              href: "https://wa.me/24162781010"},
-              href: "https://wa.me/24162781010",
-            },
           ],
         },
       ]}
@@ -425,4 +261,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
+  --background: #f7f6f7;
-  --card: #f9f9f9;
+  --card: #ffffff;
-  --foreground: #000612e6;
+  --foreground: #0c1325;
-  --primary-cta: #15479c;
+  --primary-cta: #0b07ff;
-  --primary-cta-text: #ffffff;
+  --primary-cta-text: #f7f6f7;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #ffffff;
-  --secondary-cta-text: #000612e6;
+  --secondary-cta-text: #0c1325;
-  --accent: #e2e2e2;
+  --accent: #93b7ff;
-  --background-accent: #c4c4c4;
+  --background-accent: #a8bae8;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);