Sticky Grid Unfold

import { StickyGridUnfold } from '@/components/blocks/sticky-grid-unfold'

import { StickyGridUnfold } from '@/components/blocks/sticky-grid-unfold'

export default function StickyGridUnfoldDemo() {
  return (
    <div>
      <StickyGridUnfold
        eyebrow="Lab · Deck to grid"
        heading="Six capabilities, dealt from one pile."
        cards={[
          {
            kicker: 'Pipelines',
            title: 'Deploys in under 90 seconds',
            body: 'Build, test, and release stages fan out across 12 parallel executors.',
          },
          {
            kicker: 'Observability',
            title: 'Traces stitched end to end',
            body: 'Every request carries its span tree from edge to database and back.',
          },
          {
            kicker: 'Previews',
            title: 'A URL for every branch',
            body: 'Push a commit and the full stack is live for review in one minute.',
          },
          {
            kicker: 'Rollbacks',
            title: 'One command to yesterday',
            body: 'Immutable releases mean recovery is a pointer swap, not a rebuild.',
          },
          {
            kicker: 'Secrets',
            title: 'Sealed at rest and in flight',
            body: 'Keys rotate on a 24-hour cycle without a single redeploy.',
          },
          {
            kicker: 'Audit',
            title: 'Every change has an author',
            body: 'Immutable logs pair each deploy with its diff, approver, and time.',
          },
        ]}
      />
      {/* scroll runway so the unfold has room to play in context */}
      <div aria-hidden="true" className="h-[60vh]" />
    </div>
  )
}