Call-to-action band

const cta = {
  title: "Your next invoice could be paid by Friday.",
  body: "Setting up takes about five minutes. Your first five invoices every month are free.",
  primary: { label: "Start free", href: "/signup" },
  secondary: { label: "Talk to us", href: "/contact" },
};

export function CtaBand() {
  return (
    <section aria-labelledby="cta-title" className="bg-bg px-4 py-16 font-sans sm:px-6">
      <div className="relative isolate mx-auto grid max-w-6xl gap-8 overflow-hidden rounded-xl bg-primary px-6 py-10 text-primary-fg sm:px-10 sm:py-14 lg:grid-cols-[1fr_auto] lg:items-center">
        <div
          aria-hidden
          className="absolute inset-0 -z-10 bg-[radial-gradient(70%_130%_at_100%_0%,color-mix(in_srgb,var(--tst-primary-fg)_20%,transparent),transparent_60%)]"
        />
        <div>
          <h2 id="cta-title" className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl">{cta.title}</h2>
          <p className="mt-3 max-w-xl text-base leading-relaxed opacity-80 sm:text-lg">{cta.body}</p>
        </div>
        <div className="flex flex-wrap gap-3">
          <a href={cta.primary.href} className="inline-flex h-11 items-center rounded bg-primary-fg px-5 text-[15px] font-medium text-primary transition hover:opacity-90 focus-visible:outline-primary-fg">
            {cta.primary.label}
          </a>
          <a href={cta.secondary.href} className="inline-flex h-11 items-center rounded border border-primary-fg/40 px-5 text-[15px] font-medium transition hover:bg-primary-fg/10">
            {cta.secondary.label}
          </a>
        </div>
      </div>
    </section>
  );
}