Модальное окно обучения киберпанку

<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-70 backdrop-blur-sm">
  <div class="relative w-full max-w-lg mx-auto overflow-hidden text-white rounded-lg shadow-xl dark:shadow-purple-glow bg-gradient-to-br from-gray-900 to-black border-2 border-purple-600 dark:border-purple-500 animate-fade-in-up">
    <!-- Close Button - Top Right -->
    <button class="absolute top-3 right-3 p-2 text-purple-300 hover:text-cyan-400 focus:outline-none transition-colors duration-300 z-10">
      <svg class="w-6 h-6" 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="M6 18L18 6M6 6l12 12"></path>
      </svg>
    </button>

    <!-- Header with animated border -->
    <div class="p-6 pb-4 border-b-2 border-purple-600 relative overflow-hidden">
      <h2 class="text-3xl font-bold text-center text-purple-300 dark:text-purple-400 drop-shadow-lg leading-tight">
        <span class="text-cyan-400">//</span> MODULE 01: NEURAL NETWORKS <span class="text-cyan-400">//</span>
      </h2>
      <div class="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-cyan-400 to-transparent animate-scan"></div>
    </div>

    <!-- Content Area -->
    <div class="p-6 space-y-6 md:p-8">
      <p class="text-gray-300 text-lg leading-relaxed dark:text-gray-400">
        Dive deep into the pulsating heart of artificial intelligence. Unravel the mysteries of perceptrons, backpropagation, and the very fabric of machine cognition.
      </p>
      
      <div class="relative w-full h-48 rounded-md overflow-hidden border border-cyan-500 shadow-lg shadow-cyan-900/50">
        <img src="https://picsum.photos/600/300?random=1" alt="Course thumbnail" class="object-cover object-center w-full h-full opacity-80 group-hover:opacity-100 transition-opacity duration-300" />
        <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center group-hover:bg-opacity-30 transition-all duration-300">
          <span class="text-xl font-semibold text-white/90 drop-shadow-md">Visualizing the Network</span>
        </div>
      </div>

      <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 py-2 border-t-2 border-b-2 border-purple-800 dark:border-purple-900 bg-gray-900/50">
        <div class="flex items-center gap-3">
          <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Instructor Avatar" class="w-10 h-10 rounded-full border-2 border-cyan-400 shadow-md" />
          <span class="text-sm text-gray-200">Lead Instructor: <span class="font-medium text-purple-300">Dr. Evelyn Reed</span></span>
        </div>
        <div class="flex items-center gap-4 text-sm text-gray-300">
          <span class="flex items-center gap-1">
            <svg class="w-4 h-4 text-cyan-400" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            60 min
          </span>
          <span class="flex items-center gap-1">
            <svg class="w-4 h-4 text-purple-400" 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="M5 13l4 4L19 7"></path>
            </svg>
            Expert Level
          </span>
        </div>
      </div>

      <div class="space-y-4">
        <h3 class="text-xl font-bold text-cyan-400">Key Concepts:</h3>
        <ul class="list-none p-0 m-0 space-y-2">
          <li class="flex items-start gap-2 text-gray-300">
            <svg class="w-5 h-5 mt-1 text-purple-500 flex-shrink-0" 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
            </svg>
            Understanding Perceptrons and Activation Functions.
          </li>
          <li class="flex items-start gap-2 text-gray-300">
            <svg class="w-5 h-5 mt-1 text-purple-500 flex-shrink-0" 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
            </svg>
            Implementing Backpropagation for Learning.
          </li>
          <li class="flex items-start gap-2 text-gray-300">
            <svg class="w-5 h-5 mt-1 text-purple-500 flex-shrink-0" 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
            </svg>
            Exploring Convolutional and Recurrent Networks.
          </li>
        </ul>
      </div>
    </div>

    <!-- Footer Buttons -->
    <div class="p-6 pt-4 flex flex-col sm:flex-row justify-end gap-3 border-t-2 border-purple-600">
      <button class="px-6 py-3 text-sm font-semibold rounded-md transition-all duration-300 
                     bg-transparent border-2 border-purple-500 text-purple-300 
                     hover:bg-purple-700 hover:border-purple-700 hover:text-white 
                     focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-900 
                     dark:hover:bg-purple-600 dark:border-purple-600 dark:focus:ring-offset-black">
        <span class="text-cyan-400 text-lg mr-1">&lt;&lt;</span> Back to Modules
      </button>
      <button class="px-8 py-3 text-sm font-bold rounded-md transition-all duration-300 
                     bg-cyan-500 text-gray-900 border-2 border-cyan-500 
                     shadow-lg shadow-cyan-500/50 
                     hover:bg-cyan-400 hover:shadow-cyan-400/60 
                     focus:outline-none focus:ring-2 focus:ring-cyan-400 focus:ring-offset-2 focus:ring-offset-gray-900 
                     dark:bg-cyan-600 dark:hover:bg-cyan-500 dark:shadow-cyan-600/50 dark:focus:ring-offset-black">
        Enroll Now <span class="text-purple-900 text-lg ml-1">//</span>
      </button>
    </div>
  </div>

  <!-- Custom CSS for animations and glows (typically in Tailwind config or external CSS) -->
  <style>
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in-up {
      animation: fadeIn 0.4s ease-out forwards;
    }
    
    @keyframes scan {
      0% { transform: translateX(-100%); }
      50% { transform: translateX(0); }
      100% { transform: translateX(100%); }
    }
    .animate-scan {
      animation: scan 3s infinite linear;
    }

    .dark .dark\:shadow-purple-glow {
      box-shadow: 0 0 15px rgba(168, 85, 247, 0.7), 0 0 30px rgba(168, 85, 247, 0.5);
    }
  </style>
</div>