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