Industrial_Farming_Cards_Component

<section class="py-12 bg-stone-100 dark:bg-stone-900 transition-colors duration-300">
  <div class="container mx-auto px-4">
    <h2 class="text-4xl font-extrabold text-center text-stone-800 dark:text-stone-200 mb-12 uppercase tracking-wide font-mono">
      Farm Operations At A Glance
    </h2>
    <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

      <!-- Card 1: Crop Monitoring -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden border-t-4 border-l-4 border-stone-400 dark:border-stone-600 group hover:shadow-2xl hover:scale-105 transition duration-300 ease-in-out transform relative h-full flex flex-col">
        <div class="absolute -top-3 -left-3 w-8 h-8 bg-stone-400 dark:bg-stone-600 rounded-full flex items-center justify-center text-stone-900 dark:text-stone-100 text-lg font-bold font-mono">1</div>
        <img class="w-full h-48 object-cover object-center border-b-2 border-stone-300 dark:border-stone-700" src="https://picsum.photos/id/1015/400/300" alt="Farm field with crops">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="font-bold text-2xl text-stone-800 dark:text-stone-100 mb-2 font-mono uppercase tracking-wide">Crop Monitoring</h3>
          <p class="text-stone-700 dark:text-stone-300 text-base mb-4 flex-grow">
            Real-time data on soil moisture, temperature, and nutrient levels. Optimize irrigation and fertilization for maximum yield.
          </p>
          <div class="mt-4 pt-4 border-t border-stone-300 dark:border-stone-700 flex items-center justify-between text-stone-600 dark:text-stone-400">
            <span class="flex items-center text-sm">
              <svg class="w-4 h-4 mr-1 text-yellow-600 dark:text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
              Updated daily
            </span>
            <a href="#" class="text-stone-900 dark:text-stone-100 hover:text-orange-700 dark:hover:text-amber-500 font-semibold text-sm underline-offset-4 hover:underline transition-colors duration-200">
              View Analytics
            </a>
          </div>
        </div>
      </div>

      <!-- Card 2: Livestock Management -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden border-t-4 border-l-4 border-stone-400 dark:border-stone-600 group hover:shadow-2xl hover:scale-105 transition duration-300 ease-in-out transform relative h-full flex flex-col">
        <div class="absolute -top-3 -left-3 w-8 h-8 bg-stone-400 dark:bg-stone-600 rounded-full flex items-center justify-center text-stone-900 dark:text-stone-100 text-lg font-bold font-mono">2</div>
        <img class="w-full h-48 object-cover object-center border-b-2 border-stone-300 dark:border-stone-700" src="https://picsum.photos/id/1084/400/300" alt="Cows grazing in a field">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="font-bold text-2xl text-stone-800 dark:text-stone-100 mb-2 font-mono uppercase tracking-wide">Livestock Health</h3>
          <p class="text-stone-700 dark:text-stone-300 text-base mb-4 flex-grow">
            Track animal health, feeding schedules, and breeding cycles. Ensure optimal welfare and productivity.
          </p>
          <div class="mt-4 pt-4 border-t border-stone-300 dark:border-stone-700 flex items-center justify-between text-stone-600 dark:text-stone-400">
            <span class="flex items-center text-sm">
              <svg class="w-4 h-4 mr-1 text-green-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              Healthy metrics
            </span>
            <a href="#" class="text-stone-900 dark:text-stone-100 hover:text-orange-700 dark:hover:text-amber-500 font-semibold text-sm underline-offset-4 hover:underline transition-colors duration-200">
              Manage Herds
            </a>
          </div>
        </div>
      </div>

      <!-- Card 3: Equipment Maintenance -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden border-t-4 border-l-4 border-stone-400 dark:border-stone-600 group hover:shadow-2xl hover:scale-105 transition duration-300 ease-in-out transform relative h-full flex flex-col">
        <div class="absolute -top-3 -left-3 w-8 h-8 bg-stone-400 dark:bg-stone-600 rounded-full flex items-center justify-center text-stone-900 dark:text-stone-100 text-lg font-bold font-mono">3</div>
        <img class="w-full h-48 object-cover object-center border-b-2 border-stone-300 dark:border-stone-700" src="https://picsum.photos/id/106/400/300" alt="Heavy farm machinery">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="font-bold text-2xl text-stone-800 dark:text-stone-100 mb-2 font-mono uppercase tracking-wide">Machinery Hub</h3>
          <p class="text-stone-700 dark:text-stone-300 text-base mb-4 flex-grow">
            Monitor equipment usage, schedule maintenance, and track fuel consumption. Minimize downtime and costs.
          </p>
          <div class="mt-4 pt-4 border-t border-stone-300 dark:border-stone-700 flex items-center justify-between text-stone-600 dark:text-stone-400">
            <span class="flex items-center text-sm">
              <svg class="w-4 h-4 mr-1 text-red-600 dark:text-rose-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.32a1 1 0 01.743-.32h2a1 1 0 01.743.32l.995 1.194a.25.25 0 00.176.079h4.053A2.75 2.75 0 0118 7.32v7.74a2.75 2.75 0 01-2.75 2.75H4.75A2.75 2.75 0 012 15.06V7.32a2.75 2.75 0 012.75-2.75h4.053a.25.25 0 00.176-.079l.995-1.194zM12 9a1 1 0 10-2 0v2a1 1 0 102 0V9z" clip-rule="evenodd"></path></svg>
              Service required
            </span>
            <a href="#" class="text-stone-900 dark:text-stone-100 hover:text-orange-700 dark:hover:text-amber-500 font-semibold text-sm underline-offset-4 hover:underline transition-colors duration-200">
              Schedule Service
            </a>
          </div>
        </div>
      </div>

      <!-- Card 4: Farm Management -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden border-t-4 border-l-4 border-stone-400 dark:border-stone-600 group hover:shadow-2xl hover:scale-105 transition duration-300 ease-in-out transform relative h-full flex flex-col">
        <div class="absolute -top-3 -left-3 w-8 h-8 bg-stone-400 dark:bg-stone-600 rounded-full flex items-center justify-center text-stone-900 dark:text-stone-100 text-lg font-bold font-mono">4</div>
        <img class="w-full h-48 object-cover object-center border-b-2 border-stone-300 dark:border-stone-700" src="https://picsum.photos/id/194/400/300" alt="Barn and farm landscape">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="font-bold text-2xl text-stone-800 dark:text-stone-100 mb-2 font-mono uppercase tracking-wide">Supply Chain</h3>
          <p class="text-stone-700 dark:text-stone-300 text-base mb-4 flex-grow">
            Manage inventory, orders, and sales. Streamline your farm's entire production and distribution process.
          </p>
          <div class="mt-4 pt-4 border-t border-stone-300 dark:border-stone-700 flex items-center justify-between text-stone-600 dark:text-stone-400">
            <span class="flex items-center text-sm">
              <svg class="w-4 h-4 mr-1 text-blue-600 dark:text-sky-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1h2a1 1 0 110 2h-2v2a1 1 0 11-2 0V6H6a1 1 0 010-2h2V3a1 1 0 011-1z"/><path fill-rule="evenodd" d="M4 7h12a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V9a2 2 0 012-2zm0 2v6h12V9H4z" clip-rule="evenodd"></path></svg>
              New orders
            </span>
            <a href="#" class="text-stone-900 dark:text-stone-100 hover:text-orange-700 dark:hover:text-amber-500 font-semibold text-sm underline-offset-4 hover:underline transition-colors duration-200">
              View Reports
            </a>
          </div>
        </div>
      </div>

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