Marquee logo hero

Design a hero with Tailwind CSS that ends in an infinite logo marquee. The top section is centred: a bordered pill linking to a funding or launch note with an arrow, a large headline, a supporting paragraph and an inline email capture — a rounded-xl bordered input and a dark button sitting side by side on a max-w-md row, with a tiny reassurance line underneath. Below, a full-bleed marquee: a container with hidden overflow and mask fades at both edges, holding a flex row of ten monogram logo tiles rendered as muted uppercase wordmarks, duplicated once so the loop is seamless, animated with an inline keyframes style that translates the row by minus fifty percent over thirty seconds and pauses on hover. Add a small centred caption above the marquee reading that teams of every size already ship with it.

<section class="overflow-hidden bg-white pt-24">
  <div class="mx-auto max-w-3xl px-6 text-center">
    <a href="#" class="inline-flex items-center gap-2 rounded-full border border-neutral-200 px-3.5 py-1.5 text-xs font-medium text-neutral-600 transition hover:bg-neutral-50">
      <span class="rounded-full bg-neutral-900 px-2 py-0.5 text-[10px] text-white">New</span>
      Series B and a rebuilt query engine <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M14 4h6v6M20 4l-9 9"/><path d="M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6"/></svg>
    </a>

    <h1 class="mt-7 text-5xl font-semibold leading-[1.05] tracking-tight text-neutral-900 sm:text-6xl">
      Ship the dashboard, not the pipeline
    </h1>
    <p class="mx-auto mt-5 max-w-xl text-lg leading-relaxed text-neutral-500">
      Connect a warehouse, describe the metric, and hand your team a chart that stays correct when the schema moves.
    </p>

    <form class="mx-auto mt-8 flex max-w-md gap-2">
      <input type="email" placeholder="[email protected]"
        class="min-w-0 flex-1 rounded-xl border border-neutral-200 px-4 py-3 text-sm outline-none transition focus:border-neutral-900 focus:ring-4 focus:ring-neutral-900/10" />
      <button class="shrink-0 rounded-xl bg-neutral-900 px-5 py-3 text-sm font-medium text-white transition hover:bg-neutral-800">Get started</button>
    </form>
    <p class="mt-2.5 text-xs text-neutral-400">Free while you are under 1M rows. No card.</p>
  </div>

  <p class="mt-20 text-center text-xs font-medium uppercase tracking-[0.2em] text-neutral-400">Trusted by teams of two and teams of two thousand</p>

  <div class="marquee-mask relative mt-8 overflow-hidden pb-20">
    <div class="marquee-track flex w-max gap-16 pr-16">
      <span class="text-xl font-semibold uppercase tracking-widest text-neutral-300">Northwind</span>
      <span class="text-xl font-semibold uppercase tracking-widest text-neutral-300">Studioform</span>
      <span class="text-xl font-semibold uppercase tracking-widest text-neutral-300">Halden</span>
      <span class="text-xl font-semibold uppercase tracking-widest text-neutral-300">Corvid</span>
      <span class="text-xl font-semibold uppercase tracking-widest text-neutral-300">Meridian</span>
      <span class="text-xl font-semibold uppercase tracking-widest text-neutral-300">Fernbrook</span>
      <span class="text-xl font-semibold uppercase tracking-widest text-neutral-300">Ashgrove</span>
      <span class="text-xl font-semibold uppercase tracking-widest text-neutral-300">Vantage</span>
      <span class="text-xl font-semibold uppercase tracking-widest text-neutral-300">Kestrel</span>
      <span class="text-xl font-semibold uppercase tracking-widest text-neutral-300">Oakline</span>

      <span aria-hidden="true" class="text-xl font-semibold uppercase tracking-widest text-neutral-300">Northwind</span>
      <span aria-hidden="true" class="text-xl font-semibold uppercase tracking-widest text-neutral-300">Studioform</span>
      <span aria-hidden="true" class="text-xl font-semibold uppercase tracking-widest text-neutral-300">Halden</span>
      <span aria-hidden="true" class="text-xl font-semibold uppercase tracking-widest text-neutral-300">Corvid</span>
      <span aria-hidden="true" class="text-xl font-semibold uppercase tracking-widest text-neutral-300">Meridian</span>
      <span aria-hidden="true" class="text-xl font-semibold uppercase tracking-widest text-neutral-300">Fernbrook</span>
      <span aria-hidden="true" class="text-xl font-semibold uppercase tracking-widest text-neutral-300">Ashgrove</span>
      <span aria-hidden="true" class="text-xl font-semibold uppercase tracking-widest text-neutral-300">Vantage</span>
      <span aria-hidden="true" class="text-xl font-semibold uppercase tracking-widest text-neutral-300">Kestrel</span>
      <span aria-hidden="true" class="text-xl font-semibold uppercase tracking-widest text-neutral-300">Oakline</span>
    </div>
  </div>
</section>

<style>
  /* The track holds two identical halves, so -50% lands exactly on a repeat. */
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .marquee-track { animation: marquee 30s linear infinite; }
  .marquee-mask:hover .marquee-track { animation-play-state: paused; }
  .marquee-mask { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
</style>