// Site sections — trust strip, services, pillars, process, CTA, footer. // ───────────────────────────────────────────────────────────────────────── // Trust strip // ───────────────────────────────────────────────────────────────────────── function TrustStrip() { const isMobile = window.useIsMobile ? useIsMobile() : false; // Brand-evocative wordmark approximations. Each uses font weight + tracking // + a muted brand-aligned color to nod toward the company's real logo // without literally reproducing it. Colors are picked to sit on both bone // (light) and ink (dark) backgrounds. const logos = [ // Grill'd — heavy rounded warm-red, lowercase, signature apostrophe accent { key: 'grilld', name: <>grill’d, style: { fontWeight: 900, letterSpacing: '-0.045em', fontSize: 22, color: '#a83a2a', textTransform: 'lowercase', }, }, // Kokoblack — minimal lowercase sans, wide tracking, light weight { key: 'kokoblack', name: 'kokoblack', style: { fontWeight: 400, letterSpacing: '0.12em', fontSize: 14, textTransform: 'lowercase', }, }, // WSP — heavy uppercase red { key: 'wsp', name: 'WSP', style: { fontWeight: 900, letterSpacing: '-0.02em', fontSize: 24, color: '#d6261d', }, }, // AHPRA — clean uppercase, regulatory navy, wide tracking { key: 'ahpra', name: 'AHPRA', style: { fontWeight: 600, letterSpacing: '0.18em', fontSize: 15, color: '#2a6b8e', }, }, // UNOPS — clean uppercase UN-blue { key: 'unops', name: 'UNOPS', style: { fontWeight: 700, letterSpacing: '0.08em', fontSize: 17, color: '#5b92e5', }, }, // Genus — modern minimal sans, capitalised { key: 'genus', name: 'Genus', style: { fontWeight: 500, letterSpacing: '0.02em', fontSize: 18, }, }, ]; return (
trusted by teams globally
{logos.map(l => ( {l.name} ))}
); } // ───────────────────────────────────────────────────────────────────────── // Services grid // ───────────────────────────────────────────────────────────────────────── const SERVICES = [ { n: '01', name: 'AI & Automation', desc: 'Custom AI assistants, document intelligence, and automation that takes repetitive work off your team\'s plate.', proof: 'avg 60% time saved on triage', }, { n: '02', name: 'Custom Software', desc: 'Web apps, internal tools, and integrations engineered to fit your business — not the other way around.', proof: 'shipped in weeks, not quarters', }, { n: '03', name: 'Software as a Service', desc: 'Fully managed software, built and run by us — hosting, security, and compliance handled as part of the service.', proof: '99.98% uptime, audited', }, { n: '04', name: 'Integrations', desc: 'Connect CRM, accounting, marketing, and custom apps so data flows automatically — nobody re-keys.', proof: '40+ integrations live in production', }, { n: '05', name: 'Data & Analytics', desc: 'Pipelines and dashboards that turn scattered data into the answers leadership actually needs.', proof: 'from raw to read in 2 weeks', }, { n: '06', name: 'IT Strategy', desc: 'Independent advice and roadmaps to align technology with where the business is actually heading.', proof: 'senior practitioner, not a slideware deck', }, ]; function Services() { const isMobile = window.useIsMobile ? useIsMobile() : false; return (
What we do

Outcomes, {isMobile ? ' ' :
}not just output.

From AI-powered automation to custom platforms and cloud architecture, every engagement starts with the business outcome — then we engineer the right solution to get there.

{SERVICES.map(s => ( ))}
See all services
); } function ServiceCard({ n, name, desc, proof, mobile }) { return (
{n}

{name}

{desc}

{proof}
); } // ───────────────────────────────────────────────────────────────────────── // Built-for-outcomes pillars + receipts // ───────────────────────────────────────────────────────────────────────── function Pillars() { const isMobile = window.useIsMobile ? useIsMobile() : false; const items = [ { t: 'Senior-only delivery.', d: 'The person scoping the work also ships the work.' }, { t: 'Measurable success.', d: 'Every project has clear success criteria up front.' }, { t: 'Right-sized engagements.', d: 'Tailored to your stage — from startup to enterprise.' }, { t: 'No lock-in.', d: 'Clean code, documented systems, knowledge transfer baked in.' }, ]; const receipts = [ { k: '20+ yrs', v: 'per project lead' }, { k: '1:1', v: 'same lead, end-to-end' }, { k: 'weekly', v: 'working software' }, { k: '100%', v: 'docs + code handed over' }, ]; return (
02    Built for outcomes

Senior engineers. Modern tools. Real accountability.

We don't believe in bloated teams or buzzword tech. Every HyperFocus engagement is led by a senior practitioner who stays accountable end-to-end — and we use AI as a force multiplier, not a marketing line.

{receipts.map(r => (
{r.k}
{r.v}
))}
{items.map((it, i) => (
{String(i + 1).padStart(2, '0')}
{it.t}
{it.d}
))}
); } // ───────────────────────────────────────────────────────────────────────── // Process — 4 steps // ───────────────────────────────────────────────────────────────────────── function Process() { const isMobile = window.useIsMobile ? useIsMobile() : false; const steps = [ { n: '01', title: 'Discovery call', meta: '30 minutes · no charge', blurb: 'A conversation about your goals, constraints, and stack. We listen first, sales pitch later.' }, { n: '02', title: 'Scoped proposal', meta: 'outcomes · timeline · price', blurb: 'A written plan with success criteria and a fixed price. You see exactly what you\'re getting before you sign.' }, { n: '03', title: 'Iterative delivery', meta: 'working software, weekly', blurb: 'Real software in your hands every week, with check-ins. No big-bang surprises at the end.' }, { n: '04', title: 'Handover & support', meta: 'documented · owned by you', blurb: 'Runbooks, code, and decision logs all handed over. Optional ongoing support if you want us.' }, ]; return (
How we engage

A simple, four-step path {isMobile ? '' :
}from idea to live.

Every engagement follows the same pattern — short, scoped, accountable. You'll know exactly what you're getting and what comes next at every stage.

{/* Step diagram — 4 columns desktop, vertical timeline mobile */}
{/* Connecting line — horizontal on desktop, vertical on mobile */} {!isMobile ? (
) : (
)}
{steps.map((s, i) => (
{s.n}
{s.title}
{s.meta}

{s.blurb}

 ))}
See the full process
); } // ───────────────────────────────────────────────────────────────────────── // Final CTA // ───────────────────────────────────────────────────────────────────────── function FinalCTA() { const isMobile = window.useIsMobile ? useIsMobile() : false; return (
); } function CTARow({ k, v }) { return (
{k} {v}
); } // ───────────────────────────────────────────────────────────────────────── // Footer lives in site-shell.jsx (shared across pages). // ───────────────────────────────────────────────────────────────────────── Object.assign(window, { TrustStrip, Services, Pillars, Process, FinalCTA });