// Hand-drawn process illustrations for wf3 — enlarged human figures // 4 scenes matching each step: Hearing / Planning / Development / Operation const ProcessIllustration = ({ step }) => { const stroke = "#1a1a1a"; const sw = 2.4; const skin = "#ffdcc6"; // Bigger head component const Head = ({ cx, cy, r = 14, hairColor = stroke, smile = true }) => ( {smile && } ); if (step === 0) { // Hearing — two large people, table, speech bubble return ( {/* arm gesturing */} {/* Speech bubble */} {/* Consultant right — big (with neck) */} {/* notebook on table */} {/* arm with pen */} ); } if (step === 1) { // Planning — whiteboard + two big people return ( {/* Person B — big */} ); } if (step === 2) { // Development — rebuilt from scratch. // Same composition pattern as other cards: two figures flanking a central object (desk + laptop). // Coral = Algoviax FDE (left, actively coding). Blue = Client (right, observing progress). return ( {/* glasses */} {/* FDE badge on chest */} FDE {/* arms reaching forward to laptop keyboard */} {/* hands at keyboard */} {/* RIGHT: Client (BLUE) — standing, holding coffee, watching */} {/* body */} {/* neck */} {/* head */} {/* ID lanyard */} {/* left arm holding coffee mug */} {/* steam */} {/* right arm down at side */} {/* Top-left wall sign: CLIENT OFFICE */} CLIENT OFFICE {/* Top-right: speech bubble from client ("いい感じ!") with code icons */} いい感じ! {/* floating code glyphs between them */} {''} {'{ }'} ); } if (step === 3) { // Operation — Client (blue) watching dashboard; Algoviax (coral) points at improved KPI chart. return ( {/* arm toward dashboard */} {/* Algoviax (CORAL) right — pointing at growth, gesturing explanation */} {/* pointing arm toward dashboard */} {/* tablet/clipboard in other hand */} {/* Gear (ops/iteration icon) top-left */} {/* Checkmark bubble bottom-left */} ); } return null; }; window.ProcessIllustration = ProcessIllustration;