Call to action — centred band

import { ArrowRight } from "lucide-react";

export function CtaCentered() {
  return (
    <section aria-labelledby="cta-centered-title" className="bg-bg px-5 py-16 font-sans sm:px-10 sm:py-20">
      <div className="relative isolate mx-auto grid max-w-6xl justify-items-center gap-5 overflow-hidden rounded-xl border border-border bg-surface px-6 py-16 text-center sm:px-10 sm:py-24">
        <div
          aria-hidden
          className="absolute inset-0 -z-10 bg-[linear-gradient(var(--tst-border)_1px,transparent_1px),linear-gradient(90deg,var(--tst-border)_1px,transparent_1px)] bg-[size:32px_32px] bg-center [mask-image:radial-gradient(60%_70%_at_50%_50%,transparent_30%,black)]"
        />
        <h2 id="cta-centered-title" className="max-w-[18ch] text-balance text-3xl font-semibold tracking-tight text-fg sm:text-5xl">
          Send your first invoice in the next five minutes
        </h2>
        <p className="max-w-xl text-base text-fg-muted sm:text-lg">Add a client, add a line, press send. Tallybook takes care of the reminders from there.</p>
        <div className="mt-1.5 flex flex-wrap justify-center gap-2.5">
          <a href="/signup" className="inline-flex h-11 items-center gap-1.5 rounded bg-primary px-5 text-[15px] font-medium text-primary-fg transition hover:bg-primary-hover">
            Start for free <ArrowRight className="size-4" aria-hidden />
          </a>
          <a href="/demo" className="inline-flex h-11 items-center rounded border border-border-strong bg-bg px-5 text-[15px] font-medium text-fg transition hover:bg-surface">
            Book a demo
          </a>
        </div>
        <p className="text-[13px] text-fg-subtle">Free plan · No card needed · Cancel any time</p>
      </div>
    </section>
  );
}