// Home page (hi-fi) — charte ATELIER PERF // Structure V5 : // Hero "On pose les bottes" → Stats yellow → Marquee → Trois mondes // → 7 cartes à jouer → Section Domaine 7 → Témoignage → CTA // ============================================ // DATA — 7 cartes d'intervention // ============================================ const SERVICES = [ { id: 'performance', num: '01', title: 'Performance', blurb: 'KPI terrain, management visuel, amélioration de la cadence et du rendement.', chips: ['Lean', 'KPI', 'QVCT', 'Cadence'], suit: '♦', suitColor: 'var(--electric-2)', impact: 4, duree: '3 mois', family: 'action' }, { id: 'continu', num: '02', title: 'Amélioration\u00a0continue', blurb: 'Routines 5S, ateliers Kaizen, résolution de problèmes en QRQC.', chips: ['5S', 'Kaizen', 'QVCT', 'Swimlane'], suit: '♠', suitColor: 'var(--deep)', impact: 3, duree: '4 mois', family: 'methode' }, { id: 'amenagement', num: '03', title: 'Aménagement', blurb: "Plan d'implantation, flux matière, ergonomie postes.", chips: ["Plan d'implantation", 'Flux', 'Ergonomie'], suit: '♣', suitColor: 'var(--deep)', impact: 4, duree: '6 sem', family: 'methode' }, { id: 'equipement', num: '04', title: 'Équipement', blurb: 'Choix machine, intégration, TPM, maintenance.', chips: ['TPM', 'Maintenance'], suit: '♥', suitColor: 'var(--electric-2)', impact: 3, duree: '8 sem', family: 'action' }, { id: 'competences', num: '05', title: 'Compétences', blurb: 'Formation, mentoring terrain, transmission. Accompagnement des techniciens de maintenance dans la méthodologie de recherche de pannes.', chips: ['Formation', 'TWI', 'Coaching', 'Recherche de pannes'], suit: '★', suitColor: 'var(--deep)', impact: 4, duree: '2 mois', family: 'humain' }, { id: 'diagnostic', num: '06', title: 'Diagnostic', blurb: 'Cartographie process, diagnostic organisation et flux.', chips: ['VSM', 'Swimlane', 'Flux'], suit: '✦', suitColor: 'var(--deep)', impact: 2, duree: '4 sem', family: 'humain' }, { id: 'outils', num: '07', title: 'Automatisation & Outils', blurb: "Vous ressaisissez les mêmes données partout ? On supprime les doubles saisies — bons de livraison, planification, facturation, banque d'heures — avec les bons outils, bien connectés.", chips: ['Cadulis', 'Kizeo', 'EBP', 'Skello', 'Automatisation'], suit: '✺', suitColor: 'var(--electric)', impact: 5, duree: '12 sem', family: 'new', isNew: true }]; const STATS = [ { value: '−32%', start: 10, label: 'gaspillage' }, { value: '+24%', start: 5, label: 'productivité' }, { value: '−40%', start: 10, label: 'déplacements' }, { value: '+18%', start: 5, label: 'TRS machine' }]; const PROFILES = [ { id: 'dirigeants', title: 'Dirigeants de PME', sub: 'industrielles, services, sous-traitance', desc: 'Vous voulez voir des résultats chiffrés sans devenir spécialiste lean.' }, { id: 'artisans', title: 'Artisans, commerçants,', sub: 'agriculteurs', desc: 'Vous voulez passer un cap sans dénaturer ce qui vous rend bon.' }, { id: 'responsables', title: 'Responsables terrain', sub: 'prod, maintenance, qualité, admin', desc: 'Vous voulez des méthodes que vos équipes vont vraiment utiliser.' }]; const MARQUEE_ITEMS = ['LEAN', 'KAIZEN', '5S', 'TPM', 'VSM', 'SMED', 'POKA-YOKE', 'GEMBA WALK', 'KANBAN', 'QVCT', 'PDCA', 'OEE', 'SWIMLANE', 'TWI', 'ROBOTIQUE']; const MARQUEE_ITEMS2 = ['ORDONNANCEMENT', 'PLANIFICATION', 'FACTURATION AUTO', 'ZÉRO DOUBLE SAISIE', 'SKELLO', 'KIZEO', 'EBP', 'CADULIS', 'DOUBLES SAISIES', 'AUTOMATISATION', 'BONS DE LIVRAISON', 'BANQUE D\'HEURES']; // ============================================ // HERO ROTATION DATA // ============================================ const HERO_PLACES = [ "l'atelier", "la boutique", "l'entrepôt", "l'exploitation", "le garage", "l'agence", "le bureau"]; const HERO_CIBLES = ['Industriels', 'Artisans', 'Commerçants', 'Agriculteurs', 'Services']; const MISSION_SECTEURS = ['Usineur', 'Agriculture', 'Plasturgie', 'Dépanneur itinérant', 'Industrie', 'Robotique']; function useRotator(items, intervalMs = 2400, enabled = true) { const [idx, setIdx] = useState(0); useEffect(() => { if (!enabled) return; const i = setInterval(() => setIdx((x) => (x + 1) % items.length), intervalMs); return () => clearInterval(i); }, [items.length, intervalMs, enabled]); return [idx, setIdx]; } // ============================================ // PAGE // ============================================ function HomePage({ navigate, openModal, tweaks }) { return (
); } // ============================================ // HERO — "On pose les bottes, pas dans un PowerPoint." // ============================================ function HomeHero({ navigate, tweaks }) { const variant = tweaks && tweaks.heroVariant || 'option4'; const [t, setT] = useState(0); useEffect(() => { let raf; const start = performance.now(); const tick = () => {setT((performance.now() - start) / 1000);raf = requestAnimationFrame(tick);}; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); // Rotation des lieux + secteurs const speed = tweaks && tweaks.rotationSpeed || 2600; const [placeIdx] = useRotator(HERO_PLACES, speed); const [secteurIdx] = useRotator(MISSION_SECTEURS, Math.max(1200, speed - 800)); const currentPlace = HERO_PLACES[placeIdx]; const currentSecteur = MISSION_SECTEURS[secteurIdx]; return (
{/* Right-side orbital visual with logo at center */}
{/* Big ring */}
{/* Smaller ring */}
{/* Tiny ring */}
{/* Logo at center */} Atelier Perf
{/* CSS orbit chips — secteurs cibles (visible jusqu'à 600px, indépendant de hero-orbit) */}
{/* Conteneur centré qui tourne — toutes les chips avec lui */}
{HERO_CIBLES.map((label, i) => { const angleDeg = (i / HERO_CIBLES.length) * 360 - 90; const rad = angleDeg * Math.PI / 180; const r = 213; // grand anneau : inset 8% → rayon ≈ 42% de 520px const x = Math.round(r * Math.cos(rad)); const y = Math.round(r * Math.sin(rad)); return ( {label} ); })}
ATELIER · PERF — PERFORMANCE TERRAIN

On met les pieds
dans{'\u00a0'} {/* Ghost reserves max width */} {currentPlace}
Pas dans un PowerPoint

{/* Géo — sous-titre ancrage terrain */}
Vendée · Grand Ouest · Partout où ça coince
{/* Differentiator tagline — la promesse opérationnelle */}
Mise en place opérationnelle · on installe, on forme, on accompagne

Atelier Perf, c’est un facilitateur technique qui passe ses journées au pied des machines, à côté des opérateurs, du personnel administratif et de vos intervenants terrain, ou dans un champ, le carnet à la main. Sept expertises d’intervention. Vous sélectionnez celles qui vous parlent.

{/* Missions en cours */}
4 missions en cours · Pays de la Loire {currentSecteur}
); } // ============================================ // MANIFESTO — "On déploie, pas on conseille." // ============================================ function HomeManifesto() { const steps = [ { num: '01', title: "Identifier l'opportunité", desc: 'On échange avec vous, on cadre le besoin et les enjeux — sans engagement.' }, { num: '02', title: 'Observer, mesurer', desc: 'Sur site, on observe les flux, on mesure, on cartographie la chaîne de valeur.' }, { num: '03', title: 'Recommander des solutions', desc: "On propose un plan d'action priorité · chiffré · applicable. Pas un PDF qui finit au tiroir.", baseline: true }, { num: '04', title: "Chantiers d'optimisation\u00a0& innovation", desc: 'On déploie sur le terrain : implantation, outils, formation, accompagnement des équipes.' }, { num: '05', title: 'Performer dans la durée', desc: 'Rituels en place, transfert terminé, on garde un œil — ça tourne en autonomie.' }]; return (
{/* Header — same shape as Cas Client */}
NOTRE DIFFÉRENCE

On ne fait pas que conseiller On déploie

Là où un consultant classique s’arrête à la recommandation et vous laisse un rapport, on continue. On déploie les chantiers, on forme vos équipes, on opère avec vous. Quand on part, ça tourne sans nous.

5 / 5
phases — de l'opportunité à la durée
{/* 5-step path */}
{steps.map((s, i) =>
ÉTAPE {s.num} {s.baseline && FIN consulting } {i === steps.length - 1 && Atelier Perf }

{s.title}

{s.desc}

{s.baseline &&
Le consultant classique s’arrête ici
} {i === steps.length - 1 &&
Et nous, on continue jusqu’ici
}
{i < steps.length - 1 &&
} )}
{/* Footer tag — comme cas client */}
ce qui change concrètement → {['Installation sur site', 'Formation terrain', 'Documentation', 'Suivi post-mission'].map((s) => {s} )}
); } // ============================================ // STATS — bandeau yellow avec compteurs animés // ============================================ function StatCard({ s, tilt }) { const ref = useRef(null); const [display, setDisplay] = useState('0'); const [done, setDone] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; // Parse valeur: '−32%' → { sign:'−', num:32, unit:'%' } const m = s.value.match(/^([+\-−]?)(\d+)(.*)$/); if (!m) { setDisplay(s.value); setDone(true); return; } const sign = m[1], target = parseInt(m[2]), unit = m[3]; const startNum = s.start || 0; let rafId = null, timerId = null, active = false; function run() { if (active) return; active = true; setDone(false); const DURATION = 1600; const t0 = performance.now(); function tick(now) { const p = Math.min((now - t0) / DURATION, 1); const eased = 1 - Math.pow(1 - p, 3); setDisplay(sign + Math.round(startNum + eased * (target - startNum)) + unit); if (p < 1) { rafId = requestAnimationFrame(tick); } else { active = false; setDone(true); timerId = setTimeout(run, 2200); } } rafId = requestAnimationFrame(tick); } function stop() { cancelAnimationFrame(rafId); rafId = null; clearTimeout(timerId); timerId = null; active = false; } const io = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) run(); else stop(); }, { threshold: 0.5 }); io.observe(el); return () => { io.disconnect(); stop(); }; }, []); return (
{display || s.value} {s.label}
); } function HomeStats() { const tilts = [-0.5, 0.5, -0.3, 0.4]; return (
↓ VOUS POUVEZ VOUS ATTENDRE À
{STATS.map((s, i) => )}
); } // ============================================ // MARQUEE // ============================================ function MarqueeRow({ items, reverse, fontSize, color, dotColor }) { const tripled = [...items, ...items, ...items]; const anim = reverse ? 'marquee-r 50s linear infinite' : 'marquee 40s linear infinite'; return (
{tripled.map((it, i) => {it} )}
); } function HomeMarquee() { return (
); } // ============================================ // PROFILES — Trois mondes, un même atelier // ============================================ function HomeProfiles() { return (
POUR QUI ON BOSSE

Trois mondes — un même terrain

{PROFILES.map((p, i) =>
PROFIL · 0{i + 1}

{p.title}
{p.sub}

{p.desc}

)}
); } Object.assign(window, { HomePage, HomeHero, HomeManifesto, HomeStats, HomeMarquee, MarqueeRow, HomeProfiles, SERVICES, STATS, PROFILES, MARQUEE_ITEMS, MARQUEE_ITEMS2, HERO_PLACES, HERO_CIBLES, MISSION_SECTEURS, useRotator });