// ───────────────────────────────────────────────────────────── // Mezoo — Visual simulations // SVG-based denser-than-placeholder mocks. Each one is a self-contained // vector composition designed to read as "real activity" without needing // asset files. Shapes use currentColor / palette tokens so they adapt // to the active theme (light/dark) and accent intensity automatically. // // All sims have a unified frame (corner ticks, top-left mono label, // top-right tabular tag) so they feel like instruments in the same // system, regardless of what's inside. // ───────────────────────────────────────────────────────────── // ── Frame wrapper ─────────────────────────────────────────────── function MockFrame({ label, tag, ratio = '16 / 9', tone = 'paper', grid = true, children, style }) { // tone: 'paper' (--surface) | 'ink' (--fg) | 'plain' (--bg) const palette = { paper: { bg: 'var(--surface)', fg: 'var(--fg)', line: 'var(--hairline)' }, ink: { bg: 'var(--fg)', fg: 'var(--bg)', line: 'var(--ink-2)' }, plain: { bg: 'var(--bg)', fg: 'var(--fg)', line: 'var(--hairline)' }, }[tone]; return (
{[ { top: 10, left: 10, borderTop: '1px solid', borderLeft: '1px solid' }, { top: 10, right: 10, borderTop: '1px solid', borderRight: '1px solid' }, { bottom: 10, left: 10, borderBottom: '1px solid', borderLeft: '1px solid' }, { bottom: 10, right: 10, borderBottom: '1px solid', borderRight: '1px solid' }, ].map((s, i) => (
))} {label && ↳ {label}} {tag && {tag}}
{children}
); } // ───────────────────────────────────────────────────────────── // 1. HORTIS ARCHITECTURE — five regional sites → Mezoo platform → outputs // Used as the cover capture on the case study page. // ───────────────────────────────────────────────────────────── function ArchitectureDiagram() { const sites = ['HORTIS · NORD', 'HORTIS · LYON', 'HORTIS · OUEST', 'HORTIS · SUD', 'HORTIS · ALPES']; const outputs = [ { label: 'CATALOGUE B2B', meta: '14 320 réf.' }, { label: 'TUNNEL B2C', meta: '5 marchés' }, { label: 'BACK-OFFICE', meta: 'rôles · 6' }, { label: 'API · ERP', meta: 'temps réel' }, { label: 'REPORTING', meta: 'hebdo · auto' }, ]; return ( {/* Left column — 5 source sites */} {sites.map((s, i) => { const y = 30 + i * 60; return ( SITE_{i + 1} {s} {/* Curve to center */} ); })} {/* Center — Mezoo platform */} {/* Inner sub-cells */} ↳ PLATEFORME UNIFIÉE NEXT 14 SANITY POSTGRES STRIPE {/* Accent marker */} {/* Right column — outputs */} {outputs.map((o, i) => { const y = 30 + i * 60; return ( OUT_{i + 1} {o.label} {o.meta} ); })} {/* Bottom dimensional axis */} INPUT — 5 SITES LEGACY PROCESS — MEZOO STACK OUTPUT — 5 SURFACES ); } // ───────────────────────────────────────────────────────────── // 2. APP DASHBOARD — sparkline + KPI grid + activity log // Used inside the case study captures row. // ───────────────────────────────────────────────────────────── function AppDashboardMock() { return (
{/* Header tabs */}
{['Performance', 'Sécurité', 'SEO'].map((t, i) => ( {t} ))} 30J
{/* KPI strip */}
{[ ['UPTIME', '99.98', '%'], ['TTFB p50', '78', 'ms'], ['CVE', '0', 'ouv.'], ].map(([k, v, u]) => (
{k}
{v}{u}
))}
{/* Chart */}
{[20, 40, 60].map((y) => ( ))}
{/* Activity log */}
{[ ['12:04', 'Déploiement', 'prod / v2.4.1', 'var(--signal-ok)'], ['11:21', 'Patch sécurité', 'CVE-2026-0188', 'var(--accent)'], ['09:58', 'Backup', 'PG · 41 GB', 'var(--fg-subtle)'], ].map(([t, k, d, c]) => (
{t} {k} {d}
))}
); } // ───────────────────────────────────────────────────────────── // 3. CATALOG GRID — product tiles with mini metadata. Used for the // second case-study capture. // ───────────────────────────────────────────────────────────── function CatalogGridMock() { const products = [ { name: 'Hêtre commun', sku: 'FAG-040', price: '14,80', stock: 1240 }, { name: 'Chêne sessile', sku: 'QUE-022', price: '22,40', stock: 480 }, { name: 'Bouleau verruqueux', sku: 'BET-118', price: '9,60', stock: 2010 }, { name: 'Charme commun', sku: 'CAR-074', price: '11,20', stock: 765 }, { name: 'Aulne glutineux', sku: 'ALN-051', price: '13,90', stock: 320 }, { name: 'Tilleul à grandes feuilles', sku: 'TIL-208', price: '28,00', stock: 90 }, ]; return (
{/* Search bar */}
↳ rechercher · 14 320 réf. FILTRES · 3
{/* Grid */}
{products.map((p, i) => (
{i === 0 && }
{p.sku} {p.name}
{p.price}€ 200 ? 'var(--signal-ok)' : 'var(--accent)' }}>● {p.stock}
))}
↳ page 01 / 478 6 / 14 320
); } // ───────────────────────────────────────────────────────────── // 4. HERO RADAR — minimal "live mission control" composition used in // the home hero right column. Pulses + radial graph. // ───────────────────────────────────────────────────────────── function HeroLiveMock() { return (
{/* Radial */}
{/* Concentric rings */} {[12, 24, 36, 48].map((r) => ( ))} {/* Axes */} {/* Site nodes */} {[ { a: 30, r: 22, n: 'HORTIS' }, { a: 75, r: 28, n: 'BERGER' }, { a: 130, r: 18, n: 'CLOS-M.' }, { a: 180, r: 34, n: 'PARQUET' }, { a: 225, r: 25, n: 'OURSE-N.' }, { a: 290, r: 30, n: 'STUDIO-LB' }, { a: 340, r: 16, n: 'BERG/IO' }, ].map((p, i) => { const x = Math.cos((p.a * Math.PI) / 180) * p.r; const y = Math.sin((p.a * Math.PI) / 180) * p.r; const active = i === 0; return ( {active && ( <> )} {p.n} ); })} {/* Center mark */}
{/* Stats row */}
{[ ['UPTIME · 30J', '99.98%'], ['INCIDENTS · 30J', '0'], ['CVE OUVERTES', '0'], ['DÉPLOIEMENTS', '142'], ].map(([k, v]) => (
{k} {v}
))}
); } // ───────────────────────────────────────────────────────────── // 5. PORTFOLIO MINI MOCKS — one per case card. Each is a tiny sim // that hints at the project's domain without being literal. // ───────────────────────────────────────────────────────────── // 5a · Hortis — collapsed network (5 nodes → 1) function PieceHortisMock() { return ( {[0, 1, 2, 3, 4].map((i) => { const y = 10 + i * 18; return ( ); })} PLATFORM NEXT · PG · STRIPE ); } // 5b · Berger & Associés — vault with chain of trust function PieceBergerMock() { return ( {/* Vault block */} {/* Lock */} {/* Document rows */} {[44, 50, 56, 62].map((y, i) => ( ))} {/* Chain links right */} {[20, 35, 50, 65, 80].map((y, i) => ( SHA-{i + 1} ))} {/* Chain left */} {[20, 35, 50, 65, 80].map((y, i) => ( ))} CHAÎNE DE CONFIANCE ); } // 5c · Clos-Marie — bottle silhouettes + conversion arrow function PieceClosMarieMock() { return ( {/* Bottle silhouettes */} {[15, 35, 55, 75].map((x, i) => ( N°{i + 1} ))} {/* Conversion curve */} PANIER · MARS → AVRIL ); } // 5d · Parquet & Fils — 3D iso wireframe of a parquet pattern function PieceParquetMock() { return ( {/* Iso planks: rhombus tiles */} {[0, 1, 2, 3].map((row) => [0, 1, 2, 3].map((col) => { const cx = 16 + col * 18 + (row % 2 ? 9 : 0); const cy = 24 + row * 14; return ( ); }) )} {/* Dimension callouts */} L · 1200mm DEVIS · 28 sec ); } Object.assign(window, { MockFrame, ArchitectureDiagram, AppDashboardMock, CatalogGridMock, HeroLiveMock, PieceHortisMock, PieceBergerMock, PieceClosMarieMock, PieceParquetMock, });