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

feat: répertorier toutes les images des démos dans l'admin

Browse Source 
- lib/site-images.ts : ajout de 21 nouvelles clés d'images couvrant
  les démos Maçon et Paysagiste (héro, sliders avant/après nommés
  "photo gauche slider N" / "photo droite slider N", cards services,
  photo équipe, galerie 8 photos, CTA) ; renommage des labels accueil
  pour les distinguer clairement
- app/macon/page.tsx : composant rendu async, images.macon_hero et
  images.macon_slider{1,2,3}_{gauche,droite} remplacent les URLs Unsplash
- app/paysagiste/page.tsx : composant rendu async, tableau realisations
  déplacé à l'intérieur pour utiliser images.*, toutes les 6 balises
  <img> hardcodées (héro, services, savoir-faire, équipe, CTA, galerie)
  remplacées par les clés images.*

https://claude.ai/code/session_01PzA98VhLMmsHpzs7gnLHGs
This commit is contained in:
Claude
2026-02-19 06:48:11 +00:00
parent 7a46501ba3
commit 51bc7e1103
3 changed files with 135 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/macon/page.tsx
View File

@@ -1,6 +1,7 @@
import type { Metadata } from "next";
import Link from "next/link";
import MaconClient from "./MaconClient";
import { getSiteImages } from "@/lib/site-images";
export const metadata: Metadata = {
title:
@@ -83,7 +84,9 @@ const faqs = [
},
];
export default function MaconPage() {
export default async function MaconPage() {
const images = await getSiteImages();
return (
<main className="min-h-screen bg-[#f8f6f3]">
{/* ============================================================
@@ -94,8 +97,7 @@ export default function MaconPage() {
<div
className="absolute inset-0 bg-cover bg-center"
style={{
backgroundImage:
"url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1920&q=80')",
backgroundImage: `url('${images.macon_hero}')`,
}}
/>
<div className="absolute inset-0 bg-gradient-to-r from-[#1b2a4a]/95 via-[#1b2a4a]/85 to-[#1b2a4a]/70" />
@@ -282,22 +284,22 @@ export default function MaconPage() {
{
avant: "Maison dans son jus",
apres: "Extension moderne 30m\u00b2 + terrasse",
avantImg: "https://images.unsplash.com/photo-1632823469850-2f77dd9c7f93?auto=format&fit=crop&w=800&q=80",
apresImg: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=800&q=80",
avantImg: images.macon_slider1_gauche,
apresImg: images.macon_slider1_droite,
legend: "Extension 30m\u00b2 \u00e0 Cysoing \u2014 R\u00e9alis\u00e9 en 4 semaines.",
},
{
avant: "Fa\u00e7ade fissur\u00e9e",
apres: "Ravalement complet",
avantImg: "https://images.unsplash.com/photo-1590274853856-f22d5ee3d228?auto=format&fit=crop&w=800&q=80",
apresImg: "https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=800&q=80",
avantImg: images.macon_slider2_gauche,
apresImg: images.macon_slider2_droite,
legend: "Rejointoiement briques \u00e0 Orchies.",
},
{
avant: "Terrain nu",
apres: "Terrasse carrel\u00e9e + muret",
avantImg: "https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=800&q=80",
apresImg: "https://images.unsplash.com/photo-1600566753190-17f0baa2a6c0?auto=format&fit=crop&w=800&q=80",
avantImg: images.macon_slider3_gauche,
apresImg: images.macon_slider3_droite,
legend: "Am\u00e9nagement ext\u00e9rieur \u00e0 Sam\u00e9on.",
},
].map((item, i) => (

44
app/paysagiste/page.tsx
View File

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
import Link from "next/link";
import Button from "@/components/ui/Button";
import PaysagisteClient from "./PaysagisteClient";
import { getSiteImages } from "@/lib/site-images";
export const metadata: Metadata = {
title: "Démo Site Paysagiste - Conception & Entretien Espaces Verts",
@@ -12,16 +13,6 @@ export const metadata: Metadata = {
},
};
const realisations = [
{ titre: "Jardin contemporain avec terrasse composite", type: "Terrasses", lieu: "Orchies", saison: "printemps", image: "https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&w=600&q=80" },
{ titre: "Aménagement complet piscine + clôture", type: "Terrasses", lieu: "Douai", saison: "printemps", image: "https://images.unsplash.com/photo-1572120360610-d971b9d7767c?auto=format&fit=crop&w=600&q=80" },
{ titre: "Création massif fleuri 4 saisons", type: "Plantations", lieu: "Valenciennes", saison: "printemps", image: "https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?auto=format&fit=crop&w=600&q=80" },
{ titre: "Haie brise-vue naturelle en bambou", type: "Plantations", lieu: "Arleux", saison: "automne", image: "https://images.unsplash.com/photo-1558171813-4c088753af8f?auto=format&fit=crop&w=600&q=80" },
{ titre: "Allée carrossable en pavés anciens", type: "Allées", lieu: "Saint-Amand", saison: "automne", image: "https://images.unsplash.com/photo-1598902108854-d1446c81e20e?auto=format&fit=crop&w=600&q=80" },
{ titre: "Jardin japonais zen avec bassin", type: "Plantations", lieu: "Flines-lez-Raches", saison: "printemps", image: "https://images.unsplash.com/photo-1582547403609-4244e80be657?auto=format&fit=crop&w=600&q=80" },
{ titre: "Taille architecturale haies buis", type: "Entretien", lieu: "Denain", saison: "automne", image: "https://images.unsplash.com/photo-1416879595882-3373a0480b5b?auto=format&fit=crop&w=600&q=80" },
{ titre: "Entretien annuel parc 3000m²", type: "Entretien", lieu: "Douai", saison: "automne", image: "https://images.unsplash.com/photo-1557429287-b2e26467fc2b?auto=format&fit=crop&w=600&q=80" },
];
const valeurs = [
{
@@ -78,7 +69,20 @@ function ValeurIcon({ type }: { type: string }) {
}
}
export default function PaysagisteDemo() {
export default async function PaysagisteDemo() {
const images = await getSiteImages();
const realisations = [
{ titre: "Jardin contemporain avec terrasse composite", type: "Terrasses", lieu: "Orchies", saison: "printemps", image: images.paysagiste_galerie_1 },
{ titre: "Aménagement complet piscine + clôture", type: "Terrasses", lieu: "Douai", saison: "printemps", image: images.paysagiste_galerie_2 },
{ titre: "Création massif fleuri 4 saisons", type: "Plantations", lieu: "Valenciennes", saison: "printemps", image: images.paysagiste_galerie_3 },
{ titre: "Haie brise-vue naturelle en bambou", type: "Plantations", lieu: "Arleux", saison: "automne", image: images.paysagiste_galerie_4 },
{ titre: "Allée carrossable en pavés anciens", type: "Allées", lieu: "Saint-Amand", saison: "automne", image: images.paysagiste_galerie_5 },
{ titre: "Jardin japonais zen avec bassin", type: "Plantations", lieu: "Flines-lez-Raches", saison: "printemps", image: images.paysagiste_galerie_6 },
{ titre: "Taille architecturale haies buis", type: "Entretien", lieu: "Denain", saison: "automne", image: images.paysagiste_galerie_7 },
{ titre: "Entretien annuel parc 3000m²", type: "Entretien", lieu: "Douai", saison: "automne", image: images.paysagiste_galerie_8 },
];
return (
<main className="min-h-screen bg-white">
{/* ===== NAV TRANSPARENTE SUR LE HERO ===== */}
@@ -115,8 +119,9 @@ export default function PaysagisteDemo() {
{/* ===== HERO PLEIN ÉCRAN AVEC PHOTO ===== */}
<section className="relative h-[85vh] min-h-[600px] flex items-center justify-center overflow-hidden">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src="https://images.unsplash.com/photo-1564429238961-bf8ad08feabb?auto=format&fit=crop&w=1920&q=80"
src={images.paysagiste_hero}
alt=""
className="absolute inset-0 w-full h-full object-cover"
/>
@@ -167,8 +172,9 @@ export default function PaysagisteDemo() {
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{/* Création */}
<div className="relative group rounded-2xl overflow-hidden h-80 md:h-96">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src="https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?auto=format&fit=crop&w=800&q=80"
src={images.paysagiste_service_creation}
alt="Création d'espaces verts"
className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
/>
@@ -199,8 +205,9 @@ export default function PaysagisteDemo() {
{/* Entretien */}
<div className="relative group rounded-2xl overflow-hidden h-80 md:h-96">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src="https://images.unsplash.com/photo-1416879595882-3373a0480b5b?auto=format&fit=crop&w=800&q=80"
src={images.paysagiste_service_entretien}
alt="Entretien d'espaces verts"
className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
/>
@@ -263,8 +270,9 @@ export default function PaysagisteDemo() {
</ul>
</div>
<div className="relative">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src="https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&w=800&q=80"
src={images.paysagiste_services_photo}
alt="Jardin contemporain réalisé"
className="rounded-2xl shadow-xl w-full h-80 md:h-[420px] object-cover"
/>
@@ -297,8 +305,9 @@ export default function PaysagisteDemo() {
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
<div className="relative order-2 md:order-1">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src="https://images.unsplash.com/photo-1558618666-fcd25c85f82e?auto=format&fit=crop&w=800&q=80"
src={images.paysagiste_equipe}
alt="Équipe de paysagistes au travail"
className="rounded-2xl shadow-xl w-full h-80 md:h-[400px] object-cover"
/>
@@ -371,8 +380,9 @@ export default function PaysagisteDemo() {
{/* ===== CTA + FORMULAIRE CONTACT ===== */}
<section id="contact" className="relative py-20 md:py-32 overflow-hidden">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src="https://images.unsplash.com/photo-1572120360610-d971b9d7767c?auto=format&fit=crop&w=1920&q=80"
src={images.paysagiste_cta}
alt=""
className="absolute inset-0 w-full h-full object-cover"
/>

105
lib/site-images.ts
View File

@@ -9,37 +9,126 @@ export interface SiteImage {
// Images par défaut (utilisées si la table n'existe pas ou si l'image n'est pas configurée)
export const DEFAULT_IMAGES: Record<string, { url: string; label: string }> = {
// ── Page d'accueil HookLab ──────────────────────────────────────────────────
hero_portrait: {
url: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=500&q=80",
label: "Photo portrait (Hero)",
label: "Accueil — Photo portrait (Hero)",
},
about_photo: {
url: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=600&q=80",
label: "Photo Enguerrand (Qui suis-je)",
label: "Accueil — Photo Enguerrand (Qui suis-je)",
},
process_google: {
url: "https://images.unsplash.com/photo-1611162617213-7d7a39e9b1d7?auto=format&fit=crop&w=600&q=80",
label: "Image Avis Google (étape 1)",
label: "Accueil — Image Avis Google (étape 1)",
},
process_facebook: {
url: "https://images.unsplash.com/photo-1611162616305-c69b3fa7fbe0?auto=format&fit=crop&w=600&q=80",
label: "Image Facebook (étape 2)",
label: "Accueil — Image Facebook (étape 2)",
},
process_site: {
url: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=600&q=80",
label: "Image Site Internet (étape 3)",
label: "Accueil — Image Site Internet (étape 3)",
},
demo_macon: {
url: "https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=600&q=80",
label: "Image démo Maçon",
label: "Accueil — Image démo Maçon",
},
demo_paysagiste: {
url: "https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?auto=format&fit=crop&w=600&q=80",
label: "Image démo Paysagiste",
label: "Accueil — Image démo Paysagiste",
},
demo_plombier: {
url: "https://images.unsplash.com/photo-1581244277943-fe4a9c777189?auto=format&fit=crop&w=600&q=80",
label: "Image démo Plombier",
label: "Accueil — Image démo Plombier",
},
// ── Démo Maçon ─────────────────────────────────────────────────────────────
macon_hero: {
url: "https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1920&q=80",
label: "Maçon — Photo fond Hero",
},
macon_slider1_gauche: {
url: "https://images.unsplash.com/photo-1632823469850-2f77dd9c7f93?auto=format&fit=crop&w=800&q=80",
label: "Maçon — Slider 1 photo gauche (avant : maison dans son jus)",
},
macon_slider1_droite: {
url: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=800&q=80",
label: "Maçon — Slider 1 photo droite (après : extension 30m²)",
},
macon_slider2_gauche: {
url: "https://images.unsplash.com/photo-1590274853856-f22d5ee3d228?auto=format&fit=crop&w=800&q=80",
label: "Maçon — Slider 2 photo gauche (avant : façade fissurée)",
},
macon_slider2_droite: {
url: "https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=800&q=80",
label: "Maçon — Slider 2 photo droite (après : ravalement complet)",
},
macon_slider3_gauche: {
url: "https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=800&q=80",
label: "Maçon — Slider 3 photo gauche (avant : terrain nu)",
},
macon_slider3_droite: {
url: "https://images.unsplash.com/photo-1600566753190-17f0baa2a6c0?auto=format&fit=crop&w=800&q=80",
label: "Maçon — Slider 3 photo droite (après : terrasse carrelée)",
},
// ── Démo Paysagiste ────────────────────────────────────────────────────────
paysagiste_hero: {
url: "https://images.unsplash.com/photo-1564429238961-bf8ad08feabb?auto=format&fit=crop&w=1920&q=80",
label: "Paysagiste — Photo fond Hero",
},
paysagiste_service_creation: {
url: "https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?auto=format&fit=crop&w=800&q=80",
label: "Paysagiste — Card service Création espaces verts",
},
paysagiste_service_entretien: {
url: "https://images.unsplash.com/photo-1416879595882-3373a0480b5b?auto=format&fit=crop&w=800&q=80",
label: "Paysagiste — Card service Entretien espaces verts",
},
paysagiste_services_photo: {
url: "https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&w=800&q=80",
label: "Paysagiste — Photo section savoir-faire",
},
paysagiste_equipe: {
url: "https://images.unsplash.com/photo-1558618666-fcd25c85f82e?auto=format&fit=crop&w=800&q=80",
label: "Paysagiste — Photo équipe (Qui sommes-nous)",
},
paysagiste_cta: {
url: "https://images.unsplash.com/photo-1572120360610-d971b9d7767c?auto=format&fit=crop&w=1920&q=80",
label: "Paysagiste — Photo fond section contact/CTA",
},
paysagiste_galerie_1: {
url: "https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&w=600&q=80",
label: "Paysagiste — Galerie photo 1 (terrasse composite)",
},
paysagiste_galerie_2: {
url: "https://images.unsplash.com/photo-1572120360610-d971b9d7767c?auto=format&fit=crop&w=600&q=80",
label: "Paysagiste — Galerie photo 2 (piscine + clôture)",
},
paysagiste_galerie_3: {
url: "https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?auto=format&fit=crop&w=600&q=80",
label: "Paysagiste — Galerie photo 3 (massif fleuri)",
},
paysagiste_galerie_4: {
url: "https://images.unsplash.com/photo-1558171813-4c088753af8f?auto=format&fit=crop&w=600&q=80",
label: "Paysagiste — Galerie photo 4 (haie bambou)",
},
paysagiste_galerie_5: {
url: "https://images.unsplash.com/photo-1598902108854-d1446c81e20e?auto=format&fit=crop&w=600&q=80",
label: "Paysagiste — Galerie photo 5 (allée pavés anciens)",
},
paysagiste_galerie_6: {
url: "https://images.unsplash.com/photo-1582547403609-4244e80be657?auto=format&fit=crop&w=600&q=80",
label: "Paysagiste — Galerie photo 6 (jardin japonais)",
},
paysagiste_galerie_7: {
url: "https://images.unsplash.com/photo-1416879595882-3373a0480b5b?auto=format&fit=crop&w=600&q=80",
label: "Paysagiste — Galerie photo 7 (taille haies buis)",
},
paysagiste_galerie_8: {
url: "https://images.unsplash.com/photo-1557429287-b2e26467fc2b?auto=format&fit=crop&w=600&q=80",
label: "Paysagiste — Galerie photo 8 (entretien parc 3000m²)",
},
};