);
};
const Hero = ({ go }) => {
const [profIdx, setProfIdx] = React.useState(0);
const [pickedTool, setPickedTool] = React.useState(null);
// Compteur de clics sur le mot défilant. Après 5 clics, on révèle le
// mot caché « vous » (easter egg : le métier qu'on n'avait pas listé,
// c'est l'utilisateur lui-même). Chaque clic accélère aussi le défilement
// pendant 1.2s pour donner un feedback immédiat.
const [clickCount, setClickCount] = React.useState(0);
const [boost, setBoost] = React.useState(false);
const [showSecret, setShowSecret] = React.useState(false);
React.useEffect(() => {
if (showSecret) return; // pause le cycle pendant l'affichage du mot caché
const period = boost ? 600 : 2000;
const t = setInterval(() => setProfIdx(i => (i + 1) % PROFESSIONS.length), period);
return () => clearInterval(t);
}, [boost, showSecret]);
const onWordClick = () => {
setClickCount(c => {
const next = c + 1;
if (next >= 5) {
// Easter egg : on bascule sur le mot « vous » avec un petit glow,
// puis on relance le cycle 2.5s plus tard pour ne pas casser le hero.
setShowSecret(true);
setTimeout(() => { setShowSecret(false); setBoost(false); }, 2500);
return 0;
}
setBoost(true);
clearTimeout(window.__cbHeroBoostT);
window.__cbHeroBoostT = setTimeout(() => setBoost(false), 1200);
return next;
});
};
return (
{/* ========== COL TEXTE ========== */}
{/* Eyebrow = badge live « X utilisateurs sur ClientBase »
(compteur réel via Supabase RPC get_public_user_counts,
fallback déterministe si offline). Remplace l'ancien
« Bêta · gratuit » statique pour donner une preuve sociale
réelle dès l'arrivée sur la home. */}
Tout votre métier,
{/* Surlignage indigo (bandeau bas) — appliqué via background +
box-decoration-break:clone pour que CHAQUE ligne du texte
wrap reçoive sa propre bande, sans déborder. Couleur unie
--accent à 45 % → clairement bleu, distinct du client. */}
dans une seule app.
{/* Sous-titre, version desktop riche */}
Agenda, clients, factures, fidélité, RDV en ligne,sans jongler entre 4 outils.
Pensée pour les{" "}
{showSecret ? "vous" : PROFESSIONS[profIdx]}
.
{/* Sous-titre, version mobile courte */}
Agenda, RDV en ligne, factures et fidélité sur une seule plateforme
{/* CTA principal,signup pro direct (skip AuthChoice). Lueur
permanente indigo pour matcher visuellement le CTA client. */}
{/* CTA secondaire = "Voir la démo", plus présent : pill sage
avec halo discret, dot pulsant et flèche. Doit se distinguer
visuellement sans voler la vedette au "Créer un compte". */}
{/* Mobile : démo en pill sage visible + login en lien discret */}
✓ Sans carte bancaire•✓ Prêt en 10 minutes•✓ ZÉRO commission
{/* Bouton "Pas envie de créer un compte" retiré : doublon avec
le CTA "Voir la démo" juste au-dessus dans la rangée CTAs. */}
{/* Bande pills de confiance retirée (volonté du client : trop
de répétition avec la ligne "Sans carte · 10 min · ZÉRO commission"
juste au-dessus). Les mêmes infos restent dispos via les pages
/alternatives, le footer et la page À propos. */}
{/* ========== MOSAÏQUE,3 cartes propres et symétriques ========== */}
{/* Carte hero, Agenda du jour (full width, plus grande) */}
Aujourd'hui
5 RDV · 2 créneaux libres
{[
// Tous les 3 traits gauche en INDIGO (couleur de marque) —
// au lieu de cycler rose/sage qui étaient hors palette pro.
["09:00", "Léa M.", "Coupe + brushing", "var(--accent)"],
["10:30", "Sophie D.", "Couleur racines", "var(--accent)"],
["14:00", "Camille R.", "Balayage long", "var(--accent)"],
].map(([h, n, p, c]) => (
{h}{n}· {p}
))}
{/* Carte 2, CA + mini bar chart interactif (palette sage =
stats). Compteur animé au scroll, hover sur barres = tooltip. */}
{/* Carte 3, Lien public RDV (palette indigo, couleur de marque). */}
Lien public
clientbase.fr/?book=lea
📲 3 RDV pris cette semaine
{/* Bandeau réassurance, défile en marquee continu. Chaque pilier
a son "clin d'œil" SVG (jamais d'emoji) :
- France → drapeau tricolore dans les lettres (Fr bleu / an blanc / ce rouge)
- RGPD → cadenas (chiffré)
- 24 h → horloge
- 0 € → cadeau
Voir CbTrustBand + sub-icons dans shared.jsx (~ligne 1585). */}
{window.CbTrustBand && React.createElement(window.CbTrustBand, {
tone: "accent",
items: [
{ title: window.CbTitleFrance ? React.createElement(window.CbTitleFrance) : "France",
sub: "Conçu & hébergé en France" },
{ title: window.CbTitleWithIcon
? React.createElement(window.CbTitleWithIcon, {
icon: React.createElement(window.CbIconLock),
label: "RGPD",
color: "var(--accent)",
})
: "RGPD",
sub: "Vos données chiffrées" },
{ title: window.CbTitleWithIcon
? React.createElement(window.CbTitleWithIcon, {
icon: React.createElement(window.CbIconClock),
label: "24 h",
color: "var(--accent)",
})
: "24 h",
sub: "Support humain en français" },
{ title: window.CbTitleWithIcon
? React.createElement(window.CbTitleWithIcon, {
icon: React.createElement(window.CbIconGift),
label: "0 €",
color: "var(--accent)",
})
: "0 €",
sub: "Pendant toute la bêta" },
],
})}
{/* Flow arrow vers la suite */}
);
};
/* ================================================================
FEATURE CAROUSEL, replaces the LiveDemo phone mockup
================================================================ */
// Chaque feature a sa "tone" qui colorie l'icône + la radial dans le card.
// Les couleurs correspondent à celles de GuideSection (pages-a.jsx) pour
// que l'utilisateur retrouve les mêmes codes couleurs partout sur le site.
// Palette vitrine canonique : on cycle indigo → rose → sauge sur les 7 features
// pour donner du rythme sans dépasser les 3 couleurs de la palette.
const FEATURES = [
{ id: "agenda", icon: "calendar", name: "Agenda", tone: "accent", 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", tone: "sage", 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", tone: "rose", 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é", tone: "accent", 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", tone: "sage", desc: "CA, prestations rentables, tendances. Graphiques interactifs, sans tableur Excel." },
{ id: "factures", icon: "invoice", name: "Facturation", tone: "rose", desc: "Factures conformes aux normes françaises. SIRET, TVA, mentions légales, on s'occupe de tout." },
{ id: "stock", icon: "box", name: "Stock", tone: "accent", desc: "Alertes stock bas, ajustements rapides, vue d'ensemble de vos produits." },
];
// Mapping local,3 tones uniquement (palette vitrine canonique).
const HERO_TONE = {
accent: { bg: "var(--accent-soft)", ink: "var(--accent-ink)", solid: "var(--accent)" },
rose: { bg: "var(--rose-soft)", ink: "var(--rose-ink)", solid: "var(--rose)" },
sage: { bg: "var(--sage-soft)", ink: "var(--sage-ink)", solid: "var(--sage)" },
};
const FeatureCard = ({ f, compact }) => {
const tone = HERO_TONE[f.tone] || HERO_TONE.accent;
// Hover : légère élévation + ombre douce teintée par la tone du module.
// Géré en state local pour pouvoir colorer dynamiquement le box-shadow
// (impossible en pure CSS sans définir une classe par tone).
const [hover, setHover] = React.useState(false);
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
style={{
background: "var(--surface)",
border: "1px solid var(--line)",
borderRadius: 16,
padding: compact ? 22 : 28,
boxShadow: hover
? `0 14px 32px -18px color-mix(in oklab, var(--accent) 60%, transparent), var(--sh-2)`
: "var(--sh-2)",
// height fixe (pas min-height) → toutes les cards EXACTEMENT
// la même taille, peu importe la longueur du desc ou du mock.
// .cb-module-card en CSS gère le mobile à part.
height: compact ? 480 : 520,
position: "relative", overflow: "hidden",
width: "100%", boxSizing: "border-box",
textAlign: "center",
transform: hover ? "translateY(-3px)" : "translateY(0)",
transition: "transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease",
}}>
{/* Halo radial TOUJOURS bleu de marque (var(--accent-soft)) côté pro,
peu importe la tone du module — la teinte décorative reste sur la
couleur de l'audience, pas sur celle du module (qui peut être
rose, sage, etc.). */}
{/* Layout : header (icon + nom + desc) pinned EN HAUT, mock dans le
reste vertical avec centrage. Pour que le header soit TOUJOURS au
même endroit (haut centré) peu importe la longueur du desc, et
que le mock s'adapte au milieu de la zone restante. */}
{f.name}
{f.desc}
{/* Le mock prend tout l'espace vertical restant et se centre.
Cadré dans une « shell » bg-alt + border arrondie qui donne
une vraie impression de capture d'écran encadrée — uniforme
pour tous les modules, peu importe le contenu interne. */}
);
};
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
→
);
};
const FeatureMock = ({ id }) => {
if (id === "agenda") return ;
if (id === "clients") return ;
if (id === "bookings") return ;
if (id === "fidelite") return ;
if (id === "stats") return ;
if (id === "factures") return ;
if (id === "stock") return ;
return null;
};
/* ================================================================
SAVINGS SIMULATOR, transparent calculations, explained hypotheses
================================================================ */
// Hypotheses (sources publiques, avril 2026) :
// - 3 min gagnées par client (rappels SMS + réservation en ligne + fiche auto)
// - avgTicket ~45 € (moyenne observée chez les indépendant·es prestation/esthétique)
// - retentionBoost = +12 % de visites/an (étude NailPro 2023 sur les rappels auto)
// - no-show : 7 % en moyenne avant, réduit à 2 % avec les rappels automatiques
// (source : NoShow.fr baromètre 2024)
// - toolsReplaced = 50 €/mois (Planity Essentiel)
// - workDayHours = 7 h (journée type indé)
const SAVINGS_HYPOTHESES = {
minPerClient: 3,
avgTicket: 45,
toolsReplaced: 50,
retentionBoost: 0.12,
avgVisitsPerClient: 3,
noShowBefore: 0.07,
noShowAfter: 0.02,
workDayHours: 7,
};
const _fmtEUR = (n) => `${Math.round(n).toLocaleString("fr-FR")} €`;
const SavingsSimulator = () => {
const [clients, setClients] = React.useState(60);
const [ticket, setTicket] = React.useState(45);
const [showDetails, setShowDetails] = React.useState(false);
const h = SAVINGS_HYPOTHESES;
const hoursPerMonth = (clients * h.minPerClient) / 60;
const hoursPerYear = hoursPerMonth * 12;
const daysPerYear = hoursPerYear / h.workDayHours;
const toolSavedYear = h.toolsReplaced * 12;
const extraVisitsYear = clients * h.avgVisitsPerClient * h.retentionBoost;
const retentionRevYear= extraVisitsYear * ticket;
const noShowAvoidedYr = clients * 12 * (h.noShowBefore - h.noShowAfter);
const noShowRevenue = noShowAvoidedYr * ticket;
// Bonus : RDV pris tout seuls via le lien public (≈ 40 % des RDV, étude Planity 2024)
const onlineShare = 0.40;
const onlineBookings = Math.round(clients * 12 * onlineShare);
// Bonus : appels téléphoniques évités (≈ 60 % des prises de RDV passaient par téléphone)
const callsAvoided = Math.round(clients * 12 * 0.6);
const totalGainYear = toolSavedYear + retentionRevYear + noShowRevenue;
return (
Combien pouvez-vous générer avec ClientBase ?
Bougez les curseurs, les chiffres s'ajustent en direct sur vos vrais volumes.
{/* Sliders block */}
{/* HERO « Gain estimé » — fond enrichi :
- Gradient principal indigo profond → violet brand
- 2 halos radiaux blancs translucides (un large + un compact)
qui se croisent en haut-droite pour donner de la profondeur
- Un motif SVG dot-grid subtil en fond (texture sans peser)
- Une bande de lumière diagonale qui glisse lentement en arrière
- Un bord intérieur lumineux (inset ring) qui « décolle » la
carte du reste de la page
Couches additives, peu coûteuses, donnent une vraie sensation
« écran premium » sans alourdir le rendu. */}
{/* Motif dot-grid subtil en fond (8px de répétition) */}
{/* Lueur orbiculaire animée en bas-gauche */}
{/* Bande de lumière diagonale qui balaie lentement le fond */}
{/* Étincelles ✦ flottantes pour le côté « gain magique » */}
✦
✦
Gain estimé
+ €
/ an
Soit environ {_fmtEUR(totalGainYear / 12)} de plus chaque mois dans votre poche,
sans travailler une minute de plus.
{/* Breakdown cards,2x2 (mobile) / 1x4 (desktop), toutes dynamiques */}
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.