Responsive Product Feature Section with Image Cards

<div class="ring-1 ring-white/10 md:p-10 bg-slate-900 rounded-3xl px-6 py-6 text-white max-w-5xl w-full">
  <div class="grid lg:grid-cols-2 gap-10">
    <div class="">
      <h2 class="text-3xl sm:text-4xl tracking-tight text-white font-instrument-serif font-normal">Built for modern
        product teams</h2>
      <p class="mt-4 text-slate-300 text-base font-sans">
        AdaFlow is shaped by clear principles: ruthless focus, fast feedback, and a commitment to the quality of craft.
        Make the switch and move with intention.
      </p>
      <button class="mt-6 inline-flex items-center gap-2 text-sm text-slate-200 hover:text-white transition font-sans">
                Learn more
                <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="arrow-right" class="lucide lucide-arrow-right h-4 w-4"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
              </button>
    </div>

    <!-- Cards -->
    <div class="grid sm:grid-cols-3 gap-4">
      <div class="group rounded-2xl bg-slate-800 ring-1 ring-white/10 overflow-hidden hover:ring-white/20 transition">
        <div class="p-4">
          <div class="h-28 rounded-lg overflow-hidden">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c6391c0b-2830-4fd1-ba70-965a3626ca5a_800w.jpg" alt="3D layers" class="h-full w-full object-cover">
          </div>
          <div class="mt-4 flex items-center gap-2 text-sm font-sans">

            Purpose-built for product development
          </div>
          <p class="mt-2 text-sm text-slate-400 font-sans">
            Views for roadmaps, sprints, and discussions—aligned out of the box.
          </p>
        </div>
      </div>

      <div class="group rounded-2xl bg-slate-800 ring-1 ring-white/10 overflow-hidden hover:ring-white/20 transition">
        <div class="p-4">
          <div class="h-28 rounded-lg overflow-hidden">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/943641ad-a70e-44a0-b5e0-4da5e726eff6_800w.jpg" alt="Speed lines" class="h-full w-full object-cover">
          </div>
          <div class="mt-4 flex items-center gap-2 text-sm font-sans">

            Designed to move fast
          </div>
          <p class="mt-2 text-sm text-slate-400 font-sans">
            Ultra‑snappy keyboard flows, instant search, and batch actions.
          </p>
        </div>
      </div>

      <div class="group rounded-2xl bg-slate-800 ring-1 ring-white/10 overflow-hidden hover:ring-white/20 transition">
        <div class="p-4">
          <div class="h-28 rounded-lg overflow-hidden">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/172fe927-753d-4059-8905-e9db2c3fb02f_800w.jpg" alt="Precision grid" class="h-full w-full object-cover">
          </div>
          <div class="mt-4 flex items-center gap-2 text-sm font-sans">

            Crafted to perfection
          </div>
          <p class="mt-2 text-sm text-slate-400 font-sans">
            Minimal UI that stays out of your way and scales with your team.
          </p>
        </div>
      </div>
    </div>
  </div>

  <!-- Secondary feature row -->
  <div class="mt-10 grid md:grid-cols-3 gap-4">
    <div class="rounded-2xl p-5 bg-slate-800 ring-1 ring-white/10 hover:ring-white/20 transition">
      <div class="flex items-center gap-2 text-sm font-sans">
        <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="git-merge" class="lucide lucide-git-merge h-4 w-4">
          <circle cx="18" cy="18" r="3"></circle>
          <circle cx="6" cy="6" r="3"></circle>
          <path d="M6 21V9a9 9 0 0 0 9 9"></path>
        </svg>
        Native Git integrations
      </div>
      <p class="mt-2 text-sm text-slate-400 font-sans">PRs link to issues, statuses sync, and releases update your
        changelog.</p>
    </div>
    <div class="rounded-2xl p-5 bg-slate-800 ring-1 ring-white/10 hover:ring-white/20 transition">
      <div class="flex items-center gap-2 text-sm font-sans">
        <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="bot"
          class="lucide lucide-bot h-4 w-4">
          <path d="M12 8V4H8"></path>
          <rect width="16" height="12" x="4" y="8" rx="2"></rect>
          <path d="M2 14h2"></path>
          <path d="M20 14h2"></path>
          <path d="M15 13v2"></path>
          <path d="M9 13v2"></path>
        </svg>
        AI assist for triage
      </div>
      <p class="mt-2 text-sm text-slate-400 font-sans">Summaries, duplicates, and estimates generated from context.</p>
    </div>
    <div class="rounded-2xl p-5 bg-slate-800 ring-1 ring-white/10 hover:ring-white/20 transition">
      <div class="flex items-center gap-2 text-sm font-sans">
        <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="globe"
          class="lucide lucide-globe h-4 w-4">
          <circle cx="12" cy="12" r="10"></circle>
          <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path>
          <path d="M2 12h20"></path>
        </svg>
        Multiproject roadmaps
      </div>
      <p class="mt-2 text-sm text-slate-400 font-sans">One view across initiatives, teams, and milestones.</p>
    </div>
  </div>
</div>