Cyberpunk_Real_Estate_Lightbox

<div class="flex items-center justify-center min-h-screen bg-gray-950 dark:bg-zinc-950 p-4 font-mono antialiased">
  <!-- Image Lightbox Component -->
  <div class="relative w-full max-w-lg mx-auto bg-gray-900 dark:bg-zinc-900 rounded-lg shadow-lg shadow-indigo-900/40 border border-purple-800 dark:border-indigo-800 overflow-hidden group">

    <!-- Main Image (Placeholder) -->
    <img src="https://picsum.photos/800/600?random=1" alt="Property Image" class="w-full h-80 object-cover object-center rounded-t-lg group-hover:opacity-75 transition-opacity duration-300">

    <!-- Overlay for Lightbox interaction -->
    <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 cursor-pointer" aria-hidden="true">
      <button type="button" class="text-purple-400 dark:text-indigo-400 text-3xl p-4 rounded-full bg-slate-900/60 hover:bg-slate-800/80 focus:outline-none focus:ring-2 focus:ring-purple-600 dark:focus:ring-indigo-600 transition-all duration-200">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
        </svg>
        <span class="sr-only">View Larger</span>
      </button>
    </div>

    <!-- Property Details (Minimal) -->
    <div class="p-4">
      <h3 class="text-xl font-semibold text-purple-300 dark:text-indigo-300 mb-2">Urban Loft 789</h3>
      <p class="text-sm text-gray-400 dark:text-zinc-400 mb-3">District A9, Neo-Kyoto City</p>

      <div class="flex items-center justify-between text-base text-purple-400 dark:text-indigo-400">
        <span class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1 text-purple-600 dark:text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0L22 21M7.273 6.343L2 2" />
          </svg>
          3 Beds
        </span>
        <span class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1 text-purple-600 dark:text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z" />
          </svg>
          2 Baths
        </span>
      </div>
    </div>
  </div>
</div>