Features Overview Card

<div class="w-full bg-gray-900/50 border border-white/20 rounded-xl backdrop-blur-sm">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&display=swap'); .font-geist { font-family: 'Geist', sans-serif !important; } .font-bricolage { font-family: 'Bricolage Grotesque', sans-serif !important; }
  </style>
  <div class="divide-y divide-white/10">
    <h2 class="text-3xl text-neutral-100 tracking-tight font-bricolage text-center mb-12 pt-6 pr-6 pl-6">Key Features</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 relative pr-6 pb-6 pl-6">
      <article class="flex flex-col hover:shadow-lg transition-shadow duration-300 rounded-lg pt-6 pr-6 pb-6 pl-6 shadow-md">
        <div class="flex items-center space-x-4 mb-4">
          <span class="inline-flex h-14 w-14 items-center justify-center rounded-lg bg-indigo-900 text-white">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-7 h-7">
              <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path>
              <path d="m9 12 2 2 4-4"></path>
            </svg>
          </span>
          <h3 class="text-xl font-geist tracking-tight text-neutral-100 font-semibold">Automated Compliance</h3>
        </div>
        <p class="text-sm text-neutral-400 font-geist tracking-tight mb-6 flex-1">
          Ensure continuous compliance with automated audits and actionable reporting across your entire software supply chain. Includes compliance dashboards, audit trail, and regulatory templates for seamless governance.
        </p>
        <dl class="flex flex-col space-y-3">
          <div class="flex items-center space-x-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 text-indigo-400 flex-shrink-0">
              <circle cx="12" cy="12" r="10"></circle>
              <path d="m9 12 2 2 4-4"></path>
            </svg>
            <dt class="text-indigo-300 text-sm font-geist tracking-tight">24/7 Monitoring</dt>
          </div>
          <div class="flex items-center space-x-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 text-indigo-400 flex-shrink-0">
              <path d="M12 20V10"></path>
              <path d="M18 20v-4"></path>
              <path d="M6 20V4"></path>
            </svg>
            <dt class="text-indigo-300 text-sm font-geist tracking-tight">Compliance Dashboards</dt>
          </div>
        </dl>
      </article>
      <div class="hidden md:block absolute top-0 bottom-0 w-px bg-white/20 left-1/3"></div>
      <div class="hidden md:block absolute top-0 bottom-0 w-px bg-white/20 left-2/3"></div>
      <article class="flex flex-col hover:shadow-lg transition-shadow duration-300 rounded-lg pt-6 pr-6 pb-6 pl-6 shadow-md">
        <div class="flex items-center space-x-4 mb-4">
          <span class="inline-flex h-14 w-14 items-center justify-center rounded-lg bg-teal-900 text-white">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-7 h-7">
              <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"></path>
            </svg>
          </span>
          <h3 class="text-xl font-geist tracking-tight text-neutral-100 font-semibold">Real-Time Threat Detection</h3>
        </div>
        <p class="text-sm text-neutral-400 font-geist tracking-tight mb-6 flex-1">
          Detect vulnerabilities and threats instantly with intelligent monitoring and alerts integrated directly into your pipelines. Supports custom alert rules and automated incident response workflows to keep your systems safe.
        </p>
        <dl class="flex flex-col space-y-3">
          <div class="flex items-center space-x-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 text-teal-400 flex-shrink-0">
              <path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"></path>
              <line x1="12" x2="12" y1="8" y2="12"></line>
              <line x1="12" x2="12.01" y1="16" y2="16"></line>
            </svg>
            <dt class="text-teal-300 text-sm font-geist tracking-tight">Instant Alerts</dt>
          </div>
          <div class="flex items-center space-x-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 text-teal-400 flex-shrink-0">
              <rect width="14" height="8" x="5" y="2" rx="2"></rect>
              <rect width="20" height="8" x="2" y="14" rx="2"></rect>
              <path d="M6 18h2"></path>
              <path d="M12 18h6"></path>
            </svg>
            <dt class="text-teal-300 text-sm font-geist tracking-tight">Intelligent Pipeline Integration</dt>
          </div>
        </dl>
      </article>
      <article class="flex flex-col hover:shadow-lg transition-shadow duration-300 rounded-lg pt-6 pr-6 pb-6 pl-6 shadow-md">
        <div class="flex items-center space-x-4 mb-4">
          <span class="inline-flex h-14 w-14 items-center justify-center rounded-lg bg-blue-900 text-white">
            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-7 h-7">
              <circle cx="18" cy="5" r="3"></circle>
              <circle cx="6" cy="12" r="3"></circle>
              <circle cx="18" cy="19" r="3"></circle>
              <line x1="8.59" x2="15.42" y1="13.51" y2="17.49"></line>
              <line x1="15.41" x2="8.59" y1="6.51" y2="10.49"></line>
            </svg>
          </span>
          <h3 class="text-xl font-geist tracking-tight text-neutral-100 font-semibold">Unified Pipeline Management</h3>
        </div>
        <p class="text-sm text-neutral-400 font-geist tracking-tight mb-6 flex-1">
          Streamline and secure CI/CD workflows with unified visibility and control across multiple platforms and tools. Features role-based access, audit logs, and pipeline analytics for optimized development lifecycle management.
        </p>
        <dl class="flex flex-col space-y-3">
          <div class="flex items-center space-x-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 text-blue-400 flex-shrink-0">
              <path d="M4 10c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2"></path>
              <path d="M10 16c-1.1 0-2-.9-2-2v-4c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2"></path>
              <rect width="8" height="8" x="14" y="14" rx="2"></rect>
            </svg>
            <dt class="text-blue-300 text-sm font-geist tracking-tight">Multi-Platform Support</dt>
          </div>
          <div class="flex items-center space-x-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 text-blue-400 flex-shrink-0">
              <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
              <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
            </svg>
            <dt class="text-blue-300 text-sm font-geist tracking-tight">Role-Based Access Control</dt>
          </div>
        </dl>
      </article>
    </div>
  </div>
</div>