Hover Peek Link

import { HoverPeekLink } from '@/components/ui/hover-peek-link'

import { HoverPeekLink } from '@/components/ui/hover-peek-link'

export default function HoverPeekLinkDemo() {
  return (
    <div className="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-20">
      <p className="text-muted-foreground font-mono text-[11px] uppercase tracking-[0.2em] sm:text-xs">
        Field notes · Meridian design system
      </p>
      <h2 className="text-foreground mt-3 text-balance text-2xl font-semibold tracking-tight sm:text-3xl">
        How teams adopt the registry
      </h2>
      <div className="text-muted-foreground mt-6 space-y-5 text-base leading-relaxed sm:text-lg">
        <p>
          Most product teams start with the token layer, then wire a single
          marketing surface before expanding. The recommended path is documented
          in the{' '}
          <HoverPeekLink
            href="https://docs.cleverui.dev/guides/adoption"
            title="Adoption playbook"
            description="A staged path from tokens to production surfaces, includes checklist, role ownership, and the three-week pilot cadence used by Meridian."
            meta="docs.cleverui.dev · 6 min read"
          >
            adoption playbook
          </HoverPeekLink>
          , which walks through theme injection, registry install, and the first
          hero swap.
        </p>
        <p>
          When you need a deeper dive on motion, the{' '}
          <HoverPeekLink
            href="https://docs.cleverui.dev/motion/standards"
            title="Motion standards"
            description="Directed choreography for entrances, springs, and reduced-motion fallbacks. Copy these constants into self-contained components."
            meta="docs.cleverui.dev · 4 min read"
          >
            motion standards
          </HoverPeekLink>{' '}
          cover easing curves, stagger budgets, and when to drop a spring under{' '}
          <code className="text-foreground bg-muted rounded-md px-1.5 py-0.5 font-mono text-sm">
            prefers-reduced-motion
          </code>
          .
        </p>
        <p>
          Shipping a compare surface? Start from the neutral{' '}
          <HoverPeekLink
            href="https://docs.cleverui.dev/components/image-compare-frame"
            title="Compare Frame"
            description="A keyboard-first before/after slider for any two children, catalog-plate framing, no autoplay, no network imagery."
            meta="docs.cleverui.dev · Component"
          >
            Compare Frame
          </HoverPeekLink>{' '}
          rather than bolting photos onto a marketing block.
        </p>
      </div>
    </div>
  )
}