Image Lightbox 组件

<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-100 via-gray-50 to-gray-200 dark:from-gray-900 dark:via-gray-850 dark:to-gray-800 p-4 font-sans">
  <div class="container mx-auto p-4 md:p-8 bg-white dark:bg-gray-900 rounded-2xl shadow-xl space-y-8 max-w-6xl transition-all duration-500 ease-in-out">
    <h2 class="text-4xl md:text-5xl font-extrabold text-center bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-sky-400 dark:from-blue-400 dark:to-sky-200 py-2 leading-tight transition-colors duration-500">
      Our Projects in Focus
    </h2>
    <p class="text-lg text-center text-gray-600 dark:text-gray-300 mb-8 max-w-3xl mx-auto transition-colors duration-500">
      Explore our impactful work through a collection of high-resolution project images. Click to enlarge and discover the details.
    </p>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
      <!-- Lightbox Item 1 -->
      <div class="group relative overflow-hidden rounded-xl shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-2xl cursor-pointer" onclick="document.getElementById('lightbox-modal-1').classList.remove('hidden'); document.body.classList.add('overflow-hidden')">
        <img src="https://picsum.photos/id/101/600/400" alt="Project Image 1" class="w-full h-56 object-cover object-center transition-all duration-500 ease-in-out group-hover:filter group-hover:brightness-75 group-hover:saturate-150">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-xl font-semibold opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 ease-out">Strategic Insight</p>
        </div>
      </div>

      <!-- Lightbox Item 2 -->
      <div class="group relative overflow-hidden rounded-xl shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-2xl cursor-pointer" onclick="document.getElementById('lightbox-modal-2').classList.remove('hidden'); document.body.classList.add('overflow-hidden')">
        <img src="https://picsum.photos/id/102/600/400" alt="Project Image 2" class="w-full h-56 object-cover object-center transition-all duration-500 ease-in-out group-hover:filter group-hover:brightness-75 group-hover:saturate-150">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-xl font-semibold opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 ease-out">Innovation & Growth</p>
        </div>
      </div>

      <!-- Lightbox Item 3 -->
      <div class="group relative overflow-hidden rounded-xl shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-2xl cursor-pointer" onclick="document.getElementById('lightbox-modal-3').classList.remove('hidden'); document.body.classList.add('overflow-hidden')">
        <img src="https://picsum.photos/id/103/600/400" alt="Project Image 3" class="w-full h-56 object-cover object-center transition-all duration-500 ease-in-out group-hover:filter group-hover:brightness-75 group-hover:saturate-150">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-xl font-semibold opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 ease-out">Client Success</p>
        </div>
      </div>

      <!-- Lightbox Item 4 -->
      <div class="group hidden sm:block relative overflow-hidden rounded-xl shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-2xl cursor-pointer" onclick="document.getElementById('lightbox-modal-4').classList.remove('hidden'); document.body.classList.add('overflow-hidden')">
        <img src="https://picsum.photos/id/104/600/400" alt="Project Image 4" class="w-full h-56 object-cover object-center transition-all duration-500 ease-in-out group-hover:filter group-hover:brightness-75 group-hover:saturate-150">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-xl font-semibold opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 ease-out">Digital Transformation</p>
        </div>
      </div>

      <!-- Lightbox Item 5 -->
      <div class="group hidden lg:block relative overflow-hidden rounded-xl shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-2xl cursor-pointer" onclick="document.getElementById('lightbox-modal-5').classList.remove('hidden'); document.body.classList.add('overflow-hidden')">
        <img src="https://picsum.photos/id/105/600/400" alt="Project Image 5" class="w-full h-56 object-cover object-center transition-all duration-500 ease-in-out group-hover:filter group-hover:brightness-75 group-hover:saturate-150">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-xl font-semibold opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 ease-out">Sustainable Solutions</p>
        </div>
      </div>

      <!-- Lightbox Item 6 -->
      <div class="group hidden lg:block relative overflow-hidden rounded-xl shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-2xl cursor-pointer" onclick="document.getElementById('lightbox-modal-6').classList.remove('hidden'); document.body.classList.add('overflow-hidden')">
        <img src="https://picsum.photos/id/106/600/400" alt="Project Image 6" class="w-full h-56 object-cover object-center transition-all duration-500 ease-in-out group-hover:filter group-hover:brightness-75 group-hover:saturate-150">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-xl font-semibold opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 ease-out">Global Reach</p>
        </div>
      </div>
    </div>

    <!-- Lightbox Modals (hidden by default) -->
    <div id="lightbox-modal-1" class="fixed inset-0 z-50 bg-black bg-opacity-80 flex items-center justify-center p-4 transition-opacity duration-300 hidden" onclick="this.classList.add('hidden'); document.body.classList.remove('overflow-hidden')">
      <div class="relative bg-gray-900/90 dark:bg-gray-950/90 p-4 rounded-xl shadow-2xl max-w-4xl mx-auto transform scale-95 opacity-0 transition-all duration-300 group-hover:scale-100 group-hover:opacity-100" onclick="event.stopPropagation()">
        <button class="absolute top-3 right-3 text-white text-3xl font-bold p-2 leading-none hover:text-red-400 transition-colors duration-200" onclick="document.getElementById('lightbox-modal-1').classList.add('hidden'); document.body.classList.remove('overflow-hidden')">&times;</button>
        <img src="https://picsum.photos/id/101/1200/800" alt="Enlarged Project Image 1" class="max-w-full max-h-[80vh] object-contain rounded-lg shadow-lg">
        <div class="mt-4 text-center text-gray-200 text-lg">
          <h3 class="text-xl md:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-sky-200 dark:from-blue-300 dark:to-sky-100">Strategic Insight</h3>
          <p class="text-sm md:text-base text-gray-400 mt-1">Delivering actionable strategies for sustainable growth.</p>
        </div>
      </div>
    </div>

    <div id="lightbox-modal-2" class="fixed inset-0 z-50 bg-black bg-opacity-80 flex items-center justify-center p-4 transition-opacity duration-300 hidden" onclick="this.classList.add('hidden'); document.body.classList.remove('overflow-hidden')">
      <div class="relative bg-gray-900/90 dark:bg-gray-950/90 p-4 rounded-xl shadow-2xl max-w-4xl mx-auto transform scale-95 opacity-0 transition-all duration-300 group-hover:scale-100 group-hover:opacity-100" onclick="event.stopPropagation()">
        <button class="absolute top-3 right-3 text-white text-3xl font-bold p-2 leading-none hover:text-red-400 transition-colors duration-200" onclick="document.getElementById('lightbox-modal-2').classList.add('hidden'); document.body.classList.remove('overflow-hidden')">&times;</button>
        <img src="https://picsum.photos/id/102/1200/800" alt="Enlarged Project Image 2" class="max-w-full max-h-[80vh] object-contain rounded-lg shadow-lg">
        <div class="mt-4 text-center text-gray-200 text-lg">
          <h3 class="text-xl md:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-sky-200 dark:from-blue-300 dark:to-sky-100">Innovation & Growth</h3>
          <p class="text-sm md:text-base text-gray-400 mt-1">Fostering innovation to drive significant business growth.</p>
        </div>
      </div>
    </div>

    <div id="lightbox-modal-3" class="fixed inset-0 z-50 bg-black bg-opacity-80 flex items-center justify-center p-4 transition-opacity duration-300 hidden" onclick="this.classList.add('hidden'); document.body.classList.remove('overflow-hidden')">
      <div class="relative bg-gray-900/90 dark:bg-gray-950/90 p-4 rounded-xl shadow-2xl max-w-4xl mx-auto transform scale-95 opacity-0 transition-all duration-300 group-hover:scale-100 group-hover:opacity-100" onclick="event.stopPropagation()">
        <button class="absolute top-3 right-3 text-white text-3xl font-bold p-2 leading-none hover:text-red-400 transition-colors duration-200" onclick="document.getElementById('lightbox-modal-3').classList.add('hidden'); document.body.classList.remove('overflow-hidden')">&times;</button>
        <img src="https://picsum.photos/id/103/1200/800" alt="Enlarged Project Image 3" class="max-w-full max-h-[80vh] object-contain rounded-lg shadow-lg">
        <div class="mt-4 text-center text-gray-200 text-lg">
          <h3 class="text-xl md:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-sky-200 dark:from-blue-300 dark:to-sky-100">Client Success</h3>
          <p class="text-sm md:text-base text-gray-400 mt-1">Ensuring our clients achieve their ambitious goals.</p>
        </div>
      </div>
    </div>

    <div id="lightbox-modal-4" class="fixed inset-0 z-50 bg-black bg-opacity-80 flex items-center justify-center p-4 transition-opacity duration-300 hidden" onclick="this.classList.add('hidden'); document.body.classList.remove('overflow-hidden')">
      <div class="relative bg-gray-900/90 dark:bg-gray-950/90 p-4 rounded-xl shadow-2xl max-w-4xl mx-auto transform scale-95 opacity-0 transition-all duration-300 group-hover:scale-100 group-hover:opacity-100" onclick="event.stopPropagation()">
        <button class="absolute top-3 right-3 text-white text-3xl font-bold p-2 leading-none hover:text-red-400 transition-colors duration-200" onclick="document.getElementById('lightbox-modal-4').classList.add('hidden'); document.body.classList.remove('overflow-hidden')">&times;</button>
        <img src="https://picsum.photos/id/104/1200/800" alt="Enlarged Project Image 4" class="max-w-full max-h-[80vh] object-contain rounded-lg shadow-lg">
        <div class="mt-4 text-center text-gray-200 text-lg">
          <h3 class="text-xl md:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-sky-200 dark:from-blue-300 dark:to-sky-100">Digital Transformation</h3>
          <p class="text-sm md:text-base text-gray-400 mt-1">Guiding businesses through seamless digital transitions.</p>
        </div>
      </div>
    </div>

    <div id="lightbox-modal-5" class="fixed inset-0 z-50 bg-black bg-opacity-80 flex items-center justify-center p-4 transition-opacity duration-300 hidden" onclick="this.classList.add('hidden'); document.body.classList.remove('overflow-hidden')">
      <div class="relative bg-gray-900/90 dark:bg-gray-950/90 p-4 rounded-xl shadow-2xl max-w-4xl mx-auto transform scale-95 opacity-0 transition-all duration-300 group-hover:scale-100 group-hover:opacity-100" onclick="event.stopPropagation()">
        <button class="absolute top-3 right-3 text-white text-3xl font-bold p-2 leading-none hover:text-red-400 transition-colors duration-200" onclick="document.getElementById('lightbox-modal-5').classList.add('hidden'); document.body.classList.remove('overflow-hidden')">&times;</button>
        <img src="https://picsum.photos/id/105/1200/800" alt="Enlarged Project Image 5" class="max-w-full max-h-[80vh] object-contain rounded-lg shadow-lg">
        <div class="mt-4 text-center text-gray-200 text-lg">
          <h3 class="text-xl md:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-sky-200 dark:from-blue-300 dark:to-sky-100">Sustainable Solutions</h3>
          <p class="text-sm md:text-base text-gray-400 mt-1">Crafting eco-conscious strategies for future-proof businesses.</p>
        </div>
      </div>
    </div>

    <div id="lightbox-modal-6" class="fixed inset-0 z-50 bg-black bg-opacity-80 flex items-center justify-center p-4 transition-opacity duration-300 hidden" onclick="this.classList.add('hidden'); document.body.classList.remove('overflow-hidden')">
      <div class="relative bg-gray-900/90 dark:bg-gray-950/90 p-4 rounded-xl shadow-2xl max-w-4xl mx-auto transform scale-95 opacity-0 transition-all duration-300 group-hover:scale-100 group-hover:opacity-100" onclick="event.stopPropagation()">
        <button class="absolute top-3 right-3 text-white text-3xl font-bold p-2 leading-none hover:text-red-400 transition-colors duration-200" onclick="document.getElementById('lightbox-modal-6').classList.add('hidden'); document.body.classList.remove('overflow-hidden')">&times;</button>
        <img src="https://picsum.photos/id/106/1200/800" alt="Enlarged Project Image 6" class="max-w-full max-h-[80vh] object-contain rounded-lg shadow-lg">
        <div class="mt-4 text-center text-gray-200 text-lg">
          <h3 class="text-xl md:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-sky-200 dark:from-blue-300 dark:to-sky-100">Global Reach</h3>
          <p class="text-sm md:text-base text-gray-400 mt-1">Extending your presence and impact across markets.</p>
        </div>
      </div>
    </div>

  </div>
</div>