// Syntari v4 — Late sections: Process, Work, Slots, CTA, Footer // Editorial, calm, no aurora rings, no fake metrics. const { useEffect: useEff3, useRef: useRef3, useState: useState3 } = React; /* ─── Process — editorial, asymmetric ─── */ function Process() { const ref = useRef3(); useReveal(ref); const acts = [ { w: 'Start', k: 'Get in', d: 'We get inside your business. Read what you have, watch the funnel, talk to your customers. Output: one thing worth building.', }, { w: 'Middle', k: 'Build', d: 'Senior hands, on your data, shipping every day. Work goes live as it lands. You see it move.', }, { w: 'End', k: 'Hand it over', d: 'Playbook, training, shared channel. Your team owns it. We stay close for the first two quarters in case anything wobbles.', }, ]; return (
04 / Process

Most projects move in three beats. The length depends on the scope.

{acts.map((a, i) => (
{a.w}

{a.k}

{a.d}

))}
); } /* ─── Selected work — interactive ledger with live filters ─── */ function Work() { const ref = useRef3(); useReveal(ref); const [region, setRegion] = useState3('ALL'); const [expanded, setExpanded] = useState3(null); const rows = [ { region: 'US', sector: 'B2B Fintech', result: 'Pipeline system that finds and qualifies accounts', duration: '6 weeks', year: '2026', stack: ['Clay', 'Clearbit', 'Clay webhooks', 'HubSpot', 'Custom LLM scorer'], phases: [{ k: 'Discovery', w: 2 }, { k: 'Build', w: 3 }, { k: 'Handoff', w: 1 }], outcome: 'Outbound reply rate moved from 2.1% to 14%. Full numbers on call.', }, { region: 'BR', sector: 'Vertical SaaS', result: 'New-customer onboarding rebuilt end to end', duration: '5 weeks', year: '2026', stack: ['Next.js', 'Segment', 'Customer.io', 'Mixpanel', 'OpenAI'], phases: [{ k: 'Discovery', w: 2 }, { k: 'Build', w: 2 }, { k: 'Handoff', w: 1 }], outcome: 'Activation to first value reduced by 60%. Paid conversion up 2.3×.', }, { region: 'EU', sector: 'Healthtech', result: 'Attribution model that actually shows what is working', duration: '4 weeks', year: '2025', stack: ['BigQuery', 'dbt', 'Metabase', 'GA4', 'Stripe'], phases: [{ k: 'Discovery', w: 1 }, { k: 'Build', w: 2 }, { k: 'Handoff', w: 1 }], outcome: 'Killed three channels that weren\'t pulling weight. Reallocated $180k/mo.', }, { region: 'US', sector: 'DevTools', result: 'Self-serve growth. Signup to paid, measured and improved', duration: '6 weeks', year: '2025', stack: ['PostHog', 'Supabase', 'Stripe', 'Slack hooks', 'OpenAI'], phases: [{ k: 'Discovery', w: 2 }, { k: 'Build', w: 3 }, { k: 'Handoff', w: 1 }], outcome: 'Free-to-paid conversion tripled within two quarters of handoff.', }, { region: 'PT', sector: 'Climate', result: 'Sales operations automated so the team focuses on customers', duration: '5 weeks', year: '2025', stack: ['Salesforce', 'Zapier', 'Python agents', 'Retool'], phases: [{ k: 'Discovery', w: 2 }, { k: 'Build', w: 2 }, { k: 'Handoff', w: 1 }], outcome: 'Sales team reclaimed 14h/week. Deal cycle shortened by 22%.', }, { region: 'BR', sector: 'Fintech', result: 'Retention system that flags churn before it happens', duration: '6 weeks', year: '2026', stack: ['Snowflake', 'Hightouch', 'Customer.io', 'LLM-based outreach'], phases: [{ k: 'Discovery', w: 2 }, { k: 'Build', w: 3 }, { k: 'Handoff', w: 1 }], outcome: 'Net revenue retention up 12 points within one quarter.', }, ]; const regions = ['ALL', 'US', 'BR', 'EU', 'PT']; const filtered = region === 'ALL' ? rows : rows.filter(r => r.region === region); return (
05 / Selected work

Twelve systems shipped. Filter by geography.

{/* Filter pills */}
{regions.map(r => { const count = r === 'ALL' ? rows.length : rows.filter(x => x.region === r).length; const isOn = region === r; return ( ); })}
{/* Ledger */}
{/* Table head */}
REGION SECTOR SYSTEM DURATION
{filtered.length === 0 ? (
No systems in this region yet.
) : filtered.map((r, i) => { const isOpen = expanded === `${r.region}-${r.sector}`; const key = `${r.region}-${r.sector}`; return (
{/* Expanded detail */}
{/* Left col: phase timeline + outcome */}
ENGAGEMENT · {r.year}
{r.phases.map((p, j) => { const total = r.phases.reduce((a, x) => a + x.w, 0); const pct = (p.w / total) * 100; const bg = j === 0 ? 'var(--line-2)' : j === 1 ? 'var(--accent-dim)' : 'var(--accent)'; return (
{p.k.toUpperCase()} · {p.w}W
); })}
{r.outcome}
{/* Right col: stack */}
STACK
{r.stack.map((s, j) => ( {s} ))}
); })}
{/* Honest note */}
CLIENT NAMES & FULL METRICS · SHARED ON DISCOVERY CALLS Request full case deck →
); } /* ─── Slots — editorial, no aurora ring ─── */ function Slots() { const ref = useRef3(); useReveal(ref); const q = getQuarterCopy(); return (
05 / Availability

Two slots open this quarter.
Three per quarter, ever.

We work in small numbers on purpose. Three projects per quarter. The first call costs you an hour, and by the end of it you know whether there is something worth building.

Request an intro Or email us directly →
{/* Header */}
{q.quarterLabel} · 13 WEEKS
2 OPEN · 1 TAKEN
{/* Week scale */}
{Array.from({ length: 13 }).map((_, i) => (
W{String(i + 1).padStart(2, '0')}
))}
{/* Lanes */} {[ { label: 'Slot 01', status: 'taken', start: 0, end: 12, co: 'Discovery in progress' }, { label: 'Slot 02', status: 'open', start: 3, end: 12, co: 'Discovery calls this week' }, { label: 'Slot 03', status: 'open', start: 6, end: 12, co: q.kickoffCopy }, ].map((s, i) => { const cellW = `${(s.end - s.start + 1) * (100/13)}%`; const leftOff = `${s.start * (100/13)}%`; const taken = s.status === 'taken'; return (
{s.label.toUpperCase().replace(' ', ' · ')}
{taken ? '● TAKEN' : '○ OPEN'}
{/* 13 week ticks */}
{Array.from({ length: 13 }).map((_, j) => (
))}
{/* The actual slot bar */}
{s.co.toUpperCase()}
); })}
{q.nextCohortCopy.toUpperCase()} EACH SLOT IS ONE PROJECT · SCOPE TO HANDOVER · INSIDE YOUR COMPANY
); } /* ─── Final CTA — quieter ─── */ function FinalCTA() { const ref = useRef3(); useReveal(ref); return (

Build the system.
Keep the keys.

If your next hire is someone who gets growth, AI, and product, talk to us first. One hour, no slides.

Book a discovery call {EMAIL}
); } /* ─── Footer ─── */ function Footer() { return ( ); } // Work component (Selected work / 05) was retired — case studies coming later. // Tools stack and demo switcher in WhatWeShip carry the proof for now. Object.assign(window, { Process, Slots, FinalCTA, Footer });