Event_Gallery_Component

<div class="min-h-screen bg-gradient-to-br from-purple-800 to-indigo-900 text-white py-12 px-4 sm:px-6 lg:px-8 dark:from-gray-900 dark:to-black">
  <div class="max-w-7xl mx-auto">
    <div class="text-center mb-12">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-emerald-400 via-sapphire-500 to-ruby-600 dark:from-emerald-300 dark:via-sapphire-400 dark:to-ruby-500 pb-2">
        Event Highlights
      </h2>
      <p class="text-lg sm:text-xl text-indigo-200 dark:text-gray-400 leading-relaxed max-w-3xl mx-auto">
        Relive the moments and explore the vibrant atmosphere of our past events. From insightful keynotes to engaging workshops, witness the energy that defines us.
      </p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Gallery Item 1 -->
      <div class="relative overflow-hidden rounded-xl shadow-2xl group transform transition-all duration-500 hover:scale-105 hover:shadow-emerald-500/50 dark:hover:shadow-emerald-700/50">
        <img src="https://picsum.photos/id/1015/600/400" alt="Event Moment 1" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:scale-110">
        <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-90 group-hover:opacity-100 transition-opacity duration-500"></div>
        <div class="absolute bottom-0 left-0 right-0 p-6 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-500">
          <h3 class="text-xl font-semibold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-emerald-300 to-cyan-400 dark:from-emerald-200 dark:to-cyan-300">Keynote Address</h3>
          <p class="text-sm text-gray-200 dark:text-gray-300 mb-4">Inspiring words from industry leaders, setting the stage for innovation.</p>
          <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Speaker Avatar" class="w-9 h-9 rounded-full border-2 border-emerald-400">
            <span class="text-sm text-emerald-200 dark:text-emerald-300">John Doe</span>
          </div>
        </div>
        <div class="absolute top-3 right-3 bg-white bg-opacity-20 backdrop-filter backdrop-blur-sm rounded-full px-3 py-1 text-xs font-semibold uppercase text-white dark:bg-gray-800 dark:text-gray-300 dark:bg-opacity-50">Highlight</div>
      </div>

      <!-- Gallery Item 2 -->
      <div class="relative overflow-hidden rounded-xl shadow-2xl group transform transition-all duration-500 hover:scale-105 hover:shadow-cyan-500/50 dark:hover:shadow-cyan-700/50">
        <img src="https://picsum.photos/id/1018/600/400" alt="Event Moment 2" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:scale-110">
        <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-90 group-hover:opacity-100 transition-opacity duration-500"></div>
        <div class="absolute bottom-0 left-0 right-0 p-6 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-500">
          <h3 class="text-xl font-semibold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-cyan-300 to-blue-400 dark:from-cyan-200 dark:to-blue-300">Networking Session</h3>
          <p class="text-sm text-gray-200 dark:text-gray-300 mb-4">Connecting minds and fostering collaborations among attendees.</p>
          <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Attendee Avatar" class="w-9 h-9 rounded-full border-2 border-cyan-400">
            <span class="text-sm text-cyan-200 dark:text-cyan-300">Sarah Lee</span>
          </div>
        </div>
        <div class="absolute top-3 right-3 bg-white bg-opacity-20 backdrop-filter backdrop-blur-sm rounded-full px-3 py-1 text-xs font-semibold uppercase text-white dark:bg-gray-800 dark:text-gray-300 dark:bg-opacity-50">Connect</div>
      </div>

      <!-- Gallery Item 3 -->
      <div class="relative overflow-hidden rounded-xl shadow-2xl group transform transition-all duration-500 hover:scale-105 hover:shadow-red-500/50 dark:hover:shadow-red-700/50">
        <img src="https://picsum.photos/id/1019/600/400" alt="Event Moment 3" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:scale-110">
        <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-90 group-hover:opacity-100 transition-opacity duration-500"></div>
        <div class="absolute bottom-0 left-0 right-0 p-6 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-500">
          <h3 class="text-xl font-semibold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-red-300 to-purple-400 dark:from-red-200 dark:to-purple-300">Interactive Workshop</h3>
          <p class="text-sm text-gray-200 dark:text-gray-300 mb-4">Hands-on learning and practical application of new skills.</p>
          <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/78.jpg" alt="Instructor Avatar" class="w-9 h-9 rounded-full border-2 border-red-400">
            <span class="text-sm text-red-200 dark:text-red-300">David Kim</span>
          </div>
        </div>
        <div class="absolute top-3 right-3 bg-white bg-opacity-20 backdrop-filter backdrop-blur-sm rounded-full px-3 py-1 text-xs font-semibold uppercase text-white dark:bg-gray-800 dark:text-gray-300 dark:bg-opacity-50">Learn</div>
      </div>

      <!-- Gallery Item 4 -->
      <div class="relative overflow-hidden rounded-xl shadow-2xl group transform transition-all duration-500 hover:scale-105 hover:shadow-indigo-500/50 dark:hover:shadow-indigo-700/50">
        <img src="https://picsum.photos/id/1025/600/400" alt="Event Moment 4" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:scale-110">
        <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-90 group-hover:opacity-100 transition-opacity duration-500"></div>
        <div class="absolute bottom-0 left-0 right-0 p-6 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-500">
          <h3 class="text-xl font-semibold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-indigo-300 to-pink-400 dark:from-indigo-200 dark:to-pink-300">Panel Discussion</h3>
          <p class="text-sm text-gray-200 dark:text-gray-300 mb-4">Expert insights and lively debates on future trends.</p>
          <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/women/66.jpg" alt="Panelist Avatar" class="w-9 h-9 rounded-full border-2 border-indigo-400">
            <span class="text-sm text-indigo-200 dark:text-indigo-300">Emily White</span>
          </div>
        </div>
        <div class="absolute top-3 right-3 bg-white bg-opacity-20 backdrop-filter backdrop-blur-sm rounded-full px-3 py-1 text-xs font-semibold uppercase text-white dark:bg-gray-800 dark:text-gray-300 dark:bg-opacity-50">Discuss</div>
      </div>

      <!-- Gallery Item 5 -->
      <div class="relative overflow-hidden rounded-xl shadow-2xl group transform transition-all duration-500 hover:scale-105 hover:shadow-purple-500/50 dark:hover:shadow-purple-700/50">
        <img src="https://picsum.photos/id/1035/600/400" alt="Event Moment 5" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:scale-110">
        <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-90 group-hover:opacity-100 transition-opacity duration-500"></div>
        <div class="absolute bottom-0 left-0 right-0 p-6 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-500">
          <h3 class="text-xl font-semibold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-purple-300 to-fuchsia-400 dark:from-purple-200 dark:to-fuchsia-300">Product Showcase</h3>
          <p class="text-sm text-gray-200 dark:text-gray-300 mb-4">Innovations unveiled and solutions demonstrated live.</p>
          <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="Innovator Avatar" class="w-9 h-9 rounded-full border-2 border-purple-400">
            <span class="text-sm text-purple-200 dark:text-purple-300">Michael Green</span>
          </div>
        </div>
        <div class="absolute top-3 right-3 bg-white bg-opacity-20 backdrop-filter backdrop-blur-sm rounded-full px-3 py-1 text-xs font-semibold uppercase text-white dark:bg-gray-800 dark:text-gray-300 dark:bg-opacity-50">Innovate</div>
      </div>

      <!-- Gallery Item 6 -->
      <div class="relative overflow-hidden rounded-xl shadow-2xl group transform transition-all duration-500 hover:scale-105 hover:shadow-rose-500/50 dark:hover:shadow-rose-700/50">
        <img src="https://picsum.photos/id/1040/600/400" alt="Event Moment 6" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:scale-110">
        <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-90 group-hover:opacity-100 transition-opacity duration-500"></div>
        <div class="absolute bottom-0 left-0 right-0 p-6 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-500">
          <h3 class="text-xl font-semibold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-rose-300 to-orange-400 dark:from-rose-200 dark:to-orange-300">Closing Ceremony</h3>
          <p class="text-sm text-gray-200 dark:text-gray-300 mb-4">A memorable conclusion celebrating achievements and looking forward.</p>
          <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Host Avatar" class="w-9 h-9 rounded-full border-2 border-rose-400">
            <span class="text-sm text-rose-200 dark:text-rose-300">Jessica Brown</span>
          </div>
        </div>
        <div class="absolute top-3 right-3 bg-white bg-opacity-20 backdrop-filter backdrop-blur-sm rounded-full px-3 py-1 text-xs font-semibold uppercase text-white dark:bg-gray-800 dark:text-gray-300 dark:bg-opacity-50">Celebrate</div>
      </div>

    </div>

    <div class="text-center mt-16">
      <a href="#" class="inline-flex items-center justify-center px-8 py-4 border border-transparent text-base font-medium rounded-full shadow-lg text-white bg-gradient-to-r from-emerald-500 to-indigo-600 transition-transform duration-300 hover:scale-105 hover:from-emerald-600 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:from-emerald-600 dark:to-indigo-700 dark:hover:from-emerald-700 dark:hover:to-indigo-800">
        View All Moments
        <svg class="ml-3 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>
  </div>
</div>