Pricing — single plan with feature list

import { Check } from "lucide-react";

const plan = {
  name: "Tallybook membership",
  summary: "Send invoices, take payments and chase late clients from one place, for as many clients as you have.",
  price: "$19",
  per: "/ month",
  cta: { label: "Start your free month", href: "/signup" },
  features: [
    "Unlimited invoices and quotes", "Card, bank and wallet payments", "Automatic reminders", "Recurring billing",
    "Client portal", "Your logo and colours", "Accounting sync", "Help from a real person",
  ],
};

export function PricingSinglePlan() {
  return (
    <section aria-labelledby="pricing-single-title" className="bg-bg px-5 py-16 font-sans sm:px-10 sm:py-20">
      <div className="mx-auto max-w-5xl">
        <div className="mx-auto max-w-2xl text-center">
          <h2 id="pricing-single-title" className="text-balance text-3xl font-semibold tracking-tight text-fg sm:text-4xl">One plan with everything in it</h2>
          <p className="mt-4 text-base text-fg-muted sm:text-lg">No tiers to compare and no features held back. Every account gets the whole product.</p>
        </div>

        <div className="mt-10 grid overflow-hidden rounded-xl border border-border bg-bg md:grid-cols-[1.5fr_1fr]">
          <div className="grid content-start gap-6 p-8 md:p-11">
            <div>
              <h3 className="text-xl font-semibold text-fg">{plan.name}</h3>
              <p className="mt-2 text-sm leading-relaxed text-fg-muted">{plan.summary}</p>
            </div>
            <p className="flex items-center gap-3.5 text-[13px] font-medium text-primary after:h-px after:flex-1 after:bg-border">What’s included</p>
            <ul className="grid gap-2.5 text-sm text-fg sm:grid-cols-2 sm:gap-x-5">
              {plan.features.map((f) => (
                <li key={f} className="flex items-start gap-2.5"><Check className="mt-0.5 size-4 shrink-0 text-primary" aria-hidden />{f}</li>
              ))}
            </ul>
          </div>
          <div className="grid content-center justify-items-center gap-4 border-t border-border bg-surface p-8 text-center md:border-l md:border-t-0 md:p-11">
            <p className="text-[13px] text-fg-subtle">Pay monthly, cancel any time</p>
            <p className="flex items-baseline gap-2">
              <span className="text-6xl font-semibold tracking-tight tabular-nums text-fg">{plan.price}</span>
              <span className="text-[13px] text-fg-subtle">{plan.per}</span>
            </p>
            <a href={plan.cta.href} className="inline-flex h-11 w-full max-w-72 items-center justify-center rounded bg-primary px-5 text-[15px] font-medium text-primary-fg transition hover:bg-primary-hover">
              {plan.cta.label}
            </a>
            <p className="text-[13px] text-fg-subtle">No card needed for the first 30 days.</p>
          </div>
        </div>
      </div>
    </section>
  );
}