// pages/home-sections.jsx — modular sections used by home (and reused by inner pages) // ─── trusted-by marquee ─── function MarqueeStrip() { const items = [ "REAL ESTATE AGENCIES", "LAW FIRMS", "MORTGAGE BROKERS", "MARKETING AGENCIES", "ACROSS AUSTRALIA" ]; return (
Trusted by
{[...items, ...items].map((it, i) => ( {it} ))}
); } // ─── section header ─── function SectionHeader({ eyebrow, title, sub, align = "left", action }) { return (
{eyebrow}

{title}

{action}
{sub && (

{sub}

)}
); } // ─── services preview (home) ─── function ServicesPreview() { const services = window.WHITEN_DATA.services; return (
Four services. One outcome: your team only does the work that compounds.} action={All services } />
{services.map((s, i) => ( ))}
); } function ServiceCard({ s, delay = 0 }) { return (
{s.num} {s.tag}

{s.name}

{s.blurb}

{s.tools.slice(0, 3).join(" · ")} See how it works
); } // ─── workflows preview (home): scrolling list ─── function WorkflowsPreview() { const wfs = window.WHITEN_DATA.workflows; const [filter, setFilter] = React.useState("all"); const cats = ["all", ...new Set(wfs.map(w => w.category))]; const shown = filter === "all" ? wfs : wfs.filter(w => w.category === filter); return (
A library of automations we've shipped, packaged so you can point at one and have it live in a fortnight.} action={Browse all 16 } />
{cats.map(c => ( ))} {shown.length} of {wfs.length}
{shown.slice(0, 8).map((w, i) => ( ))}

Not sure which one fits your business? Book a free 15-minute call — we'll tell you exactly which automation gives you the fastest return.

Book a free assessment
); } function WorkflowRow({ w, i, isLast }) { const [open, setOpen] = React.useState(false); return (
setOpen(true)} onMouseLeave={() => setOpen(false)} style={{ display: "grid", gridTemplateColumns: "60px 1.6fr 1fr 1.2fr 90px 110px 36px", alignItems: "center", gap: 24, padding: "20px 28px", background: open ? "color-mix(in oklab, var(--accent) 4%, transparent)" : "transparent", transition: "background .2s" }}> {w.num} {w.name} {w.category} {w.stack.join(" · ")} {w.time} {w.industry}
); } // ─── case studies preview ─── function CasesPreview() { const cases = window.WHITEN_DATA.cases.slice(0, 3); return (
Real teams, measurable hours back.} action={All case studies } />
{cases.map((c, i) => ( ))}
); } function CaseCard({ c, i }) { return (
{c.sector} {c.year}
{c.metric}
{c.metricLabel}
{c.client}
{c.headline}
); } // ─── how it works (3-step) ─── function HowItWorksPreview() { const steps = [ { n: "01", t: "Map", k: "1 week", desc: "We sit with your team for two afternoons and watch how the work actually moves. Then we draw it — the official process and the real one.", side: "audit" }, { n: "02", t: "Ship", k: "2–4 weeks", desc: "We build the first workflow end-to-end while you keep the lights on. You see weekly Looms; nothing goes live without your sign-off.", side: "build" }, { n: "03", t: "Quiet", k: "ongoing", desc: "The automation runs itself. We babysit it for 30 days, then hand over keys. Your team forgets the manual version ever existed.", side: "calm" } ]; return (
Three weeks. From "we keep meaning to" to "running, untouched."} action={Full process } />
{steps.map((s, i) => (
{s.n} {s.k}

{s.t}

{s.desc}

))}
); } function StepGlyph({ kind }) { // Simple geometric glyph per step if (kind === "audit") { return ( {[20, 60, 100, 140, 180].map((x, i) => ( ))} ); } if (kind === "build") { return ( {[0, 1, 2, 3].map(i => ( {i < 3 && } ))} ); } // calm return ( ); } // ─── pull quote ─── function PullQuote() { return (
What clients tell their peers

"They didn't sell us AI. They sold us back our Fridays — and quietly handed our ops director a tool she now refuses to give up."

Eira Halberd
COO, Halberd Capital · 80 staff
); } Object.assign(window, { MarqueeStrip, SectionHeader, ServicesPreview, ServiceCard, WorkflowsPreview, WorkflowRow, CasesPreview, CaseCard, HowItWorksPreview, PullQuote });