Config-as-Code Feature Section with Code Example

<div class="max-w-7xl mr-auto ml-auto pr-6 pl-6 pt-6 my-24">
  <div class="flex flex-col gap-12 lg:flex-row lg:items-start gap-x-12 gap-y-12">
    <!-- Left Copy -->
    <div class="flex-1 lg:sticky lg:top-32">
      <h2 class="text-3xl tracking-tight text-white sm:text-4xl font-medium">
        Config as Code.
        <br>
        <span class="text-gradient-blue">
                  Version control your security.
                </span>
      </h2>
      <p class="mt-6 text-lg text-slate-400 leading-relaxed">
        Stop clicking through endless dashboards. Define your security
        policies in TypeScript, Python, or YAML. Review changes in PRs,
        rollback instantly, and keep your history clean.
      </p>

      <ul class="mt-10 space-y-4">
        <li class="flex items-center gap-3 text-base text-slate-300">
          <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"
            data-lucide="check-circle-2" class="lucide lucide-check-circle-2 h-5 w-5 text-blue-500">
            <circle cx="12" cy="12" r="10" class=""></circle>
            <path d="m9 12 2 2 4-4" class=""></path>
          </svg>
          <span class="">Type-safe policy definitions</span>
        </li>
        <li class="flex items-center gap-3 text-base text-slate-300">
          <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"
            data-lucide="check-circle-2" class="lucide lucide-check-circle-2 h-5 w-5 text-blue-500">
            <circle cx="12" cy="12" r="10" class=""></circle>
            <path d="m9 12 2 2 4-4" class=""></path>
          </svg>
          <span class="">Integrates with Terraform &amp; Pulumi</span>
        </li>
        <li class="flex items-center gap-3 text-base text-slate-300">
          <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"
            data-lucide="check-circle-2" class="lucide lucide-check-circle-2 h-5 w-5 text-blue-500">
            <circle cx="12" cy="12" r="10" class=""></circle>
            <path d="m9 12 2 2 4-4" class=""></path>
          </svg>
          <span>CI/CD pipeline blocking</span>
        </li>
      </ul>
    </div>

    <!-- Right Code Block -->
    <div class="flex-1 overflow-hidden rounded-xl border border-white/10 bg-[#0B0C10] shadow-2xl">
      <!-- Window Chrome -->
      <div class="flex items-center gap-2 border-b border-white/5 bg-white/5 px-4 py-3">
        <div class="h-3 w-3 rounded-full bg-red-500/80"></div>
        <div class="h-3 w-3 rounded-full bg-yellow-500/80"></div>
        <div class="h-3 w-3 rounded-full bg-green-500/80"></div>
        <div class="ml-2 text-[10px] font-medium text-slate-500 font-mono">
          policy.ts
        </div>
      </div>

      <!-- Code -->
      <div class="p-6 font-mono text-xs sm:text-sm leading-relaxed overflow-x-auto">
        <div class="text-slate-400">
          <span class="text-purple-400">import</span>
          { Policy, Rules }
          <span class="text-purple-400">from</span>
          <span class="text-green-400">'@neonshield/sdk'</span>
          ;
        </div>

        <div class="text-slate-400">
          <span class="text-purple-400">const</span>
          prodProtection =
          <span class="text-blue-400">new</span>
          Policy({
        </div>
        <div class="pl-4 text-slate-400">
          name:
          <span class="text-green-400">'production-lockdown'</span>
          ,
        </div>
        <div class="pl-4 text-slate-400">
          target:
          <span class="text-green-400">'aws:us-east-1'</span>
          ,
        </div>
        <div class="pl-4 text-slate-400">rules: [</div>
        <div class="pl-8 text-slate-400">
          Rules.
          <span class="text-yellow-300">NoPublicBuckets</span>
          (),
        </div>
        <div class="pl-8 text-slate-400">
          Rules.
          <span class="text-yellow-300">EnforceMFA</span>
          ({ strict:
          <span class="text-blue-400">true</span>
          }),
        </div>
        <div class="pl-8 text-slate-400">
          Rules.
          <span class="text-yellow-300">LimitOpenPorts</span>
          ([
          <span class="text-blue-400">80</span>
          ,
          <span class="text-blue-400">443</span>
          ])
        </div>
        <div class="pl-4 text-slate-400">],</div>
        <div class="pl-4 text-slate-400">
          onViolation:
          <span class="text-green-400">'block-and-alert'</span>
        </div>
        <div class="text-slate-400">});</div>

        <div class="text-slate-500">
          // Deploy policy to active shield
        </div>
        <div class="text-slate-400">
          <span class="text-blue-400">await</span>
          prodProtection.
          <span class="text-yellow-300">deploy</span>
          ();
        </div>
      </div>
    </div>
  </div>
</div>