Dark Feature Card with Code Editor Mockup

<article class="group relative overflow-hidden transition-all duration-300 hover:shadow-xl bg-zinc-900/50 border-white/10 border rounded-2xl backdrop-blur-sm">
        <div class="p-6">
          <!-- Illustration -->
          <div class="relative h-48 rounded-xl bg-gradient-to-br from-zinc-900/90 to-zinc-950/90 ring-1 ring-inset ring-white/5 mb-6">
            <!-- Code Editor Mock -->
            <div class="absolute inset-3 rounded-lg bg-zinc-950/90 backdrop-blur border border-white/10 overflow-hidden">
              <div class="flex items-center justify-between px-3 py-2 border-b border-white/10">
                <div class="flex items-center gap-2">
                  <div class="h-2 w-2 bg-red-500/60 rounded-full"></div>
                  <div class="h-2 w-2 bg-yellow-500/60 rounded-full"></div>
                  <div class="h-2 w-2 bg-green-500/60 rounded-full"></div>
                </div>
                <span class="text-xs text-zinc-400">main.js</span>
              </div>
              <div class="p-3 space-y-1">
                <div class="flex">
                  <span class="text-xs text-zinc-500 w-4">1</span>
                  <span class="text-xs text-blue-400">import</span>
                  <span class="text-xs text-zinc-300 ml-1">{ createIssue }</span>
                </div>
                <div class="flex">
                  <span class="text-xs text-zinc-500 w-4">2</span>
                  <span class="text-xs text-purple-400">const</span>
                  <span class="text-xs text-zinc-300 ml-1">issue =</span>
                  <span class="text-xs text-yellow-400 ml-1">'ENG-241'</span>
                </div>
                <div class="flex">
                  <span class="text-xs text-zinc-500 w-4">3</span>
                  <span class="text-xs text-emerald-400">await</span>
                  <span class="text-xs text-zinc-300 ml-1">deploy()</span>
                </div>
                <div class="flex">
                  <span class="text-xs text-zinc-500 w-4">4</span>
                  <span class="text-xs text-zinc-600"># Auto-linked to PR</span>
                </div>
              </div>
            </div>
            <!-- Link indicator -->
            
          </div>

          <!-- Content -->
          <div class="">
            <div class="flex gap-3 mb-4 items-center">
              
              <h3 class="text-xl font-normal text-white tracking-tight font-geist">Smart Linking</h3>
            </div>
            <p class="text-zinc-300 text-sm leading-relaxed font-sans">Automatically connect commits, PRs, and deployments to issues. Never lose context across your development workflow.</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">
                View integrations
                <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>