Centered headline

Create a centered hero section with Tailwind CSS. Include a small pill announcement link at the top, a very large tight-tracking headline (with one accent word), a muted subheading paragraph, and two CTAs (a solid primary and a ghost secondary). Below, a row of small grayscale "trusted by" logos. Center everything with generous vertical padding.

<section class="mx-auto max-w-3xl px-6 py-24 text-center">
  <a href="#" class="inline-flex items-center gap-2 rounded-full border border-neutral-200 bg-white px-3 py-1 text-sm text-neutral-600 shadow-sm">
    <span class="rounded-full bg-neutral-900 px-2 py-0.5 text-xs text-white">New</span>
    Introducing v2.0 →
  </a>
  <h1 class="mt-6 text-5xl font-semibold tracking-tight text-neutral-900 sm:text-6xl">
    Ship products your <span class="text-indigo-600">users love</span>
  </h1>
  <p class="mx-auto mt-5 max-w-xl text-lg text-neutral-500">
    The all-in-one workspace to plan, build, and launch — without the tool sprawl.
  </p>
  <div class="mt-8 flex items-center justify-center gap-3">
    <a href="#" class="rounded-xl bg-neutral-900 px-5 py-3 text-sm font-medium text-white hover:bg-neutral-800">Start for free</a>
    <a href="#" class="rounded-xl border border-neutral-200 px-5 py-3 text-sm font-medium text-neutral-900 hover:bg-neutral-50">Book a demo</a>
  </div>
  <div class="mt-12 flex flex-wrap items-center justify-center gap-8 opacity-60">
    <span class="text-sm font-semibold text-neutral-500">Acme</span>
    <span class="text-sm font-semibold text-neutral-500">Globex</span>
    <span class="text-sm font-semibold text-neutral-500">Umbrella</span>
    <span class="text-sm font-semibold text-neutral-500">Initech</span>
  </div>
</section>