/* 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.