Стеклянная градиентная навигационная панель

<nav class="fixed w-full backdrop-blur-lg bg-gradient-to-r from-purple-500/30 via-pink-500/30 to-indigo-500/30 border-b border-white/10 transition-all duration-300 z-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- Logo -->
      <div class="flex-shrink-0">
        <a href="#" class="flex items-center">
          <span class="text-white font-bold text-xl tracking-wider">PRISM</span>
          <div class="ml-2 h-8 w-8 rounded-full bg-white/20 flex items-center justify-center">
            <div class="h-4 w-4 bg-white rounded-full animate-pulse"></div>
          </div>
        </a>
      </div>
      
      <!-- Menu Items -->
      <div class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-8">
          <a href="#" class="group relative px-3 py-2 text-white font-medium">
            Home
            <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300"></span>
          </a>
          <a href="#" class="group relative px-3 py-2 text-white/70 hover:text-white font-medium transition-colors duration-200">
            Features
            <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300"></span>
          </a>
          <a href="#" class="group relative px-3 py-2 text-white/70 hover:text-white font-medium transition-colors duration-200">
            Pricing
            <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300"></span>
          </a>
          <a href="#" class="group relative px-3 py-2 text-white/70 hover:text-white font-medium transition-colors duration-200">
            About
            <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300"></span>
          </a>
        </div>
      </div>
      
      <!-- CTA Button -->
      <div>
        <button class="relative overflow-hidden px-6 py-2 bg-white/10 border border-white/20 rounded-full text-white font-medium hover:bg-white/20 transition-all duration-300 group">
          <span class="relative z-10">Get Started</span>
          <span class="absolute inset-0 bg-gradient-to-r from-purple-600 to-pink-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-full"></span>
        </button>
      </div>
      
      <!-- Mobile menu button -->
      <div class="md:hidden">
        <button class="text-white p-2">
          <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"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>