Capability Matrix

import { CapabilityMatrix } from '@/components/blocks/capability-matrix'

'use client'

import { CapabilityMatrix } from '@/components/blocks/capability-matrix'

export default function CapabilityMatrixDemo() {
  return (
    <CapabilityMatrix
      eyebrow="Capabilities"
      heading="What we take on"
      intro="Six disciplines, one team, no handoffs."
      capabilities={[
        {
          name: 'Brand systems',
          summary:
            'Positioning, identity, and the rules that keep a brand sharp across every surface.',
          deliverables: [
            'Voice and visual system',
            'Launch toolkit',
            'Usage guidelines in Figma',
          ],
          stat: '31 launches',
          statLabel: 'since 2019',
          href: '#brand-systems',
        },
        {
          name: 'Product design',
          summary:
            'Interface design that ships, flows, components, and the decisions between them.',
          deliverables: [
            'Clickable prototype in code',
            'Design system tokens',
            'Handoff specs',
          ],
          stat: '48 products',
          statLabel: 'shipped',
          href: '#product-design',
        },
        {
          name: 'Engineering',
          summary:
            'Front-end architecture and implementation that holds up under real traffic.',
          deliverables: [
            'Production React app',
            'CI and preview deploys',
            'Performance budget report',
          ],
          stat: '12 apps',
          statLabel: 'in production',
          href: '#engineering',
        },
        {
          name: 'Content & editorial',
          summary:
            'Site copy, launch narratives, and the voice that makes a product sound like itself.',
          deliverables: [
            'Site information architecture',
            'Launch narrative',
            'CMS content model',
          ],
          stat: '90+ pages',
          statLabel: 'written',
        },
        {
          name: 'Motion & craft',
          summary:
            'Directed motion for product and marketing, brief, readable, never decorative noise.',
          deliverables: [
            'Motion language doc',
            'Component choreography',
            'Reduced-motion paths',
          ],
          stat: '200+',
          statLabel: 'micro-interactions',
        },
        {
          name: 'Growth experiments',
          summary:
            'Landing systems, funnel instrumentation, and the tests that prove what works.',
          deliverables: [
            'Experiment roadmap',
            'Instrumented funnels',
            'Monthly readout',
          ],
          stat: '$18M',
          statLabel: 'pipeline influenced',
          href: '#growth',
        },
      ]}
      note="Anything outside these walls, we will say so on the first call."
    />
  )
}