Cyberpunk_Dating_Media_Component

<div class="min-h-screen bg-neutral-950 dark:bg-black p-4 sm:p-8 flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-gradient-to-br from-neutral-900 to-neutral-800 dark:from-neutral-900 dark:to-neutral-950 rounded-xl shadow-xl border border-pink-700 dark:border-pink-800 transform hover:scale-[1.01] transition-all duration-300 ease-in-out overflow-hidden">
    <div class="relative">
      <!-- Profile Picture -->
      <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile Picture" class="w-full h-64 sm:h-72 md:h-80 object-cover object-center rounded-t-xl opacity-90 border-b-2 border-pink-500 dark:border-pink-700" loading="lazy" />
      
      <!-- Overlay Gradient for Name/Age -->
      <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-neutral-900 to-transparent p-4">
        <h2 class="text-3xl sm:text-4xl font-bold text-pink-300 dark:text-pink-400 drop-shadow-lg leading-tight tracking-wider">
          Anya, <span class="font-light text-2xl sm:text-3xl text-mint-300 dark:text-mint-400">26</span>
        </h2>
      </div>

      <!-- Interactive Controls - Top Right -->
      <div class="absolute top-3 right-3 flex space-x-2">
        <button aria-label="More Options" class="p-2 rounded-full bg-neutral-800/70 dark:bg-neutral-900/70 text-mint-400 dark:text-mint-500 hover:bg-pink-600/80 dark:hover:bg-pink-700/80 hover:text-white transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-900 focus:ring-mint-500">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
          </svg>
        </button>
      </div>
    </div>

    <div class="p-4 sm:p-6 space-y-4">
      <!-- Bio/About Section -->
      <p class="text-neutral-300 dark:text-neutral-400 text-base sm:text-lg leading-relaxed">
        Exploring the digital cosmos. Looking for a connection that sparkles brighter than a supernova. Let's build a future, one byte at a time. ✨
      </p>

      <!-- Interests/Tags -->
      <div class="flex flex-wrap gap-2 pt-2">
        <span class="px-3 py-1 bg-pink-600/70 text-white dark:bg-pink-700/70 dark:text-white rounded-full text-xs sm:text-sm font-semibold tracking-wide">
          #Synthwave
        </span>
        <span class="px-3 py-1 bg-mint-600/70 text-white dark:bg-mint-700/70 dark:text-white rounded-full text-xs sm:text-sm font-semibold tracking-wide">
          #CyberpunkLit
        </span>
        <span class="px-3 py-1 bg-red-600/70 text-white dark:bg-red-700/70 dark:text-white rounded-full text-xs sm:text-sm font-semibold tracking-wide">
          #Gaming
        </span>
        <span class="px-3 py-1 bg-purple-600/70 text-white dark:bg-purple-700/70 dark:text-white rounded-full text-xs sm:text-sm font-semibold tracking-wide">
          #VR<span class="hidden sm:inline">Adventures</span>
        </span>
      </div>

      <!-- Media Gallery/Carousel Placeholder -->
      <div class="mt-6">
        <h3 class="text-xl sm:text-2xl font-bold text-mint-300 dark:text-mint-400 mb-4">My Digital Canvas</h3>
        <div class="grid grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
          <img src="https://picsum.photos/id/60/300/200" alt="Gallery Image 1" class="w-full h-32 sm:h-40 object-cover rounded-md border border-pink-500 dark:border-pink-700 transform hover:scale-105 transition-transform duration-200" loading="lazy" />
          <img src="https://picsum.photos/id/104/300/200" alt="Gallery Image 2" class="w-full h-32 sm:h-40 object-cover rounded-md border border-mint-500 dark:border-mint-700 transform hover:scale-105 transition-transform duration-200" loading="lazy" />
          <img src="https://picsum.photos/id/30/300/200" alt="Gallery Image 3" class="w-full h-32 sm:h-40 object-cover rounded-md border border-purple-500 dark:border-purple-700 transform hover:scale-105 transition-transform duration-200 hidden lg:block" loading="lazy" />
        </div>
      </div>

      <!-- Action Buttons -->
      <div class="flex justify-around items-center gap-4 mt-6 pt-4 border-t-2 border-dashed border-neutral-700/50 dark:border-neutral-800/50">
        <button aria-label="Pass" class="p-3 sm:p-4 rounded-full bg-neutral-800 dark:bg-neutral-900 border-2 border-red-500 text-red-400 dark:text-red-500 hover:bg-neutral-700 dark:hover:bg-neutral-800 hover:text-red-300 transition-colors duration-200 shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-900 focus:ring-red-500">
          <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 24 24">
            <path d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"/>
          </svg>
        </button>
        <button aria-label="Like" class="p-4 sm:p-5 rounded-full bg-gradient-to-r from-pink-600 to-purple-600 text-white shadow-xl transform hover:scale-110 transition-transform duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-900 focus:ring-mint-500">
          <svg class="w-8 h-8 sm:w-9 sm:h-9" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5C2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
          </svg>
        </button>
        <button aria-label="Super Like" class="p-3 sm:p-4 rounded-full bg-neutral-800 dark:bg-neutral-900 border-2 border-mint-500 text-mint-400 dark:text-mint-500 hover:bg-neutral-700 dark:hover:bg-neutral-800 hover:text-mint-300 transition-colors duration-200 shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-900 focus:ring-mint-500">
          <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 24 24">
            <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.58L4 12l8 8 8-8z"/>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>