Trusted By Logo Cloud

const logos = [
  { name: "Northwind" },
  { name: "Palette" },
  { name: "Quanta" },
  { name: "Meridian" },
  { name: "Cobalt" },
  { name: "Verdant" },
];

function LogoMark() {
  return (
    <svg
      viewBox="0 0 24 24"
      className="h-6 w-6 shrink-0"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden
    >
      <rect x="3" y="3" width="18" height="18" rx="5" />
      <path d="M8 14l3-4 2 2.5L16 8" />
    </svg>
  );
}

export default function StatsLogoCloud() {
  return (
    <section className="bg-white px-6 py-16 dark:bg-zinc-950 md:py-24">
      <div className="mx-auto max-w-6xl">
        <p className="text-center text-sm font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400">
          Trusted by fast-moving teams everywhere
        </p>

        <ul className="mx-auto mt-10 grid max-w-4xl grid-cols-2 items-center gap-x-8 gap-y-10 sm:grid-cols-3 lg:grid-cols-6">
          {logos.map((logo) => (
            <li
              key={logo.name}
              className="flex items-center justify-center gap-2 text-zinc-400 grayscale transition duration-200 hover:text-zinc-900 hover:grayscale-0 dark:text-zinc-500 dark:hover:text-white"
            >
              <LogoMark />
              <span className="text-lg font-semibold tracking-tight">{logo.name}</span>
            </li>
          ))}
        </ul>

        <p className="mt-12 text-center text-sm text-zinc-500 dark:text-zinc-500">
          Join more than <span className="font-semibold text-zinc-900 dark:text-white">2,000 companies</span> already on board.
        </p>
      </div>
    </section>
  );
}