Responsive Fixed Header with Mobile Slide-in Menu

<header class="fixed z-30 w-full top-0 left-0"
  data-element-locator="html &gt; body:nth-of-type(1) &gt; header:nth-of-type(1)">
  <div class="sm:px-6 lg:px-8 max-w-7xl mr-auto ml-auto pr-4 pl-4">
    <div class="flex pt-5 pb-5 items-center justify-between [animation:fadeSlideIn_0.5s_ease-out_0.1s_both]">
      <a href="#"
        class="bg-center text-2xl font-semibold tracking-tighter w-[140px] h-[36px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8cc3fd60-0bf0-41ad-a08b-be684f266e22_1600w.png)] bg-cover"></a>
      <nav class="hidden md:flex items-center gap-8 text-sm text-slate-400">
        <a href="#features" class="hover:text-white transition">Features</a>
        <a href="#how-it-works" class="hover:text-white transition">How it works</a>
        <a href="#pricing" class="hover:text-white transition">Pricing</a>
      </nav>
      <div class="flex items-center gap-3">
        <button class="hidden sm:inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-slate-300 hover:bg-white/5 transition">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="m10 17 5-5-5-5" class=""></path><path d="M15 12H3" class=""></path><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" class=""></path></svg>
            Sign in
          </button>
        <button id="mobileMenuBtn" class="md:hidden inline-flex items-center justify-center w-10 h-10 rounded-lg bg-white/5 border border-white/10 text-slate-300 hover:bg-white/10 transition backdrop-blur-sm">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 transition-transform duration-300">
              <line x1="3" y1="12" x2="21" y2="12" class=""></line>
              <line x1="3" y1="6" x2="21" y2="6" class=""></line>
              <line x1="3" y1="18" x2="21" y2="18" class=""></line>
            </svg>
          </button>
      </div>
    </div>
  </div>

  <!-- Mobile Menu -->
  <div id="mobileMenu" class="fixed inset-0 z-50 hidden">
    <div class="absolute inset-0 bg-slate-950/80 backdrop-blur-md transition-opacity duration-300"
      id="mobileMenuOverlay"></div>
    <div
      class="absolute right-0 top-0 bottom-0 w-full max-w-sm bg-slate-900/95 backdrop-blur-lg border-l border-white/10 shadow-2xl transform transition-transform duration-300 translate-x-full"
      id="mobileMenuPanel">
      <div class="flex items-center justify-between p-4 border-b border-white/10">
        <span class="text-sm font-medium text-slate-300">Menu</span>
        <button id="mobileMenuClose" class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-white/5 border border-white/10 text-slate-300 hover:bg-white/10 transition">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5">
              <line x1="18" y1="6" x2="6" y2="18" class=""></line>
              <line x1="6" y1="6" x2="18" y2="18" class=""></line>
            </svg>
          </button>
      </div>
      <nav class="p-6 space-y-1">
        <a href="#features"
          class="block px-4 py-3 text-base text-slate-300 hover:text-white hover:bg-white/5 rounded-lg transition">Features</a>
        <a href="#how-it-works"
          class="block px-4 py-3 text-base text-slate-300 hover:text-white hover:bg-white/5 rounded-lg transition">How
          it works</a>
        <a href="#pricing"
          class="block px-4 py-3 text-base text-slate-300 hover:text-white hover:bg-white/5 rounded-lg transition">Pricing</a>
        <div class="pt-4 border-t border-white/10 mt-4">
          <a href="#"
            class="flex items-center justify-center gap-2 w-full px-4 py-3 text-base font-medium text-white bg-lime-600 hover:bg-lime-500 rounded-lg transition">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
              <path d="m10 17 5-5-5-5" class=""></path>
              <path d="M15 12H3" class=""></path>
              <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" class=""></path>
            </svg>
            Sign in
          </a>
        </div>
      </nav>
    </div>
  </div>

  <script>
    (function() {
        const menuBtn = document.getElementById('mobileMenuBtn');
        const menu = document.getElementById('mobileMenu');
        const menuPanel = document.getElementById('mobileMenuPanel');
        const closeBtn = document.getElementById('mobileMenuClose');
        const overlay = document.getElementById('mobileMenuOverlay');
        const menuLinks = menu.querySelectorAll('nav a');
        
        function openMenu() {
          menu.classList.remove('hidden');
          document.body.style.overflow = 'hidden';
          setTimeout(() => {
            menuPanel.classList.remove('translate-x-full');
            overlay.classList.remove('opacity-0');
          }, 10);
        }
        
        function closeMenu() {
          menuPanel.classList.add('translate-x-full');
          overlay.classList.add('opacity-0');
          setTimeout(() => {
            menu.classList.add('hidden');
            document.body.style.overflow = '';
          }, 300);
        }
        
        menuBtn.addEventListener('click', openMenu);
        closeBtn.addEventListener('click', closeMenu);
        overlay.addEventListener('click', closeMenu);
        
        menuLinks.forEach(link => {
          link.addEventListener('click', closeMenu);
        });
      })();
  </script>

  <!-- Progressive Blur Top -->
  <div class="gradient-blur">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <style>
    .gradient-blur {
      position: fixed;
      z-index: -10;
      inset: 0 0 auto 0;
      height: 15%;
      pointer-events: none;
    }

    .gradient-blur>div,
    .gradient-blur::before,
    .gradient-blur::after {
      position: absolute;
      inset: 0;
    }

    .gradient-blur::before {
      content: "";
      z-index: 1;
      backdrop-filter: blur(0.5px);
      mask: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 12.5%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0) 37.5%);
    }

    .gradient-blur>div:nth-of-type(1) {
      z-index: 2;
      backdrop-filter: blur(1px);
      mask: linear-gradient(to top, rgba(0, 0, 0, 0) 12.5%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 1) 37.5%, rgba(0, 0, 0, 0) 50%);
    }

    .gradient-blur>div:nth-of-type(2) {
      z-index: 3;
      backdrop-filter: blur(2px);
      mask: linear-gradient(to top, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 1) 37.5%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 62.5%);
    }

    .gradient-blur>div:nth-of-type(3) {
      z-index: 4;
      backdrop-filter: blur(4px);
      mask: linear-gradient(to top, rgba(0, 0, 0, 0) 37.5%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 62.5%, rgba(0, 0, 0, 0) 75%);
    }

    .gradient-blur>div:nth-of-type(4) {
      z-index: 5;
      backdrop-filter: blur(8px);
      mask: linear-gradient(to top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 62.5%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 87.5%);
    }

    .gradient-blur>div:nth-of-type(5) {
      z-index: 6;
      backdrop-filter: blur(16px);
      mask: linear-gradient(to top, rgba(0, 0, 0, 0) 62.5%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 1) 87.5%, rgba(0, 0, 0, 0) 100%);
    }

    .gradient-blur>div:nth-of-type(6) {
      z-index: 7;
      backdrop-filter: blur(32px);
      mask: linear-gradient(to top, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 1) 87.5%, rgba(0, 0, 0, 1) 100%);
    }

    .gradient-blur::after {
      content: "";
      z-index: 8;
      backdrop-filter: blur(64px);
      mask: linear-gradient(to top, rgba(0, 0, 0, 0) 87.5%, rgba(0, 0, 0, 1) 100%);
    }
  </style>
</header>