Logos — two offset rows

// Made-up names — replace with your customers' logos (SVG), with their permission.
const logos = [
  { name: "Northwind", className: "font-bold tracking-[-0.05em]" },
  { name: "Blue Pine", className: "font-medium tracking-wide" },
  { name: "Kaveri", className: "text-[22px] font-semibold italic tracking-tight" },
  { name: "LUMEN", className: "text-base tracking-[0.24em]" },
  { name: "Orbit", className: "font-extrabold tracking-tight" },
  { name: "Halcyon", className: "font-medium" },
  { name: "tessera", className: "text-[22px] font-bold tracking-[-0.06em]" },
  { name: "Marigold", className: "font-semibold lowercase" },
];

const rows = [logos.slice(0, 6), [...logos.slice(6), ...logos.slice(0, 4)]];

export function LogosTwoRows() {
  return (
    <section aria-labelledby="logos-title" className="bg-surface py-16 font-sans lg:py-20">
      <div className="mx-auto max-w-6xl px-4 sm:px-6">
        <div className="mx-auto mb-9 max-w-xl text-center">
          <p className="text-[13px] font-medium text-primary">Customers</p>
          <h2 id="logos-title" className="mt-3 text-balance text-2xl font-semibold tracking-tight text-fg sm:text-3xl">The calendar behind 3,000 small studios</h2>
        </div>
        {/* Edges fade out with a mask; the second row is nudged right so the pills stagger. */}
        <div className="grid gap-3 overflow-hidden [mask-image:linear-gradient(90deg,transparent,black_12%,black_88%,transparent)]">
          {rows.map((row, r) => (
            <ul key={r} className={r === 1 ? "flex translate-x-12 justify-center gap-3 sm:translate-x-[84px]" : "flex justify-center gap-3"}>
              {row.map((l, i) => (
                <li key={l.name + i} className="flex h-12 shrink-0 items-center rounded-full border border-border bg-bg px-[18px] text-fg-muted sm:h-[60px] sm:px-[26px]">
                  <span className={"whitespace-nowrap text-[15px] leading-none sm:text-[17px] " + l.className}>{l.name}</span>
                </li>
              ))}
            </ul>
          ))}
        </div>
      </div>
    </section>
  );
}