Logo Wall Marquee

const logos = [
  "Northwind",
  "Loomly",
  "Cadence",
  "Meridian",
  "Brightfold",
  "Palisade",
  "Everly",
  "Kestrel",
];

const quips = [
  { text: "Best tooling decision we made this decade.", who: "Ops Lead, Cadence" },
  { text: "Cut our onboarding time by two thirds.", who: "COO, Brightfold" },
  { text: "The support alone is worth the price.", who: "Founder, Loomly" },
  { text: "Reporting our board finally trusts.", who: "CFO, Meridian" },
  { text: "It just quietly works, every single day.", who: "CTO, Palisade" },
];

export default function TestimonialLogoMarquee() {
  return (
    <section className="overflow-hidden bg-white px-6 py-16 dark:bg-zinc-950 md:py-24">
      <style>{`
        @keyframes tm-scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
        @keyframes tm-scroll-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
        .tm-track { display: flex; width: max-content; }
        .tm-left { animation: tm-scroll-left 32s linear infinite; }
        .tm-right { animation: tm-scroll-right 40s linear infinite; }
        .tm-marquee:hover .tm-track { animation-play-state: paused; }
        @media (prefers-reduced-motion: reduce) {
          .tm-track { animation: none; }
        }
      `}</style>

      <div className="mx-auto max-w-2xl text-center">
        <h2 className="text-3xl font-bold tracking-tight text-balance text-zinc-900 sm:text-4xl dark:text-white">
          Trusted by teams everywhere
        </h2>
        <p className="mt-4 text-lg text-zinc-600 dark:text-zinc-400">
          From lean startups to established groups, thousands of teams build on us.
        </p>
      </div>

      <div
        className="tm-marquee relative mt-12 [mask-image:linear-gradient(to_right,transparent,black_12%,black_88%,transparent)]"
        aria-label="Logos of companies that trust us"
      >
        <div className="tm-track tm-left gap-4">
          {[...logos, ...logos].map((name, i) => (
            <span
              key={`logo-${i}`}
              className="flex items-center gap-2 rounded-xl border border-zinc-200 bg-zinc-50 px-6 py-4 dark:border-zinc-800 dark:bg-zinc-900"
              aria-hidden={i >= logos.length ? "true" : undefined}
            >
              <svg viewBox="0 0 24 24" className="h-5 w-5 fill-indigo-500" aria-hidden="true">
                <path d="M12 2l2.5 6.5L21 11l-6.5 2.5L12 20l-2.5-6.5L3 11l6.5-2.5L12 2z" />
              </svg>
              <span className="text-base font-semibold tracking-tight text-zinc-700 dark:text-zinc-200">
                {name}
              </span>
            </span>
          ))}
        </div>
      </div>

      <div
        className="tm-marquee relative mt-4 [mask-image:linear-gradient(to_right,transparent,black_12%,black_88%,transparent)]"
        aria-label="Short quotes from customers"
      >
        <div className="tm-track tm-right gap-4">
          {[...quips, ...quips].map((q, i) => (
            <figure
              key={`quip-${i}`}
              className="w-72 shrink-0 rounded-xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900"
              aria-hidden={i >= quips.length ? "true" : undefined}
            >
              <div className="flex items-center gap-0.5" aria-label="Rated 5 out of 5 stars">
                {[0, 1, 2, 3, 4].map((s) => (
                  <svg key={s} viewBox="0 0 24 24" className="h-4 w-4 fill-amber-400" aria-hidden="true">
                    <path d="M11.48 3.5a.56.56 0 011.04 0l2.12 5.11a.56.56 0 00.48.35l5.52.44c.5.04.7.66.32.99l-4.2 3.6a.56.56 0 00-.19.56l1.29 5.38a.56.56 0 01-.84.61l-4.73-2.88a.56.56 0 00-.58 0l-4.73 2.88a.56.56 0 01-.84-.61l1.29-5.38a.56.56 0 00-.19-.56l-4.2-3.6a.56.56 0 01.32-.99l5.52-.44a.56.56 0 00.48-.35L11.48 3.5z" />
                  </svg>
                ))}
              </div>
              <blockquote className="mt-3 text-sm font-medium text-zinc-800 dark:text-zinc-200">
                "{q.text}"
              </blockquote>
              <figcaption className="mt-2 text-xs text-zinc-500 dark:text-zinc-400">
                {q.who}
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}