"use client";

const logos = [
  "Northwind",
  "Lumen",
  "Altitude",
  "Arcade",
  "Nova",
  "Beacon",
  "Orchid",
  "Summit",
];

export function LogoCarousel() {
  return (
    <section className="card rounded-3xl bg-card px-6 py-12">
      <div className="space-y-8">
        <div className="space-y-2 text-center">
          <p className="text-xs uppercase tracking-[0.3em] text-muted-foreground">
            Trusted by teams
          </p>
          <h2 className="text-2xl font-semibold text-foreground md:text-3xl">
            Logos that move with your momentum
          </h2>
          <p className="text-sm text-muted-foreground md:text-base">
            A calm, continuous marquee that highlights the partners already
            scaling with you.
          </p>
        </div>

        <div className="relative overflow-hidden rounded-2xl border border-border/60 bg-background/60">
          <div className="flex w-max gap-10 py-6 animate-[logoMarquee_26s_linear_infinite]">
            <ul className="flex shrink-0 items-center gap-10 pr-10">
              {logos.map((logo) => (
                <li
                  key={logo}
                  className="text-sm font-semibold uppercase tracking-[0.2em] text-muted-foreground"
                >
                  {logo}
                </li>
              ))}
            </ul>
            <ul
              aria-hidden="true"
              className="flex shrink-0 items-center gap-10 pr-10"
            >
              {logos.map((logo) => (
                <li
                  key={`${logo}-duplicate`}
                  className="text-sm font-semibold uppercase tracking-[0.2em] text-muted-foreground"
                >
                  {logo}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>

      <style jsx>{`
        @keyframes logoMarquee {
          from {
            transform: translateX(0);
          }
          to {
            transform: translateX(-50%);
          }
        }
      `}</style>
    </section>
  );
}
Logo Carousel

Preview

Logos that move with your momentum

Installation
