製品ギャラリーコンポーネント

<div class="bg-stone-100 dark:bg-stone-900 py-8 sm:py-12 md:py-16">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-3xl font-extrabold text-stone-900 dark:text-stone-50 mb-8 text-center sm:text-4xl">Our Latest Creations</h2>
    
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8">
      <!-- Product Card 1 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:scale-105 hover:shadow-lg">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1018/400/300" alt="Forest Stream">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Enchanted Forest Canvas</h3>
          <p class="text-stone-600 dark:text-stone-300 text-sm mb-3">A breathtaking view captured on canvas, perfect for any nature lover's home.</p>
          <div class="flex justify-between items-center">
            <span class="text-lg font-bold text-stone-900 dark:text-stone-50">$120.00</span>
            <button class="px-4 py-2 bg-amber-700 text-white dark:bg-amber-600 dark:hover:bg-amber-500 rounded-lg hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 text-sm font-medium transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:scale-105 hover:shadow-lg">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1060/400/300" alt="Desert Landscape">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Desert Bloom Sculpture</h3>
          <p class="text-stone-600 dark:text-stone-300 text-sm mb-3">Handcrafted sculpture inspired by the resilient beauty of desert florals.</p>
          <div class="flex justify-between items-center">
            <span class="text-lg font-bold text-stone-900 dark:text-stone-50">$95.00</span>
            <button class="px-4 py-2 bg-amber-700 text-white dark:bg-amber-600 dark:hover:bg-amber-500 rounded-lg hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 text-sm font-medium transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:scale-105 hover:shadow-lg">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1004/400/300" alt="Mountain Peak">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Alpine Summit Print</h3>
          <p class="text-stone-600 dark:text-stone-300 text-sm mb-3">A stunning photographic print capturing the majesty of a mountain peak.</p>
          <div class="flex justify-between items-center">
            <span class="text-lg font-bold text-stone-900 dark:text-stone-50">$80.00</span>
            <button class="px-4 py-2 bg-amber-700 text-white dark:bg-amber-600 dark:hover:bg-amber-500 rounded-lg hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 text-sm font-medium transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:scale-105 hover:shadow-lg">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1020/400/300" alt="Beach Sunset">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Coastal Serenity Frame</h3>
          <p class="text-stone-600 dark:text-stone-300 text-sm mb-3">Bring the calming essence of the ocean into your space with this piece.</p>
          <div class="flex justify-between items-center">
            <span class="text-lg font-bold text-stone-900 dark:text-stone-50">$110.00</span>
            <button class="px-4 py-2 bg-amber-700 text-white dark:bg-amber-600 dark:hover:bg-amber-500 rounded-lg hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 text-sm font-medium transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>