Playful_Forest_Agriculture_Carousel

<section class="py-12 bg-lime-50 dark:bg-emerald-900 rounded-xl shadow-lg m-4">
  <div class="container mx-auto px-4">
    <h2 class="text-4xl md:text-5xl font-extrabold text-center text-emerald-800 dark:text-lime-200 mb-12 font-sans leading-tight">
      Harvesting Joy, Cultivating Growth
    </h2>

    <div class="relative flex items-center justify-center">
      <!-- Navigation Buttons (for display purposes, actual JS for functionality) -->
      <button aria-label="Previous slide" class="absolute left-0 z-10 p-3 bg-emerald-600 rounded-full shadow-lg text-white hover:bg-emerald-700 focus:outline-none focus:ring-4 focus:ring-emerald-400 focus:ring-opacity-75 transition duration-300 ease-in-out -left-4 md:-left-8 dark:bg-lime-600 dark:hover:bg-lime-700 dark:focus:ring-lime-400">
        <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="absolute right-0 z-10 p-3 bg-emerald-600 rounded-full shadow-lg text-white hover:bg-emerald-700 focus:outline-none focus:ring-4 focus:ring-emerald-400 focus:ring-opacity-75 transition duration-300 ease-in-out -right-4 md:-right-8 dark:bg-lime-600 dark:hover:bg-lime-700 dark:focus:ring-lime-400">
        <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>

      <!-- Carousel Track (Conceptual - assumes JS for dynamic sliding) -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full overflow-hidden">
        <!-- Slide 1 -->
        <div class="bg-white dark:bg-emerald-800 rounded-3xl p-6 shadow-xl transform transition duration-500 ease-in-out hover:scale-105 hover:shadow-2xl border-4 border-emerald-200 dark:border-emerald-700">
          <img class="w-full h-48 object-cover rounded-2xl mb-6 shadow-md border-2 border-emerald-300" src="https://picsum.photos/seed/agriculture1/600/400" alt="Freshly Harvested Produce">
          <h3 class="text-2xl font-bold text-emerald-700 dark:text-lime-300 mb-3">Bountiful Harvests</h3>
          <p class="text-emerald-600 dark:text-lime-400 text-lg leading-relaxed">Discover the freshest, organically grown produce straight from our fields to your table. Sustainable practices for a healthier planet.</p>
          <div class="mt-6 flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <img class="w-12 h-12 rounded-full border-4 border-emerald-400 dark:border-lime-500 shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Farmer John">
              <span class="text-emerald-700 dark:text-lime-300 font-semibold">Farmer John</span>
            </div>
            <a href="#" class="inline-flex items-center px-5 py-2 font-semibold text-white bg-emerald-500 rounded-md hover:bg-emerald-600 focus:outline-none focus:ring-4 focus:ring-emerald-300 transition duration-300 dark:bg-lime-500 dark:hover:bg-lime-600 dark:focus:ring-lime-300 shadow-md">
              Learn More
              <svg class="w-4 h-4 ml-2" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
            </a>
          </div>
        </div>

        <!-- Slide 2 -->
        <div class="bg-white dark:bg-emerald-800 rounded-3xl p-6 shadow-xl transform transition duration-500 ease-in-out hover:scale-105 hover:shadow-2xl border-4 border-emerald-200 dark:border-emerald-700">
          <img class="w-full h-48 object-cover rounded-2xl mb-6 shadow-md border-2 border-emerald-300" src="https://picsum.photos/seed/agriculture2/600/400" alt="Modern Farming Technology">
          <h3 class="text-2xl font-bold text-emerald-700 dark:text-lime-300 mb-3">Smart Farming Solutions</h3>
          <p class="text-emerald-600 dark:text-lime-400 text-lg leading-relaxed">Embrace the future with our innovative farming technologies. Maximizing yields with minimal impact on nature.</p>
          <div class="mt-6 flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <img class="w-12 h-12 rounded-full border-4 border-emerald-400 dark:border-lime-500 shadow-md" src="https://randomuser.me/api/portraits/women/45.jpg" alt="Agri-Tech Anya">
              <span class="text-emerald-700 dark:text-lime-300 font-semibold">Agri-Tech Anya</span>
            </div>
            <a href="#" class="inline-flex items-center px-5 py-2 font-semibold text-white bg-emerald-500 rounded-md hover:bg-emerald-600 focus:outline-none focus:ring-4 focus:ring-emerald-300 transition duration-300 dark:bg-lime-500 dark:hover:bg-lime-600 dark:focus:ring-lime-300 shadow-md">
              Discover
              <svg class="w-4 h-4 ml-2" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
            </a>
          </div>
        </div>

        <!-- Slide 3 -->
        <div class="bg-white dark:bg-emerald-800 rounded-3xl p-6 shadow-xl transform transition duration-500 ease-in-out hover:scale-105 hover:shadow-2xl border-4 border-emerald-200 dark:border-emerald-700">
          <img class="w-full h-48 object-cover rounded-2xl mb-6 shadow-md border-2 border-emerald-300" src="https://picsum.photos/seed/agriculture3/600/400" alt="Community Farming">
          <h3 class="text-2xl font-bold text-emerald-700 dark:text-lime-300 mb-3">Community and Care</h3>
          <p class="text-emerald-600 dark:text-lime-400 text-lg leading-relaxed">Join our vibrant farming community. Share knowledge, grow together, and nurture the earth with love and dedication.</p>
          <div class="mt-6 flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <img class="w-12 h-12 rounded-full border-4 border-emerald-400 dark:border-lime-500 shadow-md" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Community Leader Chris">
              <span class="text-emerald-700 dark:text-lime-300 font-semibold">Community Chris</span>
            </div>
            <a href="#" class="inline-flex items-center px-5 py-2 font-semibold text-white bg-emerald-500 rounded-md hover:bg-emerald-600 focus:outline-none focus:ring-4 focus:ring-emerald-300 transition duration-300 dark:bg-lime-500 dark:hover:bg-lime-600 dark:focus:ring-lime-300 shadow-md">
              Join Us
              <svg class="w-4 h-4 ml-2" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- Dot Indicators (Conceptual - assumes JS for dynamic navigation) -->
    <div class="flex justify-center mt-12 space-x-4">
      <button aria-label="Go to slide 1" class="w-4 h-4 bg-emerald-600 dark:bg-lime-500 rounded-full focus:outline-none focus:ring-4 focus:ring-emerald-400 focus:ring-opacity-75 transition duration-300"></button>
      <button aria-label="Go to slide 2" class="w-4 h-4 bg-emerald-300 dark:bg-emerald-600 rounded-full hover:bg-emerald-400 dark:hover:bg-lime-400 focus:outline-none focus:ring-4 focus:ring-emerald-400 focus:ring-opacity-75 transition duration-300"></button>
      <button aria-label="Go to slide 3" class="w-4 h-4 bg-emerald-300 dark:bg-emerald-600 rounded-full hover:bg-emerald-400 dark:hover:bg-lime-400 focus:outline-none focus:ring-4 focus:ring-emerald-400 focus:ring-opacity-75 transition duration-300"></button>
    </div>
  </div>
</section>