Hero Video

<section class="ws-hero relative flex min-h-[80vh] items-center overflow-hidden">
  <!-- Video background -->
  <video autoplay loop muted playsinline class="absolute inset-0 h-full w-full object-cover">
    <source src="#replace-with-video-url" type="video/mp4">
  </video>

  <!-- Overlay -->
  <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/50 to-black/30" aria-hidden="true"></div>

  <!-- Content -->
  <div class="relative mx-auto max-w-3xl px-6 py-32 text-center">
    <h1 class="text-balance text-4xl font-bold tracking-tight text-white sm:text-5xl lg:text-6xl">Build something extraordinary</h1>
    <p class="mx-auto mt-6 max-w-xl text-pretty text-lg text-[var(--ws-hero-text-soft)]">Production-ready UI patterns that help you ship beautiful products faster. No dependencies, just copy and paste.</p>
    <div class="mt-10 flex flex-wrap justify-center gap-4">
      <a href="#" class="rounded-xl bg-white px-6 py-3 text-sm font-semibold text-slate-900 shadow-lg transition hover:bg-slate-100">Get started</a> <!-- ws-ok -->
      <a href="#" class="rounded-xl border border-white/30 bg-white/10 px-6 py-3 text-sm font-semibold text-white backdrop-blur transition hover:bg-white/20">Watch demo</a>
    </div>
  </div>
</section>