From c1b9e3727ad03bf08ebc4b7043cd23da3f202514 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Thu, 7 May 2026 12:41:54 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 334 ++++++++---------------------------------------
 1 file changed, 54 insertions(+), 280 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 630d890..512b5cb 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -32,160 +32,63 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline
       navItems={[
-        {
-          name: "Accueil",
-          id: "#hero",
-        },
-        {
-          name: "Offres",
-          id: "#offres",
-        },
-        {
-          name: "Exemples",
-          id: "#exemples",
-        },
-        {
-          name: "Contact",
-          id: "#contact",
-        },
+        { name: "Accueil", id: "#hero" },
+        { name: "Offres", id: "#offres" },
+        { name: "Exemples", id: "#exemples" },
+        { name: "Contact", id: "#contact" },
       ]}
       brandName="VELA"
-      button={{
-        text: "Audit gratuit",
-        href: "#contact",
-      }}
+      button={{ text: "Audit gratuit", href: "#contact" }}
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroSplitDoubleCarousel
-      background={{
-        variant: "gradient-bars",
-      }}
+      background={{ variant: "gradient-bars" }}
       title="Transformez votre salon en référence premium locale."
       description="VELA accompagne les salons de coiffure modernes avec des sites haut de gamme, une réservation intelligente et une image digitale qui attire les bons clients — en pilote automatique."
       leftCarouselItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/pink-orchids-vase-windowsill-with-white-chairs_181624-10971.jpg",
-          imageAlt: "luxury hair salon interior",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/empty-therapist-office-with-modern-furniture-decorations_482257-108008.jpg",
-          imageAlt: "Empty therapist office with modern furniture and decorations",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/world-theatre-day-celebration_23-2151185639.jpg",
-          imageAlt: "World theatre day celebration",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/high-end-professional-cabinet-used-psychotherapy-meetings_482257-117710.jpg",
-          imageAlt: "High end professional cabinet used for psychotherapy meetings",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/interior-latino-hair-salon_23-2150555185.jpg",
-          imageAlt: "Interior of latino hair salon",
-        },
+        { imageSrc: "http://img.b2bpic.net/free-photo/pink-orchids-vase-windowsill-with-white-chairs_181624-10971.jpg", imageAlt: "luxury hair salon interior" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/empty-therapist-office-with-modern-furniture-decorations_482257-108008.jpg", imageAlt: "Empty therapist office with modern furniture and decorations" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/world-theatre-day-celebration_23-2151185639.jpg", imageAlt: "World theatre day celebration" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/high-end-professional-cabinet-used-psychotherapy-meetings_482257-117710.jpg", imageAlt: "High end professional cabinet used for psychotherapy meetings" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/interior-latino-hair-salon_23-2150555185.jpg", imageAlt: "Interior of latino hair salon" }
       ]}
       rightCarouselItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/skies-snowboard-lounge-area_482257-76730.jpg",
-          imageAlt: "luxury hair salon interior",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/anime-style-beauty-salon-with-cosmetology-equipment_23-2151500998.jpg",
-          imageAlt: "Anime style beauty salon with cosmetology equipment",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-leather-barber-shop-chair_23-2148242807.jpg",
-          imageAlt: "Side view of leather barber shop chair",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/lodge-wintertime-with-ski-gear_482257-76632.jpg",
-          imageAlt: "Lodge in wintertime with ski gear",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/barbershop-washbasin-with-professional-chairs_23-2148298338.jpg",
-          imageAlt: "Barbershop washbasin with professional chairs",
-        },
+        { imageSrc: "http://img.b2bpic.net/free-photo/skies-snowboard-lounge-area_482257-76730.jpg", imageAlt: "luxury hair salon interior" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/anime-style-beauty-salon-with-cosmetology-equipment_23-2151500998.jpg", imageAlt: "Anime style beauty salon with cosmetology equipment" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/side-view-leather-barber-shop-chair_23-2148242807.jpg", imageAlt: "Side view of leather barber shop chair" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/lodge-wintertime-with-ski-gear_482257-76632.jpg", imageAlt: "Lodge in wintertime with ski gear" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/barbershop-washbasin-with-professional-chairs_23-2148298338.jpg", imageAlt: "Barbershop washbasin with professional chairs" }
       ]}
       tag="Agence digitale pour salons de coiffure"
-      buttons={[
-        {
-          text: "Demander un audit gratuit",
-          href: "#contact",
-        },
-        {
-          text: "Voir les offres",
-          href: "#offres",
-        },
-      ]}
+      buttons={[{ text: "Demander un audit gratuit", href: "#contact" }, { text: "Voir les offres", href: "#offres" }]}
       tagIcon={Sparkles}
       avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/empty-therapist-office-with-modern-furniture-decorations_482257-108008.jpg",
-          alt: "Client 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/world-theatre-day-celebration_23-2151185639.jpg",
-          alt: "Client 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/high-end-professional-cabinet-used-psychotherapy-meetings_482257-117710.jpg",
-          alt: "Client 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/interior-latino-hair-salon_23-2150555185.jpg",
-          alt: "Client 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/anime-style-beauty-salon-with-cosmetology-equipment_23-2151500998.jpg",
-          alt: "Client 5",
-        },
+        { src: "http://img.b2bpic.net/free-photo/empty-therapist-office-with-modern-furniture-decorations_482257-108008.jpg", alt: "Client 1" },
+        { src: "http://img.b2bpic.net/free-photo/world-theatre-day-celebration_23-2151185639.jpg", alt: "Client 2" },
+        { src: "http://img.b2bpic.net/free-photo/high-end-professional-cabinet-used-psychotherapy-meetings_482257-117710.jpg", alt: "Client 3" },
+        { src: "http://img.b2bpic.net/free-photo/interior-latino-hair-salon_23-2150555185.jpg", alt: "Client 4" },
+        { src: "http://img.b2bpic.net/free-photo/anime-style-beauty-salon-with-cosmetology-equipment_23-2151500998.jpg", alt: "Client 5" }
       ]}
       avatarText="Rejoignez 50+ salons partenaires"
       marqueeItems={[
-        {
-          type: "text",
-          text: "SEO Local",
-        },
-        {
-          type: "text",
-          text: "Réservation 24/7",
-        },
-        {
-          type: "text",
-          text: "Design Premium",
-        },
-        {
-          type: "text",
-          text: "Croissance",
-        },
-        {
-          type: "text",
-          text: "Image de Marque",
-        },
+        { type: "text", text: "SEO Local" },
+        { type: "text", text: "Réservation 24/7" },
+        { type: "text", text: "Design Premium" },
+        { type: "text", text: "Croissance" },
+        { type: "text", text: "Image de Marque" }
       ]}
     />
   </div>
 
   <div id="problemes" data-section="problemes">
       <FeatureCardSixteen
+      animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={true}
-      negativeCard={{
-        items: [
-          "Trop d'appels pendant vos prestations",
-          "Des réservations qui vous échappent",
-          "Une image digitale dépassée",
-        ],
-      }}
-      positiveCard={{
-        items: [
-          "Peu de visibilité sur Google",
-          "Dépendance à Instagram",
-          "Délais de réponse trop longs",
-        ],
-      }}
+      negativeCard={{ items: ["Trop d'appels pendant vos prestations", "Des réservations qui vous échappent", "Une image digitale dépassée"] }}
+      positiveCard={{ items: ["Peu de visibilité sur Google", "Dépendance à Instagram", "Délais de réponse trop longs"] }}
       title="Votre image digitale influence la qualité de votre clientèle."
       description="Un site vieillissant ou une mauvaise visibilité vous coûtent des opportunités chaque jour."
     />
@@ -196,21 +99,9 @@ export default function LandingPage() {
       useInvertedBackground={false}
       title="D'un salon local à une référence digitale premium"
       metrics={[
-        {
-          icon: Check,
-          label: "Avant",
-          value: "Image vieillissante",
-        },
-        {
-          icon: Star,
-          label: "Après",
-          value: "Référence locale",
-        },
-        {
-          icon: TrendingUp,
-          label: "Impact",
-          value: "Planning optimisé",
-        },
+        { icon: Check, label: "Avant", value: "Image vieillissante" },
+        { icon: Star, label: "Après", value: "Référence locale" },
+        { icon: TrendingUp, label: "Impact", value: "Planning optimisé" }
       ]}
       metricsAnimation="slide-up"
     />
@@ -222,39 +113,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       plans={[
-        {
-          id: "p1",
-          badge: "Base",
-          price: "590€",
-          subtitle: "Présence Moderne",
-          features: [
-            "Site premium sur-mesure",
-            "SEO local",
-            "Maintenance incluse",
-          ],
-        },
-        {
-          id: "p2",
-          badge: "Recommandé",
-          price: "1 490€",
-          subtitle: "Réservation Auto",
-          features: [
-            "Tout du pack Base",
-            "Booking 24/7",
-            "Confirmation SMS",
-          ],
-        },
-        {
-          id: "p3",
-          badge: "Premium",
-          price: "3 490€",
-          subtitle: "Salon Premium Digital",
-          features: [
-            "Branding complet",
-            "Campagnes pub",
-            "Suivi VIP 4h",
-          ],
-        },
+        { id: "p1", badge: "Base", price: "590€", subtitle: "Présence Moderne", features: ["Site premium sur-mesure", "SEO local", "Maintenance incluse"] },
+        { id: "p2", badge: "Recommandé", price: "1 490€", subtitle: "Réservation Auto", features: ["Tout du pack Base", "Booking 24/7", "Confirmation SMS"] },
+        { id: "p3", badge: "Premium", price: "3 490€", subtitle: "Salon Premium Digital", features: ["Branding complet", "Campagnes pub", "Suivi VIP 4h"] }
       ]}
       title="Une offre pensée pour chaque étape de votre croissance."
       description="Choisissez l'offre adaptée à votre situation actuelle."
@@ -267,26 +128,10 @@ export default function LandingPage() {
       title="Le secteur en chiffres"
       tag="Pourquoi agir maintenant"
       metrics={[
-        {
-          id: "m1",
-          value: "76%",
-          description: "consommateurs consultent le site web avant de visiter.",
-        },
-        {
-          id: "m2",
-          value: "40%",
-          description: "appels téléphoniques restent sans réponse.",
-        },
-        {
-          id: "m3",
-          value: "3×",
-          description: "plus de réservations avec prise de RDV en ligne.",
-        },
-        {
-          id: "m4",
-          value: "68%",
-          description: "clients choisissent via la présence en ligne.",
-        },
+        { id: "m1", value: "76%", description: "consommateurs consultent le site web avant de visiter." },
+        { id: "m2", value: "40%", description: "appels téléphoniques restent sans réponse." },
+        { id: "m3", value: "3×", description: "plus de réservations avec prise de RDV en ligne." },
+        { id: "m4", value: "68%", description: "clients choisissent via la présence en ligne." }
       ]}
       metricsAnimation="slide-up"
     />
@@ -299,24 +144,9 @@ export default function LandingPage() {
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={true}
       products={[
-        {
-          id: "c1",
-          name: "Maison Élora",
-          price: "Premium",
-          imageSrc: "http://img.b2bpic.net/free-photo/barber-woman-customer-towels_23-2147737015.jpg",
-        },
-        {
-          id: "c2",
-          name: "Noir Studio",
-          price: "Branding",
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-stylish-white-suit-sits-white-cube-gallery_8353-10744.jpg",
-        },
-        {
-          id: "c3",
-          name: "Atelier Coiffure",
-          price: "Vitrine",
-          imageSrc: "http://img.b2bpic.net/free-photo/cozy-composition-with-mirror-decorative-details-bright-room-interior_169016-28687.jpg",
-        },
+        { id: "c1", name: "Maison Élora", price: "Premium", imageSrc: "http://img.b2bpic.net/free-photo/barber-woman-customer-towels_23-2147737015.jpg" },
+        { id: "c2", name: "Noir Studio", price: "Branding", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-stylish-white-suit-sits-white-cube-gallery_8353-10744.jpg" },
+        { id: "c3", name: "Atelier Coiffure", price: "Vitrine", imageSrc: "http://img.b2bpic.net/free-photo/cozy-composition-with-mirror-decorative-details-bright-room-interior_169016-28687.jpg" }
       ]}
       title="Réalisations"
       description="Exemples de qualité pour nos clients salons."
@@ -328,18 +158,8 @@ export default function LandingPage() {
       animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={false}
-      negativeCard={{
-        items: [
-          "Audit gratuit",
-          "Stratégie",
-        ],
-      }}
-      positiveCard={{
-        items: [
-          "Mise en ligne",
-          "Optimisation continue",
-        ],
-      }}
+      negativeCard={{ items: ["Audit gratuit", "Stratégie"] }}
+      positiveCard={{ items: ["Mise en ligne", "Optimisation continue"] }}
       title="Un processus simple"
       description="Structure claire, livraison rapide."
     />
@@ -350,21 +170,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       faqs={[
-        {
-          id: "q1",
-          title: "Temps de mise en ligne ?",
-          content: "10 à 21 jours.",
-        },
-        {
-          id: "q2",
-          title: "Engagement ?",
-          content: "Aucun, abonnement libre.",
-        },
-        {
-          id: "q3",
-          title: "Gestion outils ?",
-          content: "Nous gérons tout.",
-        },
+        { id: "q1", title: "Temps de mise en ligne ?", content: "10 à 21 jours." },
+        { id: "q2", title: "Engagement ?", content: "Aucun, abonnement libre." },
+        { id: "q3", title: "Gestion outils ?", content: "Nous gérons tout." }
       ]}
       title="Questions fréquentes"
       description="Tout ce que vous devez savoir."
@@ -375,60 +183,26 @@ export default function LandingPage() {
   <div id="cta-final" data-section="cta-final">
       <ContactText
       useInvertedBackground={false}
-      background={{
-        variant: "rotated-rays-static-grid",
-      }}
+      background={{ variant: "rotated-rays-static-grid" }}
       text="Demandez votre audit gratuit de 30 min."
-      buttons={[
-        {
-          text: "Démarrer mon audit",
-          href: "#contact",
-        },
-      ]}
+      buttons={[{ text: "Démarrer mon audit", href: "#contact" }]}
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactText
       useInvertedBackground={true}
-      background={{
-        variant: "plain",
-      }}
+      background={{ variant: "plain" }}
       text="Contactez-nous pour transformer votre salon."
-      buttons={[
-        {
-          text: "Contact par email",
-          href: "mailto:contact@vela-agency.fr",
-        },
-      ]}
+      buttons={[{ text: "Contact par email", href: "mailto:contact@vela-agency.fr" }]}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterBase
       columns={[
-        {
-          title: "Navigation",
-          items: [
-            {
-              label: "Accueil",
-              href: "#hero",
-            },
-            {
-              label: "Offres",
-              href: "#offres",
-            },
-          ],
-        },
-        {
-          title: "Légal",
-          items: [
-            {
-              label: "Mentions légales",
-              href: "#",
-            },
-          ],
-        },
+        { title: "Navigation", items: [{ label: "Accueil", href: "#hero" }, { label: "Offres", href: "#offres" }] },
+        { title: "Légal", items: [{ label: "Mentions légales", href: "#" }] }
       ]}
       logoText="VELA Agency"
     />