One-Click Deploy Dashboard Feature Card

<article
  class="lg:col-span-2 group overflow-hidden md:p-8 transition-all duration-300 hover:shadow-2xl hover:shadow-blue-500/10 bg-gradient-to-br from-blue-900/20 via-slate-900/50 to-slate-800/50 rounded-2xl pt-6 pr-6 pb-6 pl-6 relative m-8 max-w-3xl mx-auto"
  style="backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px)">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

    .font-space-grotesk {
      font-family: 'Space Grotesk', 'Helvetica Neue', sans-serif !important;
    }
  </style>
  <div class="pointer-events-none absolute inset-0 rounded-2xl border border-blue-500/30"
    style="mask-image: linear-gradient(135deg, white, transparent 60%);"></div>
  <div class="pointer-events-none absolute inset-0 border-blue-500/10 border rounded-2xl"
    style="mask-image: linear-gradient(135deg, transparent 60%, white);"></div>

  <div
    class="relative h-56 sm:h-64 rounded-2xl bg-gradient-to-br from-blue-950/40 via-slate-900 to-slate-800 ring-1 ring-inset ring-blue-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-blue-500/30 shadow-xl">
      <div class="flex items-center justify-between px-3 py-2 border-b border-blue-500/20 bg-blue-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-blue-400 font-medium font-space-grotesk">Deploy Dashboard</span>
      </div>
      <div class="p-3 space-y-3">
        <div class="rounded-xl border border-blue-500/20 bg-blue-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-blue-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-blue-500"></div>
              </div>
              <span class="text-[10px] text-blue-400 font-space-grotesk">100%</span>
            </div>
          </div>
        </div>
        <div class="rounded-xl border border-blue-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-blue-400 font-space-grotesk">→</span>
              <span class="w-1 h-2 bg-blue-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-blue-500/20 shadow-lg">
      <div class="flex items-center justify-between px-3 py-2 border-b border-blue-500/20">
        <span class="text-[10px] sm:text-xs tracking-widest text-blue-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-blue-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"
            class="">
          </path>
          <path d="M9 18c-4.51 2-5-2-7-2" class=""></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-blue-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-blue-500/30 animate-pulse"></div>
    <div class="absolute top-12 right-12 w-12 h-2 rounded bg-blue-400/40"></div>
    <div class="absolute bottom-4 left-2 w-10 h-2 rounded bg-blue-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-blue-400">
        <circle cx="12" cy="12" r="10" class=""></circle>
        <path d="m9 12 2 2 4-4" class=""></path>
      </svg>
      <h3 class="text-2xl sm:text-3xl font-manrope font-semibold tracking-tight text-white relative">One-Click Deploy
      </h3>
    </div>
    <p class="mt-3 text-sm text-slate-400 font-sans relative">
      Deploy your applications instantly with automated builds, Git integration, and real-time monitoring. Ship faster
      with zero configuration.
    </p>
    <div class="mt-4">
      <a href="#"
        class="inline-flex items-center gap-2 text-xs font-medium text-blue-400 hover:text-blue-300 font-sans transition">
        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" class=""></path>
          <path d="m12 5 7 7-7 7" class=""></path>
        </svg>
      </a>
    </div>
  </div>

  <div
    class="absolute inset-0 bg-gradient-to-t from-blue-900/10 via-transparent to-transparent pointer-events-none rounded-2xl">
  </div>
</article>