Neon_Glow_Farming_Cards

<div class="bg-gradient-to-br from-orange-50 to-red-50 text-gray-900 dark:from-gray-900 dark:to-orange-950 dark:text-gray-100 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl lg:text-5xl font-extrabold text-center mb-12 relative">
      <span class="bg-clip-text text-transparent bg-gradient-to-r from-orange-600 to-red-700 dark:from-orange-400 dark:to-red-500">
        Sustainable Farming Innovations
      </span>
      <span class="absolute inset-x-0 bottom-0 h-1 bg-gradient-to-r from-orange-400 to-red-400 dark:from-orange-600 dark:to-red-700 blur-sm opacity-75"></span>
      <span class="absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-orange-400 to-red-400 dark:from-orange-600 dark:to-red-700"></span>
    </h2>

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

      <!-- Card 1: Smart Irrigation -->
      <div class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02] border border-transparent hover:border-orange-400 dark:hover:border-orange-700">
        <div class="absolute -inset-0.5 rounded-lg opacity-75 bg-gradient-to-br from-orange-400 to-red-500 dark:from-orange-600 dark:to-red-700 blur group-hover:opacity-100 transition duration-1000 group-hover:duration-200 animate-pulse-slow"></div>
        <div class="relative p-6 flex flex-col h-full bg-white dark:bg-gray-800 rounded-lg">
          <img class="w-full h-48 object-cover rounded-md mb-4 brightness-95 group-hover:brightness-105 transition duration-300" src="https://picsum.photos/id/105/400/250" alt="Smart Irrigation Systems">
          <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-orange-600 to-red-700 dark:from-orange-400 dark:to-red-500 mb-2 leading-tight">Smart Irrigation</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 flex-grow">Optimize water usage with AI-powered irrigation systems, reducing waste and boosting crop yields. Real-time data ensures precise hydration.</p>
          <div class="flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400 mb-4">
            <svg class="w-5 h-5 text-orange-500 dark:text-orange-400" 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.75 17L9.25 15C9.037 14.512 8.718 14.07 8.307 13.729L7.5 13.064M14.25 17L14.75 15C14.963 14.512 15.282 14.07 15.693 13.729L16.5 13.064M12 17V21M12 7V3M5.5 10A2.5 2.5 0 018 7.5L8.5 7A2.5 2.5 0 0111 4.5V4C11 3.44772 11.4477 3 12 3C12.5523 3 13 3.44772 13 4V4.5C13 5.32843 13.5 6 14.5 6C15.5 6 16 6.67157 16 7.5V10H17.5C18.9959 10 19.5 10.5 19.5 11.5V19.5C19.5 20.5 18.9959 21 17.5 21H6.5C5.00407 21 4.5 20.5 4.5 19.5V11.5C4.5 10.5 5.00407 10 6.5 10H8.5V7.5C8.5 6.67157 9 6 10 6C11 6 11.5 5.32843 11.5 4.5V4M12 17V21"></path></svg>
            <span>Water Efficiency</span>
          </div>
          <div class="flex justify-between items-center mt-auto pt-4 border-t border-gray-200 dark:border-gray-700">
            <div class="flex -space-x-2 overflow-hidden">
              <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Developer 1">
              <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/5.jpg" alt="Developer 2">
            </div>
            <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-full shadow-sm text-white bg-gradient-to-r from-orange-500 to-red-600 dark:from-orange-700 dark:to-red-800 hover:from-orange-600 hover:to-red-700 dark:hover:from-orange-600 dark:hover:to-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-900 glow-on-hover">
              Learn More
              <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Card 2: Crop Health Monitoring -->
      <div class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02] border border-transparent hover:border-orange-400 dark:hover:border-orange-700">
        <div class="absolute -inset-0.5 rounded-lg opacity-75 bg-gradient-to-br from-red-400 to-orange-500 dark:from-red-600 dark:to-orange-700 blur group-hover:opacity-100 transition duration-1000 group-hover:duration-200 animate-pulse-slow"></div>
        <div class="relative p-6 flex flex-col h-full bg-white dark:bg-gray-800 rounded-lg">
          <img class="w-full h-48 object-cover rounded-md mb-4 brightness-95 group-hover:brightness-105 transition duration-300" src="https://picsum.photos/id/345/400/250" alt="Crop Health Monitoring">
          <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-red-600 to-orange-700 dark:from-red-400 dark:to-orange-500 mb-2 leading-tight">Crop Health</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 flex-grow">Utilize drone imagery and multispectral analysis to detect diseases early and monitor plant vitality, ensuring optimal growth.</p>
          <div class="flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400 mb-4">
            <svg class="w-5 h-5 text-red-500 dark:text-red-400" 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 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.003 12.003 0 002.944 12c.002.096.004.192.006.288l.805 4.398a12.015 12.015 0 0017.382 0l.805-4.398c.002-.096.004-.192.006-.288a12.003 12.003 0 00-2.356-8.776z"></path></svg>
            <span>Disease Detection</span>
          </div>
          <div class="flex justify-between items-center mt-auto pt-4 border-t border-gray-200 dark:border-gray-700">
            <div class="flex -space-x-2 overflow-hidden">
              <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/4.jpg" alt="Developer 3">
              <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Developer 4">
            </div>
            <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-full shadow-sm text-white bg-gradient-to-r from-red-500 to-orange-600 dark:from-red-700 dark:to-orange-800 hover:from-red-600 hover:to-orange-700 dark:hover:from-red-600 dark:hover:to-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-900 glow-on-hover">
              Explore Tools
              <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Card 3: Vertical Farming -->
      <div class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02] border border-transparent hover:border-orange-400 dark:hover:border-orange-700">
        <div class="absolute -inset-0.5 rounded-lg opacity-75 bg-gradient-to-br from-orange-400 to-red-500 dark:from-orange-600 dark:to-red-700 blur group-hover:opacity-100 transition duration-1000 group-hover:duration-200 animate-pulse-slow"></div>
        <div class="relative p-6 flex flex-col h-full bg-white dark:bg-gray-800 rounded-lg">
          <img class="w-full h-48 object-cover rounded-md mb-4 brightness-95 group-hover:brightness-105 transition duration-300" src="https://picsum.photos/id/1080/400/250" alt="Vertical Farming Grow Towers">
          <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-orange-600 to-red-700 dark:from-orange-400 dark:to-red-500 mb-2 leading-tight">Vertical Farming</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 flex-grow">Revolutionize food production with indoor vertical farms, saving space and localizing fresh produce year-round.</p>
          <div class="flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400 mb-4">
            <svg class="w-5 h-5 text-orange-500 dark:text-orange-400" 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="M5.121 17.804A13.935 13.935 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span>Urban Agriculture</span>
          </div>
          <div class="flex justify-between items-center mt-auto pt-4 border-t border-gray-200 dark:border-gray-700">
            <div class="flex -space-x-2 overflow-hidden">
              <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Developer 5">
              <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/7.jpg" alt="Developer 6">
            </div>
            <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-full shadow-sm text-white bg-gradient-to-r from-orange-500 to-red-600 dark:from-orange-700 dark:to-red-800 hover:from-orange-600 hover:to-red-700 dark:hover:from-orange-600 dark:hover:to-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-900 glow-on-hover">
              Discover More
              <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            </a>
          </div>
        </div>
      </div>

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

<!-- Custom Styles for glow-on-hover and pulse-slow animation -->
<style>
  .glow-on-hover {
    position: relative;
    z-index: 1;
  }

  .glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff8a00, #e25e00, #ff0000, #f72c00, #ff8a00, #e25e00, #ff0000, #f72c00);
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(8px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 9999px;
  }

  .dark .glow-on-hover:before {
    background: linear-gradient(45deg, #ffb74d, #e64a19, #d32f2f, #bf360c, #ffb74d, #e64a19, #d32f2f, #bf360c);
  }

  .glow-on-hover:hover:before {
    opacity: 1;
    animation: glowing 1s linear infinite;
  }

  @keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
  }

  @keyframes pulse-slow {
    0%, 100% { opacity: 0.75; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.02); }
  }

  .animate-pulse-slow {
    animation: pulse-slow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
</style>