Inline Banner CTA

import { CtaInlineBanner } from '@/components/ui/cta-inline-banner'

import { CtaInlineBanner } from '@/components/ui/cta-inline-banner'

export default function CtaInlineBannerDemo() {
  return (
    <div className="mx-auto max-w-prose px-4 py-12 sm:px-6">
      <p className="text-sm leading-relaxed text-muted-foreground sm:text-base">
        Once the token file is the single source of truth, every surface,
        marketing site, app chrome, email templates, pulls the same primary
        and radius. That is the moment a design system stops being a Figma
        library and starts being infrastructure.
      </p>
      <div className="my-8">
        <CtaInlineBanner
          eyebrow="Try it yourself"
          sentence="Everything in this guide ships in the Meridian starter template, tokens, components, and the docs site."
          cta={{ label: 'Open the template', href: '#template' }}
        />
      </div>
      <p className="text-sm leading-relaxed text-muted-foreground sm:text-base">
        The remaining work is naming discipline and a review gate. Skip either
        and the system drifts within a quarter.
      </p>
    </div>
  )
}