Responsive Hero Feature Section with Image and Navigation

<section class="max-w-7xl sm:px-6 lg:px-8 sm:py-10 md:py-12 mr-auto ml-auto pt-8 pr-4 pb-8 pl-4">
  <div class="grid grid-cols-1 md:grid-cols-6 lg:grid-cols-12 gap-3 sm:gap-4 md:gap-5 lg:gap-6">
    <!-- Visual Panel -->
    <article class="relative overflow-hidden rounded-2xl sm:rounded-3xl border border-zinc-900 bg-zinc-950 col-span-1 md:col-span-3 lg:col-span-6 min-h-[280px] sm:min-h-[360px] md:min-h-[440px]">
      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/cd7b12db-2be0-4f6e-8073-a68128a03cde_800w.jpg" alt="Minimal 3D cube render with subtle glow" class="absolute inset-0 w-full h-full object-cover opacity-90">
      <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent"></div>
      <div class="absolute bottom-4 left-4 right-4 flex items-center justify-between">
        <div class="inline-flex items-center gap-2 px-2.5 h-8 rounded-lg bg-black/40 border border-white/10 backdrop-blur text-xs text-zinc-200">
          <span class="size-1.5 rounded-full bg-orange-500"></span>
          Intelligent Core
        </div>
        <div class="hidden sm:flex items-center gap-1">
          <span class="w-8 h-1.5 rounded-full bg-orange-500/90"></span>
          <span class="w-3 h-1.5 rounded-full bg-zinc-500/60"></span>
          <span class="w-3 h-1.5 rounded-full bg-zinc-500/60"></span>
          <span class="w-3 h-1.5 rounded-full bg-zinc-500/60"></span>
        </div>
      </div>
    </article>

    <!-- Content Panel -->
    <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">
      <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>

    <!-- Actions Panel -->
    
  </div>
</section>