{/* Carte 3 — Lien public RDV (gradient indigo) */}
Lien public
clientbase.fr/?book=lea
📲 3 RDV pris cette semaine
{/* Flow arrow vers la suite */}
);
};
/* ================================================================
FEATURE CAROUSEL — replaces the LiveDemo phone mockup
================================================================ */
const FEATURES = [
{ id: "agenda", icon: "calendar", name: "Agenda", desc: "Un agenda clair et interactif. Cliquez sur une case vide pour ajouter un RDV, marquez-le fait en un clic." },
{ id: "bookings", icon: "link", name: "Prise de RDV", desc: "Votre lien public à partager. Vos clients choisissent leur créneau elles-mêmes, pauses déjeuner et vacances respectées." },
{ id: "clients", icon: "users", name: "Clientes", desc: "Toutes leurs infos, préférences et historique au même endroit. Contact direct par mail ou téléphone en un clic." },
{ id: "fidelite", icon: "gift", name: "Fidélité", desc: "Une carte numérique par client. Partagez un lien, elle suit sa progression en temps réel — vos règles à vous." },
{ id: "stats", icon: "chart", name: "Statistiques", desc: "CA, prestations rentables, tendances. Graphiques interactifs, sans tableur Excel." },
{ id: "factures", icon: "invoice", name: "Facturation", desc: "Factures conformes aux normes françaises. SIRET, TVA, mentions légales — on s'occupe de tout." },
{ id: "stock", icon: "box", name: "Stock", desc: "Alertes stock bas, ajustements rapides, vue d'ensemble de vos produits." },
];
const FeatureCard = ({ f, compact }) => (
{f.name}
{f.desc}
);
const FeatureCarousel = () => {
const isMobile = useIsMobile(720);
const [idx, setIdx] = React.useState(0);
const [auto, setAuto] = React.useState(true);
const scrollRef = React.useRef(null);
const programmaticRef = React.useRef(false);
// Auto-advance only on desktop — never on mobile (avoids conflicts with user swipe)
React.useEffect(() => {
if (!auto || isMobile) return;
const t = setInterval(() => setIdx(i => (i + 1) % FEATURES.length), 4500);
return () => clearInterval(t);
}, [auto, isMobile]);
// Desktop pill/dot click: just update idx. Mobile dot click: also programmatically scroll.
const pick = (i) => {
setIdx(i);
setAuto(false);
if (isMobile && scrollRef.current) {
const el = scrollRef.current;
const card = el.children[i];
if (card) {
programmaticRef.current = true;
// Centre la carte dans le scrollport (compense gap + padding)
const target = card.offsetLeft - (el.clientWidth - card.clientWidth) / 2;
el.scrollTo({ left: Math.max(0, target), behavior: "smooth" });
setTimeout(() => { programmaticRef.current = false; }, 600);
}
}
};
// Mobile swipe handler — détermine l'index par la carte la plus proche du centre
const handleScroll = () => {
if (programmaticRef.current) return;
if (!scrollRef.current) return;
const el = scrollRef.current;
const center = el.scrollLeft + el.clientWidth / 2;
let nearest = 0, best = Infinity;
for (let i = 0; i < el.children.length; i++) {
const c = el.children[i];
const cCenter = c.offsetLeft + c.clientWidth / 2;
const d = Math.abs(cCenter - center);
if (d < best) { best = d; nearest = i; }
}
if (nearest !== idx && nearest < FEATURES.length) setIdx(nearest);
};
const current = FEATURES[idx];
if (isMobile) {
return (
{/* Small helper — just an invitation, no scrollbar */}
←
glissez pour explorer les {FEATURES.length} modules
→
j}
label="de journées libérées / an"
sub={`≈ ${Math.round(hoursPerYear)} h économisées`}
tone="violet"
/>
+ €}
label="de CA en plus (fidélité)"
sub={`+${Math.round(extraVisitsYear)} visites / an`}
tone="pink"
/>
€}
label="d'absences évitées"
sub={`${Math.round(noShowAvoidedYr)} no-show en moins / an`}
tone="sage"
/>
}
label="RDV pris en ligne / an"
sub={`${callsAvoided} appels évités`}
tone="accent"
/>
{/* Method toggle */}
⏱ Temps gagné — {h.minPerClient} min par client grâce aux rappels SMS auto,
à la réservation en ligne et aux fiches mises à jour automatiquement.
Sur {clients} clients/mois → {hoursPerYear.toFixed(0)} h / an, soit {daysPerYear.toFixed(1)} journées de {h.workDayHours} h rendues à votre vie perso.
♥ Fidélité — les rappels auto + la carte numérique génèrent +{Math.round(h.retentionBoost * 100)} % de visites en plus :
{` `}{Math.round(extraVisitsYear)} visites × {ticket} € = {_fmtEUR(retentionRevYear)}.
Source : Impact of Automated Reminders on Client Retention (NailPro, 2023).
🛡 Absences évitées — le no-show moyen passe de {Math.round(h.noShowBefore * 100)} % à {Math.round(h.noShowAfter * 100)} % avec les rappels SMS.
Soit {Math.round(noShowAvoidedYr)} RDV sauvés × {ticket} € = {_fmtEUR(noShowRevenue)} par an.
Source : Baromètre du no-show (NoShow.fr, 2024).
🔗 RDV pris en ligne — ≈ 40 % des réservations se font directement via votre lien public
(étude Planity 2024). Sur {clients} clients/mois × 12 → {onlineBookings} RDV pris tout seuls / an —
et autant d'appels que vous ne prenez plus pendant vos prestations.
€ Outils remplacés — un seul abonnement à la place de Planity (~{h.toolsReplaced} €/mois) = {toolSavedYear} € / an inclus dans le total.
Estimations. Votre situation varie selon votre métier et votre clientèle — écrivez-nous pour une estimation sur mesure.