/* global React */ const { useEffect, useRef, useState } = React; // === Icons === const ArrowUpRight = ({ size = 16 }) => ; const Check = ({ size = 14 }) => ; const Spark = ({ size = 16 }) => ; const Bolt = ({ size = 18 }) => ; const Brain = ({ size = 22 }) => ; const Workflow = ({ size = 22 }) => ; const Target = ({ size = 22 }) => ; // === Logo === const Logo = () => ; // === Reveal hook === const useReveal = () => { useEffect(() => { const els = document.querySelectorAll('.reveal'); const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); }, { threshold: 0.1, rootMargin: '0px 0px -80px 0px' }); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }, []); }; // === Mouse glow on pillars === const useMouseGlow = (selector) => { useEffect(() => { const els = document.querySelectorAll(selector); const onMove = (e) => { const el = e.currentTarget; const r = el.getBoundingClientRect(); el.style.setProperty('--mx', `${e.clientX - r.left}px`); el.style.setProperty('--my', `${e.clientY - r.top}px`); }; els.forEach((el) => el.addEventListener('mousemove', onMove)); return () => els.forEach((el) => el.removeEventListener('mousemove', onMove)); }); }; // === Live ROI counter (compact stat for hero canvas) === const useTickingNumber = (start, perSecond) => { const [v, setV] = useState(start); useEffect(() => { const t0 = Date.now(); const id = setInterval(() => { setV(start + (Date.now() - t0) / 1000 * perSecond); }, 100); return () => clearInterval(id); }, [start, perSecond]); return v; }; // === Hero workflow canvas (animated nodes + lines + particles) === // Rotating event log — gives life to the canvas const useEventTicker = (events, intervalMs = 2200) => { const [idx, setIdx] = useState(0); useEffect(() => { const t = setInterval(() => setIdx((i) => (i + 1) % events.length), intervalMs); return () => clearInterval(t); }, [events.length, intervalMs]); return events[idx]; }; const HeroCanvas = () => { const ca = useTickingNumber(847234, 18); const events = [ { who: 'Léa M.', co: 'Stripe', score: 92, action: 'Email envoyé · sequence "founder"' }, { who: 'Yann B.', co: 'Doctolib', score: 87, action: 'LinkedIn · connect + DM 1' }, { who: 'Sara K.', co: 'Alan', score: 94, action: 'RDV pris · 14h jeudi' }, { who: 'Marc D.', co: 'Qonto', score: 81, action: 'Ajouté CRM · Pipedrive' }, { who: 'Inès P.', co: 'Payfit', score: 89, action: 'Email envoyé · sequence "ops"' }, { who: 'Tom L.', co: 'Spendesk', score: 96, action: 'RDV pris · 10h vendredi' }, ]; const ev = useEventTicker(events, 2400); return (
{/* Header: live badge + meta */}
Workflow en production
{/* Headline metric — the boom */}
CA généré · workflow client · 30 derniers jours
{Math.round(ca).toLocaleString('fr-FR')} €
+18 €/seconde · 24/7 · sans humain
{/* Pipeline river */}
{/* glow under */} {/* main flowing line */} {/* energy particles */}
🔍
Sales Nav
Trigger
Claude · ICP
Score 0–100
✉
Email + Linkedin
Auto · 24/7
★
RDV booked
Pipedrive
{/* Live event ticker — the proof it's running */}
Live event à l'instant
{ev.who.split(' ').map(s => s[0]).join('')}
{ev.who} @ {ev.co}
{ev.action}
{ev.score}
score IA
); }; // === Marquee === const Marquee = ({ items }) => { const all = [...items, ...items, ...items]; return (
{all.map((it, i) => {it} )}
); }; // === Brand marks (simple monogram SVGs — placeholders, recognizable shapes) === const BrandMark = ({ name }) => { const marks = { Make: , n8n: , Zapier: , Claude: , ChatGPT: , Gemini: , Emelia: , 'Sales Navigator': in, HubSpot: , Pipedrive: , Airtable: , Calendly: , Notion: , Slack: }; return {marks[name]}; }; // === Logos === const Logos = () => { const logos = [ 'Make', 'n8n', 'Zapier', 'Claude', 'ChatGPT', 'Gemini', 'Emelia', 'Sales Navigator', 'HubSpot', 'Pipedrive', 'Airtable', 'Calendly', 'Notion', 'Slack']; const all = [...logos, ...logos]; return (
L'écosystème no-code · IA · CRM

14+ outils intégrés. On branche, on automatise, on livre.

{all.map((name, i) =>
{name}
)}
); }; /* === Theme toggle (sun/moon) — visible dans la nav, accessible aux visiteurs === */ const SunIcon = ({ size = 18 }) => ; const MoonIcon = ({ size = 18 }) => ; const ThemeToggle = () => { const isLight = typeof document !== 'undefined' && document.documentElement.classList.contains('theme-light'); /* Toggle = persiste en localStorage puis reload. Fait un round-trip propre * car le state React de useTweaks (dans app.jsx) se ré-initialise depuis * localStorage au mount → tout le sub-tree (incl.
) * se reconstruit avec le bon thème. Évite la divergence entre html.theme-X * et div.theme-X qu'on aurait avec un toggle pur côté DOM. */ const toggle = () => { const next = isLight ? 'violet' : 'light'; try { const stored = JSON.parse(localStorage.getItem('bm-tweaks') || '{}'); stored.theme = next; localStorage.setItem('bm-tweaks', JSON.stringify(stored)); } catch (e) { /* private mode / disabled storage */ } window.location.reload(); }; return ( ); }; /* === FooterSocials — bloc 3 icônes (LinkedIn, Instagram, Facebook). * Utilisé dans footer-min (pages secondaires) et le footer plein de la home * via .socials. SVG inline pour éviter une dépendance externe. */ const FooterSocials = ({ className = 'footer-min-socials' }) => ( ); /* === FooterMin — footer enrichi pour toutes les pages secondaires. * Logo (retour home) · email · CTA Audit gratuit · review Google · socials · liens légaux · copyright. * Centralisé ici pour éviter 8 copies inline. */ const FooterMin = () => ( ); window.BMShared = { ArrowUpRight, Check, Spark, Bolt, Brain, Workflow, Target, Logo, useReveal, useMouseGlow, HeroCanvas, Marquee, Logos, SunIcon, MoonIcon, ThemeToggle, FooterSocials, FooterMin };