Developer Feature Section with AI Editor Preview

<section class="border-y border-white/5 pt-24 pr-24 pb-24 pl-24" id="developers">
  <div class="border-gradient-mask group relative overflow-hidden rounded-[2.5rem] bg-zinc-900/20 backdrop-blur-md">
    <!-- Background Glow -->
    <div
      class="absolute -bottom-24 -left-24 w-96 h-96 bg-indigo-600/20 blur-[100px] rounded-full pointer-events-none group-hover:bg-indigo-600/30 transition-colors duration-700">
    </div>

    <div class="grid lg:grid-cols-2 z-10 gap-x-0 gap-y-0"
      style="position: relative; --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0))">
      <!-- Text Content -->
      <div class="md:p-16 flex flex-col z-10 pt-12 pr-12 pb-12 pl-12 justify-center">
        <div
          class="mb-6 h-12 w-12 flex items-center justify-center rounded-2xl bg-white/5 border border-white/10 shadow-inner">
          <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" data-lucide="wand-2"
            class="lucide lucide-wand-2 h-6 w-6 text-indigo-400">
            <path
              d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72"
              class=""></path>
            <path d="m14 7 3 3" class=""></path>
            <path d="M5 6v4" class=""></path>
            <path d="M19 14v4" class=""></path>
            <path d="M10 2v2" class=""></path>
            <path d="M7 8H3" class=""></path>
            <path d="M21 16h-4" class=""></path>
            <path d="M11 3H9" class=""></path>
          </svg>
        </div>

        <h2 class="text-3xl tracking-tight text-white sm:text-4xl font-medium">
          Config as Code.

          <span class="text-gradient-blue">
                  Version control your security.
                </span>
        </h2>

        <div class="space-y-6 text-lg text-zinc-400 font-normal leading-relaxed">
          <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>
      </div>

      <!-- Visual: AI Editor -->
      <div
        class="min-h-[500px] lg:border-t-0 lg:border-l font-geist bg-black/40 border-white/5 border-t relative overflow-hidden">
        <!-- Floating Prompt Input -->
        <div class="-translate-x-1/2 -translate-y-1/2 z-20 w-[85%] max-w-md absolute top-1/2 left-1/2">
          <div
            class="relative overflow-hidden rounded-2xl border border-white/10 bg-zinc-900/90 p-4 shadow-2xl backdrop-blur-xl transition-all duration-500 hover:scale-[1.02] hover:border-indigo-500/30">
            <!-- Prompt Header -->
            <div class="flex items-center justify-between mb-3 pb-3 border-b border-white/5">
              <div class="flex items-center gap-2">
                <div class="h-2 w-2 rounded-full bg-indigo-500 animate-pulse"></div>
                <span class="text-xs font-medium text-indigo-300">Sentrix Assistant</span>
              </div>
              <span class="text-[10px] text-zinc-600">v2.1 Model</span>
            </div>

            <!-- User Input Simulation -->
            <div class="flex gap-3 mb-4">
              <div
                class="h-6 w-6 rounded-full bg-zinc-800 flex items-center justify-center shrink-0 border border-white/5">
                <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"
                  data-lucide="user" class="lucide lucide-user h-3 w-3 text-zinc-400">
                  <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" class=""></path>
                  <circle cx="12" cy="7" r="4" class=""></circle>
                </svg>
              </div>
              <div class="text-sm text-zinc-300 font-normal leading-relaxed">
                Generate a security policy to enforce MFA and block public
                access for the production environment.
              </div>
            </div>

            <!-- AI Generating Loader -->
            <div class="flex gap-3">
              <div
                class="h-6 w-6 rounded-full bg-indigo-500/20 flex items-center justify-center shrink-0 border border-indigo-500/30">
                <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"
                  data-lucide="sparkles" class="lucide lucide-sparkles h-3 w-3 text-indigo-400">
                  <path
                    d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
                    class=""></path>
                  <path d="M20 2v4" class=""></path>
                  <path d="M22 4h-4" class=""></path>
                  <circle cx="4" cy="20" r="2" class=""></circle>
                </svg>
              </div>
              <div class="w-full space-y-2">
                <div class="h-2 w-3/4 bg-zinc-800 rounded animate-pulse"></div>
                <div class="h-2 w-1/2 bg-zinc-800 rounded animate-pulse delay-75"></div>

                <!-- The Generated Component Preview (Code Block) -->
                <div
                  class="mt-4 rounded-lg border border-zinc-700/50 bg-[#0B0C10] p-4 font-mono text-[10px] md:text-xs leading-relaxed overflow-hidden relative group">
                  <!-- Language Badge -->
                  <div
                    class="absolute top-2 right-2 text-[8px] text-zinc-500 border border-zinc-800 px-1.5 rounded bg-zinc-900/50">
                    TS
                  </div>

                  <div class="text-zinc-400">
                    <span class="text-purple-400">export</span>
                    <span class="text-blue-400">const</span>
                    <span class="text-yellow-200">securityConfig</span>
                    = {
                  </div>
                  <div class="pl-4 text-zinc-400">
                    environment:
                    <span class="text-green-400">'production'</span>
                    ,
                  </div>
                  <div class="pl-4 text-zinc-400">compliance: {</div>
                  <div class="pl-8 text-zinc-400">
                    enforceMfa:
                    <span class="text-blue-400">true</span>
                    ,
                  </div>
                  <div class="pl-8 text-zinc-400">
                    blockPublicAccess:
                    <span class="text-blue-400">true</span>
                    ,
                  </div>
                  <div class="pl-4 text-zinc-400">},</div>
                  <div class="text-zinc-400">};</div>

                  <!-- Decorative glowing cursor or selection -->
                  <div class="absolute bottom-4 left-10 w-1.5 h-3 bg-indigo-500/50 animate-pulse"></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Background Abstract Code -->
        <style>
          @keyframes scrollUp {
            0% {
              transform: translateY(0);
            }

            100% {
              transform: translateY(-50%);
            }
          }
        </style>
        <div class="absolute inset-0 p-8 opacity-20 pointer-events-none select-none overflow-hidden">
          <div class="absolute inset-0 w-full h-full"
            style="mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);">
            <div class="w-full" style="animation: scrollUp 30s linear infinite;">
              <!-- Original Block -->
              <div class="text-xs text-zinc-600 space-y-1 pb-16">
                <p>
                  <span class="text-purple-400">export default</span>
                  <span class="text-blue-400">function</span>
                  <span class="text-yellow-200">RevenueCard</span>
                  () {
                </p>
                <p class="pl-4">
                  <span class="text-purple-400">return</span>
                  (
                </p>
                <p class="pl-8">
                  &lt;
                  <span class="text-red-400">Card</span>
                  className=
                  <span class="text-green-400">
                          "bg-zinc-950 p-6 border..."
                        </span>
                  &gt;
                </p>
                <p class="pl-12">
                  &lt;
                  <span class="text-red-400">div</span>
                  className=
                  <span class="text-green-400">
                          "flex justify-between"
                        </span>
                  &gt;
                </p>
                <p class="pl-16">
                  &lt;
                  <span class="text-red-400">h3</span>
                  &gt;Revenue&lt;/
                  <span class="text-red-400">h3</span>
                  &gt;
                </p>
                <p class="pl-12">
                  &lt;/
                  <span class="text-red-400">div</span>
                  &gt;
                </p>
                <p class="pl-8">
                  &lt;/
                  <span class="text-red-400">Card</span>
                  &gt;
                </p>
                <p class="pl-4">);</p>
                <p>}</p>
              </div>
              <!-- Duplicate for seamless loop -->
              <div class="text-xs text-zinc-600 space-y-1 pb-16">
                <p>
                  <span class="text-purple-400">export default</span>
                  <span class="text-blue-400">function</span>
                  <span class="text-yellow-200">RevenueCard</span>
                  () {
                </p>
                <p class="pl-4">
                  <span class="text-purple-400">return</span>
                  (
                </p>
                <p class="pl-8">
                  &lt;
                  <span class="text-red-400">Card</span>
                  className=
                  <span class="text-green-400">
                          "bg-zinc-950 p-6 border..."
                        </span>
                  &gt;
                </p>
                <p class="pl-12">
                  &lt;
                  <span class="text-red-400">div</span>
                  className=
                  <span class="text-green-400">
                          "flex justify-between"
                        </span>
                  &gt;
                </p>
                <p class="pl-16">
                  &lt;
                  <span class="text-red-400">h3</span>
                  &gt;Revenue&lt;/
                  <span class="text-red-400">h3</span>
                  &gt;
                </p>
                <p class="pl-12">
                  &lt;/
                  <span class="text-red-400">div</span>
                  &gt;
                </p>
                <p class="pl-8">
                  &lt;/
                  <span class="text-red-400">Card</span>
                  &gt;
                </p>
                <p class="pl-4">);</p>
                <p>}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>