Glassmorphic Project Card with Code & Metrics

<div class="card-top glass-effect w-[32rem] h-fit overflow-hidden relative transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] bg-gradient-to-r from-white/15 to-white/5 rounded-[1.2em]" style="backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);">
  <div class="absolute inset-0 border-white/20 border rounded-[1.2em]" style="mask-image: linear-gradient(135deg, white, transparent 60%)"></div>
  <div class="absolute inset-0 border-white/10 border rounded-[1.2em]" style="mask-image: linear-gradient(135deg, transparent 60%, white)"></div>
  <div class="pointer-events-none absolute -inset-px rounded-[1.3rem]" style="display: none;"></div>
  
  <div class="flex flex-col h-full pt-6 pr-6 pb-7 pl-6">
    <div class="flex mb-2 items-start justify-between">
      <div class="w-3/4">
        <h1 class="text-[26px] leading-tight font-medium tracking-tight" style="">Multi-Agent System</h1>
        <p class="text-neutral-300 text-sm font-light mt-1 font-sans">Orchestrator • Multi-Agent AI</p>
      </div>
    </div>

    <div class="relative w-full mr-auto mb-4 ml-auto">
      <div class="absolute inset-0 translate-y-2 scale-[0.98] rounded-lg bg-neutral-900/50 ring-1 ring-white/5 blur-[0.3px]"></div>
      <div class="relative ring-1 ring-white/10 overflow-hidden rounded-lg">
        <div class="flex items-center justify-between px-3 py-2 border-b border-white/5 bg-neutral-950/50">
          <div class="flex items-center gap-2">
            <span class="h-2 w-2 rounded-full bg-neutral-500/60"></span>
            <span class="h-2 w-2 rounded-full bg-neutral-400/60"></span>
            <span class="h-2 w-2 rounded-full bg-neutral-300/60"></span>
          </div>
          <div class="flex items-center gap-2 rounded-full border border-white/10 bg-neutral-900/60 px-2 py-1 text-xs text-neutral-300">
            <svg class="w-3 h-3 text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" class=""></path>
            </svg>
            <span class="text-neutral-400/80 font-sans">multi-agent…</span>
          </div>
        </div>
        <div class="relative h-32">
          <div class="absolute inset-0 grid grid-cols-[30px_1fr]">
            <div class="select-none text-[11px] leading-4 text-neutral-400/50 bg-neutral-950/30 border-white/5 border-r pt-2 pr-2 pb-2 pl-2">
              <div class="font-sans">1</div><div class="font-sans">2</div><div class="font-sans">3</div><div class="font-sans">4</div><div class="font-sans">5</div><div class="font-sans">6</div><div class="font-sans">7</div><div class="font-sans">8</div>
            </div>
            <pre class="overflow-hidden text-[11px] leading-4 text-neutral-300 mt-0 mr-0 mb-0 ml-0 pt-2 pr-3 pb-2 pl-3"><span class="text-blue-300 font-sans">class</span> <span class="text-white font-sans">MultiAgentOrchestrator</span>:
  <span class="text-blue-300 font-sans">def</span> <span class="text-yellow-300 font-sans">__init__</span>(<span class="text-emerald-300 font-sans">self</span>, agents, coordinator):
    <span class="text-emerald-300 font-sans">self</span>.agents = agents
    <span class="text-emerald-300 font-sans">self</span>.coordinator = coordinator
  
  <span class="text-blue-300 font-sans">def</span> <span class="text-yellow-300 font-sans">execute_task</span>(<span class="text-emerald-300 font-sans">self</span>, task):
    results = []
    <span class="text-blue-300 font-sans">for</span> agent <span class="text-blue-300 font-sans">in</span> <span class="text-emerald-300 font-sans">self</span>.agents:</pre>
          </div>
          <div class="pointer-events-none absolute inset-x-0 bottom-0 h-8 bg-gradient-to-t from-neutral-600/10 to-transparent"></div>
        </div>
      </div>
    </div>

    <div class="flex justify-between mb-4 max-w-lg">
      <div class="text-center px-2 cursor-pointer transition-all duration-300 p-2 rounded-lg hover:bg-white/5 hover:-translate-y-0.5">
        <div class="text-2xl leading-tight bg-gradient-to-r from-white/95 to-neutral-200/80 bg-clip-text text-transparent font-sans font-medium" style="">
          5
        </div>
        <div class="text-xs opacity-70 uppercase tracking-wide font-sans">ACTIVE AGENTS</div>
      </div>
      <div class="w-px h-12 bg-gradient-to-b from-transparent via-white/20 to-transparent mt-auto mb-auto"></div>
      <div class="cursor-pointer transition-all duration-300 hover:bg-white/5 hover:-translate-y-0.5 text-center rounded-lg pt-2 pr-2 pb-2 pl-2">
        <div class="leading-tight bg-clip-text text-2xl font-medium text-transparent bg-gradient-to-r from-white/95 to-neutral-200/80" style="">
          94
          <span class="text-sm font-sans">%</span>
        </div>
        <div class="opacity-70 uppercase text-xs tracking-wide">COORDINATION RATE</div>
      </div>
      <div class="w-px h-12 bg-gradient-to-b from-transparent via-white/20 to-transparent mt-auto mb-auto"></div>
      <div class="text-center px-2 cursor-pointer transition-all duration-300 p-2 rounded-lg hover:bg-white/5 hover:-translate-y-0.5">
        <div class="text-2xl leading-tight bg-gradient-to-r from-white/95 to-neutral-200/80 bg-clip-text text-transparent font-sans font-medium" style="">1.2K</div>
        <div class="text-xs opacity-70 uppercase tracking-wide font-sans">TASKS COMPLETED</div>
      </div>
    </div>
    
    <div class="h-px w-full bg-gradient-to-r from-transparent via-white/20 to-transparent mb-3"></div>
    
    <div class="flex flex-wrap gap-2 mb-4">
      <span class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full bg-neutral-500/10 border border-neutral-500/20 text-neutral-300 cursor-pointer transition-all duration-300 hover:-translate-y-px hover:shadow-lg font-sans">
        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" class=""></path>
        </svg>
        ORCHESTRATOR
      </span>
      <span class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full bg-neutral-600/10 border border-neutral-600/20 text-neutral-300 cursor-pointer transition-all duration-300 hover:-translate-y-px hover:shadow-lg font-sans">
        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <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" class=""></path>
        </svg>
        ANALYTICS
      </span>
      <span class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full bg-neutral-700/10 border border-neutral-700/20 text-neutral-300 cursor-pointer transition-all duration-300 hover:-translate-y-px hover:shadow-lg font-sans">
        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" class=""></path>
        </svg>
        COORDINATION
      </span>
    </div>
    
    <div class="relative overflow-hidden text-xs font-mono rounded mb-4 pt-1 pr-2 pb-1 pl-2" style="background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.08) 100%)">
      <div class="flex items-center justify-between">
        <span class="text-xs text-neutral-300">ENVIRONMENT: MULTI-AGENT</span>
      </div>
    </div>
    
    <div class="mt-auto flex justify-between w-full">
      <div class="flex flex-col">
        <span class="opacity-70 flex items-center gap-2 text-sm mb-1">
          <span class="text-xs">DISTRIBUTED</span>
        </span>
      </div>
      <div class="flex flex-col items-end">
        <span class="opacity-70 flex items-center gap-2 text-sm mb-1">
          <span class="text-xs">COLLABORATIVE</span>
          <div class="w-2 h-2 rounded-full bg-neutral-400" style="box-shadow: 0 0 6px rgba(163, 163, 163, 0.4)"></div>
        </span>
      </div>
    </div>
  </div>
</div>