サイバーパンク農業進捗指標

<div class="bg-zinc-950 text-orange-400 min-h-screen p-4 sm:p-8 dark:bg-black dark:text-orange-300 font-mono">
  <div class="max-w-7xl mx-auto py-8 lg:py-12">
    <h2 class="text-4xl sm:text-5xl font-extrabold text-center mb-8 sm:mb-12 tracking-wide uppercase leading-tight text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-red-600 dark:from-yellow-300 dark:to-orange-500 drop-shadow-md">
      Agro-Bot 7.0: Crop Cycle Nexus
    </h2>

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

      <!-- Progress Card 1: Planting Phase -->
      <div class="bg-zinc-900 border border-orange-700/50 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 ease-in-out dark:bg-gray-950 dark:border-red-800/60">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-orange-600 to-red-800 rounded-full opacity-20 blur-xl dark:from-yellow-500 dark:to-orange-700"></div>
        <div class="flex items-center justify-between mb-5">
          <h3 class="text-2xl font-bold text-orange-300 dark:text-yellow-400">Planting Protocol</h3>
          <svg class="h-8 w-8 text-orange-500 group-hover:animate-pulse dark:text-red-600" 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.663 17h4.673M12 21h.01M17 7h3a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V9a2 2 0 012-2h3m0 0V5a2 2 0 012-2h2a2 2 0 012 2v2M7 7h10"></path></svg>
        </div>
        <p class="text-sm text-zinc-500 mb-4 dark:text-gray-400">Seed deployment and initial nutrient injection. Progress critical for sprout emergence.</p>
        <div class="w-full bg-zinc-800 rounded-full h-3 mb-2 dark:bg-gray-800">
          <div class="bg-gradient-to-r from-orange-500 to-red-700 h-3 rounded-full" style="width: 85%;"></div>
        </div>
        <div class="text-right text-sm text-orange-400 dark:text-yellow-300">85% Complete</div>
        <div class="mt-5 flex items-center text-sm text-zinc-500 dark:text-gray-400">
          <svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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>
          Last Check: 10/26/23 14:30 GMT
        </div>
      </div>

      <!-- Progress Card 2: Growth Monitoring -->
      <div class="bg-zinc-900 border border-orange-700/50 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 ease-in-out dark:bg-gray-950 dark:border-red-800/60">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-yellow-500 to-orange-700 rounded-full opacity-20 blur-xl dark:from-red-600 dark:to-orange-800"></div>
        <div class="flex items-center justify-between mb-5">
          <h3 class="text-2xl font-bold text-orange-300 dark:text-yellow-400">Biomass Accumulation</h3>
          <svg class="h-8 w-8 text-yellow-500 group-hover:animate-spin dark:text-orange-600" 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="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
        </div>
        <p class="text-sm text-zinc-500 mb-4 dark:text-gray-400">Real-time monitoring of crop growth and health indicators. AI-driven pathogen detection.</p>
        <div class="w-full bg-zinc-800 rounded-full h-3 mb-2 dark:bg-gray-800">
          <div class="bg-gradient-to-r from-yellow-500 to-orange-700 h-3 rounded-full" style="width: 60%;"></div>
        </div>
        <div class="text-right text-sm text-orange-400 dark:text-yellow-300">60% Data Collected</div>
        <div class="mt-5 flex items-center text-sm text-zinc-500 dark:text-gray-400">
          <svg class="w-4 h-4 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8h4a4 4 0 100-8H8zm0 7a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
          Next Scan: 10/27/23 08:00 GMT
        </div>
      </div>

      <!-- Progress Card 3: Resource Optimization -->
      <div class="bg-zinc-900 border border-orange-700/50 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 ease-in-out dark:bg-gray-950 dark:border-red-800/60">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-red-600 to-yellow-500 rounded-full opacity-20 blur-xl dark:from-orange-700 dark:to-red-800"></div>
        <div class="flex items-center justify-between mb-5">
          <h3 class="text-2xl font-bold text-orange-300 dark:text-yellow-400">Hydro-Energy Flow</h3>
          <svg class="h-8 w-8 text-red-500 group-hover:scale-125 transition-transform duration-300 dark:text-orange-600" 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="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
        </div>
        <p class="text-sm text-zinc-500 mb-4 dark:text-gray-400">Water and nutrient delivery system status. Awaiting recalibration of soil sensors.</p>
        <div class="w-full bg-zinc-800 rounded-full h-3 mb-2 dark:bg-gray-800">
          <div class="bg-gradient-to-r from-red-500 to-orange-700 h-3 rounded-full" style="width: 40%;"></div>
        </div>
        <div class="text-right text-sm text-orange-400 dark:text-yellow-300">40% Optimized</div>
        <div class="mt-5 flex items-start text-sm text-zinc-500 dark:text-gray-400">
          <svg class="w-4 h-4 mr-2 text-red-500 animate-bounce" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.3 2.672-1.3 3.437 0L14.4 7.252c1.346 2.241-.019 5.06-2.5 5.06h-5.8c-2.481 0-3.847-2.819-2.5-5.06l2.744-4.503z" clip-rule="evenodd"></path></svg>
          <span class="text-red-500 uppercase font-bold">Alert:</span> Sensor Array Offline
        </div>
      </div>

      <!-- Progress Card 4: Harvesting Forecast -->
      <div class="bg-zinc-900 border border-orange-700/50 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 ease-in-out dark:bg-gray-950 dark:border-red-800/60">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-orange-400 to-red-600 rounded-full opacity-20 blur-xl dark:from-yellow-300 dark:to-orange-500"></div>
        <div class="flex items-center justify-between mb-5">
          <h3 class="text-2xl font-bold text-orange-300 dark:text-yellow-400">Yield Prediction</h3>
          <svg class="h-8 w-8 text-orange-500 group-hover:rotate-12 transition-transform duration-300 dark:text-red-600" 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 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
        </div>
        <p class="text-sm text-zinc-500 mb-4 dark:text-gray-400">Forecasting harvest dates and estimated output based on current growth data.</p>
        <div class="w-full bg-zinc-800 rounded-full h-3 mb-2 dark:bg-gray-800">
          <div class="bg-gradient-to-r from-orange-500 to-red-700 h-3 rounded-full" style="width: 75%;"></div>
        </div>
        <div class="text-right text-sm text-orange-400 dark:text-yellow-300">75% Confidence</div>
        <div class="mt-5 flex items-center text-sm text-zinc-500 dark:text-gray-400">
          <img src="https://picsum.photos/id/1015/30/30" alt="Farm Worker Avatar" class="rounded-full w-6 h-6 mr-2 border border-orange-500 dark:border-yellow-400">
          Analyst: Unit Alpha-7
        </div>
      </div>

      <!-- Progress Card 5: Supply Chain Logistics -->
      <div class="bg-zinc-900 border border-orange-700/50 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 ease-in-out dark:bg-gray-950 dark:border-red-800/60">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-yellow-500 to-orange-700 rounded-full opacity-20 blur-xl dark:from-red-600 dark:to-orange-800"></div>
        <div class="flex items-center justify-between mb-5">
          <h3 class="text-2xl font-bold text-orange-300 dark:text-yellow-400">Logistics Network</h3>
          <svg class="h-8 w-8 text-yellow-500 group-hover:translate-x-1 transition-transform duration-300 dark:text-orange-600" 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 17v-5m3 5v-1.11a3 3 0 011.66-2.793L16.2 8.3c.75-.414 1.25-.133 1.25.75V17m-9 4h6a2 2 0 002-2v-3a2 2 0 00-2-2H9a2 2 0 00-2 2v3a2 2 0 002 2z"></path></svg>
        </div>
        <p class="text-sm text-zinc-500 mb-4 dark:text-gray-400">Coordination of automated transport units and storage facilities. Route optimization initiated.</p>
        <div class="w-full bg-zinc-800 rounded-full h-3 mb-2 dark:bg-gray-800">
          <div class="bg-gradient-to-r from-yellow-500 to-orange-700 h-3 rounded-full" style="width: 90%;"></div>
        </div>
        <div class="text-right text-sm text-orange-400 dark:text-yellow-300">90% Routes Optimized</div>
        <div class="mt-5 flex items-center text-sm text-zinc-500 dark:text-gray-400">
          <svg class="w-4 h-4 mr-2 text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm-7-8a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
          Status: Auto-Dispatch Active
        </div>
      </div>

      <!-- Progress Card 6: Environmental Impact -->
      <div class="bg-zinc-900 border border-orange-700/50 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 ease-in-out dark:bg-gray-950 dark:border-red-800/60">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-red-600 to-yellow-500 rounded-full opacity-20 blur-xl dark:from-orange-700 dark:to-red-800"></div>
        <div class="flex items-center justify-between mb-5">
          <h3 class="text-2xl font-bold text-orange-300 dark:text-yellow-400">Eco-Footprint Analysis</h3>
          <svg class="h-8 w-8 text-red-500 group-hover:animate-pulse dark:text-orange-600" 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="M7 11V7a2 2 0 012-2h4a2 2 0 012 2v4m-.586 1.707a2 2 0 002.828 0L20 10.414V17a2 2 0 01-2 2H6a2 2 0 01-2-2V7.414L6.586 5.828a2 2 0 000-2.828z"></path></svg>
        </div>
        <p class="text-sm text-zinc-500 mb-4 dark:text-gray-400">Analyzing resource consumption and waste generation for sustainability metrics. Goal: Carbon Negative.</p>
        <div class="w-full bg-zinc-800 rounded-full h-3 mb-2 dark:bg-gray-800">
          <div class="bg-gradient-to-r from-red-500 to-orange-700 h-3 rounded-full" style="width: 95%;"></div>
        </div>
        <div class="text-right text-sm text-orange-400 dark:text-yellow-300">95% Reviewed</div>
        <div class="mt-5 flex items-center text-sm text-zinc-500 dark:text-gray-400">
          <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="Environmentalist Avatar" class="rounded-full w-6 h-6 mr-2 border border-red-500 dark:border-orange-500">
          Validated by: Dr. Neo Verde
        </div>
      </div>

    </div>

    <div class="text-center mt-12 sm:mt-16">
      <button class="px-8 py-3 rounded-full text-lg font-bold uppercase tracking-wider
        bg-gradient-to-r from-orange-600 to-red-800 text-white shadow-lg 
        hover:from-orange-700 hover:to-red-900 focus:outline-none focus:ring-4 
        focus:ring-orange-500 focus:ring-opacity-75 transition-all duration-300 
        transform hover:scale-105 active:scale-95
        dark:from-yellow-500 dark:to-orange-700 dark:hover:from-yellow-600 dark:hover:to-orange-800
        dark:focus:ring-yellow-400 dark:shadow-red-800/40">
        Initiate System Recalibration
      </button>
    </div>

  </div>
</div>