From 7eee695d288c124b918f703a587ef054a444d6b4 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 5 May 2026 21:38:13 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 307 +++++++++++++++++++++++------------------------
 1 file changed, 150 insertions(+), 157 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 54112bc..1318200 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -28,172 +28,165 @@ export default function LandingPage() {
         headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
-      navItems={[
-        { name: "Fonctionnalités", id: "features" },
-        { name: "Comment ça marche", id: "how-it-works" },
-        { name: "Tarifs", id: "pricing" },
-        { name: "Témoignages", id: "testimonials" },
-      ]}
-      brandName="Daria"
-      button={{ text: "Essayer gratuitement", href: "#pricing" }}
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Fonctionnalités", id: "features" },
+              { name: "Comment ça marche", id: "how-it-works" },
+              { name: "Tarifs", id: "pricing" },
+              { name: "Témoignages", id: "testimonials" },
+            ]}
+            brandName="Daria"
+            button={{ text: "Essayer gratuitement", href: "#pricing" }}
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroSplitTestimonial
-      useInvertedBackground={true}
-      background={{ variant: "radial-gradient" }}
-      title="Parle Darija comme un vrai Marocain 🇲🇦"
-      description="Daria est ton amie virtuelle marocaine — elle t'apprend le Darija par la voix, à ton rythme, en français."
-      testimonials={[
-        { name: "Marie", handle: "Utilisatrice", testimonial: "Daria rend l'apprentissage tellement naturel et ludique.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-with-long-brown-hair_1308-179038.jpg" },
-        { name: "Thomas", handle: "Apprenant", testimonial: "La meilleure façon d'apprendre le Darija sans stress.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-cartoon-style_23-2151134160.jpg" },
-        { name: "Sophie", handle: "Passionnée", testimonial: "J'adore les échanges culturels, c'est super enrichissant.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-cartoon-woman-portrait_23-2151839613.jpg" },
-        { name: "Lucas", handle: "Expert", testimonial: "Une interface fluide et une IA vraiment intelligente.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-cartoon-style_23-2151133862.jpg" },
-        { name: "Julie", handle: "Voyageuse", testimonial: "Je me sens enfin prête à converser avec ma famille au Maroc.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-collective-portrait-people_23-2150964658.jpg" }
-      ]}
-      buttons={[
-        { text: "Commencer gratuitement", href: "#pricing" },
-        { text: "Voir la démo", href: "#demo" }
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/digital-connection-technology-social-media_53876-124327.jpg"
-      mediaAnimation="slide-up"
-      avatars={[
-        { src: "http://img.b2bpic.net/free-photo/beautiful-cartoon-woman-portrait_23-2151839669.jpg", alt: "Apprenante 1" },
-        { src: "http://img.b2bpic.net/free-photo/portrait-man-cartoon-style_23-2151133899.jpg", alt: "Apprenant 1" },
-        { src: "http://img.b2bpic.net/free-photo/androgynous-avatar-non-binary-queer-person_23-2151100242.jpg", alt: "Apprenant 2" },
-        { src: "http://img.b2bpic.net/free-photo/beautiful-cartoon-woman-portrait_23-2151839664.jpg", alt: "Apprenante 2" },
-        { src: "http://img.b2bpic.net/free-photo/medium-shot-man-digital-art_23-2151197860.jpg", alt: "Apprenant 3" }
-      ]}
-      avatarText="+ 3 000 apprenants satisfaits"
-      marqueeItems={[
-        { type: "text", text: "Prononciation authentique" },
-        { type: "text", text: "Vocabulaire quotidien" },
-        { type: "text", text: "Immersion culturelle" },
-        { type: "text", text: "Apprentissage flexible" },
-        { type: "text", text: "Correction IA instantanée" }
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroSplitTestimonial
+            useInvertedBackground={true}
+            background={{ variant: "radial-gradient" }}
+            title="Parle Darija comme un vrai Marocain 🇲🇦"
+            description="Daria est ton amie virtuelle marocaine — elle t'apprend le Darija par la voix, à ton rythme, en français."
+            testimonials={[
+              { name: "Marie", handle: "Utilisatrice", testimonial: "Daria rend l'apprentissage tellement naturel et ludique.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-with-long-brown-hair_1308-179038.jpg" },
+              { name: "Thomas", handle: "Apprenant", testimonial: "La meilleure façon d'apprendre le Darija sans stress.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-cartoon-style_23-2151134160.jpg" },
+              { name: "Sophie", handle: "Passionnée", testimonial: "J'adore les échanges culturels, c'est super enrichissant.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-cartoon-woman-portrait_23-2151839613.jpg" },
+              { name: "Lucas", handle: "Expert", testimonial: "Une interface fluide et une IA vraiment intelligente.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-cartoon-style_23-2151133862.jpg" },
+              { name: "Julie", handle: "Voyageuse", testimonial: "Je me sens enfin prête à converser avec ma famille au Maroc.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-collective-portrait-people_23-2150964658.jpg" }
+            ]}
+            buttons={[
+              { text: "Commencer gratuitement", href: "#pricing" },
+              { text: "Voir la démo", href: "#demo" }
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/digital-connection-technology-social-media_53876-124327.jpg"
+            mediaAnimation="slide-up"
+            avatars={[
+              { src: "http://img.b2bpic.net/free-photo/beautiful-cartoon-woman-portrait_23-2151839669.jpg", alt: "Apprenante 1" },
+              { src: "http://img.b2bpic.net/free-photo/portrait-man-cartoon-style_23-2151133899.jpg", alt: "Apprenant 1" },
+              { src: "http://img.b2bpic.net/free-photo/androgynous-avatar-non-binary-queer-person_23-2151100242.jpg", alt: "Apprenant 2" },
+              { src: "http://img.b2bpic.net/free-photo/beautiful-cartoon-woman-portrait_23-2151839664.jpg", alt: "Apprenante 2" },
+              { src: "http://img.b2bpic.net/free-photo/medium-shot-man-digital-art_23-2151197860.jpg", alt: "Apprenant 3" }
+            ]}
+            avatarText="+ 3 000 apprenants satisfaits"
+          />
+        </div>
 
-  <div id="social-proof" data-section="social-proof">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={false}
-      names={["Plus de 3 000 apprenants", "Utilisé à Paris", "Approuvé par des experts", "Recommandé à Lyon", "Populaire à Bordeaux", "Communauté active", "Résultats rapides"]}
-      title="Rejoins + 3 000 apprenants français"
-      description="Une communauté grandissante de passionnés par le Maroc."
-    />
-  </div>
+        <div id="social-proof" data-section="social-proof">
+          <SocialProofOne
+            textboxLayout="default"
+            useInvertedBackground={false}
+            names={["Plus de 3 000 apprenants", "Utilisé à Paris", "Approuvé par des experts", "Recommandé à Lyon", "Populaire à Bordeaux", "Communauté active", "Résultats rapides"]}
+            title="Rejoins + 3 000 apprenants français"
+            description="Une communauté grandissante de passionnés par le Maroc."
+          />
+        </div>
 
-  <div id="how-it-works" data-section="how-it-works">
-      <MetricCardSeven
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={true}
-      metrics={[
-        { id: "1", value: "01", title: "Choisis un thème", items: ["Salutations", "Au marché", "Au café"] },
-        { id: "2", value: "02", title: "Parle avec Daria", items: ["Conversation orale", "Voice chat IA", "Immersion réelle"] },
-        { id: "3", value: "03", title: "Suis tes progrès", items: ["Prononciation", "Vocabulaire", "Fluidité"] }
-      ]}
-      title="Comment ça marche"
-      description="Apprendre le Darija en 3 étapes simples et naturelles."
-    />
-  </div>
+        <div id="how-it-works" data-section="how-it-works">
+          <MetricCardSeven
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={true}
+            metrics={[
+              { id: "1", value: "01", title: "Choisis un thème", items: ["Salutations", "Au marché", "Au café"] },
+              { id: "2", value: "02", title: "Parle avec Daria", items: ["Conversation orale", "Voice chat IA", "Immersion réelle"] },
+              { id: "3", value: "03", title: "Suis tes progrès", items: ["Prononciation", "Vocabulaire", "Fluidité"] }
+            ]}
+            title="Comment ça marche"
+            description="Apprendre le Darija en 3 étapes simples et naturelles."
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardTwentyNine
-      textboxLayout="default"
-      gridVariant="two-columns-alternating-heights"
-      animationType="slide-up"
-      useInvertedBackground={false}
-      features={[
-        { title: "Professeure vocale IA", description: "Une amie virtuelle disponible 24/7.", imageSrc: "http://img.b2bpic.net/free-vector/isometric-online-education-flowchart_1284-32913.jpg", titleImageSrc: "http://img.b2bpic.net/free-vector/avatars-flat-set_1284-13674.jpg", buttonText: "En savoir plus" },
-        { title: "Scénarios réels", description: "Café, marché, famille, le quotidien.", imageSrc: "http://img.b2bpic.net/free-vector/cafe-table-chairs_23-2147502979.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/shopping-bag-graph-bar-with-arrow-ecommerce-concept-blue-background-3d-illustration_56104-1794.jpg", buttonText: "En savoir plus" },
-        { title: "Correction de prononciation", description: "Améliore ton accent marocain.", imageSrc: "http://img.b2bpic.net/free-photo/white-page-vinyl-record-red-headphone-white-background_23-2147926820.jpg", titleImageSrc: "http://img.b2bpic.net/free-vector/equalizer-logo-collection-with-flat-design_23-2147831587.jpg", buttonText: "En savoir plus" },
-        { title: "Tips culturels", description: "Découvre les traditions marocaines.", imageSrc: "http://img.b2bpic.net/free-vector/travel-icons-flat_98292-1255.jpg", titleImageSrc: "http://img.b2bpic.net/free-vector/flat-design-elements-collection-reyes-magos_23-2151025814.jpg", buttonText: "En savoir plus" },
-        { title: "Suivi de progression", description: "Visualise ton évolution clairement.", imageSrc: "http://img.b2bpic.net/free-vector/statistic-icons-collection_1284-871.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/chart-statistics-front-side-with-white-background_187299-39798.jpg", buttonText: "En savoir plus" },
-        { title: "Répétition espacée", description: "Apprends efficacement et durablement.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-concentric-arrows_23-2148490593.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/flat-lay-black-arrows-notebook-mock-up-blue-background_23-2148459910.jpg", buttonText: "En savoir plus" }
-      ]}
-      title="Tout ce dont tu as besoin pour maîtriser le Darija"
-      description="Des outils conçus pour t'aider à progresser chaque jour."
-    />
-  </div>
+        <div id="features" data-section="features">
+          <FeatureCardTwentyNine
+            textboxLayout="default"
+            gridVariant="two-columns-alternating-heights"
+            animationType="slide-up"
+            useInvertedBackground={false}
+            features={[
+              { title: "Professeure vocale IA", description: "Une amie virtuelle disponible 24/7.", imageSrc: "http://img.b2bpic.net/free-vector/isometric-online-education-flowchart_1284-32913.jpg", titleImageSrc: "http://img.b2bpic.net/free-vector/avatars-flat-set_1284-13674.jpg", buttonText: "En savoir plus" },
+              { title: "Scénarios réels", description: "Café, marché, famille, le quotidien.", imageSrc: "http://img.b2bpic.net/free-vector/cafe-table-chairs_23-2147502979.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/shopping-bag-graph-bar-with-arrow-ecommerce-concept-blue-background-3d-illustration_56104-1794.jpg", buttonText: "En savoir plus" },
+              { title: "Correction de prononciation", description: "Améliore ton accent marocain.", imageSrc: "http://img.b2bpic.net/free-photo/white-page-vinyl-record-red-headphone-white-background_23-2147926820.jpg", titleImageSrc: "http://img.b2bpic.net/free-vector/equalizer-logo-collection-with-flat-design_23-2147831587.jpg", buttonText: "En savoir plus" },
+              { title: "Tips culturels", description: "Découvre les traditions marocaines.", imageSrc: "http://img.b2bpic.net/free-vector/travel-icons-flat_98292-1255.jpg", titleImageSrc: "http://img.b2bpic.net/free-vector/flat-design-elements-collection-reyes-magos_23-2151025814.jpg", buttonText: "En savoir plus" },
+              { title: "Suivi de progression", description: "Visualise ton évolution clairement.", imageSrc: "http://img.b2bpic.net/free-vector/statistic-icons-collection_1284-871.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/chart-statistics-front-side-with-white-background_187299-39798.jpg", buttonText: "En savoir plus" },
+              { title: "Répétition espacée", description: "Apprends efficacement et durablement.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-concentric-arrows_23-2148490593.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/flat-lay-black-arrows-notebook-mock-up-blue-background_23-2148459910.jpg", buttonText: "En savoir plus" }
+            ]}
+            title="Tout ce dont tu as besoin pour maîtriser le Darija"
+            description="Des outils conçus pour t'aider à progresser chaque jour."
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardThirteen
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={true}
-      testimonials={[
-        { id: "1", name: "Marie", handle: "Paris", testimonial: "Daria est géniale, c'est comme avoir une amie marocaine à la maison.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-with-long-brown-hair_1308-179038.jpg" },
-        { id: "2", name: "Thomas", handle: "Lyon", testimonial: "Ma prononciation a énormément progressé grâce aux corrections.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-cartoon-style_23-2151134160.jpg" },
-        { id: "3", name: "Sophie", handle: "Bordeaux", testimonial: "J'adore les thèmes culturels, c'est super enrichissant.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-cartoon-woman-portrait_23-2151839613.jpg" },
-        { id: "4", name: "Lucas", handle: "Paris", testimonial: "Enfin une méthode fun et efficace pour parler Darija.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-cartoon-style_23-2151133862.jpg" },
-        { id: "5", name: "Julie", handle: "Lyon", testimonial: "Je recommande Daria à tous mes amis qui aiment le Maroc.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-collective-portrait-people_23-2150964658.jpg" }
-      ]}
-      showRating={true}
-      title="Ce que disent nos apprenants"
-      description="Ils ont adopté Daria pour apprendre le Darija."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardThirteen
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={true}
+            testimonials={[
+              { id: "1", name: "Marie", handle: "Paris", testimonial: "Daria est géniale, c'est comme avoir une amie marocaine à la maison.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-with-long-brown-hair_1308-179038.jpg" },
+              { id: "2", name: "Thomas", handle: "Lyon", testimonial: "Ma prononciation a énormément progressé grâce aux corrections.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-cartoon-style_23-2151134160.jpg" },
+              { id: "3", name: "Sophie", handle: "Bordeaux", testimonial: "J'adore les thèmes culturels, c'est super enrichissant.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-cartoon-woman-portrait_23-2151839613.jpg" },
+              { id: "4", name: "Lucas", handle: "Paris", testimonial: "Enfin une méthode fun et efficace pour parler Darija.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-cartoon-style_23-2151133862.jpg" },
+              { id: "5", name: "Julie", handle: "Lyon", testimonial: "Je recommande Daria à tous mes amis qui aiment le Maroc.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-collective-portrait-people_23-2150964658.jpg" }
+            ]}
+            showRating={true}
+            title="Ce que disent nos apprenants"
+            description="Ils ont adopté Daria pour apprendre le Darija."
+          />
+        </div>
 
-  <div id="pricing" data-section="pricing">
-      <PricingCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      plans={[
-        { id: "gratuit", badge: "Gratuit", price: "0€", subtitle: "Pour débuter", features: ["5 leçons/jour", "Thèmes de base", "Progression limitée"], buttons: [{ text: "Commencer", href: "#" }] },
-        { id: "pro", badge: "Populaire", price: "9,99€/mois", subtitle: "Le plus populaire", features: ["Leçons illimitées", "Tous les thèmes", "Correction avancée", "Conversation libre"], buttons: [{ text: "Passer au Pro", href: "#" }] }
-      ]}
-      title="Simple et transparent"
-      description="Choisis l'offre qui correspond à tes objectifs."
-    />
-  </div>
+        <div id="pricing" data-section="pricing">
+          <PricingCardTwo
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            plans={[
+              { id: "gratuit", badge: "Gratuit", price: "0€", subtitle: "Pour débuter", features: ["5 leçons/jour", "Thèmes de base", "Progression limitée"], buttons: [{ text: "Commencer", href: "#" }] },
+              { id: "pro", badge: "Populaire", price: "9,99€/mois", subtitle: "Le plus populaire", features: ["Leçons illimitées", "Tous les thèmes", "Correction avancée", "Conversation libre"], buttons: [{ text: "Passer au Pro", href: "#" }] }
+            ]}
+            title="Simple et transparent"
+            description="Choisis l'offre qui correspond à tes objectifs."
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      textboxLayout="split"
-      useInvertedBackground={true}
-      faqs={[
-        { id: "1", title: "Est-ce que Daria parle vraiment en Darija ?", content: "Oui, Daria est conçue pour converser naturellement en Darija." },
-        { id: "2", title: "Je dois connaître l'arabe pour utiliser Daria ?", content: "Pas du tout, Daria t'accompagne en français." },
-        { id: "3", title: "Est-ce que l'app fonctionne sur mobile ?", content: "Oui, elle est parfaitement adaptée aux smartphones." },
-        { id: "4", title: "Comment fonctionne la correction de prononciation ?", content: "Notre IA analyse ton audio et te donne des feedbacks précis." },
-        { id: "5", title: "Puis-je annuler mon abonnement ?", content: "Tu peux annuler à tout moment dans tes paramètres." }
-      ]}
-      title="Des questions ?"
-      description="Nous avons les réponses pour toi."
-      faqsAnimation="blur-reveal"
-      imageSrc="http://img.b2bpic.net/free-vector/virtual-education-composition_1284-15818.jpg"
-      mediaAnimation="blur-reveal"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqSplitMedia
+            textboxLayout="split"
+            useInvertedBackground={true}
+            faqs={[
+              { id: "1", title: "Est-ce que Daria parle vraiment en Darija ?", content: "Oui, Daria est conçue pour converser naturellement en Darija." },
+              { id: "2", title: "Je dois connaître l'arabe pour utiliser Daria ?", content: "Pas du tout, Daria t'accompagne en français." },
+              { id: "3", title: "Est-ce que l'app fonctionne sur mobile ?", content: "Oui, elle est parfaitement adaptée aux smartphones." },
+              { id: "4", title: "Comment fonctionne la correction de prononciation ?", content: "Notre IA analyse ton audio et te donne des feedbacks précis." },
+              { id: "5", title: "Puis-je annuler mon abonnement ?", content: "Tu peux annuler à tout moment dans tes paramètres." }
+            ]}
+            title="Des questions ?"
+            description="Nous avons les réponses pour toi."
+            faqsAnimation="blur-reveal"
+            imageSrc="http://img.b2bpic.net/free-vector/virtual-education-composition_1284-15818.jpg"
+            mediaAnimation="blur-reveal"
+          />
+        </div>
 
-  <div id="final-cta" data-section="final-cta">
-      <ContactCenter
-      useInvertedBackground={false}
-      background={{ variant: "plain" }}
-      tag="Prêt pour l'aventure ?"
-      title="Prête à parler Darija ? Daria t'attend."
-      description="Sans carte bancaire. Sans engagement."
-      buttonText="Commencer gratuitement"
-    />
-  </div>
+        <div id="final-cta" data-section="final-cta">
+          <ContactCenter
+            useInvertedBackground={false}
+            background={{ variant: "plain" }}
+            tag="Prêt pour l'aventure ?"
+            title="Prête à parler Darija ? Daria t'attend."
+            description="Sans carte bancaire. Sans engagement."
+            buttonText="Commencer gratuitement"
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBaseReveal
-      logoText="Daria"
-      columns={[
-        { title: "Daria", items: [{ label: "Blog", href: "#" }, { label: "Contact", href: "#" }] },
-        { title: "Légal", items: [{ label: "Confidentialité", href: "#" }, { label: "CGU", href: "#" }] }
-      ]}
-      copyrightText="Fait avec ❤️ pour les amoureux du Maroc"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="Daria"
+            columns={[
+              { title: "Daria", items: [{ label: "Blog", href: "#" }, { label: "Contact", href: "#" }] },
+              { title: "Légal", items: [{ label: "Confidentialité", href: "#" }, { label: "CGU", href: "#" }] }
+            ]}
+            copyrightText="Fait avec ❤️ pour les amoureux du Maroc"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-- 
2.49.1