From ba14e2cdd9ef40cef0b11db220945544527a942d Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 27 Mar 2026 10:51:53 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 413 ++++++++++++++---------------------------------
 1 file changed, 122 insertions(+), 291 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 63a1356..9f3e2a2 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,7 +11,7 @@ import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarS
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
 import TextAbout from '@/components/sections/about/TextAbout';
-import { Award, Book, Car, CheckCircle, Edit, MessageCircle } from "lucide-react";
+import { Award, Book, Car, CheckCircle, Edit, MessageCircle, PartyPopper } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -19,306 +19,137 @@ export default function LandingPage() {
         defaultButtonVariant="text-stagger"
         defaultTextAnimation="entrance-slide"
         borderRadius="rounded"
+        contentWidth="medium"
+        sizing="medium"
+        background="circleGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleCentered
-      navItems={[
-        {
-          name: "Accueil",
-          id: "#hero",
-        },
-        {
-          name: "Nos Formations",
-          id: "#formations",
-        },
-        {
-          name: "À Propos",
-          id: "#pourquoi",
-        },
-        {
-          name: "Témoignages",
-          id: "#temoignages",
-        },
-        {
-          name: "Contact",
-          id: "#contact",
-        },
-      ]}
-      brandName="Dkik Rachid"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Accueil", id: "#hero" },
+              { name: "Nos Formations", id: "#formations" },
+              { name: "À Propos", id: "#pourquoi" },
+              { name: "Témoignages", id: "#temoignages" },
+              { name: "Contact", id: "#contact" }
+            ]}
+            brandName="Dkik Rachid"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroLogoBillboard
-      background={{
-        variant: "plain",
-      }}
-      logoText="Obtenez votre permis avec les meilleurs"
-      description="Auto Ecole Dkik Rachid — la référence de la formation à la conduite à Rabat. Rejoignez des milliers de conducteurs diplômés."
-      buttons={[
-        {
-          text: "Contactez-nous sur WhatsApp",
-          href: "https://wa.me/212600000000",
-        },
-        {
-          text: "Découvrir nos formations",
-          href: "#formations",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg?_wi=1"
-      mediaAnimation="slide-up"
-      imageAlt="Illustration d'une auto-école à Rabat"
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroLogoBillboard
+            logoText="Obtenez votre permis avec les meilleurs"
+            description="Auto Ecole Dkik Rachid — la référence de la formation à la conduite à Rabat. Rejoignez des milliers de conducteurs diplômés."
+            buttons={[
+              { text: "Contactez-nous sur WhatsApp", href: "https://wa.me/212600000000" },
+              { text: "Découvrir nos formations", href: "#formations" }
+            ]}
+            imageSrc="http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg"
+            mediaAnimation="slide-up"
+            background={{ variant: "plain" }}
+          />
+        </div>
 
-  <div id="social-proof" data-section="social-proof">
-      <MetricCardSeven
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      metrics={[
-        {
-          id: "m1",
-          value: "4.8 ★",
-          title: "Note Google",
-          items: [
-            "Basé sur plus de 200 avis",
-          ],
-        },
-        {
-          id: "m2",
-          value: "200+",
-          title: "Avis vérifiés",
-          items: [
-            "Étudiants satisfaits",
-          ],
-        },
-        {
-          id: "m3",
-          value: "Rabat",
-          title: "Basés à Rabat",
-          items: [
-            "Formation locale",
-          ],
-        },
-      ]}
-      title="Nos indicateurs de réussite"
-      description="Des résultats concrets pour une formation de qualité supérieure."
-    />
-  </div>
+        <div id="social-proof" data-section="social-proof">
+          <MetricCardSeven
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            metrics={[
+              { id: "m1", value: "4.8 ★", title: "Note Google", items: ["Basé sur plus de 200 avis"] },
+              { id: "m2", value: "200+", title: "Avis vérifiés", items: ["Étudiants satisfaits"] },
+              { id: "m3", value: "Rabat", title: "Basés à Rabat", items: ["Formation locale"] }
+            ]}
+            title="Nos indicateurs de réussite"
+            description="Des résultats concrets pour une formation de qualité supérieure."
+          />
+        </div>
 
-  <div id="formations" data-section="formations">
-      <ProductCardOne
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "p1",
-          name: "Permis B (Voiture)",
-          price: "Sur demande",
-          imageSrc: "http://img.b2bpic.net/free-vector/taxi-service-onboarding-app-screens_52683-33492.jpg?_wi=1",
-        },
-        {
-          id: "p2",
-          name: "Permis A (Moto)",
-          price: "Sur demande",
-          imageSrc: "http://img.b2bpic.net/free-vector/vintage-motorcycle-print-monochrome-dark-background_1284-38773.jpg",
-        },
-        {
-          id: "p3",
-          name: "Formation Code Seul",
-          price: "Sur demande",
-          imageSrc: "http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg?_wi=2",
-        },
-      ]}
-      title="Nos Formations"
-      description="Choisissez la formation qui correspond à vos besoins"
-    />
-  </div>
+        <div id="formations" data-section="formations">
+          <ProductCardOne
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={false}
+            products={[
+              { id: "p1", name: "Permis B (Voiture)", price: "Sur demande", imageSrc: "http://img.b2bpic.net/free-vector/taxi-service-onboarding-app-screens_52683-33492.jpg" },
+              { id: "p2", name: "Permis A (Moto)", price: "Sur demande", imageSrc: "http://img.b2bpic.net/free-vector/vintage-motorcycle-print-monochrome-dark-background_1284-38773.jpg" },
+              { id: "p3", name: "Formation Code Seul", price: "Sur demande", imageSrc: "http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg" }
+            ]}
+            title="Nos Formations"
+            description="Choisissez la formation qui correspond à vos besoins"
+          />
+        </div>
 
-  <div id="processus" data-section="processus">
-      <FeatureCardTwentyFive
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      features={[
-        {
-          title: "Inscription",
-          description: "Inscrivez-vous à l'auto-école et choisissez votre formation.",
-          icon: Edit,
-          mediaItems: [
-            {
-              imageSrc: "http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg?_wi=3",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg?_wi=4",
-            },
-          ],
-        },
-        {
-          title: "Formation théorique",
-          description: "Suivez les cours de code de la route avec des experts.",
-          icon: Book,
-          mediaItems: [
-            {
-              imageSrc: "http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg?_wi=5",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg?_wi=6",
-            },
-          ],
-        },
-        {
-          title: "Examen du code",
-          description: "Passez et réussissez votre examen théorique officiel.",
-          icon: CheckCircle,
-          mediaItems: [
-            {
-              imageSrc: "http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg?_wi=7",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg?_wi=8",
-            },
-          ],
-        },
-        {
-          title: "Formation pratique",
-          description: "Prenez vos heures de conduite avec un moniteur patient.",
-          icon: Car,
-          mediaItems: [
-            {
-              imageSrc: "http://img.b2bpic.net/free-vector/taxi-service-onboarding-app-screens_52683-33492.jpg?_wi=2",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-vector/taxi-service-onboarding-app-screens_52683-33492.jpg?_wi=3",
-            },
-          ],
-        },
-        {
-          title: "Examen pratique",
-          description: "Passez votre test de conduite final pour votre permis.",
-          icon: Car,
-          mediaItems: [
-            {
-              imageSrc: "http://img.b2bpic.net/free-vector/taxi-service-onboarding-app-screens_52683-33492.jpg?_wi=4",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-vector/taxi-service-onboarding-app-screens_52683-33492.jpg?_wi=5",
-            },
-          ],
-        },
-        {
-          title: "Félicitations !",
-          description: "Récupérez votre permis de conduire et prenez la route.",
-          icon: Award,
-          mediaItems: [
-            {
-              imageSrc: "http://img.b2bpic.net/free-vector/taxi-service-onboarding-app-screens_52683-33492.jpg?_wi=6",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-vector/taxi-service-onboarding-app-screens_52683-33492.jpg?_wi=7",
-            },
-          ],
-        },
-      ]}
-      title="Comment obtenir votre permis ?"
-      description="Un parcours simple en 6 étapes pour vous accompagner vers le succès."
-    />
-  </div>
+        <div id="processus" data-section="processus">
+          <FeatureCardTwentyFive
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            features={[
+              { title: "Inscription", description: "Inscrivez-vous à l'auto-école et choisissez votre formation.", icon: Edit, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg" }, { imageSrc: "http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg" }] },
+              { title: "Formation théorique", description: "Suivez les cours de code de la route avec des experts.", icon: Book, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg" }, { imageSrc: "http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg" }] },
+              { title: "Examen du code", description: "Passez et réussissez votre examen théorique officiel.", icon: CheckCircle, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg" }, { imageSrc: "http://img.b2bpic.net/free-vector/zebra-crossing-road-composition_1284-17917.jpg" }] },
+              { title: "Formation pratique", description: "Prenez vos heures de conduite avec un moniteur patient.", icon: Car, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-vector/taxi-service-onboarding-app-screens_52683-33492.jpg" }, { imageSrc: "http://img.b2bpic.net/free-vector/taxi-service-onboarding-app-screens_52683-33492.jpg" }] },
+              { title: "Examen pratique", description: "Passez votre test de conduite final pour votre permis.", icon: Car, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-vector/taxi-service-onboarding-app-screens_52683-33492.jpg" }, { imageSrc: "http://img.b2bpic.net/free-vector/taxi-service-onboarding-app-screens_52683-33492.jpg" }] },
+              { title: "Félicitations !", description: "Récupérez votre permis de conduire et prenez la route.", icon: PartyPopper, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-vector/taxi-service-onboarding-app-screens_52683-33492.jpg" }, { imageSrc: "http://img.b2bpic.net/free-vector/taxi-service-onboarding-app-screens_52683-33492.jpg" }] }
+            ]}
+            title="Comment obtenir votre permis ?"
+            description="Un parcours simple en 6 étapes pour vous accompagner vers le succès."
+          />
+        </div>
 
-  <div id="pourquoi" data-section="pourquoi">
-      <TextAbout
-      useInvertedBackground={false}
-      title="Pourquoi choisir Auto Ecole Dkik Rachid ?"
-      buttons={[
-        {
-          text: "Contactez-nous",
-          href: "https://wa.me/212600000000",
-        },
-      ]}
-    />
-  </div>
+        <div id="pourquoi" data-section="pourquoi">
+          <TextAbout
+            useInvertedBackground={false}
+            title="Pourquoi choisir Auto Ecole Dkik Rachid ?"
+            buttons={[{ text: "Contactez-nous", href: "https://wa.me/212600000000" }]}
+          />
+        </div>
 
-  <div id="temoignages" data-section="temoignages">
-      <TestimonialCardSix
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      testimonials={[
-        {
-          id: "t1",
-          name: "Fatima Z.",
-          handle: "@fatimaz",
-          testimonial: "J'ai obtenu mon permis du premier coup grâce à Auto Ecole Dkik Rachid. Les moniteurs sont patients et professionnels.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-dark-curly-hair-driving-yellow-car-came-pick-up-takeaway-food_1321-2342.jpg?_wi=1",
-        },
-        {
-          id: "t2",
-          name: "Youssef M.",
-          handle: "@youssefm",
-          testimonial: "Une formation excellente et des moniteurs à l'écoute. Je recommande vivement !",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-dark-curly-hair-driving-yellow-car-came-pick-up-takeaway-food_1321-2342.jpg?_wi=2",
-        },
-        {
-          id: "t3",
-          name: "Sara A.",
-          handle: "@saraa",
-          testimonial: "Le code est très bien expliqué. J'ai progressé très rapidement grâce à leur pédagogie.",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-dark-curly-hair-driving-yellow-car-came-pick-up-takeaway-food_1321-2342.jpg?_wi=3",
-        },
-        {
-          id: "t4",
-          name: "Amine K.",
-          handle: "@aminek",
-          testimonial: "Super auto-école, très pédagogique et accueillante. Merci pour l'accompagnement !",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-dark-curly-hair-driving-yellow-car-came-pick-up-takeaway-food_1321-2342.jpg?_wi=4",
-        },
-      ]}
-      title="Ce que disent nos étudiants"
-      description="Découvrez les retours d'expérience de ceux qui ont réussi leur permis avec nous."
-    />
-  </div>
+        <div id="temoignages" data-section="temoignages">
+          <TestimonialCardSix
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={true}
+            testimonials={[
+              { id: "t1", name: "Fatima Z.", handle: "@fatimaz", testimonial: "J'ai obtenu mon permis du premier coup grâce à Auto Ecole Dkik Rachid. Les moniteurs sont patients et professionnels.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-dark-curly-hair-driving-yellow-car-came-pick-up-takeaway-food_1321-2342.jpg" },
+              { id: "t2", name: "Youssef M.", handle: "@youssefm", testimonial: "Une formation excellente et des moniteurs à l'écoute. Je recommande vivement !", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-dark-curly-hair-driving-yellow-car-came-pick-up-takeaway-food_1321-2342.jpg" },
+              { id: "t3", name: "Sara A.", handle: "@saraa", testimonial: "Le code est très bien expliqué. J'ai progressé très rapidement grâce à leur pédagogie.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-dark-curly-hair-driving-yellow-car-came-pick-up-takeaway-food_1321-2342.jpg" },
+              { id: "t4", name: "Amine K.", handle: "@aminek", testimonial: "Super auto-école, très pédagogique et accueillante. Merci pour l'accompagnement !", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-dark-curly-hair-driving-yellow-car-came-pick-up-takeaway-food_1321-2342.jpg" }
+            ]}
+            title="Ce que disent nos étudiants"
+            description="Découvrez les retours d'expérience de ceux qui ont réussi leur permis avec nous."
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactFaq
-      animationType="slide-up"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "q1",
-          title: "Comment s'inscrire ?",
-          content: "Contactez-nous sur WhatsApp pour une procédure rapide et simple.",
-        },
-        {
-          id: "q2",
-          title: "Quels sont les tarifs ?",
-          content: "Contactez-nous par téléphone pour une discussion personnalisée adaptée à votre besoin.",
-        },
-        {
-          id: "q3",
-          title: "Où êtes-vous basés ?",
-          content: "Nous sommes situés à Rabat, au Maroc, prêts à vous accueillir.",
-        },
-      ]}
-      ctaTitle="Prêt à commencer ?"
-      ctaDescription="Contactez-nous directement sur WhatsApp ou par téléphone pour démarrer votre aventure."
-      ctaButton={{
-        text: "Envoyer un message",
-        href: "https://wa.me/212600000000",
-      }}
-      ctaIcon={MessageCircle}
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactFaq
+            animationType="slide-up"
+            useInvertedBackground={false}
+            faqs={[
+              { id: "q1", title: "Comment s'inscrire ?", content: "Contactez-nous sur WhatsApp pour une procédure rapide et simple." },
+              { id: "q2", title: "Quels sont les tarifs ?", content: "Contactez-nous par téléphone pour une discussion personnalisée adaptée à votre besoin." },
+              { id: "q3", title: "Où êtes-vous basés ?", content: "Nous sommes situés à Rabat, au Maroc, prêts à vous accueillir." }
+            ]}
+            ctaTitle="Prêt à commencer ?"
+            ctaDescription="Contactez-nous directement sur WhatsApp ou par téléphone pour démarrer votre aventure."
+            ctaButton={{ text: "Envoyer un message", href: "https://wa.me/212600000000" }}
+            ctaIcon={MessageCircle}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterCard
-      logoText="Auto Ecole Dkik Rachid"
-      copyrightText="© 2026 Auto Ecole Dkik Rachid — Tous droits réservés"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterCard
+            logoText="Auto Ecole Dkik Rachid"
+            copyrightText="© 2026 Auto Ecole Dkik Rachid — Tous droits réservés"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );