Компонент «Липкая навигация»

<header class="sticky top-0 z-50 bg-gradient-to-r from-purple-900 to-indigo-900 shadow-lg dark:bg-gradient-to-r dark:from-gray-900 dark:to-black backdrop-blur-sm bg-opacity-70 dark:bg-opacity-70">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between">
    <div class="flex items-center space-x-2">
      <svg class="h-8 w-8 text-purple-300 drop-shadow-[0_0_5px_rgba(192,132,252,0.8)] dark:text-purple-500 dark:drop-shadow-[0_0_8px_rgba(168,85,247,0.9)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
      </svg>
      <a href="#" class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-200 to-fuchsia-300 drop-shadow-[0_0_8px_rgba(233,213,255,0.7)] dark:from-purple-400 dark:to-white dark:drop-shadow-[0_0_10px_rgba(255,255,255,0.8)]">
        EduGlow
      </a>
    </div>

    <!-- Mobile menu button -->
    <div class="md:hidden">
      <button class="text-purple-300 hover:text-purple-100 focus:outline-none focus:ring-2 focus:ring-purple-500 rounded-md p-2" aria-label="Toggle menu">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
    </div>

    <!-- Desktop menu -->
    <div class="hidden md:flex space-x-8">
      <a href="#" class="text-purple-200 hover:text-purple-50 transition duration-300 ease-in-out relative group py-2">
        Home
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-400 group-hover:w-full transition-all duration-300 ease-out glow-effect"></span>
      </a>
      <a href="#" class="text-purple-200 hover:text-purple-50 transition duration-300 ease-in-out relative group py-2">
        Courses
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-400 group-hover:w-full transition-all duration-300 ease-out glow-effect"></span>
      </a>
      <a href="#" class="text-purple-200 hover:text-purple-50 transition duration-300 ease-in-out relative group py-2">
        About Us
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-400 group-hover:w-full transition-all duration-300 ease-out glow-effect"></span>
      </a>
      <a href="#" class="text-purple-200 hover:text-purple-50 transition duration-300 ease-in-out relative group py-2">
        Contact
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-400 group-hover:w-full transition-all duration-300 ease-out glow-effect"></span>
      </a>
    </div>

    <!-- User Actions -->
    <div class="hidden md:flex items-center space-x-4">
      <button class="px-4 py-2 rounded-full text-purple-100 bg-purple-600 hover:bg-purple-700 transition duration-300 ease-in-out shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-purple-900 border border-purple-500
      neon-button dark:bg-purple-800 dark:hover:bg-purple-700 dark:border-purple-700 dark:focus:ring-offset-gray-900">
        Sign In
      </button>
      <img class="h-9 w-9 rounded-full border-2 border-purple-400 dark:border-purple-600 shadow-md transform hover:scale-105 transition duration-300 ease-in-out cursor-pointer drop-shadow-md glow-border" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
    </div>
  </nav>

  <!-- Mobile menu dropdown (hidden by default, controlled by JS in a real app) -->
  <div class="md:hidden bg-purple-900 dark:bg-gray-800 py-2 border-t border-purple-800 dark:border-gray-700">
    <div class="flex flex-col space-y-2 px-4">
      <a href="#" class="block text-purple-200 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out border border-transparent hover:border-purple-600 dark:hover:border-purple-700 focus:ring focus:ring-purple-500 focus:outline-none">
        Home
      </a>
      <a href="#" class="block text-purple-200 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out border border-transparent hover:border-purple-600 dark:hover:border-purple-700 focus:ring focus:ring-purple-500 focus:outline-none">
        Courses
      </a>
      <a href="#" class="block text-purple-200 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out border border-transparent hover:border-purple-600 dark:hover:border-purple-700 focus:ring focus:ring-purple-500 focus:outline-none">
        About Us
      </a>
      <a href="#" class="block text-purple-200 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out border border-transparent hover:border-purple-600 dark:hover:border-purple-700 focus:ring focus:ring-purple-500 focus:outline-none">
        Contact
      </a>
      <button class="w-full text-center px-4 py-2 rounded-full text-purple-100 bg-purple-600 hover:bg-purple-700 transition duration-300 ease-in-out shadow-md focus:outline-none focus:ring-2 focus:ring-purple-500 mt-2 neon-button dark:bg-purple-800 dark:hover:bg-purple-700">
        Sign In
      </button>
      <div class="flex justify-center mt-2">
        <img class="h-10 w-10 rounded-full border-2 border-purple-400 dark:border-purple-600 shadow-md glow-border" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      </div>
    </div>
  </div>
</header>

<style>
  /* Base for glow effects, typically handled by utilities, but for complex neon, custom CSS might be needed */
  .drop-shadow-\[0_0_5px_rgba\(192\,132\,252\,0\.8\)\] {
    filter: drop-shadow(0 0 5px rgba(192, 132, 252, 0.8));
  }

  .dark\:drop-shadow-\[0_0_8px_rgba\(168\,85\,247\,0\.9\)\] {
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.9));
  }

  .drop-shadow-\[0_0_8px_rgba\(233\,213\,255\,0\.7\)\] {
    filter: drop-shadow(0 0 8px rgba(233, 213, 255, 0.7));
  }

  .dark\:drop-shadow-\[0_0_10px_rgba\(255\,255\,255\,0\.8\)\] {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
  }

  .glow-effect {
    box-shadow: 0 0 6px rgba(192, 132, 252, 0.7), 0 0 12px rgba(192, 132, 252, 0.5);
    transition: all 0.3s ease-out;
    opacity: 0;
  }

  .group:hover .glow-effect {
    opacity: 1;
  }

  .neon-button {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.7);
  }

  .neon-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  .neon-button:hover::before {
    left: 100%;
  }

  .neon-button:active {
    transform: translateY(1px);
    box-shadow: 0 0 4px rgba(139, 92, 246, 0.5), inset 0 0 5px rgba(139, 92, 246, 0.3);
  }

  .glow-border {
    box-shadow: 0 0 6px rgba(192, 132, 252, 0.8);
  }

  html.dark .glow-border {
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.9);
  }
</style>