Call to action — split with image

import { Check } from "lucide-react";

const points = ["Card, bank and wallet payments", "Reminders that send themselves"];

export function CtaSplitImage() {
  return (
    <section aria-labelledby="cta-split-title" className="bg-bg px-5 py-16 font-sans sm:px-10 sm:py-20">
      <div className="mx-auto grid max-w-6xl overflow-hidden rounded-xl border border-border bg-surface md:grid-cols-2">
        <div className="grid content-center justify-items-start gap-5 p-8 lg:p-14">
          <p className="text-[13px] font-medium text-primary">Get paid faster</p>
          <h2 id="cta-split-title" className="text-balance text-3xl font-semibold tracking-tight text-fg sm:text-4xl">Your next invoice could be paid by Friday</h2>
          <p className="text-[15px] leading-relaxed text-fg-muted">Customers on Tallybook usually get paid within a week of sending, because paying takes one tap from the email.</p>
          <ul className="grid gap-2.5 text-sm text-fg">
            {points.map((p) => (
              <li key={p} className="flex items-start gap-2.5"><Check className="mt-0.5 size-4 text-primary" aria-hidden />{p}</li>
            ))}
          </ul>
          <div className="mt-1.5 flex flex-wrap gap-2.5">
            <a href="/signup" className="inline-flex h-11 items-center rounded bg-primary px-5 text-[15px] font-medium text-primary-fg transition hover:bg-primary-hover">Create a free account</a>
            <a href="/how-it-works" className="inline-flex h-11 items-center rounded px-5 text-[15px] font-medium text-fg transition hover:bg-surface-2">See how it works</a>
          </div>
        </div>
        {/* Swap the gradient panel for a product screenshot: <img src="..." alt="..." className="size-full object-cover" /> */}
        <div className="relative grid min-h-[300px] place-items-center overflow-hidden bg-gradient-to-br from-brand-500 to-brand-800 p-9" aria-hidden>
          <div className="relative grid w-full max-w-xs -rotate-[2.5deg] gap-3 rounded-lg bg-bg p-5 text-[12.5px] text-fg shadow-2xl">
            <span className="absolute -right-3.5 -top-3.5 inline-flex rotate-[4deg] items-center gap-1.5 rounded-full bg-success-soft px-3 py-1.5 text-xs font-semibold text-success-fg shadow-lg">
              <Check className="size-3.5" />Paid
            </span>
            <div className="flex justify-between"><b>Invoice #0418</b><span className="text-fg-subtle">Due 12 Nov</span></div>
            <span className="text-fg-subtle">Fernwood Bakery</span>
            <hr className="border-border" />
            <div className="flex justify-between gap-3"><span>Shop fit-out, phase 2</span><span className="tabular-nums">$2,400.00</span></div>
            <div className="flex justify-between gap-3"><span>Materials</span><span className="tabular-nums">$615.50</span></div>
            <hr className="border-border" />
            <div className="flex justify-between text-sm font-semibold"><span>Total</span><span className="tabular-nums">$3,015.50</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}