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

feat: rebuild 3 demo pages with interactive features + local SEO pages

Browse Source 
- 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
This commit is contained in:
Claude
2026-02-15 22:10:14 +00:00
parent a845b47316
commit 9025986e66
17 changed files with 1331 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
app/plombier/page.tsx
View File

@@ -1,169 +1,210 @@
import type { Metadata } from "next";
import Link from "next/link";
import Button from "@/components/ui/Button";
import PlombierClient from "./PlombierClient";
export const metadata: Metadata = {
title: "D\u00e9mo Site Plombier / \u00c9lectricien - Pack Urgence & Service",
title: "D\u00e9mo Site Plombier / \u00c9lectricien - L'Intervention \u00c9clair | HookLab",
description:
"D\u00e9couvrez le mod\u00e8le de site HookLab pour plombiers et \u00e9lectriciens. Chargement \u00e9clair, tarifs clairs, formulaire de diagnostic rapide.",
"Mod\u00e8le de site HookLab pour plombiers, \u00e9lectriciens et serruriers. Bouton d\u2019appel sticky, diagnostic en ligne, zone d\u2019intervention, tarifs clairs.",
};
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 },
{ service: "Remplacement chauffe-eau", prix: "\u00c0 partir de 350\u20ac", urgence: false },
{ service: "Installation sanitaire compl\u00e8te", prix: "Sur devis", urgence: false },
{ service: "Recherche de fuite", prix: "\u00c0 partir de 150\u20ac", urgence: true },
{ service: "R\u00e9novation salle de bain", prix: "Sur devis", urgence: false },
];
const avis = [
{ name: "Laurent P.", ville: "Douai", text: "Fuite \u00e0 22h un samedi. Intervention en 45 min. Prix correct, travail pro. Merci !", note: 5 },
{ name: "Marie C.", ville: "Orchies", text: "Chauffe-eau en panne en plein hiver. Remplac\u00e9 le lendemain matin. Service impeccable.", note: 5 },
{ name: "Jean-Marc B.", ville: "Valenciennes", text: "Canalisation bouch\u00e9e, devis clair au t\u00e9l\u00e9phone, pas de surprise \u00e0 la facture. Rare !", note: 5 },
];
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">
<main className="min-h-screen bg-[#0a1628]">
{/* Nav avec avis + t\u00e9l */}
<nav className="sticky top-0 z-50 bg-[#0a1628] 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 href="/" className="text-white/50 hover:text-white text-sm transition-colors">
&larr; HookLab
</Link>
<span className="text-white/30">|</span>
<span className="text-white/20">|</span>
<span className="text-white font-bold text-sm">
D\u00e9mo : <span className="text-orange">Pack Urgence</span>
[Votre Entreprise] &mdash; <span className="text-[#3b82f6]">Plombier</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 className="flex items-center gap-3">
{/* Avis Google */}
<div className="hidden sm:flex items-center gap-1.5 bg-yellow-500/10 border border-yellow-500/20 rounded-full px-3 py-1">
<div className="flex gap-0.5">
{[...Array(5)].map((_, i) => (
<svg key={i} className="w-3 h-3 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-yellow-300 text-xs font-semibold">4.9/5</span>
</div>
<a
href="tel:+33604408157"
className="bg-[#3b82f6] hover:bg-[#2563eb] 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>
06 04 40 81 57
</a>
</div>
</div>
</nav>
{/* Hero rapide */}
<section className="py-16 md:py-24 bg-navy text-center">
{/* Hero ultra-direct */}
<section className="py-16 md:py-24 bg-[#0a1628] 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 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-white leading-tight mb-4">
Convaincre en{" "}
<span className="text-[#facc15]">3 secondes chrono.</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 className="text-white/50 text-lg max-w-2xl mx-auto mb-4">
Quand un client a une fuite d&rsquo;eau ou une panne de courant, il ne veut pas lire
votre histoire. Il veut un num\u00e9ro, un prix, et une arriv\u00e9e rapide.
</p>
<p className="text-white/30 text-sm mb-8">
D\u00e9pannage Douai &middot; Orchies &middot; Valenciennes &middot; Denain &middot; Saint-Amand &middot; Arleux
</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"
href="tel:+33604408157"
className="inline-flex items-center gap-3 bg-[#3b82f6] hover:bg-[#2563eb] text-white font-bold text-xl px-10 py-5 rounded-2xl transition-colors shadow-lg shadow-blue-500/20"
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-7 h-7" 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>
<p className="text-white/40 text-sm mt-3">Pas de surprise : devis gratuit avant intervention</p>
</div>
</section>
{/* Tarifs clairs */}
<section className="py-16 md:py-24 bg-bg-white">
<section className="py-16 md:py-24 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 className="text-2xl md:text-3xl font-bold text-gray-900 mb-3">
Tarifs <span className="text-[#3b82f6]">transparents</span>
</h2>
<p className="text-text-light">Pas de surprise. Vous savez ce que vous payez.</p>
<p className="text-gray-500">Pas de surprise. Vous savez ce que vous payez avant qu&rsquo;on se d\u00e9place.</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 key={i} className="flex items-center justify-between bg-gray-50 border border-gray-200 rounded-xl p-5 hover:shadow-sm transition-shadow">
<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>
)}
{t.urgence && <span className="w-2 h-2 bg-red-500 rounded-full shrink-0" />}
<span className="text-gray-900 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>
<span className="text-[#3b82f6] font-bold text-sm">{t.prix}</span>
</div>
))}
</div>
</div>
</section>
{/* Diagnostic rapide */}
<section className="py-16 md:py-24 bg-bg">
{/* Diagnostic en ligne */}
<section className="py-16 md:py-24 bg-gray-50">
<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 className="text-2xl md:text-3xl font-bold text-gray-900 mb-3">
Diagnostic <span className="text-[#3b82f6]">en ligne</span>
</h2>
<p className="text-text-light">D\u00e9crivez votre probl\u00e8me en 30 secondes. On vous rappelle avec une solution.</p>
<p className="text-gray-500">3 questions simples. On qualifie la panne avant de d\u00e9crocher.</p>
</div>
<PlombierClient type="diagnostic" />
</div>
</section>
<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>
{/* Avis */}
<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-gray-900 mb-10">
Avis <span className="text-[#facc15]">Google</span> v\u00e9rifi\u00e9s
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{avis.map((a, i) => (
<div key={i} className="bg-gray-50 border border-gray-200 rounded-xl p-6 text-left">
<div className="flex gap-0.5 mb-3">
{[...Array(a.note)].map((_, j) => (
<svg key={j} 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>
<p className="text-gray-600 text-sm leading-relaxed mb-3">&ldquo;{a.text}&rdquo;</p>
<p className="text-gray-900 font-semibold text-sm">{a.name} &mdash; <span className="text-gray-400 font-normal">{a.ville}</span></p>
</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">
{/* Zone d'intervention avec carte */}
<section className="py-16 md:py-24 bg-gray-50">
<div className="max-w-4xl 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-gray-900 mb-3">
Zone <span className="text-[#3b82f6]">d&rsquo;intervention</span>
</h2>
<p className="text-gray-500">Douai + 25km. D\u00e9pannage rapide dans tout le secteur.</p>
</div>
<div className="bg-white border border-gray-200 rounded-2xl overflow-hidden">
<div className="relative h-64 sm:h-80">
<iframe
src="https://www.openstreetmap.org/export/embed.html?bbox=2.6%2C50.2%2C3.8%2C50.55&layer=mapnik&marker=50.4267%2C3.2372"
className="absolute inset-0 w-full h-full border-0"
title="Zone d'intervention plombier"
loading="lazy"
/>
</div>
<div className="p-4 border-t border-gray-100">
<div className="flex flex-wrap gap-2 justify-center">
{["Douai", "Orchies", "Valenciennes", "Denain", "Saint-Amand", "Arleux", "Flines-lez-Raches"].map((v) => (
<span key={v} className="bg-blue-50 text-[#3b82f6] text-xs font-semibold px-3 py-1 rounded-full">{v}</span>
))}
</div>
</div>
</div>
<p className="text-gray-400 text-xs text-center mt-4">
Vous \u00eates hors zone ? Contactez-nous, on trouvera une solution.
</p>
</div>
</section>
{/* Sticky Call Mobile */}
<PlombierClient type="sticky" />
{/* CTA HookLab */}
<section className="py-16 bg-[#3b82f6] 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>
<p className="text-white/80 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.
Ce site peut \u00eatre le v\u00f4tre 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 className="text-white/80 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">
<Button size="lg" className="bg-[#0a1628] hover:bg-[#0a1628]/90 border-[#0a1628]">
Demander Mon Audit Gratuit
</Button>
</Link>