Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -9,7 +9,7 @@ import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwent
 import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
 import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import { Sparkles, Zap, Target, Award, Smartphone, Globe } from "lucide-react";
+import { Sparkles, Zap, Target, Award, Smartphone, Globe, MapPin } from "lucide-react";
 
 export default function WebAgency2Page() {
   return (
@@ -21,7 +21,7 @@ export default function WebAgency2Page() {
       sizing="medium"
       background="none"
       cardStyle="glass-elevated"
-      primaryButtonStyle="metallic"
+      primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
       headingFontWeight="medium"
     >
@@ -30,49 +30,73 @@ export default function WebAgency2Page() {
           brandName="NR web"
           navItems={[
             { name: "Services", id: "services" },
+            { name: "Service Area", id: "service-area" },
             { name: "Tarif", id: "tarif" },
             { name: "Contact", id: "contact" },
           ]}
-          button={{ text: "WhatsApp", href: "#contact" }}
+          button={{ text: "WhatsApp", href: "https://wa.me/33756836641" }}
-        />
-        <HeroSplitDoubleCarousel
-          title="Création de sites internet professionnels"
-          description="Je crée des sites internet professionnels modernes, rapides et simples pour artisans et entrepreneurs. Présentez votre activité et gagnez la confiance de vos clients."
-          tag="Service Pro & Local"
-          tagIcon={Sparkles}
-          tagAnimation="slide-up"
-          background={{ variant: "canvas-reveal" }}
-          buttons={[{ text: "Contact WhatsApp", href: "#contact" }]}
-          buttonAnimation="slide-up"
-          carouselPosition="right"
-          leftCarouselItems={[
-            { imageSrc: "http://img.b2bpic.net/free-photo/people-working-laptop-meeting_53876-94702.jpg", imageAlt: "Site vitrine artisan" },
-            { imageSrc: "http://img.b2bpic.net/free-photo/man-taking-e-leraning-courses_23-2149231583.jpg", imageAlt: "Interface mobile" },
-          ]}
-          rightCarouselItems={[
-            { imageSrc: "http://img.b2bpic.net/free-photo/office-worker-analyzing-business-charts-laptop-using-paperwork-research-information-make-data-report-working-from-home-startup-analysis-with-web-graphs-browsing-internet_482257-50961.jpg", imageAlt: "Dashboard simple" },
-            { imageSrc: "http://img.b2bpic.net/free-photo/web-design-concepts-with-blurred-background_1134-82.jpg", imageAlt: "Design épuré" },
-          ]}
-          carouselItemClassName="!aspect-[4/5]"
-        />
-        <FeatureBento
-          title="Mon service"
-          description="Des solutions digitales pensées pour votre efficacité."
-          textboxLayout="default"
-          useInvertedBackground={false}
-          animationType="slide-up"
-          features={[
-            {
-              title: "Livraison rapide",              description: "Votre projet est mis en ligne rapidement.",              bentoComponent: "reveal-icon",              icon: Zap,
-            },
-            {
-              title: "Compatible mobile",              description: "Un affichage parfait sur téléphone et ordinateur.",              bentoComponent: "reveal-icon",              icon: Smartphone,
-            },
-            {
-              title: "Site propre & simple",              description: "Un design adapté à vos besoins spécifiques.",              bentoComponent: "reveal-icon",              icon: Target,
-            },
-          ]}
         />
+        <div id="hero">
+          <HeroSplitDoubleCarousel
+            title="Création de sites internet professionnels"
+            description="Je crée des sites internet professionnels modernes, rapides et simples pour artisans et entrepreneurs. Présentez votre activité et gagnez la confiance de vos clients."
+            tag="Service Pro & Local"
+            tagIcon={Sparkles}
+            tagAnimation="slide-up"
+            background={{ variant: "canvas-reveal" }}
+            buttons={[{ text: "Contact WhatsApp", href: "https://wa.me/33756836641" }]}
+            buttonAnimation="slide-up"
+            carouselPosition="right"
+            leftCarouselItems={[
+              { imageSrc: "http://img.b2bpic.net/free-photo/people-working-laptop-meeting_53876-94702.jpg", imageAlt: "Site vitrine artisan" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/man-taking-e-leraning-courses_23-2149231583.jpg", imageAlt: "Interface mobile" },
+            ]}
+            rightCarouselItems={[
+              { imageSrc: "http://img.b2bpic.net/free-photo/office-worker-analyzing-business-charts-laptop-using-paperwork-research-information-make-data-report-working-from-home-startup-analysis-with-web-graphs-browsing-internet_482257-50961.jpg", imageAlt: "Dashboard simple" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/web-design-concepts-with-blurred-background_1134-82.jpg", imageAlt: "Design épuré" },
+            ]}
+            carouselItemClassName="!aspect-[4/5]"
+          />
+        </div>
+        <div id="services">
+          <FeatureBento
+            title="Mon service"
+            description="Des solutions digitales pensées pour votre efficacité."
+            textboxLayout="default"
+            useInvertedBackground={false}
+            animationType="slide-up"
+            features={[
+              {
+                title: "Livraison rapide",              description: "Votre projet est mis en ligne rapidement.",              icon: Zap,
+                bentoComponent: "reveal-icon"
+              },
+              {
+                title: "Compatible mobile",              description: "Un affichage parfait sur téléphone et ordinateur.",              icon: Smartphone,
+                bentoComponent: "reveal-icon"
+              },
+              {
+                title: "Site propre & simple",              description: "Un design adapté à vos besoins spécifiques.",              icon: Target,
+                bentoComponent: "reveal-icon"
+              },
+            ]}
+          />
+        </div>
+        <div id="service-area">
+          <FeatureBento
+            title="Zone d'intervention"
+            description="Je propose mes services dans la magnifique région de la Dordogne."
+            textboxLayout="default"
+            useInvertedBackground={true}
+            animationType="slide-up"
+            features={[
+              {
+                title: "Dordogne & Environs",                description: "Accompagnement de proximité pour les acteurs locaux de la Dordogne.",                icon: MapPin,
+                bentoComponent: "reveal-icon"
+              }
+            ]}
+            buttons={[{ text: "Voir la zone sur Google Maps", href: "https://www.google.com/maps/place/Dordogne/" }]}
+          />
+        </div>
         <FeatureCardTwentySix
           title="Ce que vous recevez"
           description="Un pack complet pour lancer votre présence en ligne."
@@ -94,26 +118,30 @@ export default function WebAgency2Page() {
             },
           ]}
         />
-        <MetricCardOne
+        <div id="tarif">
-          title="Tarif clair"
+          <MetricCardOne
-          description="Pas de frais cachés, une tarification transparente."
+            title="Tarif clair"
-          textboxLayout="default"
+            description="Pas de frais cachés, une tarification transparente."
-          useInvertedBackground={false}
+            textboxLayout="default"
-          gridVariant="uniform-all-items-equal"
+            useInvertedBackground={false}
-          animationType="slide-up"
+            gridVariant="uniform-all-items-equal"
-          metrics={[
+            animationType="slide-up"
-            { id: "price", value: "400€", title: "Prix de départ", description: "Site internet complet et professionnel", icon: Award },
+            metrics={[
-          ]}
+              { id: "price", value: "400€", title: "Prix de départ", description: "Site internet complet et professionnel", icon: Award },
-        />
+            ]}
-        <ContactCTA
+          />
-          tag="Contact"
+        </div>
-          title="Prêt à lancer votre site ?"
+        <div id="contact">
-          description="Contactez-moi via WhatsApp pour m'envoyer vos informations et photos de projet."
+          <ContactCTA
-          background={{ variant: "rotated-rays-animated" }}
+            tag="Contact"
-          buttons={[{ text: "👉 Envoyer un message WhatsApp", href: "https://wa.me/" }]}
+            title="Prêt à lancer votre site ?"
-          buttonAnimation="slide-up"
+            description="Contactez-moi via WhatsApp pour m'envoyer vos informations et photos de projet."
-          useInvertedBackground={false}
+            background={{ variant: "rotated-rays-animated" }}
-        />
+            buttons={[{ text: "👉 Envoyer un message WhatsApp", href: "https://wa.me/33756836641" }]}
+            buttonAnimation="slide-up"
+            useInvertedBackground={false}
+          />
+        </div>
         <FooterBase
           logoText="NR web"
           copyrightText="© 2025 | Création de sites"
@@ -122,4 +150,4 @@ export default function WebAgency2Page() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}