ミニマリストギャラリーコンポーネント

<section class="py-8 px-4 bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
  <div class="max-w-6xl mx-auto">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-orange-600 dark:text-orange-400 text-center mb-6 sm:mb-8 md:mb-10">
      Our Featured Designs
    </h2>
    <p class="text-lg text-gray-700 dark:text-gray-300 text-center mb-8 sm:mb-10 lg:mb-12 max-w-2xl mx-auto leading-relaxed">
      Explore our collection of sophisticated and user-friendly interfaces, crafted with precision and passion.
    </p>

    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 lg:gap-8">
      <!-- Gallery Item 1 -->
      <div class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 transition-shadow duration-300 hover:shadow-xl">
        <div class="relative pb-2/3 overflow-hidden group">
          <img class="absolute h-full w-full object-cover transform transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1018/600/400" alt="Gallery Image 1">
          <div class="absolute inset-0 bg-yellow-500 opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
        </div>
        <div class="p-5 flex-grow flex flex-col">
          <h3 class="text-xl font-semibold text-orange-700 dark:text-orange-300 mb-2 mt-auto">Intuitive Dashboard</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">A clean and powerful analytics dashboard designed for clarity.</p>
        </div>
      </div>

      <!-- Gallery Item 2 -->
      <div class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 transition-shadow duration-300 hover:shadow-xl">
        <div class="relative pb-2/3 overflow-hidden group">
          <img class="absolute h-full w-full object-cover transform transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1043/600/400" alt="Gallery Image 2">
          <div class="absolute inset-0 bg-red-500 opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
        </div>
        <div class="p-5 flex-grow flex flex-col">
          <h3 class="text-xl font-semibold text-orange-700 dark:text-orange-300 mb-2 mt-auto">Seamless Onboarding</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Guiding users through their first experience with ease.</p>
        </div>
      </div>

      <!-- Gallery Item 3 -->
      <div class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 transition-shadow duration-300 hover:shadow-xl">
        <div class="relative pb-2/3 overflow-hidden group">
          <img class="absolute h-full w-full object-cover transform transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1025/600/400" alt="Gallery Image 3">
          <div class="absolute inset-0 bg-orange-500 opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
        </div>
        <div class="p-5 flex-grow flex flex-col">
          <h3 class="text-xl font-semibold text-orange-700 dark:text-orange-300 mb-2 mt-auto">Responsive Reporting</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Reports that look great on any device, any time.</p>
        </div>
      </div>

      <!-- Gallery Item 4 -->
      <div class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 transition-shadow duration-300 hover:shadow-xl">
        <div class="relative pb-2/3 overflow-hidden group">
          <img class="absolute h-full w-full object-cover transform transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1057/600/400" alt="Gallery Image 4">
          <div class="absolute inset-0 bg-yellow-600 opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
        </div>
        <div class="p-5 flex-grow flex flex-col">
          <h3 class="text-xl font-semibold text-orange-700 dark:text-orange-300 mb-2 mt-auto">API Integration UI</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Simplified user interfaces for complex integrations.</p>
        </div>
      </div>

      <!-- Gallery Item 5 -->
      <div class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 transition-shadow duration-300 hover:shadow-xl">
        <div class="relative pb-2/3 overflow-hidden group">
          <img class="absolute h-full w-full object-cover transform transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1074/600/400" alt="Gallery Image 5">
          <div class="absolute inset-0 bg-red-600 opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
        </div>
        <div class="p-5 flex-grow flex flex-col">
          <h3 class="text-xl font-semibold text-orange-700 dark:text-orange-300 mb-2 mt-auto">Mobile-First Design</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Experience the best on any mobile device.</p>
        </div>
      </div>

      <!-- Gallery Item 6 -->
      <div class="flex flex-col rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 transition-shadow duration-300 hover:shadow-xl">
        <div class="relative pb-2/3 overflow-hidden group">
          <img class="absolute h-full w-full object-cover transform transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1080/600/400" alt="Gallery Image 6">
          <div class="absolute inset-0 bg-orange-600 opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
        </div>
        <div class="p-5 flex-grow flex flex-col">
          <h3 class="text-xl font-semibold text-orange-700 dark:text-orange-300 mb-2 mt-auto">Customization Options</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Giving users the power to personalize their experience.</p>
        </div>
      </div>
    </div>
  </div>
</section>