Hamburger Menu 컴포넌트

<div class="relative bg-gradient-to-br from-purple-900 to-indigo-900 min-h-screen font-sans antialiased dark:from-gray-900 dark:to-black">
  <nav class="relative container mx-auto px-4 py-6 flex items-center justify-between z-20">
    <!-- Logo -->
    <a href="#" class="text-4xl font-bold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-pink-400 via-purple-400 to-indigo-400 shadow-text-neon text-shadow-glow-pink-indigo transition-transform duration-300 hover:scale-105">
      LUMINA
    </a>

    <!-- Hamburger Button (Mobile) -->
    <div class="md:hidden">
      <button id="menu-toggle" class="relative w-10 h-10 flex items-center justify-center p-2 rounded-full border-2 border-pink-400 group focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:border-purple-600 dark:focus:ring-purple-700">
        <span class="block absolute w-7 h-0.5 bg-pink-400 transition-all duration-300 ease-in-out group-hover:bg-pink-300 group-[.open]:h-0 group-[.open]:top-1/2 group-[.open]:-rotate-45 dark:bg-purple-600 dark:group-hover:bg-purple-500" style="top: calc(50% - 7px);"></span>
        <span class="block absolute w-7 h-0.5 bg-pink-400 transition-all duration-300 ease-in-out group-hover:bg-pink-300 group-[.open]:opacity-0 dark:bg-purple-600 dark:group-hover:bg-purple-500"></span>
        <span class="block absolute w-7 h-0.5 bg-pink-400 transition-all duration-300 ease-in-out group-hover:bg-pink-300 group-[.open]:h-0 group-[.open]:top-1/2 group-[.open]:rotate-45 dark:bg-purple-600 dark:group-hover:bg-purple-500" style="top: calc(50% + 6px);"></span>
      </button>
    </div>

    <!-- Desktop Menu -->
    <ul class="hidden md:flex space-x-8 text-lg font-medium">
      <li><a href="#" class="py-2 px-3 text-pink-300 transition-colors duration-300 hover:text-pink-100 hover:shadow-text-glow-sm hover:underline hover:underline-offset-4 decoration-pink-500 dark:text-purple-400 dark:hover:text-purple-200 dark:decoration-purple-600">Home</a></li>
      <li><a href="#" class="py-2 px-3 text-pink-300 transition-colors duration-300 hover:text-pink-100 hover:shadow-text-glow-sm hover:underline hover:underline-offset-4 decoration-pink-500 dark:text-purple-400 dark:hover:text-purple-200 dark:decoration-purple-600">Products</a></li>
      <li><a href="#" class="py-2 px-3 text-pink-300 transition-colors duration-300 hover:text-pink-100 hover:shadow-text-glow-sm hover:underline hover:underline-offset-4 decoration-pink-500 dark:text-purple-400 dark:hover:text-purple-200 dark:decoration-purple-600">About</a></li>
      <li><a href="#" class="py-2 px-3 text-pink-300 transition-colors duration-300 hover:text-pink-100 hover:shadow-text-glow-sm hover:underline hover:underline-offset-4 decoration-pink-500 dark:text-purple-400 dark:hover:text-purple-200 dark:decoration-purple-600">Contact</a></li>
    </ul>
  </nav>

  <!-- Mobile Menu (Hidden by default) -->
  <div id="mobile-menu" class="hidden fixed inset-0 bg-gradient-to-br from-purple-800 to-indigo-800 backdrop-blur-md z-10 flex flex-col items-center justify-center space-y-8 md:hidden dark:from-gray-800 dark:to-black dark:border-t dark:border-purple-700 transform -translate-y-full opacity-0 transition-all duration-500 ease-in-out">
    <ul class="text-center space-y-6 text-2xl font-bold flex flex-col justify-center items-center">
      <li><a href="#" class="py-3 px-6 text-pink-200 hover:text-pink-50 transition-colors duration-200 block border-b border-pink-400/30 hover:border-pink-300/80 dark:text-purple-300 dark:hover:text-purple-100 dark:border-purple-600/30 dark:hover:border-purple-500/80">Home</a></li>
      <li><a href="#" class="py-3 px-6 text-pink-200 hover:text-pink-50 transition-colors duration-200 block border-b border-pink-400/30 hover:border-pink-300/80 dark:text-purple-300 dark:hover:text-purple-100 dark:border-purple-600/30 dark:hover:border-purple-500/80">Products</a></li>
      <li><a href="#" class="py-3 px-6 text-pink-200 hover:text-pink-50 transition-colors duration-200 block border-b border-pink-400/30 hover:border-pink-300/80 dark:text-purple-300 dark:hover:text-purple-100 dark:border-purple-600/30 dark:hover:border-purple-500/80">About</a></li>
      <li><a href="#" class="py-3 px-6 text-pink-200 hover:text-pink-50 transition-colors duration-200 block border-b border-pink-400/30 hover:border-pink-300/80 dark:text-purple-300 dark:hover:text-purple-100 dark:border-purple-600/30 dark:hover:border-purple-500/80">Contact</a></li>
    </ul>
  </div>

  <!-- Content beneath the header for demonstration of z-index and menu overlay -->
  <div class="relative z-0 max-w-4xl mx-auto p-8 rounded-lg mt-10 bg-white/10 backdrop-blur-md shadow-2xl shadow-purple-900/50 dark:bg-gray-800/20 dark:shadow-black/50 border border-purple-500/30 dark:border-gray-700/30">
    <h1 class="text-5xl font-extrabold text-pink-200 mb-6 tracking-wide text-shadow-glow-pink dark:text-purple-300 text-center">
      Elevate Your Beauty
    </h1>
    <p class="text-xl text-gray-100 leading-relaxed dark:text-gray-200 text-center">
      Discover our exquisite collection of beauty essentials designed to illuminate your natural radiance. Experience the future of cosmetics.
    </p>
    <img src="https://picsum.photos/seed/fashion/800/400" alt="placeholder beauty product" class="mt-8 w-full h-auto rounded-lg shadow-xl shadow-pink-500/30 dark:shadow-purple-700/30 border-2 border-pink-400 dark:border-purple-600">
  </div>

  <style>
    /* Custom utility for neon text shadow */
    .text-shadow-glow-pink {
      text-shadow: 0 0 5px rgba(255, 105, 180, 0.7),
                   0 0 10px rgba(255, 105, 180, 0.5),
                   0 0 15px rgba(255, 105, 180, 0.3),
                   0 0 20px rgba(255, 105, 180, 0.2);
    }
    .dark .text-shadow-glow-pink {
      text-shadow: 0 0 5px rgba(160, 0, 255, 0.7),
                   0 0 10px rgba(160, 0, 255, 0.5),
                   0 0 15px rgba(160, 0, 255, 0.3),
                   0 0 20px rgba(160, 0, 255, 0.2);
    }
    .text-shadow-glow-sm {
      text-shadow: 0 0 2px rgba(255, 105, 180, 0.4),
                   0 0 4px rgba(255, 105, 180, 0.3),
                   0 0 6px rgba(255, 105, 180, 0.2);
    }
    .dark .text-shadow-glow-sm {
      text-shadow: 0 0 2px rgba(160, 0, 255, 0.4),
                   0 0 4px rgba(160, 0, 255, 0.3),
                   0 0 6px rgba(160, 0, 255, 0.2);
    }
    .shadow-text-neon {
      text-shadow: 0 0 7px rgba(255, 105, 180, 0.8),
                   0 0 10px rgba(173, 216, 230, 0.6),
                   0 0 15px rgba(128, 0, 128, 0.4);
    }
    .text-shadow-glow-pink-indigo {
      text-shadow: 0 0 8px #f472b6,   /* pink-400 */
                   0 0 12px #a78bfa,  /* violet-400 */
                   0 0 16px #c084fc,  /* purple-400 */
                   0 0 20px rgba(236, 72, 153, 0.3), /* pink-500 */
                   0 0 25px rgba(139, 92, 246, 0.2); /* violet-500 */
    }
  </style>

  <script>
    // This is for demonstration purposes. In a real project, this would be in a separate JS file.
    document.addEventListener('DOMContentLoaded', () => {
      const menuToggle = document.getElementById('menu-toggle');
      const mobileMenu = document.getElementById('mobile-menu');

      menuToggle.addEventListener('click', () => {
        const isOpen = menuToggle.classList.toggle('open');
        if (isOpen) {
          mobileMenu.classList.remove('-translate-y-full', 'opacity-0');
          mobileMenu.classList.add('translate-y-0', 'opacity-100');
        } else {
          mobileMenu.classList.remove('translate-y-0', 'opacity-100');
          mobileMenu.classList.add('-translate-y-full', 'opacity-0');
        }
      });

      // Close mobile menu when a link is clicked
      mobileMenu.querySelectorAll('a').forEach(link => {
        link.addEventListener('click', () => {
          menuToggle.classList.remove('open');
          mobileMenu.classList.remove('translate-y-0', 'opacity-100');
          mobileMenu.classList.add('-translate-y-full', 'opacity-0');
        });
      });
    });
  </script>
</div>