Componente de tarjetas de producto - Agricultura/Ganadería

<section class="py-12 bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 font-sans">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-4xl font-bold text-center mb-10 tracking-tight dark:text-orange-500">
      Our Farm Produce
    </h2>
    <p class="max-w-3xl mx-auto text-center text-lg mb-12 opacity-90 leading-relaxed">
      Discover our selection of fresh, high-quality agricultural products, sustainably grown and harvested with care. From field to your table.
    </p>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">

      <!-- Product Card 1 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border border-stone-200 dark:border-stone-700">
        <div class="relative pb-2/3 overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1015/400/300" alt="Fresh Organic Apples">
          <span class="absolute top-3 right-3 bg-orange-600 text-white text-xs font-semibold px-3 py-1 rounded-full shadow-md">NEW</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 line-clamp-2">Organic Gala Apples</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-3">Sweet and crisp, perfect for snacking or baking. Grown without pesticides.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-orange-700 dark:text-orange-500">$4.99 <span class="text-base text-stone-500">/lb</span></span>
            <div class="flex items-center text-orange-500">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-stone-300 dark:text-stone-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            </div>
          </div>
          <button class="w-full bg-orange-700 hover:bg-orange-800 text-white font-bold py-3 px-4 rounded-md transition duration-300 transform hover:-translate-y-0.5 shadow-md hover:shadow-lg dark:bg-orange-600 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border border-stone-200 dark:border-stone-700">
        <div class="relative pb-2/3 overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1004/400/300" alt="Freshly Harvested Carrots">
        </div>
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 line-clamp-2">Farm Fresh Carrots</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-3">Sweet, crunchy, and packed with vitamins. Directly from our fields to your kitchen.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-orange-700 dark:text-orange-500">$2.49 <span class="text-base text-stone-500">/bunch</span></span>
            <div class="flex items-center text-orange-500">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-stone-300 dark:text-stone-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-stone-300 dark:text-stone-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            </div>
          </div>
          <button class="w-full bg-orange-700 hover:bg-orange-800 text-white font-bold py-3 px-4 rounded-md transition duration-300 transform hover:-translate-y-0.5 shadow-md hover:shadow-lg dark:bg-orange-600 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border border-stone-200 dark:border-stone-700">
        <div class="relative pb-2/3 overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1018/400/300" alt="Artisan Sourdough Bread">
          <span class="absolute top-3 left-3 bg-burgundy-700 text-white text-xs font-semibold px-3 py-1 rounded-full shadow-md dark:bg-burgundy-600">LIMITED</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 line-clamp-2">Artisan Sourdough Bread</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-3">Hand-baked with our own ancient grain flour. A true taste of tradition.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-orange-700 dark:text-orange-500">$6.00 <span class="text-base text-stone-500">/loaf</span></span>
            <div class="flex items-center text-orange-500">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-stone-300 dark:text-stone-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            </div>
          </div>
          <button class="w-full bg-orange-700 hover:bg-orange-800 text-white font-bold py-3 px-4 rounded-md transition duration-300 transform hover:-translate-y-0.5 shadow-md hover:shadow-lg dark:bg-orange-600 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border border-stone-200 dark:border-stone-700">
        <div class="relative pb-2/3 overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1020/400/300" alt="Farm Fresh Eggs">
        </div>
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 line-clamp-2">Pasture-Raised Eggs</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-3">From happy, healthy chickens roaming freely. Rich yolks and superior taste.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-orange-700 dark:text-orange-500">$5.19 <span class="text-base text-stone-500">/dozen</span></span>
            <div class="flex items-center text-orange-500">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-orange-300 dark:text-orange-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            </div>
          </div>
          <button class="w-full bg-orange-700 hover:bg-orange-800 text-white font-bold py-3 px-4 rounded-md transition duration-300 transform hover:-translate-y-0.5 shadow-md hover:shadow-lg dark:bg-orange-600 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
            Add to Cart
          </button>
        </div>
      </div>

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