feat: refonte complète landing page - nouveau copywriting + 3 démos

- SEO: nouveau title/description optimisé artisans BTP Nord (59)
- Navbar: CTA téléphone cliquable + menu simplifié
- Hero: fond sombre, H1 percutant "aussi solide que vos ouvrages"
- Nouvelle section Problématique (identification pain points)
- System: redesign sombre "Dossier de Confiance" avec 3 piliers tech
- Démos Live: 3 cards vers /macon, /paysagiste, /plombier
- FAQ: nouvelles questions orientées objections (Facebook, site gratuit)
- Footer: SEO avec expertises + zone d'intervention étendue
- /macon: galerie Avant/Après + bouton Urgence Fuite
- /paysagiste: design épuré + filtrage Création vs Entretien
- /plombier: tarifs clairs + formulaire diagnostic rapide

https://claude.ai/code/session_01H2aRGDaKgarPvhay2HxN6Y

components/marketing/Hero.tsx

@@ -2,43 +2,43 @@ import Button from "@/components/ui/Button";
 
 export default function Hero() {
   return (
-    <section className="py-16 md:py-24 bg-bg-white" aria-label="Introduction">
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="max-w-3xl mx-auto text-center">
+    <section className="relative py-20 md:py-32 bg-navy overflow-hidden" aria-label="Introduction">
+      {/* Overlay pattern */}
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,rgba(255,255,255,0.05),transparent_70%)]" />
+
+      <div className="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="max-w-3xl">
           {/* Badge */}
-          <span className="inline-block px-3 py-1.5 bg-orange/10 border border-orange/20 rounded-full text-orange text-xs font-semibold mb-6">
-            Agence web locale &mdash; Flines-lez-Raches, Nord (59)
+          <span className="inline-block px-3 py-1.5 bg-orange/20 border border-orange/30 rounded-full text-orange text-xs font-semibold mb-6">
+            Flines-lez-Raches, Nord (59)
           </span>
 
           {/* H1 SEO */}
-          <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-[3.25rem] font-extrabold text-navy leading-tight tracking-[-0.02em] mb-6">
-            Artisans du Nord : Transformez votre bouche-&agrave;-oreille en{" "}
-            <span className="text-orange">syst&egrave;me automatique</span>.
+          <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-[3.25rem] font-extrabold text-white leading-tight tracking-[-0.02em] mb-6">
+            Artisans du Nord : Votre site web doit &ecirc;tre aussi solide que{" "}
+            <span className="text-orange">vos ouvrages.</span>
           </h1>
 
           {/* Subtitle */}
-          <p className="text-text-light text-base sm:text-lg md:text-xl leading-relaxed mb-8 max-w-2xl mx-auto">
-            Arr&ecirc;tez de courir apr&egrave;s les chantiers. Laissez votre site
-            filtrer et convaincre les bons clients pour vous.
+          <p className="text-white/70 text-base sm:text-lg md:text-xl leading-relaxed mb-8 max-w-2xl">
+            Couvreurs, Ma&ccedil;ons, Paysagistes : Arr&ecirc;tez de perdre des chantiers
+            &agrave; cause d&rsquo;une image &laquo;&nbsp;bricol&eacute;e&nbsp;&raquo;. Depuis Flines-lez-Raches, je vous
+            construis une forteresse num&eacute;rique inviolable qui filtre les curieux
+            et attire les vrais projets &agrave; Douai, Orchies et Valenciennes.
           </p>
 
           {/* CTA */}
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+          <div className="flex flex-col sm:flex-row gap-4">
             <a href="#contact">
-              <Button size="lg" className="w-full sm:w-auto pulse-glow">
-                R&eacute;server mon Audit &agrave; Flines-lez-Raches
-              </Button>
-            </a>
-            <a href="#systeme">
-              <Button size="lg" variant="outline" className="w-full sm:w-auto">
-                D&eacute;couvrir le syst&egrave;me
+              <Button size="lg" className="w-full sm:w-auto pulse-glow text-base">
+                D&Eacute;MARRER MON AUDIT GRATUIT
               </Button>
             </a>
           </div>
 
           {/* Trust line */}
-          <p className="mt-8 text-text-muted text-sm">
-            Audit gratuit &middot; Sans engagement &middot; R&eacute;ponse sous 24h
+          <p className="mt-5 text-white/50 text-sm">
+            R&eacute;ponse sous 24h &middot; Pas de jargon &middot; 100% G&eacute;r&eacute; pour vous.
           </p>
         </div>
       </div>