Featured Article Card with Rich Media

<article class="group cursor-pointer">
  <div class="relative overflow-hidden rounded-2xl bg-neutral-900 border border-neutral-800 hover:border-lime-400/50 transition-all duration-500 hover:transform hover:scale-[1.02] max-w-3xl">
    <div class="relative">
      <img src="https://images.unsplash.com/photo-1618556450991-2f1af64e8191?w=2160&q=80" alt="Neural Network Visualization" class="w-full h-64 sm:h-80 lg:h-96 object-cover transition-all duration-500 group-hover:scale-110">
      <div class="absolute top-4 left-4 right-4 flex flex-wrap gap-2">
        <span class="bg-lime-400/20 backdrop-blur-sm border border-lime-400/30 text-lime-300 text-xs font-medium px-3 py-1 rounded-full uppercase tracking-wide">Featured</span>
        <span class="bg-white/10 backdrop-blur-sm border border-white/20 text-white text-xs font-medium px-3 py-1 rounded-full uppercase tracking-wide">AI & Machine Learning</span>
      </div>
      <div class="absolute top-4 right-4">
        <button class="bg-white/10 backdrop-blur-sm border border-white/20 p-2 rounded-full hover:bg-white/20 transition-all duration-300 hover:scale-110">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 text-white">
            <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path>
          </svg>
        </button>
      </div>
      <div class="absolute bottom-4 left-4 right-4">
        <div class="flex items-center gap-3 text-white">
          <img src="https://images.unsplash.com/photo-1458696352784-ffe1f47c2edc?w=1080&q=80" alt="Dr. Sarah Chen" class="w-10 h-10 object-cover border-white/30 border-2 rounded-full">
          <div>
            <p class="font-medium text-sm">Dr. Sarah Chen</p>
            <p class="text-xs text-neutral-300">AI Research Director at QuantumLab</p>
          </div>
        </div>
      </div>
    </div>
    <div class="p-6 sm:p-8 bg-neutral-900">
      <div class="flex items-center gap-4 mb-4 text-xs text-neutral-400">
        <div class="flex items-center gap-2">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3">
            <path d="M8 2v4"></path>
            <path d="M16 2v4"></path>
            <rect width="18" height="18" x="3" y="4" rx="2"></rect>
            <path d="M3 10h18"></path>
          </svg>
          <span>December 15, 2024</span>
        </div>
        <div class="flex items-center gap-2">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3">
            <circle cx="12" cy="12" r="10"></circle>
            <polyline points="12 6 12 12 16 14"></polyline>
          </svg>
          <span>8 min read</span>
        </div>
        <div class="flex items-center gap-2">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3">
            <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path>
            <circle cx="12" cy="12" r="3"></circle>
          </svg>
          <span>12.4K views</span>
        </div>
      </div>
      <h2 class="text-2xl sm:text-3xl lg:text-4xl font-semibold leading-tight mb-4 group-hover:text-lime-300 transition-colors duration-300 text-white">The Revolutionary Impact of Quantum-Enhanced AI on Modern Computing</h2>
      <p class="text-neutral-400 leading-relaxed mb-6">
        Exploring how quantum computing integration is accelerating artificial intelligence capabilities, opening unprecedented possibilities for complex problem-solving.
      </p>
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-4">
          <div class="flex items-center gap-2 text-sm text-neutral-400 hover:text-lime-400 transition-colors cursor-pointer">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
              <path d="M7 10v12"></path>
              <path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"></path>
            </svg>
            <span>847</span>
          </div>
          <div class="flex items-center gap-2 text-sm text-neutral-400 hover:text-lime-400 transition-colors cursor-pointer">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
            </svg>
            <span>92</span>
          </div>
        </div>
        <button class="flex items-center gap-2 text-lime-400 hover:text-lime-300 transition-colors font-medium text-sm">
          <span>Continue Reading</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
            <path d="M5 12h14"></path>
            <path d="m12 5 7 7-7 7"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</article>