AI Feature Card with Code Snippet and Hover Effects

<article class="relative overflow-hidden min-h-[15rem] md:min-h-[16rem] scroll-fade scroll-fade-delay-2 hover:bg-white/[0.08] hover:ring-white/20 transition-all group bg-white/5 ring-white/10 ring-1 rounded-2xl">
        <div class="flex pt-6 pr-6 pb-6 pl-6 items-center justify-between">
          <h4 class="text-base font-semibold tracking-tight" style="">Custom AI Agent Development</h4>
          <span class="inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-[11px] border-white/10 bg-white/5 text-slate-300" style="">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="cpu" class="lucide lucide-cpu h-3.5 w-3.5 text-cyan-300"><path d="M12 20v2" class=""></path><path d="M12 2v2" class=""></path><path d="M17 20v2" class=""></path><path d="M17 2v2" class=""></path><path d="M2 12h2" class=""></path><path d="M2 17h2" class=""></path><path d="M2 7h2" class=""></path><path d="M20 12h2" class=""></path><path d="M20 17h2" class=""></path><path d="M20 7h2" class=""></path><path d="M7 20v2" class=""></path><path d="M7 2v2" class=""></path><rect x="4" y="4" width="16" height="16" rx="2" class=""></rect><rect x="8" y="8" width="8" height="8" rx="1" class=""></rect></svg>
            AI-Powered
          </span>
        </div>

        <div class="pr-6 pb-6 pl-6">
          <div class="relative mt-6 mb-4">
            <div class="hover:bg-black/50 transition-all bg-black/60 border-white/10 border rounded-xl pt-3 pr-3 pb-3 pl-3 backdrop-blur">
              <div class="flex gap-1 mb-2 items-center">
                <span class="h-2.5 w-2.5 rounded-full bg-rose-400/80"></span>
                <span class="h-2.5 w-2.5 rounded-full bg-amber-400/80"></span>
                <span class="h-2.5 w-2.5 rounded-full bg-emerald-400/80"></span>
              </div>
              <div class="overflow-x-auto">
                <pre class="text-[10px] sm:text-[11px] md:text-[12px] leading-tight sm:leading-5 min-w-max text-slate-300"><code class="" style=""># AI Business Automation Agent
class BusinessAgent:
  def __init__(self, business_context):
    self.context = business_context
    self.learning_mode = "adaptive"
    self.optimization_level = "enterprise"

  def analyze_workflow(self, process_data):
    insights = self.ai_analysis(process_data)
    return self.generate_optimizations(insights)

  def execute_automation(self, workflow):
    return self.smart_execution(workflow)

</code></pre>
              </div>
            </div>
          </div>
        </div>
      </article>