Logo cloud

import { cn } from "@/lib/utils";

// Swap these for your customers' logo files (SVG, currentColor) when you have permission to use them.
const customers = [
  { name: "Northwind", style: "font-bold tracking-tighter" },
  { name: "Blue Pine", style: "font-medium tracking-wide" },
  { name: "Kaveri", style: "font-semibold italic tracking-tight" },
  { name: "Halcyon", style: "text-sm uppercase tracking-[0.18em]" },
  { name: "marigold", style: "font-semibold" },
  { name: "Tessera", style: "font-extrabold tracking-tighter" },
];

export function LogoCloud() {
  return (
    <section aria-labelledby="logos-title" className="bg-bg font-sans">
      <div className="mx-auto max-w-5xl px-4 py-14 sm:px-6">
        <h2 id="logos-title" className="text-center text-[13px] font-normal text-fg-subtle">
          Studios and small firms that send their invoices with Fernbill
        </h2>
        <ul className="mt-6 grid grid-cols-2 gap-px overflow-hidden rounded-lg border border-border bg-border sm:grid-cols-3 lg:grid-cols-6">
          {customers.map((c) => (
            <li key={c.name} className={cn("flex h-20 items-center justify-center bg-bg px-3 text-lg text-fg-muted transition hover:text-fg", c.style)}>
              {c.name}
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}