/* ClientBase — Dossier de prospection personnalisé URL : /?invite=1&for=Lea&metier=coiffeuse&ville=Bordeaux Format : un mini-dossier sur-mesure (cover + 3 cartes-pages numérotées), coloré selon le métier, vocabulaire adapté. Sans aucun param : générateur admin avec auto-extraction depuis bio Insta. */ /* ============ Données métier ============ */ /* hue = teinte oklch principale du dossier vocab = comment on appelle leur clientèle (genré au mieux) emoji = glyph affiché en grand sur la cover prestations = exemples affichés dans la preview de page de RDV */ const METIER_PRESETS = { coiffeuse: { label: "coiffeuses", clients: 100, ticket: 40, presta: "Coupe + brushing", hue: 25, vocab: "clients", emoji: "✂️", prestations: ["Coupe + brushing", "Couleur racines", "Balayage long"] }, coiffeur: { label: "coiffeurs", clients: 100, ticket: 35, presta: "Coupe homme", hue: 25, vocab: "client·es", emoji: "✂️", prestations: ["Coupe homme", "Coupe + barbe", "Dégradé américain"] }, barbier: { label: "barbiers", clients: 120, ticket: 28, presta: "Taille de barbe", hue: 35, vocab: "client·es", emoji: "🪒", prestations: ["Taille de barbe", "Rasage traditionnel", "Coupe + barbe"] }, estheticienne: { label: "esthéticiennes", clients: 60, ticket: 55, presta: "Soin visage anti-âge", hue: 15, vocab: "clients", emoji: "✨", prestations: ["Soin visage anti-âge", "Épilation jambes", "Pose de cils"] }, ongulaire: { label: "ongulaires", clients: 70, ticket: 45, presta: "Pose gel semi-perm.", hue: 340, vocab: "clients", emoji: "💅", prestations: ["Pose gel semi-perm.", "Remplissage", "Nail art"] }, nailiste: { label: "nailistes", clients: 70, ticket: 45, presta: "Pose gel semi-perm.", hue: 340, vocab: "clients", emoji: "💅", prestations: ["Pose gel semi-perm.", "Remplissage", "Nail art"] }, maquilleuse: { label: "maquilleuses", clients: 35, ticket: 80, presta: "Maquillage mariée", hue: 5, vocab: "clients", emoji: "💄", prestations: ["Maquillage mariée", "Maquillage de soirée", "Cours d'auto-maquillage"] }, masseur: { label: "masseurs", clients: 40, ticket: 70, presta: "Massage relaxant 1 h", hue: 160, vocab: "client·es", emoji: "🌿", prestations: ["Massage relaxant 1 h", "Massage sportif", "Massage prénatal"] }, masseuse: { label: "masseuses", clients: 40, ticket: 70, presta: "Massage relaxant 1 h", hue: 160, vocab: "clients", emoji: "🌿", prestations: ["Massage relaxant 1 h", "Massage sportif", "Massage prénatal"] }, tatoueuse: { label: "tatoueuses", clients: 20, ticket: 150, presta: "Projet 2 h", hue: 280, vocab: "modèles", emoji: "🖋️", prestations: ["Projet 2 h", "Petit motif (≤ 1 h)", "Cover-up"] }, tatoueur: { label: "tatoueurs", clients: 20, ticket: 150, presta: "Projet 2 h", hue: 280, vocab: "modèles", emoji: "🖋️", prestations: ["Projet 2 h", "Petit motif (≤ 1 h)", "Cover-up"] }, sophrologue: { label: "sophrologues", clients: 50, ticket: 65, presta: "Séance 1 h", hue: 180, vocab: "patient·es", emoji: "🌬️", prestations: ["Séance individuelle 1 h", "Pack 5 séances", "Séance enfant"] }, naturopathe: { label: "naturopathes", clients: 40, ticket: 75, presta: "Bilan initial", hue: 150, vocab: "patient·es", emoji: "🌱", prestations: ["Bilan initial 1h30", "Suivi 45 min", "Programme nutritionnel"] }, osteopathe: { label: "ostéopathes", clients: 80, ticket: 60, presta: "Séance 45 min", hue: 220, vocab: "patient·es", emoji: "🦴", prestations: ["Séance 45 min", "Séance bébé", "Séance sportif"] }, kine: { label: "kinés", clients: 150, ticket: 30, presta: "Séance rééducation", hue: 220, vocab: "patient·es", emoji: "🩺", prestations: ["Séance rééducation", "Drainage lymphatique", "Séance à domicile"] }, podologue: { label: "podologues", clients: 90, ticket: 50, presta: "Soin complet", hue: 200, vocab: "patient·es", emoji: "🦶", prestations: ["Soin complet", "Semelles orthopédiques", "Suivi mensuel"] }, dieteticienne: { label: "diététiciennes", clients: 50, ticket: 60, presta: "Bilan nutritionnel", hue: 140, vocab: "patient·es", emoji: "🥗", prestations: ["Bilan nutritionnel", "Suivi mensuel", "Pack 3 mois"] }, diététicien: { label: "diététiciens", clients: 50, ticket: 60, presta: "Bilan nutritionnel", hue: 140, vocab: "patient·es", emoji: "🥗", prestations: ["Bilan nutritionnel", "Suivi mensuel", "Pack 3 mois"] }, "coach-sportif": { label: "coachs sportifs",clients: 45, ticket: 65, presta: "Séance 1 h", hue: 40, vocab: "élèves", emoji: "🏋️", prestations: ["Séance 1 h", "Pack 10 séances", "Programme sur-mesure"] }, "prof-yoga": { label: "profs de yoga", clients: 80, ticket: 20, presta: "Cours collectif", hue: 130, vocab: "élèves", emoji: "🧘", prestations: ["Cours collectif", "Cours privé 1h", "Stage week-end"] }, toiletteur: { label: "toiletteurs", clients: 60, ticket: 50, presta: "Toilettage chien", hue: 50, vocab: "client·es", emoji: "🐩", prestations: ["Toilettage chien", "Toilettage chat", "Coupe griffes"] }, couturiere: { label: "couturières", clients: 40, ticket: 45, presta: "Retouche complète", hue: 310, vocab: "client·es", emoji: "🪡", prestations: ["Retouche complète", "Création sur-mesure", "Réparation"] }, photographe: { label: "photographes", clients: 15, ticket: 220, presta: "Shooting 1 h", hue: 260, vocab: "client·es", emoji: "📷", prestations: ["Shooting portrait 1 h", "Mariage demi-journée", "Shooting famille"] }, therapeute: { label: "thérapeutes", clients: 45, ticket: 70, presta: "Séance 1 h", hue: 270, vocab: "patient·es", emoji: "🕊️", prestations: ["Séance individuelle 1 h", "Séance de couple", "Pack 5 séances"] }, }; const DEFAULT_PRESET = { label: "indépendant·e", clients: 50, ticket: 50, presta: "Prestation type", hue: 278, vocab: "client·es", emoji: "✦", prestations: ["Prestation 1", "Prestation 2", "Prestation 3"] }; /* Petit dictionnaire de villes pour l'auto-extraction depuis bio Insta */ const CITIES_HINT = ["Paris","Lyon","Marseille","Bordeaux","Toulouse","Lille","Nantes","Nice","Strasbourg","Rennes","Montpellier","Reims","Le Havre","Saint-Étienne","Toulon","Grenoble","Dijon","Angers","Nîmes","Villeurbanne","Aix-en-Provence","Brest","Le Mans","Tours","Amiens","Limoges","Annecy","Perpignan","Boulogne","Metz","Besançon","Orléans","Rouen","Caen","Mulhouse","Nancy","Argenteuil","Roubaix","Tourcoing","Nanterre","Avignon","Vitry","Créteil","Dunkerque","Poitiers","Asnières","Versailles","Colombes","Aulnay","Pau","Courbevoie","La Rochelle","Calais","Cannes","Antibes","Béziers","Ajaccio","Bourges","Cherbourg","Saint-Denis","Hyères","Chambéry"]; /* Templates de "mot perso" — 3 par métier ou génériques */ const NOTE_TEMPLATES = { default: [ "J'ai vu votre travail sur Insta, vraiment beau — j'ai pensé à vous en construisant cette page.", "Votre activité m'a marqué·e, alors j'ai préparé cette page rien que pour vous.", "Je suis tombé·e sur votre profil, j'ai trouvé ça génial — voici ce que ClientBase pourrait apporter à votre rythme.", ], coiffeuse: [ "J'ai vu vos balayages, magnifiques — j'ai pensé à vous en construisant cette page.", "Votre feed coiffure m'a tapé dans l'œil, voici une page faite pour vous.", ], ongulaire: [ "J'ai vu vos poses, elles sont incroyables — j'ai préparé cette page rien que pour vous.", "Vos nail arts m'ont impressionné·e, voici ce que ClientBase pourrait vous simplifier.", ], estheticienne: [ "J'ai parcouru votre feed, on sent le soin et la précision — j'ai pensé à vous en construisant cette page.", ], tatoueuse: [ "J'ai vu votre style, c'est très fort — j'ai préparé cette page rien que pour vous.", ], osteopathe: [ "J'ai vu votre approche, vraiment qualitative — j'ai pensé à vous pour cette page.", ], }; const _slugifyKey = (s) => (s || "").toLowerCase() .normalize("NFD").replace(/[̀-ͯ]/g, "") .replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, ""); const _getInviteParams = () => { try { const u = new URLSearchParams(window.location.search); return { forName: (u.get("for") || "").trim(), metier: (u.get("metier") || "").trim(), ville: (u.get("ville") || "").trim(), insta: (u.get("insta") || "").trim().replace(/^@/, ""), salon: (u.get("salon") || "").trim(), specialty: (u.get("specialty") || u.get("specialite") || "").trim(), note: (u.get("note") || "").trim(), signature: (u.get("signature") || u.get("presta") || "").trim(), goal: (u.get("goal") || u.get("objectif") || "").trim(), }; } catch { return { forName: "", metier: "", ville: "", insta: "", salon: "", specialty: "", note: "", signature: "", goal: "" }; } }; const _getInviteFromLocation = () => { const p = _getInviteParams(); return (p.forName || p.metier || p.ville) ? p : null; }; /* Resolve métier → preset (avec fallback sympa) */ const _resolvePreset = (metier) => { const k = _slugifyKey(metier); return METIER_PRESETS[k] || DEFAULT_PRESET; }; /* Thème unifié — couleurs du site (accent indigo ClientBase). La fonction garde sa signature pour ne pas casser les appels existants. */ const _themeFromHue = (_hue) => ({ hue: 278, ink: "var(--accent-ink)", base: "var(--accent)", soft: "var(--accent-soft)", soft2: "var(--accent-soft-2)", deep: "var(--accent-ink)", // indigo accent (au lieu d'un bleu sombre) deepGrad: "linear-gradient(135deg, var(--accent) 0%, oklch(45% 0.22 300) 100%)", paper: "var(--bg-section)", }); /* ============ Page d'entrée ============ */ const InvitePage = ({ go }) => { const params = _getInviteParams(); const preset = _resolvePreset(params.metier); const theme = _themeFromHue(preset.hue); if (!params.forName && !params.metier) { return ; } return ; }; /* ============ DOSSIER (vue prospecte) ============ */ const Dossier = ({ params, preset, theme, go }) => { const { forName, ville, salon, insta, specialty, note, signature, goal } = params; const metierLabel = preset.label; const vocab = preset.vocab; const displayName = forName || salon || "vous"; const presta = signature || preset.presta; const slug = _slugifyKey((forName || salon || "pro") + "-" + (params.metier || "")); /* Numéro pseudo-aléatoire stable basé sur le nom */ const dossierNum = String(((forName || salon || "x").length * 17 + (params.metier || "y").length * 31) % 900 + 100); /* État du diagnostic */ const [diag, setDiag] = React.useState({ clients: preset.clients, ticket: preset.ticket, tool: "", pain: "", }); return (
{/* BANDEAU SOMBRE — barre dossier */} {/* COVER — magazine cover */} {/* CORPS — 3 cartes-pages */}
{note && }
); }; /* ---- Bandeau haut de dossier (clair, comme la nav du site) ---- */ const DossierBar = ({ dossierNum, forName, theme, go }) => { const [progress, setProgress] = React.useState(0); React.useEffect(() => { const onScroll = () => { const max = document.documentElement.scrollHeight - window.innerHeight; setProgress(max > 0 ? Math.min(100, (window.scrollY / max) * 100) : 0); }; window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, []); return (
{/* Gauche — signature Noah (preuve d'humain) */}
N
Préparé par Noah
Dossier nº {dossierNum}{forName ? ` · pour ${forName}` : ""}
{/* Reading progress — subtil */}
); }; /* ---- Cover façon couverture de magazine ---- */ const DossierCover = ({ forName, salon, ville, insta, specialty, metierLabel, preset, theme }) => (
{/* glyph métier en filigrane */}
{preset.emoji}
Étude personnalisée · {metierLabel}{ville ? ` · ${ville}` : ""}

{forName || salon || "Votre"}

{salon && forName && (
{salon}
)}
{insta && ( @{insta} )} {ville && ( 📍 {ville} )} {specialty && ( {specialty} )}

{forName ? `${forName}, ce` : "Ce"} dossier a été assemblé pour vous. Il contient une étude rapide de votre activité, une estimation chiffrée de ce que ClientBase pourrait vous rapporter, des arguments concrets face à votre outil actuel, et un aperçu de votre future page de réservation.

{/* Trust badges — petits gages de confiance alignés site */}
{[ "Gratuit pendant la bêta", "Sans carte bancaire", "Annulable à tout moment", "Données hébergées en France 🇫🇷", ].map(b => ( ✓{b} ))}
); /* ---- Note manuscrite (mot de l'équipe) ---- */ const DossierNote = ({ note, theme }) => (
✦ Mot de l'équipe
« {note} »
— Noah, fondateur
); /* ---- En-tête de page de dossier (numéro + titre) ---- */ const DossierSubHeader = ({ n, label, theme }) => (
{n}
Page {n}
{label}
); /* ============ Page 01 — Activité (sliders + pills) ============ */ const DossierPage01 = ({ forName, ville, presta, vocab, theme, diag, setDiag }) => (

{forName ? `${forName}, ` : ""}ajustez deux curseurs pour qu'on parle de votre vraie réalité, pas de moyennes nationales.

setDiag({ ...diag, clients: v })} format={v => `${v} ${vocab} / mois`} theme={theme} /> setDiag({ ...diag, ticket: v })} format={v => `${v} € en moyenne`} theme={theme} /> setDiag({ ...diag, pain: v })} options={["No-show", "Temps au tél", "Facturation", "Fidéliser", "Préférences oubliées"]} theme={theme} />
); const DSlider = ({ label, value, min, max, step, onChange, format, theme }) => (
{label}
{format(value)}
onChange(+e.target.value)} style={{ width: "100%", accentColor: theme.base, cursor: "pointer", marginTop: 8 }}/>
); const DPills = ({ label, value, onChange, options, theme }) => (
{label}
{options.map(o => { const active = value === o; return ( ); })}
); /* ============ Page 02 — Potentiel ============ */ const DossierPage02 = ({ forName, vocab, theme, clients, ticket, pain, tool, goal }) => { const hoursPerYear = (clients * 3 / 60) * 12; const daysWon = hoursPerYear / 7; const retentionRev = clients * 3 * 0.12 * ticket; const noShowRev = clients * 12 * 0.05 * ticket; const toolsRepl = 12 * 50; const total = Math.round(retentionRev + noShowRev + toolsRepl); const painMessage = { "No-show": "Les rappels SMS automatiques font tomber le no-show de 7 % à 2 %.", "Temps au tél": "40 % des RDV se prennent via votre lien public — fini le téléphone pendant les prestations.", "Facturation": `Chaque RDV "fait" génère automatiquement une facture conforme française.`, "Fidéliser": `Carte de fidélité numérique — chaque ${vocab.replace("·es", "e").replace("·e", "e")} voit sa progression en temps réel.`, "Préférences oubliées": "Chaque fiche garde préférences, allergies, notes et historique complet.", }[pain]; return (
{/* Bande accent = "verdict" du dossier */}
Estimation annuelle
+ {total.toLocaleString("fr-FR")} € / an
Sur la base de {clients} {vocab}/mois à {ticket} € en moyenne :{" "} {daysWon.toFixed(1)} journées libérées et{" "} {Math.round(retentionRev + noShowRev).toLocaleString("fr-FR")} € de CA en plus (fidélisation + absences évitées).
{/* Encarts contextuels */}
{painMessage && (
✦
Pour votre « {pain} »
{painMessage}
)} {tool && tool !== "Carnet papier" && (
Vous utilisez {tool} ? ClientBase remplace l'agenda + la fidélité + la facturation en un seul outil. Économie directe estimée : ~600 €/an.
)} {goal && (
Votre objectif
{goal}. ClientBase est l'outil pour y arriver en vous libérant le temps et la tête.
)}
); }; /* ============ Page 03 — Sales arguments dynamiques (selon outil + souci) ============ */ /* Pour chaque outil, des arguments concrets contre + ce que ClientBase fait à la place */ const TOOL_ARGS = { "Carnet papier": { title: "Le carnet papier vous coûte plus que ce qu'il rapporte", intro: "C'est tactile, c'est rassurant — et c'est aussi votre plus gros frein invisible.", cons: [ { icon: "📵", title: "Aucun rappel automatique", desc: "Vos clients oublient leur RDV. C'est la première cause des no-show (~7 % en moyenne)." }, { icon: "📊", title: "Aucune stat, aucun pilotage", desc: "Combien de RDV ce mois-ci ? Quelle est votre meilleur client ? Impossible sans tout recompter." }, { icon: "📞", title: "Vous prenez les RDV vous-même", desc: "Au téléphone, pendant les prestations. Chaque appel coupe le client du moment." }, { icon: "💧", title: "Un café renversé = tout perdu", desc: "Pas de sauvegarde possible. Votre carnet est votre point de défaillance unique." }, ], pros: "Avec ClientBase, votre carnet devient un agenda intelligent qui envoie les rappels seul, calcule vos stats automatiquement, et accepte les RDV pendant que vous travaillez.", }, "Planity": { title: "Planity prend une commission sur chacune de vos clients", intro: "C'est pratique pour démarrer, mais à votre volume ça coûte cher et ça vous fragilise.", cons: [ { icon: "💸", title: "1 à 2 € de commission par RDV", desc: "Sur 100 RDV/mois, c'est 1 200 à 2 400 €/an versés à Planity. ClientBase = 0 € de commission." }, { icon: "👀", title: "Vos clients voient les concurrents", desc: "Sur Planity, juste à côté de votre profil, il y a 50 autres salons. Vous payez pour les exposer." }, { icon: "🔒", title: "Vos données ne sont pas à vous", desc: "Si vous quittez Planity, vous repartez de zéro — pas d'export propre du fichier client." }, { icon: "🧰", title: "Que de l'agenda — rien d'autre", desc: "Pas de fidélité, pas de facture, pas de stock. Vous payez encore 2 ou 3 abonnements à côté." }, ], pros: "Avec ClientBase, ZÉRO commission sur vos RDV, vous restez 100 % propriétaire de votre fichier, et vous avez l'agenda + la fidélité + la facture + le stock dans un seul outil.", }, "Agenda Google": { title: "Google Agenda n'est pas un outil de prise de RDV", intro: "C'est pratique pour vous, mais vos clients ne peuvent rien en faire.", cons: [ { icon: "🚫", title: "Vos clients ne peuvent pas réserver", desc: "Elles doivent vous appeler ou DM. C'est toujours vous qui notez, donc aucun gain de temps." }, { icon: "🗂️", title: "Pas de fiche client", desc: "Préférences, allergies, historique : tout repose sur votre mémoire ou des notes éparpillées." }, { icon: "🧾", title: "Pas de facturation", desc: "Chaque facture est tapée à la main. Erreurs, oublis, conformité fiscale incertaine." }, { icon: "🔕", title: "Pas de rappel à le client", desc: "Le rappel Google ne va qu'à vous. Vos clients oublient quand même." }, ], pros: "ClientBase fait tout ce que Google Agenda ne fait pas : page de RDV publique, fiche client complète, facture auto, rappel SMS — tout en gardant la simplicité d'un agenda.", }, "Insta + DM": { title: "Insta + DM, c'est le pire scénario à votre volume", intro: "Ça marche au début, puis ça vous mange tout votre temps et vous fait perdre des clients en silence.", cons: [ { icon: "📨", title: "30 % des DM finissent dans « Demandes »", desc: "Vous ne les voyez jamais. Ce sont des clients potentielles qui n'auront jamais de réponse." }, { icon: "🔄", title: "10 à 15 messages pour 1 seul RDV", desc: "« T'es dispo quand ? » — « Mardi 14h ? » — « Non, jeudi… » Multipliez par 100 RDV/mois." }, { icon: "🚨", title: "Vous dépendez de l'algorithme Meta", desc: "Si Insta change ses règles ou suspend votre compte, vous perdez tout votre fichier client." }, { icon: "📵", title: "Aucun rappel = no-show garantis", desc: "Un client qui prend RDV par DM 3 semaines à l'avance ne s'en souviendra pas le jour J." }, ], pros: "Avec ClientBase, 1 lien dans votre bio Insta : vos clients prennent leur RDV en 30 secondes, sans message, sans aller-retour, et vous ne touchez plus votre téléphone pendant vos prestations.", }, "Autre": { title: "Quel que soit votre outil, ClientBase remplace tout", intro: "La plupart des outils du marché font une chose. ClientBase est conçu pour faire le tour complet de votre métier.", cons: [ { icon: "💸", title: "Probablement payant chaque mois", desc: "La plupart des outils coûtent 30 à 80 €/mois. ClientBase est offert pendant toute la bêta." }, { icon: "🧩", title: "Probablement spécialisé sur une chose", desc: "Soit agenda, soit fidélité, soit facture. Jamais les trois ensemble dans la même app." }, { icon: "🏢", title: "Pensé pour les grosses structures", desc: "Les outils du marché visent les chaînes. Pas votre quotidien d'indépendant·e." }, ], pros: "ClientBase est conçu spécifiquement pour les indépendant·es de la beauté et du bien-être, par quelqu'un qui a vu de près les frustrations du quotidien.", }, }; const TOOL_OPTIONS = ["Carnet papier", "Planity", "Agenda Google", "Insta + DM", "Autre"]; const DossierPageSales = ({ forName, vocab, theme, diag, setDiag }) => { const tArg = TOOL_ARGS[diag.tool] || null; return (

{forName ? `${forName}, ` : ""}dites-nous quel outil vous utilisez aujourd'hui — on vous montre concrètement ce qui change pour vous.

setDiag({ ...diag, tool: v })} options={TOOL_OPTIONS} theme={theme} /> {!tArg && (
↑ Choisissez votre outil ci-dessus pour voir les arguments précis face à votre situation.
)} {tArg && (

{tArg.title}

{tArg.intro}

{tArg.cons.map((c, i) => (
{c.icon}
{c.title}
{c.desc}
))}
✦
Avec ClientBase
{tArg.pros}
)}
); }; /* ============ Page 04 — Démo téléphone (page de RDV client, vraie) + features pro listées honnêtement ============ */ const DossierPage04 = ({ forName, salon, ville, metierLabel, preset, theme, presta, ticket, slug, go }) => { const salonName = salon || forName || "Votre salon"; return (

Voici exactement ce que vos clients verront sur leur téléphone. Démo cliquable — prise de RDV en 3 étapes.

Lien à partager : clientbase.fr/?book={slug}

{/* Côté pro — 3 groupes thématiques (plus de respiration que la grille 8 items) */}
); }; /* ---- Côté pro : 3 groupes thématiques avec sous-features en pills ---- */ const PRO_GROUPS = [ { icon: "⏱️", title: "Votre temps libéré", tagline: "Plus de coups de fil pendant les prestations, plus de RDV oubliés.", items: [ { e: "📅", t: "Agenda intelligent" }, { e: "🔔", t: "SMS de rappel auto" }, { e: "🌍", t: "Page publique de RDV" }, ], }, { icon: "💛", title: "Vos clients choyées", tagline: "Rien n'est oublié, chacune se sent reconnue à chaque visite.", items: [ { e: "👤", t: "Fiches détaillées" }, { e: "🎁", t: "Carte de fidélité numérique" }, { e: "📸", t: "Photos avant / après" }, ], }, { icon: "📈", title: "Votre business piloté", tagline: "Vous savez où vous en êtes, sans vous prendre la tête.", items: [ { e: "🧾", t: "Factures conformes auto" }, { e: "📊", t: "Statistiques claires" }, { e: "📦", t: "Stock & matériel" }, ], }, ]; const ProSideGroups = ({ theme }) => (

Et de votre côté, dans l'espace pro

Trois piliers qui couvrent tout votre quotidien.

{PRO_GROUPS.map((g, i) => (
{g.icon}
{g.title}
{g.tagline}
{g.items.map((it, j) => ( {it.e}{it.t} ))}
))}
); /* ---- Châssis téléphone réaliste (boutons latéraux, Dynamic Island) ---- */ const PhoneFrame = ({ children, theme }) => (
{/* Boutons latéraux gauche : mute, volume + et − */}
{/* Bouton droit : power */}
{/* Écran intérieur */}
{/* Dynamic Island */}
{/* Status bar */}
9:41 📶📡🔋
{/* Container app — décalé sous l'island */}
{children}
); /* ============ Côté client — page de réservation 3 étapes ============ */ const ClientBookingScreen = ({ theme, preset, salonName, metierLabel, ville, ticket, presta, forName, salon }) => { const initials = (forName || salon || "??").slice(0, 2).toUpperCase(); const prestations = (preset.prestations || [presta]).slice(0, 3); const prices = prestations.map((_, i) => Math.round(ticket * (i === 0 ? 1 : i === 1 ? 0.7 : 1.4))); const durations = ["1 h", "45 min", "1 h 30"]; const [step, setStep] = React.useState(0); const [picked, setPicked] = React.useState(0); const [slot, setSlot] = React.useState(null); const days = React.useMemo(() => { const dn = ["dim", "lun", "mar", "mer", "jeu", "ven", "sam"]; const mn = ["janv.", "févr.", "mars", "avril", "mai", "juin", "juil.", "août", "sept.", "oct.", "nov.", "déc."]; return Array.from({ length: 5 }).map((_, i) => { const d = new Date(); d.setDate(d.getDate() + i + 1); return { dayName: dn[d.getDay()], num: d.getDate(), month: mn[d.getMonth()] }; }); }, []); const [dayIdx, setDayIdx] = React.useState(1); const slots = ["09:00", "10:30", "14:00", "15:30", "17:00"]; const reset = () => { setStep(0); setSlot(null); }; return ( <> {/* Header salon */}
{initials}
{salonName}
{metierLabel.charAt(0).toUpperCase() + metierLabel.slice(1)}{ville ? ` · ${ville}` : ""}
{step > 0 && step < 2 && ( )}
{[0, 1, 2].map(i => (
))}
{step === 0 && (
CHOISISSEZ UNE PRESTATION
{prestations.map((p, i) => { const active = picked === i; return ( ); })}
)} {step === 1 && (
CHOISISSEZ UN JOUR
{days.map((d, i) => { const active = dayIdx === i; return ( ); })}
ET UN CRÉNEAU
{slots.map((t, i) => { const active = slot === i; return ( ); })}
)} {step === 2 && (
✓
RDV confirmé !
Prestation
{prestations[picked]}
Quand
{days[dayIdx].dayName} {days[dayIdx].num} {days[dayIdx].month} · {slots[slot ?? 0]}
Prix
{prices[picked]} €
SMS de rappel envoyé 24 h avant le RDV.
)}
{step === 0 && ( )} {step === 1 && ( )} {step === 2 && ( )}
); }; /* ============ Clôture du dossier ============ */ const DossierClose = ({ forName, theme, go }) => (
✦ Dossier — fin

{forName ? `${forName}, on est prêts` : "On est prêts"}.

Compte prêt en 10 minutes. Pendant toute la bêta, le plan Business est offert — vous ne payez rien avant le lancement officiel.

PS — On accompagne au maximum 12 indépendant·es par mois pour rester dispo. Si ce dossier vous parle, mieux vaut ne pas attendre.
); const DossierFooter = ({ theme }) => ( ); /* ================================================================ */ /* ============ GÉNÉRATEUR ADMIN — saisie ultra-rapide ============ */ /* ================================================================ */ const HISTORY_KEY = "cb-invite-history-v1"; const _loadHistory = () => { try { return JSON.parse(localStorage.getItem(HISTORY_KEY) || "[]"); } catch { return []; } }; const _saveHistory = (list) => { try { localStorage.setItem(HISTORY_KEY, JSON.stringify(list.slice(0, 12))); } catch {} }; /* Auto-extraction depuis une bio Instagram collée */ const _extractFromBio = (text) => { const out = { forName: "", metier: "", ville: "", insta: "", specialty: "" }; if (!text) return out; const t = text.trim(); const handleMatch = t.match(/@([a-zA-Z0-9._]{2,30})/); if (handleMatch) out.insta = handleMatch[1]; const lower = " " + t.toLowerCase().normalize("NFD").replace(/[̀-ͯ]/g, "") + " "; for (const key of Object.keys(METIER_PRESETS)) { const needle = " " + key.replace(/-/g, " ") + " "; if (lower.includes(needle) || lower.includes(" " + key + " ")) { out.metier = key; break; } } if (!out.metier) { const fuzz = [ ["coiff", "coiffeuse"], ["barbe", "barbier"], ["esthet", "estheticienne"], ["ongle", "ongulaire"], ["nail", "nailiste"], ["mass", "masseuse"], ["maquill", "maquilleuse"], ["tatou", "tatoueuse"], ["sophro", "sophrologue"], ["naturo", "naturopathe"], ["osteo", "osteopathe"], ["kine", "kine"], ["podo", "podologue"], ["diet", "dieteticienne"], ["coach", "coach-sportif"], ["yoga", "prof-yoga"], ["toilett", "toiletteur"], ["coutur", "couturiere"], ["photo", "photographe"], ["therap", "therapeute"], ]; for (const [n, k] of fuzz) if (lower.includes(n)) { out.metier = k; break; } } for (const city of CITIES_HINT) { const re = new RegExp("\\b" + city.replace(/[-]/g, "[- ]") + "\\b", "i"); if (re.test(t)) { out.ville = city; break; } } /* prénom : première ligne courte sans @ ni emoji ni "." */ const lines = t.split(/[\n\r]+/).map(s => s.trim()).filter(Boolean); for (const line of lines) { const clean = line.replace(/[\u{1F300}-\u{1FAFF}\u{2600}-\u{27BF}]/gu, "").trim(); if (clean.length >= 2 && clean.length <= 22 && !/[@.,]/.test(clean) && /^[A-ZÀ-Ý]/.test(clean)) { const word = clean.split(/\s+/)[0]; if (word.length >= 2 && word.length <= 18) { out.forName = word; break; } } } return out; }; const InviteGenerator = ({ go }) => { const [form, setForm] = React.useState({ forName: "", metier: "", ville: "", salon: "", insta: "", specialty: "", signature: "", goal: "", note: "", }); const [bio, setBio] = React.useState(""); const [copied, setCopied] = React.useState(false); const [moreOpen, setMoreOpen] = React.useState(false); const [history, setHistory] = React.useState(_loadHistory); const linkInputRef = React.useRef(null); const preset = _resolvePreset(form.metier); const theme = _themeFromHue(preset.hue); /* URL générée */ const params = new URLSearchParams(); params.set("invite", "1"); if (form.forName) params.set("for", form.forName); if (form.metier) params.set("metier", form.metier); if (form.ville) params.set("ville", form.ville); if (form.salon) params.set("salon", form.salon); if (form.insta) params.set("insta", form.insta.replace(/^@/, "")); if (form.specialty) params.set("specialty", form.specialty); if (form.signature) params.set("signature", form.signature); if (form.goal) params.set("goal", form.goal); if (form.note) params.set("note", form.note); const url = `${window.location.origin}/?${params.toString()}`; const copy = React.useCallback(async () => { try { await navigator.clipboard.writeText(url); setCopied(true); setTimeout(() => setCopied(false), 1600); /* Ajout à l'historique si form valide */ if (form.forName || form.metier) { const entry = { id: Date.now(), form: { ...form } }; const next = [entry, ..._loadHistory().filter(h => JSON.stringify(h.form) !== JSON.stringify(form))].slice(0, 12); _saveHistory(next); setHistory(next); } } catch {} }, [url, form]); /* Cmd+Enter / Ctrl+Enter pour copier */ React.useEffect(() => { const onKey = (e) => { if ((e.metaKey || e.ctrlKey) && e.key === "Enter") { e.preventDefault(); copy(); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [copy]); const applyExtraction = () => { const ex = _extractFromBio(bio); setForm(f => ({ ...f, forName: f.forName || ex.forName, metier: f.metier || ex.metier, ville: f.ville || ex.ville, insta: f.insta || ex.insta, specialty: f.specialty || ex.specialty, })); }; /* Quand on clique sur un métier-chip : pré-remplit signature avec presta type */ const pickMetier = (key) => { const p = METIER_PRESETS[key]; setForm(f => ({ ...f, metier: key, signature: f.signature || p.presta, })); }; const loadFromHistory = (h) => setForm(h.form); const deleteFromHistory = (id) => { const next = _loadHistory().filter(h => h.id !== id); _saveHistory(next); setHistory(next); }; const noteSuggestions = NOTE_TEMPLATES[_slugifyKey(form.metier)] || NOTE_TEMPLATES.default; return (
{/* En-tête admin */}
Admin — prospection

Nouveau dossier d'invitation

{/* 1. PASTE BIO */}

Colle la bio Insta entière. On extrait automatiquement prénom, @, ville, métier.