/ brutalist-app.jsx
brutalist-app.jsx
1 // Brutalist funnel app — routes between 5 pages, presents them on a 2 // design canvas side-by-side. Cart state is shared. Clicking a page's 3 // internal nav navigates within that artboard; the canvas itself 4 // always shows all 5 so the reviewer can compare flow. 5 6 function BrutalistApp() { 7 // Persist the funnel state in localStorage so reloads preserve the review 8 const [cart, setCart] = React.useState(() => { 9 try { 10 const saved = JSON.parse(localStorage.getItem("br-cart") || "null"); 11 if (saved) return saved; 12 } catch {} 13 return [ 14 { ship: makeShip("KRV-IC-2849-AX"), price: Math.round(makeShip("KRV-IC-2849-AX").price * 1.18), config: "TACTICAL" }, 15 { ship: makeShip("VNT-CH-1044-BM"), price: makeShip("VNT-CH-1044-BM").price, config: "STANDARD" }, 16 ]; 17 }); 18 const [activeShip, setActiveShip] = React.useState("KRV-IC-2849-AX"); 19 20 React.useEffect(() => { 21 try { localStorage.setItem("br-cart", JSON.stringify(cart)); } catch {} 22 }, [cart]); 23 24 const addToCart = (ship, price, config) => { 25 setCart(c => [...c, { ship, price, config }]); 26 }; 27 const removeFromCart = (idx) => setCart(c => c.filter((_,i)=>i!==idx)); 28 29 // no-op onNav at canvas level — each artboard shows a single page state 30 const noop = () => {}; 31 32 return ( 33 <DesignCanvas> 34 <div style={{padding:"0 60px 30px", maxWidth:1200}}> 35 <div style={{fontFamily:"'Space Grotesk', sans-serif", fontSize:32, fontWeight:600, color:"#0c0c0c", letterSpacing:-0.5}}> 36 Strata⁄Fleet · brutalist procurement funnel 37 </div> 38 <div style={{fontFamily:"'IBM Plex Mono', monospace", fontSize:12, color:"rgba(40,30,20,0.7)", marginTop:6, letterSpacing:1, lineHeight:1.7, maxWidth:880}}> 39 COVER · INDEX · CATALOG · DOSSIER · MANIFEST · REMITTANCE · RECEIPT · COMMODORE BRIDGE · INDUCTION · DISPATCH · SERVICE · DEBRIEF · SALE-ROOM · PUNCH-LIST · ROLODEX · WIRELESS<br/> 40 Fifteen forms plus a cover sheet — the full Coalition procurement and operations life-cycle, from first sighting of a hull to comms chatter across the G-4 sector. Naval-yard spec-sheet system carried through: Oswald masthead type, IBM Plex Mono for data, paper + ink + rust. Pan with trackpad/drag, zoom with pinch or ctrl+wheel. 41 </div> 42 </div> 43 44 <DCSection title="⓪ Cover Sheet — Form 00" subtitle="Master table of contents. Supermast Oswald title, four phase bands (Acquisition / Settlement / Commissioning / Operations) with color-coded rows indexing every form in the suite, design-system legend, recurring-components register, status grammar, filing-order strip with notary signature and ledger block."> 45 <DCArtboard label="Cover Sheet · 1280 × 2100" width={1280} height={2100}> 46 <BRCover onNav={noop}/> 47 </DCArtboard> 48 </DCSection> 49 50 <DCSection title="ⓞ Welcome Mat — Form 01" subtitle="The Register's front door. Full-bleed Oswald masthead, four coloured 'doors' — Buyer, Broker, Fleet Operator, Yard Inspector — each linking to its own dossier form. Anonymous-browse and sign-on callouts at the foot."> 51 <DCArtboard label="Welcome Mat · 1280 × 1600" width={1280} height={1600}> 52 <OnbWelcome/> 53 </DCArtboard> 54 <DCArtboard label="Sign On · 1280 × 1200" width={1280} height={1200}> 55 <OnbSignOn/> 56 </DCArtboard> 57 <DCArtboard label="Browse Unbonded · 1280 × 1100" width={1280} height={1100}> 58 <OnbAnon/> 59 </DCArtboard> 60 <DCArtboard label="Clean Ledger · 1280 × 1100" width={1280} height={1100}> 61 <OnbEmpty/> 62 </DCArtboard> 63 </DCSection> 64 65 <DCSection title="ⓘ Onboarding · Buyer — Form 03" subtitle="Buyer's Dossier. Three pages: Identity & Bond (Coalition ID, bond particulars, declared purpose), Trading Mandate (hull classes, ceilings, pace), Oath of Trade (signed compact with buyer/registrar/bursar sigs). Formal bureaucratic voice."> 66 <DCArtboard label="Buyer · Page 1 — Identity & Bond · 1280 × 2000" width={1280} height={2000}> 67 <OnbBuyer1/> 68 </DCArtboard> 69 <DCArtboard label="Buyer · Page 2 — Trading Mandate · 1280 × 2000" width={1280} height={2000}> 70 <OnbBuyer2/> 71 </DCArtboard> 72 <DCArtboard label="Buyer · Page 3 — Oath of Trade · 1280 × 1900" width={1280} height={1900}> 73 <OnbBuyer3/> 74 </DCArtboard> 75 </DCSection> 76 77 <DCSection title="ⓙ Onboarding · Broker — Form 05" subtitle="Three pages: Accreditation & Bond (licence grade, bond, guild standing), Book & Mandate (commission bands, classes of trade, clients on the book), Oath of Fair Dealing (signed by broker, guild master, registrar)."> 78 <DCArtboard label="Broker · Page 1 — Accreditation · 1280 × 2000" width={1280} height={2000}> 79 <OnbBroker1/> 80 </DCArtboard> 81 <DCArtboard label="Broker · Page 2 — Book & Mandate · 1280 × 2000" width={1280} height={2000}> 82 <OnbBroker2/> 83 </DCArtboard> 84 <DCArtboard label="Broker · Page 3 — Oath of Fair Dealing · 1280 × 1700" width={1280} height={1700}> 85 <OnbBroker3/> 86 </DCArtboard> 87 </DCSection> 88 89 <DCSection title="ⓚ Onboarding · Fleet Operator — Form 07" subtitle="Warmer, trade-manual tone. Three pages: Operator's Charter (house, flag, sectors, with a friendly Registrar preamble and margin notes from working Commodores), Fleet Declaration (hulls under flag, pilots, cargoes), Operations Compact (signed undertakings)."> 90 <DCArtboard label="Fleet · Page 1 — Operator's Charter · 1280 × 2000" width={1280} height={2000}> 91 <OnbFleet1/> 92 </DCArtboard> 93 <DCArtboard label="Fleet · Page 2 — Fleet Declaration · 1280 × 2000" width={1280} height={2000}> 94 <OnbFleet2/> 95 </DCArtboard> 96 <DCArtboard label="Fleet · Page 3 — Operations Compact · 1280 × 1700" width={1280} height={1700}> 97 <OnbFleet3/> 98 </DCArtboard> 99 </DCSection> 100 101 <DCSection title="ⓛ Onboarding · Yard Inspector — Form 09" subtitle="Warmer, apprentice-manual tone. Three pages: Apprenticeship (master yardmaster's letter, curriculum served, ships touched), Instruments & Calibration (inspector's kit with calibration states and a rolling-year record), Pledge of Honest Work (the 'I will not sign what I have not seen' pledge)."> 102 <DCArtboard label="Inspector · Page 1 — Apprenticeship · 1280 × 2000" width={1280} height={2000}> 103 <OnbInsp1/> 104 </DCArtboard> 105 <DCArtboard label="Inspector · Page 2 — Instruments · 1280 × 2000" width={1280} height={2000}> 106 <OnbInsp2/> 107 </DCArtboard> 108 <DCArtboard label="Inspector · Page 3 — Pledge of Honest Work · 1280 × 1700" width={1280} height={1700}> 109 <OnbInsp3/> 110 </DCArtboard> 111 </DCSection> 112 113 <DCSection title="① Index — Homepage" subtitle="Broadsheet masthead, editorial headline, Lot of the Week, class index, market indices, desk dispatches, recent lots, manufacturer register."> 114 <DCArtboard label="Index · 1280 × 2200" width={1280} height={2200}> 115 <BRHome onNav={noop} onShip={noop}/> 116 </DCArtboard> 117 </DCSection> 118 119 <DCSection title="② Catalog — Search & Listings" subtitle="Facet rail on the left (class, forge, drive, price histogram, availability). Sortable table view with silhouette plates; grid view toggle. Newspaper pagination."> 120 <DCArtboard label="Catalog · 1280 × 2000" width={1280} height={2000}> 121 <BRCatalog onNav={noop} onShip={noop}/> 122 </DCArtboard> 123 </DCSection> 124 125 <DCSection title="③ Dossier — Product page" subtitle="The anchor design from the exploration, now upgraded with selectable loadout configs that re-price the unit, provenance ledger, and comparable-lot cross-sell."> 126 <DCArtboard label="Dossier · 1280 × 2000" width={1280} height={2000}> 127 <BRProduct seed={activeShip} cartCount={cart.length} onNav={noop} onAddToCart={addToCart}/> 128 </DCArtboard> 129 </DCSection> 130 131 <DCSection title="④ Manifest — Cart" subtitle="Bill of lading. Line items as a formal table (serial · plate · config · unit · line). Consignment instructions text block. Rider services (insurance, transit, re-code). Reckoning column with total and promo."> 132 <DCArtboard label="Manifest · 1280 × 1400" width={1280} height={1400}> 133 <BRCart cart={cart} onNav={noop} onRemove={removeFromCart} onProceed={noop}/> 134 </DCArtboard> 135 </DCSection> 136 137 <DCSection title="⑤ Remittance — Checkout" subtitle="Form 9A. Stepper (Manifest → Remittance → Receipt). Consignee particulars, four remittance methods (escrow / credit / bullion / lease), bonded instrument fields, handwritten signatory, a receipt summary column, and the binding §412 warning."> 138 <DCArtboard label="Remittance · 1280 × 1500" width={1280} height={1500}> 139 <BRPay cart={cart} onNav={noop} onComplete={noop}/> 140 </DCArtboard> 141 </DCSection> 142 143 <DCSection title="⑥ Receipt — Post-purchase / hangar delivery" subtitle="Form 14. Notarized clearance band (CLEARED + NOTARIZED rubber stamps). Six-step delivery timeline, owned-hulls panel with new transponder codes, pre-handoff checklist, ASCII route-to-hangar map, ledger entry column with notary signature."> 144 <DCArtboard label="Receipt · 1280 × 2100" width={1280} height={2100}> 145 <BRReceipt cart={cart} onNav={noop}/> 146 </DCArtboard> 147 </DCSection> 148 149 <DCSection title="⑦ Commodore Bridge — Fleet view" subtitle="Form 22. Operations dashboard: KPI strip, full fleet register with silhouettes / fuel / hull bars / status chips, sector disposition map with hulls pinned around Ceres-II, flag-orders queue, pilot roster, quick-order buttons."> 150 <DCArtboard label="Commodore Bridge · 1280 × 2200" width={1280} height={2200}> 151 <BRFleet onNav={noop}/> 152 </DCArtboard> 153 </DCSection> 154 155 <DCSection title="⑧ Induction — Pilot onboarding" subtitle="Form 31. Six-step stepper (Identity → Biometrics → License → Drill → Familiarization → Oath). Left-rail pilot card with hatched portrait placeholder and thumbprint block, main form changes per step, right-rail hull assignment + signatories with handwritten sigs. Stamped PROVISIONAL."> 156 <DCArtboard label="Induction · 1280 × 2000" width={1280} height={2000}> 157 <BROnboard onNav={noop}/> 158 </DCArtboard> 159 </DCSection> 160 161 <DCSection title="⑨ Dispatch — Broker comms thread" subtitle="Form 18. Encrypted correspondence between buyer and broker. Parties column with status dots, attachments bar, left-rust-bordered buyer messages vs. ink-bordered broker messages with inline attachments and stamps, composer with Q-key banner, right-column deal state + audit trail."> 162 <DCArtboard label="Dispatch · 1280 × 2000" width={1280} height={2000}> 163 <BRBroker onNav={noop}/> 164 </DCArtboard> 165 </DCSection> 166 167 <DCSection title="⑩ Service — Yard work order" subtitle="Form 47. Hull strip + foreman metadata, pilot complaint in handwritten ink, dark-mode diagnostic terminal output, parts requisition table, labor log, reckoning column with warranty credits, foreman sign-off."> 168 <DCArtboard label="Service · 1280 × 2100" width={1280} height={2100}> 169 <BRService onNav={noop}/> 170 </DCArtboard> 171 </DCSection> 172 173 <DCSection title="⑪ Debrief — Post-flight after-action report" subtitle="Form 58. Mission narrative, SVG flight-track map with waypoints, telemetry sparklines (fuel, velocity, g-load, heat), event log with severity chips, AAR grid (what worked / didn't / carry forward / recognition)."> 174 <DCArtboard label="Debrief · 1280 × 2200" width={1280} height={2200}> 175 <BRDebrief onNav={noop}/> 176 </DCArtboard> 177 </DCSection> 178 179 <DCSection title="⑫ Sale-Room — Auction / bidding" subtitle="Form 63. Big lot on the block with silhouette plate and provenance paragraph, live bid ledger (your bid highlighted), high-bid rust panel, quick-raise buttons + proxy-max, up-next lot cards, paddle display."> 180 <DCArtboard label="Sale-Room · 1280 × 2100" width={1280} height={2100}> 181 <BRAuction onNav={noop}/> 182 </DCArtboard> 183 </DCSection> 184 185 <DCSection title="⑬ Punch-List — Yard inspector 80-point certification" subtitle="Form 71. Summary strip (total / pass / flag / fail), ship diagram with numbered hit-points colored by result, defect gallery with hatched photo placeholders, 32-row line-item table, re-inspection trigger checklist, dual-signature verdict."> 186 <DCArtboard label="Punch-List · 1280 × 2200" width={1280} height={2200}> 187 <BRPunchlist onNav={noop}/> 188 </DCArtboard> 189 </DCSection> 190 191 <DCSection title="⑭ Rolodex — Broker's contact-book" subtitle="Form 29. A–Z index + filter chips, 10 contact cards with initials avatars / status dots / tag badges / handwritten-feel notes / call·msg·ledger actions, active-relationship column with deal history and recent activity log."> 192 <DCArtboard label="Rolodex · 1280 × 2000" width={1280} height={2000}> 193 <BRContacts onNav={noop}/> 194 </DCArtboard> 195 </DCSection> 196 197 <DCSection title="⑮ Wireless — Fleet comms radio" subtitle="Form 33. Channel list with per-channel encryption chips, dark-mode transmission log with color-coded channel tags, RX/TX waveform scopes, big rust KEY UP button, compose pane, emergency-band cards, on-the-net roster, Q-key status."> 198 <DCArtboard label="Wireless · 1280 × 2100" width={1280} height={2100}> 199 <BRComms onNav={noop}/> 200 </DCArtboard> 201 </DCSection> 202 203 <div style={{padding:"40px 60px 80px", maxWidth:860, fontFamily:"'Space Grotesk', sans-serif", fontSize:14, color:"rgba(40,30,20,0.7)", lineHeight:1.6}}> 204 <div style={{fontSize:11, letterSpacing:2, color:"rgba(40,30,20,0.5)", fontFamily:"'IBM Plex Mono',monospace"}}>SYSTEM NOTES</div> 205 <div style={{marginTop:8}}> 206 The fifteen pages share a token file (br-tokens.jsx): paper / ink / rust palette, BRNav masthead with consistent Stardate line, BRFooter with a 5-column register, BRH section headings with §-numbering, BRSpec monospaced key-value rows, BRChip pills, BRStamp angled rubber-stamps. Ship data is procedurally seeded from the catalog so every serial re-hydrates to the same specs. Items added from the Dossier persist to the Manifest via localStorage, so the funnel feels continuous even when you navigate individual artboards. 207 </div> 208 <div style={{fontSize:11, letterSpacing:2, color:"rgba(40,30,20,0.5)", fontFamily:"'IBM Plex Mono',monospace", marginTop:20}}>NEXT STEPS</div> 209 <div style={{marginTop:8}}> 210 Fifteen forms now. This is a complete operational suite. Say the word for a specific page to deepen, new side-paths, or a cover sheet / table of contents for the whole system. 211 </div> 212 </div> 213 </DesignCanvas> 214 ); 215 } 216 217 ReactDOM.createRoot(document.getElementById("root")).render(<BrutalistApp/>);