Responsive Navbar with Animated Mobile Overlay

<header class="relative w-full">
  <nav class="flex max-w-7xl mr-auto ml-auto pt-2 pr-6 pb-0 pl-6 items-center justify-between">
    <a href="/home"
      class="inline-flex items-center justify-center bg-center mix-blend-screen w-[220px] h-[80px] bg-[url(https://cdn.midjourney.com/a72bbd5b-73b8-4664-a9cb-f1a8c572b5b6/0_0.png?w=800&amp;q=80)] bg-cover rounded invert-0"></a>
    <div class="hidden md:flex items-center gap-8">
      <a class="hover:text-white transition-colors text-sm font-medium text-neutral-300" href="/features">Features</a>
      <a class="hover:text-white transition-colors text-sm font-medium text-neutral-300" href="/how-it-works">How It
        Works</a>
      <a class="hover:text-white transition-colors text-sm font-medium text-neutral-300" href="/roadmap">Roadmap</a>
      <a class="hover:text-white transition-colors text-sm font-medium text-neutral-300" href="/pricing">Pricing</a>
    </div>
    <div class="hidden md:flex items-center gap-3">
      <a href="#"
        class="px-3.5 py-2 rounded-lg bg-white/5 hover:bg-white/10 ring-1 ring-white/10 text-sm font-medium transition-colors">Sign
        in</a>
      <a href="#"
        class="inline-flex items-center gap-2 hover:from-sky-400 hover:to-indigo-400 transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-sky-500/30 active:scale-95 text-sm font-medium text-white tracking-tight bg-gradient-to-r from-sky-500 to-indigo-500 rounded-xl pt-2.5 pr-4 pb-2.5 pl-4">Get
        started</a>
    </div>
    <button id="mobileMenuToggle" class="md:hidden p-2 rounded-lg bg-white/5 hover:bg-white/10 ring-1 ring-white/10 transition-all duration-300 z-50 relative" aria-label="Toggle menu">
      <svg id="hamburgerIcon" 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" class="lucide lucide-menu h-5 w-5 transition-all duration-300" style="stroke-width:1.5;"><path d="M4 5h16" class=""></path><path d="M4 12h16" class=""></path><path d="M4 19h16" class=""></path></svg>
      <svg id="closeIcon" 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" class="lucide lucide-x h-5 w-5 absolute inset-0 m-auto opacity-0 transition-all duration-300 transform rotate-90" style="stroke-width:1.5;"><path d="M18 6 6 18" class=""></path><path d="m6 6 12 12" class=""></path></svg>
    </button>
  </nav>

  <!-- Mobile Menu -->
  <div id="mobileMenu"
    class="fixed inset-0 z-40 bg-neutral-950/90 backdrop-blur-md opacity-0 invisible transition-all duration-300">
    <div class="absolute inset-0 bg-gradient-to-b from-neutral-950/95 to-neutral-900/95"></div>
    <div class="relative h-full flex flex-col justify-center items-center">
      <!-- Navigation Links -->
      <nav class="flex flex-col items-center space-y-8 mb-12">
        <a href="/features"
          class="text-2xl font-medium text-white hover:text-sky-300 transition-all duration-300 transform hover:scale-110 opacity-0 translate-y-4"
          style="animation-delay: 100ms;">Features</a>
        <a href="/how-it-works"
          class="text-2xl font-medium text-white hover:text-sky-300 transition-all duration-300 transform hover:scale-110 opacity-0 translate-y-4"
          style="animation-delay: 200ms;">How It Works</a>
        <a href="/roadmap"
          class="text-2xl font-medium text-white hover:text-sky-300 transition-all duration-300 transform hover:scale-110 opacity-0 translate-y-4"
          style="animation-delay: 300ms;">Roadmap</a>
        <a href="/pricing"
          class="text-2xl font-medium text-white hover:text-sky-300 transition-all duration-300 transform hover:scale-110 opacity-0 translate-y-4"
          style="animation-delay: 400ms;">Pricing</a>
      </nav>

      <!-- Action Buttons -->
      <div class="flex flex-col items-center space-y-4 opacity-0 translate-y-4" style="animation-delay: 500ms;">
        <a href="#"
          class="px-8 py-3 rounded-lg bg-white/10 hover:bg-white/20 ring-1 ring-white/20 text-lg font-medium text-white transition-all duration-300 hover:scale-105 min-w-[200px] text-center">Sign
          in</a>
        <a href="#"
          class="px-8 py-3 rounded-xl bg-gradient-to-r from-sky-500 to-indigo-500 hover:from-sky-400 hover:to-indigo-400 text-lg font-medium text-white transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-sky-500/30 min-w-[200px] text-center">Get
          started</a>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const mobileMenuToggle = document.getElementById('mobileMenuToggle');
      const mobileMenu = document.getElementById('mobileMenu');
      const hamburgerIcon = document.getElementById('hamburgerIcon');
      const closeIcon = document.getElementById('closeIcon');
      const body = document.body;
      let isMenuOpen = false;

      function toggleMenu() {
        isMenuOpen = !isMenuOpen;
        
        if (isMenuOpen) {
          openMenu();
        } else {
          closeMenu();
        }
      }

      function openMenu() {
        // Show menu
        mobileMenu.classList.remove('opacity-0', 'invisible');
        mobileMenu.classList.add('opacity-100', 'visible');
        
        // Toggle icons
        hamburgerIcon.style.opacity = '0';
        hamburgerIcon.style.transform = 'rotate(-90deg)';
        closeIcon.style.opacity = '1';
        closeIcon.style.transform = 'rotate(0deg)';
        
        // Prevent body scroll
        body.style.overflow = 'hidden';
        
        // Animate menu items
        const menuItems = mobileMenu.querySelectorAll('nav a, .flex.flex-col.items-center.space-y-4');
        menuItems.forEach((item, index) => {
          setTimeout(() => {
            item.style.opacity = '1';
            item.style.transform = 'translateY(0)';
            item.style.transition = 'all 0.3s ease-out';
          }, index * 100);
        });
        
        // Scale animation for menu background
        mobileMenu.style.transform = 'scale(1)';
      }

      function closeMenu() {
        // Hide menu items first
        const menuItems = mobileMenu.querySelectorAll('nav a, .flex.flex-col.items-center.space-y-4');
        menuItems.forEach((item) => {
          item.style.opacity = '0';
          item.style.transform = 'translateY(1rem)';
        });
        
        // Hide menu after animation
        setTimeout(() => {
          mobileMenu.classList.add('opacity-0', 'invisible');
          mobileMenu.classList.remove('opacity-100', 'visible');
        }, 200);
        
        // Toggle icons
        hamburgerIcon.style.opacity = '1';
        hamburgerIcon.style.transform = 'rotate(0deg)';
        closeIcon.style.opacity = '0';
        closeIcon.style.transform = 'rotate(90deg)';
        
        // Restore body scroll
        body.style.overflow = '';
        
        // Scale animation for menu background
        mobileMenu.style.transform = 'scale(0.95)';
      }

      // Toggle menu on button click
      mobileMenuToggle.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        toggleMenu();
      });

      // Close menu when clicking on menu background
      mobileMenu.addEventListener('click', function(e) {
        if (e.target === mobileMenu || e.target.closest('.absolute.inset-0')) {
          closeMenu();
          isMenuOpen = false;
        }
      });

      // Close menu on escape key
      document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && isMenuOpen) {
          closeMenu();
          isMenuOpen = false;
        }
      });

      // Close menu when clicking on navigation links
      const navLinks = mobileMenu.querySelectorAll('nav a');
      navLinks.forEach(link => {
        link.addEventListener('click', () => {
          closeMenu();
          isMenuOpen = false;
        });
      });

      // Handle window resize
      window.addEventListener('resize', function() {
        if (window.innerWidth >= 768 && isMenuOpen) {
          closeMenu();
          isMenuOpen = false;
        }
      });
    });
  </script>
</header>