Carrousel de mode d’automne ludique

<section class="bg-orange-50 dark:bg-gray-900 py-12 sm:py-16 lg:py-20">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-4xl font-extrabold text-orange-900 dark:text-orange-200 text-center mb-10 sm:mb-12 lg:mb-16 font-serif tracking-tight leading-tight">
      Autumn Trends on Repeat!
    </h2>
    
    <!-- Carousel Container -->
    <div class="relative flex items-center justify-center">
      <!-- Navigation Buttons (hidden, for illustrative purposes of interactivity) -->
      <button aria-label="Previous Slide" class="absolute left-0 top-1/2 -translate-y-1/2 bg-white/70 dark:bg-gray-800/70 p-3 rounded-full shadow-lg z-10 hidden md:block focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-600 transition duration-300 transform hover:scale-105">
        <svg class="h-6 w-6 text-orange-700 dark:text-orange-300 transform rotate-180" 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>
      <button aria-label="Next Slide" class="absolute right-0 top-1/2 -translate-y-1/2 bg-white/70 dark:bg-gray-800/70 p-3 rounded-full shadow-lg z-10 hidden md:block focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-600 transition duration-300 transform hover:scale-105">
        <svg class="h-6 w-6 text-orange-700 dark:text-orange-300" 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>

      <!-- Carousel Slides (Illustrative - In a real scenario, this would be JS-driven) -->
      <div class="relative w-full overflow-hidden">
        <div class="flex space-x-6 lg:space-x-8 px-4 sm:px-0 snap-x snap-mandatory overflow-x-auto pb-4 scrollbar-hide">
          <!-- Slide 1 -->
          <div class="flex-none w-full sm:w-1/2 lg:w-1/3 snap-center">
            <div class="bg-white dark:bg-gray-800 rounded-3xl overflow-hidden shadow-xl p-4 sm:p-6 transform transition duration-500 hover:scale-105 hover:shadow-2xl ring-4 ring-orange-200 dark:ring-orange-700/50">
              <img class="w-full h-64 object-cover object-center rounded-2xl mb-4 shadow" src="https://picsum.photos/id/1015/600/400" alt="Cozy Autumn Sweater">
              <div class="p-2">
                <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-100 mb-2 font-serif">Sunset Comfort Sweater</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">Wrap yourself in warmth and style. Perfect for chilly evenings.</p>
                <span class="inline-block bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-200 text-xs font-semibold px-3 py-1 rounded-full mb-4">New Collection</span>
                <div class="flex justify-between items-center">
                  <span class="text-3xl font-extrabold text-burgundy-700 dark:text-burgundy-200">$79.99</span>
                  <button class="bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-semibold py-2 px-6 rounded-full shadow-md transition duration-300 transform hover:-translate-y-1 ring-4 ring-transparent hover:ring-orange-300 dark:hover:ring-orange-800">
                    Snag Yours!
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- Slide 2 -->
          <div class="flex-none w-full sm:w-1/2 lg:w-1/3 snap-center">
            <div class="bg-white dark:bg-gray-800 rounded-3xl overflow-hidden shadow-xl p-4 sm:p-6 transform transition duration-500 hover:scale-105 hover:shadow-2xl ring-4 ring-orange-200 dark:ring-orange-700/50">
              <img class="w-full h-64 object-cover object-center rounded-2xl mb-4 shadow" src="https://picsum.photos/id/1018/600/400" alt="Autumn Forest Boots">
              <div class="p-2">
                <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-100 mb-2 font-serif">Wanderlust Trail Boots</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">Adventure awaits with these durable and stylish boots.</p>
                <span class="inline-block bg-brown-100 dark:bg-brown-900 text-brown-700 dark:text-brown-200 text-xs font-semibold px-3 py-1 rounded-full mb-4">Best Seller</span>
                <div class="flex justify-between items-center">
                  <span class="text-3xl font-extrabold text-burgundy-700 dark:text-burgundy-200">$120.00</span>
                  <button class="bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-semibold py-2 px-6 rounded-full shadow-md transition duration-300 transform hover:-translate-y-1 ring-4 ring-transparent hover:ring-orange-300 dark:hover:ring-orange-800">
                    Grab a Pair!
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- Slide 3 -->
          <div class="flex-none w-full sm:w-1/2 lg:w-1/3 snap-center">
            <div class="bg-white dark:bg-gray-800 rounded-3xl overflow-hidden shadow-xl p-4 sm:p-6 transform transition duration-500 hover:scale-105 hover:shadow-2xl ring-4 ring-orange-200 dark:ring-orange-700/50">
              <img class="w-full h-64 object-cover object-center rounded-2xl mb-4 shadow" src="https://picsum.photos/id/1020/600/400" alt="Autumn Scarf">
              <div class="p-2">
                <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-100 mb-2 font-serif">Fireside Plaid Scarf</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">A touch of tartan charm for your autumn ensemble.</p>
                <span class="inline-block bg-burgundy-100 dark:bg-burgundy-900 text-burgundy-700 dark:text-burgundy-200 text-xs font-semibold px-3 py-1 rounded-full mb-4">Limited Edition</span>
                <div class="flex justify-between items-center">
                  <span class="text-3xl font-extrabold text-burgundy-700 dark:text-burgundy-200">$45.50</span>
                  <button class="bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-semibold py-2 px-6 rounded-full shadow-md transition duration-300 transform hover:-translate-y-1 ring-4 ring-transparent hover:ring-orange-300 dark:hover:ring-orange-800">
                    Wrap it Up!
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- Slide 4 -->
          <div class="flex-none w-full sm:w-1/2 lg:w-1/3 snap-center">
            <div class="bg-white dark:bg-gray-800 rounded-3xl overflow-hidden shadow-xl p-4 sm:p-6 transform transition duration-500 hover:scale-105 hover:shadow-2xl ring-4 ring-orange-200 dark:ring-orange-700/50">
              <img class="w-full h-64 object-cover object-center rounded-2xl mb-4 shadow" src="https://picsum.photos/id/1025/600/400" alt="Autumn Handbag">
              <div class="p-2">
                <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-100 mb-2 font-serif">Harvest Moon Handbag</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">Carry your essentials in elegant seasonal style.</p>
                <span class="inline-block bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-200 text-xs font-semibold px-3 py-1 rounded-full mb-4">New Arrival</span>
                <div class="flex justify-between items-center">
                  <span class="text-3xl font-extrabold text-burgundy-700 dark:text-burgundy-200">$95.00</span>
                  <button class="bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-semibold py-2 px-6 rounded-full shadow-md transition duration-300 transform hover:-translate-y-1 ring-4 ring-transparent hover:ring-orange-300 dark:hover:ring-orange-800">
                    Add to Cart!
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Indicator Dots (Illustrative) -->
      <div class="absolute bottom-0 translate-y-full flex space-x-2 pt-4 sm:pt-6">
        <span class="block w-3 h-3 rounded-full bg-orange-400 dark:bg-orange-500 opacity-75"></span>
        <span class="block w-3 h-3 rounded-full bg-orange-300 dark:bg-orange-600 opacity-50"></span>
        <span class="block w-3 h-3 rounded-full bg-orange-300 dark:bg-orange-600 opacity-50"></span>
        <span class="block w-3 h-3 rounded-full bg-orange-300 dark:bg-orange-600 opacity-50"></span>
      </div>
    </div>
  </div>
</section>

<style>
  /* Hide scrollbar for Chrome, Safari and Opera */
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
</style>