feat: préparation Payload CMS — couche d'abstraction contenu
Sépare données et affichage pour basculer vers Payload CMS sans réécrire les composants. Nouveaux fichiers : - lib/site-config.ts : source unique de vérité pour toutes les données du site (as const) - lib/content.ts : couche async entre données et composants (static aujourd'hui, Payload demain) - types/content.ts : types TypeScript partagés (Service, Realisation, Partner, BlogPost, etc.) - payload/ : schémas CollectionConfig et GlobalConfig commentés prêts à activer Données enrichies dans siteConfig : - partners : ajout du champ desc pour chaque partenaire - realisations : 6 entrées complètes avec categorie et color - blogPosts : 6 articles avec slug, titre, extrait, cat, date, readTime Refactorisations (composants → content layer) : - Navbar, Footer : importent siteConfig directement (client component) - app/page.tsx : async, Promise.all sur getServices/getTestimonials/getFAQ/getValues/getPartners/getRealisations - app/services/page.tsx : getServices() + getSiteConfig() - app/contact/page.tsx : getSiteConfig() pour phone, email, address, zones - app/realisations/page.tsx : getRealisations() + getSiteConfig() - app/partenaires/page.tsx : getPartners() - app/blog/page.tsx : getBlogPosts() - app/blog/[slug]/page.tsx : getBlogPost() + getBlogPosts() pour generateStaticParams - LocalSEOPage.tsx : siteConfig pour services list, phone, address - 5 pages service (construction-maison, renovation, assainissement, creation-acces, demolition) : getSiteConfig() pour phone - Pages légales et SEO locales : siteConfig importé pour données dynamiques Corrections URL : - Toutes les URLs canoniques obc-maconnerie.fr → obc-terrassement.fr (30+ fichiers) - layout.tsx : BASE_URL depuis siteConfig.url - robots.ts, sitemap.ts : BASE_URL depuis siteConfig.url - api/contact/route.ts : email fallback → obc-terrassement.fr https://claude.ai/code/session_01Uec4iHjcPwB1pU41idWEdF
This commit is contained in:
Claude
458
app/page.tsx
458
app/page.tsx
@@ -4,181 +4,53 @@ 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 {
|
||||
getSiteConfig,
|
||||
getServices,
|
||||
getTestimonials,
|
||||
getFAQ,
|
||||
getValues,
|
||||
getPartners,
|
||||
getRealisations,
|
||||
} from "@/lib/content";
|
||||
import type { Service, Testimonial, FAQItem } from "@/types/content";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "OBC Maçonnerie | Constructeur & Maçon à Orchies (Nord 59)",
|
||||
description:
|
||||
"Benoît Colin, maçon expert à Mouchin. Construction de maison, rénovation, assainissement et gros œuvre dans un rayon de 30km autour d'Orchies. Devis gratuit.",
|
||||
alternates: {
|
||||
canonical: "https://obc-maconnerie.fr",
|
||||
},
|
||||
};
|
||||
export async function generateMetadata(): Promise<Metadata> {
|
||||
const config = await getSiteConfig();
|
||||
return {
|
||||
title: config.seo.title,
|
||||
description: config.seo.description,
|
||||
alternates: { canonical: config.url },
|
||||
};
|
||||
}
|
||||
|
||||
const services = [
|
||||
{
|
||||
icon: "🏠",
|
||||
title: "Construction de maison",
|
||||
desc: "Fondations, ossature bois, gros œuvre — on bâtit votre projet de A à Z avec vous.",
|
||||
href: "/construction-maison",
|
||||
},
|
||||
{
|
||||
icon: "🔨",
|
||||
title: "Rénovation",
|
||||
desc: "Maison ou appartement, on s'adapte à votre projet et vos envies.",
|
||||
href: "/renovation",
|
||||
},
|
||||
{
|
||||
icon: "💧",
|
||||
title: "Assainissement",
|
||||
desc: "Mise aux normes et création de systèmes d'assainissement fiables.",
|
||||
href: "/assainissement",
|
||||
},
|
||||
{
|
||||
icon: "🚧",
|
||||
title: "Création d'accès",
|
||||
desc: "Voiries, entrées, chemins — on crée vos accès sur mesure.",
|
||||
href: "/creation-acces",
|
||||
},
|
||||
{
|
||||
icon: "🏗️",
|
||||
title: "Démolition",
|
||||
desc: "Démolition totale ou partielle, avec toutes les garanties de sécurité.",
|
||||
href: "/demolition",
|
||||
},
|
||||
{
|
||||
icon: "🤝",
|
||||
title: "Conseil & Accompagnement",
|
||||
desc: "Benoît vous éclaire dans vos choix : matériaux, plans, adaptations — on réfléchit ensemble.",
|
||||
href: "/contact",
|
||||
},
|
||||
];
|
||||
|
||||
const pilliers = [
|
||||
{
|
||||
icon: "📍",
|
||||
title: "Proche de vous",
|
||||
desc: "Disponible, à l'écoute, Benoît intervient dans votre secteur local et prend le temps de comprendre votre projet.",
|
||||
},
|
||||
{
|
||||
icon: "💡",
|
||||
title: "Conseil expert",
|
||||
desc: "Il guide vos choix de matériaux et adapte les plans d'architecte pour un résultat qui vous ressemble.",
|
||||
},
|
||||
{
|
||||
icon: "🛡️",
|
||||
title: "Acteur de confiance",
|
||||
desc: "Transparent à chaque étape, Benoît rassure, explique et vous tient informé de l'avancement du chantier.",
|
||||
},
|
||||
{
|
||||
icon: "❤️",
|
||||
title: "Passionné du métier",
|
||||
desc: "\"On ne fait jamais deux fois la même maison.\" Benoît aime être au cœur de chaque projet, de A à Z.",
|
||||
},
|
||||
];
|
||||
|
||||
const partenaires = [
|
||||
{ label: "Électricité", icon: "⚡" },
|
||||
{ label: "Plomberie", icon: "🔧" },
|
||||
{ label: "Charpente", icon: "🪵" },
|
||||
{ label: "Couverture", icon: "🏚️" },
|
||||
{ label: "Isolation", icon: "🧱" },
|
||||
{ label: "Menuiserie", icon: "🚪" },
|
||||
{ label: "Carrelage", icon: "🔳" },
|
||||
{ label: "Peinture", icon: "🎨" },
|
||||
];
|
||||
|
||||
const villes = [
|
||||
"Orchies",
|
||||
"Mouchin",
|
||||
"Flines-lès-Raches",
|
||||
"Château-l'Abbaye",
|
||||
"Mérignies",
|
||||
"Douai",
|
||||
"Valenciennes",
|
||||
"Saint-Amand-les-Eaux",
|
||||
];
|
||||
|
||||
const realisations = [
|
||||
{
|
||||
title: "Construction d'une maison individuelle",
|
||||
desc: "Fondations, gros œuvre et ossature — livraison clé en main à Orchies.",
|
||||
cat: "Construction neuve",
|
||||
color: "bg-navy",
|
||||
},
|
||||
{
|
||||
title: "Rénovation complète d'une maison de ville",
|
||||
desc: "Restructuration intérieure, cloisons, escalier réhabilité à Douai.",
|
||||
cat: "Rénovation",
|
||||
color: "bg-stone",
|
||||
},
|
||||
{
|
||||
title: "Création d'un accès et chemin d'entrée",
|
||||
desc: "Voirie et entrée béton imprimé, aménagement paysager à Mérignies.",
|
||||
cat: "Création d'accès",
|
||||
color: "bg-orange",
|
||||
},
|
||||
];
|
||||
|
||||
const temoignages = [
|
||||
{
|
||||
nom: "Christophe & Marie L.",
|
||||
lieu: "Orchies",
|
||||
projet: "Construction maison",
|
||||
texte:
|
||||
"Benoît nous a accompagnés de A à Z dans la construction de notre maison. Il a su adapter le plan d'architecte à nos envies tout en respectant notre budget. Disponible, professionnel, et vraiment à l'écoute. On recommande les yeux fermés.",
|
||||
note: 5,
|
||||
},
|
||||
{
|
||||
nom: "Sophie D.",
|
||||
lieu: "Douai",
|
||||
projet: "Rénovation",
|
||||
texte:
|
||||
"On lui a confié la rénovation complète de notre maison de 1970. Benoît a pris le temps de tout nous expliquer, a proposé des solutions auxquelles on n'avait pas pensé, et le résultat est magnifique. Un vrai professionnel.",
|
||||
note: 5,
|
||||
},
|
||||
{
|
||||
nom: "Famille Moreau",
|
||||
lieu: "Saint-Amand-les-Eaux",
|
||||
projet: "Assainissement",
|
||||
texte:
|
||||
"Mise aux normes de notre système d'assainissement réalisée dans les délais et en toute transparence. Benoît nous a expliqué chaque étape. Très sérieux et propre dans son travail.",
|
||||
note: 5,
|
||||
},
|
||||
];
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
q: "Dans quelle zone intervenez-vous ?",
|
||||
a: "OBC Maçonnerie intervient dans un rayon de 20 à 30 km autour de Mouchin (59310) : Orchies, Flines-lès-Raches, Château-l'Abbaye, Mérignies, Douai, Valenciennes, Saint-Amand-les-Eaux et les communes alentour.",
|
||||
},
|
||||
{
|
||||
q: "Faites-vous des devis gratuits ?",
|
||||
a: "Oui, absolument. Le devis est gratuit et sans engagement. Contactez Benoît par téléphone ou via le formulaire, il se déplace pour évaluer votre projet.",
|
||||
},
|
||||
{
|
||||
q: "Pouvez-vous adapter un plan d'architecte ?",
|
||||
a: "Oui, c'est même l'une de nos spécialités. Benoît collabore directement avec vous pour adapter les plans à vos envies, votre budget et les contraintes du terrain.",
|
||||
},
|
||||
{
|
||||
q: "Combien de temps dure une construction de maison ?",
|
||||
a: "Une construction neuve prend en moyenne 10 à 18 mois selon la complexité du projet, les conditions météo et les délais de livraison des matériaux. Benoît vous donne un calendrier dès la signature.",
|
||||
},
|
||||
{
|
||||
q: "Travaillez-vous avec d'autres artisans ?",
|
||||
a: "Oui. OBC Maçonnerie dispose d'un réseau de partenaires de confiance pour tous les corps de métier : électricité, plomberie, charpente, isolation, menuiserie, carrelage, peinture et couverture. Vous avez un seul interlocuteur pour coordonner l'ensemble.",
|
||||
},
|
||||
];
|
||||
function ServiceCard({ service }: { service: Service }) {
|
||||
const href = service.slug === "conseil" ? "/contact" : `/${service.slug}`;
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
className="group block bg-bg-white border border-border rounded-2xl p-6 hover:border-orange hover:shadow-lg transition-all duration-300 card-hover"
|
||||
>
|
||||
<div className="text-3xl mb-4">{service.icon}</div>
|
||||
<h3 className="text-navy font-bold text-lg mb-2 group-hover:text-orange transition-colors">
|
||||
{service.title}
|
||||
</h3>
|
||||
<p className="text-text-light text-sm leading-relaxed">{service.shortDescription}</p>
|
||||
<div className="mt-4 flex items-center gap-1 text-orange text-sm font-semibold">
|
||||
En savoir plus
|
||||
<svg className="w-4 h-4 group-hover:translate-x-1 transition-transform" 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>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
function StarRating({ note }: { note: number }) {
|
||||
return (
|
||||
<div className="flex gap-0.5">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<svg
|
||||
key={i}
|
||||
className={`w-4 h-4 ${i < note ? "text-orange" : "text-border"}`}
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<svg key={i} className={`w-4 h-4 ${i < note ? "text-orange" : "text-border"}`} fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||
</svg>
|
||||
))}
|
||||
@@ -186,68 +58,90 @@ function StarRating({ note }: { note: number }) {
|
||||
);
|
||||
}
|
||||
|
||||
export default function HomePage() {
|
||||
function TestimonialCard({ t }: { t: Testimonial }) {
|
||||
const serviceLabel: Record<string, string> = {
|
||||
"construction-maison": "Construction de maison",
|
||||
renovation: "Rénovation",
|
||||
assainissement: "Assainissement",
|
||||
"creation-acces": "Création d'accès",
|
||||
demolition: "Démolition",
|
||||
};
|
||||
return (
|
||||
<div className="bg-white/5 border border-white/10 rounded-2xl p-6 h-full flex flex-col">
|
||||
<StarRating note={t.rating} />
|
||||
<p className="text-white/80 text-sm leading-relaxed mt-4 flex-1 italic">“{t.text}”</p>
|
||||
<div className="mt-5 pt-4 border-t border-white/10">
|
||||
<p className="text-white font-semibold text-sm">{t.name}</p>
|
||||
<p className="text-white/40 text-xs">{t.ville} — {serviceLabel[t.service] ?? t.service}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FAQAccordion({ item }: { item: FAQItem }) {
|
||||
return (
|
||||
<details className="group bg-bg-white border border-border rounded-2xl overflow-hidden">
|
||||
<summary className="flex items-center justify-between px-6 py-4 cursor-pointer font-semibold text-navy hover:text-orange transition-colors list-none">
|
||||
{item.question}
|
||||
<svg className="w-5 h-5 text-text-muted group-open:rotate-180 transition-transform shrink-0 ml-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</summary>
|
||||
<div className="px-6 pb-5 text-text-light text-sm leading-relaxed border-t border-border-light pt-4">
|
||||
{item.answer}
|
||||
</div>
|
||||
</details>
|
||||
);
|
||||
}
|
||||
|
||||
export default async function HomePage() {
|
||||
const [config, services, testimonials, faqItems, values, partners, realisations] =
|
||||
await Promise.all([
|
||||
getSiteConfig(),
|
||||
getServices(),
|
||||
getTestimonials(),
|
||||
getFAQ(),
|
||||
getValues(),
|
||||
getPartners(),
|
||||
getRealisations(),
|
||||
]);
|
||||
|
||||
const { hero, zones, zoneDescription, partnersTitle, partnersMessage, phone, phoneRaw } = config;
|
||||
|
||||
return (
|
||||
<main id="main-content" className="min-h-screen">
|
||||
<Navbar />
|
||||
|
||||
{/* ── SECTION 1 — HERO ── */}
|
||||
<section className="relative bg-navy overflow-hidden pt-20 pb-24 md:pt-28 md:pb-32">
|
||||
{/* Background texture */}
|
||||
<div className="absolute inset-0 opacity-5">
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"repeating-linear-gradient(45deg, #fff 0, #fff 1px, transparent 0, transparent 50%)",
|
||||
backgroundSize: "20px 20px",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute inset-0 opacity-5" style={{ backgroundImage: "repeating-linear-gradient(45deg,#fff 0,#fff 1px,transparent 0,transparent 50%)", backgroundSize: "20px 20px" }} />
|
||||
<div className="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
{/* Badge */}
|
||||
<div className="inline-flex items-center gap-2 bg-white/10 border border-white/20 rounded-full px-4 py-1.5 mb-6 animate-hero-text-1">
|
||||
<div className="inline-flex items-center gap-2 bg-white/10 border border-white/20 rounded-full px-4 py-1.5 mb-6">
|
||||
<span className="w-2 h-2 bg-green-400 rounded-full animate-pulse" />
|
||||
<span className="text-white/80 text-sm">
|
||||
Disponible, à l'écoute — Benoît vous accompagne de la première pierre à la remise des clés
|
||||
</span>
|
||||
<span className="text-white/80 text-sm">{hero.badge}</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl md:text-6xl font-bold text-white leading-tight mb-6 animate-hero-text-2">
|
||||
<h1 className="text-4xl md:text-6xl font-bold text-white leading-tight mb-6">
|
||||
Maçon & Constructeur<br />
|
||||
<span className="text-orange">dans le Nord</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-white/70 text-lg md:text-xl max-w-2xl mx-auto mb-8 animate-hero-text-3">
|
||||
Construction de maison, rénovation, assainissement et gros œuvre —
|
||||
expertise autour d'Orchies, Douai et Valenciennes.
|
||||
</p>
|
||||
<p className="text-white/70 text-lg md:text-xl max-w-2xl mx-auto mb-8">{hero.subtitle}</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center animate-hero-text-3">
|
||||
<Link
|
||||
href="/contact"
|
||||
className="inline-flex items-center justify-center gap-2 bg-orange hover:bg-orange-hover text-white font-bold px-8 py-4 rounded-xl text-base transition-colors pulse-glow"
|
||||
>
|
||||
Demander un devis gratuit
|
||||
<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-8 py-4 rounded-xl text-base transition-colors pulse-glow">
|
||||
{hero.cta}
|
||||
<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>
|
||||
</Link>
|
||||
<Link
|
||||
href="/realisations"
|
||||
className="inline-flex items-center justify-center gap-2 bg-white/10 hover:bg-white/20 text-white font-semibold px-8 py-4 rounded-xl text-base transition-colors border border-white/20"
|
||||
>
|
||||
Voir nos réalisations
|
||||
<Link href="/realisations" className="inline-flex items-center justify-center gap-2 bg-white/10 hover:bg-white/20 text-white font-semibold px-8 py-4 rounded-xl text-base transition-colors border border-white/20">
|
||||
{hero.ctaSecondary}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="mt-14 grid grid-cols-3 gap-6 max-w-lg mx-auto border-t border-white/10 pt-10">
|
||||
{[
|
||||
{ val: "15+", label: "ans d'expérience" },
|
||||
{ val: "200+", label: "chantiers réalisés" },
|
||||
{ val: "30km", label: "de rayon d'action" },
|
||||
].map((s) => (
|
||||
{hero.stats.map((s) => (
|
||||
<div key={s.label} className="text-center">
|
||||
<div className="text-2xl md:text-3xl font-bold text-orange">{s.val}</div>
|
||||
<div className="text-white/50 text-xs mt-1">{s.label}</div>
|
||||
@@ -269,26 +163,10 @@ export default function HomePage() {
|
||||
</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{services.map((s, i) => (
|
||||
<ScrollReveal key={s.title} direction="up" delay={i * 80}>
|
||||
<Link
|
||||
href={s.href}
|
||||
className="group block bg-bg-white border border-border rounded-2xl p-6 hover:border-orange hover:shadow-lg transition-all duration-300 card-hover"
|
||||
>
|
||||
<div className="text-3xl mb-4">{s.icon}</div>
|
||||
<h3 className="text-navy font-bold text-lg mb-2 group-hover:text-orange transition-colors">
|
||||
{s.title}
|
||||
</h3>
|
||||
<p className="text-text-light text-sm leading-relaxed">{s.desc}</p>
|
||||
<div className="mt-4 flex items-center gap-1 text-orange text-sm font-semibold">
|
||||
En savoir plus
|
||||
<svg className="w-4 h-4 group-hover:translate-x-1 transition-transform" 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>
|
||||
</div>
|
||||
</Link>
|
||||
<ScrollReveal key={s.slug} direction="up" delay={i * 80}>
|
||||
<ServiceCard service={s} />
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
@@ -304,14 +182,13 @@ export default function HomePage() {
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-navy mt-2">Pourquoi choisir OBC Maçonnerie ?</h2>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{pilliers.map((p, i) => (
|
||||
<ScrollReveal key={p.title} direction="up" delay={i * 100}>
|
||||
{values.map((v, i) => (
|
||||
<ScrollReveal key={v.title} direction="up" delay={i * 100}>
|
||||
<div className="bg-bg-white rounded-2xl p-6 border border-border text-center h-full">
|
||||
<div className="text-4xl mb-4">{p.icon}</div>
|
||||
<h3 className="text-navy font-bold text-lg mb-3">{p.title}</h3>
|
||||
<p className="text-text-light text-sm leading-relaxed">{p.desc}</p>
|
||||
<div className="text-4xl mb-4">{v.icon}</div>
|
||||
<h3 className="text-navy font-bold text-lg mb-3">{v.title}</h3>
|
||||
<p className="text-text-light text-sm leading-relaxed">{v.description}</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
))}
|
||||
@@ -325,17 +202,12 @@ export default function HomePage() {
|
||||
<ScrollReveal direction="up">
|
||||
<div className="text-center mb-12">
|
||||
<span className="text-orange text-sm font-semibold uppercase tracking-widest">Un réseau solide</span>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-navy mt-2">
|
||||
Seul on va vite, ensemble on va plus loin.
|
||||
</h2>
|
||||
<p className="text-text-light mt-4 max-w-xl mx-auto">
|
||||
Grâce à notre réseau de partenaires de confiance, nous coordonnons l'ensemble des corps de métier pour que votre maison prenne forme de A à Z.
|
||||
</p>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-navy mt-2">{partnersTitle}</h2>
|
||||
<p className="text-text-light mt-4 max-w-xl mx-auto">{partnersMessage}</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
||||
{partenaires.map((p, i) => (
|
||||
{partners.map((p, i) => (
|
||||
<ScrollReveal key={p.label} direction="up" delay={i * 60}>
|
||||
<div className="bg-bg-white border border-border rounded-xl p-4 text-center hover:border-orange hover:shadow-md transition-all">
|
||||
<div className="text-2xl mb-2">{p.icon}</div>
|
||||
@@ -344,16 +216,12 @@ export default function HomePage() {
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<ScrollReveal direction="up" delay={200}>
|
||||
<div className="mt-10 bg-navy rounded-2xl p-6 md:p-8 text-center">
|
||||
<p className="text-white text-base md:text-lg font-medium">
|
||||
Un seul interlocuteur pour coordonner l'ensemble de votre projet — de la démolition à la remise des clés.
|
||||
</p>
|
||||
<Link
|
||||
href="/partenaires"
|
||||
className="inline-flex items-center gap-2 mt-4 text-orange-light hover:text-white font-semibold transition-colors"
|
||||
>
|
||||
<Link href="/partenaires" className="inline-flex items-center gap-2 mt-4 text-orange-light hover:text-white font-semibold transition-colors">
|
||||
Découvrir notre réseau
|
||||
<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" />
|
||||
@@ -369,33 +237,25 @@ export default function HomePage() {
|
||||
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<ScrollReveal direction="up">
|
||||
<span className="text-orange text-sm font-semibold uppercase tracking-widest">Secteur d'activité</span>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-navy mt-2 mb-4">
|
||||
Nous intervenons dans toute la région
|
||||
</h2>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-navy mt-2 mb-4">Nous intervenons dans toute la région</h2>
|
||||
<p className="text-text-light max-w-xl mx-auto mb-10">
|
||||
OBC Maçonnerie intervient dans un rayon de 20 à 30 km autour de Mouchin (Nord 59).
|
||||
OBC Maçonnerie intervient dans un rayon de {zoneDescription}.
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-3 mb-8">
|
||||
{villes.map((v, i) => (
|
||||
{zones.map((v, i) => (
|
||||
<ScrollReveal key={v} direction="up" delay={i * 50}>
|
||||
<span className="inline-flex items-center gap-1.5 bg-bg-white border border-border text-navy font-medium text-sm px-4 py-2 rounded-full hover:border-orange hover:shadow-sm transition-all">
|
||||
<span className="text-orange">📍</span>
|
||||
{v}
|
||||
<span className="text-orange">📍</span>{v}
|
||||
</span>
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<ScrollReveal direction="up" delay={100}>
|
||||
<p className="text-text-light text-sm italic">
|
||||
Et dans toutes les communes à 20-30 km autour de Mouchin — contactez-nous pour vérifier votre zone.
|
||||
Et dans toutes les communes à {zoneDescription} — contactez-nous pour vérifier votre zone.
|
||||
</p>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="inline-flex items-center gap-2 mt-6 bg-orange hover:bg-orange-hover text-white font-bold px-7 py-3.5 rounded-xl transition-colors"
|
||||
>
|
||||
<Link href="/contact" className="inline-flex items-center gap-2 mt-6 bg-orange hover:bg-orange-hover text-white font-bold px-7 py-3.5 rounded-xl transition-colors">
|
||||
Demander un devis dans ma commune
|
||||
</Link>
|
||||
</ScrollReveal>
|
||||
@@ -411,34 +271,28 @@ export default function HomePage() {
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-navy mt-2">Aperçu de nos réalisations</h2>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{realisations.map((r, i) => (
|
||||
<ScrollReveal key={r.title} direction="up" delay={i * 100}>
|
||||
<div className="bg-bg-white rounded-2xl overflow-hidden border border-border hover:shadow-lg transition-all group card-hover">
|
||||
<div className={`${r.color} h-44 flex items-center justify-center`}>
|
||||
<span className="text-white/20 text-8xl font-bold">{i + 1}</span>
|
||||
{realisations.map((r, i) => {
|
||||
const colors = ["bg-navy", "bg-stone", "bg-orange"];
|
||||
return (
|
||||
<ScrollReveal key={r.title} direction="up" delay={i * 100}>
|
||||
<div className="bg-bg-white rounded-2xl overflow-hidden border border-border hover:shadow-lg transition-all group card-hover">
|
||||
<div className={`${colors[i % colors.length]} h-44 flex items-center justify-center`}>
|
||||
<span className="text-white/20 text-8xl font-bold">{i + 1}</span>
|
||||
</div>
|
||||
<div className="p-5">
|
||||
<span className="inline-block bg-bg-muted text-text-light text-xs font-semibold px-2 py-1 rounded-full mb-2">{r.ville}</span>
|
||||
<h3 className="text-navy font-bold text-base mb-1 group-hover:text-orange transition-colors">{r.title}</h3>
|
||||
<p className="text-text-light text-sm">{r.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-5">
|
||||
<span className="inline-block bg-bg-muted text-text-light text-xs font-semibold px-2 py-1 rounded-full mb-2">
|
||||
{r.cat}
|
||||
</span>
|
||||
<h3 className="text-navy font-bold text-base mb-1 group-hover:text-orange transition-colors">
|
||||
{r.title}
|
||||
</h3>
|
||||
<p className="text-text-light text-sm">{r.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</ScrollReveal>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<ScrollReveal direction="up" delay={150}>
|
||||
<div className="text-center mt-8">
|
||||
<Link
|
||||
href="/realisations"
|
||||
className="inline-flex items-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"
|
||||
>
|
||||
<Link href="/realisations" className="inline-flex items-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">
|
||||
Voir toutes nos réalisations
|
||||
<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" />
|
||||
@@ -458,20 +312,10 @@ export default function HomePage() {
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-white mt-2">Témoignages clients</h2>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{temoignages.map((t, i) => (
|
||||
<ScrollReveal key={t.nom} direction="up" delay={i * 100}>
|
||||
<div className="bg-white/5 border border-white/10 rounded-2xl p-6 h-full flex flex-col">
|
||||
<StarRating note={t.note} />
|
||||
<p className="text-white/80 text-sm leading-relaxed mt-4 flex-1 italic">
|
||||
“{t.texte}”
|
||||
</p>
|
||||
<div className="mt-5 pt-4 border-t border-white/10">
|
||||
<p className="text-white font-semibold text-sm">{t.nom}</p>
|
||||
<p className="text-white/40 text-xs">{t.lieu} — {t.projet}</p>
|
||||
</div>
|
||||
</div>
|
||||
{testimonials.map((t, i) => (
|
||||
<ScrollReveal key={t.name} direction="up" delay={i * 100}>
|
||||
<TestimonialCard t={t} />
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
@@ -487,26 +331,10 @@ export default function HomePage() {
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-navy mt-2">FAQ</h2>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="space-y-4">
|
||||
{faqs.map((f, i) => (
|
||||
<ScrollReveal key={f.q} direction="up" delay={i * 60}>
|
||||
<details className="group bg-bg-white border border-border rounded-2xl overflow-hidden">
|
||||
<summary className="flex items-center justify-between px-6 py-4 cursor-pointer font-semibold text-navy hover:text-orange transition-colors list-none">
|
||||
{f.q}
|
||||
<svg
|
||||
className="w-5 h-5 text-text-muted group-open:rotate-180 transition-transform shrink-0 ml-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</summary>
|
||||
<div className="px-6 pb-5 text-text-light text-sm leading-relaxed border-t border-border-light pt-4">
|
||||
{f.a}
|
||||
</div>
|
||||
</details>
|
||||
{faqItems.map((f, i) => (
|
||||
<ScrollReveal key={f.question} direction="up" delay={i * 60}>
|
||||
<FAQAccordion item={f} />
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
@@ -522,9 +350,7 @@ export default function HomePage() {
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-navy mt-2">Parlez-nous de votre projet</h2>
|
||||
<p className="text-text-light mt-3">
|
||||
Réponse sous 24h — ou appelez directement Benoît au{" "}
|
||||
<a href="tel:0674453089" className="text-orange font-bold hover:underline">
|
||||
06 74 45 30 89
|
||||
</a>
|
||||
<a href={`tel:${phoneRaw}`} className="text-orange font-bold hover:underline">{phone}</a>
|
||||
</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
Reference in New Issue
Block a user