// Services — BENTO LAYOUT with featured live-chat preview + 4 asymmetric cards. // Breaks the "three cards in a row" rhythm. Each card has its own micro-visual. function Services() { return (
/ Services

Nos services

{/* Card 01 — Featured · Automatisations sur-mesure */} {/* Card 02 — Chatbot 24/7 */} } /> {/* Card 03 — Solutions IA sur-mesure */} } /> {/* Card 04 — Agent OpenClaw */} } /> {/* Card 05 — Conseil & Formation */} } />
); } // ── Featured card with live chat animation ────────────────────── function ServiceFeatured({ n, title, desc, tags }) { return (
{/* Left — content */}
{n} · SERVICE

{title}

{desc}

{tags.map((t, i) => ( {t} ))}
{/* Right — animated automation feed */}
); } // ── Generic service card with visual ──────────────────────────── function ServiceCard({ n, title, desc, size, visual }) { return (
{/* Visual — absolutely positioned top-right, doesn't push content */}
{visual}
{/* Number */} {n} {/* Title + desc — naturally at the top */}

{title}

{desc}

); } // ── Live automation feed (for the featured "Automatisation" card) ── function AutomationPreview() { // Tasks cycle in slowly so the card feels alive without making scroll feel busy. // (visually: rows appear top-down, each row glows for ~600ms then settles). const tasks = [ { in: "Email reçu · Dupont", out: "Réponse envoyée", kind: "email" }, { in: "Facture #2453 en retard", out: "Relance programmée", kind: "invoice" }, { in: "Demande de devis · Martin", out: "Qualifiée · CRM mis à jour", kind: "lead" }, { in: "Ticket support · Bernard", out: "Réponse FAQ envoyée", kind: "ticket" }, { in: "Rapport hebdo demandé", out: "Rapport généré · envoyé", kind: "report" }, ]; const [tick, setTick] = React.useState(0); const [count, setCount] = React.useState(127); React.useEffect(() => { const t = setInterval(() => { setTick(v => v + 1); setCount(c => c + Math.floor(1 + Math.random() * 3)); }, 2600); return () => clearInterval(t); }, []); // Show the last 4 tasks (rolling window) const window = 4; const visible = Array.from({ length: window }).map((_, i) => { const taskIdx = (tick + i) % tasks.length; return { ...tasks[taskIdx], key: `${tick}-${i}` }; }); return (
{/* Scanning red beam */}
{/* Header */}
FLUX D'AUTOMATISATION LIVE
{/* Task list */}
{visible.map((task, i) => ( ))}
{/* Footer counter */}
AUJOURD'HUI {count}tâches automatisées
); } function TaskRow({ task, isNew, fade }) { return (
{task.in}
{task.out}
); } // ── Service mini-visuals ──────────────────────────────────────── function ChatIconVisual() { // Two chat bubbles, the bottom one with typing dots return ( ); } function CodeVisual() { // Modular blocks — represents custom-fit / tailor-made solutions return ( ); } function AgentVisual() { // OpenClaw real logo, gentle float + subtle rotation return ( <> OpenClaw ); } function TeamVisual() { // Idea spark — radiating beam representing knowledge transfer return ( ); } function ServiceIcon({ kind }) { const common = { width: 24, height: 24, viewBox: "0 0 28 28", fill: "none" }; const stroke = { stroke: "var(--ink)", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }; switch (kind) { case "flow": return ; default: return null; } } window.Services = Services;