Features — icon list in two columns

import { Bell, Clock, Globe, Link, Receipt, ShieldCheck, Users, Zap, type LucideIcon } from "lucide-react";

const items: { icon: LucideIcon; title: string; text: string }[] = [
  { icon: Globe, title: "Your own domain", text: "Invoices sent from billing@yourstudio.com." },
  { icon: Users, title: "Client portal", text: "Every invoice and receipt behind one link." },
  { icon: Zap, title: "Quick add", text: "Create a client mid-invoice without leaving it." },
  { icon: Clock, title: "Time to invoice", text: "Turn tracked hours into lines in one click." },
  { icon: Link, title: "Bank feeds", text: "Payments match their invoices on their own." },
  { icon: ShieldCheck, title: "Two-step sign in", text: "An extra lock on the account that holds your money." },
  { icon: Receipt, title: "Expense receipts", text: "Snap a photo; it’s filed against the right job." },
  { icon: Bell, title: "Paid alerts", text: "A ping on your phone the moment money lands." },
];

export function FeaturesIconList() {
  return (
    <section aria-labelledby="more-title" className="bg-surface font-sans">
      <div className="mx-auto grid max-w-6xl gap-7 px-4 py-16 sm:px-6 lg:grid-cols-[1fr_2fr] lg:gap-14 lg:py-24">
        <div className="flex flex-col items-start gap-4 lg:sticky lg:top-24 lg:self-start">
          <p className="text-[13px] font-medium text-primary">And the rest</p>
          <h2 id="more-title" className="text-balance text-2xl font-semibold tracking-tight text-fg sm:text-3xl">The small things that make it feel finished</h2>
          <p className="text-pretty text-[14.5px] leading-relaxed text-fg-muted">Details we sweated so your clients see a business, not a spreadsheet.</p>
          <a href="/features" className="inline-flex h-9 items-center rounded border border-border-strong bg-bg px-3.5 text-sm font-medium text-fg transition hover:bg-surface-2">See every feature</a>
        </div>
        <ul className="grid gap-x-10 sm:grid-cols-2">
          {items.map(({ icon: Icon, title, text }) => (
            <li key={title} className="grid grid-cols-[20px_1fr] gap-x-3.5 gap-y-1 border-t border-border py-5">
              <Icon className="row-span-2 mt-0.5 size-5 text-fg" aria-hidden />
              <h3 className="text-[15px] font-semibold tracking-tight text-fg">{title}</h3>
              <p className="text-sm leading-relaxed text-fg-muted">{text}</p>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}