Call to action — full-bleed brand colour

import { Check } from "lucide-react";

const points = ["Free for your first ten invoices every month", "Set up in less time than a coffee break"];

export function CtaFullBleed() {
  return (
    <section aria-labelledby="cta-bleed-title" className="relative isolate bg-primary px-5 py-16 font-sans text-primary-fg sm:px-10 sm:py-24">
      <div
        aria-hidden
        className="absolute inset-0 -z-10 bg-[radial-gradient(currentColor_1.2px,transparent_1.7px)] bg-[size:22px_22px] opacity-25 [mask-image:linear-gradient(100deg,transparent_35%,black)]"
      />
      <div className="mx-auto grid max-w-6xl gap-8 lg:grid-cols-[1.4fr_1fr] lg:items-end lg:gap-16">
        <h2 id="cta-bleed-title" className="max-w-[16ch] text-4xl font-semibold leading-none tracking-tighter sm:text-6xl">
          Stop chasing. Start getting paid.
        </h2>
        <div className="grid gap-5">
          <p className="text-base leading-relaxed text-primary-fg/80 sm:text-lg">
            Join the small businesses who let Tallybook handle the follow-ups, so the money arrives without the awkward emails.
          </p>
          <ul className="grid gap-2.5 text-sm">
            {points.map((p) => <li key={p} className="flex items-start gap-2.5"><Check className="mt-0.5 size-4" aria-hidden />{p}</li>)}
          </ul>
          <div className="flex flex-wrap gap-2.5">
            <a href="/signup" 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">
              Get started free
            </a>
            <a href="/contact" 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">
              Talk to us
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}