Pill Dock Navbar

import { NavbarPillDock } from '@/components/blocks/navbar-pill-dock'

import { NavbarPillDock } from '@/components/blocks/navbar-pill-dock'

export default function NavbarPillDockDemo() {
  return (
    <div className="min-h-[200vh]">
      <NavbarPillDock
        links={[
          { label: 'Work', href: '#work' },
          { label: 'Process', href: '#process' },
          { label: 'Studio', href: '#studio' },
          { label: 'Notes', href: '#notes' },
        ]}
        active="#work"
        cta={{ label: 'Book a call', href: '#contact' }}
      />

      <div className="mx-auto max-w-3xl px-4 pt-32 sm:px-6 sm:pt-36">
        <p className="text-center font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
          Field & Form Studio
        </p>
        <h1 className="mt-4 text-center text-balance text-4xl font-semibold tracking-tight sm:text-5xl">
          A floating pill dock that condenses as you read.
        </h1>
        <p className="mx-auto mt-6 max-w-md text-center text-base leading-relaxed text-muted-foreground">
          The active segment rides a sliding thumb. Scroll past eighty pixels and the dock tightens,
          still fully keyboard-reachable, still forty-four pixels tall.
        </p>

        <div className="mt-20 space-y-6">
          {[
            {
              title: 'Selected work',
              body: 'Brand systems and product surfaces for teams shipping under real constraints, not pitch decks.',
            },
            {
              title: 'How we work',
              body: 'Two-week discovery sprints, a single design lead, and engineering partners who stay through launch.',
            },
            {
              title: 'The studio',
              body: 'Eight people across product design, type, and front-end. No account managers, no markup on tools.',
            },
          ].map((block) => (
            <article
              key={block.title}
              className="rounded-2xl border border-border/60 bg-card p-6 sm:p-8"
            >
              <h2 className="text-lg font-semibold tracking-tight text-foreground">{block.title}</h2>
              <p className="mt-2 text-sm leading-relaxed text-muted-foreground sm:text-base">
                {block.body}
              </p>
            </article>
          ))}
        </div>
      </div>
    </div>
  )
}