Phase Detail Card with Navigation Controls

<section class="relative overflow-hidden sm:rounded-3xl col-span-1 md:col-span-3 lg:col-span-6 flex flex-col bg-zinc-950 border-zinc-900 border rounded-2xl max-w-xl">
      <div class="sm:p-6 md:p-7 pt-5 pr-5 pb-5 pl-5">
        <div class="flex items-center justify-between">
          <p class="text-sm text-zinc-400">System Architecture</p>
          <div class="flex items-center gap-1.5">
            <span class="size-2 rounded-full bg-orange-500"></span>
            <span class="size-2 rounded-full bg-zinc-600"></span>
            <span class="size-2 rounded-full bg-zinc-600"></span>
            <span class="size-2 rounded-full bg-zinc-600"></span>
          </div>
        </div>

        <h2 class="mt-5 text-2xl sm:text-3xl md:text-4xl tracking-tight font-semibold text-zinc-100">
          Phase 1 — Neural Integration
        </h2>
        <p class="mt-3 text-sm sm:text-base text-zinc-300 max-w-2xl">
          Advanced machine learning algorithms adapt to your infrastructure patterns and deploy optimized configurations automatically. Experience seamless integration that learns from your workflow and enhances system performance.
        </p>

        <div class="mt-8">
          <div class="flex items-baseline gap-2">
            <span class="text-3xl sm:text-4xl font-semibold tracking-tight text-zinc-100">15</span>
            <span class="text-xs uppercase text-zinc-400">sec</span>
          </div>
          <p class="text-xs sm:text-sm text-zinc-400 mt-1">Neural processing time</p>
        </div>
      </div>

      <div class="sm:px-6 md:px-7 sm:pb-6 md:pb-7 border-zinc-900/80 border-t mt-auto pr-5 pb-5 pl-5 pt-5">
        <div class="flex items-center justify-between">
          <div class="inline-flex items-center gap-2">
            <button class="inline-flex items-center justify-center size-9 rounded-xl bg-zinc-900 border border-zinc-800 hover:border-zinc-700 transition">
              <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="arrow-left" class="lucide lucide-arrow-left w-4 h-4"><path d="m12 19-7-7 7-7" class=""></path><path d="M19 12H5" class=""></path></svg>
            </button>
            <button class="inline-flex items-center justify-center size-9 rounded-xl bg-zinc-900 border border-zinc-800 hover:border-zinc-700 transition">
              <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="arrow-right" class="lucide lucide-arrow-right w-4 h-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
            </button>
          </div>
          <div class="hidden sm:flex items-center gap-2 text-xs text-zinc-400">
            <span>1/4</span>
          </div>
        </div>
      </div>
    </section>