Neon_Glow_Header_Component

<header class="bg-gradient-to-r from-pink-300 to-purple-400 dark:from-gray-900 dark:to-purple-950 shadow-lg relative overflow-hidden">
    <div class="absolute inset-0 pointer-events-none"><div class="absolute inset-0 bg-white opacity-10 dark:opacity-5 blur-3xl"></div></div>
    <div class="container mx-auto px-4 py-4 md:py-6 flex justify-between items-center relative z-10">
        <!-- Logo/Brand Name -->
        <a href="#" class="flex items-center space-x-2">
            <svg class="h-8 w-8 text-white drop-shadow-[0_0_8px_rgba(255,255,255,0.7)] glow-effect-logo"
                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round">
                <path d="M12 2L2 7l10 5 10-5-10-5z" />
                <path d="M2 17l10 5 10-5" />
                <path d="M2 12l10 5 10-5" />
            </svg>
            <span
                class="text-white font-extrabold text-2xl tracking-tight leading-none drop-shadow-[0_0_8px_rgba(255,255,255,0.7)] group-hover:text-pink-500 transition-colors duration-300">
                Sweet<span
                    class="text-purple-700 drop-shadow-[0_0_8px_rgba(110,0,255,0.7)] dark:text-pink-400 dark:drop-shadow-[0_0_8px_rgba(255,100,200,0.7)]">SaaS</span>
            </span>
        </a>

        <!-- Desktop Navigation -->
        <nav class="hidden md:flex space-x-8 lg:space-x-12">
            <a href="#features"
                class="text-white text-lg font-semibold relative group transition-colors duration-300 hover:text-pink-200 dark:hover:text-purple-300">
                Features
                <span
                    class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline"></span>
            </a>
            <a href="#pricing"
                class="text-white text-lg font-semibold relative group transition-colors duration-300 hover:text-pink-200 dark:hover:text-purple-300">
                Pricing
                <span
                    class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline"></span>
            </a>
            <a href="#about"
                class="text-white text-lg font-semibold relative group transition-colors duration-300 hover:text-pink-200 dark:hover:text-purple-300">
                About
                <span
                    class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline"></span>
            </a>
            <a href="#contact"
                class="text-white text-lg font-semibold relative group transition-colors duration-300 hover:text-pink-200 dark:hover:text-purple-300">
                Contact
                <span
                    class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline"></span>
            </a>
        </nav>

        <!-- Action Buttons / User / Mobile Menu Toggle -->
        <div class="flex items-center space-x-4">
            <a href="#signin"
                class="hidden sm:block px-6 py-2 bg-white text-pink-500 rounded-full font-bold relative overflow-hidden group shadow-md transition-all duration-300 hover:shadow-lg dark:bg-purple-700 dark:text-white dark:hover:bg-purple-600">
                <span class="relative z-10">Sign In</span>
                <span
                    class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 glow-effect-button-hover"></span>
            </a>
            <a href="#signup"
                class="hidden sm:block px-6 py-2 bg-purple-600 text-white rounded-full font-bold relative overflow-hidden group shadow-md transition-all duration-300 hover:shadow-lg dark:bg-pink-500 dark:hover:bg-pink-400">
                <span class="relative z-10">Sign Up</span>
                <span
                    class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 glow-effect-button-hover"></span>
            </a>

            <!-- Mobile Menu Button -->
            <button class="md:hidden text-white focus:outline-none focus:ring-2 focus:ring-white rounded-md" aria-label="Toggle menu">
                <svg class="h-8 w-8 glow-effect-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16">
                    </path>
                </svg>
            </button>
        </div>
    </div>

    <!-- Mobile Menu (hidden by default, would be toggled with JS) -->
    <div class="md:hidden bg-gradient-to-b from-pink-300 to-purple-400 dark:from-gray-900 dark:to-purple-950 py-4 px-4 shadow-inner relative z-0" style="display: none;">
        <nav class="flex flex-col space-y-4">
            <a href="#features"
                class="block text-white text-lg font-semibold py-2 transition-colors duration-300 hover:pl-2 hover:text-pink-200 dark:hover:text-purple-300 relative group">
                Features
                <span
                    class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline glow-effect-mobile-line"></span>
            </a>
            <a href="#pricing"
                class="block text-white text-lg font-semibold py-2 transition-colors duration-300 hover:pl-2 hover:text-pink-200 dark:hover:text-purple-300 relative group">
                Pricing
                <span
                    class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline glow-effect-mobile-line"></span>
            </a>
            <a href="#about"
                class="block text-white text-lg font-semibold py-2 transition-colors duration-300 hover:pl-2 hover:text-pink-200 dark:hover:text-purple-300 relative group">
                About
                <span
                    class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline glow-effect-mobile-line"></span>
            </a>
            <a href="#contact"
                class="block text-white text-lg font-semibold py-2 transition-colors duration-300 hover:pl-2 hover:text-pink-200 dark:hover:text-purple-300 relative group">
                Contact
                <span
                    class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline glow-effect-mobile-line"></span>
            </a>
            <div class="pt-4 flex flex-col space-y-3">
                <a href="#signin"
                    class="block px-6 py-2 bg-white text-pink-500 rounded-full font-bold relative overflow-hidden group shadow-md transition-all duration-300 hover:shadow-lg dark:bg-purple-700 dark:text-white dark:hover:bg-purple-600">
                    <span class="relative z-10">Sign In</span>
                    <span
                        class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 glow-effect-button-hover"></span>
                </a>
                <a href="#signup"
                    class="block px-6 py-2 bg-purple-600 text-white rounded-full font-bold relative overflow-hidden group shadow-md transition-all duration-300 hover:shadow-lg dark:bg-pink-500 dark:hover:bg-pink-400">
                    <span class="relative z-10">Sign Up</span>
                    <span
                        class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 glow-effect-button-hover"></span>
                </a>
            </div>
        </nav>
    </div>

    <!-- Custom CSS for glow effects - these would typically be in a separate CSS file or utility classes if more complex -->
    <style>
        .glow-effect-logo {
            filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7));
            transition: filter 0.3s ease-in-out;
        }

        .group:hover .glow-effect-logo {
            filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.9));
        }

        .glow-effect-underline {
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
        }

        .glow-effect-button-hover {
            background: radial-gradient(circle at center, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
            filter: blur(8px);
            transform: scale(1.5);
            transition: all 0.3s ease-out;
        }

        .group:hover .glow-effect-button-hover {
            opacity: 1;
            transform: scale(1);
        }

        .glow-effect-icon {
            filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
            transition: filter 0.3s ease-in-out;
        }

        .glow-effect-icon:hover {
            filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9));
        }

        /* Dark mode specific glows */
        .dark .glow-effect-underline {
            box-shadow: 0 0 8px rgba(173, 216, 230, 0.5); /* Lighter blue for dark mode glow */
        }

        .dark .glow-effect-button-hover {
            background: radial-gradient(circle at center, rgba(173, 216, 230, 0.4) 0%, transparent 70%);
        }

        .dark .glow-effect-logo {
            filter: drop-shadow(0 0 8px rgba(173, 216, 230, 0.7)); /* Lighter blue for dark mode glow */
        }

        .dark .group:hover .glow-effect-logo {
            filter: drop-shadow(0 0 12px rgba(173, 216, 230, 0.9));
        }
    </style>
</header>