轮播滑块组件

<div class="relative w-full overflow-hidden bg-orange-50 dark:bg-zinc-800 py-12 sm:py-16 md:py-20 lg:py-24 font-sans">
  <div class="relative container mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Hidden radio inputs for carousel functionality (CSS only) -->
    <input type="radio" name="carousel-material" id="slide-1-material" class="hidden" checked>
    <input type="radio" name="carousel-material" id="slide-2-material" class="hidden">
    <input type="radio" name="carousel-material" id="slide-3-material" class="hidden">

    <div class="carousel-inner relative w-full flex transition-transform duration-500 ease-in-out" style="transform: translateX(calc(var(--carousel-translate-x, 0) * 100%));">
      <!-- Slide 1 -->
      <div class="carousel-item w-full flex-shrink-0">
        <div class="bg-amber-100 dark:bg-zinc-700 rounded-lg shadow-xl p-6 sm:p-8 md:p-10 flex flex-col md:flex-row items-center space-y-6 md:space-y-0 md:space-x-8 lg:space-x-12">
          <div class="flex-shrink-0 w-full md:w-1/2 lg:w-2/5">
            <img src="https://picsum.photos/seed/material1/600/400" alt="Project 1 Image" class="w-full h-auto rounded-lg shadow-md object-cover transform transition-transform duration-300 hover:scale-[1.02]">
          </div>
          <div class="flex-grow text-brown-800 dark:text-zinc-200 text-center md:text-left">
            <h3 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-3 md:mb-4 text-chocolate-900 dark:text-orange-200">Elegant Web Design</h3>
            <p class="text-md sm:text-lg lg:text-xl leading-relaxed mb-4 md:mb-6">Crafting beautiful and functional websites with a focus on user experience and modern aesthetics. This project showcases a sophisticated approach to digital presence.</p>
            <a href="#" class="inline-block px-5 py-2.5 sm:px-6 sm:py-3 bg-amber-700 hover:bg-amber-800 dark:bg-orange-600 dark:hover:bg-orange-700 text-white rounded-md shadow-md transition duration-300 transform hover:scale-105">
              View Project
            </a>
          </div>
        </div>
      </div>

      <!-- Slide 2 -->
      <div class="carousel-item w-full flex-shrink-0">
        <div class="bg-amber-100 dark:bg-zinc-700 rounded-lg shadow-xl p-6 sm:p-8 md:p-10 flex flex-col md:flex-row items-center space-y-6 md:space-y-0 md:space-x-8 lg:space-x-12">
          <div class="flex-shrink-0 w-full md:w-1/2 lg:w-2/5">
            <img src="https://picsum.photos/seed/material2/600/400" alt="Project 2 Image" class="w-full h-auto rounded-lg shadow-md object-cover transform transition-transform duration-300 hover:scale-[1.02]">
          </div>
          <div class="flex-grow text-brown-800 dark:text-zinc-200 text-center md:text-left">
            <h3 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-3 md:mb-4 text-chocolate-900 dark:text-orange-200">Mobile App Development</h3>
            <p class="text-md sm:text-lg lg:text-xl leading-relaxed mb-4 md:mb-6">Building intuitive and high-performing mobile applications for iOS and Android, ensuring seamless user interaction and robust functionality.</p>
            <a href="#" class="inline-block px-5 py-2.5 sm:px-6 sm:py-3 bg-amber-700 hover:bg-amber-800 dark:bg-orange-600 dark:hover:bg-orange-700 text-white rounded-md shadow-md transition duration-300 transform hover:scale-105">
              Discover More
            </a>
          </div>
        </div>
      </div>

      <!-- Slide 3 -->
      <div class="carousel-item w-full flex-shrink-0">
        <div class="bg-amber-100 dark:bg-zinc-700 rounded-lg shadow-xl p-6 sm:p-8 md:p-10 flex flex-col md:flex-row items-center space-y-6 md:space-y-0 md:space-x-8 lg:space-x-12">
          <div class="flex-shrink-0 w-full md:w-1/2 lg:w-2/5">
            <img src="https://picsum.photos/seed/material3/600/400" alt="Project 3 Image" class="w-full h-auto rounded-lg shadow-md object-cover transform transition-transform duration-300 hover:scale-[1.02]">
          </div>
          <div class="flex-grow text-brown-800 dark:text-zinc-200 text-center md:text-left">
            <h3 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-3 md:mb-4 text-chocolate-900 dark:text-orange-200">Brand Identity Creation</h3>
            <p class="text-md sm:text-lg lg:text-xl leading-relaxed mb-4 md:mb-6">Developing strong and recognizable brand identities through comprehensive logo design, brand guidelines, and visual communication strategies.</p>
            <a href="#" class="inline-block px-5 py-2.5 sm:px-6 sm:py-3 bg-amber-700 hover:bg-amber-800 dark:bg-orange-600 dark:hover:bg-orange-700 text-white rounded-md shadow-md transition duration-300 transform hover:scale-105">
              See Case Study
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- Navigation Dots -->
    <div class="absolute bottom-0 left-0 right-0 p-4 flex justify-center space-x-3 mt-6 sm:mt-8">
      <label for="slide-1-material" class="w-3 h-3 sm:w-4 sm:h-4 bg-amber-400 dark:bg-zinc-500 rounded-full cursor-pointer shadow-md transition-colors duration-300 hover:bg-amber-500 dark:hover:bg-zinc-400"></label>
      <label for="slide-2-material" class="w-3 h-3 sm:w-4 sm:h-4 bg-amber-400 dark:bg-zinc-500 rounded-full cursor-pointer shadow-md transition-colors duration-300 hover:bg-amber-500 dark:hover:bg-zinc-400"></label>
      <label for="slide-3-material" class="w-3 h-3 sm:w-4 sm:h-4 bg-amber-400 dark:bg-zinc-500 rounded-full cursor-pointer shadow-md transition-colors duration-300 hover:bg-amber-500 dark:hover:bg-zinc-400"> </label>
    </div>

    <!-- CSS for Carousel functionality (embed Tailwind custom classes or use external CSS) -->
    <style>
      /* Base styles for the carousel -- if not using a build tool, this would be in a style tag or separate CSS file */
      .carousel-inner {
        display: flex;
      }
      .carousel-item {
        flex-shrink: 0;
        width: 100%;
      }
      
      /* Carousel navigation using hidden radio inputs */
      #slide-1-material:checked ~ .carousel-inner {
        --carousel-translate-x: 0;
      }
      #slide-2-material:checked ~ .carousel-inner {
        --carousel-translate-x: -1;
      }
      #slide-3-material:checked ~ .carousel-inner {
        --carousel-translate-x: -2;
      }

      /* Navigation dot active state */
      #slide-1-material:checked ~ .bottom-0 > label:nth-child(1),
      #slide-2-material:checked ~ .bottom-0 > label:nth-child(2),
      #slide-3-material:checked ~ .bottom-0 > label:nth-child(3) {
        background-color: #92400e; /* amber-800 */
        transform: scale(1.2);
        box-shadow: 0 0px 8px rgba(0,0,0,0.3);
      }
      /* Dark mode active state */
      .dark #slide-1-material:checked ~ .bottom-0 > label:nth-child(1),
      .dark #slide-2-material:checked ~ .bottom-0 > label:nth-child(2),
      .dark #slide-3-material:checked ~ .bottom-0 > label:nth-child(3) {
        background-color: #ea580c; /* orange-600 */
      }
    </style>
  </div>
</div>