Bento Grid With Six Tiles and One Large Feature Tile

// A six-tile bento: one large tile for the lead feature, five smaller ones around it.
// Layout uses grid-template-areas so each breakpoint is one readable map.
const tiles = [
  { area: "lead", title: "Invoices that chase themselves", body: "Send once. Polite reminders go out at 3, 7 and 14 days until the client pays, then stop on their own." },
  { area: "a", title: "Paid in 40 currencies", body: "Clients pay in theirs, you are paid in yours." },
  { area: "b", title: "Receipts by photo", body: "Snap a receipt and the amount, date and shop are filled in." },
  { area: "c", title: "Tax set aside as you go", body: "A share of every payment moves to a separate pot, so January holds no surprises." },
  { area: "d", title: "Time to invoice", body: "Tracked hours turn into a draft invoice in one click." },
  { area: "e", title: "Your accountant, invited", body: "Give read-only access to the books without sharing a password." },
];

function LeadArt() {
  return (
    <div className="relative mt-8 h-48 overflow-hidden rounded-xl border border-indigo-100 bg-white p-4 sm:h-56" aria-hidden="true">
      <div className="flex items-center justify-between">
        <div className="h-2.5 w-24 rounded-full bg-slate-200" />
        <span className="rounded-full bg-emerald-100 px-2.5 py-1 text-xs font-medium text-emerald-800">Paid</span>
      </div>
      <p className="mt-4 text-3xl font-semibold tracking-tight text-slate-900">$4,820.00</p>
      <div className="mt-4 space-y-2">
        {[["Reminder sent", "Day 3"], ["Reminder sent", "Day 7"], ["Paid by card", "Day 9"]].map(([a, b], i) => (
          <div key={i} className="flex items-center gap-3 text-sm">
            <span className={`h-2 w-2 rounded-full ${i === 2 ? "bg-emerald-500" : "bg-indigo-400"}`} />
            <span className="flex-1 text-slate-700">{a}</span>
            <span className="text-slate-500">{b}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

export default function BentoGridSixTilesWithOneLargeFeatureTile() {
  return (
    <section className="bg6 bg-slate-50 px-5 py-16 sm:py-24">
      <style>{`
        .bg6-grid { display: grid; gap: 16px; grid-template-columns: 1fr; grid-template-areas: "lead" "a" "b" "c" "d" "e"; }
        @media (min-width: 640px) { .bg6-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "lead lead" "a b" "c c" "d e"; } }
        @media (min-width: 1024px) { .bg6-grid { grid-template-columns: repeat(4, 1fr); grid-template-areas: "lead lead a b" "lead lead c c" "d e e e"; } }
      `}</style>
      <div className="mx-auto max-w-6xl">
        <p className="text-sm font-semibold text-indigo-700">Ledgerly for freelancers</p>
        <h2 className="mt-2 max-w-2xl text-3xl font-semibold tracking-tight text-slate-900 sm:text-4xl">Everything between the work and getting paid</h2>
        <div className="bg6-grid mt-12">
          {tiles.map((t) => (
            <article
              key={t.area}
              style={{ gridArea: t.area }}
              className={`flex flex-col rounded-2xl border p-6 ${t.area === "lead" ? "border-indigo-200 bg-indigo-50 sm:p-8" : "border-slate-200 bg-white"}`}
            >
              <h3 className={`font-semibold tracking-tight text-slate-900 ${t.area === "lead" ? "text-2xl" : "text-lg"}`}>{t.title}</h3>
              <p className="mt-2 text-[15px] leading-relaxed text-slate-600">{t.body}</p>
              {t.area === "lead" && <LeadArt />}
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}