/* global React */ /* Products — the centerpiece. Two products today, one AI. Each product gets a big alternating horizontal moment with a live-feeling mockup. */ // ---------- VSG Source: animated inbox + AI draft ---------- const SOURCE_MSGS = [ { f: "Falcon Steel", subj: "PO-22014 dispatch confirmation", body: "Confirming dispatch on the 12mm bar order. Tracking attached.", ai: true, time: "08:42" }, { f: "Pinnacle Plastics", subj: "Quote: HDPE 35t — Aug", body: "Pricing valid 14 days. Lead time 3 weeks ex-works.", ai: true, time: "07:18" }, { f: "Westcape Bearings", subj: "Lead time update — SKF 6205", body: "Stock arriving 22 Aug. Will hold 40 units.", ai: false, time: "Yesterday" }, { f: "Atlantic Fasteners", subj: "Re: outstanding statement", body: "Settled to date. Balance brought forward R 0.00.", ai: true, time: "Yesterday" }, ]; const DRAFT_TEXT = "Hi Mandla, thanks. Confirming PO-22014 on the 12mm bar — please ship to Bay 3, Epping. Our reference VSG-IN-44211. Cheers, Naledi."; function SourceMockup() { const [selected, setSelected] = React.useState(0); const [typed, setTyped] = React.useState(0); // typewriter draft React.useEffect(() => { setTyped(0); let i = 0; const id = setInterval(() => { i++; setTyped(i); if (i >= DRAFT_TEXT.length) clearInterval(id); }, 22); return () => clearInterval(id); }, [selected]); // auto-cycle which message is selected React.useEffect(() => { const id = setInterval(() => { setSelected((s) => (s + 1) % SOURCE_MSGS.length); }, 6500); return () => clearInterval(id); }, []); const msg = SOURCE_MSGS[selected]; return (
{/* sidebar */}
Inbox
{[ { l: "Suppliers", n: 24, active: true }, { l: "Quotes", n: 8 }, { l: "POs", n: 12 }, { l: "Disputes", n: 2 }, ].map((row, i) => (
{row.l} {row.n}
))}
ACE context
{["140 suppliers", "Pastel + Sage", "ZAR, USD, EUR"].map((c, i) => ( {c} ))}
{/* main */}
{/* list */}
Supplier email · 41
12 drafted by ACE
{SOURCE_MSGS.map((m, i) => { const active = i === selected; return ( ); })}
{/* detail */}
{msg.f}
{msg.subj}
{msg.time}
{msg.body}
{msg.ai && (
ACE draft Confidence 92%
{DRAFT_TEXT.slice(0, typed)} {typed < DRAFT_TEXT.length && ( )}
Send Edit Decline
)}
); } // ---------- VSG Pace: schedule grid ---------- function PaceMockup() { const [tick, setTick] = React.useState(0); React.useEffect(() => { const id = setInterval(() => setTick((t) => t + 1), 1100); return () => clearInterval(id); }, []); const lines = [ { name: "Line A · Bottling", days: [1, 1, 1, 1, 1] }, { name: "Line B · Labelling", days: [1, 1, "x", 2, 1] }, { name: "Line C · Cartoning", days: [0, 1, 2, 1, 1] }, { name: "Line D · Palletising", days: [1, 0, 1, 1, 1] }, ]; return (
Schedule · Week 32 · 2026
Bottling plant · Atlantis
Re-sequencing
{["Mon", "Tue", "Wed", "Thu", "Fri"].map((d) => ( {d} ))} {lines.map((row, i) => ( {row.name} {row.days.map((d, j) => { let bg = "transparent"; let bd = "1px solid var(--hairline)"; let label = ""; if (d === 1) { bg = "var(--ink-1)"; bd = "0"; } else if (d === 2) { bg = "var(--coral)"; bd = "0"; } else if (d === "x") { bg = "var(--paper-2)"; bd = "1px dashed var(--coral)"; label = "—"; } return (
{label}
); })} ))}
Risk detected
Caps shortage Wed
Pinnacle Plastics ETA pushed +3d. Line B re-sequenced to Thu.
Throughput · forecast
94.2% ▲ 2.1
vs. last week's plan.
); } // ---------- Product row ---------- function ProductRow({ id, idx, status, statusVariant, name, headline, emphasis, body, bullets, primaryCta, primaryHref, secondaryCta, onSecondary, mockup, reverse }) { return (
{`0${idx + 1} · ${name}`} {status}
{headline} {emphasis}

{body}

    {bullets.map((b, i) => ( ))}
{primaryCta} {secondaryCta && ( {secondaryCta} )}
{mockup}
); } function Products({ onBookDemo }) { return (
01 — Products Built products. Proven AI.

VSG Source is live with South African mid-market customers. The intelligence behind it — your context, your suppliers, your terminology — is the same engine we bring to every build.

} />
); } Object.assign(window, { Products, SourceMockup, PaceMockup });