br-onb-shared.jsx
1 // Shared onboarding entry artboards: landing splash, sign-up, verification, 2 // KYC identity, welcome dashboard, empty-fleet first run. 3 // Bureaucratic voice for identity/KYC; slightly warmer for welcome/first-run. 4 5 function OnbSplash() { 6 return ( 7 <BRPage width={1280} minHeight={1800}> 8 <BRNav active="home" cartCount={0} onNav={()=>{}}/> 9 {/* Broadsheet masthead headline */} 10 <div style={{padding:"60px 60px 20px", borderBottom:`3px solid ${BR.ink}`}}> 11 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:3, color:BR.mute, textTransform:"uppercase"}}>ACCESS NOTICE · FORM 01 · ISSUED COALITION REGISTRAR</div> 12 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:128, letterSpacing:-2, lineHeight:0.88, color:BR.ink, marginTop:16, textTransform:"uppercase"}}>Hulls<br/>Bonded,<br/>Hands<br/>Sworn.</div> 13 <div style={{display:"grid", gridTemplateColumns:"1fr 340px", gap:40, marginTop:24, paddingTop:18, borderTop:`1px solid ${BR.ink}`}}> 14 <div style={{fontFamily:"IBM Plex Sans", fontSize:16, color:BR.ink2, lineHeight:1.55, maxWidth:640}}> 15 Strata⁄Fleet is a Coalition-chartered exchange for bonded vessels. Registry is restricted to verified parties. Complete the enrollment dossier appropriate to your standing — buyer, broker, fleet operator, yard inspector — to be issued a trade paddle and network credentials. 16 </div> 17 <div style={{border:`2px solid ${BR.ink}`, padding:16, background:BR.paper2}}> 18 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, color:BR.ink, borderBottom:`1px solid ${BR.ink}`, paddingBottom:6, marginBottom:8}}>TODAY'S TALLY</div> 19 {[["Bonded hulls on block","11,842"],["Clearing sales (24h)","319"],["Active bonded accts","47,216"],["Brokers accredited","1,104"]].map(([k,v])=>( 20 <div key={k} style={{display:"flex", justifyContent:"space-between", fontFamily:"IBM Plex Mono", fontSize:11, padding:"3px 0", borderBottom:`1px dotted ${BR.ink}33`}}> 21 <span style={{color:BR.mute}}>{k}</span><span style={{fontWeight:600}}>{v}</span> 22 </div> 23 ))} 24 </div> 25 </div> 26 </div> 27 {/* Four persona gates */} 28 <div style={{padding:"30px 60px"}}> 29 <BRH n="01.01">Select your standing</BRH> 30 <div style={{display:"grid", gridTemplateColumns:"1fr 1fr 1fr 1fr", gap:14}}> 31 {[ 32 {tag:"BUYER", title:"Commodore / Private buyer", line:"Acquire hulls on personal or corporate bond. Browse, bid, settle.", form:"FORM 03", stamp:"TIER-2 OR HIGHER"}, 33 {tag:"BROKER", title:"Accredited broker", line:"List client hulls on the registry. Dispatches, escrow, commissions.", form:"FORM 05", stamp:"BOND REQUIRED"}, 34 {tag:"OPERATOR", title:"Fleet operator / Org", line:"Corporate account. Add ships, invite pilots, run a bridge.", form:"FORM 07", stamp:"CORPORATE"}, 35 {tag:"YARD", title:"Yard / Inspector", line:"Service yard or certifying inspector. Punch-lists, work orders.", form:"FORM 09", stamp:"CREDENTIALS REQ."}, 36 ].map(p => ( 37 <div key={p.tag} style={{border:`2px solid ${BR.ink}`, padding:"16px 14px 14px", background:BR.paper, position:"relative"}}> 38 <div style={{fontFamily:"IBM Plex Mono", fontSize:9, letterSpacing:2, color:BR.mute}}>{p.form} · {p.stamp}</div> 39 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:34, letterSpacing:1, color:BR.ink, marginTop:4, textTransform:"uppercase"}}>{p.tag}</div> 40 <div style={{fontFamily:"IBM Plex Sans", fontSize:12, color:BR.ink2, marginTop:4, lineHeight:1.4}}>{p.title}</div> 41 <div style={{fontFamily:"IBM Plex Sans", fontSize:11, color:BR.mute, marginTop:10, lineHeight:1.5, borderTop:`1px solid ${BR.ink}22`, paddingTop:8}}>{p.line}</div> 42 <div style={{marginTop:14, padding:"8px 0", background:BR.ink, color:BR.paper, fontFamily:"Oswald", fontWeight:700, fontSize:11, letterSpacing:3, textAlign:"center", textTransform:"uppercase"}}>Open dossier →</div> 43 </div> 44 ))} 45 </div> 46 </div> 47 {/* How enrollment works */} 48 <div style={{padding:"20px 60px 30px"}}> 49 <BRH n="01.02">How enrollment proceeds</BRH> 50 <div style={{display:"grid", gridTemplateColumns:"repeat(5, 1fr)", gap:10}}> 51 {[["01","Sign","Account credential + transponder address"],["02","Verify","One-time code to transponder"],["03","Identify","Coalition ID · bond · photograph"],["04","Dossier","Persona-specific form"],["05","Oath","Countersigned. Paddle issued."]].map(([n,t,d])=>( 52 <div key={n} style={{border:`2px solid ${BR.ink}`, padding:"10px 12px"}}> 53 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, color:BR.rust, letterSpacing:2}}>STEP {n}</div> 54 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:16, letterSpacing:2, color:BR.ink, marginTop:2, textTransform:"uppercase"}}>{t}</div> 55 <div style={{fontFamily:"IBM Plex Sans", fontSize:11, color:BR.ink2, marginTop:4, lineHeight:1.4}}>{d}</div> 56 </div> 57 ))} 58 </div> 59 <div style={{marginTop:16, display:"flex", alignItems:"center", justifyContent:"space-between", borderTop:`1px solid ${BR.ink}`, paddingTop:12}}> 60 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, color:BR.mute, letterSpacing:2}}>EST. TIME · 12–18 MIN · ALL FIELDS INKED · ENROLLMENT NON-REFUNDABLE PER §412</div> 61 <div style={{display:"flex", gap:8}}> 62 <div style={{padding:"8px 16px", border:`2px solid ${BR.ink}`, fontFamily:"Oswald", fontWeight:700, fontSize:11, letterSpacing:3}}>SIGN IN</div> 63 <div style={{padding:"8px 16px", background:BR.rust, color:BR.paper, fontFamily:"Oswald", fontWeight:700, fontSize:11, letterSpacing:3}}>BEGIN ENROLLMENT →</div> 64 </div> 65 </div> 66 </div> 67 <BRFooter/> 68 </BRPage> 69 ); 70 } 71 72 function OnbSignup() { 73 return ( 74 <BRPage width={1280} minHeight={1600}> 75 <BRNav active="home" cartCount={0} onNav={()=>{}}/> 76 <div style={{padding:"36px 60px 20px"}}> 77 <div style={{display:"flex", justifyContent:"space-between", alignItems:"baseline", borderBottom:`3px solid ${BR.ink}`, paddingBottom:12}}> 78 <div> 79 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:3, color:BR.rust}}>FORM 02 · CREDENTIAL ISSUANCE</div> 80 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:56, letterSpacing:-0.5, color:BR.ink, textTransform:"uppercase"}}>Sign · Credential</div> 81 </div> 82 <BRStamp rotate={-6}>UNSIGNED</BRStamp> 83 </div> 84 <div style={{display:"grid", gridTemplateColumns:"1fr 380px", gap:40, marginTop:24}}> 85 <div> 86 <BRH n="02.01">Particulars</BRH> 87 {[ 88 ["Full name (as on Coalition ID)", "placeholder"], 89 ["Known aliases / paddle name", "optional"], 90 ["Transponder address", "e.g. orlan@veyr.fleet"], 91 ["Sector of domicile", "G-4 · Ceres-II"], 92 ["Voice sigil (passphrase)", "●●●●●●●●●●●●"], 93 ["Voice sigil (confirm)", "●●●●●●●●●●●●"], 94 ].map(([l,p])=>( 95 <div key={l} style={{marginBottom:10}}> 96 <div style={{fontFamily:"IBM Plex Mono", fontSize:9, letterSpacing:2, color:BR.mute, textTransform:"uppercase"}}>{l}</div> 97 <div style={{border:`2px solid ${BR.ink}`, background:BR.paper2, padding:"10px 12px", fontFamily:"IBM Plex Mono", fontSize:13, color:BR.ink2, marginTop:4}}>{p}</div> 98 </div> 99 ))} 100 <BRH n="02.02">Bond class</BRH> 101 <div style={{display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:10}}> 102 {[["TIER-1","Private","12 hulls/yr cap"],["TIER-2","Bonded","Standard. Most accounts."],["TIER-3","Commodore","Unlimited · requires review"]].map(([k,t,d],i)=>( 103 <div key={k} style={{border:`2px solid ${BR.ink}`, padding:12, background:i===1?BR.ink:BR.paper, color:i===1?BR.paper:BR.ink}}> 104 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:22, letterSpacing:2}}>{k}</div> 105 <div style={{fontFamily:"IBM Plex Sans", fontSize:13, fontWeight:600, marginTop:2}}>{t}</div> 106 <div style={{fontFamily:"IBM Plex Sans", fontSize:11, opacity:0.8, marginTop:4}}>{d}</div> 107 </div> 108 ))} 109 </div> 110 </div> 111 <div> 112 <div style={{border:`2px solid ${BR.ink}`, padding:14, background:BR.paper2}}> 113 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, borderBottom:`1px solid ${BR.ink}`, paddingBottom:6, marginBottom:8}}>NOTICES · §412.A</div> 114 <div style={{fontFamily:"IBM Plex Sans", fontSize:11, color:BR.ink2, lineHeight:1.55}}> 115 Credentials are non-transferable. Loss of voice sigil requires re-verification at a Coalition office in person. Automated recovery is not available. You will be asked to inscribe your sigil twice; both must match exactly. 116 </div> 117 <div style={{marginTop:12, fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:2, color:BR.rust}}>RETAIN THIS NOTICE.</div> 118 </div> 119 <div style={{border:`2px solid ${BR.ink}`, padding:14, marginTop:12}}> 120 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, borderBottom:`1px solid ${BR.ink}`, paddingBottom:6, marginBottom:8}}>FIELD LEGEND</div> 121 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, color:BR.ink2, lineHeight:1.8}}> 122 <div>— FIELDS WITH · ARE REQUIRED</div> 123 <div>— FIELDS WITH ○ MAY BE LEFT BLANK</div> 124 <div>— ALL FIELDS INKED IN BLACK</div> 125 <div>— CORRECTIONS COUNTERSIGNED</div> 126 </div> 127 </div> 128 <div style={{marginTop:14, padding:"12px 16px", background:BR.rust, color:BR.paper, fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, textAlign:"center"}}>SIGN & PROCEED TO VERIFY →</div> 129 </div> 130 </div> 131 </div> 132 <BRFooter/> 133 </BRPage> 134 ); 135 } 136 137 function OnbVerify() { 138 return ( 139 <BRPage width={1280} minHeight={1100}> 140 <BRNav active="home" cartCount={0} onNav={()=>{}}/> 141 <div style={{padding:"40px 60px"}}> 142 <div style={{display:"flex", justifyContent:"space-between", alignItems:"baseline", borderBottom:`3px solid ${BR.ink}`, paddingBottom:12}}> 143 <div> 144 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:3, color:BR.rust}}>FORM 02A · TRANSPONDER VERIFICATION</div> 145 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:56, letterSpacing:-0.5, textTransform:"uppercase"}}>Inscribe the key</div> 146 </div> 147 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, color:BR.mute, textAlign:"right", letterSpacing:2}}>KEY TRANSMITTED · 0841Z<br/>EXPIRES · 0856Z (14 MIN)</div> 148 </div> 149 <div style={{display:"grid", gridTemplateColumns:"1fr 420px", gap:40, marginTop:32, alignItems:"start"}}> 150 <div> 151 <div style={{fontFamily:"IBM Plex Sans", fontSize:15, color:BR.ink2, lineHeight:1.55, maxWidth:620}}> 152 A six-character verification key has been transmitted to <span style={{fontFamily:"IBM Plex Mono", borderBottom:`1px dotted ${BR.ink}`}}>orlan@veyr.fleet</span>. Inscribe it below. Keys are valid for fifteen minutes of stardate. Re-issue permitted twice per standard day. 153 </div> 154 {/* Ticker boxes */} 155 <div style={{display:"flex", gap:12, marginTop:28}}> 156 {"Q·K·7·R·4·2".split("·").map((c,i)=>( 157 <div key={i} style={{width:82, height:110, border:`3px solid ${BR.ink}`, background:i<4?BR.paper2:BR.paper, display:"flex", alignItems:"center", justifyContent:"center", fontFamily:"Oswald", fontWeight:900, fontSize:64, color:i<4?BR.ink:BR.mute}}>{i<4?c:"·"}</div> 158 ))} 159 </div> 160 <div style={{marginTop:16, fontFamily:"IBM Plex Mono", fontSize:10, color:BR.mute, letterSpacing:2}}>CURSOR POSITION · CHAR 5 OF 6 · CAPS LOCKED</div> 161 <div style={{marginTop:30, display:"flex", gap:10}}> 162 <div style={{padding:"10px 18px", border:`2px solid ${BR.ink}`, fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3}}>RE-ISSUE KEY (2 LEFT)</div> 163 <div style={{padding:"10px 18px", background:BR.ink, color:BR.paper, fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3}}>CHANGE TRANSPONDER</div> 164 </div> 165 </div> 166 <div> 167 <div style={{border:`2px solid ${BR.ink}`, padding:16}}> 168 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, borderBottom:`1px solid ${BR.ink}`, paddingBottom:6, marginBottom:10}}>TRANSMISSION LOG</div> 169 {[ 170 ["0841:02Z","KEY GENERATED","QK7R42"], 171 ["0841:03Z","DISPATCHED → orlan@veyr.fleet",""], 172 ["0841:04Z","RECEIPT CONFIRMED",""], 173 ["0841:12Z","AWAITING INSCRIPTION",""], 174 ].map(([t,l,v])=>( 175 <div key={t} style={{fontFamily:"IBM Plex Mono", fontSize:10, color:BR.ink2, padding:"3px 0", borderBottom:`1px dotted ${BR.ink}22`}}> 176 <span style={{color:BR.mute}}>{t}</span> · {l} {v && <span style={{fontWeight:600}}>{v}</span>} 177 </div> 178 ))} 179 </div> 180 <div style={{marginTop:12, padding:10, background:BR.paper2, border:`1px dashed ${BR.ink}88`, fontFamily:"IBM Plex Mono", fontSize:10, color:BR.ink2, lineHeight:1.6}}> 181 SUSPICION OF INTERCEPTION · REPORT TO REGISTRAR IMMEDIATELY. KEYS ARE FORBIDDEN TO BE SPOKEN ALOUD ON OPEN CHANNELS PER §412.C. 182 </div> 183 </div> 184 </div> 185 </div> 186 <BRFooter/> 187 </BRPage> 188 ); 189 } 190 191 function OnbCertificate() { 192 return ( 193 <BRPage width={1280} minHeight={1800}> 194 <BRNav active="home" cartCount={0} onNav={()=>{}}/> 195 {/* Certificate headline */} 196 <div style={{padding:"40px 60px 24px", borderBottom:`3px solid ${BR.ink}`, position:"relative"}}> 197 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:3, color:BR.rust}}>CERTIFICATE OF ENROLLMENT · FORM 12 · COALITION REGISTRAR</div> 198 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:90, letterSpacing:-1, color:BR.ink, marginTop:10, textTransform:"uppercase", lineHeight:0.9}}>Welcome aboard,<br/>Commodore.</div> 199 <div style={{fontFamily:"Caveat", fontSize:44, color:BR.rust, marginTop:10}}>Orlan Veyr</div> 200 <div style={{position:"absolute", top:60, right:80, display:"flex", gap:14}}> 201 <BRStamp rotate={-7}>CLEARED</BRStamp> 202 <BRStamp rotate={6} color={BR.green}>PADDLE 04712</BRStamp> 203 </div> 204 </div> 205 {/* Next steps grid */} 206 <div style={{padding:"30px 60px 20px"}}> 207 <BRH n="12.01">Suggested first acts</BRH> 208 <div style={{display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:14}}> 209 {[ 210 {k:"01", t:"Tour the Catalog", d:"Browse 11,842 hulls on the block. Save ten to your dossier.", chip:"RECOMMENDED", rust:true}, 211 {k:"02", t:"Set bidding ceilings", d:"Establish automatic proxy-max by class so the Sale-Room can bid on your behalf.", chip:"OPTIONAL"}, 212 {k:"03", t:"Appoint a broker", d:"Accredited brokers can dispatch lots directly to your manifest.", chip:"OPTIONAL"}, 213 {k:"04", t:"Register your first hull", d:"If you already own vessels, enter them for servicing on the Bridge.", chip:"LATER"}, 214 {k:"05", t:"Fund the escrow box", d:"Pre-fund to pass Sale-Room proof-of-bond instantly.", chip:"LATER"}, 215 {k:"06", t:"Meet the desk", d:"Your sector desk is Ceres-II G-4. Say hello via Dispatch.", chip:"WARM"}, 216 ].map(s=>( 217 <div key={s.k} style={{border:`2px solid ${BR.ink}`, padding:14, background:BR.paper, position:"relative"}}> 218 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, color:BR.mute, letterSpacing:2}}>§{s.k}</div> 219 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:20, letterSpacing:1.5, marginTop:2, textTransform:"uppercase"}}>{s.t}</div> 220 <div style={{fontFamily:"IBM Plex Sans", fontSize:12, color:BR.ink2, marginTop:6, lineHeight:1.5}}>{s.d}</div> 221 <div style={{marginTop:10, display:"flex", justifyContent:"space-between", alignItems:"center"}}> 222 <BRChip rust={s.rust}>{s.chip}</BRChip> 223 <div style={{fontFamily:"IBM Plex Mono", fontSize:11, fontWeight:600}}>→</div> 224 </div> 225 </div> 226 ))} 227 </div> 228 </div> 229 {/* Your credentials block */} 230 <div style={{padding:"10px 60px 30px"}}> 231 <BRH n="12.02">Your standing particulars</BRH> 232 <div style={{display:"grid", gridTemplateColumns:"1fr 1fr 1fr 1fr", gap:14}}> 233 {[ 234 ["Paddle","04712"], 235 ["Bond tier","TIER-2 · BONDED"], 236 ["Sector desk","G-4 · CERES-II"], 237 ["Issued","2396.114.0847Z"], 238 ["Expires","2397.114"], 239 ["Class caps","UNLIMITED"], 240 ["Escrow balance","0 ℂ · UNFUNDED"], 241 ["Comms channel","STRATA-G4-47"], 242 ].map(([k,v])=>( 243 <div key={k} style={{border:`2px solid ${BR.ink}`, padding:"10px 12px"}}> 244 <div style={{fontFamily:"IBM Plex Mono", fontSize:9, letterSpacing:2, color:BR.mute, textTransform:"uppercase"}}>{k}</div> 245 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:16, marginTop:4, letterSpacing:1}}>{v}</div> 246 </div> 247 ))} 248 </div> 249 <div style={{marginTop:16, borderTop:`1px solid ${BR.ink}`, paddingTop:12, display:"flex", justifyContent:"space-between", fontFamily:"IBM Plex Mono", fontSize:10, color:BR.mute, letterSpacing:2}}> 250 <span>FILED 2396.114.0847Z · REGISTRAR VLK-2 · §12.01 APPLICABLE</span> 251 <span>KEEP THIS CERTIFICATE WITH YOUR DOSSIER</span> 252 </div> 253 </div> 254 <BRFooter/> 255 </BRPage> 256 ); 257 } 258 259 function OnbEmptyFleet() { 260 return ( 261 <BRPage width={1280} minHeight={1500}> 262 <BRNav active="home" cartCount={0} onNav={()=>{}}/> 263 <div style={{padding:"30px 60px"}}> 264 <div style={{borderBottom:`3px solid ${BR.ink}`, paddingBottom:10}}> 265 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:3, color:BR.mute}}>COMMODORE BRIDGE · FORM 22 · FIRST RUN</div> 266 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:52, letterSpacing:-0.5, textTransform:"uppercase"}}>An empty bridge is a quiet one.</div> 267 </div> 268 <div style={{display:"grid", gridTemplateColumns:"1fr 380px", gap:40, marginTop:28}}> 269 <div> 270 {/* Empty fleet table — drawn as hatched placeholder */} 271 <BRH n="22.00">Fleet register · 0 hulls</BRH> 272 <div style={{border:`2px solid ${BR.ink}`, padding:0, background:BR.paper2}}> 273 <div style={{display:"grid", gridTemplateColumns:"60px 1fr 120px 90px 90px 90px", borderBottom:`2px solid ${BR.ink}`, background:BR.ink, color:BR.paper}}> 274 {["#","NAME","CLASS","FUEL","HULL","STATUS"].map(h=>( 275 <div key={h} style={{padding:"8px 10px", fontFamily:"Oswald", fontWeight:700, fontSize:10, letterSpacing:2}}>{h}</div> 276 ))} 277 </div> 278 {/* Hatched empty rows */} 279 <div style={{height:360, background:`repeating-linear-gradient(135deg, transparent 0 10px, ${BR.ink}0a 10px 11px)`, display:"flex", alignItems:"center", justifyContent:"center", flexDirection:"column", padding:20}}> 280 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:32, letterSpacing:2, color:BR.ink, textTransform:"uppercase"}}>No hulls logged.</div> 281 <div style={{fontFamily:"IBM Plex Sans", fontSize:13, color:BR.ink2, marginTop:8, maxWidth:440, textAlign:"center", lineHeight:1.5}}> 282 This bridge awaits its first vessel. Acquire a hull from the Catalog, register one you already own, or accept a lot from a broker. 283 </div> 284 <div style={{marginTop:18, display:"flex", gap:10}}> 285 <div style={{padding:"10px 18px", background:BR.rust, color:BR.paper, fontFamily:"Oswald", fontWeight:700, fontSize:11, letterSpacing:3}}>BROWSE CATALOG →</div> 286 <div style={{padding:"10px 18px", border:`2px solid ${BR.ink}`, fontFamily:"Oswald", fontWeight:700, fontSize:11, letterSpacing:3}}>REGISTER OWNED HULL</div> 287 <div style={{padding:"10px 18px", border:`2px solid ${BR.ink}`, fontFamily:"Oswald", fontWeight:700, fontSize:11, letterSpacing:3}}>OPEN DISPATCH</div> 288 </div> 289 </div> 290 </div> 291 </div> 292 <div> 293 <div style={{border:`2px solid ${BR.ink}`, padding:14}}> 294 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, borderBottom:`1px solid ${BR.ink}`, paddingBottom:6, marginBottom:8}}>FROM THE DESK</div> 295 <div style={{fontFamily:"Caveat", fontSize:19, color:BR.ink, lineHeight:1.4}}> 296 "First hull is the hardest. Most commodores pick up a Vanta-class hauler before they move to anything bigger — forgiving on fuel, decent residuals. Ring the desk if you'd like a walk-through." 297 </div> 298 <div style={{marginTop:10, fontFamily:"IBM Plex Mono", fontSize:10, color:BR.mute, letterSpacing:2}}>— DESK LEAD · IMARI KEHL · G-4</div> 299 </div> 300 <div style={{border:`2px solid ${BR.ink}`, padding:14, marginTop:12, background:BR.paper2}}> 301 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, borderBottom:`1px solid ${BR.ink}`, paddingBottom:6, marginBottom:8}}>TODAY'S SHORTLIST</div> 302 {[ 303 ["VNT-CH-1044-BM","Vanta hauler","842 kℂ"], 304 ["KRV-IC-2849-AX","Karavel interceptor","1.24 Mℂ"], 305 ["OBS-EX-5519-TC","Obsidian explorer","2.08 Mℂ"], 306 ].map(([s,n,p])=>( 307 <div key={s} style={{display:"grid", gridTemplateColumns:"1fr auto", padding:"6px 0", borderBottom:`1px dotted ${BR.ink}22`, fontFamily:"IBM Plex Mono", fontSize:11}}> 308 <div><div style={{color:BR.mute, fontSize:9}}>{s}</div><div>{n}</div></div> 309 <div style={{fontWeight:600}}>{p}</div> 310 </div> 311 ))} 312 </div> 313 </div> 314 </div> 315 </div> 316 <BRFooter/> 317 </BRPage> 318 ); 319 } 320 321 Object.assign(window, { OnbSplash, OnbSignup, OnbVerify, OnbCertificate, OnbEmptyFleet });