Glass Navigation Header

<div class="fixed top-0 left-0 right-0 z-40">
  <style>
    .font-sans { font-family: 'Inter', sans-serif; } .gradient-border-btn { position: relative; isolation: isolate; padding: 3px; border-radius: 10px; overflow: hidden; background-color: transparent; } .gradient-border-btn .cp-border { position: absolute; top: 0px; left: 0px; height: 100%; width: 400%; background: linear-gradient(115deg, rgb(79, 207, 112), rgb(250, 214, 72), rgb(167, 103, 229), rgb(18, 188, 254), rgb(68, 206, 123)) 0% 0% / 25% 100%; transform: translateX(-5%); z-index: 0; transition: transform .25s ease-out; } .gradient-border-btn:hover .cp-border { transition: transform .75s linear; }
  </style>
  <div class="max-w-7xl mr-auto ml-auto px-4 sm:px-6">
    <div class="mt-4 rounded-2xl border border-white/30 bg-white/60 backdrop-blur-md shadow-sm">
      <div class="flex pt-3 pr-4 pb-3 pl-4 items-center justify-between">
        <div class="flex items-center gap-2">
          <i data-lucide="sparkles" class="w-5 h-5 text-rose-500" style="stroke-width: 1.5;"></i>
          <span class="text-3xl tracking-tight font-sans font-semibold">Glow</span>
        </div>
        <nav class="hidden md:flex items-center gap-6 text-sm text-zinc-600">
          <a href="#" class="font-medium hover:text-zinc-900 transition-colors font-sans">Rituals</a>
          <a href="#" class="font-medium hover:text-zinc-900 transition-colors font-sans">Journal</a>
          <a href="#" class="font-medium hover:text-zinc-900 transition-colors font-sans">Analytics</a>
          <a href="#" class="font-medium hover:text-zinc-900 transition-colors font-sans">Community</a>
        </nav>
        <div class="flex gap-2 items-center">
          <button class="hidden sm:inline-flex items-center gap-1.5 text-sm font-medium text-zinc-700 hover:text-zinc-900 transition-colors font-sans">
            Search
            <i data-lucide="search" class="w-4 h-4" style="stroke-width: 1.5;"></i>
          </button>
          <a href="#" class="inline-flex items-center hover:bg-zinc-800 transition-colors text-sm font-medium text-white bg-zinc-900 rounded-lg pt-1.5 pr-3 pb-1.5 pl-3 gradient-border-btn" onmouseenter="this.dataset.h='1'; const g=this.querySelector('.cp-border'); if(!g) return; g.style.transition='transform .75s linear'; let dir=0; (function loop(){ if (this.dataset.h!=='1') return; dir = dir===0 ? -25 : 0; g.style.transform='translateX('+dir+'%)'; setTimeout(loop.bind(this),750); }).call(this);" onmouseleave="this.dataset.h='0'; const g=this.querySelector('.cp-border'); if(!g) return; g.style.transition='transform .25s ease-out'; g.style.transform='translateX(-5%)';">
            <div class="cp-border" aria-hidden="true"></div>
            <span style="position: relative; display: block; padding: 0.5rem 0.75rem; font-size: 0.875rem; background: #000; border-radius: 8px; height: 100%; z-index: 1;" class="font-sans">Get started</span>
          </a>
        </div>
      </div>
    </div>
  </div>
  <script>if (typeof lucide !== 'undefined') { lucide.createIcons(); }</script>
</div>