カルーセルスライダーコンポーネント

<section class="relative w-full overflow-hidden py-12 bg-gradient-to-r from-purple-100 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
  <div class="container mx-auto px-4">
    <h2 class="text-center text-4xl sm:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-400 dark:to-indigo-400 mb-12">
      Featured Collections
    </h2>

    <div class="relative">
      <!-- Slider wrapper (emulated for static HTML, ideally managed by JS) -->
      <div class="flex flex-col md:flex-row items-center justify-center space-y-8 md:space-y-0 md:space-x-8 lg:space-x-12 animate-fade-in-up">

        <!-- Card 1 -->
        <div class="relative w-full max-w-sm rounded-3xl overflow-hidden shadow-xl transform transition-all duration-500 hover:scale-[1.03] hover:shadow-2xl
                    bg-gradient-to-br from-purple-500 to-pink-500 dark:from-purple-800 dark:to-pink-800">
          <img class="w-full h-72 object-cover transition-transform duration-500 hover:scale-105" src="https://picsum.photos/id/1015/400/300" alt="Model wearing modern fashion">
          <div class="p-6 text-white text-center">
            <h3 class="text-2xl font-bold mb-2">Urban Chic</h3>
            <p class="text-sm opacity-90 mb-4">Effortless style meets city sophistication. Discover your new favorite looks.</p>
            <a href="#" class="inline-block px-6 py-3 rounded-full text-sm font-semibold
                         bg-white text-pink-600 shadow-md transform transition-all duration-300 hover:scale-105 hover:bg-gray-100
                         dark:bg-indigo-700 dark:text-white dark:hover:bg-indigo-600">
              Shop Now
            </a>
          </div>
        </div>

        <!-- Card 2 -->
        <div class="relative w-full max-w-sm rounded-3xl overflow-hidden shadow-xl transform transition-all duration-500 hover:scale-[1.03] hover:shadow-2xl
                    bg-gradient-to-br from-yellow-400 to-orange-500 dark:from-orange-700 dark:to-red-700">
          <img class="w-full h-72 object-cover transition-transform duration-500 hover:scale-105" src="https://picsum.photos/id/1025/400/300" alt="Beauty product display">
          <div class="p-6 text-white text-center">
            <h3 class="text-2xl font-bold mb-2">Radiant Glow</h3>
            <p class="text-sm opacity-90 mb-4">Illuminate your beauty with our premium skincare essentials.</p>
            <a href="#" class="inline-block px-6 py-3 rounded-full text-sm font-semibold
                         bg-white text-orange-600 shadow-md transform transition-all duration-300 hover:scale-105 hover:bg-gray-100
                         dark:bg-indigo-700 dark:text-white dark:hover:bg-indigo-600">
              Explore More
            </a>
          </div>
        </div>

        <!-- Card 3 -->
        <div class="relative w-full max-w-sm rounded-3xl overflow-hidden shadow-xl transform transition-all duration-500 hover:scale-[1.03] hover:shadow-2xl
                    bg-gradient-to-br from-green-400 to-blue-500 dark:from-teal-700 dark:to-blue-700">
          <img class="w-full h-72 object-cover transition-transform duration-500 hover:scale-105" src="https://picsum.photos/id/1069/400/300" alt="Ethereal fashion shot">
          <div class="p-6 text-white text-center">
            <h3 class="text-2xl font-bold mb-2">Ethereal Dreams</h3>
            <p class="text-sm opacity-90 mb-4">Dive into a world of enchanting designs and luxurious fabrics.</p>
            <a href="#" class="inline-block px-6 py-3 rounded-full text-sm font-semibold
                         bg-white text-blue-600 shadow-md transform transition-all duration-300 hover:scale-105 hover:bg-gray-100
                         dark:bg-indigo-700 dark:text-white dark:hover:bg-indigo-600">
              View Collection
            </a>
          </div>
        </div>

      </div>

      <!-- Navigation arrows (emulated for static HTML, ideally managed by JS) -->
      <button aria-label="Previous slide" class="hidden md:block absolute top-1/2 -left-8 transform -translate-y-1/2 p-3 rounded-full
                              bg-white/70 text-gray-800 shadow-lg transition-all duration-300 hover:bg-white hover:scale-110
                              dark:bg-gray-700/70 dark:text-white dark:hover:bg-gray-700 z-10">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
      </button>
      <button aria-label="Next slide" class="hidden md:block absolute top-1/2 -right-8 transform -translate-y-1/2 p-3 rounded-full
                             bg-white/70 text-gray-800 shadow-lg transition-all duration-300 hover:bg-white hover:scale-110
                             dark:bg-gray-700/70 dark:text-white dark:hover:bg-gray-700 z-10">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
      </button>

    </div>

    <!-- Pagination dots (emulated for static HTML, ideally managed by JS) -->
    <div class="flex justify-center space-x-3 mt-12">
      <span class="block w-3 h-3 rounded-full bg-purple-500 dark:bg-purple-400"></span>
      <span class="block w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors duration-200"></span>
      <span class="block w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors duration-200"></span>
    </div>

  </div>

  <style>
    /* Basic fade-in-up animation for content inside the 'animate-fade-in-up' class */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .animate-fade-in-up {
      animation: fadeInUp 1s ease-out forwards;
    }
  </style>
</section>