Rejilla de agricultura lúdica

<div class="min-h-screen bg-orange-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8 font-sans transition-colors duration-300">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl font-extrabold text-orange-900 dark:text-orange-100 text-center mb-12 sm:mb-16 leading-tight">
      <span class="block">Harvesting Joy, Growing Futures</span>
      <span class="block text-2xl font-semibold mt-2 opacity-80">Explore Our Farm Life</span>
    </h2>

    <div class="grid gap-8 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

      <!-- Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg p-6 flex flex-col items-center text-center transform hover:scale-105 transition-all duration-300 group">
        <div class="w-32 h-32 rounded-full overflow-hidden mb-4 border-4 border-orange-200 dark:border-orange-700 shadow-md">
          <img src="https://picsum.photos/id/1084/300/300" alt="Farm Animals" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
        </div>
        <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-200 mb-2">Happy Livestock</h3>
        <p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed">Our animals live their best lives, nurtured with care and kindness.</p>
        <a href="#" class="mt-4 inline-flex items-center px-5 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-orange-500 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
          Learn More
        </a>
      </div>

      <!-- Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg p-6 flex flex-col items-center text-center transform hover:scale-105 transition-all duration-300 group">
        <div class="w-32 h-32 rounded-full overflow-hidden mb-4 border-4 border-orange-200 dark:border-orange-700 shadow-md">
          <img src="https://picsum.photos/id/106/300/300" alt="Fresh Produce" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
        </div>
        <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-200 mb-2">Bountiful Harvests</h3>
        <p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed">From our fields to your table, experience the freshest produce.</p>
        <a href="#" class="mt-4 inline-flex items-center px-5 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-orange-500 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
          See Products
        </a>
      </div>

      <!-- Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg p-6 flex flex-col items-center text-center transform hover:scale-105 transition-all duration-300 group">
        <div class="w-32 h-32 rounded-full overflow-hidden mb-4 border-4 border-orange-200 dark:border-orange-700 shadow-md">
          <img src="https://picsum.photos/id/111/300/300" alt="Sustainable Farming" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
        </div>
        <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-200 mb-2">Sustainable Practices</h3>
        <p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed">Committed to eco-friendly methods for a healthier planet.</p>
        <a href="#" class="mt-4 inline-flex items-center px-5 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-orange-500 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
          Our Mission
        </a>
      </div>

      <!-- Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg p-6 flex flex-col items-center text-center transform hover:scale-105 transition-all duration-300 group">
        <div class="w-32 h-32 rounded-full overflow-hidden mb-4 border-4 border-orange-200 dark:border-orange-700 shadow-md">
          <img src="https://randomuser.me/api/portraits/men/93.jpg" alt="Farmer John" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
        </div>
        <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-200 mb-2">Meet Our Farmers</h3>
        <p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed">Passionate individuals dedicated to bringing you the best.</p>
        <a href="#" class="mt-4 inline-flex items-center px-5 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-orange-500 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
          The Team
        </a>
      </div>

    </div>
  </div>
</div>