// Direction 3 — "Before / After" // Split-screen treatment. The left half is visually "before" (chaotic, // muted, crossed out); the right is "after" (calm, ordered, accented). // Uses the navy as background with a warm bone accent band. function DirBeforeAfter({ hero }) { const HeroEl = hero || ; return (
{HeroEl}
); } function BANav() { return ( ); } const linkSty3 = { cursor: 'pointer', textDecoration: 'none', color: 'inherit', fontWeight: 500 }; // ── Hero — split screen ────────────────────────────────────── function BAHero() { const BEFORE_IMG = 'https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=1600&q=80&auto=format&fit=crop'; const AFTER_IMG = 'https://images.unsplash.com/photo-1531482615713-2afd69097998?w=1600&q=80&auto=format&fit=crop'; return (
{/* BEFORE */}
{/* duotone photo layer */}
); } function BATrust() { return (
); } function BASectionHeader({ kicker, title, sub }) { return (
{kicker}

{title}

{sub &&

{sub}

}
); } // ── Problem ────────────────────────────────────────────────── function BAProblem() { return (
Your business is slowed down by manual work.} />

Most growing businesses rely on manual processes to run critical operations. Data gets entered multiple times. Reports take hours to prepare. Teams chase tasks instead of staying ahead.

It works, but it's inefficient, expensive, and it doesn't scale. As your business grows, these inefficiencies only get worse.

); } // ── Solution ───────────────────────────────────────────────── function BASolution() { const items = [ { num: '01', label: 'Capture', before: { tag: 'Monthly invoice run', text: 'A 100-page combined PDF lands in an inbox. Someone spends the day splitting it and reading each invoice to find the client name.' }, after: { tag: 'Monthly invoice run', text: 'The PDF is dropped into a folder. Pages split, client and amount extracted, filed as individual records — ready to match.' }, }, { num: '02', label: 'Connect', before: { tag: 'Matching & routing', text: 'A staffer cross-references each invoice against a spreadsheet of contacts, looking up the right email for each client and product line.' }, after: { tag: 'Matching & routing', text: 'Layered rules match every invoice to its recipient — client + product first, then client, then billing contact. No manual lookup.' }, }, { num: '03', label: 'Trigger', before: { tag: 'Daily exception handling', text: 'The ops team pulls a CSV at 10am, scans for overdue deliveries, and types each one into the ticket system until lunch.' }, after: { tag: 'Daily exception handling', text: 'Overdue shipments flagged overnight. Tickets created, categorised by carrier and region, waiting when the team logs in.' }, }, { num: '04', label: 'Validate', before: { tag: 'After the fact', text: 'A misrouted invoice reaches the wrong client. Duplicate tickets pile up. Nobody can say who touched what, or when.' }, after: { tag: 'Before it ships', text: 'Email addresses validated, duplicates blocked, a full daily audit trail written — every step tracked, every exception visible.' }, }, ]; return (
Automate the work that shouldn't be manual.} sub="We transform manual, time-consuming processes into automated workflows that run in the background — using your existing Microsoft 365 environment." />
{items.map((it) => ( ))}
); } // Before/After step card — two stacked panels (bone → navy) with a shared timestamp. function BABAStep({ num, label, before, after }) { return (
{/* Card header */}
{num}
{label}
{/* BEFORE */}
Before {before.tag}
{before.text}
{/* AFTER */}
After {after.tag}
{after.text}
); } // ─── Station demos ────────────────────────────────────────── function DemoCapture() { // An email card slides in, then a row drops into a table below. return (
O
Invoice #4812 — Acme Co.
3 attachments · $4,820
Invoice log●●●
#4810 — Bravo$2.1k
#4812 — Acme$4.8k
); } function DemoConnect() { // Three app chips with lines drawing between them. const Chip = ({ x, y, label, color = '#fff', bg = AX.navy }) => (
{label}
); return (
); } function DemoTrigger() { // Clock sweeps, button depresses, "sent" chip appears. return (
Send approval
SENT · LOGGED
); } function DemoValidate() { // Self-ticking checklist. const items = ['Amount matches PO', 'Tax code valid', 'Approver assigned', 'Logged to audit']; return (
{items.map((t, i) => (
{t}
))}
); } // ── Benefits — tile grid with big numbers ──────────────────── function BABenefits() { const items = [ { k: 'Save Time', big: '10+ hrs', unit: '/ week recovered', body: 'Tasks that take hours are completed in minutes, often before the day even starts.' }, { k: 'Reduce Costs', big: '40%', unit: 'admin overhead cut', body: 'Free up your team from low-value admin and redeploy them to revenue-generating work.' }, { k: 'Eliminate Errors', big: '99%', unit: 'accuracy achieved', body: 'Remove human error with consistent, system-driven execution.' }, { k: 'Scale Without Hiring', big: '2–3×', unit: 'volume, same team', body: 'Handle more volume without increasing headcount or complexity.' }, ]; return (
The Benefits

What this means for your business.

{items.map((it, i) => (
{it.big}
{it.unit}
{it.k}
{it.body}
))}
* Indicative outcomes across recent engagements.
); } // ── Proof ──────────────────────────────────────────────────── function BAProof() { return (
Real results from automation.} sub="Automation isn't theoretical — it delivers measurable results quickly." />
); } // ── Process ────────────────────────────────────────────────── function BAProcess() { const steps = [ { n: '01', t: 'Identify Opportunities', b: 'We assess your business to uncover manual processes and inefficiencies.' }, { n: '02', t: 'Design the Automation', b: 'We map out workflows based on your existing systems and business rules.' }, { n: '03', t: 'Implement & Optimise', b: 'We deploy automation quickly and refine it to maximise results.' }, ]; return (
A simple, low-risk process.} sub="Most businesses see an immediate impact." />
{steps.map((s, i) => (
{s.n}
{s.t}
{s.b}
{i < steps.length - 1 && (
{Icon.arrow(AX.teal)}
)} ))}
); } // ── ROI ────────────────────────────────────────────────────── function BAROI() { return (
Quantify what you're losing.} sub="Slide the inputs to reflect your business. We'll show you what automation could unlock." />
); } // ── Why ────────────────────────────────────────────────────── function BAWhy() { const items = [ { t: 'Built on your existing systems', s: 'Microsoft 365 — no rip-and-replace' }, { t: 'Fast implementation', s: 'Minimal disruption to your team' }, { t: 'Clear return on investment', s: 'Measured in hours saved and errors cut' }, { t: 'Full visibility and control', s: 'Reporting and audit trails on every flow' }, ]; return (
Built for speed,
simplicity, and ROI.} />
{items.map((it, i) => (
{Icon.check(AX.teal)}
{it.t}
{it.s}
))}
This isn't about replacing your systems. It's about making them work properly.
Book a 30-minute review {Icon.arrow('#fff')}
); } // ── CTA ────────────────────────────────────────────────────── function BACTA() { return (
Next step

Discover where you're losing time — and how to fix it.

In a short 30-minute session, we'll identify where automation can save you hours every week. No obligation. Just practical insights you can act on.

); } window.DirBeforeAfter = DirBeforeAfter; window.BAHero = BAHero;