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

fix: professional tone + real photos on demo pages

Browse Source 
- Hero: replace aggressive "Arrêtez de perdre des chantiers" with
  professional "Un site à la hauteur de votre savoir-faire"
- Macon: rewrite hero as client-facing (artisan's real site),
  add Unsplash before/after photos to MagicReveal sliders
- Paysagiste: rewrite hero "Transformez votre extérieur" instead of
  "Ne vendez pas des travaux", add real photos to gallery
- Plombier: rewrite hero "Votre plombier réactif et transparent"
  instead of "Convaincre en 3 secondes chrono"
- MagicReveal: now accepts avantImage/apresImage URLs and renders
  real photos with the interactive slider

https://claude.ai/code/session_01H2aRGDaKgarPvhay2HxN6Y
This commit is contained in:
Claude
2026-02-16 05:34:40 +00:00
parent 6b2f91601b
commit e94a03f302
7 changed files with 111 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/macon/MaconClient.tsx
View File

@@ -9,9 +9,11 @@ interface MaconClientProps {
certName?: string; certName?: string;
avantLabel?: string; avantLabel?: string;
apresLabel?: string; apresLabel?: string;
avantImage?: string;
apresImage?: string;
} }
export default function MaconClient({ type, certName, avantLabel, apresLabel }: MaconClientProps) { export default function MaconClient({ type, certName, avantLabel, apresLabel, avantImage, apresImage }: MaconClientProps) {
// Cert badge with popup // Cert badge with popup
if (!type || type === "cert") { if (!type || type === "cert") {
return <CertBadge name={certName || ""} />; return <CertBadge name={certName || ""} />;
@@ -22,8 +24,8 @@ export default function MaconClient({ type, certName, avantLabel, apresLabel }:
<MagicReveal <MagicReveal
avantLabel={avantLabel || ""} avantLabel={avantLabel || ""}
apresLabel={apresLabel || ""} apresLabel={apresLabel || ""}
avantColor="bg-red-50" avantImage={avantImage || ""}
apresColor="bg-green-50" apresImage={apresImage || ""}
height="h-64" height="h-64"
/> />
); );
@@ -97,7 +99,7 @@ function DevisForm() {
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
</svg> </svg>
</div> </div>
<h3 className="text-[#1b2a4a] font-bold text-xl mb-2">Urgence d\u00e9tect\u00e9e !</h3> <h3 className="text-[#1b2a4a] font-bold text-xl mb-2">Urgence d&eacute;tect&eacute;e !</h3>
<p className="text-gray-500 text-sm mb-6">Pour une intervention rapide, appelez directement le patron :</p> <p className="text-gray-500 text-sm mb-6">Pour une intervention rapide, appelez directement le patron :</p>
<a <a
href="tel:+33604408157" href="tel:+33604408157"
@@ -121,17 +123,17 @@ function DevisForm() {
<div className="bg-white rounded-2xl p-6 sm:p-8"> <div className="bg-white rounded-2xl p-6 sm:p-8">
<div className="flex items-center gap-2 mb-6"> <div className="flex items-center gap-2 mb-6">
<span className="bg-orange text-white text-xs font-bold px-2.5 py-1 rounded-full">2/2</span> <span className="bg-orange text-white text-xs font-bold px-2.5 py-1 rounded-full">2/2</span>
<h3 className="text-[#1b2a4a] font-bold text-lg">D\u00e9tails du projet</h3> <h3 className="text-[#1b2a4a] font-bold text-lg">D&eacute;tails du projet</h3>
</div> </div>
<p className="text-gray-400 text-sm mb-5">Type : <strong className="text-[#1b2a4a]">{projectType}</strong></p> <p className="text-gray-400 text-sm mb-5">Type : <strong className="text-[#1b2a4a]">{projectType}</strong></p>
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1.5">Surface approximative</label> <label className="block text-sm font-medium text-gray-700 mb-1.5">Surface approximative</label>
<select className="w-full px-4 py-3 bg-[#f8f6f3] border border-gray-200 rounded-xl text-gray-800 text-sm focus:border-orange focus:ring-1 focus:ring-orange outline-none"> <select className="w-full px-4 py-3 bg-[#f8f6f3] border border-gray-200 rounded-xl text-gray-800 text-sm focus:border-orange focus:ring-1 focus:ring-orange outline-none">
<option>Moins de 50m\u00b2</option> <option>Moins de 50m&sup2;</option>
<option>50 \u00e0 100m\u00b2</option> <option>50 &agrave; 100m&sup2;</option>
<option>100 \u00e0 200m\u00b2</option> <option>100 &agrave; 200m&sup2;</option>
<option>Plus de 200m\u00b2</option> <option>Plus de 200m&sup2;</option>
</select> </select>
</div> </div>
<div> <div>
@@ -139,7 +141,7 @@ function DevisForm() {
<input type="text" placeholder="Marc Dupont" className="w-full px-4 py-3 bg-[#f8f6f3] border border-gray-200 rounded-xl text-gray-800 text-sm placeholder:text-gray-400 focus:border-orange focus:ring-1 focus:ring-orange outline-none" /> <input type="text" placeholder="Marc Dupont" className="w-full px-4 py-3 bg-[#f8f6f3] border border-gray-200 rounded-xl text-gray-800 text-sm placeholder:text-gray-400 focus:border-orange focus:ring-1 focus:ring-orange outline-none" />
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1.5">T\u00e9l\u00e9phone</label> <label className="block text-sm font-medium text-gray-700 mb-1.5">T&eacute;l&eacute;phone</label>
<input type="tel" placeholder="06 12 34 56 78" className="w-full px-4 py-3 bg-[#f8f6f3] border border-gray-200 rounded-xl text-gray-800 text-sm placeholder:text-gray-400 focus:border-orange focus:ring-1 focus:ring-orange outline-none" /> <input type="tel" placeholder="06 12 34 56 78" className="w-full px-4 py-3 bg-[#f8f6f3] border border-gray-200 rounded-xl text-gray-800 text-sm placeholder:text-gray-400 focus:border-orange focus:ring-1 focus:ring-orange outline-none" />
</div> </div>
<div> <div>

28
app/macon/page.tsx
View File

@@ -64,8 +64,9 @@ export default function MaconDemo() {
<span className="text-orange">Votre site aussi.</span> <span className="text-orange">Votre site aussi.</span>
</h1> </h1>
<p className="text-white/60 text-lg max-w-2xl mx-auto mb-4"> <p className="text-white/60 text-lg max-w-2xl mx-auto mb-4">
Dans le gros \u0153uvre, le client a peur. Peur que \u00e7a s&rsquo;\u00e9croule, peur des fuites, Plus de 15 ans d&rsquo;exp&eacute;rience en ma&ccedil;onnerie, couverture et charpente.
peur que vous partiez avec l&rsquo;acompte. Ce site est une machine \u00e0 tuer les objections. Chaque chantier est r&eacute;alis&eacute; dans les r&egrave;gles de l&rsquo;art, avec des garanties solides
pour votre tranquillit&eacute;.
</p> </p>
<p className="text-white/40 text-sm mb-8"> <p className="text-white/40 text-sm mb-8">
Intervention rapide sur Douai, Orchies, Valenciennes et environs. Intervention rapide sur Douai, Orchies, Valenciennes et environs.
@@ -101,11 +102,26 @@ export default function MaconDemo() {
<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-6">
{[ {[
{ avant: "Toiture v\u00e9tuste \u2014 Tuiles cass\u00e9es, infiltrations", apres: "R\u00e9fection compl\u00e8te en tuiles m\u00e9caniques" }, {
{ avant: "Fa\u00e7ade fissur\u00e9e \u2014 Enduit d\u00e9grad\u00e9", apres: "Ravalement complet + isolation thermique" }, avant: "Toiture v\u00e9tuste \u2014 Tuiles cass\u00e9es",
{ avant: "Chemin\u00e9e en ruine \u2014 Danger effondrement", apres: "Reconstruction + \u00e9tanch\u00e9it\u00e9 garantie" }, apres: "R\u00e9fection compl\u00e8te en tuiles m\u00e9caniques",
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",
},
{
avant: "Fa\u00e7ade fissur\u00e9e \u2014 Enduit d\u00e9grad\u00e9",
apres: "Ravalement complet + isolation",
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",
},
{
avant: "Mur porteur ab\u00eem\u00e9 \u2014 Fissures",
apres: "Reconstruction + renforcement",
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",
},
].map((item, i) => ( ].map((item, i) => (
<MaconClient key={i} type="slider" avantLabel={item.avant} apresLabel={item.apres} /> <MaconClient key={i} type="slider" avantLabel={item.avant} apresLabel={item.apres} avantImage={item.avantImg} apresImage={item.apresImg} />
))} ))}
</div> </div>
</div> </div>

16
app/paysagiste/PaysagisteClient.tsx
View File

@@ -7,6 +7,7 @@ interface Realisation {
type: string; type: string;
lieu: string; lieu: string;
saison: string; saison: string;
image: string;
} }
interface PaysagisteClientProps { interface PaysagisteClientProps {
@@ -74,15 +75,14 @@ function GalerieFiltrable({ realisations }: { realisations: Realisation[] }) {
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
{filtered.map((r, i) => ( {filtered.map((r, i) => (
<div key={i} className="bg-[#f0f5ed] border border-gray-100 rounded-2xl overflow-hidden group hover:shadow-lg transition-shadow"> <div key={i} className="bg-[#f0f5ed] border border-gray-100 rounded-2xl overflow-hidden group hover:shadow-lg transition-shadow">
<div className="h-48 bg-gradient-to-br from-green-100 to-green-50 flex items-center justify-center relative overflow-hidden"> <div className="h-48 relative overflow-hidden">
<div className="text-center"> <img
<svg className="w-12 h-12 text-green-300 mx-auto mb-2 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> src={r.image}
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" /> alt={r.titre}
</svg> className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
<p className="text-gray-400 text-xs">Photo HD du projet</p> />
</div>
{/* Tag type */} {/* Tag type */}
<span className={`absolute top-3 left-3 text-[10px] font-bold px-2 py-0.5 rounded-full ${ <span className={`absolute top-3 left-3 text-[10px] font-bold px-2 py-0.5 rounded-full z-10 ${
r.type === "Entretien" ? "bg-amber-100 text-amber-700" : "bg-green-100 text-green-700" r.type === "Entretien" ? "bg-amber-100 text-amber-700" : "bg-green-100 text-green-700"
}`}> }`}>
{r.type} {r.type}

24
app/paysagiste/page.tsx
View File

@@ -10,14 +10,14 @@ export const metadata: Metadata = {
}; };
const realisations = [ const realisations = [
{ titre: "Jardin contemporain avec terrasse composite", type: "Terrasses", lieu: "Orchies", saison: "printemps" }, { 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\u00e9nagement complet piscine + cl\u00f4ture", type: "Terrasses", lieu: "Douai", saison: "printemps" }, { titre: "Am\u00e9nagement complet piscine + cl\u00f4ture", type: "Terrasses", lieu: "Douai", saison: "printemps", image: "https://images.unsplash.com/photo-1572120360610-d971b9d7767c?auto=format&fit=crop&w=600&q=80" },
{ titre: "Cr\u00e9ation massif fleuri 4 saisons", type: "Plantations", lieu: "Valenciennes", saison: "printemps" }, { titre: "Cr\u00e9ation 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" }, { 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\u00e9e carrossable en pav\u00e9s anciens", type: "All\u00e9es", lieu: "Saint-Amand", saison: "automne" }, { titre: "All\u00e9e carrossable en pav\u00e9s anciens", type: "All\u00e9es", 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" }, { 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" }, { 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\u00b2", type: "Entretien", lieu: "Douai", saison: "automne" }, { titre: "Entretien annuel parc 3000m\u00b2", type: "Entretien", lieu: "Douai", saison: "automne", image: "https://images.unsplash.com/photo-1557429287-b2e26467fc2b?auto=format&fit=crop&w=600&q=80" },
]; ];
export default function PaysagisteDemo() { export default function PaysagisteDemo() {
@@ -63,12 +63,12 @@ export default function PaysagisteDemo() {
Paysagisme &middot; Espaces Verts &middot; D\u00e9coration Paysagisme &middot; Espaces Verts &middot; D\u00e9coration
</span> </span>
<h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-gray-900 leading-tight mb-4"> <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-gray-900 leading-tight mb-4">
Ne vendez pas des travaux,{" "} Transformez votre ext&eacute;rieur en un{" "}
<span className="text-green-600">vendez du r\u00eave.</span> <span className="text-green-600">espace de vie unique.</span>
</h1> </h1>
<p className="text-gray-500 text-lg max-w-2xl mx-auto mb-4"> <p className="text-gray-500 text-lg max-w-2xl mx-auto mb-4">
Pour un jardin ou un int\u00e9rieur, votre client n&rsquo;ach\u00e8te pas de la technique, Cr&eacute;ation de jardins, terrasses et am&eacute;nagements paysagers sur-mesure.
il ach\u00e8te une &laquo;&nbsp;ambiance&nbsp;&raquo;. Ce site est votre galerie d&rsquo;art. Chaque projet est con&ccedil;u pour sublimer votre environnement et valoriser votre bien.
</p> </p>
<p className="text-gray-400 text-sm mb-8"> <p className="text-gray-400 text-sm mb-8">
Cr\u00e9ations &agrave; Douai, Orchies, Valenciennes, Saint-Amand et environs. Cr\u00e9ations &agrave; Douai, Orchies, Valenciennes, Saint-Amand et environs.

8
app/plombier/page.tsx
View File

@@ -72,12 +72,12 @@ export default function PlombierDemo() {
<span className="text-red-400 text-xs font-semibold">Disponible 7j/7 &mdash; Intervention rapide</span> <span className="text-red-400 text-xs font-semibold">Disponible 7j/7 &mdash; Intervention rapide</span>
</div> </div>
<h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-white leading-tight mb-4"> <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-white leading-tight mb-4">
Convaincre en{" "} Votre plombier{" "}
<span className="text-[#facc15]">3 secondes chrono.</span> <span className="text-[#facc15]">r&eacute;actif et transparent.</span>
</h1> </h1>
<p className="text-white/50 text-lg max-w-2xl mx-auto mb-4"> <p className="text-white/50 text-lg max-w-2xl mx-auto mb-4">
Quand un client a une fuite d&rsquo;eau ou une panne de courant, il ne veut pas lire Fuite d&rsquo;eau, panne de chauffe-eau, canalisation bouch&eacute;e ?
votre histoire. Il veut un num\u00e9ro, un prix, et une arriv\u00e9e rapide. Intervention rapide avec devis gratuit. Disponible 7j/7 dans le Douaisis.
</p> </p>
<p className="text-white/30 text-sm mb-8"> <p className="text-white/30 text-sm mb-8">
D\u00e9pannage Douai &middot; Orchies &middot; Valenciennes &middot; Denain &middot; Saint-Amand &middot; Arleux D\u00e9pannage Douai &middot; Orchies &middot; Valenciennes &middot; Denain &middot; Saint-Amand &middot; Arleux

8
components/marketing/Hero.tsx
View File

@@ -21,10 +21,10 @@ export default function Hero() {
{/* Subtitle */} {/* Subtitle */}
<p className="text-white/70 text-base sm:text-lg md:text-xl leading-relaxed mb-8 max-w-2xl"> <p className="text-white/70 text-base sm:text-lg md:text-xl leading-relaxed mb-8 max-w-2xl">
Couvreurs, Ma&ccedil;ons, Paysagistes : Arr&ecirc;tez de perdre des chantiers Un site professionnel &agrave; la hauteur de votre savoir-faire.
&agrave; cause d&rsquo;une image &laquo;&nbsp;bricol&eacute;e&nbsp;&raquo;. Depuis Flines-lez-Raches, je vous Depuis Flines-lez-Raches, je con&ccedil;ois des vitrines num&eacute;riques
construis une forteresse num&eacute;rique inviolable qui filtre les curieux performantes qui inspirent confiance et g&eacute;n&egrave;rent des demandes
et attire les vrais projets &agrave; Douai, Orchies et Valenciennes. qualifi&eacute;es &agrave; Douai, Orchies et Valenciennes.
</p> </p>
{/* CTA */} {/* CTA */}

88
components/ui/MagicReveal.tsx
View File

@@ -5,16 +5,16 @@ import { useState, useRef, useCallback } from "react";
interface MagicRevealProps { interface MagicRevealProps {
avantLabel: string; avantLabel: string;
apresLabel: string; apresLabel: string;
avantColor?: string; avantImage: string;
apresColor?: string; apresImage: string;
height?: string; height?: string;
} }
export default function MagicReveal({ export default function MagicReveal({
avantLabel, avantLabel,
apresLabel, apresLabel,
avantColor = "bg-red-50", avantImage,
apresColor = "bg-green-50", apresImage,
height = "h-64", height = "h-64",
}: MagicRevealProps) { }: MagicRevealProps) {
const [position, setPosition] = useState(50); const [position, setPosition] = useState(50);
@@ -45,47 +45,57 @@ export default function MagicReveal({
}, []); }, []);
return ( return (
<div <div className="rounded-xl overflow-hidden border border-border">
ref={containerRef}
className={`relative ${height} rounded-xl overflow-hidden cursor-col-resize select-none border border-border`}
onPointerDown={handlePointerDown}
onPointerMove={handlePointerMove}
onPointerUp={handlePointerUp}
>
{/* Apr\u00e8s (fond complet) */}
<div className={`absolute inset-0 ${apresColor} flex items-center justify-center`}>
<div className="text-center">
<p className="text-green-600 font-bold text-sm uppercase tracking-wider mb-1">Apr\u00e8s</p>
<p className="text-green-800 text-sm font-medium px-4">{apresLabel}</p>
</div>
</div>
{/* Avant (clip\u00e9 \u00e0 gauche) */}
<div <div
className={`absolute inset-0 ${avantColor} flex items-center justify-center`} ref={containerRef}
style={{ clipPath: `inset(0 ${100 - position}% 0 0)` }} className={`relative ${height} cursor-col-resize select-none`}
onPointerDown={handlePointerDown}
onPointerMove={handlePointerMove}
onPointerUp={handlePointerUp}
> >
<div className="text-center"> {/* Après (fond complet) */}
<p className="text-red-600 font-bold text-sm uppercase tracking-wider mb-1">Avant</p> <img
<p className="text-red-800 text-sm font-medium px-4">{avantLabel}</p> src={apresImage}
alt={apresLabel}
className="absolute inset-0 w-full h-full object-cover"
draggable={false}
/>
{/* Avant (clipé à gauche) */}
<div
className="absolute inset-0"
style={{ clipPath: `inset(0 ${100 - position}% 0 0)` }}
>
<img
src={avantImage}
alt={avantLabel}
className="absolute inset-0 w-full h-full object-cover"
draggable={false}
/>
</div> </div>
{/* Barre de séparation */}
<div
className="absolute top-0 bottom-0 w-1 bg-white shadow-lg z-10"
style={{ left: `${position}%`, transform: "translateX(-50%)" }}
>
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-10 h-10 bg-white rounded-full shadow-lg flex items-center justify-center border-2 border-orange">
<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="M8 9l4-4 4 4m0 6l-4 4-4-4" />
</svg>
</div>
</div>
{/* Labels gauche/droite */}
<div className="absolute top-2 left-3 bg-red-600 text-white text-[10px] font-bold px-2 py-0.5 rounded-full z-20">AVANT</div>
<div className="absolute top-2 right-3 bg-green-600 text-white text-[10px] font-bold px-2 py-0.5 rounded-full z-20">APR&Egrave;S</div>
</div> </div>
{/* Barre de s\u00e9paration */} {/* Légendes sous l'image */}
<div <div className="flex justify-between bg-white px-4 py-2 text-xs">
className="absolute top-0 bottom-0 w-1 bg-white shadow-lg z-10" <span className="text-red-600 font-semibold">{avantLabel}</span>
style={{ left: `${position}%`, transform: "translateX(-50%)" }} <span className="text-green-600 font-semibold">{apresLabel}</span>
>
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-10 h-10 bg-white rounded-full shadow-lg flex items-center justify-center border-2 border-orange">
<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="M8 9l4-4 4 4m0 6l-4 4-4-4" />
</svg>
</div>
</div> </div>
{/* Labels gauche/droite */}
<div className="absolute top-2 left-3 bg-red-600 text-white text-[10px] font-bold px-2 py-0.5 rounded-full z-20">AVANT</div>
<div className="absolute top-2 right-3 bg-green-600 text-white text-[10px] font-bold px-2 py-0.5 rounded-full z-20">APR\u00c8S</div>
</div> </div>
); );
} }