From 6028dec0d82611c119c6f29fffde2dc498244b4f Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 27 Feb 2026 20:45:08 +0000 Subject: [PATCH] =?UTF-8?q?feat:=20site=20plus=20clair=20=E2=80=94=20photo?= =?UTF-8?q?=20hero,=20cards=20blanches,=20suppression=20emojis=20+=20budge?= =?UTF-8?q?t?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Hero : photo construction (Unsplash) avec gradient overlay, carte glassmorphisme - Services : fond blanc, numérotation 01/02/03 à la place des emojis - CTA band : photo brique + overlay rouge brique 90% - Témoignages : fond pierre clair (bg-stone-bg), cards blanches avec bordures - Partenaires : suppression emojis, labels texte seuls - Contact section : photo subtile en arrière-plan gauche - ContactForm : suppression du champ budget https://claude.ai/code/session_01Uec4iHjcPwB1pU41idWEdF --- app/page.tsx | 335 +++++++++++++++------------ components/marketing/ContactForm.tsx | 18 +- 2 files changed, 197 insertions(+), 156 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index 8140d9d..58743cd 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -33,18 +33,21 @@ function Arrow({ className = "w-4 h-4" }: { className?: string }) { ); } -/* ── Service card — dark bg editorial ── */ +/* ── Service card — light bg, numbered ── */ function ServiceCard({ service, index }: { service: Service; index: number }) { const href = service.slug === "conseil" ? "/contact" : `/${service.slug}`; return ( - -
- {service.icon} + +
+ {String(index + 1).padStart(2, "0")}
-

+

{service.title}

-

{service.shortDescription}

+

{service.shortDescription}

Découvrir @@ -55,7 +58,7 @@ function ServiceCard({ service, index }: { service: Service; index: number }) { ); } -/* ── Testimonial card ── */ +/* ── Testimonial card — light bg ── */ function TestimonialCard({ t }: { t: Testimonial }) { const serviceLabel: Record = { "construction-maison": "Construction", @@ -65,18 +68,25 @@ function TestimonialCard({ t }: { t: Testimonial }) { demolition: "Démolition", }; return ( -
-
+
+
{Array.from({ length: 5 }).map((_, i) => ( - + ))}
-

“{t.text}”

-
-

{t.name}

-

+

+ “{t.text}” +

+
+

{t.name}

+

{t.ville} — {serviceLabel[t.service] ?? t.service}

@@ -105,6 +115,12 @@ function FAQItem({ item }: { item: FAQItem }) { ); } +/* Photos Unsplash construction / maçonnerie */ +const HERO_PHOTO = + "https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1920&q=80"; +const CTA_PHOTO = + "https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=1920&q=80"; + /* ══════════════════════════════════════════════════ PAGE PRINCIPALE ══════════════════════════════════════════════════ */ @@ -126,32 +142,39 @@ export default async function HomePage() {
- {/* ══ 1 — HERO ══ */} -
- {/* Panneaux décoratifs diagonaux */} -
-
+ {/* ══ 1 — HERO PHOTO ══ */} +
+ {/* Photo de fond */} +
+
+ {/* Gradient gauche → droite pour lisibilité du texte */} +
+ {/* Gradient bas → haut pour les stats */} +
+
-
-
+
+
{/* Contenu gauche */} -
-
-
-
- - {hero.badge} - -
-

- Maçon
- &
- Constructeur -

+
+
+
+ + Maçon & Constructeur · Nord 59 +
-

+

+ Maçon
+ &{" "} + Constructeur +

+ +

{hero.subtitle}

@@ -167,7 +190,7 @@ export default async function HomePage() { href={`tel:${phoneRaw}`} className="btn btn-outline-light px-8 py-4 text-xs uppercase tracking-[0.2em]" > - + {phone} @@ -175,40 +198,44 @@ export default async function HomePage() {
{/* Stats */} -
+
{hero.stats.map((s) => (
-
- {s.val} -
-
{s.label}
+
{s.val}
+
{s.label}
))}
- {/* Panneau droit — stats éditoriales sur fond diagonal */} -
-
- {values.slice(0, 3).map((v, i) => ( -
-
- {v.icon} + {/* Carte glassmorphisme droite */} +
+
+

+ + Pourquoi OBC Maçonnerie ? +

+
+ {values.slice(0, 3).map((v) => ( +
+
+
+
+
+

{v.title}

+

{v.description}

+
-
-

{v.title}

-

{v.description}

-
-
- ))} + ))} +
- {/* ══ 2 — NOS SERVICES (dark editorial) ══ */} -
+ {/* ══ 2 — NOS SERVICES (fond blanc) ══ */} +
@@ -216,13 +243,13 @@ export default async function HomePage() { Nos savoir-faire -

+

Nos
services

Tous les services @@ -230,7 +257,7 @@ export default async function HomePage() {
-
+
{services.map((s, i) => ( @@ -240,13 +267,22 @@ export default async function HomePage() {
- {/* ══ 3 — BANDE CTA ══ */} -
+ {/* ══ 3 — BANDE CTA (photo + overlay rouge brique) ══ */} +
+
+
-
+

Devis gratuit — Réponse sous 24h @@ -299,26 +335,30 @@ export default async function HomePage() {

{realisations.map((r, i) => { - const bgColors = ["bg-navy", "bg-stone", "bg-navy-light", "bg-stone", "bg-navy", "bg-navy-light"]; + const bgColors = [ + "bg-stone-500", "bg-zinc-600", "bg-stone-600", + "bg-zinc-500", "bg-stone-700", "bg-zinc-700", + ]; return (
- {/* Fond placeholder */}
- 0{i + 1} + + {String(i + 1).padStart(2, "0")} +
- {/* Ligne orange bas (repos) */} -
+ {/* Barre orange repos */} +
{/* Infos au repos */} -
+
{r.ville}

{r.title}

- {/* Overlay hover — slide from bottom */} + {/* Overlay hover */}
{r.ville}

{r.title}

-

{r.description}

+

{r.description}

@@ -328,20 +368,20 @@ export default async function HomePage() {
- {/* ══ 5 — TÉMOIGNAGES (dark) ══ */} -
+ {/* ══ 5 — TÉMOIGNAGES (fond pierre clair) ══ */} +
Ce qu'ils en disent -

+

Clients
satisfaits

-
+
{testimonials.map((t, i) => ( @@ -352,7 +392,7 @@ export default async function HomePage() {
{/* ══ 6 — ZONE D'INTERVENTION ══ */} -
+
@@ -376,16 +416,16 @@ export default async function HomePage() {
- {zones.map((v, i) => ( + {zones.map((v) => ( - + {v} ))} - + + communes voisines
@@ -395,7 +435,7 @@ export default async function HomePage() {
{/* ══ 7 — PARTENAIRES ══ */} -
+
@@ -419,9 +459,8 @@ export default async function HomePage() {
{partners.map((p, i) => ( -
-
{p.icon}
- +
+ {p.label}
@@ -432,7 +471,7 @@ export default async function HomePage() {
{/* ══ 8 — FAQ ══ */} -
+
@@ -468,71 +507,81 @@ export default async function HomePage() { {/* ══ 9 — CONTACT SPLIT ══ */}
- {/* Gauche — dark info */} -
-
- - - Contactez-nous - -

- Parlons de
votre projet -

+ {/* Gauche — sombre avec photo en arrière-plan */} +
+
+
+
+ + + Contactez-nous + +

+ Parlons de
votre projet +

-
- -
- - - -
-
-

Téléphone

-

{phone}

-
- +
+ +
+ + + +
+
+

Téléphone

+

{phone}

+
+ -
-
- - - - +
+
+ + + + +
+
+

Siège

+

{config.address}

+
-
-

Siège

-

{config.address}

+ +
+
+ + + +
+
+

Délai de réponse

+

Sous 24h — Du lundi au samedi

+
-
-
- - - -
-
-

Délai de réponse

-

Sous 24h — Du lundi au samedi

-
+ {/* Garanties */} +
+ {[ + { val: "Gratuit", label: "Devis" }, + { val: "24h", label: "Réponse" }, + { val: "15+", label: "Ans d'expérience" }, + { val: "100%", label: "Satisfaction" }, + ].map((s) => ( +
+
{s.val}
+
{s.label}
+
+ ))}
-
- - {/* Garanties */} -
- {[ - { val: "Gratuit", label: "Devis" }, - { val: "24h", label: "Réponse" }, - { val: "10+", label: "Ans d'expérience" }, - { val: "100%", label: "Satisfaction" }, - ].map((s) => ( -
-
{s.val}
-
{s.label}
-
- ))} -
- + +
{/* Droite — formulaire */} diff --git a/components/marketing/ContactForm.tsx b/components/marketing/ContactForm.tsx index f6b4534..cf9fb88 100644 --- a/components/marketing/ContactForm.tsx +++ b/components/marketing/ContactForm.tsx @@ -18,7 +18,6 @@ export default function ContactForm() { email: "", typeProjet: "", description: "", - budget: "", zone: "", }); const [status, setStatus] = useState<"idle" | "sending" | "success" | "error">("idle"); @@ -46,7 +45,7 @@ export default function ContactForm() { }); if (res.ok) { setStatus("success"); - setForm({ nom: "", telephone: "", email: "", typeProjet: "", description: "", budget: "", zone: "" }); + setForm({ nom: "", telephone: "", email: "", typeProjet: "", description: "", zone: "" }); } else { setStatus("error"); } @@ -114,17 +113,10 @@ export default function ContactForm() { className={`${ic} resize-none`} />
-
-
- - -
-
- - -
+
+ +
{error && (