One-Click Deploy Feature Card

<div class="group relative overflow-hidden transition-all duration-300 hover:shadow-2xl hover:shadow-purple-500/10 bg-gradient-to-br from-purple-900/20 via-slate-900 to-slate-800 border border-purple-500/20 rounded-3xl shadow-lg backdrop-blur max-w-xl">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
    .font-space-grotesk { font-family: 'Space Grotesk', 'Helvetica Neue', sans-serif !important; }
    .font-inter { font-family: 'Inter', 'Helvetica Neue', sans-serif !important; }
  </style>
  <div class="sm:p-8 px-6 py-6">
    <div class="relative h-56 sm:h-64 rounded-2xl bg-gradient-to-br from-purple-950/40 via-slate-900 to-slate-800 ring-1 ring-inset ring-purple-500/20">
      <div class="absolute right-3 sm:right-6 top-4 sm:top-6 w-[78%] h-[68%] rounded-2xl bg-slate-900/95 backdrop-blur border border-purple-500/30 shadow-xl">
        <div class="flex items-center justify-between px-3 py-2 border-b border-purple-500/20 bg-purple-950/30">
          <div class="flex items-center gap-2">
            <span class="h-2.5 w-2.5 rounded-full bg-green-500/80"></span>
            <span class="h-2.5 w-2.5 rounded-full bg-yellow-500/80"></span>
            <span class="h-2.5 w-2.5 rounded-full bg-red-500/80"></span>
          </div>
          <span class="text-[10px] sm:text-xs text-purple-400 font-medium font-space-grotesk">Deploy Dashboard</span>
        </div>
        <div class="p-3 space-y-3">
          <div class="rounded-xl border border-purple-500/20 bg-purple-950/30 p-3">
            <div class="flex items-center justify-between">
              <div class="flex items-center gap-2">
                <div class="h-2 w-2 rounded-full bg-green-500 animate-pulse"></div>
                <span class="text-xs font-medium text-slate-200 font-space-grotesk">my-app.com</span>
              </div>
              <span class="px-2 py-0.5 text-[10px] bg-green-500/20 text-green-400 rounded-full font-space-grotesk">Live</span>
            </div>
            <div class="mt-2 text-[10px] text-slate-400 font-space-grotesk">Deployed 2 minutes ago</div>
            <div class="mt-2 flex items-center justify-between">
              <span class="text-[10px] text-purple-400 font-space-grotesk">Build time: 45s</span>
              <div class="flex items-center gap-1">
                <div class="h-1 w-8 rounded-full bg-slate-800">
                  <div class="h-1 w-full rounded-full bg-purple-500"></div>
                </div>
                <span class="text-[10px] text-purple-400 font-space-grotesk">100%</span>
              </div>
            </div>
          </div>
          <div class="rounded-xl border border-purple-500/10 bg-slate-950/80 p-2">
            <div class="text-[9px] font-mono space-y-0.5">
              <div class="text-slate-500 font-space-grotesk">✓ Installing dependencies...</div>
              <div class="text-slate-500 font-space-grotesk">✓ Building application...</div>
              <div class="text-green-400 font-space-grotesk">✓ Deployment successful!</div>
              <div class="flex items-center gap-1">
                <span class="text-purple-400 font-space-grotesk">→</span>
                <span class="w-1 h-2 bg-purple-400 animate-pulse"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="absolute left-6 sm:left-12 bottom-10 sm:bottom-12 w-[62%] h-[52%] rounded-2xl bg-slate-900/95 backdrop-blur border border-purple-500/20 shadow-lg">
        <div class="flex items-center justify-between px-3 py-2 border-b border-purple-500/20">
          <span class="text-[10px] sm:text-xs tracking-widest text-purple-400 font-space-grotesk">GIT INTEGRATION</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="text-purple-400">
            <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
            <path d="M9 18c-4.51 2-5-2-7-2"></path>
          </svg>
        </div>
        <div class="p-3 space-y-2">
          <div class="flex items-center justify-between">
            <span class="text-xs text-slate-300 font-space-grotesk">main branch</span>
            <div class="h-1.5 w-1.5 rounded-full bg-green-500"></div>
          </div>
          <div class="text-[10px] text-slate-400 font-space-grotesk">Auto-deploy enabled</div>
          <div class="mt-2 space-y-1">
            <div class="flex items-center gap-2 text-[10px]">
              <div class="h-1 w-1 rounded-full bg-purple-400"></div>
              <span class="text-slate-400 font-space-grotesk">feat: add user auth</span>
            </div>
            <div class="flex items-center gap-2 text-[10px]">
              <div class="h-1 w-1 rounded-full bg-slate-500"></div>
              <span class="text-slate-500 font-space-grotesk">fix: responsive design</span>
            </div>
          </div>
        </div>
      </div>
      <div class="absolute top-6 left-4 w-16 h-3 rounded bg-purple-500/30 animate-pulse"></div>
      <div class="absolute top-12 right-12 w-12 h-2 rounded bg-purple-400/40"></div>
      <div class="absolute bottom-4 left-2 w-10 h-2 rounded bg-purple-300/50"></div>
    </div>
    <div class="mt-6 sm:mt-8">
      <div class="flex items-center gap-3">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5 text-purple-400">
          <circle cx="12" cy="12" r="10"></circle>
          <path d="m9 12 2 2 4-4"></path>
        </svg>
        <h3 class="sm:text-2xl text-2xl font-bold tracking-tight font-space-grotesk">One-Click Deploy</h3>
      </div>
      <p class="text-sm text-slate-400 font-space-grotesk mt-3">
        Deploy your applications instantly with automated builds, Git integration, and real-time monitoring.
      </p>
      <div class="mt-4">
        <a href="#" class="inline-flex items-center gap-2 text-xs font-medium text-purple-400 hover:text-purple-300 font-space-grotesk">
          Start deploying
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
            <path d="M5 12h14"></path>
            <path d="m12 5 7 7-7 7"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
  <div class="absolute inset-0 bg-gradient-to-t from-purple-900/10 via-transparent to-transparent pointer-events-none rounded-3xl"></div>
</div>