// mix-img-hero.jsx — Interactive hero block for the A×C variant. // Instrument toggle (HPLC / GC / MS), hover-reveal modules with live // spec readouts, continuously animated signal-trace strip. // ─── Per-instrument data ──────────────────────────────────────────── const HERO_INSTRUMENTS = { LC: { code: 'LC', layout: 'stack', badge: 'Plate 01', title: 'HPLC · UPLC stack', note: 'Stuttgart, DE · Mar 2026 · Waters Acquity H-Class lot', height: 77, width: 24, cx: 32, modules: [ { id: 'tr', y: 5, h: 10, name: 'Solvent tray', pn: 'G7104', spec: '4× 1 L mobile phase · degas vacuum 0.85 bar · A/B/C/D' }, { id: 'dg', y: 15, h: 8, name: 'Online degasser', pn: 'G7103', spec: 'Membrane vacuum · 4-channel · 95% nominal efficiency' }, { id: 'pm', y: 23, h: 13, name: 'Binary pump', pn: 'G7120', spec: 'Max 1300 bar · 0.001–10 mL/min · pulsation < 0.5%', flag: 'PASS' }, { id: 'as', y: 36, h: 11, name: 'Autosampler', pn: 'G7129', spec: '108 vials · 0.1–100 μL · carry-over < 0.0005% (BSA test)' }, { id: 'co', y: 47, h: 18, name: 'Column compartment', pn: 'G7116', spec: '4-column switching · 4–110 °C · ±0.1 °C stability' }, { id: 'dd', y: 65, h: 12, name: 'DAD detector', pn: 'G7117', spec: '190–640 nm · lamp at 78% rem. on this unit · slit 1/2/4/8 nm', flag: 'COND' }, ], readout: [ { k: 'COL. PRESSURE', v: '412 bar', d: '−0.4% vs spec', ok: 1 }, { k: 'FLOW', v: '0.300 mL/min', d: 'set', ok: 1 }, { k: 'DET. LAMP', v: '78%', d: 'remaining', ok: 0 }, { k: 'COL. TEMP.', v: '40.02 °C', d: '±0.02', ok: 1 }, ], // shape of signal trace (peaks visible) traceSeed: 7, }, GC: { code: 'GC', layout: 'bench', badge: 'Plate 01', title: 'GC · GC-MS bench', note: 'Bonn, DE · Feb 2026 · Agilent 7890B + 5977 MSD', dim: '930 MM', modules: [ { id: 'ov', name: 'Column oven', shortName: 'COL. OVEN', pn: 'OVN-12', spec: '−86 °C ramp · 4 °C/s · ±0.01 °C · 30m · 0.25 mm · 0.25 μm', flag: 'PASS', hit: { x: 8, y: 32, w: 48, h: 44 }, anchor: { x: 14, y: 56 }, labelY: 40 }, { id: 'cl', name: 'Capillary col. DB-5MS', shortName: 'DB-5MS COL.', pn: 'DB-5MS', spec: 'Phenyl-methyl 5% · 30 m · max 350 °C · 2400 plates/m', hit: { x: 22, y: 45, w: 20, h: 20 }, anchor: { x: 24, y: 50 }, labelY: 52 }, { id: 'gs', name: 'Carrier gas + EPC', shortName: 'GAS · EPC', pn: 'EPC-1', spec: 'He / H₂ / N₂ · 0–150 psi · electronic press. control', hit: { x: 25.5, y: 22, w: 11, h: 10 }, anchor: { x: 31, y: 27 }, labelY: 14 }, { id: 'in', name: 'Split/splitless inj.', shortName: 'SSL INJECTOR', pn: 'SSL-A', spec: '50–450 °C · split 1:1–1:7500 · septa worn this unit', flag: 'COND', hit: { x: 37.5, y: 22, w: 8.5, h: 10 }, anchor: { x: 41, y: 27 }, labelY: 22 }, { id: 'fd', name: 'FID detector', shortName: 'FID DETECTOR', pn: 'FID-1', spec: 'H₂/air flame · 400 °C · 5 pg C/s · noise 1·10⁻¹⁴ A', hit: { x: 47, y: 18, w: 7, h: 14 }, anchor: { x: 50, y: 22 }, labelY: 30 }, { id: 'ms', name: '5977 MSD', shortName: '5977 MSD', pn: 'MSD-77', spec: 'EI 70 eV · m/z 1.6–1050 · 12 500 amu/s · turbo 67 L/s', hit: { x: 54, y: 36, w: 14, h: 34 }, anchor: { x: 61, y: 38 }, labelY: 66 }, ], readout: [ { k: 'OVEN RAMP', v: '+0.008 °C/s', d: 'tracking', ok: 1 }, { k: 'INLET PRES.', v: '14.7 psi', d: 'nominal', ok: 1 }, { k: 'SEPTA CYCLES', v: '8 213', d: 'replace', ok: 0 }, { k: 'FID BASELINE', v: '0.6 pA', d: 'clean', ok: 1 }, ], traceSeed: 13, }, MS: { code: 'MS', layout: 'bench', badge: 'Plate 01', title: 'Mass spectrometer', note: 'Hong Kong · Jan 2026 · Thermo Q Exactive · EquipNet lot', dim: '1310 MM', modules: [ { id: 'sr', name: 'HESI ion source', shortName: 'HESI SOURCE', pn: 'HESI-II', spec: 'ESI/APCI · sheath 35 / aux 10 / sweep 0 · ±5 kV', hit: { x: 3, y: 36, w: 12, h: 18 }, anchor: { x: 14, y: 42 }, labelY: 14 }, { id: 'sl', name: 'S-lens · ion funnel', shortName: 'S-LENS', pn: 'S-LENS', spec: 'RF amp 90% · transmission 0.92 vs new this unit', hit: { x: 15, y: 38, w: 5, h: 14 }, anchor: { x: 19, y: 42 }, labelY: 22 }, { id: 'q1', name: 'Quadrupole · Q1', shortName: 'QUAD Q1', pn: 'Q1-100', spec: 'm/z 50–2000 · iso. 0.4 amu · 10⁻⁶ mbar', flag: 'PASS', hit: { x: 20, y: 38, w: 9, h: 14 }, anchor: { x: 28, y: 42 }, labelY: 30 }, { id: 'hd', name: 'HCD collision cell', shortName: 'HCD CELL', pn: 'HCD-3', spec: '0–250 eV · N₂ activation gas · 30 ms dwell', hit: { x: 29, y: 40, w: 7, h: 10 }, anchor: { x: 35, y: 42 }, labelY: 38 }, { id: 'or', name: 'Orbitrap · C-trap', shortName: 'ORBITRAP', pn: 'ORB-Q', spec: '140 000 res. @ m/z 200 · ±2 ppm mass accuracy', flag: 'PASS', hit: { x: 36, y: 35, w: 17, h: 21 }, anchor: { x: 44, y: 35 }, labelY: 48 }, { id: 'pm', name: 'Turbo + rough pumps', shortName: 'TURBO + ROUGH', pn: 'TMP-310', spec: '310 L/s · 2× backing scroll · vac log OK', hit: { x: 14, y: 62, w: 46, h: 16 }, anchor: { x: 36, y: 64 }, labelY: 72 }, { id: 'dt', name: 'Electron multiplier', shortName: 'EM DETECTOR', pn: 'EM-4', spec: '8 channels · gain 1·10⁵ · noise 0.2 cps', hit: { x: 53, y: 40, w: 8, h: 10 }, anchor: { x: 60, y: 42 }, labelY: 58 }, ], readout: [ { k: 'VACUUM', v: '1.4·10⁻⁹ mbar', d: 'analyser', ok: 1 }, { k: 'MASS ACC.', v: '0.8 ppm', d: 'spec ≤ 2', ok: 1 }, { k: 'RESOLUTION', v: '137 200', d: '@ m/z 200', ok: 1 }, { k: 'SOURCE I', v: '24 μA', d: 'ESI(+)', ok: 1 }, ], traceSeed: 21, }, }; // ─── Animated trace ──────────────────────────────────────────────── // Two repeated path segments translating left produce a seamless loop. function LiveTrace({ seed, height = 120, color = 'oklch(0.18 0.02 240)', accent = 'oklch(0.62 0.16 55)', speed = 24 }) { const W = 1240; // width of one tile const POINTS = 400; const path = React.useMemo(() => { let s = (seed >>> 0) || 1; const rand = () => { s |= 0; s = (s + 0x6D2B79F5) | 0; let t = Math.imul(s ^ (s >>> 15), 1 | s); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; const ys = []; let y = height / 2; // baseline noise for (let i = 0; i < POINTS; i++) { y += (rand() - 0.5) * height * 0.05; y = Math.max(height * 0.18, Math.min(height * 0.82, y)); ys.push(y); } // place ~6 peaks (chromatogram-style) const peakAt = [0.10, 0.22, 0.37, 0.55, 0.72, 0.88]; for (const p of peakAt) { const center = Math.floor(p * POINTS); const w = Math.floor(POINTS * (0.012 + rand() * 0.02)); const amp = height * (0.30 + rand() * 0.45); for (let k = -w; k <= w; k++) { const idx = center + k; if (idx < 0 || idx >= POINTS) continue; const env = Math.exp(-(k * k) / (w * w * 0.4)); ys[idx] = Math.max(height * 0.05, ys[idx] - amp * env); } } return ys.map((yy, i) => `${i === 0 ? 'M' : 'L'}${((i / (POINTS - 1)) * W).toFixed(1)} ${yy.toFixed(1)}`).join(' '); }, [seed, height]); return (
{/* fixed grid */} {/* scrolling trace (double-tile) */}
{/* leading-edge cursor */}
● LIVE
baseline · 0.00 mV
); } // ─── Interactive instrument plate ────────────────────────────────── // Dispatcher: LC uses the vertical-stack rendering; GC and MS use the // bench rendering (horizontal benchtop with freeform hot-spots). function InstrumentPlate({ data, active, setActive }) { if (data.layout === 'bench') return ; return ; } function StackPlate({ data, active, setActive }) { const ink = 'oklch(0.18 0.02 240)'; const dim = 'oklch(0.50 0.015 240)'; const amber = 'oklch(0.62 0.16 55)'; const paper = 'oklch(0.94 0.012 78)'; const fill = 'oklch(0.91 0.012 78)'; const W = data.width, CX = data.cx; const x0 = CX - W / 2; return ( {/* left dim line · height annotation */} {data.code === 'LC' ? '1820 MM' : data.code === 'GC' ? '1240 MM' : '2010 MM'} {/* modules */} {data.modules.map((m) => { const isActive = active === m.id; const stroke = isActive ? amber : ink; const sw = isActive ? 0.9 : 0.5; return ( setActive(m.id)} onMouseLeave={() => setActive(null)} style={{ cursor: 'pointer' }}> {/* invisible hover hit area */} {/* main rect */} {/* inner frame */} {/* status pip */} {/* mini display */} {/* leader line */} {/* label */} {m.name.toUpperCase()} {m.pn} {/* flag */} {m.flag && ( {m.flag} )} ); })} {/* base */} ); } // ─── Bench plate (horizontal benchtop instruments) ───────────────── const BENCH_C = { ink: 'oklch(0.18 0.02 240)', dim: 'oklch(0.50 0.015 240)', amber: 'oklch(0.62 0.16 55)', paper: 'oklch(0.94 0.012 78)', fill: 'oklch(0.91 0.012 78)', paperLite: 'oklch(0.96 0.010 78)', green: 'oklch(0.45 0.14 145)', mono: 'IBM Plex Mono, monospace', }; function BenchPlate({ data, active, setActive }) { const c = BENCH_C; const Artwork = data.code === 'GC' ? GCArtwork : MSArtwork; const TOP_PAD = 30; return ( {/* artwork shifted down so labels fit at top */} {/* labels + leaders + hit zones */} {data.modules.map((m, idx) => ( ))} ); } function BenchRegion({ m, idx, total, active, setActive, c, topPad }) { const isActive = active === m.id; // Distribute labels across the full width with even margins. const innerL = 4, innerR = 96; const colW = (innerR - innerL) / total; const cx = innerL + (idx + 0.5) * colW; // Single descending staircase: each label one step further right + lower. // (Modules are pre-sorted in HERO_INSTRUMENTS to produce the visual order // the user asked for.) Total descent ~ (total-1) * step <= TOP_PAD. const step = total <= 6 ? 3.0 : 2.6; const yOff = idx * step; const tagY = 2.0 + yOff; const nameY = 5.6 + yOff; const pnY = 8.2 + yOff; const leaderTop = 9.4 + yOff; const hitY = m.hit.y + topPad; const aY = m.anchor.y + topPad; const points = `${cx},${leaderTop} ${cx},${Math.min(leaderTop + 1.2, aY - 0.5)} ${m.anchor.x},${aY - 0.5} ${m.anchor.x},${aY}`; const lineColor = isActive ? c.amber : c.dim; const flagColor = m.flag === 'PASS' ? c.green : c.amber; const name = (m.shortName || m.name).toUpperCase(); const nameFs = total <= 6 ? 2.3 : 2.0; return ( setActive(m.id)} onMouseLeave={() => setActive(null)} style={{ cursor: 'pointer' }}> {/* hit area on artwork */} {/* leader */} {/* tag number — small monospace badge */} {String(idx + 1).padStart(2, '0')} {/* flag chip on the right of the tag */} {m.flag && ( {m.flag} )} {/* name */} {name} {/* pn */} {m.pn} ); } function GCArtwork({ c }) { return ( {/* bench surface line */} {/* ── GC body (oven) ─────────────────────────────────────── */} {/* outer door inset */} {/* glass window */} {/* coiled capillary column (concentric rings) */} {[3, 5, 7, 9].map(r => )} {/* door handle */} {/* hinges */} {/* front status panel */} RUN {/* ── Autosampler tower ──────────────────────────────────── */} {/* vial tray atop tower */} {[11.4, 13.5, 15.6, 17.7, 19.8, 21.9, 24].map((x) => ( ))} {/* arm + needle */} {/* ── EPC (carrier gas + pressure control) ───────────────── */} {[24.6, 25.7, 27, 28.3, 29.4].map((a, i) => ( ))} PSI {/* ── SSL injector ───────────────────────────────────────── */} {/* ── FID detector with chimney ──────────────────────────── */} {/* ── MSD (5977) attached right ──────────────────────────── */} {/* transfer line connecting GC oven to MSD */} {/* top display strip */} 5977 {/* vacuum gauge */} mbar {/* analyzer chamber outline */} {/* MSD handle */} ); } function MSArtwork({ c }) { return ( {/* bench surface */} {/* ── Main vacuum housing ────────────────────────────────── */} {/* model strip */} Q EXACTIVE · ORBITRAP {/* ── HESI source (sticks out left) ──────────────────────── */} {/* spray plume */} {/* nebuliser gas inlet (sheath) */} HV {/* ── S-lens / ion funnel ────────────────────────────────── */} {[40, 42, 44, 46, 48, 50].map((y) => ( ))} {/* ── Q1 quadrupole ──────────────────────────────────────── */} {[40, 43, 46, 49].map((y) => ( ))} {/* ── HCD collision cell ─────────────────────────────────── */} {[42, 44, 46, 48].map((y) => )} HCD {/* ── Orbitrap analyzer ──────────────────────────────────── */} {/* outer barrel ellipses */} {/* spindle electrode */} {/* resolution note inside */} 140K @ m/z 200 {/* ── Electron multiplier detector ───────────────────────── */} {/* dynode angles */} {[42, 44, 46, 48].map((y, i) => ( ))} {/* ion beam path (dashed amber) */} {/* ── Vacuum / pump section ──────────────────────────────── */} {/* turbopump 1 */} {[0, 60, 120, 180, 240, 300].map((deg) => { const r = 4.2, rad = deg * Math.PI / 180; return ; })} {/* turbopump 2 */} {[0, 60, 120, 180, 240, 300].map((deg) => { const r = 4.2, rad = deg * Math.PI / 180; return ; })} {/* roughing (scroll) pump */} {/* pump → chamber pipes */} ); } // ─── Spec readout card ───────────────────────────────────────────── function SpecCard({ data, active }) { const ink = 'oklch(0.18 0.02 240)'; const dim = 'oklch(0.50 0.015 240)'; const amber = 'oklch(0.62 0.16 55)'; const paper = 'oklch(0.97 0.008 85)'; const rule = 'oklch(0.80 0.01 240)'; const red = 'oklch(0.55 0.20 25)'; const green = 'oklch(0.45 0.14 145)'; const mono = "'IBM Plex Mono', ui-monospace, monospace"; const serif= "'IBM Plex Serif', Georgia, serif"; const mod = data.modules.find(m => m.id === active); return (
{mod ? 'Module · selected' : 'Live readout'} {mod ? mod.pn : data.code}
{mod ? ( <>
{mod.name}
{mod.pn}
Specification
{mod.spec}
{mod.flag && (
{mod.flag === 'PASS' ? 'PASS · this unit' : 'CONDITIONAL · this unit'}
)} ) : ( <>
{data.readout.map((r, i) => (
{r.k}
{r.v}
{r.d}
))}
Hover any module → spec sheet, part number, this-unit status.
)}
); } // ─── The hero block ──────────────────────────────────────────────── function MixHero({ inst, setInst }) { const t = window.TOKENS, C = window.CONTENT; const W = window.Wordmark, LR = window.LabelRule; const [active, setActive] = React.useState(null); const data = HERO_INSTRUMENTS[inst]; const paper = 'oklch(0.97 0.008 85)'; const paper2 = 'oklch(0.94 0.012 78)'; const ink = 'oklch(0.18 0.02 240)'; const inkSoft= 'oklch(0.32 0.02 240)'; const dim = 'oklch(0.50 0.015 240)'; const rule = 'oklch(0.80 0.01 240)'; const amber = 'oklch(0.74 0.16 60)'; const amberDeep = 'oklch(0.62 0.16 55)'; const meta = (extra) => ({ fontFamily: t.mono, fontSize: 11, letterSpacing: '0.15em', textTransform: 'uppercase', color: dim, ...extra, }); const TogglePill = ({ id, label }) => { const on = inst === id; return ( ); }; return (
Subject of report

We test
the lab before
you wire
the money.

Sigma Tech inspects pre-owned laboratory instruments at the seller's site — auction lots, surplus, direct sale — against the OEM specification, and hands you a signed report before the wire transfer clears.

{/* live read-out moved into SpecCard on the right column */}
{/* RIGHT — instrument display (now positioned for spec-card overlap) */}
{/* toggle */}
{data.badge} · click → hover modules
{/* corner ticks */} {['tl','tr','bl','br'].map(c => (
))} {/* top label strip */}
{data.title} {data.code} · 1:14 scale
{/* plate — modules pushed left within the frame so labels (which extend to the right of each module) have room to render in full. */}
{/* bottom note */}
{data.note} {active ? `Sel. ${active.toUpperCase()}` : 'Sel. —'}
{/* spec card — only when hovering a module */} {active && (
)}
{/* full-width live trace */}
FIG. 2 · {data.code === 'LC' ? 'DAD detector' : data.code === 'GC' ? 'FID trace' : 'XIC chromatogram'} · this unit · pre-recondition ◀ scroll · 24 s / division
); } window.MixHero = MixHero; window.HERO_INSTRUMENTS = HERO_INSTRUMENTS; // ─── Brief / application form ────────────────────────────────────── function MixBriefForm() { const t = window.TOKENS, C = window.CONTENT; const paper = 'oklch(0.97 0.008 85)'; const paper2 = 'oklch(0.94 0.012 78)'; const ink = 'oklch(0.18 0.02 240)'; const inkSoft= 'oklch(0.32 0.02 240)'; const dim = 'oklch(0.50 0.015 240)'; const rule = 'oklch(0.80 0.01 240)'; const amber = 'oklch(0.74 0.16 60)'; const amberDeep = 'oklch(0.62 0.16 55)'; const green = 'oklch(0.45 0.14 145)'; const [form, setForm] = React.useState({ cls: 'LC', vendor: '', source: 'Bid', listing: '', ask: '', date: '', email: '', notes: '', }); const [sent, setSent] = React.useState(false); const [ref, setRef] = React.useState(''); const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value })); const submit = (e) => { e.preventDefault(); const n = String(2600 + Math.floor(Math.random() * 99)).padStart(4, '0'); setRef('R-' + n); setSent(true); }; const labelStyle = { fontFamily: t.mono, fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: dim, display: 'block', marginBottom: 6, }; const fieldStyle = { width: '100%', boxSizing: 'border-box', fontFamily: t.mono, fontSize: 14, color: ink, background: 'transparent', border: 'none', outline: 'none', padding: '10px 0 8px', borderBottom: `1.5px solid ${ink}`, }; const selectStyle = { ...fieldStyle, appearance: 'none', WebkitAppearance: 'none', cursor: 'pointer', paddingRight: 22 }; if (sent) { return (
BRIEF · RECEIVED
Acknowledgement

Brief filed as {ref}. Inspector replies within one HK working day.

Acknowledgement sent to {form.email || 'your inbox'}. If the lot is time-bound (auction close, broker hold), call the office directly — brief number {ref} ready to hand.

Mail the office  →
); } return (
Form ST-01 · Brief intake
Section A — Subject of inspection
▾
{['Bid', 'EquipNet', 'Surplus', 'Direct', 'Other'].map((opt) => ( ))}
Section B — Buyer of record