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

app/layout.tsx

@@ -7,11 +7,11 @@ export const metadata: Metadata = {
   metadataBase: new URL(BASE_URL),
   title: {
     default:
-      "HookLab | Cr\u00e9ation de sites web pour artisans du b\u00e2timent dans le Nord",
+      "Cr\u00e9ation Site Internet Artisan & BTP Nord (59) | HookLab Flines-lez-Raches",
     template: "%s | HookLab",
   },
   description:
-    "Agence web locale sp\u00e9cialis\u00e9e dans la visibilit\u00e9 Google des artisans du b\u00e2timent dans le Nord (Douai, Orchies, Valenciennes). Sites web, r\u00e9f\u00e9rencement local, syst\u00e8me de confiance.",
+    "Sp\u00e9cialiste web pour artisans du b\u00e2timent et paysagistes \u00e0 Douai, Orchies, Valenciennes. Site ultra-rapide, s\u00e9curis\u00e9 et con\u00e7u pour g\u00e9n\u00e9rer des chantiers qualifi\u00e9s. Audit offert.",
   keywords: [
     "site web artisan",
     "cr\u00e9ation site artisan b\u00e2timent",

app/macon/page.tsx

@@ -0,0 +1,153 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import Button from "@/components/ui/Button";
+
+export const metadata: Metadata = {
+  title: "D\u00e9mo Site Ma\u00e7on / Couvreur - Pack Gros \u0152uvre",
+  description:
+    "D\u00e9couvrez le mod\u00e8le de site HookLab pour ma\u00e7ons et couvreurs. Galerie Avant/Apr\u00e8s, bouton Urgence Fuite, optimis\u00e9 SEO local.",
+};
+
+const avantApres = [
+  { avant: "Toiture v\u00e9tuste - Tuiles cass\u00e9es", apres: "R\u00e9fection compl\u00e8te en tuiles m\u00e9caniques" },
+  { avant: "Fa\u00e7ade fissur\u00e9e - Enduit d\u00e9grad\u00e9", apres: "Ravalement complet + isolation" },
+  { avant: "Chemin\u00e9e en ruine", apres: "Reconstruction + \u00e9tanch\u00e9it\u00e9" },
+];
+
+export default function MaconDemo() {
+  return (
+    <main className="min-h-screen bg-bg">
+      {/* Nav simplifi\u00e9e */}
+      <nav className="sticky top-0 z-50 bg-navy border-b border-white/10">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
+          <div className="flex items-center gap-3">
+            <Link href="/" className="text-white/60 hover:text-white text-sm transition-colors">
+              &larr; Retour HookLab
+            </Link>
+            <span className="text-white/30">|</span>
+            <span className="text-white font-bold text-sm">
+              D\u00e9mo : <span className="text-orange">Pack Gros \u0152uvre</span>
+            </span>
+          </div>
+          <a
+            href="tel:+33600000000"
+            className="bg-red-600 hover:bg-red-700 text-white font-bold text-sm px-4 py-2 rounded-lg transition-colors flex items-center gap-2"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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" />
+            </svg>
+            Urgence Fuite
+          </a>
+        </div>
+      </nav>
+
+      {/* Hero */}
+      <section className="py-20 md:py-28 bg-navy text-center">
+        <div className="max-w-4xl mx-auto px-4">
+          <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">
+            Ma\u00e7onnerie & Couverture
+          </span>
+          <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-white leading-tight mb-6">
+            [Votre Entreprise] &mdash; Ma\u00e7on Couvreur <span className="text-orange">dans le Nord</span>
+          </h1>
+          <p className="text-white/60 text-lg max-w-2xl mx-auto mb-8">
+            Plus de 15 ans d&rsquo;exp\u00e9rience en ma\u00e7onnerie et couverture. Devis gratuit sous 24h.
+            Intervention rapide sur Douai, Orchies et Valenciennes.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Button size="lg" className="pulse-glow">
+              Demander un Devis Gratuit
+            </Button>
+            <a
+              href="tel:+33600000000"
+              className="inline-flex items-center justify-center gap-2 bg-red-600 hover:bg-red-700 text-white font-bold px-6 py-3 rounded-xl transition-colors"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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" />
+              </svg>
+              Urgence Fuite : Appeler Maintenant
+            </a>
+          </div>
+        </div>
+      </section>
+
+      {/* Avant / Apr\u00e8s */}
+      <section className="py-16 md:py-24 bg-bg-white">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-2xl md:text-3xl font-bold text-navy mb-3">
+              Galerie <span className="text-orange">Avant / Apr\u00e8s</span>
+            </h2>
+            <p className="text-text-light">La preuve par l&rsquo;image. Nos chantiers parlent d&rsquo;eux-m\u00eames.</p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {avantApres.map((item, i) => (
+              <div key={i} className="bg-bg border border-border rounded-2xl overflow-hidden">
+                <div className="grid grid-cols-2">
+                  <div className="h-40 bg-red-50 flex items-center justify-center border-r border-border">
+                    <div className="text-center p-3">
+                      <p className="text-red-500 text-xs font-bold uppercase mb-1">Avant</p>
+                      <p className="text-text-muted text-xs">{item.avant}</p>
+                    </div>
+                  </div>
+                  <div className="h-40 bg-green-50 flex items-center justify-center">
+                    <div className="text-center p-3">
+                      <p className="text-green-600 text-xs font-bold uppercase mb-1">Apr\u00e8s</p>
+                      <p className="text-text-muted text-xs">{item.apres}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Avis */}
+      <section className="py-16 md:py-24 bg-bg">
+        <div className="max-w-4xl mx-auto px-4 text-center">
+          <h2 className="text-2xl md:text-3xl font-bold text-navy mb-10">
+            Ce que disent <span className="text-orange">nos clients</span>
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {[
+              { name: "Marc D.", ville: "Douai", text: "Toiture refaite en 3 jours. Propre, ponctuel, prix respect\u00e9. Je recommande \u00e0 100%." },
+              { name: "Sophie L.", ville: "Orchies", text: "Fuite d\u2019urgence un dimanche. Ils sont venus en 2h. Travail impeccable." },
+            ].map((avis, i) => (
+              <div key={i} className="bg-bg-white border border-border rounded-xl p-6 text-left">
+                <div className="flex gap-1 mb-3">
+                  {[...Array(5)].map((_, j) => (
+                    <svg key={j} className="w-4 h-4 text-orange" fill="currentColor" viewBox="0 0 24 24">
+                      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+                    </svg>
+                  ))}
+                </div>
+                <p className="text-text-light text-sm leading-relaxed mb-3">&ldquo;{avis.text}&rdquo;</p>
+                <p className="text-navy font-semibold text-sm">{avis.name} &mdash; <span className="text-text-muted font-normal">{avis.ville}</span></p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="py-16 bg-navy text-center">
+        <div className="max-w-2xl mx-auto px-4">
+          <p className="text-orange text-xs font-semibold uppercase tracking-wider mb-3">Ceci est une d\u00e9mo HookLab</p>
+          <h2 className="text-2xl md:text-3xl font-bold text-white mb-4">
+            Vous voulez le m\u00eame site pour votre entreprise&nbsp;?
+          </h2>
+          <p className="text-white/60 mb-6">
+            Imaginez votre logo, vos photos et votre num\u00e9ro \u00e0 la place. C&rsquo;est exactement ce que je construis pour vous.
+          </p>
+          <Link href="/#contact">
+            <Button size="lg" className="pulse-glow">
+              Demander Mon Audit Gratuit
+            </Button>
+          </Link>
+        </div>
+      </section>
+    </main>
+  );
+}

app/page.tsx

@@ -1,46 +1,47 @@
 import Navbar from "@/components/marketing/Navbar";
 import Hero from "@/components/marketing/Hero";
+import Problematique from "@/components/marketing/Problematique";
 import System from "@/components/marketing/System";
-import Portfolio from "@/components/marketing/Portfolio";
+import DemosLive from "@/components/marketing/DemosLive";
 import AboutMe from "@/components/marketing/AboutMe";
 import FAQ from "@/components/marketing/FAQ";
 import Contact from "@/components/marketing/Contact";
 import Footer from "@/components/marketing/Footer";
-import { getPortfolio, getSiteSettings } from "@/lib/sanity/queries";
+import { getSiteSettings } from "@/lib/sanity/queries";
 
 // Revalider les données Sanity toutes les 60 secondes
 export const revalidate = 60;
 
 export default async function LandingPage() {
-  const [portfolioItems, siteSettings] = await Promise.all([
-    getPortfolio(),
-    getSiteSettings(),
-  ]);
+  const siteSettings = await getSiteSettings();
 
   return (
     <main id="main-content" className="min-h-screen">
       {/* Navigation */}
       <Navbar />
 
-      {/* Hero - La Promesse */}
+      {/* Hero - Le Choc Visuel */}
       <Hero />
 
-      {/* Le Système - Dossier de Confiance */}
+      {/* La Problématique - L'Identification */}
+      <Problematique />
+
+      {/* La Solution HookLab Tech */}
       <System />
 
-      {/* Portfolio - Preuves */}
-      <Portfolio items={portfolioItems} />
+      {/* Démos Live - 3 Dossiers de Confiance */}
+      <DemosLive />
 
-      {/* Qui suis-je - Ancrage Local */}
+      {/* Qui suis-je - Ancrage Local (Sanity) */}
       <AboutMe settings={siteSettings} />
 
-      {/* FAQ */}
+      {/* FAQ - Objections */}
       <FAQ />
 
       {/* Contact / Audit CTA */}
       <Contact />
 
-      {/* Footer */}
+      {/* Footer SEO */}
       <Footer />
     </main>
   );

app/paysagiste/page.tsx

@@ -0,0 +1,134 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import Button from "@/components/ui/Button";
+
+export const metadata: Metadata = {
+  title: "D\u00e9mo Site Paysagiste / Peintre - Pack Esth\u00e9tique",
+  description:
+    "D\u00e9couvrez le mod\u00e8le de site HookLab pour paysagistes et peintres. Design \u00e9pur\u00e9, galerie photo immersive, filtrage Cr\u00e9ation vs Entretien.",
+};
+
+const realisations = [
+  { titre: "Jardin contemporain", type: "Cr\u00e9ation", lieu: "Douai" },
+  { titre: "Terrasse bois & pergola", type: "Cr\u00e9ation", lieu: "Orchies" },
+  { titre: "Entretien parc 2000m\u00b2", type: "Entretien", lieu: "Valenciennes" },
+  { titre: "Am\u00e9nagement piscine", type: "Cr\u00e9ation", lieu: "Arleux" },
+  { titre: "Taille de haies & \u00e9lagage", type: "Entretien", lieu: "Flines-lez-Raches" },
+  { titre: "Jardin japonais", type: "Cr\u00e9ation", lieu: "Saint-Amand" },
+];
+
+export default function PaysagisteDemo() {
+  return (
+    <main className="min-h-screen bg-bg">
+      {/* Nav simplifi\u00e9e */}
+      <nav className="sticky top-0 z-50 bg-bg-white/90 backdrop-blur-md border-b border-border">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
+          <div className="flex items-center gap-3">
+            <Link href="/" className="text-text-muted hover:text-navy text-sm transition-colors">
+              &larr; Retour HookLab
+            </Link>
+            <span className="text-border">|</span>
+            <span className="text-navy font-bold text-sm">
+              D\u00e9mo : <span className="text-orange">Pack Esth\u00e9tique</span>
+            </span>
+          </div>
+          <a
+            href="tel:+33600000000"
+            className="bg-orange hover:bg-orange/90 text-white font-bold text-sm px-4 py-2 rounded-lg transition-colors"
+          >
+            Devis Gratuit
+          </a>
+        </div>
+      </nav>
+
+      {/* Hero \u00e9pur\u00e9 */}
+      <section className="py-24 md:py-36 bg-[#1a2e1a] text-center relative overflow-hidden">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_80%,rgba(34,139,34,0.15),transparent_70%)]" />
+        <div className="relative max-w-4xl mx-auto px-4">
+          <span className="inline-block px-3 py-1.5 bg-green-500/20 border border-green-500/30 rounded-full text-green-400 text-xs font-semibold mb-6">
+            Paysagisme & Espaces Verts
+          </span>
+          <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-white leading-tight mb-6">
+            [Votre Entreprise] &mdash; Paysagiste <span className="text-green-400">dans le Nord</span>
+          </h1>
+          <p className="text-white/60 text-lg max-w-2xl mx-auto mb-8">
+            Cr\u00e9ation de jardins d&rsquo;exception et entretien d&rsquo;espaces verts.
+            La nature est notre m\u00e9tier, la beaut\u00e9 notre signature.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Button size="lg" className="bg-green-600 hover:bg-green-700 border-green-600">
+              Demander un Devis Cr\u00e9ation
+            </Button>
+            <Button size="lg" variant="outline" className="border-white/30 text-white hover:bg-white/10">
+              Devis Entretien
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      {/* R\u00e9alisations avec filtrage */}
+      <section className="py-16 md:py-24 bg-bg-white">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-2xl md:text-3xl font-bold text-navy mb-3">
+              Nos <span className="text-orange">r\u00e9alisations</span>
+            </h2>
+            <p className="text-text-light mb-6">
+              Filtrez par type de projet pour trouver l&rsquo;inspiration.
+            </p>
+            {/* Filtre visuel (d\u00e9mo statique) */}
+            <div className="flex justify-center gap-3">
+              <span className="px-4 py-2 bg-navy text-white text-sm font-semibold rounded-full">Tous</span>
+              <span className="px-4 py-2 bg-bg border border-border text-text-light text-sm rounded-full cursor-pointer hover:border-navy transition-colors">Cr\u00e9ation</span>
+              <span className="px-4 py-2 bg-bg border border-border text-text-light text-sm rounded-full cursor-pointer hover:border-navy transition-colors">Entretien</span>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            {realisations.map((r, i) => (
+              <div key={i} className="bg-bg border border-border rounded-2xl overflow-hidden group">
+                <div className="h-48 bg-green-50 flex items-center justify-center">
+                  <div className="text-center">
+                    <svg className="w-12 h-12 text-green-300 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
+                    </svg>
+                    <p className="text-text-muted text-xs">Photo du projet</p>
+                  </div>
+                </div>
+                <div className="p-4">
+                  <div className="flex items-center justify-between mb-2">
+                    <h3 className="text-navy font-bold text-sm">{r.titre}</h3>
+                    <span className={`text-xs font-semibold px-2 py-0.5 rounded-full ${
+                      r.type === "Cr\u00e9ation" ? "bg-green-100 text-green-700" : "bg-blue-100 text-blue-700"
+                    }`}>
+                      {r.type}
+                    </span>
+                  </div>
+                  <p className="text-text-muted text-xs">{r.lieu}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="py-16 bg-[#1a2e1a] text-center">
+        <div className="max-w-2xl mx-auto px-4">
+          <p className="text-orange text-xs font-semibold uppercase tracking-wider mb-3">Ceci est une d\u00e9mo HookLab</p>
+          <h2 className="text-2xl md:text-3xl font-bold text-white mb-4">
+            Ce design vous pla\u00eet&nbsp;? Il peut &ecirc;tre &agrave; vous.
+          </h2>
+          <p className="text-white/60 mb-6">
+            Imaginez vos plus beaux jardins mis en valeur comme \u00e7a. C&rsquo;est ce que je cr\u00e9e pour les paysagistes du Nord.
+          </p>
+          <Link href="/#contact">
+            <Button size="lg" className="bg-green-600 hover:bg-green-700 border-green-600">
+              Demander Mon Audit Gratuit
+            </Button>
+          </Link>
+        </div>
+      </section>
+    </main>
+  );
+}

app/plombier/page.tsx

@@ -0,0 +1,174 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import Button from "@/components/ui/Button";
+
+export const metadata: Metadata = {
+  title: "D\u00e9mo Site Plombier / \u00c9lectricien - Pack Urgence & Service",
+  description:
+    "D\u00e9couvrez le mod\u00e8le de site HookLab pour plombiers et \u00e9lectriciens. Chargement \u00e9clair, tarifs clairs, formulaire de diagnostic rapide.",
+};
+
+const tarifs = [
+  { service: "D\u00e9pannage fuite", prix: "\u00c0 partir de 89\u20ac", urgence: true },
+  { service: "Remplacement chauffe-eau", prix: "\u00c0 partir de 350\u20ac", urgence: false },
+  { service: "D\u00e9bouchage canalisation", prix: "\u00c0 partir de 120\u20ac", urgence: true },
+  { service: "Installation sanitaire", prix: "Sur devis", urgence: false },
+];
+
+export default function PlombierDemo() {
+  return (
+    <main className="min-h-screen bg-bg">
+      {/* Nav urgence */}
+      <nav className="sticky top-0 z-50 bg-navy border-b border-white/10">
+        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
+          <div className="flex items-center gap-3">
+            <Link href="/" className="text-white/60 hover:text-white text-sm transition-colors">
+              &larr; Retour HookLab
+            </Link>
+            <span className="text-white/30">|</span>
+            <span className="text-white font-bold text-sm">
+              D\u00e9mo : <span className="text-orange">Pack Urgence</span>
+            </span>
+          </div>
+          <a
+            href="tel:+33600000000"
+            className="bg-red-600 hover:bg-red-700 text-white font-bold text-sm px-5 py-2.5 rounded-lg transition-colors animate-pulse flex items-center gap-2"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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" />
+            </svg>
+            URGENCE 7j/7
+          </a>
+        </div>
+      </nav>
+
+      {/* Hero rapide */}
+      <section className="py-16 md:py-24 bg-navy text-center">
+        <div className="max-w-4xl mx-auto px-4">
+          <div className="inline-flex items-center gap-2 bg-red-600/20 border border-red-500/30 rounded-full px-4 py-2 mb-6">
+            <span className="w-2 h-2 bg-red-500 rounded-full animate-pulse" />
+            <span className="text-red-400 text-xs font-semibold">Disponible 7j/7 &mdash; Intervention rapide</span>
+          </div>
+          <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-white leading-tight mb-6">
+            [Votre Entreprise] &mdash; Plombier <span className="text-orange">dans le Nord</span>
+          </h1>
+          <p className="text-white/60 text-lg max-w-2xl mx-auto mb-8">
+            Fuite, panne, urgence&nbsp;? Intervention rapide sur Douai, Orchies
+            et Valenciennes. Tarifs transparents, devis gratuit.
+          </p>
+          <a
+            href="tel:+33600000000"
+            className="inline-flex items-center gap-3 bg-red-600 hover:bg-red-700 text-white font-bold text-lg px-8 py-4 rounded-xl transition-colors"
+          >
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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" />
+            </svg>
+            Appeler Maintenant
+          </a>
+        </div>
+      </section>
+
+      {/* Tarifs clairs */}
+      <section className="py-16 md:py-24 bg-bg-white">
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-2xl md:text-3xl font-bold text-navy mb-3">
+              Tarifs <span className="text-orange">transparents</span>
+            </h2>
+            <p className="text-text-light">Pas de surprise. Vous savez ce que vous payez.</p>
+          </div>
+
+          <div className="space-y-3">
+            {tarifs.map((t, i) => (
+              <div key={i} className="flex items-center justify-between bg-bg border border-border rounded-xl p-5">
+                <div className="flex items-center gap-3">
+                  {t.urgence && (
+                    <span className="w-2 h-2 bg-red-500 rounded-full shrink-0" />
+                  )}
+                  <span className="text-navy font-semibold text-sm">{t.service}</span>
+                  {t.urgence && (
+                    <span className="text-xs bg-red-100 text-red-600 font-semibold px-2 py-0.5 rounded-full">Urgence</span>
+                  )}
+                </div>
+                <span className="text-orange font-bold text-sm">{t.prix}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Diagnostic rapide */}
+      <section className="py-16 md:py-24 bg-bg">
+        <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-10">
+            <h2 className="text-2xl md:text-3xl font-bold text-navy mb-3">
+              Diagnostic <span className="text-orange">rapide</span>
+            </h2>
+            <p className="text-text-light">D\u00e9crivez votre probl\u00e8me en 30 secondes. On vous rappelle avec une solution.</p>
+          </div>
+
+          <div className="bg-bg-white border border-border rounded-2xl p-6 sm:p-8">
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-text mb-1.5">Type de probl\u00e8me</label>
+                <select className="w-full px-4 py-3 bg-bg border border-border rounded-xl text-text text-sm focus:border-orange focus:ring-1 focus:ring-orange outline-none">
+                  <option>Fuite d&apos;eau</option>
+                  <option>Canalisation bouch\u00e9e</option>
+                  <option>Panne chauffe-eau</option>
+                  <option>Probl\u00e8me radiateur</option>
+                  <option>Autre</option>
+                </select>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-text mb-1.5">Niveau d&apos;urgence</label>
+                <div className="grid grid-cols-3 gap-3">
+                  <div className="border-2 border-red-300 bg-red-50 rounded-xl p-3 text-center cursor-pointer">
+                    <p className="text-red-600 font-bold text-sm">Urgent</p>
+                    <p className="text-text-muted text-xs">Fuite active</p>
+                  </div>
+                  <div className="border border-border rounded-xl p-3 text-center cursor-pointer hover:border-orange transition-colors">
+                    <p className="text-navy font-bold text-sm">Mod\u00e9r\u00e9</p>
+                    <p className="text-text-muted text-xs">Sous 48h</p>
+                  </div>
+                  <div className="border border-border rounded-xl p-3 text-center cursor-pointer hover:border-orange transition-colors">
+                    <p className="text-navy font-bold text-sm">Planifi\u00e9</p>
+                    <p className="text-text-muted text-xs">Travaux</p>
+                  </div>
+                </div>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-text mb-1.5">Votre t\u00e9l\u00e9phone</label>
+                <input
+                  type="tel"
+                  placeholder="06 12 34 56 78"
+                  className="w-full px-4 py-3 bg-bg border border-border rounded-xl text-text text-sm placeholder:text-text-muted focus:border-orange focus:ring-1 focus:ring-orange outline-none"
+                />
+              </div>
+              <Button size="lg" className="w-full">
+                Envoyer le Diagnostic
+              </Button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="py-16 bg-navy text-center">
+        <div className="max-w-2xl mx-auto px-4">
+          <p className="text-orange text-xs font-semibold uppercase tracking-wider mb-3">Ceci est une d\u00e9mo HookLab</p>
+          <h2 className="text-2xl md:text-3xl font-bold text-white mb-4">
+            Ce site peut &ecirc;tre le v&ocirc;tre demain.
+          </h2>
+          <p className="text-white/60 mb-6">
+            Un site qui rassure, qui qualifie les urgences, et qui vous fait gagner du temps. C&rsquo;est ce que je construis pour les plombiers et \u00e9lectriciens du Nord.
+          </p>
+          <Link href="/#contact">
+            <Button size="lg" className="pulse-glow">
+              Demander Mon Audit Gratuit
+            </Button>
+          </Link>
+        </div>
+      </section>
+    </main>
+  );
+}

components/marketing/DemosLive.tsx

@@ -0,0 +1,115 @@
+import Card from "@/components/ui/Card";
+import Link from "next/link";
+
+const demos = [
+  {
+    title: "Le Pack \u00ab\u00a0Gros \u0152uvre\u00a0\u00bb",
+    subtitle: "Ma\u00e7on / Couvreur",
+    pourQui: "Ma\u00e7ons, Couvreurs, Charpentiers.",
+    pointFort: "La galerie \u00ab\u00a0Avant / Apr\u00e8s\u00a0\u00bb qui prouve votre technique et justifie vos devis.",
+    fonctionnalite: "Bouton \u00ab\u00a0Urgence Fuite\u00a0\u00bb qui d\u00e9clenche l\u2019appel imm\u00e9diat.",
+    cta: "Voir la D\u00e9mo Ma\u00e7onnerie",
+    href: "/macon",
+    icon: (
+      <svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+      </svg>
+    ),
+  },
+  {
+    title: "Le Pack \u00ab\u00a0Esth\u00e9tique\u00a0\u00bb",
+    subtitle: "Paysagiste / Peintre",
+    pourQui: "Paysagistes, Peintres, D\u00e9corateurs.",
+    pointFort: "Un design \u00e9pur\u00e9 qui laisse toute la place \u00e0 la beaut\u00e9 de vos r\u00e9alisations.",
+    fonctionnalite: "Filtrage \u00ab\u00a0Cr\u00e9ation vs Entretien\u00a0\u00bb pour ne recevoir que les projets \u00e0 forte valeur.",
+    cta: "Voir la D\u00e9mo Paysagiste",
+    href: "/paysagiste",
+    icon: (
+      <svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
+      </svg>
+    ),
+  },
+  {
+    title: "Le Pack \u00ab\u00a0Urgence & Service\u00a0\u00bb",
+    subtitle: "Plombier / \u00c9lec",
+    pourQui: "Plombiers, \u00c9lectriciens, Serruriers.",
+    pointFort: "Vitesse de chargement \u00e9clair et rassurance imm\u00e9diate (Avis + Tarifs clairs).",
+    fonctionnalite: "Formulaire de diagnostic rapide pour qualifier la panne avant de vous d\u00e9placer.",
+    cta: "Voir la D\u00e9mo Plombier",
+    href: "/plombier",
+    icon: (
+      <svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 10V3L4 14h7v7l9-11h-7z" />
+      </svg>
+    ),
+  },
+];
+
+export default function DemosLive() {
+  return (
+    <section id="demos" className="py-16 md:py-24 bg-bg" aria-label="D\u00e9mos live">
+      <div className="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">
+            D&eacute;mos Live
+          </span>
+          <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-navy tracking-[-0.02em] mb-3">
+            Ne signez pas sans voir.{" "}
+            <span className="text-orange">Testez votre futur site maintenant.</span>
+          </h2>
+          <p className="text-text-light text-base md:text-lg max-w-2xl mx-auto">
+            Je ne vous demande pas de me croire sur parole. J&rsquo;ai construit 3 mod&egrave;les
+            de &laquo;&nbsp;Dossiers de Confiance&nbsp;&raquo; optimis&eacute;s pour vos m&eacute;tiers.
+            Cliquez, naviguez, et imaginez votre logo &agrave; la place.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {demos.map((demo, i) => (
+            <Card key={i} hover className="flex flex-col p-0 overflow-hidden">
+              {/* Header visuel */}
+              <div className="bg-navy p-6 text-center">
+                <div className="w-16 h-16 bg-orange/20 rounded-2xl flex items-center justify-center mx-auto mb-3 text-orange">
+                  {demo.icon}
+                </div>
+                <h3 className="text-white font-bold text-lg">{demo.title}</h3>
+                <p className="text-orange text-sm font-semibold">{demo.subtitle}</p>
+              </div>
+
+              {/* Content */}
+              <div className="p-5 flex-1 flex flex-col">
+                <div className="space-y-3 flex-1">
+                  <div>
+                    <p className="text-navy font-semibold text-xs uppercase tracking-wider mb-1">Pour qui ?</p>
+                    <p className="text-text-light text-sm">{demo.pourQui}</p>
+                  </div>
+                  <div>
+                    <p className="text-navy font-semibold text-xs uppercase tracking-wider mb-1">Le point fort</p>
+                    <p className="text-text-light text-sm">{demo.pointFort}</p>
+                  </div>
+                  <div>
+                    <p className="text-navy font-semibold text-xs uppercase tracking-wider mb-1">Fonctionnalit&eacute; cl&eacute;</p>
+                    <p className="text-text-light text-sm">{demo.fonctionnalite}</p>
+                  </div>
+                </div>
+
+                {/* CTA */}
+                <Link
+                  href={demo.href}
+                  className="mt-5 flex items-center justify-center gap-2 bg-orange text-white font-bold text-sm px-5 py-3 rounded-xl hover:bg-orange/90 transition-colors"
+                >
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                  </svg>
+                  {demo.cta}
+                </Link>
+              </div>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

components/marketing/FAQ.tsx

@@ -4,36 +4,28 @@ import { useState } from "react";
 
 const faqs = [
   {
-    q: "Combien co\u00fbte un site avec HookLab ?",
+    q: "J\u2019ai d\u00e9j\u00e0 une page Facebook, \u00e7a suffit non\u00a0?",
+    a: "Facebook, c\u2019est pour les amis. Google, c\u2019est pour les clients qui ont un carnet de ch\u00e8ques et une urgence. Un site professionnel inspire 56% plus de confiance qu\u2019une simple page sociale.",
+  },
+  {
+    q: "Est-ce que je pourrai changer mes photos moi-m\u00eame\u00a0?",
+    a: "Oui. Je vous donne acc\u00e8s \u00e0 une interface simplifi\u00e9e (Sanity). C\u2019est aussi simple que d\u2019envoyer un SMS. Vous changez une photo, le site se met \u00e0 jour tout seul.",
+  },
+  {
+    q: "C\u2019est quoi la diff\u00e9rence avec un site gratuit\u00a0?",
+    a: "Un site gratuit, c\u2019est comme construire une maison sans fondations. \u00c7a ne tient pas, Google ne le voit pas, et \u00e7a fait fuir les gros chantiers. Je vous construis un actif num\u00e9rique durable.",
+  },
+  {
+    q: "Combien co\u00fbte un site avec HookLab\u00a0?",
     a: "Chaque projet est diff\u00e9rent. Je propose un audit gratuit pour comprendre votre situation et vous faire une proposition adapt\u00e9e \u00e0 votre activit\u00e9. Pas d\u2019abonnement cach\u00e9, pas de surprise.",
   },
   {
-    q: "C\u2019est quoi la diff\u00e9rence avec une \u00ab agence web \u00bb classique ?",
-    a: "Je ne vous vends pas un site pour faire joli. Je construis un syst\u00e8me complet : site + Google + preuves sociales. L\u2019objectif : que votre t\u00e9l\u00e9phone sonne avec des vrais clients, pas des curieux.",
-  },
-  {
-    q: "Je me suis d\u00e9j\u00e0 fait avoir par un call center, pourquoi vous faire confiance ?",
-    a: "Je suis bas\u00e9 \u00e0 Flines-lez-Raches, pas dans un bureau \u00e0 Paris. On peut se voir en vrai. Je travaille avec des artisans du coin, vous pouvez v\u00e9rifier mes r\u00e9alisations et appeler mes clients.",
-  },
-  {
-    q: "J\u2019ai d\u00e9j\u00e0 une page Facebook, c\u2019est pas suffisant ?",
-    a: "Facebook c\u2019est bien pour montrer vos chantiers, mais personne ne cherche \u00ab couvreur Douai \u00bb sur Facebook. 90% des gens passent par Google. Sans site optimis\u00e9, vos concurrents r\u00e9cup\u00e8rent vos clients.",
-  },
-  {
-    q: "Combien de temps pour avoir des r\u00e9sultats ?",
+    q: "Combien de temps pour avoir des r\u00e9sultats\u00a0?",
     a: "Le site est en ligne en 2-3 semaines. Les premiers r\u00e9sultats Google arrivent en 4 \u00e0 8 semaines selon votre zone et votre m\u00e9tier. Mais le site commence \u00e0 travailler pour vous d\u00e8s le jour 1.",
   },
   {
-    q: "J\u2019y connais rien en informatique, c\u2019est un probl\u00e8me ?",
-    a: "C\u2019est justement mon m\u00e9tier. Je m\u2019occupe de tout : cr\u00e9ation, mise en ligne, r\u00e9f\u00e9rencement. Vous, vous continuez vos chantiers. Et si vous voulez modifier quelque chose, un simple message suffit.",
-  },
-  {
-    q: "Est-ce que je pourrai modifier le site moi-m\u00eame ?",
-    a: "Oui. J\u2019utilise un syst\u00e8me de gestion de contenu (CMS) simple. Vous pouvez ajouter des photos de chantier ou modifier un texte aussi facilement qu\u2019un post Facebook.",
-  },
-  {
-    q: "Vous intervenez uniquement dans le Nord ?",
-    a: "Ma zone principale c\u2019est le Douaisis, l\u2019Orch\u00e9sien, le Valenciennois et l\u2019Arrageois. Mais je peux travailler avec des artisans partout en Hauts-de-France.",
+    q: "J\u2019y connais rien en informatique, c\u2019est un probl\u00e8me\u00a0?",
+    a: "C\u2019est justement mon m\u00e9tier. Je m\u2019occupe de tout\u00a0: cr\u00e9ation, mise en ligne, r\u00e9f\u00e9rencement. Vous, vous continuez vos chantiers. Et si vous voulez modifier quelque chose, un simple message suffit.",
   },
 ];
 
@@ -64,12 +56,9 @@ export default function FAQ() {
           <span className="inline-block px-3 py-1.5 bg-navy/5 border border-navy/10 rounded-full text-navy text-xs font-semibold mb-4">
             FAQ
           </span>
-          <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-navy tracking-[-0.02em] mb-3">
-            Questions fr&eacute;quentes
-          </h2>
-          <p className="text-text-light text-base">
-            Les questions que les artisans me posent le plus souvent.
-          </p>
+          <h3 className="text-2xl md:text-3xl lg:text-4xl font-bold text-navy tracking-[-0.02em] mb-3">
+            Questions Franches
+          </h3>
         </div>
 
         {/* Accordion */}

components/marketing/Footer.tsx

@@ -16,45 +16,23 @@ export default function Footer() {
               </span>
             </Link>
             <p className="text-text-light text-sm leading-relaxed max-w-xs">
-              Agence web sp&eacute;cialis&eacute;e dans la visibilit&eacute; locale des artisans
-              du b&acirc;timent dans le Nord.
+              Cr&eacute;ation de sites pour le B&acirc;timent et l&rsquo;Artisanat.
             </p>
             <p className="text-text-muted text-xs mt-3">
-              Flines-lez-Raches, Nord (59)
+              59148 Flines-lez-Raches
             </p>
           </div>
 
-          {/* Links */}
+          {/* Expertises SEO */}
           <div>
             <h4 className="text-navy font-semibold text-sm mb-4">
-              Navigation
+              Expertises
             </h4>
-            <ul className="space-y-2">
-              <li>
-                <a href="#systeme" className="text-text-light hover:text-navy text-sm transition-colors">
-                  Le Syst&egrave;me
-                </a>
-              </li>
-              <li>
-                <a href="#portfolio" className="text-text-light hover:text-navy text-sm transition-colors">
-                  R&eacute;alisations
-                </a>
-              </li>
-              <li>
-                <a href="#qui-suis-je" className="text-text-light hover:text-navy text-sm transition-colors">
-                  Qui suis-je
-                </a>
-              </li>
-              <li>
-                <a href="#faq" className="text-text-light hover:text-navy text-sm transition-colors">
-                  FAQ
-                </a>
-              </li>
-              <li>
-                <a href="#contact" className="text-text-light hover:text-navy text-sm transition-colors">
-                  Contact
-                </a>
-              </li>
+            <ul className="space-y-2 text-text-light text-sm">
+              <li>Site internet Couvreur</li>
+              <li>SEO Ma&ccedil;onnerie</li>
+              <li>Webmaster Paysagiste</li>
+              <li>Visibilit&eacute; Menuisier</li>
             </ul>
           </div>
 
@@ -69,20 +47,25 @@ export default function Footer() {
               </li>
               <li>
                 <Link href="/confidentialite" className="text-text-light hover:text-navy text-sm transition-colors">
-                  Confidentialit&eacute;
+                  Politique de Confidentialit&eacute;
+                </Link>
+              </li>
+              <li>
+                <Link href="/plan-du-site" className="text-text-light hover:text-navy text-sm transition-colors">
+                  Plan du site
                 </Link>
               </li>
             </ul>
           </div>
         </div>
 
-        {/* Bottom */}
+        {/* Bottom SEO */}
         <div className="border-t border-border mt-8 pt-6 flex flex-col md:flex-row items-center justify-between gap-3">
           <p className="text-text-muted text-xs">
             &copy; {new Date().getFullYear()} HookLab &mdash; Enguerrand Ozano &middot; SIREN 994 538 932
           </p>
-          <p className="text-text-muted text-xs">
-            Douai &middot; Orchies &middot; Valenciennes &middot; Arleux
+          <p className="text-text-muted text-xs text-center md:text-right">
+            Intervention : Douai &middot; Orchies &middot; Arleux &middot; Valenciennes &middot; Saint-Amand-les-Eaux
           </p>
         </div>
       </div>

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>

components/marketing/Navbar.tsx

@@ -2,7 +2,6 @@
 
 import { useState } from "react";
 import Link from "next/link";
-import Button from "@/components/ui/Button";
 
 export default function Navbar() {
   const [open, setOpen] = useState(false);
@@ -26,23 +25,24 @@ export default function Navbar() {
             <a href="#systeme" className="text-text-light hover:text-navy text-sm font-medium transition-colors">
               Le Syst&egrave;me
             </a>
-            <a href="#portfolio" className="text-text-light hover:text-navy text-sm font-medium transition-colors">
+            <a href="#demos" className="text-text-light hover:text-navy text-sm font-medium transition-colors">
               R&eacute;alisations
             </a>
             <a href="#qui-suis-je" className="text-text-light hover:text-navy text-sm font-medium transition-colors">
               Qui suis-je
             </a>
-            <a href="#faq" className="text-text-light hover:text-navy text-sm font-medium transition-colors">
-              FAQ
-            </a>
           </div>
 
-          {/* CTA desktop */}
+          {/* CTA desktop - Phone */}
           <div className="hidden md:block">
-            <a href="#contact">
-              <Button size="sm" className="pulse-glow">
-                R&eacute;server mon Audit
-              </Button>
+            <a
+              href="tel:+33600000000"
+              className="inline-flex items-center gap-2 bg-orange text-white font-bold text-sm px-5 py-2.5 rounded-xl hover:bg-orange/90 transition-colors"
+            >
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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" />
+              </svg>
+              06 XX XX XX XX
             </a>
           </div>
 
@@ -71,19 +71,21 @@ export default function Navbar() {
             <a href="#systeme" onClick={() => setOpen(false)} className="block text-text-light hover:text-navy text-sm font-medium py-2 transition-colors">
               Le Syst&egrave;me
             </a>
-            <a href="#portfolio" onClick={() => setOpen(false)} className="block text-text-light hover:text-navy text-sm font-medium py-2 transition-colors">
+            <a href="#demos" onClick={() => setOpen(false)} className="block text-text-light hover:text-navy text-sm font-medium py-2 transition-colors">
               R&eacute;alisations
             </a>
             <a href="#qui-suis-je" onClick={() => setOpen(false)} className="block text-text-light hover:text-navy text-sm font-medium py-2 transition-colors">
               Qui suis-je
             </a>
-            <a href="#faq" onClick={() => setOpen(false)} className="block text-text-light hover:text-navy text-sm font-medium py-2 transition-colors">
-              FAQ
-            </a>
-            <a href="#contact" onClick={() => setOpen(false)}>
-              <Button size="sm" className="w-full mt-2">
-                R&eacute;server mon Audit
-              </Button>
+            <a
+              href="tel:+33600000000"
+              onClick={() => setOpen(false)}
+              className="flex items-center justify-center gap-2 bg-orange text-white font-bold text-sm px-5 py-3 rounded-xl mt-2"
+            >
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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" />
+              </svg>
+              06 XX XX XX XX
             </a>
           </div>
         )}

components/marketing/Problematique.tsx

@@ -0,0 +1,57 @@
+export default function Problematique() {
+  return (
+    <section className="py-16 md:py-24 bg-bg" aria-label="La probl&eacute;matique">
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="text-center mb-12">
+          <h3 className="text-2xl md:text-3xl lg:text-4xl font-bold text-navy tracking-[-0.02em] mb-4">
+            Vous &ecirc;tes un pro sur le chantier.{" "}
+            <span className="text-orange">Pourquoi votre pr&eacute;sence en ligne dit-elle le contraire&nbsp;?</span>
+          </h3>
+          <p className="text-text-light text-base md:text-lg">
+            Marc, je sais ce que vous vivez&nbsp;:
+          </p>
+        </div>
+
+        <div className="space-y-5 mb-12">
+          {[
+            {
+              title: "Le temps perdu",
+              text: "Vos soir\u00e9es passent \u00e0 faire des devis pour des gens qui cherchent \u00ab\u00a0le moins cher\u00a0\u00bb sur Leboncoin.",
+            },
+            {
+              title: "L\u2019invisibilit\u00e9",
+              text: "Des concurrents moins qualifi\u00e9s que vous sortent avant vous sur Google Maps.",
+            },
+            {
+              title: "La peur de la technique",
+              text: "On vous a parl\u00e9 de WordPress, de mises \u00e0 jour, de piratage\u2026 Vous voulez un outil, pas un deuxi\u00e8me travail.",
+            },
+          ].map((item, i) => (
+            <div key={i} className="flex items-start gap-4 bg-bg-white border border-border rounded-xl p-5">
+              <div className="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center shrink-0 mt-0.5">
+                <svg className="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </div>
+              <div>
+                <p className="text-navy font-bold text-base mb-1">{item.title}</p>
+                <p className="text-text-light text-sm leading-relaxed">{item.text}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Stat choc */}
+        <div className="bg-navy rounded-2xl p-6 md:p-8 text-center">
+          <p className="text-white text-base md:text-lg leading-relaxed">
+            <strong className="text-orange text-2xl md:text-3xl font-extrabold block mb-2">93%</strong>
+            des acheteurs jugent votre cr&eacute;dibilit&eacute; sur le design de votre site.{" "}
+            <span className="text-white/70">
+              Si votre site est lent ou &laquo;&nbsp;moche&nbsp;&raquo;, le client pense que votre travail l&rsquo;est aussi.
+            </span>
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}

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>
   );