From 9025986e66f6925936570b2131b7c8d4fc9394d6 Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 15 Feb 2026 22:10:14 +0000 Subject: [PATCH] feat: rebuild 3 demo pages with interactive features + local SEO pages - Rebuild /macon with cert badge popups, before/after slider, intelligent form with urgency detection - Rebuild /paysagiste with filterable gallery, seasonal banner, WhatsApp floating button, devis form - Rebuild /plombier with sticky call bar, 3-step diagnostic wizard, transparent tariffs, zone map - Add MagicReveal component (interactive before/after slider) - Update Navbar with real phone number (06 04 40 81 57) - Update DemosLive cards with new titles and subtitles - Create sitemap.ts targeting local SEO zones (Douai, Orchies, Valenciennes, Saint-Amand, Arleux, Denain) - Create LocalSeoPage template + 6 city-specific landing pages https://claude.ai/code/session_01H2aRGDaKgarPvhay2HxN6Y --- app/macon/MaconClient.tsx | 197 +++++++++++++++ app/macon/page.tsx | 202 +++++++++------ app/paysagiste/PaysagisteClient.tsx | 105 ++++++++ app/paysagiste/page.tsx | 202 +++++++++------ app/plombier/PlombierClient.tsx | 189 +++++++++++++++ app/plombier/page.tsx | 229 +++++++++++------- app/site-internet-artisan-arleux/page.tsx | 19 ++ app/site-internet-artisan-denain/page.tsx | 19 ++ app/site-internet-artisan-douai/page.tsx | 19 ++ app/site-internet-artisan-orchies/page.tsx | 19 ++ .../page.tsx | 19 ++ .../page.tsx | 19 ++ app/sitemap.ts | 87 ++++++- components/marketing/DemosLive.tsx | 24 +- components/marketing/LocalSeoPage.tsx | 142 +++++++++++ components/marketing/Navbar.tsx | 8 +- components/ui/MagicReveal.tsx | 91 +++++++ 17 files changed, 1331 insertions(+), 259 deletions(-) create mode 100644 app/macon/MaconClient.tsx create mode 100644 app/paysagiste/PaysagisteClient.tsx create mode 100644 app/plombier/PlombierClient.tsx create mode 100644 app/site-internet-artisan-arleux/page.tsx create mode 100644 app/site-internet-artisan-denain/page.tsx create mode 100644 app/site-internet-artisan-douai/page.tsx create mode 100644 app/site-internet-artisan-orchies/page.tsx create mode 100644 app/site-internet-artisan-saint-amand-les-eaux/page.tsx create mode 100644 app/site-internet-artisan-valenciennes/page.tsx create mode 100644 components/marketing/LocalSeoPage.tsx create mode 100644 components/ui/MagicReveal.tsx diff --git a/app/macon/MaconClient.tsx b/app/macon/MaconClient.tsx new file mode 100644 index 0000000..0a5d428 --- /dev/null +++ b/app/macon/MaconClient.tsx @@ -0,0 +1,197 @@ +"use client"; + +import { useState } from "react"; +import MagicReveal from "@/components/ui/MagicReveal"; +import Button from "@/components/ui/Button"; + +interface MaconClientProps { + type?: "slider" | "form" | "cert"; + certName?: string; + avantLabel?: string; + apresLabel?: string; +} + +export default function MaconClient({ type, certName, avantLabel, apresLabel }: MaconClientProps) { + // Cert badge with popup + if (!type || type === "cert") { + return ; + } + + if (type === "slider") { + return ( + + ); + } + + if (type === "form") { + return ; + } + + return null; +} + +function CertBadge({ name }: { name: string }) { + const [open, setOpen] = useState(false); + + const infos: Record = { + "D\u00e9cennale": "La garantie d\u00e9cennale couvre tous les dommages compromettant la solidit\u00e9 de l\u2019ouvrage pendant 10 ans apr\u00e8s la r\u00e9ception des travaux.", + "Qualibat": "Qualibat est l\u2019organisme de r\u00e9f\u00e9rence pour la qualification des entreprises du b\u00e2timent. Gage de comp\u00e9tence et de s\u00e9rieux.", + "RGE": "Le label RGE (Reconnu Garant de l\u2019Environnement) vous permet de b\u00e9n\u00e9ficier des aides de l\u2019\u00c9tat : MaPrimeR\u00e9nov\u2019, CEE, \u00e9co-PTZ.", + }; + + return ( + <> + + + {/* Popup */} + {open && ( +
setOpen(false)}> +
e.stopPropagation()}> +
+
+ + + +
+

{name}

+
+

+ {infos[name] || "Certification professionnelle v\u00e9rifi\u00e9e."} +

+ +
+
+ )} + + ); +} + +function DevisForm() { + const [step, setStep] = useState<"type" | "details" | "urgence">("type"); + const [projectType, setProjectType] = useState(""); + + if (step === "urgence") { + return ( +
+
+ + + +
+

Urgence d\u00e9tect\u00e9e !

+

Pour une intervention rapide, appelez directement le patron :

+ + + + + APPELER LE PATRON + +

Disponible 7j/7 pour les urgences

+ +
+ ); + } + + if (step === "details") { + return ( +
+
+ 2/2 +

D\u00e9tails du projet

+
+

Type : {projectType}

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + +
+
+ ); + } + + return ( +
+
+ 1/2 +

Quel type de projet ?

+
+
+ {[ + { label: "Urgence fuite / d\u00e9g\u00e2t", urgent: true }, + { label: "R\u00e9novation toiture", urgent: false }, + { label: "Ravalement fa\u00e7ade", urgent: false }, + { label: "Ma\u00e7onnerie neuve", urgent: false }, + { label: "Charpente / Isolation", urgent: false }, + { label: "Autre projet", urgent: false }, + ].map((item) => ( + + ))} +
+
+ ); +} diff --git a/app/macon/page.tsx b/app/macon/page.tsx index 06eeedb..09180f0 100644 --- a/app/macon/page.tsx +++ b/app/macon/page.tsx @@ -1,148 +1,208 @@ import type { Metadata } from "next"; import Link from "next/link"; import Button from "@/components/ui/Button"; +import MaconClient from "./MaconClient"; export const metadata: Metadata = { - title: "D\u00e9mo Site Ma\u00e7on / Couvreur - Pack Gros \u0152uvre", + title: "D\u00e9mo Site Ma\u00e7on / Couvreur - L'Expertise Solide | HookLab", 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.", + "Mod\u00e8le de site HookLab pour ma\u00e7ons, couvreurs et charpentiers. Slider Avant/Apr\u00e8s interactif, badges garanties, formulaire intelligent, bouton urgence.", }; -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 ( -
- {/* Nav simplifi\u00e9e */} -