// diagrams2-eli5.jsx — ELI5 comparison panel + ELI5 attestation flow // ──────────────────────────────────────────────────────────────────────────── // ComparisonPanelELI5 — same viewBox (600x320). Picture-book metaphors: // onprem → your house, your computer // cloud → cloud (rented), full of peeking eyes // tee → cloud (rented), with a sealed safe inside; eyes crossed out // ──────────────────────────────────────────────────────────────────────────── function ComparisonPanelELI5({ L, mode, modeLabel }) { const isOnPrem = mode === "onprem"; const isCloud = mode === "cloud"; const isTEE = mode === "tee"; return ( {modeLabel || (isOnPrem ? "YOUR OWN COMPUTERS" : isCloud ? "REGULAR CLOUD" : "CLOUD WITH A TEE")} {/* CLIENT (left) — person icon */} {/* head + shoulders */} you {/* PROCESSING (right) */} {isOnPrem && ( {/* big "your house" wrapping the computer */} YOUR HOUSE {/* house */} {/* computer inside */} {/* tiny "AI" inside screen */} AI your computer )} {isCloud && ( {/* a cloud */} {/* peeping eyes scattered */} {[[-60, -22], [0, -42], [50, -28], [-30, -2], [40, -2], [80, -16]].map(([x, y], i) => ( ))} {/* AI text */} AI runs here they can peek at anything someone else's cloud )} {isTEE && ( {/* a cloud */} {/* the safe in the middle of the cloud */} {/* lock dial */} AI {/* crossed out eyes around the safe */} {[[-70, -28], [-58, -10], [55, -28], [60, -8], [10, -56], [-15, -56]].map(([x, y], i) => ( ))} sealed safe nobody peeks. not even them. someone else's cloud, locked )} {/* Arrows: ingress (top) + egress (bottom) */} {(() => { const inColor = isOnPrem ? "#1f5a37" : isCloud ? "#a23829" : "#2f4a6b"; const outColor = isOnPrem ? "#1f5a37" : isCloud ? "#a23829" : "#cf6624"; const inLabel = isOnPrem ? "" : isCloud ? "in the open" : "sealed"; const outLabel = isOnPrem ? "" : isCloud ? "in the open" : "sealed"; return ( {inLabel && ( {inLabel} )} {[0, 1, 2].map(i => ( ))} {outLabel && ( {outLabel} )} {[0.4, 1.3, 2.2].map((d, i) => ( ))} ); })()} ); } // ──────────────────────────────────────────────────────────────────────────── // AttestationFlowELI5 — same 4 steps, plain language, no vendor names. // Same viewBox so the LvlStack swap is height-stable. // ──────────────────────────────────────────────────────────────────────────── function AttestationFlowELI5({ L }) { const [step, setStep] = React.useState(0); const [auto, setAuto] = React.useState(true); React.useEffect(() => { if (!auto) return; const t = setInterval(() => setStep(s => (s + 1) % 5), 2400); return () => clearInterval(t); }, [auto]); const onPick = (i) => { setAuto(false); setStep(i); }; const isActive = (i) => step === i; const isPast = (i) => step >= i; return (
HOW YOU CHECK IT'S REAL {/* CLIENT */} YOU {/* checkmark when verified */} {step >= 4 && ( )} {/* SAFE (remote) */} SOMEONE ELSE'S COMPUTER ◆ THE SEALED SAFE {/* receipt printer visual — active on step 2 */} receipt {/* lines on receipt */} {/* signature */} {/* CHIP MAKER */} CHIP MAKER who made the chip {/* stamp visual */} REAL CHIP {/* 1) client → safe: random number */} a random number {isActive(1) && [0, 0.6, 1.2].map((d, i) => ( ))} {/* 2) self-measure */} prints + signs its own receipt {isActive(2) && ( )} {/* 3) safe → chip maker: receipt */} the receipt {isActive(3) && [0, 0.6, 1.2].map((d, i) => ( ))} {/* 4) chip maker → client: verdict */} ✓ yes, this is a real safe. send your data. {isActive(4) && [0, 0.4, 0.8].map((d, i) => ( ))}
4 STEPS {[1, 2, 3, 4].map(i => ( ))}
); } window.ComparisonPanelELI5 = ComparisonPanelELI5; window.AttestationFlowELI5 = AttestationFlowELI5;