Enterprise Security Feature Card

<article class="lg:col-span-2 group relative overflow-hidden transition-all duration-300 hover:shadow-2xl bg-zinc-900/50 border-white/10 border rounded-2xl backdrop-blur-sm max-w-xl">
        <div class="sm:p-8 pt-6 pr-6 pb-6 pl-6">
          <!-- Illustration -->
          <div class="relative h-64 sm:h-80 rounded-xl bg-gradient-to-br from-zinc-900/90 to-zinc-950/90 ring-1 ring-inset ring-white/5 mb-6">
            <!-- Security Dashboard -->
            <div class="absolute inset-4 rounded-lg bg-zinc-950/90 backdrop-blur border border-white/10 overflow-hidden">
              <div class="flex items-center justify-between px-4 py-3 border-b border-white/10">
                <span class="text-sm text-zinc-300 font-medium">Security Overview</span>
                <span class="text-xs px-2 py-1 bg-emerald-500/20 text-emerald-400 rounded-full border border-emerald-500/30">All Clear</span>
              </div>
              
              <div class="p-4 grid grid-cols-2 gap-4 h-full">
                <!-- Vulnerability Scanner -->
                <div class="space-y-3">
                  <div class="text-xs text-zinc-400 mb-2">Vulnerability Scan</div>
                  <div class="space-y-2">
                    <div class="flex items-center justify-between">
                      <span class="text-xs text-zinc-300">Dependencies</span>
                      <span class="text-xs text-emerald-400">✓ Clean</span>
                    </div>
                    <div class="flex items-center justify-between">
                      <span class="text-xs text-zinc-300">Code Quality</span>
                      <span class="text-xs text-emerald-400">✓ A+</span>
                    </div>
                    <div class="flex items-center justify-between">
                      <span class="text-xs text-zinc-300">Secrets</span>
                      <span class="text-xs text-emerald-400">✓ Secure</span>
                    </div>
                  </div>
                </div>

                <!-- Access Control -->
                <div class="space-y-3">
                  <div class="text-xs text-zinc-400 mb-2">Access Control</div>
                  <div class="space-y-2">
                    <div class="flex items-center gap-2">
                      <div class="h-6 w-6 bg-blue-500/20 rounded border border-blue-500/40 flex items-center justify-center">
                        <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" class="h-3 w-3 text-blue-400">
                          <rect width="18" height="11" x="3" y="11" rx="2" ry="2" class=""></rect>
                          <circle cx="12" cy="16" r="1" class=""></circle>
                          <path d="M7 11V7a5 5 0 0 1 10 0v4" class=""></path>
                        </svg>
                      </div>
                      <span class="text-xs text-zinc-300">2FA Enabled</span>
                    </div>
                    <div class="flex items-center gap-2">
                      <div class="h-6 w-6 bg-emerald-500/20 rounded border border-emerald-500/40 flex items-center justify-center">
                        <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" class="h-3 w-3 text-emerald-400">
                          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" class=""></path>
                        </svg>
                      </div>
                      <span class="text-xs text-zinc-300">SSO Active</span>
                    </div>
                  </div>
                </div>

                <!-- Audit Log -->
                <div class="col-span-2 mt-2">
                  <div class="text-xs text-zinc-400 mb-2">Recent Activity</div>
                  <div class="space-y-1 text-xs">
                    <div class="flex items-center justify-between p-2 bg-white/5 rounded border border-white/5">
                      <span class="text-zinc-300">Admin access granted</span>
                      <span class="text-zinc-500">2m ago</span>
                    </div>
                    <div class="flex items-center justify-between p-2 bg-white/5 rounded border border-white/5">
                      <span class="text-zinc-300">Permissions updated</span>
                      <span class="text-zinc-500">5m ago</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Content -->
          <div class="">
            <div class="flex items-center gap-3 mb-4">
              
              <h3 class="sm:text-3xl text-2xl font-normal text-white tracking-tight font-geist">Enterprise Security</h3>
            </div>
            <p class="text-zinc-300 text-base leading-relaxed font-sans">SOC2 compliant with advanced security controls, automated vulnerability scanning, and comprehensive audit trails to keep your data safe.</p>
            <div class="mt-6">
              <a href="#" class="inline-flex items-center gap-2 text-sm font-medium text-white hover:text-zinc-300 transition-colors">
                Security details
                <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" 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>
      </article>