Promo Banner

<!--
  A gradient promo card. White text sits on the gradient, so a bg-black/25 scrim
  layer sits between them to hold WCAG-AA contrast wherever the gradient lands -
  the text is never trusted to the gradient alone. The CTA stacks below the copy
  on mobile and goes full width.
-->
<section class="relative w-full overflow-hidden rounded-2xl bg-gradient-to-br from-indigo-600 via-purple-600 to-fuchsia-600">
  <div class="absolute inset-0 bg-black/25" aria-hidden="true"></div>
  <div class="relative flex flex-col items-start gap-5 p-6 sm:p-8 md:flex-row md:items-center md:justify-between">
    <div class="min-w-0">
      <span class="inline-block rounded-full bg-white/20 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-white">Limited time</span>
      <h2 class="mt-3 text-2xl font-bold leading-tight tracking-tight text-white sm:text-3xl">Save 30% on annual plans</h2>
      <p class="mt-2 text-sm leading-relaxed text-white/90 sm:text-base">Switch to yearly billing before the end of the month and lock in the launch price for good.</p>
    </div>
    <a
      href="#"
      class="inline-flex w-full flex-none items-center justify-center rounded-lg bg-white px-6 py-3 text-sm font-semibold text-gray-900 transition-colors hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-purple-600 motion-reduce:transition-none md:w-auto"
    >
      Claim offer
    </a>
  </div>
</section>