// site/sections-a.jsx — nav · hero (team amplified) · outcomes strip · why · how const { useState: aUS, useEffect: aUE } = React; // ════════════════════════════════════════════════════════════════════════ // NAV // ════════════════════════════════════════════════════════════════════════ function Nav({ theme, setTheme }) { const links = [ { h: "#how", t: "How it works" }, { h: "#engine", t: "The engine" }, { h: "#cost", t: "AI cost" }, { h: "#story", t: "Our story" }, ]; return ( ); } // ════════════════════════════════════════════════════════════════════════ // HERO — SEE, the Software Engineering Engine (the engine diagram is the hero) // ════════════════════════════════════════════════════════════════════════ const ENGINE_STAGES = [ { short: "Govern", icon: "target", n: 3, tier: "portfolio" }, { short: "Design", icon: "sparkle", n: 3, tier: "product" }, { short: "Platform", icon: "shield", n: 2, tier: "product" }, { short: "Build", icon: "box", n: 4, tier: "developer" }, { short: "Quality", icon: "check", n: 4, tier: "helper" }, { short: "Implement", icon: "dispatch", n: 2, tier: "helper" }, { short: "Support", icon: "refresh", n: 2, tier: "helper" }, ]; function EngineDiagram() { return (
{/* header: the engine identity */}
SEE Software Engineering Engine
20+ senior roles · the complete value stream
running
{/* the value stream — idea → production */}
IDEA IN PRODUCTION
{ENGINE_STAGES.map((s, i) => (
{s.short} {s.n} roles
{i < ENGINE_STAGES.length - 1 && ( )} ))}
{/* base: the two differentiators */}
Self-correcting — improves every run Your team approves what ships
); } const HEADLINES = { engine: <>Your software roadmap,
delivered by SEE., see: <>One problem. The right
AI team. Reviewable work., cost: <>Senior-grade delivery,
a fraction of the AI bill., }; function Hero({ headline = "engine", showProof = true }) { return (
SEE — the Software Engineering Engine

{HEADLINES[headline] || HEADLINES.engine}

wakalix is the complete software engineering engine — senior AI roles covering every stage: strategy, product, platform, build, quality, implementation, and ongoing support. One connected system alongside your team. Start with one real problem to prove it works. The same engine scales to your whole engineering organization.

{showProof && }
); } function OutcomeStrip() { const items = [ { icon: "target", t: "Start with one problem" }, { icon: "bolt", t: "Real results in 2 weeks" }, { icon: "coin", t: "AI spend, capped & proven" }, { icon: "layers", t: "Grow role by role" }, { icon: "x", t: "Cancel anytime" }, ]; return (
{items.map((s, i) => ( {s.t} ))}
); } // ════════════════════════════════════════════════════════════════════════ // WHY — the gap, in the customer's words // ════════════════════════════════════════════════════════════════════════ function Why() { return (
The gap

AI tools give your engineers autocomplete.
Your roadmap needs delivered work.

Copilots help one person type faster — and quietly run up an unpredictable token bill. The backlog still waits on people you can't hire fast enough. wakalix puts senior AI specialists on real jobs — a whole change, tested and corrected — and hands your team finished work to approve. Capable enough to ship. Disciplined enough to stay on budget.

); } // ════════════════════════════════════════════════════════════════════════ // HOW — start small, grow + the self-correcting engine // ════════════════════════════════════════════════════════════════════════ function How() { const steps = [ { n: "01", t: "Bring one problem", d: "A feature that's been stuck, a flaky test suite, a migration nobody has time for. One real thing — not a six-month plan." }, { n: "02", t: "Your AI team forms", d: "The specialists the job needs — dev, review, test, architect — briefed on your codebase, conventions and guardrails." }, { n: "03", t: "It corrects its own work", d: "Before a person ever sees it, the work is reviewed, tested and fixed against your bar. Each miss becomes a permanent guardrail." }, { n: "04", t: "You review and ship", d: "Approve real, reviewable work delivered into your systems, then grow role by role. Cancel any time — the work is yours to keep." }, ]; return (
How it works

Start small. It gets better as it goes.

No big migration, no rip-and-replace. You bring one problem and the engine works it — checking and correcting itself along the way. If you like what you see, you grow.

{/* horizontal timeline with a continuous rail */}
{steps.map((s, i) => (
{s.n}
{s.t}
{s.d}
))}
{/* self-correcting engine — the differentiator */}
The part most AI tools skip: it catches its own mistakes.
Step 3 is the difference. The engine grades every piece of work against your standards, fixes what fails, and turns each problem into a guardrail the whole system inherits — so quality climbs run after run, instead of you re-reviewing the same mistakes.
); } // ════════════════════════════════════════════════════════════════════════ // BRIDGE — from one problem to running the whole org // ════════════════════════════════════════════════════════════════════════ function Bridge() { return (
From one problem to the whole org

One problem is the entry point.
The engine is already there
when you're ready for more.

Most teams start with one thing that's been stuck — a migration, a test suite, a feature that keeps slipping. That first win builds the trust and the muscle memory to go further. When you're ready, the same engine scales: more roles, more of your products, the full value stream from strategy to production running alongside your people.

{[ { n: "Week 1–2", t: "One problem, one team", d: "A small group of specialists on one stuck thing. You see reviewable work.", accent: true }, { n: "Month 1–3", t: "More problems, same engine", d: "Bring the engine to more of your roadmap. The engine already knows your standards.", accent: false }, { n: "Quarter 2+", t: "The whole org, running alongside", d: "Strategy, product, platform, build, quality, implementation, support — the complete value stream alongside your people.", accent: false }, ].map((s, i) => (
{s.n}
{s.t}
{s.d}
))}
); } Object.assign(window, { Nav, Hero, Why, How, Bridge });