feat: refonte UI éditoriale — toutes les pages secondaires
Contact : - Redesign complet split dark/light identique à la homepage - Infos gauche (dark navy) : téléphone animé, email, adresse, zones, stats - Formulaire droit (stone-bg) avec labels uppercase et champs squarés Services : - Liste éditoriale sur dark navy — layout grid 12 cols numéroté - Keywords en pills squared, arrow animée, border-top orange Réalisations : - Filtres squared (suppression rounded-full) - Cards avec overlay slide-from-bottom rouge brique - Badge catégorie orange + CTA bottom dark navy Partenaires : - Hero dark + diagonal panel - Bloc stats 2-col avec border-l orange - Grid 4-col squared, grayscale → couleur au hover - CTA dark avec texture ServicePageLayout (composant partagé) : - Composant réutilisable pour toutes les pages de service - Hero dark + diagonal + back link - Stats border-l-2 orange - Items grid dark avec service-card-dark - SEO text 2-col - Contact split dark/light Pages mises à jour avec ServicePageLayout : - renovation/page.tsx - assainissement/page.tsx - creation-acces/page.tsx - demolition/page.tsx construction-maison/page.tsx : - Redesign complet en standalone avec le même pattern éditorial https://claude.ai/code/session_01Uec4iHjcPwB1pU41idWEdF
This commit is contained in:
Claude
@@ -1,31 +1,19 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import Navbar from "@/components/marketing/Navbar";
|
||||
import Footer from "@/components/marketing/Footer";
|
||||
import ScrollReveal from "@/components/animations/ScrollReveal";
|
||||
import ContactForm from "@/components/marketing/ContactForm";
|
||||
import ServicePageLayout from "@/components/marketing/ServicePageLayout";
|
||||
import { getSiteConfig } from "@/lib/content";
|
||||
|
||||
export async function generateMetadata(): Promise<Metadata> {
|
||||
const config = await getSiteConfig();
|
||||
return {
|
||||
|
||||
title: "Assainissement Maison Nord 59 | OBC Maçonnerie",
|
||||
description:
|
||||
"Création et mise aux normes de systèmes d'assainissement dans le Nord (59). OBC Maçonnerie intervient à Orchies, Douai, Valenciennes et alentours. Devis gratuit.",
|
||||
keywords: [
|
||||
"assainissement maison Nord",
|
||||
"assainissement individuel Nord 59",
|
||||
"fosse septique Nord",
|
||||
"mise aux normes assainissement",
|
||||
"assainissement Orchies",
|
||||
"assainissement Douai",
|
||||
],
|
||||
keywords: ["assainissement maison Nord", "assainissement individuel Nord 59", "fosse septique Nord", "mise aux normes assainissement"],
|
||||
alternates: { canonical: `${config.url}/assainissement` },
|
||||
};
|
||||
}
|
||||
|
||||
const prestations = [
|
||||
const items = [
|
||||
{ icon: "🔍", title: "Diagnostic", desc: "Analyse de votre installation existante et vérification de sa conformité aux normes en vigueur." },
|
||||
{ icon: "🏗️", title: "Création de fosse", desc: "Installation d'une fosse toutes eaux ou d'une micro-station d'épuration adaptée à votre terrain." },
|
||||
{ icon: "🌱", title: "Épandage", desc: "Création ou réhabilitation du dispositif d'épandage pour un traitement optimal des eaux usées." },
|
||||
@@ -38,85 +26,26 @@ export default async function AssainissementPage() {
|
||||
const config = await getSiteConfig();
|
||||
const { phone, phoneRaw } = config;
|
||||
return (
|
||||
<main id="main-content" className="min-h-screen">
|
||||
<Navbar />
|
||||
|
||||
<section className="bg-navy py-16 md:py-24">
|
||||
<div className="max-w-5xl mx-auto px-4 sm:px-6">
|
||||
<div className="max-w-2xl">
|
||||
<ScrollReveal direction="up">
|
||||
<Link href="/services" className="inline-flex items-center gap-1.5 text-white/50 hover:text-white text-sm mb-6 transition-colors">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
Tous les services
|
||||
</Link>
|
||||
<span className="text-orange text-sm font-semibold uppercase tracking-widest">Assainissement</span>
|
||||
<h1 className="text-3xl md:text-5xl font-bold text-white mt-2 mb-4">
|
||||
Assainissement dans le Nord
|
||||
</h1>
|
||||
<p className="text-white/70 text-lg mb-8">
|
||||
Mise aux normes, création ou réhabilitation de votre système d'assainissement — OBC Maçonnerie intervient dans les règles de l'art.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<Link href="/contact" className="inline-flex items-center justify-center gap-2 bg-orange hover:bg-orange-hover text-white font-bold px-7 py-3.5 rounded-xl transition-colors pulse-glow">
|
||||
Demander un devis gratuit
|
||||
</Link>
|
||||
<a href={`tel:${phoneRaw}`} className="inline-flex items-center justify-center gap-2 bg-white/10 hover:bg-white/20 text-white font-semibold px-7 py-3.5 rounded-xl transition-colors border border-white/20">{phone}</a>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-16 md:py-20 bg-bg">
|
||||
<div className="max-w-5xl mx-auto px-4 sm:px-6">
|
||||
<ScrollReveal direction="up">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-navy mb-10 text-center">Nos prestations assainissement</h2>
|
||||
</ScrollReveal>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{prestations.map((p, i) => (
|
||||
<ScrollReveal key={p.title} direction="up" delay={i * 80}>
|
||||
<div className="bg-bg-white border border-border rounded-2xl p-6 h-full">
|
||||
<div className="text-3xl mb-3">{p.icon}</div>
|
||||
<h3 className="text-navy font-bold text-base mb-2">{p.title}</h3>
|
||||
<p className="text-text-light text-sm leading-relaxed">{p.desc}</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-14 bg-stone-bg">
|
||||
<div className="max-w-3xl mx-auto px-4 sm:px-6">
|
||||
<ScrollReveal direction="up">
|
||||
<h2 className="text-2xl font-bold text-navy mb-4">Assainissement dans le Nord (59)</h2>
|
||||
<div className="space-y-4 text-text-light text-sm leading-relaxed">
|
||||
<ServicePageLayout
|
||||
label="Assainissement"
|
||||
title="Assainissement dans le Nord"
|
||||
subtitle="Mise aux normes, création ou réhabilitation de votre système d'assainissement — OBC Maçonnerie intervient dans les règles de l'art."
|
||||
phone={phone}
|
||||
phoneRaw={phoneRaw}
|
||||
items={items}
|
||||
itemsSectionTitle="Nos prestations assainissement"
|
||||
seoTitle="Assainissement dans le Nord (59)"
|
||||
seoText={
|
||||
<>
|
||||
<p>
|
||||
OBC Maçonnerie réalise vos travaux d'<strong className="text-text">assainissement non collectif dans le Nord</strong> — fosse toutes eaux, micro-station, épandage, réhabilitation. Benoît Colin vous accompagne de l'étude de votre terrain jusqu'à la réception des travaux.
|
||||
</p>
|
||||
<p>
|
||||
Que vous ayez besoin d'une <strong className="text-text">mise aux normes suite à un contrôle SPANC</strong>, d'une nouvelle installation pour une construction neuve ou d'une réhabilitation de l'existant, OBC Maçonnerie intervient à Orchies, Douai, Valenciennes, Mouchin et dans toutes les communes avoisinantes.
|
||||
</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-16 bg-bg">
|
||||
<div className="max-w-xl mx-auto px-4 sm:px-6">
|
||||
<ScrollReveal direction="up">
|
||||
<h2 className="text-2xl font-bold text-navy mb-2 text-center">Votre projet assainissement</h2>
|
||||
<p className="text-text-light text-sm text-center mb-8">Devis gratuit — Réponse sous 24h</p>
|
||||
</ScrollReveal>
|
||||
<ScrollReveal direction="up" delay={100}>
|
||||
<ContactForm />
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</main>
|
||||
</>
|
||||
}
|
||||
contactTitle="Votre projet d'assainissement"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9,7 +9,6 @@ import { getSiteConfig } from "@/lib/content";
|
||||
export async function generateMetadata(): Promise<Metadata> {
|
||||
const config = await getSiteConfig();
|
||||
return {
|
||||
|
||||
title: "Construction de Maison dans le Nord | OBC Maçonnerie Orchies",
|
||||
description:
|
||||
"Construction neuve, fondations, ossature bois dans le Nord (59). OBC Maçonnerie vous accompagne de A à Z. Devis gratuit.",
|
||||
@@ -37,52 +36,64 @@ const etapes = [
|
||||
export default async function ConstructionMaisonPage() {
|
||||
const config = await getSiteConfig();
|
||||
const { phone, phoneRaw } = config;
|
||||
|
||||
return (
|
||||
<main id="main-content" className="min-h-screen">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero */}
|
||||
<section className="bg-navy py-16 md:py-24">
|
||||
<div className="max-w-5xl mx-auto px-4 sm:px-6">
|
||||
<div className="max-w-2xl">
|
||||
<section className="bg-navy texture-dark py-16 md:py-24 relative overflow-hidden">
|
||||
<div className="hero-diagonal-panel" />
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ScrollReveal direction="up">
|
||||
<Link href="/services" className="inline-flex items-center gap-1.5 text-white/50 hover:text-white text-sm mb-6 transition-colors">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<Link
|
||||
href="/services"
|
||||
className="inline-flex items-center gap-2 text-white/40 hover:text-white text-xs font-bold uppercase tracking-widest mb-8 transition-colors"
|
||||
>
|
||||
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
Tous les services
|
||||
</Link>
|
||||
<span className="text-orange text-sm font-semibold uppercase tracking-widest">Gros œuvre</span>
|
||||
<h1 className="text-3xl md:text-5xl font-bold text-white mt-2 mb-4 leading-tight">
|
||||
<span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
|
||||
Gros œuvre
|
||||
</span>
|
||||
<h1 className="text-4xl md:text-6xl font-black text-white uppercase leading-none tracking-tight mb-5 max-w-3xl">
|
||||
Construction de maison dans le Nord
|
||||
</h1>
|
||||
<p className="text-white/70 text-lg mb-8">
|
||||
<p className="text-white/55 text-base md:text-lg max-w-xl mb-10">
|
||||
Benoît Colin, maçon expert à Mouchin, vous accompagne dans la construction de votre maison individuelle — de la première fondation à la remise des clés.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<Link href="/contact" className="inline-flex items-center justify-center gap-2 bg-orange hover:bg-orange-hover text-white font-bold px-7 py-3.5 rounded-xl transition-colors pulse-glow">
|
||||
Demander un devis gratuit
|
||||
<Link href="/contact" className="btn btn-fill px-8 py-4 text-xs uppercase tracking-[0.2em]">
|
||||
<span>Devis gratuit</span>
|
||||
<span>
|
||||
<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>
|
||||
</span>
|
||||
</Link>
|
||||
<a href={`tel:${phoneRaw}`} className="inline-flex items-center justify-center gap-2 bg-white/10 hover:bg-white/20 text-white font-semibold px-7 py-3.5 rounded-xl transition-colors border border-white/20">{phone}</a>
|
||||
<a href={`tel:${phoneRaw}`} className="btn btn-outline-light px-8 py-4 text-xs uppercase tracking-[0.2em]">
|
||||
<span>{phone}</span>
|
||||
</a>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Points clés */}
|
||||
<section className="py-14 bg-stone-bg">
|
||||
<div className="max-w-5xl mx-auto px-4 sm:px-6">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{/* Stats */}
|
||||
<section className="bg-stone-bg border-b border-border py-10">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
{[
|
||||
{ val: "15+", label: "ans d'expérience" },
|
||||
{ val: "100+", label: "maisons construites" },
|
||||
{ val: "30km", label: "rayon d'action" },
|
||||
{ val: "A→Z", label: "accompagnement complet" },
|
||||
].map((s) => (
|
||||
<div key={s.label} className="bg-bg-white border border-border rounded-xl p-5 text-center">
|
||||
<div className="text-2xl font-bold text-orange">{s.val}</div>
|
||||
<div className="text-text-light text-sm mt-1">{s.label}</div>
|
||||
<div key={s.label} className="border-l-2 border-orange pl-4">
|
||||
<div className="text-2xl font-black text-orange">{s.val}</div>
|
||||
<div className="text-text-muted text-xs uppercase tracking-wider mt-0.5">{s.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -90,20 +101,23 @@ export default async function ConstructionMaisonPage() {
|
||||
</section>
|
||||
|
||||
{/* Étapes */}
|
||||
<section className="py-16 md:py-20 bg-bg">
|
||||
<div className="max-w-5xl mx-auto px-4 sm:px-6">
|
||||
<section className="py-16 md:py-20 bg-navy-light">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ScrollReveal direction="up">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-navy mb-10 text-center">
|
||||
Comment se déroule votre construction ?
|
||||
<span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
|
||||
Notre méthode
|
||||
</span>
|
||||
<h2 className="text-white font-black text-2xl md:text-4xl uppercase leading-tight tracking-tight mb-12">
|
||||
Comment se déroule<br />votre construction ?
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-white/5">
|
||||
{etapes.map((e, i) => (
|
||||
<ScrollReveal key={e.num} direction="up" delay={i * 80}>
|
||||
<div className="bg-bg-white border border-border rounded-2xl p-6">
|
||||
<span className="text-orange font-black text-2xl">{e.num}</span>
|
||||
<h3 className="text-navy font-bold text-base mt-2 mb-2">{e.title}</h3>
|
||||
<p className="text-text-light text-sm leading-relaxed">{e.desc}</p>
|
||||
<div className="service-card-dark bg-white/[0.03] p-7 h-full">
|
||||
<span className="text-orange font-black text-4xl leading-none block mb-4">{e.num}</span>
|
||||
<h3 className="text-white font-black text-base uppercase tracking-wide mb-3">{e.title}</h3>
|
||||
<p className="text-white/50 text-sm leading-relaxed">{e.desc}</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
))}
|
||||
@@ -112,35 +126,66 @@ export default async function ConstructionMaisonPage() {
|
||||
</section>
|
||||
|
||||
{/* SEO text */}
|
||||
<section className="py-14 bg-stone-bg">
|
||||
<div className="max-w-3xl mx-auto px-4 sm:px-6">
|
||||
<section className="py-14 bg-stone-bg border-t border-border">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ScrollReveal direction="up">
|
||||
<h2 className="text-2xl font-bold text-navy mb-4">
|
||||
Votre maçon constructeur dans le Nord (59)
|
||||
<div className="grid md:grid-cols-2 gap-12 items-start">
|
||||
<div>
|
||||
<span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
|
||||
Notre expertise
|
||||
</span>
|
||||
<h2 className="text-navy font-black text-2xl md:text-3xl uppercase leading-tight tracking-tight mb-6">
|
||||
Votre maçon constructeur<br />dans le Nord (59)
|
||||
</h2>
|
||||
</div>
|
||||
<div className="space-y-4 text-text-light text-sm leading-relaxed">
|
||||
<p>
|
||||
OBC Maçonnerie, dirigé par Benoît Colin, est une entreprise de maçonnerie spécialisée dans la <strong className="text-text">construction de maison individuelle dans le Nord</strong>. Basés à Mouchin (59310), nous intervenons sur Orchies, Douai, Valenciennes, Flines-lès-Raches, Saint-Amand-les-Eaux et toutes les communes dans un rayon de 30 km.
|
||||
</p>
|
||||
<p>
|
||||
Que vous souhaitiez construire une maison en <strong className="text-text">parpaing</strong>, en <strong className="text-text">béton banché</strong> ou en <strong className="text-text">ossature bois</strong>, Benoît vous conseille et adapte chaque solution à votre terrain, votre budget et vos envies. Il ne fait jamais deux fois la même maison.
|
||||
Que vous souhaitiez construire une maison en <strong className="text-text">parpaing</strong>, en <strong className="text-text">béton banché</strong> ou en <strong className="text-text">ossature bois</strong>, Benoît vous conseille et adapte chaque solution à votre terrain, votre budget et vos envies.
|
||||
</p>
|
||||
<p>
|
||||
Grâce à son réseau de partenaires (électricien, plombier, charpentier, couvreur, menuisier, carreleur, peintre), OBC Maçonnerie coordonne l'ensemble des corps de métier pour vous livrer une maison complète, dans les délais.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact form */}
|
||||
<section className="py-16 md:py-20 bg-bg">
|
||||
<div className="max-w-xl mx-auto px-4 sm:px-6">
|
||||
<ScrollReveal direction="up">
|
||||
<h2 className="text-2xl font-bold text-navy mb-2 text-center">Votre projet de construction</h2>
|
||||
<p className="text-text-light text-sm text-center mb-8">Devis gratuit — Réponse sous 24h</p>
|
||||
{/* Contact split */}
|
||||
<section className="grid lg:grid-cols-2">
|
||||
<div className="bg-navy texture-dark py-16 md:py-20 px-8 md:px-12 lg:px-16 relative overflow-hidden">
|
||||
<div className="hero-diagonal-panel" />
|
||||
<ScrollReveal direction="left">
|
||||
<span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
|
||||
Votre projet de construction
|
||||
</span>
|
||||
<h2 className="text-white font-black text-2xl uppercase tracking-tight mb-6">
|
||||
Parlons de votre<br />future maison
|
||||
</h2>
|
||||
<p className="text-white/50 text-sm leading-relaxed mb-8 max-w-sm">
|
||||
Benoît se déplace gratuitement pour évaluer votre terrain et vous remettre un devis détaillé sous 24h.
|
||||
</p>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-orange" />
|
||||
<span className="text-white/60 text-sm">Devis gratuit & déplacement offert</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-orange" />
|
||||
<span className="text-white/60 text-sm">Réponse sous 24h</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-orange" />
|
||||
<span className="text-white/60 text-sm">Sans engagement</span>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
<ScrollReveal direction="up" delay={100}>
|
||||
</div>
|
||||
<div className="bg-stone-bg py-16 md:py-20 px-8 md:px-12 lg:px-16">
|
||||
<ScrollReveal direction="right">
|
||||
<ContactForm />
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
@@ -19,104 +19,124 @@ export default async function ContactPage() {
|
||||
const config = await getSiteConfig();
|
||||
const { phone, phoneRaw, email, address, zones, zoneDescription } = config;
|
||||
|
||||
const infos = [
|
||||
{
|
||||
icon: "📞",
|
||||
titre: "Téléphone",
|
||||
val: phone,
|
||||
href: `tel:${phoneRaw}`,
|
||||
desc: "Lun–Ven 7h–19h",
|
||||
},
|
||||
{
|
||||
icon: "📍",
|
||||
titre: "Adresse",
|
||||
val: address,
|
||||
href: undefined as string | undefined,
|
||||
desc: "Rayon d'intervention : 30km",
|
||||
},
|
||||
{
|
||||
icon: "📧",
|
||||
titre: "Email",
|
||||
val: email,
|
||||
href: `mailto:${email}`,
|
||||
desc: "Réponse sous 24h",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<main id="main-content" className="min-h-screen">
|
||||
<Navbar />
|
||||
|
||||
<section className="bg-navy py-16 md:py-20">
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 text-center">
|
||||
{/* Page hero */}
|
||||
<section className="bg-navy texture-dark py-16 md:py-20 relative overflow-hidden">
|
||||
<div className="hero-diagonal-panel" />
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ScrollReveal direction="up">
|
||||
<span className="text-orange text-sm font-semibold uppercase tracking-widest">Devis gratuit</span>
|
||||
<h1 className="text-3xl md:text-5xl font-bold text-white mt-2 mb-4">
|
||||
Contactez OBC Maçonnerie
|
||||
<span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
|
||||
Devis gratuit — Réponse sous 24h
|
||||
</span>
|
||||
<h1 className="text-4xl md:text-6xl font-black text-white uppercase leading-none tracking-tight">
|
||||
Parlons de<br />votre projet
|
||||
</h1>
|
||||
<p className="text-white/70 text-lg max-w-xl mx-auto">
|
||||
Benoît se déplace gratuitement pour évaluer votre projet et vous remettre un devis détaillé sous 24h.
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-16 md:py-20 bg-bg">
|
||||
<div className="max-w-5xl mx-auto px-4 sm:px-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
|
||||
{/* Infos + zones */}
|
||||
<div>
|
||||
{/* Split content */}
|
||||
<section className="grid lg:grid-cols-2">
|
||||
{/* Gauche — infos */}
|
||||
<div className="bg-navy-light py-16 md:py-20 px-8 md:px-12 lg:px-16">
|
||||
<ScrollReveal direction="left">
|
||||
<h2 className="text-xl font-bold text-navy mb-6">Nos coordonnées</h2>
|
||||
<div className="space-y-4 mb-8">
|
||||
{infos.map((info) => (
|
||||
<div key={info.titre} className="flex items-start gap-4 bg-bg-white border border-border rounded-xl p-4">
|
||||
<span className="text-2xl shrink-0">{info.icon}</span>
|
||||
<h2 className="text-white font-black text-2xl uppercase tracking-tight mb-8">
|
||||
Nos coordonnées
|
||||
</h2>
|
||||
|
||||
<div className="space-y-6 mb-10">
|
||||
{/* Téléphone */}
|
||||
<a href={`tel:${phoneRaw}`} className="flex items-center gap-4 group">
|
||||
<div className="w-11 h-11 border border-orange/40 flex items-center justify-center shrink-0 group-hover:border-orange group-hover:bg-orange/10 transition-all">
|
||||
<svg className="w-5 h-5 text-orange" 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>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-navy font-semibold text-sm">{info.titre}</p>
|
||||
{info.href ? (
|
||||
<a href={info.href} className="text-orange font-bold hover:underline text-sm">
|
||||
{info.val}
|
||||
<p className="text-white/40 text-xs uppercase tracking-widest mb-0.5">Téléphone</p>
|
||||
<p className="text-white font-bold text-xl group-hover:text-orange transition-colors">{phone}</p>
|
||||
<p className="text-white/30 text-xs mt-0.5">Lun–Sam 7h–19h</p>
|
||||
</div>
|
||||
</a>
|
||||
) : (
|
||||
<p className="text-text-light text-sm">{info.val}</p>
|
||||
)}
|
||||
<p className="text-text-muted text-xs mt-0.5">{info.desc}</p>
|
||||
|
||||
{/* Email */}
|
||||
<a href={`mailto:${email}`} className="flex items-center gap-4 group">
|
||||
<div className="w-11 h-11 border border-white/15 flex items-center justify-center shrink-0 group-hover:border-orange group-hover:bg-orange/10 transition-all">
|
||||
<svg className="w-5 h-5 text-white/40 group-hover:text-orange transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white/40 text-xs uppercase tracking-widest mb-0.5">Email</p>
|
||||
<p className="text-white/80 font-bold text-sm group-hover:text-orange transition-colors">{email}</p>
|
||||
<p className="text-white/30 text-xs mt-0.5">Réponse sous 24h</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{/* Adresse */}
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-11 h-11 border border-white/15 flex items-center justify-center shrink-0">
|
||||
<svg className="w-5 h-5 text-white/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white/40 text-xs uppercase tracking-widest mb-0.5">Siège</p>
|
||||
<p className="text-white/70 text-sm">{address}</p>
|
||||
<p className="text-white/30 text-xs mt-0.5">Rayon d'intervention : {zoneDescription}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<h3 className="text-base font-bold text-navy mb-3">Zone d'intervention</h3>
|
||||
<div className="flex flex-wrap gap-2 mb-6">
|
||||
{/* Zones */}
|
||||
<div className="border-t border-white/10 pt-8">
|
||||
<p className="text-white/40 text-xs uppercase tracking-widest mb-4">Zone d'intervention</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{zones.map((z) => (
|
||||
<span key={z} className="inline-flex items-center gap-1 bg-bg-white border border-border text-navy text-xs font-medium px-3 py-1.5 rounded-full">
|
||||
<span className="text-orange">📍</span> {z}
|
||||
<span
|
||||
key={z}
|
||||
className="inline-flex items-center gap-1.5 border border-white/15 text-white/60 text-xs font-bold px-3 py-1.5 uppercase tracking-wide"
|
||||
>
|
||||
<span className="w-1 h-1 rounded-full bg-orange shrink-0" />
|
||||
{z}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-text-muted text-xs italic">
|
||||
Et toutes les communes dans un rayon de {zoneDescription}.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 bg-navy rounded-2xl p-6">
|
||||
<h3 className="text-white font-bold mb-2">Devis gratuit & sans engagement</h3>
|
||||
<p className="text-white/60 text-sm">
|
||||
Benoît se déplace sur votre chantier pour évaluer votre projet, vous conseiller et vous remettre un devis clair et détaillé. Gratuit et sans engagement.
|
||||
</p>
|
||||
{/* Garanties */}
|
||||
<div className="mt-10 grid grid-cols-2 gap-5 border-t border-white/10 pt-8">
|
||||
{[
|
||||
{ val: "Gratuit", label: "Devis + déplacement" },
|
||||
{ val: "24h", label: "Délai de réponse" },
|
||||
{ val: "15+", label: "Ans d'expérience" },
|
||||
{ val: "Sans engagement", label: "Aucune obligation" },
|
||||
].map((s) => (
|
||||
<div key={s.label}>
|
||||
<div className="text-xl font-black text-orange">{s.val}</div>
|
||||
<div className="text-white/35 text-xs uppercase tracking-wider mt-0.5 leading-tight">{s.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
{/* Formulaire */}
|
||||
<div>
|
||||
{/* Droite — formulaire */}
|
||||
<div className="bg-stone-bg py-16 md:py-20 px-8 md:px-12 lg:px-16">
|
||||
<ScrollReveal direction="right">
|
||||
<h2 className="text-xl font-bold text-navy mb-6">Votre demande de devis</h2>
|
||||
<span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
|
||||
Demande de devis
|
||||
</span>
|
||||
<h2 className="text-navy font-black text-2xl uppercase tracking-tight mb-8">
|
||||
Votre projet
|
||||
</h2>
|
||||
<ContactForm />
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
|
||||
@@ -1,31 +1,19 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import Navbar from "@/components/marketing/Navbar";
|
||||
import Footer from "@/components/marketing/Footer";
|
||||
import ScrollReveal from "@/components/animations/ScrollReveal";
|
||||
import ContactForm from "@/components/marketing/ContactForm";
|
||||
import ServicePageLayout from "@/components/marketing/ServicePageLayout";
|
||||
import { getSiteConfig } from "@/lib/content";
|
||||
|
||||
export async function generateMetadata(): Promise<Metadata> {
|
||||
const config = await getSiteConfig();
|
||||
return {
|
||||
|
||||
title: "Création d'Accès, Voiries & Entrées | OBC Maçonnerie Nord",
|
||||
description:
|
||||
"Création d'accès, voiries privées, entrées de propriété et chemins dans le Nord (59). OBC Maçonnerie à Orchies. Devis gratuit.",
|
||||
keywords: [
|
||||
"création accès maison Nord",
|
||||
"voirie privée Nord 59",
|
||||
"entrée propriété Nord",
|
||||
"chemin béton Nord",
|
||||
"béton imprimé Nord",
|
||||
"création accès Orchies",
|
||||
],
|
||||
keywords: ["création accès maison Nord", "voirie privée Nord 59", "entrée propriété Nord", "chemin béton Nord"],
|
||||
alternates: { canonical: `${config.url}/creation-acces` },
|
||||
};
|
||||
}
|
||||
|
||||
const types = [
|
||||
const items = [
|
||||
{ icon: "🚗", title: "Entrées de propriété", desc: "Création d'une entrée soignée en béton, béton imprimé, pavés ou gravier stabilisé — adaptée à votre maison." },
|
||||
{ icon: "🛤️", title: "Voiries privées", desc: "Aménagement de voiries sur propriété privée, chemin d'accès à un bâtiment agricole ou industriel." },
|
||||
{ icon: "🌾", title: "Chemins ruraux", desc: "Création ou réfection de chemins en gravier compacté, grave non traitée ou béton désactivé." },
|
||||
@@ -38,69 +26,26 @@ export default async function CreationAccesPage() {
|
||||
const config = await getSiteConfig();
|
||||
const { phone, phoneRaw } = config;
|
||||
return (
|
||||
<main id="main-content" className="min-h-screen">
|
||||
<Navbar />
|
||||
|
||||
<section className="bg-navy py-16 md:py-24">
|
||||
<div className="max-w-5xl mx-auto px-4 sm:px-6">
|
||||
<div className="max-w-2xl">
|
||||
<ScrollReveal direction="up">
|
||||
<Link href="/services" className="inline-flex items-center gap-1.5 text-white/50 hover:text-white text-sm mb-6 transition-colors">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
Tous les services
|
||||
</Link>
|
||||
<span className="text-orange text-sm font-semibold uppercase tracking-widest">Voiries & accès</span>
|
||||
<h1 className="text-3xl md:text-5xl font-bold text-white mt-2 mb-4">
|
||||
Création d'accès dans le Nord
|
||||
</h1>
|
||||
<p className="text-white/70 text-lg mb-8">
|
||||
Voiries, entrées de propriété, chemins — OBC Maçonnerie crée vos accès sur mesure avec les matériaux adaptés à vos besoins.
|
||||
<ServicePageLayout
|
||||
label="Voiries & accès"
|
||||
title="Création d'accès dans le Nord"
|
||||
subtitle="Voiries, entrées de propriété, chemins — OBC Maçonnerie crée vos accès sur mesure avec les matériaux adaptés à vos besoins."
|
||||
phone={phone}
|
||||
phoneRaw={phoneRaw}
|
||||
items={items}
|
||||
itemsSectionTitle="Nos réalisations d'accès"
|
||||
seoTitle="Voirie & accès dans le Nord (59)"
|
||||
seoText={
|
||||
<>
|
||||
<p>
|
||||
OBC Maçonnerie réalise vos <strong className="text-text">travaux de voirie et création d'accès dans le Nord</strong>. Entrées de propriété en béton imprimé, chemins ruraux en gravier compacté ou voiries privées — Benoît Colin s'adapte à votre terrain et vos envies.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<Link href="/contact" className="inline-flex items-center justify-center gap-2 bg-orange hover:bg-orange-hover text-white font-bold px-7 py-3.5 rounded-xl transition-colors pulse-glow">
|
||||
Demander un devis gratuit
|
||||
</Link>
|
||||
<a href={`tel:${phoneRaw}`} className="inline-flex items-center justify-center gap-2 bg-white/10 hover:bg-white/20 text-white font-semibold px-7 py-3.5 rounded-xl transition-colors border border-white/20">{phone}</a>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-16 md:py-20 bg-bg">
|
||||
<div className="max-w-5xl mx-auto px-4 sm:px-6">
|
||||
<ScrollReveal direction="up">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-navy mb-10 text-center">Nos réalisations d'accès</h2>
|
||||
</ScrollReveal>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{types.map((t, i) => (
|
||||
<ScrollReveal key={t.title} direction="up" delay={i * 80}>
|
||||
<div className="bg-bg-white border border-border rounded-2xl p-6 h-full">
|
||||
<div className="text-3xl mb-3">{t.icon}</div>
|
||||
<h3 className="text-navy font-bold text-base mb-2">{t.title}</h3>
|
||||
<p className="text-text-light text-sm leading-relaxed">{t.desc}</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-16 bg-stone-bg">
|
||||
<div className="max-w-xl mx-auto px-4 sm:px-6">
|
||||
<ScrollReveal direction="up">
|
||||
<h2 className="text-2xl font-bold text-navy mb-2 text-center">Votre projet d'accès</h2>
|
||||
<p className="text-text-light text-sm text-center mb-8">Devis gratuit — Réponse sous 24h</p>
|
||||
</ScrollReveal>
|
||||
<ScrollReveal direction="up" delay={100}>
|
||||
<ContactForm />
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</main>
|
||||
<p>
|
||||
Chaque projet commence par une étude du terrain pour choisir les matériaux et la technique les mieux adaptés : béton, pavés, gravier, béton désactivé. L'objectif : un accès durable, esthétique et parfaitement drainé.
|
||||
</p>
|
||||
</>
|
||||
}
|
||||
contactTitle="Votre projet d'accès"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,31 +1,19 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import Navbar from "@/components/marketing/Navbar";
|
||||
import Footer from "@/components/marketing/Footer";
|
||||
import ScrollReveal from "@/components/animations/ScrollReveal";
|
||||
import ContactForm from "@/components/marketing/ContactForm";
|
||||
import ServicePageLayout from "@/components/marketing/ServicePageLayout";
|
||||
import { getSiteConfig } from "@/lib/content";
|
||||
|
||||
export async function generateMetadata(): Promise<Metadata> {
|
||||
const config = await getSiteConfig();
|
||||
return {
|
||||
|
||||
title: "Démolition Maison Nord 59 | OBC Maçonnerie",
|
||||
description:
|
||||
"Démolition totale ou partielle de maison, murs porteurs, bâtiments dans le Nord (59). OBC Maçonnerie à Orchies. Toutes garanties de sécurité. Devis gratuit.",
|
||||
keywords: [
|
||||
"démolition maison Nord 59",
|
||||
"démolition bâtiment Nord",
|
||||
"démolition mur porteur Nord",
|
||||
"démolition partielle Nord",
|
||||
"démolition Orchies",
|
||||
"démolition Douai",
|
||||
],
|
||||
keywords: ["démolition maison Nord 59", "démolition bâtiment Nord", "démolition mur porteur Nord", "démolition partielle Nord"],
|
||||
alternates: { canonical: `${config.url}/demolition` },
|
||||
};
|
||||
}
|
||||
|
||||
const types = [
|
||||
const items = [
|
||||
{ icon: "🏚️", title: "Démolition totale", desc: "Destruction complète d'un bâtiment résidentiel ou annexe, avec évacuation des gravats et remise en état du terrain." },
|
||||
{ icon: "🧱", title: "Démolition partielle", desc: "Démolition ciblée d'une partie du bâtiment pour permettre une extension ou une restructuration." },
|
||||
{ icon: "🏗️", title: "Suppression murs porteurs", desc: "Ouverture de murs porteurs avec pose de poutres et reprises en sous-œuvre pour sécuriser la structure." },
|
||||
@@ -38,85 +26,26 @@ export default async function DemolitionPage() {
|
||||
const config = await getSiteConfig();
|
||||
const { phone, phoneRaw } = config;
|
||||
return (
|
||||
<main id="main-content" className="min-h-screen">
|
||||
<Navbar />
|
||||
|
||||
<section className="bg-navy py-16 md:py-24">
|
||||
<div className="max-w-5xl mx-auto px-4 sm:px-6">
|
||||
<div className="max-w-2xl">
|
||||
<ScrollReveal direction="up">
|
||||
<Link href="/services" className="inline-flex items-center gap-1.5 text-white/50 hover:text-white text-sm mb-6 transition-colors">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
Tous les services
|
||||
</Link>
|
||||
<span className="text-orange text-sm font-semibold uppercase tracking-widest">Démolition</span>
|
||||
<h1 className="text-3xl md:text-5xl font-bold text-white mt-2 mb-4">
|
||||
Démolition dans le Nord
|
||||
</h1>
|
||||
<p className="text-white/70 text-lg mb-8">
|
||||
Démolition totale ou partielle, avec tout le matériel et les garanties de sécurité. OBC Maçonnerie gère votre chantier du début à la fin.
|
||||
<ServicePageLayout
|
||||
label="Démolition"
|
||||
title="Démolition dans le Nord"
|
||||
subtitle="Démolition totale ou partielle, avec tout le matériel et les garanties de sécurité. OBC Maçonnerie gère votre chantier du début à la fin."
|
||||
phone={phone}
|
||||
phoneRaw={phoneRaw}
|
||||
items={items}
|
||||
itemsSectionTitle="Nos prestations de démolition"
|
||||
seoTitle="Démolition dans le Nord (59)"
|
||||
seoText={
|
||||
<>
|
||||
<p>
|
||||
OBC Maçonnerie intervient pour toutes vos <strong className="text-text">opérations de démolition dans le Nord</strong>. Qu'il s'agisse de détruire un bâtiment entier, d'ouvrir un mur porteur ou de curer l'intérieur avant rénovation, Benoît Colin prend en charge votre chantier avec rigueur.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<Link href="/contact" className="inline-flex items-center justify-center gap-2 bg-orange hover:bg-orange-hover text-white font-bold px-7 py-3.5 rounded-xl transition-colors pulse-glow">
|
||||
Demander un devis gratuit
|
||||
</Link>
|
||||
<a href={`tel:${phoneRaw}`} className="inline-flex items-center justify-center gap-2 bg-white/10 hover:bg-white/20 text-white font-semibold px-7 py-3.5 rounded-xl transition-colors border border-white/20">{phone}</a>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-16 md:py-20 bg-bg">
|
||||
<div className="max-w-5xl mx-auto px-4 sm:px-6">
|
||||
<ScrollReveal direction="up">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-navy mb-10 text-center">Nos prestations de démolition</h2>
|
||||
</ScrollReveal>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{types.map((t, i) => (
|
||||
<ScrollReveal key={t.title} direction="up" delay={i * 80}>
|
||||
<div className="bg-bg-white border border-border rounded-2xl p-6 h-full">
|
||||
<div className="text-3xl mb-3">{t.icon}</div>
|
||||
<h3 className="text-navy font-bold text-base mb-2">{t.title}</h3>
|
||||
<p className="text-text-light text-sm leading-relaxed">{t.desc}</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-14 bg-stone-bg">
|
||||
<div className="max-w-3xl mx-auto px-4 sm:px-6">
|
||||
<ScrollReveal direction="up">
|
||||
<div className="bg-bg-white border border-border rounded-2xl p-6 flex items-start gap-4">
|
||||
<span className="text-3xl">⚠️</span>
|
||||
<div>
|
||||
<h3 className="text-navy font-bold mb-1">Démolition en toute sécurité</h3>
|
||||
<p className="text-text-light text-sm leading-relaxed">
|
||||
Avant toute démolition, OBC Maçonnerie vérifie la présence éventuelle d'amiante, de plomb ou d'autres matériaux dangereux, et fait appel aux spécialistes agréés si nécessaire. La sécurité du chantier et de ses riverains est une priorité absolue.
|
||||
<p>
|
||||
Avant toute démolition, OBC Maçonnerie vérifie la présence éventuelle d'amiante, de plomb ou d'autres matériaux dangereux, et fait appel aux spécialistes agréés si nécessaire. <strong className="text-text">La sécurité du chantier et de ses riverains est une priorité absolue.</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-16 bg-bg">
|
||||
<div className="max-w-xl mx-auto px-4 sm:px-6">
|
||||
<ScrollReveal direction="up">
|
||||
<h2 className="text-2xl font-bold text-navy mb-2 text-center">Votre projet de démolition</h2>
|
||||
<p className="text-text-light text-sm text-center mb-8">Devis gratuit — Réponse sous 24h</p>
|
||||
</ScrollReveal>
|
||||
<ScrollReveal direction="up" delay={100}>
|
||||
<ContactForm />
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</main>
|
||||
</>
|
||||
}
|
||||
contactTitle="Votre projet de démolition"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -22,39 +22,78 @@ export default async function PartenairesPage() {
|
||||
<main id="main-content" className="min-h-screen">
|
||||
<Navbar />
|
||||
|
||||
<section className="bg-navy py-16 md:py-20">
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 text-center">
|
||||
{/* Hero */}
|
||||
<section className="bg-navy texture-dark py-16 md:py-20 relative overflow-hidden">
|
||||
<div className="hero-diagonal-panel" />
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ScrollReveal direction="up">
|
||||
<span className="text-orange text-sm font-semibold uppercase tracking-widest">Notre force collective</span>
|
||||
<h1 className="text-3xl md:text-5xl font-bold text-white mt-2 mb-4">
|
||||
Notre réseau de partenaires
|
||||
<span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
|
||||
Un réseau de confiance
|
||||
</span>
|
||||
<h1 className="text-4xl md:text-6xl font-black text-white uppercase leading-none tracking-tight">
|
||||
Nos<br />partenaires
|
||||
</h1>
|
||||
<p className="text-white/70 text-lg max-w-2xl mx-auto">
|
||||
Seul on va vite, ensemble on va plus loin. Grâce à notre réseau d'artisans de confiance, OBC Maçonnerie coordonne l'ensemble des corps de métier pour que votre maison prenne forme de A à Z.
|
||||
<p className="text-white/50 text-base mt-5 max-w-2xl">
|
||||
Seul on va vite, ensemble on va plus loin. Benoît coordonne un réseau d'artisans sélectionnés pour que votre maison prenne forme de A à Z.
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-16 md:py-20 bg-bg">
|
||||
<div className="max-w-5xl mx-auto px-4 sm:px-6">
|
||||
{/* Message interlocuteur unique */}
|
||||
<section className="bg-stone-bg border-b border-border py-12 md:py-16">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ScrollReveal direction="up">
|
||||
<div className="bg-stone-bg border border-border rounded-2xl p-6 md:p-8 mb-12 text-center">
|
||||
<h2 className="text-xl md:text-2xl font-bold text-navy mb-3">
|
||||
Un seul interlocuteur pour tout votre projet
|
||||
<div className="grid md:grid-cols-2 gap-8 md:gap-16 items-center">
|
||||
<div>
|
||||
<span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
|
||||
Notre approche
|
||||
</span>
|
||||
<h2 className="text-navy font-black text-2xl md:text-3xl uppercase leading-tight tracking-tight mb-4">
|
||||
Un seul interlocuteur<br />pour tout votre projet
|
||||
</h2>
|
||||
<p className="text-text-light text-sm leading-relaxed max-w-xl mx-auto">
|
||||
Benoît Colin sélectionne et coordonne des artisans partenaires avec lesquels il travaille depuis des années. Vous n'avez qu'un seul contact — lui — pour piloter l'intégralité de votre chantier.
|
||||
<p className="text-text-light text-sm leading-relaxed">
|
||||
Benoît Colin sélectionne et coordonne des artisans avec lesquels il travaille depuis des années. Vous n'avez qu'un seul contact pour piloter l'intégralité de votre chantier — dans les délais et le budget convenus.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{[
|
||||
{ val: "10+", label: "Corps de métier" },
|
||||
{ val: "15+", label: "Ans de partenariat" },
|
||||
{ val: "100%", label: "Artisans qualifiés" },
|
||||
{ val: "1 seul", label: "Interlocuteur" },
|
||||
].map((s) => (
|
||||
<div key={s.label} className="border-l-2 border-orange pl-4">
|
||||
<div className="text-2xl font-black text-orange">{s.val}</div>
|
||||
<div className="text-text-muted text-xs uppercase tracking-wider mt-0.5">{s.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Grille partenaires */}
|
||||
<section className="py-16 md:py-20 bg-bg">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ScrollReveal direction="up">
|
||||
<span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-3">
|
||||
Corps de métier
|
||||
</span>
|
||||
<h2 className="text-navy font-black text-2xl md:text-3xl uppercase tracking-tight mb-10">
|
||||
Nos domaines d'expertise
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{partenaires.map((p, i) => (
|
||||
<ScrollReveal key={p.label} direction="up" delay={i * 70}>
|
||||
<div className="bg-bg-white border border-border rounded-2xl p-5 text-center h-full hover:border-orange hover:shadow-md transition-all">
|
||||
<div className="text-4xl mb-3">{p.icon}</div>
|
||||
<h3 className="text-navy font-bold text-base mb-2">{p.label}</h3>
|
||||
<ScrollReveal key={p.label} direction="up" delay={i * 60}>
|
||||
<div className="group bg-bg-white border border-border hover:border-orange p-6 h-full transition-all duration-200 cursor-default">
|
||||
<div className="text-3xl mb-4 grayscale group-hover:grayscale-0 transition-all">{p.icon}</div>
|
||||
<h3 className="text-navy font-black text-base uppercase tracking-wide mb-2 group-hover:text-orange transition-colors">
|
||||
{p.label}
|
||||
</h3>
|
||||
<p className="text-text-light text-xs leading-relaxed">{p.desc}</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
@@ -63,20 +102,25 @@ export default async function PartenairesPage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-14 bg-navy">
|
||||
<div className="max-w-3xl mx-auto px-4 sm:px-6 text-center">
|
||||
{/* CTA dark */}
|
||||
<section className="bg-navy texture-dark py-16 md:py-20 relative overflow-hidden">
|
||||
<div className="hero-diagonal-panel" />
|
||||
<div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<ScrollReveal direction="up">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-white mb-4">
|
||||
Un projet de A à Z
|
||||
<span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
|
||||
Projet de A à Z
|
||||
</span>
|
||||
<h2 className="text-white font-black text-3xl md:text-4xl uppercase leading-tight tracking-tight mb-8">
|
||||
Que vous construisiez ou rénowiez,<br />
|
||||
OBC orchestre chaque corps de métier
|
||||
</h2>
|
||||
<p className="text-white/70 mb-8 max-w-xl mx-auto">
|
||||
Que vous construisiez une maison neuve ou rénoviez l'existant, OBC Maçonnerie orchestre chaque corps de métier dans le bon ordre, au bon moment.
|
||||
</p>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="inline-flex items-center gap-2 bg-orange hover:bg-orange-hover text-white font-bold px-8 py-4 rounded-xl transition-colors"
|
||||
>
|
||||
Parler de mon projet à Benoît
|
||||
<Link href="/contact" className="btn btn-fill px-8 py-4 text-xs uppercase tracking-[0.2em]">
|
||||
<span>Parler de mon projet à Benoît</span>
|
||||
<span>
|
||||
<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>
|
||||
</span>
|
||||
</Link>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
@@ -25,29 +25,35 @@ export default async function RealisationsPage() {
|
||||
<main id="main-content" className="min-h-screen">
|
||||
<Navbar />
|
||||
|
||||
<section className="bg-navy py-16 md:py-20">
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 text-center">
|
||||
{/* Hero */}
|
||||
<section className="bg-navy texture-dark py-16 md:py-20 relative overflow-hidden">
|
||||
<div className="hero-diagonal-panel" />
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ScrollReveal direction="up">
|
||||
<span className="text-orange text-sm font-semibold uppercase tracking-widest">Portfolio</span>
|
||||
<h1 className="text-3xl md:text-5xl font-bold text-white mt-2 mb-4">Nos réalisations</h1>
|
||||
<p className="text-white/70 text-lg max-w-xl mx-auto">
|
||||
<span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
|
||||
Portfolio — Chantiers Nord (59)
|
||||
</span>
|
||||
<h1 className="text-4xl md:text-6xl font-black text-white uppercase leading-none tracking-tight">
|
||||
Nos<br />réalisations
|
||||
</h1>
|
||||
<p className="text-white/50 text-base mt-5 max-w-xl">
|
||||
Chaque chantier est unique. Découvrez quelques-unes de nos réalisations dans le Nord.
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Filtres catégories */}
|
||||
<section className="py-8 bg-bg border-b border-border">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<div className="flex flex-wrap gap-2 justify-center">
|
||||
{/* Filtres */}
|
||||
<section className="bg-bg border-b border-border py-6">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{cats.map((cat) => (
|
||||
<span
|
||||
key={cat}
|
||||
className={`px-4 py-2 rounded-full text-sm font-medium cursor-default ${
|
||||
className={`text-xs font-bold uppercase tracking-wider px-4 py-2 cursor-default transition-colors ${
|
||||
cat === "Tous"
|
||||
? "bg-navy text-white"
|
||||
: "bg-bg-white border border-border text-text-light"
|
||||
: "bg-bg-white border border-border text-text-light hover:border-orange hover:text-orange"
|
||||
}`}
|
||||
>
|
||||
{cat}
|
||||
@@ -59,54 +65,58 @@ export default async function RealisationsPage() {
|
||||
|
||||
{/* Galerie */}
|
||||
<section className="py-16 md:py-20 bg-bg">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{realisations.map((r, i) => (
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{realisations.map((r, i) => {
|
||||
const bgColors = ["bg-navy", "bg-stone", "bg-navy-light", "bg-stone", "bg-navy", "bg-navy-light"];
|
||||
return (
|
||||
<ScrollReveal key={r.title} direction="up" delay={i * 80}>
|
||||
<div className="bg-bg-white border border-border rounded-2xl overflow-hidden hover:shadow-lg transition-all group card-hover">
|
||||
<div className={`${r.color} h-48 flex items-center justify-center relative`}>
|
||||
<span className="text-white/10 text-8xl font-black">{i + 1}</span>
|
||||
<div className="absolute top-3 left-3">
|
||||
<span className="bg-white/20 text-white text-xs font-semibold px-2.5 py-1 rounded-full">
|
||||
<div className="realisation-card relative overflow-hidden aspect-[4/3] group cursor-pointer">
|
||||
{/* Fond */}
|
||||
<div className={`${bgColors[i % bgColors.length]} w-full h-full flex items-center justify-center`}>
|
||||
<span className="text-white/8 font-black text-9xl select-none">0{i + 1}</span>
|
||||
</div>
|
||||
|
||||
{/* Badge catégorie */}
|
||||
<div className="absolute top-4 left-4 z-10">
|
||||
<span className="bg-orange text-white text-xs font-bold px-3 py-1 uppercase tracking-wider">
|
||||
{r.categorie}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Infos au repos */}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-5 bg-gradient-to-t from-black/70 to-transparent group-hover:opacity-0 transition-opacity duration-300">
|
||||
<span className="text-white/50 text-xs uppercase tracking-widest block mb-1">{r.ville}</span>
|
||||
<h3 className="text-white font-black text-sm uppercase tracking-wide">{r.title}</h3>
|
||||
</div>
|
||||
<div className="p-5">
|
||||
<h3 className="text-navy font-bold text-base mb-2 group-hover:text-orange transition-colors">
|
||||
{r.title}
|
||||
</h3>
|
||||
<p className="text-text-light text-sm leading-relaxed mb-3">{r.description}</p>
|
||||
<div className="flex items-center gap-1 text-text-muted text-xs">
|
||||
<span>📍</span>
|
||||
<span>{r.ville}</span>
|
||||
</div>
|
||||
|
||||
{/* Overlay hover */}
|
||||
<div className="realisation-overlay absolute inset-0 bg-orange flex flex-col justify-end p-6">
|
||||
<span className="text-white/60 text-xs uppercase tracking-[0.2em] mb-2">{r.ville}</span>
|
||||
<h3 className="text-white font-black text-lg uppercase tracking-tight mb-2">{r.title}</h3>
|
||||
<p className="text-white/75 text-sm leading-relaxed">{r.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* CTA bottom */}
|
||||
<ScrollReveal direction="up" delay={200}>
|
||||
<div className="mt-14 bg-stone-bg border border-border rounded-2xl p-8 text-center">
|
||||
<h2 className="text-xl font-bold text-navy mb-2">
|
||||
Vous avez un projet similaire ?
|
||||
<div className="mt-16 bg-navy py-12 px-8 md:px-12 text-center">
|
||||
<span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-3">
|
||||
Un projet similaire ?
|
||||
</span>
|
||||
<h2 className="text-white font-black text-2xl md:text-3xl uppercase tracking-tight mb-6">
|
||||
Benoît se déplace gratuitement<br />pour évaluer votre chantier
|
||||
</h2>
|
||||
<p className="text-text-light text-sm mb-6">
|
||||
Benoît se déplace gratuitement pour évaluer votre chantier et vous remettre un devis.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="inline-flex items-center justify-center gap-2 bg-orange hover:bg-orange-hover text-white font-bold px-7 py-3.5 rounded-xl transition-colors"
|
||||
>
|
||||
Demander un devis gratuit
|
||||
<Link href="/contact" className="btn btn-fill px-8 py-4 text-xs uppercase tracking-[0.2em]">
|
||||
<span>Demander un devis gratuit</span>
|
||||
</Link>
|
||||
<a
|
||||
href={`tel:${phoneRaw}`}
|
||||
className="inline-flex items-center justify-center gap-2 border-2 border-navy text-navy hover:bg-navy hover:text-white font-bold px-7 py-3.5 rounded-xl transition-colors"
|
||||
>
|
||||
{phone}
|
||||
<a href={`tel:${phoneRaw}`} className="btn btn-outline-light px-8 py-4 text-xs uppercase tracking-[0.2em]">
|
||||
<span>{phone}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,31 +1,19 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import Navbar from "@/components/marketing/Navbar";
|
||||
import Footer from "@/components/marketing/Footer";
|
||||
import ScrollReveal from "@/components/animations/ScrollReveal";
|
||||
import ContactForm from "@/components/marketing/ContactForm";
|
||||
import ServicePageLayout from "@/components/marketing/ServicePageLayout";
|
||||
import { getSiteConfig } from "@/lib/content";
|
||||
|
||||
export async function generateMetadata(): Promise<Metadata> {
|
||||
const config = await getSiteConfig();
|
||||
return {
|
||||
|
||||
title: "Rénovation Maison & Appartement Nord 59 | OBC Maçonnerie",
|
||||
description:
|
||||
"Rénovation complète ou partielle de maison et appartement dans le Nord. Benoît Colin vous conseille et adapte chaque projet. Devis gratuit.",
|
||||
keywords: [
|
||||
"rénovation maison Nord 59",
|
||||
"rénovation appartement Nord",
|
||||
"maçon rénovation Douai",
|
||||
"maçon rénovation Valenciennes",
|
||||
"rénovation maison Orchies",
|
||||
"travaux rénovation Nord",
|
||||
],
|
||||
keywords: ["rénovation maison Nord 59", "rénovation appartement Nord", "maçon rénovation Douai", "maçon rénovation Valenciennes"],
|
||||
alternates: { canonical: `${config.url}/renovation` },
|
||||
};
|
||||
}
|
||||
|
||||
const typesTravaux = [
|
||||
const items = [
|
||||
{ icon: "🏚️", title: "Rénovation complète", desc: "Restructuration totale d'une maison ancienne, de la démolition des cloisons existantes à la pose des revêtements." },
|
||||
{ icon: "🧱", title: "Maçonnerie intérieure", desc: "Création ou suppression de cloisons, doublages, cages d'escalier, adaptation de plans d'architecte." },
|
||||
{ icon: "🏗️", title: "Extension", desc: "Agrandissement de votre maison par extension latérale ou surélévation, en parfaite continuité avec l'existant." },
|
||||
@@ -38,92 +26,29 @@ export default async function RenovationPage() {
|
||||
const config = await getSiteConfig();
|
||||
const { phone, phoneRaw } = config;
|
||||
return (
|
||||
<main id="main-content" className="min-h-screen">
|
||||
<Navbar />
|
||||
|
||||
<section className="bg-navy py-16 md:py-24">
|
||||
<div className="max-w-5xl mx-auto px-4 sm:px-6">
|
||||
<div className="max-w-2xl">
|
||||
<ScrollReveal direction="up">
|
||||
<Link href="/services" className="inline-flex items-center gap-1.5 text-white/50 hover:text-white text-sm mb-6 transition-colors">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
Tous les services
|
||||
</Link>
|
||||
<span className="text-orange text-sm font-semibold uppercase tracking-widest">Rénovation</span>
|
||||
<h1 className="text-3xl md:text-5xl font-bold text-white mt-2 mb-4">
|
||||
Rénovation maison & appartement dans le Nord
|
||||
</h1>
|
||||
<p className="text-white/70 text-lg mb-8">
|
||||
Chaque rénovation est unique. Benoît Colin s'adapte à votre projet, votre budget et vos envies pour transformer votre logement.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<Link href="/contact" className="inline-flex items-center justify-center gap-2 bg-orange hover:bg-orange-hover text-white font-bold px-7 py-3.5 rounded-xl transition-colors pulse-glow">
|
||||
Demander un devis gratuit
|
||||
</Link>
|
||||
<a href={`tel:${phoneRaw}`} className="inline-flex items-center justify-center gap-2 bg-white/10 hover:bg-white/20 text-white font-semibold px-7 py-3.5 rounded-xl transition-colors border border-white/20">{phone}</a>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-16 md:py-20 bg-bg">
|
||||
<div className="max-w-5xl mx-auto px-4 sm:px-6">
|
||||
<ScrollReveal direction="up">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-navy mb-10 text-center">
|
||||
Nos spécialités en rénovation
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{typesTravaux.map((t, i) => (
|
||||
<ScrollReveal key={t.title} direction="up" delay={i * 80}>
|
||||
<div className="bg-bg-white border border-border rounded-2xl p-6 h-full">
|
||||
<div className="text-3xl mb-3">{t.icon}</div>
|
||||
<h3 className="text-navy font-bold text-base mb-2">{t.title}</h3>
|
||||
<p className="text-text-light text-sm leading-relaxed">{t.desc}</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-14 bg-stone-bg">
|
||||
<div className="max-w-3xl mx-auto px-4 sm:px-6">
|
||||
<ScrollReveal direction="up">
|
||||
<h2 className="text-2xl font-bold text-navy mb-4">
|
||||
Maçon rénovation dans le Nord (59)
|
||||
</h2>
|
||||
<div className="space-y-4 text-text-light text-sm leading-relaxed">
|
||||
<ServicePageLayout
|
||||
label="Rénovation"
|
||||
title="Rénovation maison & appartement dans le Nord"
|
||||
subtitle="Chaque rénovation est unique. Benoît Colin s'adapte à votre projet, votre budget et vos envies pour transformer votre logement."
|
||||
phone={phone}
|
||||
phoneRaw={phoneRaw}
|
||||
items={items}
|
||||
itemsSectionTitle="Nos spécialités en rénovation"
|
||||
seoTitle="Maçon rénovation dans le Nord (59)"
|
||||
seoText={
|
||||
<>
|
||||
<p>
|
||||
OBC Maçonnerie intervient pour tous vos travaux de <strong className="text-text">rénovation dans le Nord</strong>. Que vous soyez à Orchies, Douai, Valenciennes ou dans les communes environnantes, Benoît Colin se déplace pour évaluer votre projet et vous proposer les meilleures solutions.
|
||||
OBC Maçonnerie intervient pour tous vos travaux de <strong className="text-text">rénovation dans le Nord</strong>. Que vous soyez à Orchies, Douai, Valenciennes ou dans les communes environnantes, Benoît Colin se déplace pour évaluer votre projet.
|
||||
</p>
|
||||
<p>
|
||||
Sa passion : adapter les espaces. Modifier une cage d'escalier pour créer un hall plus lumineux, abattre une cloison pour ouvrir un salon, adapter un plan pour coller à votre mode de vie — Benoît réfléchit avec vous et vous éclaire dans vos décisions.
|
||||
Sa passion : adapter les espaces. Modifier une cage d'escalier, abattre une cloison, adapter un plan pour coller à votre mode de vie — Benoît réfléchit avec vous et vous éclaire dans vos décisions.
|
||||
</p>
|
||||
<p>
|
||||
Grâce à son réseau de partenaires, il coordonne aussi les corps de métier complémentaires (électricité, plomberie, carrelage, peinture) pour une rénovation complète avec un seul interlocuteur.
|
||||
</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-16 bg-bg">
|
||||
<div className="max-w-xl mx-auto px-4 sm:px-6">
|
||||
<ScrollReveal direction="up">
|
||||
<h2 className="text-2xl font-bold text-navy mb-2 text-center">Votre projet de rénovation</h2>
|
||||
<p className="text-text-light text-sm text-center mb-8">Devis gratuit — Réponse sous 24h</p>
|
||||
</ScrollReveal>
|
||||
<ScrollReveal direction="up" delay={100}>
|
||||
<ContactForm />
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</main>
|
||||
</>
|
||||
}
|
||||
contactTitle="Votre projet de rénovation"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -12,6 +12,14 @@ export const metadata: Metadata = {
|
||||
alternates: { canonical: "https://obc-maconnerie.fr/services" },
|
||||
};
|
||||
|
||||
function Arrow() {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
export default async function ServicesPage() {
|
||||
const [services, config] = await Promise.all([getServices(), getSiteConfig()]);
|
||||
const { phone, phoneRaw } = config;
|
||||
@@ -20,66 +28,105 @@ export default async function ServicesPage() {
|
||||
<main id="main-content" className="min-h-screen">
|
||||
<Navbar />
|
||||
|
||||
<section className="bg-navy py-16 md:py-20">
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 text-center">
|
||||
{/* Hero */}
|
||||
<section className="bg-navy texture-dark py-16 md:py-20 relative overflow-hidden">
|
||||
<div className="hero-diagonal-panel" />
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ScrollReveal direction="up">
|
||||
<span className="text-orange text-sm font-semibold uppercase tracking-widest">OBC Maçonnerie</span>
|
||||
<h1 className="text-3xl md:text-5xl font-bold text-white mt-2 mb-4">Nos services de maçonnerie</h1>
|
||||
<p className="text-white/70 text-lg max-w-xl mx-auto">
|
||||
Construction, rénovation, assainissement et gros œuvre dans le Nord — Benoît Colin vous accompagne de A à Z.
|
||||
<span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
|
||||
OBC Maçonnerie — Nord (59)
|
||||
</span>
|
||||
<h1 className="text-4xl md:text-6xl font-black text-white uppercase leading-none tracking-tight">
|
||||
Nos services<br />de maçonnerie
|
||||
</h1>
|
||||
<p className="text-white/50 text-base mt-5 max-w-xl">
|
||||
Construction, rénovation, assainissement et gros œuvre — Benoît Colin vous accompagne de A à Z.
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-16 md:py-20 bg-bg">
|
||||
<div className="max-w-5xl mx-auto px-4 sm:px-6 space-y-8">
|
||||
{/* Services list — dark editorial */}
|
||||
<section className="bg-navy-light py-16 md:py-20">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="space-y-px">
|
||||
{services.map((s, i) => {
|
||||
const href = s.slug === "conseil" ? "/contact" : `/${s.slug}`;
|
||||
return (
|
||||
<ScrollReveal key={s.slug} direction="up" delay={i * 60}>
|
||||
<div className="bg-bg-white border border-border rounded-2xl p-6 md:p-8 flex flex-col md:flex-row gap-6">
|
||||
<div className="text-5xl shrink-0">{s.icon}</div>
|
||||
<div className="flex-1">
|
||||
<h2 className="text-xl font-bold text-navy mb-2">{s.title}</h2>
|
||||
<p className="text-text-light text-sm leading-relaxed mb-4">{s.longDescription}</p>
|
||||
<div className="flex flex-wrap gap-2 mb-5">
|
||||
<div className="group bg-white/[0.02] border-t border-white/8 hover:bg-white/[0.05] transition-all duration-300">
|
||||
<div className="max-w-7xl mx-auto px-0 py-8 grid md:grid-cols-12 gap-6 items-start">
|
||||
|
||||
{/* Numéro + icône */}
|
||||
<div className="md:col-span-2 flex items-center gap-4 md:flex-col md:items-start md:gap-2">
|
||||
<span className="text-white/15 font-black text-3xl md:text-4xl leading-none">
|
||||
0{i + 1}
|
||||
</span>
|
||||
<span className="text-2xl">{s.icon}</span>
|
||||
</div>
|
||||
|
||||
{/* Titre + description */}
|
||||
<div className="md:col-span-7">
|
||||
<h2 className="text-white font-black text-xl md:text-2xl uppercase tracking-tight mb-3 group-hover:text-orange transition-colors">
|
||||
{s.title}
|
||||
</h2>
|
||||
<p className="text-white/50 text-sm leading-relaxed mb-4">
|
||||
{s.longDescription}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{s.keywords.map((k) => (
|
||||
<span key={k} className="bg-bg-muted text-text-light text-xs font-medium px-3 py-1 rounded-full">
|
||||
<span
|
||||
key={k}
|
||||
className="border border-white/10 text-white/35 text-xs font-bold px-3 py-1 uppercase tracking-wide"
|
||||
>
|
||||
{k}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA */}
|
||||
<div className="md:col-span-3 flex md:justify-end md:pt-1">
|
||||
<Link
|
||||
href={href}
|
||||
className="inline-flex items-center gap-1.5 text-orange font-semibold text-sm hover:underline"
|
||||
className="btn-arrow text-orange text-xs uppercase tracking-widest"
|
||||
>
|
||||
En savoir plus
|
||||
<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>
|
||||
<span className="arrow-icon"><Arrow /></span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-16 bg-stone-bg">
|
||||
<div className="max-w-2xl mx-auto px-4 text-center">
|
||||
{/* CTA band */}
|
||||
<section className="bg-orange py-16 md:py-20 relative overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-5" style={{
|
||||
backgroundImage: "repeating-linear-gradient(45deg, #fff 0px, #fff 1px, transparent 1px, transparent 50%)",
|
||||
backgroundSize: "20px 20px"
|
||||
}} />
|
||||
<div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<ScrollReveal direction="up">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-navy mb-4">Vous avez un projet ? Parlons-en.</h2>
|
||||
<p className="text-text-light mb-6">
|
||||
Benoît se déplace gratuitement pour évaluer votre projet et vous remettre un devis détaillé.
|
||||
</p>
|
||||
<h2 className="text-white font-black text-3xl md:text-4xl uppercase leading-tight tracking-tight mb-8">
|
||||
Vous avez un projet ?<br />
|
||||
Parlons-en.
|
||||
</h2>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Link href="/contact" className="inline-flex items-center justify-center gap-2 bg-orange hover:bg-orange-hover text-white font-bold px-7 py-3.5 rounded-xl transition-colors">
|
||||
Demander un devis gratuit
|
||||
<Link href="/contact" className="btn btn-fill-white px-8 py-4 text-xs uppercase tracking-[0.2em]">
|
||||
<span>Devis gratuit</span>
|
||||
<span>
|
||||
<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>
|
||||
</span>
|
||||
</Link>
|
||||
<a href={`tel:${phoneRaw}`} className="inline-flex items-center justify-center gap-2 border-2 border-navy text-navy hover:bg-navy hover:text-white font-bold px-7 py-3.5 rounded-xl transition-colors">
|
||||
{phone}
|
||||
<a href={`tel:${phoneRaw}`} className="btn btn-outline-light px-8 py-4 text-xs uppercase tracking-[0.2em]">
|
||||
<span>{phone}</span>
|
||||
</a>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
191
components/marketing/ServicePageLayout.tsx
Normal file
191
components/marketing/ServicePageLayout.tsx
Normal file
@@ -0,0 +1,191 @@
|
||||
import Link from "next/link";
|
||||
import Navbar from "@/components/marketing/Navbar";
|
||||
import Footer from "@/components/marketing/Footer";
|
||||
import ScrollReveal from "@/components/animations/ScrollReveal";
|
||||
import ContactForm from "@/components/marketing/ContactForm";
|
||||
|
||||
interface ServiceItem {
|
||||
icon: string;
|
||||
title: string;
|
||||
desc: string;
|
||||
}
|
||||
|
||||
interface Stat {
|
||||
val: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
label: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
phone: string;
|
||||
phoneRaw: string;
|
||||
items: ServiceItem[];
|
||||
itemsSectionTitle: string;
|
||||
stats?: Stat[];
|
||||
seoTitle: string;
|
||||
seoText: React.ReactNode;
|
||||
contactTitle?: string;
|
||||
}
|
||||
|
||||
function Arrow() {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ServicePageLayout({
|
||||
label,
|
||||
title,
|
||||
subtitle,
|
||||
phone,
|
||||
phoneRaw,
|
||||
items,
|
||||
itemsSectionTitle,
|
||||
stats,
|
||||
seoTitle,
|
||||
seoText,
|
||||
contactTitle,
|
||||
}: Props) {
|
||||
return (
|
||||
<main id="main-content" className="min-h-screen">
|
||||
<Navbar />
|
||||
|
||||
{/* Hero */}
|
||||
<section className="bg-navy texture-dark py-16 md:py-24 relative overflow-hidden">
|
||||
<div className="hero-diagonal-panel" />
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ScrollReveal direction="up">
|
||||
<Link
|
||||
href="/services"
|
||||
className="inline-flex items-center gap-2 text-white/40 hover:text-white text-xs font-bold uppercase tracking-widest mb-8 transition-colors"
|
||||
>
|
||||
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
Tous les services
|
||||
</Link>
|
||||
<span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
|
||||
{label}
|
||||
</span>
|
||||
<h1 className="text-4xl md:text-6xl font-black text-white uppercase leading-none tracking-tight mb-5 max-w-3xl">
|
||||
{title}
|
||||
</h1>
|
||||
<p className="text-white/55 text-base md:text-lg max-w-xl mb-10">{subtitle}</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<Link href="/contact" className="btn btn-fill px-8 py-4 text-xs uppercase tracking-[0.2em]">
|
||||
<span>Devis gratuit</span>
|
||||
<span><Arrow /></span>
|
||||
</Link>
|
||||
<a href={`tel:${phoneRaw}`} className="btn btn-outline-light px-8 py-4 text-xs uppercase tracking-[0.2em]">
|
||||
<span>{phone}</span>
|
||||
</a>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stats */}
|
||||
{stats && stats.length > 0 && (
|
||||
<section className="bg-stone-bg border-b border-border py-10">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
{stats.map((s) => (
|
||||
<div key={s.label} className="border-l-2 border-orange pl-4">
|
||||
<div className="text-2xl font-black text-orange">{s.val}</div>
|
||||
<div className="text-text-muted text-xs uppercase tracking-wider mt-0.5">{s.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Items grid */}
|
||||
<section className="py-16 md:py-20 bg-navy-light">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ScrollReveal direction="up">
|
||||
<span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
|
||||
Nos prestations
|
||||
</span>
|
||||
<h2 className="text-white font-black text-2xl md:text-4xl uppercase leading-tight tracking-tight mb-12">
|
||||
{itemsSectionTitle}
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-white/5">
|
||||
{items.map((item, i) => (
|
||||
<ScrollReveal key={item.title} direction="up" delay={i * 80}>
|
||||
<div className="service-card-dark bg-white/[0.03] p-7 h-full">
|
||||
<div className="text-3xl mb-4 grayscale">{item.icon}</div>
|
||||
<h3 className="text-white font-black text-base uppercase tracking-wide mb-3">{item.title}</h3>
|
||||
<p className="text-white/50 text-sm leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SEO text */}
|
||||
<section className="py-14 bg-stone-bg border-t border-border">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ScrollReveal direction="up">
|
||||
<div className="grid md:grid-cols-2 gap-12 items-start">
|
||||
<div>
|
||||
<span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
|
||||
Notre expertise
|
||||
</span>
|
||||
<h2 className="text-navy font-black text-2xl md:text-3xl uppercase leading-tight tracking-tight">
|
||||
{seoTitle}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="space-y-4 text-text-light text-sm leading-relaxed">
|
||||
{seoText}
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact split */}
|
||||
<section className="grid lg:grid-cols-2">
|
||||
<div className="bg-navy texture-dark py-16 md:py-20 px-8 md:px-12 lg:px-16 relative overflow-hidden">
|
||||
<div className="hero-diagonal-panel" />
|
||||
<ScrollReveal direction="left">
|
||||
<span className="text-orange text-xs font-bold uppercase tracking-[0.25em] block mb-4">
|
||||
Devis gratuit
|
||||
</span>
|
||||
<h2 className="text-white font-black text-2xl uppercase tracking-tight mb-6">
|
||||
{contactTitle ?? "Parlons de votre projet"}
|
||||
</h2>
|
||||
<p className="text-white/50 text-sm leading-relaxed mb-8 max-w-sm">
|
||||
Benoît se déplace gratuitement pour évaluer votre chantier et vous remettre un devis détaillé sous 24h.
|
||||
</p>
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
"Devis gratuit & déplacement offert",
|
||||
"Réponse sous 24h",
|
||||
"Sans engagement",
|
||||
].map((item) => (
|
||||
<div key={item} className="flex items-center gap-3">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-orange" />
|
||||
<span className="text-white/60 text-sm">{item}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
<div className="bg-stone-bg py-16 md:py-20 px-8 md:px-12 lg:px-16">
|
||||
<ScrollReveal direction="right">
|
||||
<ContactForm />
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user