enguerrandbusiness/obc-terrassement
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: complete restructure of macon demo page with 8 SEO-optimized sections

Browse Source 
- Hero: full-screen background image, H1 targeting Orchies/Cysoing/Saint-Amand,
  4.9/5 Google badge, dual CTA (devis + appeler)
- Réassurance: 3 blocks (décennale, devis gratuit, intervention rapide)
- Services: 4 detailed cards (extension, maçonnerie générale, rénovation, extérieur)
  with rich SEO keyword content (IPN, rejointoiement, dalle béton, etc.)
- Avant/Après: slider with project legends and local city names
- Zone d'intervention: OpenStreetMap centered on Saméon + SEO-rich city list
  (Orchies, Cysoing, Saint-Amand, Landas, Beuvry, Nomain, Genech, Templeuve)
- Qui suis-je: Cyprien's bio with trust points (interlocuteur unique, zéro
  sous-traitance, chantier propre)
- FAQ: 3-question accordion (délai devis, décennale, gravats)
- Smart form: 3 project type buttons (Extension, Rénovation, Petits Travaux)
  then contact details form
- Floating mobile CTA: "Appeler maintenant" button visible only on mobile
- Footer SEO: NAP coordinates, expertise links, legal

https://claude.ai/code/session_01V8YAjpqRQ3bfBYsABYsEgo
This commit is contained in:
Claude
2026-02-18 17:19:41 +00:00
parent ae13b107c5
commit db0adf6315
2 changed files with 604 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

260
app/macon/MaconClient.tsx
View File

@@ -5,20 +5,22 @@ import MagicReveal from "@/components/ui/MagicReveal";
import Button from "@/components/ui/Button";
interface MaconClientProps {
type?: "slider" | "form" | "cert";
certName?: string;
type?: "slider" | "form" | "faq" | "floating";
avantLabel?: string;
apresLabel?: string;
avantImage?: string;
apresImage?: string;
faqs?: { q: string; a: string }[];
}
export default function MaconClient({ type, certName, avantLabel, apresLabel, avantImage, apresImage }: MaconClientProps) {
// Cert badge with popup
if (!type || type === "cert") {
return <CertBadge name={certName || ""} />;
}
export default function MaconClient({
type,
avantLabel,
apresLabel,
avantImage,
apresImage,
faqs,
}: MaconClientProps) {
if (type === "slider") {
return (
<MagicReveal
@@ -35,121 +37,112 @@ export default function MaconClient({ type, certName, avantLabel, apresLabel, av
return <DevisForm />;
}
if (type === "faq") {
return <FaqAccordion faqs={faqs || []} />;
}
if (type === "floating") {
return <FloatingCTA />;
}
return null;
}
function CertBadge({ name }: { name: string }) {
const [open, setOpen] = useState(false);
const infos: Record<string, string> = {
"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.",
};
/* ============================================================
FAQ ACCORDION
============================================================ */
function FaqAccordion({ faqs }: { faqs: { q: string; a: string }[] }) {
const [openIdx, setOpenIdx] = useState<number | null>(null);
return (
<>
<button
onClick={() => setOpen(true)}
className="flex items-center gap-2 bg-white/10 hover:bg-white/20 border border-white/20 rounded-full px-4 py-1.5 transition-colors cursor-pointer"
>
<svg className="w-4 h-4 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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>
<span className="text-white text-xs font-semibold">{name}</span>
</button>
{/* Popup */}
{open && (
<div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 p-4" onClick={() => setOpen(false)}>
<div className="bg-white rounded-2xl p-6 max-w-sm w-full shadow-2xl" onClick={(e) => e.stopPropagation()}>
<div className="flex items-center gap-3 mb-4">
<div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
<svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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>
</div>
<h3 className="text-[#1b2a4a] font-bold text-lg">{name}</h3>
</div>
<p className="text-gray-600 text-sm leading-relaxed mb-5">
{infos[name] || "Certification professionnelle v\u00e9rifi\u00e9e."}
</p>
<div className="space-y-3">
{faqs.map((faq, i) => {
const isOpen = openIdx === i;
return (
<div key={i} className="bg-[#f8f6f3] border border-gray-200 rounded-xl overflow-hidden">
<button
onClick={() => setOpen(false)}
className="w-full bg-[#1b2a4a] text-white font-semibold text-sm py-2.5 rounded-xl hover:bg-[#1b2a4a]/90 transition-colors cursor-pointer"
onClick={() => setOpenIdx(isOpen ? null : i)}
className="w-full flex items-center justify-between p-5 text-left cursor-pointer"
>
Compris
<span className="text-navy font-semibold text-sm pr-4">{faq.q}</span>
<svg
className={`w-5 h-5 text-orange shrink-0 transition-transform ${isOpen ? "rotate-180" : ""}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
</button>
{isOpen && (
<div className="px-5 pb-5 -mt-1">
<p className="text-text-light text-sm leading-relaxed">{faq.a}</p>
</div>
)}
</div>
</div>
)}
</>
);
})}
</div>
);
}
/* ============================================================
SMART DEVIS FORM
============================================================ */
function DevisForm() {
const [step, setStep] = useState<"type" | "details" | "urgence">("type");
const [step, setStep] = useState<"type" | "details">("type");
const [projectType, setProjectType] = useState("");
if (step === "urgence") {
return (
<div className="bg-white rounded-2xl p-6 sm:p-8 text-center">
<div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
<svg className="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
</svg>
</div>
<h3 className="text-[#1b2a4a] font-bold text-xl mb-2">Urgence d&eacute;tect&eacute;e !</h3>
<p className="text-gray-500 text-sm mb-6">Pour une intervention rapide, appelez directement le patron :</p>
<a
href="tel:+33604408157"
className="inline-flex items-center justify-center gap-3 bg-red-600 hover:bg-red-700 text-white font-bold text-lg px-8 py-4 rounded-xl transition-colors w-full"
>
<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 LE PATRON
</a>
<p className="text-gray-400 text-xs mt-3">Disponible 7j/7 pour les urgences</p>
<button onClick={() => setStep("type")} className="text-gray-400 hover:text-gray-600 text-sm mt-4 underline cursor-pointer">
&larr; Retour au formulaire
</button>
</div>
);
}
if (step === "details") {
return (
<div className="bg-white rounded-2xl p-6 sm:p-8">
<div className="flex items-center gap-2 mb-6">
<span className="bg-orange text-white text-xs font-bold px-2.5 py-1 rounded-full">2/2</span>
<h3 className="text-[#1b2a4a] font-bold text-lg">D&eacute;tails du projet</h3>
<h3 className="text-navy font-bold text-lg">Vos coordonn&eacute;es</h3>
</div>
<p className="text-gray-400 text-sm mb-5">Type : <strong className="text-[#1b2a4a]">{projectType}</strong></p>
<p className="text-text-muted text-sm mb-5">
Projet : <strong className="text-navy">{projectType}</strong>
</p>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1.5">Surface approximative</label>
<select className="w-full px-4 py-3 bg-[#f8f6f3] border border-gray-200 rounded-xl text-gray-800 text-sm focus:border-orange focus:ring-1 focus:ring-orange outline-none">
<option>Moins de 50m&sup2;</option>
<option>50 &agrave; 100m&sup2;</option>
<option>100 &agrave; 200m&sup2;</option>
<option>Plus de 200m&sup2;</option>
</select>
<label className="block text-sm font-medium text-text mb-1.5">Votre nom</label>
<input
type="text"
placeholder="Marc Dupont"
className="w-full px-4 py-3 bg-[#f8f6f3] border border-gray-200 rounded-xl text-text text-sm placeholder:text-text-muted focus:border-orange focus:ring-1 focus:ring-orange outline-none"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1.5">Votre nom</label>
<input type="text" placeholder="Marc Dupont" className="w-full px-4 py-3 bg-[#f8f6f3] border border-gray-200 rounded-xl text-gray-800 text-sm placeholder:text-gray-400 focus:border-orange focus:ring-1 focus:ring-orange outline-none" />
<label className="block text-sm font-medium text-text mb-1.5">T&eacute;l&eacute;phone</label>
<input
type="tel"
placeholder="06 12 34 56 78"
className="w-full px-4 py-3 bg-[#f8f6f3] border border-gray-200 rounded-xl text-text text-sm placeholder:text-text-muted focus:border-orange focus:ring-1 focus:ring-orange outline-none"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1.5">T&eacute;l&eacute;phone</label>
<input type="tel" placeholder="06 12 34 56 78" className="w-full px-4 py-3 bg-[#f8f6f3] border border-gray-200 rounded-xl text-gray-800 text-sm placeholder:text-gray-400 focus:border-orange focus:ring-1 focus:ring-orange outline-none" />
<label className="block text-sm font-medium text-text mb-1.5">Ville</label>
<input
type="text"
placeholder="Orchies, Cysoing, Sam&eacute;on..."
className="w-full px-4 py-3 bg-[#f8f6f3] border border-gray-200 rounded-xl text-text text-sm placeholder:text-text-muted focus:border-orange focus:ring-1 focus:ring-orange outline-none"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1.5">Ville</label>
<input type="text" placeholder="Douai, Orchies, Valenciennes..." className="w-full px-4 py-3 bg-[#f8f6f3] border border-gray-200 rounded-xl text-gray-800 text-sm placeholder:text-gray-400 focus:border-orange focus:ring-1 focus:ring-orange outline-none" />
<label className="block text-sm font-medium text-text mb-1.5">D&eacute;crivez votre projet (optionnel)</label>
<textarea
placeholder="Surface, type de travaux, d&eacute;lais souhait&eacute;s..."
rows={3}
className="w-full px-4 py-3 bg-[#f8f6f3] border border-gray-200 rounded-xl text-text text-sm placeholder:text-text-muted focus:border-orange focus:ring-1 focus:ring-orange outline-none resize-none"
/>
</div>
<Button size="lg" className="w-full">Envoyer ma demande de devis</Button>
<button onClick={() => setStep("type")} className="w-full text-gray-400 hover:text-gray-600 text-sm underline cursor-pointer">
<Button size="lg" className="w-full">
Envoyer ma demande de devis
</Button>
<button
onClick={() => setStep("type")}
className="w-full text-text-muted hover:text-text text-sm underline cursor-pointer"
>
&larr; Retour
</button>
</div>
@@ -161,39 +154,78 @@ function DevisForm() {
<div className="bg-white rounded-2xl p-6 sm:p-8">
<div className="flex items-center gap-2 mb-6">
<span className="bg-orange text-white text-xs font-bold px-2.5 py-1 rounded-full">1/2</span>
<h3 className="text-[#1b2a4a] font-bold text-lg">Quel type de projet ?</h3>
<h3 className="text-navy font-bold text-lg">Quel type de projet&nbsp;?</h3>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
{[
{ 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 },
{
label: "Projet Extension",
desc: "Agrandissement, garage, sur\u00e9l\u00e9vation",
icon: (
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
),
},
{
label: "R\u00e9novation",
desc: "Fa\u00e7ade, rejointoiement, murs",
icon: (
<svg className="w-6 h-6" 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>
),
},
{
label: "Petits Travaux",
desc: "Terrasse, muret, dalle",
icon: (
<svg className="w-6 h-6" 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>
),
},
].map((item) => (
<button
key={item.label}
onClick={() => {
setProjectType(item.label);
if (item.urgent) {
setStep("urgence");
} else {
setStep("details");
}
setStep("details");
}}
className={`p-4 rounded-xl border-2 text-left transition-all cursor-pointer hover:shadow-md ${
item.urgent
? "border-red-300 bg-red-50 hover:border-red-500"
: "border-gray-200 bg-[#f8f6f3] hover:border-orange"
}`}
className="p-5 rounded-xl border-2 border-gray-200 bg-[#f8f6f3] hover:border-orange hover:shadow-md text-center transition-all cursor-pointer group"
>
<p className={`font-semibold text-sm ${item.urgent ? "text-red-600" : "text-[#1b2a4a]"}`}>
{item.urgent && "\u26a0\ufe0f "}{item.label}
</p>
<div className="w-10 h-10 bg-orange/10 rounded-lg flex items-center justify-center mx-auto mb-3 text-orange group-hover:bg-orange group-hover:text-white transition-colors">
{item.icon}
</div>
<p className="font-semibold text-navy text-sm mb-1">{item.label}</p>
<p className="text-text-muted text-xs">{item.desc}</p>
</button>
))}
</div>
</div>
);
}
/* ============================================================
FLOATING MOBILE CTA
============================================================ */
function FloatingCTA() {
return (
<div className="fixed bottom-4 left-4 right-4 z-50 md:hidden">
<a
href="tel:+33600000000"
className="flex items-center justify-center gap-2 bg-orange hover:bg-orange-hover text-white font-bold text-sm py-3.5 rounded-xl shadow-lg transition-colors w-full"
>
<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>
Appeler maintenant
</a>
</div>
);
}

596
app/macon/page.tsx
View File

@@ -1,232 +1,552 @@
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émo Site Maçon / Couvreur - L'Expertise Solide",
title:
"Ma\u00e7onnerie & Extension de Maison \u00e0 Orchies, Cysoing, Saint-Amand-les-Eaux | Artisan Ma\u00e7on Nord (59)",
description:
"Modèle de site HookLab pour maçons, couvreurs et charpentiers. Slider Avant/Après interactif, badges garanties, formulaire intelligent, bouton urgence.",
"Artisan ma\u00e7on depuis 10 ans. Extension de maison, gros \u0153uvre, r\u00e9novation, rejointoiement de briques, terrasse. Devis gratuit sous 24h. Orchies, Cysoing, Saint-Amand-les-Eaux, Sam\u00e9on et P\u00e9v\u00e8le.",
keywords: [
"ma\u00e7on Orchies",
"ma\u00e7onnerie Cysoing",
"extension maison Nord",
"agrandissement maison 59",
"ma\u00e7on Saint-Amand-les-Eaux",
"artisan ma\u00e7on P\u00e9v\u00e8le",
"gros \u0153uvre Nord",
"r\u00e9novation fa\u00e7ade",
"rejointoiement briques",
"terrasse carrel\u00e9e",
"dalle b\u00e9ton",
"ouverture mur porteur IPN",
"ma\u00e7on Sam\u00e9on",
"ma\u00e7on Landas",
"ma\u00e7on Nomain",
],
alternates: {
canonical: "https://hooklab.eu/macon",
},
};
export default function MaconDemo() {
const services = [
{
icon: (
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
),
title: "Extension de maison & Garage",
desc: "Agrandissez votre surface habitable : extension en parpaing ou brique, garage, toit plat ou traditionnel. Nous g\u00e9rons le gros \u0153uvre de A \u00e0 Z.",
},
{
icon: (
<svg className="w-7 h-7" 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: "Ma\u00e7onnerie G\u00e9n\u00e9rale",
desc: "Murs de cl\u00f4ture, fondations, ouverture de murs porteurs avec pose d\u2019IPN. Construction neuve ou reprise de ma\u00e7onnerie ancienne.",
},
{
icon: (
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
</svg>
),
title: "R\u00e9novation & Fa\u00e7ade",
desc: "Rejointoiement de briques, ravalement de fa\u00e7ade, dalle b\u00e9ton, reprise d\u2019enduit. Redonner vie \u00e0 votre b\u00e2ti sans compromis.",
},
{
icon: (
<svg className="w-7 h-7" 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: "Am\u00e9nagement Ext\u00e9rieur",
desc: "Terrasse carrel\u00e9e, all\u00e9es, pavage, muret. Cr\u00e9ez un ext\u00e9rieur qui met en valeur votre maison et votre terrain.",
},
];
const faqs = [
{
q: "Combien de temps pour un devis\u00a0?",
a: "Nous nous d\u00e9pla\u00e7ons pour une visite technique sous 48h, et le devis d\u00e9taill\u00e9 vous est remis dans la foul\u00e9e. Gratuit et sans engagement.",
},
{
q: "Vous avez la d\u00e9cennale\u00a0?",
a: "Oui, bien s\u00fbr. L\u2019attestation de garantie d\u00e9cennale est syst\u00e9matiquement fournie avec chaque devis. Votre ouvrage est couvert pendant 10 ans.",
},
{
q: "Vous faites l\u2019\u00e9vacuation des gravats\u00a0?",
a: "Oui. Chantier propre garanti. Nous g\u00e9rons l\u2019\u00e9vacuation des gravats et le nettoyage en fin de chantier. Vous n\u2019avez rien \u00e0 faire.",
},
];
export default function MaconPage() {
return (
<main className="min-h-screen bg-[#f8f6f3]">
{/* Nav avec badge dispo */}
<nav className="sticky top-0 z-50 bg-[#1b2a4a] 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; HookLab
</Link>
<span className="text-white/30">|</span>
<span className="text-white font-bold text-sm">
[Votre Entreprise] &mdash; <span className="text-orange-500">Maçonnerie & Couverture</span>
</span>
</div>
<div className="flex items-center gap-3">
{/* Badge dispo */}
<div className="hidden sm:flex items-center gap-2 bg-green-500/20 border border-green-500/30 rounded-full px-3 py-1">
<span className="w-2 h-2 bg-green-400 rounded-full animate-pulse" />
<span className="text-green-400 text-xs font-semibold">Dispo immédiate</span>
{/* ============================================================
SECTION 1 : HERO
============================================================ */}
<section className="relative min-h-[85vh] flex items-center bg-navy overflow-hidden">
{/* Background image overlay */}
<div
className="absolute inset-0 bg-cover bg-center"
style={{
backgroundImage:
"url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1920&q=80')",
}}
/>
<div className="absolute inset-0 bg-gradient-to-r from-[#1b2a4a]/95 via-[#1b2a4a]/85 to-[#1b2a4a]/70" />
{/* Nav bar */}
<nav className="absolute top-0 left-0 right-0 z-30">
<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; HookLab
</Link>
<span className="text-white/30">|</span>
<span className="text-white font-bold text-sm">
[Votre Entreprise] &mdash; <span className="text-orange">Ma&ccedil;onnerie</span>
</span>
</div>
<a
href="tel:+33604408157"
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"
href="tel:+33600000000"
className="bg-orange hover:bg-orange-hover 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>
<span className="hidden sm:inline">Urgence Fuite</span>
<span className="hidden sm:inline">06 XX XX XX XX</span>
<span className="sm:hidden">Appeler</span>
</a>
</div>
</div>
</nav>
</nav>
{/* Certifications en haut - immanquables */}
<div className="bg-[#1b2a4a] border-b border-white/5">
<div className="max-w-6xl mx-auto px-4 py-3 flex flex-wrap items-center justify-center gap-4 sm:gap-8">
{["Décennale", "Qualibat", "RGE"].map((cert) => (
<MaconClient key={cert} certName={cert} />
))}
</div>
</div>
<div className="relative z-20 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32">
{/* Google badge */}
<div className="inline-flex items-center gap-2 bg-white/10 border border-white/20 rounded-full px-4 py-2 mb-8 backdrop-blur-sm">
<div className="flex gap-0.5">
{[...Array(5)].map((_, i) => (
<svg key={i} className="w-4 h-4 text-yellow-400" 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>
<span className="text-white text-sm font-semibold">4.9/5 sur Google</span>
</div>
{/* Hero */}
<section className="py-20 md:py-28 bg-[#1b2a4a] text-center">
<div className="max-w-4xl mx-auto px-4">
<span className="inline-block px-3 py-1.5 bg-orange-500/20 border border-orange-500/30 rounded-full text-orange-500 text-xs font-semibold mb-6">
Maçonnerie &middot; Couverture &middot; Charpente
</span>
<h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-white leading-tight mb-4">
Vos chantiers parlent pour vous.{" "}
<span className="text-orange-500">Votre site aussi.</span>
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-white leading-[1.1] tracking-[-0.03em] mb-6 max-w-3xl">
Ma&ccedil;onnerie &amp; Extension de Maison &agrave;{" "}
<span className="text-orange">Orchies, Cysoing et Saint-Amand-les-Eaux.</span>
</h1>
<p className="text-white/60 text-lg max-w-2xl mx-auto mb-4">
Plus de 15 ans d’expérience en maçonnerie, couverture et charpente.
Chaque chantier est réalisé dans les règles de l’art, avec des garanties solides
pour votre tranquillité.
<p className="text-white/70 text-lg sm:text-xl max-w-2xl mb-4 leading-relaxed">
Artisan ma&ccedil;on depuis 10 ans. Sp&eacute;cialiste agrandissement, gros &oelig;uvre
et r&eacute;novation dans le P&eacute;v&egrave;le.
</p>
<p className="text-white/40 text-sm mb-8">
Intervention rapide sur Douai, Orchies, Valenciennes et environs.
Garantie d&eacute;cennale &middot; Devis gratuit &middot; Intervention sur tout le secteur Nord (59)
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#devis">
<Button size="lg" className="w-full sm:w-auto pulse-glow bg-orange-500 hover:bg-orange-600 text-white border-orange-500">
Demander un Devis Toiture
</Button>
<div className="flex flex-col sm:flex-row gap-4">
<a
href="#devis"
className="inline-flex items-center justify-center gap-2 bg-orange hover:bg-orange-hover text-white font-bold text-base px-8 py-4 rounded-xl transition-colors pulse-glow"
>
Obtenir mon devis sous 24h
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</a>
<a
href="tel:+33604408157"
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"
href="tel:+33600000000"
className="inline-flex items-center justify-center gap-2 border-2 border-white/20 text-white font-semibold text-sm px-6 py-4 rounded-xl hover:bg-white/10 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>
APPELER LE PATRON
Appeler directement
</a>
</div>
</div>
</section>
{/* Slider Magic Reveal - Avant/Après */}
{/* ============================================================
SECTION 2 : REASSURANCE
============================================================ */}
<section className="py-14 md:py-20 bg-white border-b border-gray-100">
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-6">
{[
{
icon: (
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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>
),
title: "Garantie D\u00e9cennale incluse",
desc: "Votre ouvrage est couvert 10 ans. Attestation fournie avec le devis.",
},
{
icon: (
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
</svg>
),
title: "Devis gratuit & d\u00e9taill\u00e9",
desc: "Pas de mauvaise surprise. Chaque poste est d\u00e9taill\u00e9 et expliqu\u00e9 clairement.",
},
{
icon: (
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
),
title: "Intervention rapide",
desc: "Sur Orchies, Cysoing, Saint-Amand-les-Eaux et dans un rayon de 25\u00a0km.",
},
].map((item, i) => (
<div key={i} className="text-center md:text-left flex flex-col items-center md:items-start gap-3">
<div className="w-14 h-14 bg-orange/10 rounded-2xl flex items-center justify-center text-orange">
{item.icon}
</div>
<div>
<h3 className="text-navy font-bold text-base mb-1">{item.title}</h3>
<p className="text-text-light text-sm leading-relaxed">{item.desc}</p>
</div>
</div>
))}
</div>
</div>
</section>
{/* ============================================================
SECTION 3 : SERVICES (SEO + EXPERTISE)
============================================================ */}
<section className="py-16 md:py-24 bg-[#f8f6f3]">
<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">
Nos Prestations
</span>
<h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-navy tracking-[-0.02em] mb-3">
Tous vos travaux de <span className="text-orange">ma&ccedil;onnerie</span> dans le Nord
</h2>
<p className="text-text-light text-base md:text-lg max-w-2xl mx-auto">
Du gros &oelig;uvre &agrave; la finition, nous intervenons sur tous types de projets
pour les particuliers et professionnels du P&eacute;v&egrave;le.
</p>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
{services.map((s, i) => (
<div
key={i}
className="bg-white border border-gray-200 rounded-2xl p-6 hover:shadow-lg hover:-translate-y-1 transition-all"
>
<div className="w-12 h-12 bg-orange/10 rounded-xl flex items-center justify-center text-orange mb-4">
{s.icon}
</div>
<h3 className="text-navy font-bold text-lg mb-2">{s.title}</h3>
<p className="text-text-light text-sm leading-relaxed">{s.desc}</p>
</div>
))}
</div>
</div>
</section>
{/* ============================================================
SECTION 4 : AVANT / APRES
============================================================ */}
<section className="py-16 md:py-24 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-[#1b2a4a] mb-3">
La preuve par l’image &mdash; <span className="text-orange-500">Avant / Après</span>
<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">
R&eacute;alisations
</span>
<h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-navy mb-3">
Vos voisins nous font <span className="text-orange">confiance</span>
</h2>
<p className="text-gray-500">Glissez la barre pour voir la transformation. Impact visuel immédiat.</p>
<p className="text-text-light text-base md:text-lg max-w-2xl mx-auto">
Glissez la barre pour voir la transformation. Ce sont de vrais chantiers r&eacute;alis&eacute;s dans le secteur.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{[
{
avant: "Toiture vétuste — Tuiles cassées",
apres: "Réfection complète en tuiles mécaniques",
avant: "Maison dans son jus",
apres: "Extension moderne 30m\u00b2 + terrasse",
avantImg: "https://images.unsplash.com/photo-1632823469850-2f77dd9c7f93?auto=format&fit=crop&w=800&q=80",
apresImg: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=800&q=80",
legend: "Extension 30m\u00b2 \u00e0 Cysoing \u2014 R\u00e9alis\u00e9 en 4 semaines.",
},
{
avant: "Façade fissurée — Enduit dégradé",
apres: "Ravalement complet + isolation",
avant: "Fa\u00e7ade fissur\u00e9e",
apres: "Ravalement complet",
avantImg: "https://images.unsplash.com/photo-1590274853856-f22d5ee3d228?auto=format&fit=crop&w=800&q=80",
apresImg: "https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=800&q=80",
legend: "Rejointoiement briques \u00e0 Orchies.",
},
{
avant: "Mur porteur abîmé — Fissures",
apres: "Reconstruction + renforcement",
avant: "Terrain nu",
apres: "Terrasse carrel\u00e9e + muret",
avantImg: "https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=800&q=80",
apresImg: "https://images.unsplash.com/photo-1600566753190-17f0baa2a6c0?auto=format&fit=crop&w=800&q=80",
legend: "Am\u00e9nagement ext\u00e9rieur \u00e0 Sam\u00e9on.",
},
].map((item, i) => (
<MaconClient key={i} type="slider" avantLabel={item.avant} apresLabel={item.apres} avantImage={item.avantImg} apresImage={item.apresImg} />
<div key={i}>
<MaconClient
type="slider"
avantLabel={item.avant}
apresLabel={item.apres}
avantImage={item.avantImg}
apresImage={item.apresImg}
/>
<p className="text-text-light text-xs mt-2 text-center italic">{item.legend}</p>
</div>
))}
</div>
</div>
</section>
{/* Garanties */}
{/* ============================================================
SECTION 5 : ZONE D'INTERVENTION (SEO LOCAL)
============================================================ */}
<section className="py-16 md:py-24 bg-[#f8f6f3]">
<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-[#1b2a4a] mb-3">
Vos <span className="text-orange-500">garanties</span>
</h2>
<p className="text-gray-500">Des certifications qui protègent votre investissement.</p>
</div>
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
{/* Map */}
<div className="rounded-2xl overflow-hidden shadow-lg border border-gray-200 h-[350px] md:h-[420px]">
<iframe
src="https://www.openstreetmap.org/export/embed.html?bbox=3.05%2C50.38%2C3.45%2C50.52&layer=mapnik&marker=50.4567%2C3.2300"
className="w-full h-full border-0"
title="Zone d'intervention ma\u00e7onnerie Nord"
loading="lazy"
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{[
{
name: "Garantie Décennale",
desc: "Votre ouvrage est couvert pendant 10 ans. En cas de défaut structurel, les réparations sont prises en charge intégralement.",
icon: "🛡️",
},
{
name: "Qualibat RGE",
desc: "Cette certification vous garantit des aides de l’État (MaPrimeRénov’, CEE). Jusqu’à 90% de vos travaux financés.",
icon: "✅",
},
{
name: "Assurance Responsabilité",
desc: "Chaque chantier est assuré. Vous ne prenez aucun risque financier, même en cas d’imprévu.",
icon: "💼",
},
].map((g, i) => (
<div key={i} className="bg-white border border-gray-200 rounded-2xl p-6 text-center hover:shadow-md transition-shadow">
<div className="text-4xl mb-4">{g.icon}</div>
<h3 className="text-[#1b2a4a] font-bold text-lg mb-2">{g.name}</h3>
<p className="text-gray-500 text-sm leading-relaxed">{g.desc}</p>
</div>
))}
{/* Text */}
<div>
<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">
Proximit&eacute;
</span>
<h2 className="text-2xl md:text-3xl font-bold text-navy mb-4">
Votre ma&ccedil;on de proximit&eacute; dans le <span className="text-orange">Nord (59)</span>
</h2>
<p className="text-text-light text-base leading-relaxed mb-4">
Bas&eacute;s &agrave; <strong className="text-navy">Sam&eacute;on</strong>, nous sommes rapidement
sur vos chantiers &agrave; <strong className="text-navy">Orchies</strong>,{" "}
<strong className="text-navy">Cysoing</strong> ou{" "}
<strong className="text-navy">Saint-Amand-les-Eaux</strong>.
</p>
<p className="text-text-light text-sm leading-relaxed mb-6">
Nous intervenons pour tous vos travaux de ma&ccedil;onnerie &agrave;{" "}
<strong>Orchies</strong>, <strong>Cysoing</strong>, <strong>Saint-Amand-les-Eaux</strong>,{" "}
<strong>Sam&eacute;on</strong>, <strong>Landas</strong>, <strong>Beuvry-la-For&ecirc;t</strong>,{" "}
<strong>Nomain</strong>, <strong>Genech</strong>, <strong>Templeuve</strong> et dans
tout le secteur du P&eacute;v&egrave;le et du Douaisis.
</p>
<a
href="#devis"
className="inline-flex items-center gap-2 bg-orange hover:bg-orange-hover text-white font-bold text-sm px-6 py-3 rounded-xl transition-colors"
>
Demander un devis
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</a>
</div>
</div>
</div>
</section>
{/* Avis clients */}
<section className="py-16 md:py-24 bg-white">
<div className="max-w-4xl mx-auto px-4 text-center">
<h2 className="text-2xl md:text-3xl font-bold text-[#1b2a4a] mb-10">
Ce que disent <span className="text-orange-500">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é. Je recommande à 100%.", note: 5 },
{ name: "Sophie L.", ville: "Orchies", text: "Fuite d’urgence un dimanche. Ils sont venus en 2h. Travail impeccable et prix honnête.", note: 5 },
{ name: "Patrick M.", ville: "Valenciennes", text: "Ravalement façade complet. Résultat magnifique, les voisins nous demandent le contact !", note: 5 },
{ name: "Isabelle R.", ville: "Arleux", text: "Charpente traitée et renforcée. Équipe sérieuse, devis respecté au centime près.", note: 5 },
].map((avis, i) => (
<div key={i} className="bg-[#f8f6f3] border border-gray-200 rounded-xl p-6 text-left">
<div className="flex gap-1 mb-3">
{[...Array(avis.note)].map((_, j) => (
<svg key={j} className="w-4 h-4 text-orange-500" 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>
))}
{/* ============================================================
SECTION 6 : QUI SUIS-JE ?
============================================================ */}
<section className="py-16 md:py-24 bg-navy">
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
{/* Photo placeholder */}
<div className="flex justify-center">
<div className="relative">
<div className="absolute -inset-3 bg-orange/20 rounded-3xl blur-xl" />
<div className="relative w-72 h-80 sm:w-80 sm:h-96 rounded-2xl overflow-hidden border-2 border-white/10">
<div className="w-full h-full bg-navy-light flex items-center justify-center">
<div className="text-center">
<div className="w-20 h-20 bg-orange/20 rounded-full flex items-center justify-center mx-auto mb-3">
<svg className="w-10 h-10 text-orange/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
</div>
<p className="text-white/30 text-sm">Photo de Cyprien</p>
<p className="text-white/20 text-xs mt-1">(sur le chantier)</p>
</div>
</div>
</div>
<div className="absolute -bottom-3 -right-3 bg-orange text-white text-xs font-bold px-4 py-2 rounded-xl shadow-lg">
Artisan depuis 10 ans
</div>
<p className="text-gray-600 text-sm leading-relaxed mb-3">“{avis.text}”</p>
<p className="text-[#1b2a4a] font-semibold text-sm">{avis.name} — <span className="text-gray-400 font-normal">{avis.ville}</span></p>
</div>
))}
</div>
{/* Bio */}
<div>
<span className="inline-block px-3 py-1.5 bg-white/10 rounded-full text-orange text-xs font-semibold mb-4">
L&rsquo;artisan derri&egrave;re les chantiers
</span>
<h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-white tracking-[-0.02em] mb-4">
Je suis Cyprien,{" "}
<span className="text-orange">artisan ma&ccedil;on passionn&eacute;.</span>
</h2>
<p className="text-white/80 text-base leading-relaxed mb-4">
Pas de commerciaux, pas de sous-traitance. Je suis votre interlocuteur unique
du devis &agrave; la fin du chantier. Quand vous m&rsquo;appelez, c&rsquo;est moi qui r&eacute;ponds.
</p>
<p className="text-white/60 text-base leading-relaxed mb-6">
Apr&egrave;s 10 ans &agrave; b&acirc;tir dans le P&eacute;v&egrave;le, je connais chaque type de terrain,
chaque contrainte locale. Mon engagement : un travail propre, dans les d&eacute;lais,
au prix annonc&eacute;. Sans mauvaise surprise.
</p>
<div className="flex flex-wrap gap-4">
{[
"Interlocuteur unique",
"Z\u00e9ro sous-traitance",
"Chantier propre garanti",
].map((item) => (
<div key={item} className="flex items-center gap-2">
<div className="w-5 h-5 bg-orange/20 rounded-full flex items-center justify-center">
<svg className="w-3 h-3 text-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
</svg>
</div>
<span className="text-white/70 text-sm">{item}</span>
</div>
))}
</div>
</div>
</div>
</div>
</section>
{/* Formulaire intelligent */}
<section id="devis" className="py-16 md:py-24 bg-[#1b2a4a]">
{/* ============================================================
SECTION 7 : FAQ
============================================================ */}
<section className="py-16 md:py-24 bg-white">
<div className="max-w-3xl 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">
Questions <span className="text-orange">fr&eacute;quentes</span>
</h2>
</div>
<MaconClient type="faq" faqs={faqs} />
</div>
</section>
{/* ============================================================
SECTION 8 : FORMULAIRE INTELLIGENT (DEVIS)
============================================================ */}
<section id="devis" className="py-16 md:py-24 bg-navy">
<div className="max-w-2xl mx-auto px-4">
<div className="text-center mb-10">
<h2 className="text-2xl md:text-3xl font-bold text-white mb-3">
Demander un <span className="text-orange-500">devis gratuit</span>
Demander un <span className="text-orange">devis gratuit</span>
</h2>
<p className="text-white/60">Formulaire intelligent : on filtre pour ne recevoir que les vrais projets.</p>
<p className="text-white/60">
S&eacute;lectionnez votre type de projet. Devis d&eacute;taill&eacute; sous 48h.
</p>
</div>
<MaconClient type="form" />
</div>
</section>
{/* CTA HookLab */}
<section className="py-16 bg-orange-500 text-center">
{/* ============================================================
CTA HookLab
============================================================ */}
<section className="py-12 bg-orange text-center">
<div className="max-w-2xl mx-auto px-4">
<p className="text-white/80 text-xs font-semibold uppercase tracking-wider mb-3">Ceci est une démo HookLab</p>
<h2 className="text-2xl md:text-3xl font-bold text-white mb-4">
Vous voulez le même site pour votre entreprise ?
</h2>
<p className="text-white/80 mb-6">
Imaginez votre logo, vos photos de chantier et votre numéro à la place. C’est exactement ce que je construis pour vous.
<p className="text-white/80 text-xs font-semibold uppercase tracking-wider mb-3">
Ceci est un mod&egrave;le HookLab
</p>
<Link href="/#contact">
<Button size="lg" className="bg-[#1b2a4a] hover:bg-[#1b2a4a]/90 border-[#1b2a4a]">
Demander Mon Audit Gratuit
</Button>
<h2 className="text-xl md:text-2xl font-bold text-white mb-4">
Vous voulez le m&ecirc;me site pour votre entreprise&nbsp;?
</h2>
<p className="text-white/80 text-sm mb-6">
Imaginez votre logo, vos photos de chantier et votre num&eacute;ro &agrave; la place.
</p>
<Link
href="/#contact"
className="inline-flex items-center gap-2 bg-navy hover:bg-navy-light text-white font-bold text-sm px-6 py-3 rounded-xl transition-colors"
>
Demander Mon Diagnostic Gratuit
</Link>
</div>
</section>
{/* ============================================================
FOOTER SEO
============================================================ */}
<footer className="bg-navy-dark border-t border-white/10 py-10">
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-sm">
{/* NAP */}
<div>
<h4 className="text-white font-semibold mb-3">Coordonn&eacute;es</h4>
<ul className="space-y-1 text-white/50">
<li className="font-semibold text-white">[Votre Entreprise]</li>
<li>Sam&eacute;on, 59310</li>
<li>T&eacute;l : 06 XX XX XX XX</li>
<li>SIRET : XXX XXX XXX XXXXX</li>
</ul>
</div>
{/* Expertises SEO */}
<div>
<h4 className="text-white font-semibold mb-3">Expertises</h4>
<ul className="space-y-1 text-white/50">
<li>Ma&ccedil;on Orchies</li>
<li>Ma&ccedil;on Cysoing</li>
<li>Ma&ccedil;on Saint-Amand-les-Eaux</li>
<li>Extension maison P&eacute;v&egrave;le</li>
</ul>
</div>
{/* Legal */}
<div>
<h4 className="text-white font-semibold mb-3">L&eacute;gal</h4>
<ul className="space-y-1">
<li>
<Link href="/mentions-legales" className="text-white/50 hover:text-white text-sm transition-colors">
Mentions l&eacute;gales
</Link>
</li>
<li>
<Link href="/confidentialite" className="text-white/50 hover:text-white text-sm transition-colors">
Politique de confidentialit&eacute;
</Link>
</li>
</ul>
</div>
</div>
<div className="border-t border-white/10 mt-8 pt-6 text-center">
<p className="text-white/30 text-xs">
Site cr&eacute;&eacute; par{" "}
<Link href="/" className="text-orange hover:underline">HookLab</Link>{" "}
&mdash; Cr&eacute;ation de sites internet pour artisans du b&acirc;timent.
</p>
</div>
</div>
</footer>
{/* Floating mobile CTA */}
<MaconClient type="floating" />
</main>
);
}