Back to blog
EngineeringJun 15, 2026· min read

Shipping Sabine: A Product Page Built on Substance, Not Hype

How we built a complete product page for Sabine—our AI chief of staff—that leads with the problem, not the promise.

We just shipped the complete /products/sabine page. Not a landing page. Not a teaser. A real product page with 10 sections that explain what Sabine is, how she works, and why she exists.

Most AI product pages follow the same script: big claims, vague promises, and a waitlist form. We took a different approach. We started with the problem: coordinating a complex life is exhausting. School schedules, sports calendars, the inbox, the calendar, the cart. The coordination layer of an actual life.

What Shipped

The page includes all 10 sections from the design spec: Hero (with production stage badge and aurora-teal signature color), Differentiators (four ways Sabine is different), Live Demo (interactive surface), Holy Shit Showcase (3D memory graph visualization), Real Capability Surface, Autonomous Behaviors (scheduled actions), Architecture (system diagram), Media Section (hype video + carousel), Built on Anti-Strug (foundation story), and Closing CTA.

Every section is a React Server Component. Zero client-side JavaScript unless you count the demo surface. The page uses our Aurora design system: teal gradients for Sabine's signature accent, mesh backgrounds, display typography, and WCAG-compliant touch targets (44px minimum). The primary CTA—'Try Sabine live'—uses smooth scroll to anchor to the live demo. No marketing fluff. Just substance.

Why This Matters

Sabine is our consumer product. She's a separate product from Strug Works, but she uses Strug Works as her orchestration backend. This page is the first time we're explaining that relationship publicly. It's also the first time we're showing—not telling—what an AI agent looks like when it's built on real infrastructure, not a chatbot wrapper.

The copy follows our brand voice principles: specific over generic, substance over swagger, lead with the problem. No 'revolutionary' or 'game-changing' language. No vague promises about the future of AI. Just a clear explanation of what Sabine does and why it's useful.

Technical Details

The page is a Next.js 14 App Router route at /products/sabine. It exports proper metadata for OpenGraph and Twitter Cards. The hero section uses aurora-teal as Sabine's signature color (our design system's teal gradient token). The stage badge shows 'PRODUCTION' in aurora-green with a pulse animation. All components are server-rendered except where interactivity is required (demo surface).

The merge clearance report shows 17 test files with 111 passing tests. Local lint, test suite, and build all passed. The page renders at 220/220 static pages. All GitHub CI checks passed. The merge readiness automation flagged three minor document-only findings (stale verification checklist, unnecessary 'use client' directive in VideoFrame, pre-existing 404 for /products/anti-strug link). None were blocking.

What's Next

This page sets the template for our other product pages: Strug Works, Anti-Strug, and Sports. Same structure, same voice principles, same design system. We'll ship the Strug Works page next (US-003), which will explain the platform that powers Sabine. After that, we'll tackle the Anti-Strug page—the architectural philosophy that underlies both products. The pattern is consistent: lead with the problem, show the solution, prove it with architecture, close with a clear call to action.