Trust grid

import {
  Aperture,
  Box,
  Command,
  Feather,
  Globe,
  Hexagon,
  Layers,
  Triangle,
  Waves,
  Zap,
} from "lucide-react";

const cloudLogos = [
  { name: "Northwind", icon: Hexagon },
  { name: "Vertex", icon: Triangle },
  { name: "Lumina", icon: Zap },
  { name: "Fathom", icon: Waves },
  { name: "Polaris", icon: Globe },
  { name: "Halcyon", icon: Feather },
  { name: "Driftline", icon: Layers },
  { name: "Basalt", icon: Box },
  { name: "Cascade", icon: Aperture },
  { name: "Emberly", icon: Command },
] as const;

export function LogoCloudGridBlock() {
  return (
    <section
      aria-label="Customers"
      className="mx-auto flex w-full max-w-5xl flex-col items-center gap-8 py-8"
    >
      <p className="text-sm font-medium uppercase tracking-widest text-fg-tertiary">
        Trusted by 4,000+ product teams
      </p>
      <ul className="grid w-full grid-cols-2 gap-x-6 gap-y-8 sm:grid-cols-3 lg:grid-cols-5">
        {cloudLogos.map((logo) => (
          <li
            key={logo.name}
            className="flex items-center justify-center gap-2 text-fg-tertiary transition-colors hover:text-fg-secondary"
          >
            <logo.icon className="size-5" aria-hidden="true" />
            <span className="font-display text-lg font-semibold tracking-tight">{logo.name}</span>
          </li>
        ))}
      </ul>
      <p className="text-sm text-fg-secondary">
        From seed-stage startups to public companies in 60 countries.
      </p>
    </section>
  );
}