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/System.tsx

@@ -1,17 +1,16 @@
 import Card from "@/components/ui/Card";
 
-const steps = [
+const features = [
   {
     icon: (
       <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 10V3L4 14h7v7l9-11h-7z" />
       </svg>
     ),
-    step: "01",
-    title: "On vous trouve",
-    subtitle: "Visibilit\u00e9 Google",
+    title: "Vitesse Supersonique",
+    subtitle: "Google adore",
     description:
-      "Votre fiche Google optimis\u00e9e + un site r\u00e9f\u00e9renc\u00e9 sur les bons mots-cl\u00e9s locaux. Quand quelqu\u2019un cherche \u00ab couvreur Douai \u00bb ou \u00ab menuisier Orchies \u00bb, c\u2019est vous qui sortez.",
+      "Votre site se charge instantan\u00e9ment sur mobile. C\u2019est crucial pour le r\u00e9f\u00e9rencement et pour vos clients press\u00e9s. La technologie des g\u00e9ants (Netflix, Airbnb) adapt\u00e9e aux artisans du Nord.",
   },
   {
     icon: (
@@ -19,76 +18,59 @@ const steps = [
         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
       </svg>
     ),
-    step: "02",
-    title: "On vous choisit",
-    subtitle: "Site rassurant",
+    title: "S\u00e9curit\u00e9 Militaire",
+    subtitle: "HTTPS inclus",
     description:
-      "Un site pro qui montre vos r\u00e9alisations, vos avis clients et votre s\u00e9rieux. Le visiteur se dit \u00ab c\u2019est lui qu\u2019il me faut \u00bb en 10 secondes, pas \u00ab c\u2019est quoi ce site bricol\u00e9 \u00bb.",
+      "Pas de base de donn\u00e9es \u00e0 pirater. Votre site est statique, blind\u00e9 et s\u00e9curis\u00e9 par d\u00e9faut (cadenas vert HTTPS obligatoire). Vos clients sont rassur\u00e9s.",
   },
   {
     icon: (
       <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
       </svg>
     ),
-    step: "03",
-    title: "On vous contacte",
-    subtitle: "Filtrage intelligent",
+    title: "100% Mobile First",
+    subtitle: "Con\u00e7u pour le pouce",
     description:
-      "Fini les devis pour des \u00ab touristes \u00bb. Le site filtre naturellement : seuls les gens s\u00e9rieux, avec le bon budget et le bon projet, d\u00e9crochent le t\u00e9l\u00e9phone.",
+      "Vos clients vous cherchent sur leur smartphone. Votre site est con\u00e7u pour le pouce, avec des boutons d\u2019appel \u00e9normes et accessibles.",
   },
 ];
 
 export default function System() {
   return (
-    <section id="systeme" className="py-16 md:py-24 bg-bg" aria-label="Le syst\u00e8me">
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+    <section id="systeme" className="relative py-16 md:py-24 bg-navy" aria-label="Le syst\u00e8me">
+      {/* Subtle pattern */}
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_30%,rgba(255,255,255,0.03),transparent_60%)]" />
+
+      <div className="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="text-center mb-14">
-          <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-4">
-            Le Syst&egrave;me
+          <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-4">
+            La Solution HookLab
           </span>
-          <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-navy tracking-[-0.02em] mb-3">
-            Pas juste un site vitrine.{" "}
-            <span className="text-orange">Un dossier de confiance.</span>
+          <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-white tracking-[-0.02em] mb-3">
+            Le &laquo;&nbsp;Dossier de Confiance&nbsp;&raquo; :{" "}
+            <span className="text-orange">Plus qu&rsquo;un site, une infrastructure.</span>
           </h2>
-          <p className="text-text-light text-base md:text-lg max-w-2xl mx-auto">
-            Je ne vous vends pas &ldquo;un beau site&rdquo;. Je construis un syst&egrave;me
-            qui filtre les demandes inutiles et transforme votre r&eacute;putation en
-            machine &agrave; clients.
+          <p className="text-white/60 text-base md:text-lg max-w-2xl mx-auto">
+            Je ne fais pas de sites &laquo;&nbsp;bricol&eacute;s&nbsp;&raquo; sur WordPress qui plantent si on ne les
+            met pas &agrave; jour. J&rsquo;utilise la technologie des g&eacute;ants adapt&eacute;e aux artisans du Nord.
           </p>
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-          {steps.map((s, i) => (
-            <Card key={i} hover className="text-center relative pt-10">
-              <div className="absolute top-4 right-4 text-text-muted/20 text-4xl font-black">
-                {s.step}
+          {features.map((f, i) => (
+            <Card key={i} hover className="text-center bg-white/5 border-white/10 backdrop-blur-sm">
+              <div className="w-16 h-16 bg-orange/20 rounded-2xl flex items-center justify-center mx-auto mb-5 text-orange">
+                {f.icon}
               </div>
-              <div className="w-16 h-16 bg-orange/10 rounded-2xl flex items-center justify-center mx-auto mb-5 text-orange">
-                {s.icon}
-              </div>
-              <h3 className="text-navy font-bold text-lg mb-1">{s.title}</h3>
-              <p className="text-orange text-sm font-semibold mb-3">{s.subtitle}</p>
-              <p className="text-text-light text-sm leading-relaxed">
-                {s.description}
+              <h3 className="text-white font-bold text-lg mb-1">{f.title}</h3>
+              <p className="text-orange text-sm font-semibold mb-3">{f.subtitle}</p>
+              <p className="text-white/60 text-sm leading-relaxed">
+                {f.description}
               </p>
             </Card>
           ))}
         </div>
-
-        <div className="flex justify-center mt-10">
-          <div className="flex items-center gap-3 bg-navy/5 border border-navy/10 rounded-full px-6 py-3">
-            <span className="text-navy font-semibold text-sm">Trouv&eacute;</span>
-            <svg className="w-4 h-4 text-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M9 5l7 7-7 7" />
-            </svg>
-            <span className="text-navy font-semibold text-sm">Choisi</span>
-            <svg className="w-4 h-4 text-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M9 5l7 7-7 7" />
-            </svg>
-            <span className="text-navy font-semibold text-sm">Contact&eacute;</span>
-          </div>
-        </div>
       </div>
     </section>
   );