Animated Gradient Hero Banner with Responsive CTAs

<div class="sm:px-6 lg:px-8 [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] max-w-7xl mr-auto ml-auto pr-4 pl-4">
  <div class="overflow-hidden xl:bg-neutral-950/60 border border-white/20 border-dashed rounded-none mt-6 relative">
    <!-- Radial beams / grid overlay -->
    <div class="pointer-events-none absolute inset-0">
      <div
        class="absolute inset-0 opacity-70 [mask-image:radial-gradient(65%_65%_at_50%_50%,black,transparent)] bg-[radial-gradient(1200px_400px_at_50%_-10%,rgba(16,185,129,0.25),transparent),radial-gradient(1200px_600px_at_50%_120%,rgba(59,130,246,0.2),transparent)]">
      </div>
      <div
        class="absolute inset-0 opacity-[0.18] [mask-image:radial-gradient(80%_80%_at_50%_50%,black,transparent)] bg-[linear-gradient(to_right,rgba(255,255,255,.7)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,.7)_1px,transparent_1px)] bg-[size:28px_28px]">
      </div>
      <div class="absolute inset-0 bg-gradient-to-b from-black/50 via-transparent to-black"></div>
    </div>

    <!-- Floating utility icon -->
    <div class="absolute left-5 top-5" style="visibility: hidden;">
      <div
        class="flex h-9 w-9 items-center justify-center rounded-lg bg-sky-500/20 ring-1 ring-sky-400/30 backdrop-blur">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="refresh-cw"
          class="lucide lucide-refresh-cw h-5 w-5 text-sky-300">
          <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" class=""></path>
          <path d="M21 3v5h-5" class=""></path>
          <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" class=""></path>
          <path d="M8 16H3v5" class=""></path>
        </svg>
      </div>
    </div>

    <!-- Content -->
    <div
      class="flex min-h-[68vh] flex-col sm:py-28 md:min-h-[76vh] text-center mr-auto ml-auto pt-24 pr-6 pb-24 pl-6 relative items-center justify-center">
      <!-- Badge -->
      <a href="#"
        class="inline-flex items-center gap-2 text-[13px] transition hover:bg-emerald-400/15 [animation:fadeSlideIn_0.8s_ease-out_0.3s_both] font-medium text-emerald-300 bg-emerald-400/10 rounded-full ring-emerald-300/25 ring-1 pt-1.5 pr-3.5 pb-1.5 pl-3.5">
        <span class="uppercase tracking-widest text-[11px] text-emerald-200/90">
                New
              </span>
        <span class="tabular-nums">2025 October Release</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
          data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right h-4 w-4">
          <path d="M7 7h10v10" class=""></path>
          <path d="M7 17 17 7" class=""></path>
        </svg>
      </a>

      <!-- Heading -->
      <h1
        class="sm:text-5xl md:text-6xl [animation:fadeSlideIn_0.8s_ease-out_0.4s_both] text-4xl font-light text-white tracking-tighter font-geist max-w-4xl mt-6">
        Deploy at warp speed.One command. Zero worry.
      </h1>

      <!-- Subheading -->
      <p class="sm:text-lg [animation:fadeSlideIn_0.8s_ease-out_0.5s_both] text-base text-zinc-300 max-w-2xl mt-5">
        No configs or servers to babysit. Pulse ships your app globally
        and keeps it fast 24/7.
      </p>

      <!-- CTAs -->
      <div
        class="flex flex-col sm:flex-row [animation:fadeSlideIn_0.8s_ease-out_0.6s_both] mt-8 gap-x-3 gap-y-3 items-center">
        <a href="#"
          class="inline-flex items-center justify-center transition overflow-hidden text-sm font-medium rounded-lg"
          style="padding: 10px 20px; font-size: 14px; font-weight: 500; color: rgb(255, 255, 255); text-shadow: none; background: transparent; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.5); user-select: none; font-family: Inter, ui-sans-serif, system-ui, -apple-system; box-shadow: none; text-transform: none;"
          onmouseover="this.style.color='#ffffff'; this.style.background='#10b981'; this.style.border='1px solid #10b981'; this.style.textShadow='0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 20px #ffffff'; this.style.boxShadow='0 0 5px #10b981, 0 0 20px #10b981, 0 0 50px #10b981, 0 0 100px #10b981'"
          onmouseout="this.style.color='#ffffff'; this.style.background='transparent'; this.style.border='1px solid rgba(255, 255, 255, 0.5)'; this.style.textShadow='none'; this.style.boxShadow='none'">
          Join waitlist
        </a>

        <a href="#"
          class="inline-flex items-center justify-center transition overflow-hidden text-sm font-medium text-black bg-white rounded-lg"
          style="padding: 10px 20px;">
          Learn more
        </a>
      </div>
    </div>
  </div>

  <!-- Secondary actions for small screens -->
  <div class="flex md:hidden mt-4 items-center justify-between" style="display: none;">
    <button class="rounded-xl bg-white/5 px-4 py-2 text-sm text-zinc-200 ring-1 ring-white/10">
            Contact
          </button>
    <button class="rounded-xl bg-white px-4 py-2 text-sm text-black ring-1 ring-black/10">
            Join waitlist
          </button>
  </div>
</div>