Navbar Transparent

<!-- Transparent navbar sits over a hero image. In production: position absolute/fixed over your hero section. -->
<div class="ws-navbar relative overflow-hidden rounded-xl" style="min-height: 260px; background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 60%, #312e81 100%); --navbar-text: var(--ws-color-text);"> <!-- ws-ok: demo hero wrapper -->

  <!-- Mock hero content -->
  <div class="flex flex-col items-center justify-center px-6 pt-24 pb-10 text-center">
    <p class="text-2xl font-bold text-white/80">Your Hero Headline</p>
    <p class="mt-2 text-sm text-white/40">Transparent navbar sits above this content</p>
  </div>

  <!-- Transparent navbar -->
  <nav class="absolute inset-x-0 top-0 z-50" aria-label="Main navigation">
    <div class="mx-auto flex max-w-7xl items-center justify-between px-6 py-5">
      <a href="#" class="text-lg font-bold text-white">Webspire</a>

      <div class="hidden items-center gap-8 md:flex">
        <a href="#" class="text-sm font-medium text-white/70 transition hover:text-white">Features</a>
        <a href="#" class="text-sm font-medium text-white/70 transition hover:text-white">Pricing</a>
        <a href="#" class="text-sm font-medium text-white/70 transition hover:text-white">Docs</a>
        <a href="#" class="text-sm font-medium text-white/70 transition hover:text-white">Blog</a>
      </div>

      <div class="hidden items-center gap-3 md:flex">
        <a href="#" class="text-sm font-medium text-white/70 transition hover:text-white">Sign in</a>
        <a href="#" class="rounded-lg border border-white/20 bg-white/10 px-4 py-2 text-sm font-semibold text-white backdrop-blur transition hover:bg-white/20">Get Started</a>
      </div>

      <button type="button" class="text-white md:hidden" aria-label="Open menu">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/></svg>
      </button>
    </div>
  </nav>

</div>