Memphis_Monochrome_Image_Lightbox

<div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="relative w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden group border-4 border-black dark:border-white animate-fade-in">
    
    <!-- Memphis Design Top Accent -->
    <div class="absolute top-0 left-0 w-24 h-24 bg-yellow-400 dark:bg-yellow-500 rounded-br-full z-10 opacity-75 sm:opacity-100"></div>
    <div class="absolute top-0 right-0 w-16 h-16 bg-blue-400 dark:bg-blue-500 rounded-bl-full z-10 opacity-50"></div>

    <!-- Image Container (Simulated Lightbox Opener) -->
    <div class="relative h-64 sm:h-72 md:h-80 lg:h-96 w-full overflow-hidden">
      <img src="https://picsum.photos/1200/800?random=1" alt="Career Development Image" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
      
      <!-- Overlay for 'View Details' -->
      <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <button class="px-6 py-3 bg-yellow-400 dark:bg-yellow-500 text-black text-lg font-bold uppercase rounded-full shadow-lg transform -translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-300 ease-out">
          View Details
        </button>
      </div>
    </div>
    
    <!-- Content Area -->
    <div class="p-6 sm:p-8 relative z-20">
      <h3 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white mb-2 leading-tight">
        Elevate Your Career Path
      </h3>
      <p class="text-sm sm:text-base text-gray-700 dark:text-gray-300 mb-4">
        Explore new opportunities and connect with industry leaders. Click the image to see more about our exclusive career resources.
      </p>
      
      <!-- Call to Action / Info Grid -->
      <div class="grid grid-cols-2 gap-4 text-center mb-6">
        <div class="p-3 bg-gray-200 dark:bg-gray-700 rounded-md border-2 border-gray-300 dark:border-gray-600 relative overflow-hidden">
          <span class="block text-lg font-bold text-gray-900 dark:text-white">500+</span>
          <span class="block text-xs text-gray-600 dark:text-gray-400">Courses</span>
          <div class="absolute top-0 left-0 w-6 h-6 bg-yellow-400 dark:bg-yellow-500 rounded-br-md opacity-20"></div>
        </div>
        <div class="p-3 bg-gray-200 dark:bg-gray-700 rounded-md border-2 border-gray-300 dark:border-gray-600 relative overflow-hidden">
          <span class="block text-lg font-bold text-gray-900 dark:text-white">10K+</span>
          <span class="block text-xs text-gray-600 dark:text-gray-400">Members</span>
          <div class="absolute top-0 right-0 w-6 h-6 bg-blue-400 dark:bg-blue-500 rounded-bl-md opacity-20"></div>
        </div>
      </div>

      <!-- Simulated Profile / Mentor -->
      <div class="flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full border-2 border-yellow-400 dark:border-yellow-500" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Mentor Avatar">
        <div>
          <p class="text-sm font-semibold text-gray-900 dark:text-white">Sarah Johnson</p>
          <p class="text-xs text-gray-600 dark:text-gray-400">Career Coach, HR Dept.</p>
        </div>
      </div>
    </div>

    <!-- Memphis Design Bottom Accent -->
    <div class="absolute bottom-0 right-0 w-20 h-20 bg-yellow-400 dark:bg-yellow-500 rounded-tl-full z-10 opacity-75 sm:opacity-100"></div>
    <div class="absolute bottom-0 left-0 w-12 h-12 bg-blue-400 dark:bg-blue-500 rounded-tr-full z-10 opacity-50"></div>

  </div>
</div>