Responsive Feature Showcase Section with Image Cards

<section
  class="z-10 [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll sm:p-8 sm:ml-auto sm:mr-auto sm:mt-40 sm:mb-40 overflow-hidden bg-slate-900/60 max-w-7xl border-white/10 border rounded-3xl mt-40 mr-auto mb-40 ml-auto pt-6 pr-6 pb-6 pl-6 relative backdrop-blur"
  data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(5)">
  <div class="absolute inset-0 bg-gradient-to-br from-white/5 via-transparent to-white/10 pointer-events-none"></div>
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 sm:gap-10 items-start relative z-10">
    <div class="grid grid-cols-2 order-1 lg:order-2 relative gap-x-4 gap-y-4">
      <article
        class="group overflow-hidden aspect-[4/3] bg-center transition-transform duration-300 hover:scale-[1.02] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a660c55c-71bb-40cc-8038-2ec913c07704_1600w.jpg)] bg-cover border-white/10 rounded-2xl relative">
        <div
          class="transition-opacity duration-300 group-hover:opacity-90 bg-gradient-to-b from-black/0 via-black/15 to-black/60 absolute top-0 right-0 bottom-0 left-0">
        </div>
        <div class="absolute top-3 left-3 transition-transform duration-300 group-hover:scale-110">
          <span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-1.5 backdrop-blur">
              <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" class="h-3.5 w-3.5"><rect width="20" height="16" x="2" y="4" rx="2" class=""></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" class=""></path></svg>
            </span>
        </div>
        <div class="absolute top-3 right-3 transition-transform duration-300 group-hover:translate-x-1">
          <span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-3 backdrop-blur">Priority</span>
        </div>
        <div class="absolute bottom-3 left-3 right-3 transition-transform duration-300 group-hover:translate-y-[-4px]">
          <p class="text-white text-lg font-medium tracking-tight leading-tight">Smart filtering</p>
        </div>
      </article>
      <article
        class="group relative overflow-hidden aspect-[4/3] bg-center bg-cover border-white/10 rounded-2xl bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f1d590a8-c6eb-418e-aa6d-6c2f648888a7_1600w.jpg)] transition-transform duration-300 hover:scale-[1.02]">
        <div
          class="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black/60 transition-opacity duration-300 group-hover:opacity-90">
        </div>
        <div class="absolute top-3 left-3 transition-transform duration-300 group-hover:scale-110">
          <span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-1.5 backdrop-blur">
              <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" class="w-3.5 h-3.5"><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></svg>
            </span>
        </div>
        <div class="absolute top-3 right-3 transition-transform duration-300 group-hover:translate-x-1">
          <span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-3 backdrop-blur">AI</span>
        </div>
        <div class="absolute bottom-3 left-3 right-3 transition-transform duration-300 group-hover:translate-y-[-4px]">
          <p class="text-white text-lg font-medium tracking-tight leading-tight">Auto responses</p>
        </div>
      </article>
      <article
        class="group relative overflow-hidden aspect-[4/5] bg-center bg-cover border-white/10 rounded-2xl bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/39d6bd74-d7eb-4a3c-afb3-43091ef38e3e_1600w.webp)] transition-transform duration-300 hover:scale-[1.02]">
        <div
          class="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black/60 transition-opacity duration-300 group-hover:opacity-90">
        </div>
        <div class="absolute top-3 left-3 transition-transform duration-300 group-hover:scale-110">
          <span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-1.5 backdrop-blur">
              <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" class="w-3.5 h-3.5"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" class=""></path></svg>
            </span>
        </div>
        <div class="absolute top-3 right-3 transition-transform duration-300 group-hover:translate-x-1">
          <span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-3 backdrop-blur">Threads</span>
        </div>
        <div class="absolute bottom-3 left-3 right-3 transition-transform duration-300 group-hover:translate-y-[-4px]">
          <p class="text-white text-lg font-medium tracking-tight leading-tight">Context aware</p>
        </div>
      </article>
      <article
        class="group relative overflow-hidden aspect-[4/5] bg-center bg-cover border-white/10 rounded-2xl bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/0255963c-52aa-4da8-b87e-9a8069544a92_1600w.webp)] transition-transform duration-300 hover:scale-[1.02]">
        <div
          class="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black/60 transition-opacity duration-300 group-hover:opacity-90">
        </div>
        <div class="absolute top-3 left-3 transition-transform duration-300 group-hover:scale-110">
          <span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-1.5 backdrop-blur">
              <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" class="h-3.5 w-3.5"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
            </span>
        </div>
        <div class="absolute top-3 right-3 transition-transform duration-300 group-hover:translate-x-1">
          <span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-3 backdrop-blur">Workflow</span>
        </div>
        <div class="absolute bottom-3 left-3 right-3 transition-transform duration-300 group-hover:translate-y-[-4px]">
          <p class="text-white text-lg font-medium tracking-tight leading-tight">Advanced automation</p>
        </div>
      </article>
    </div>
    <div class="flex flex-col min-h-full justify-between order-2 lg:order-1">
      <div class="">
        <span class="text-sm font-normal text-slate-400">Interface</span>
        <h2 class="text-[44px] sm:text-6xl lg:text-7xl leading-[0.9] text-white tracking-tighter mt-2">
          An inbox built for speed and focus.
        </h2>
        <div class="mt-8 relative">
          <div class="hidden sm:flex flex-col gap-4 relative text-slate-300 bg-transparent pr-4 pl-4">
            <div class="relative">
              <div
                class="absolute left-2 top-8 bottom-0 w-px bg-gradient-to-b from-lime-400 via-emerald-400 to-cyan-400">
              </div>
              <div class="flex gap-4 items-start">
                <div
                  class="flex-shrink-0 w-4 h-4 z-10 relative bg-slate-900 border-lime-400 border-2 rounded-full mt-0.5 flex items-center justify-center">
                  <div class="w-1.5 h-1.5 bg-lime-400 rounded-full"></div>
                </div>
                <div class="flex-1 pb-6">
                  <span class="text-sm font-medium text-lime-300">Smart prioritization</span>
                  <p class="text-xs text-slate-400 mt-1">AI learns what matters most to you</p>
                </div>
              </div>
            </div>
            <div class="relative">
              <div
                class="absolute left-2 top-8 bottom-0 w-px bg-gradient-to-b from-lime-400 via-emerald-400 to-cyan-400">
              </div>
              <div class="flex gap-4 items-start">
                <div
                  class="flex-shrink-0 w-4 h-4 rounded-full border-2 border-emerald-400 bg-slate-900 z-10 relative mt-0.5 flex items-center justify-center">
                  <div class="w-1.5 h-1.5 rounded-full bg-emerald-400"></div>
                </div>
                <div class="flex-1 pb-6">
                  <span class="text-sm font-medium text-emerald-300">Instant summaries</span>
                  <p class="text-xs text-slate-400 mt-1">Get the gist without reading everything</p>
                </div>
              </div>
            </div>
            <div class="relative">
              <div class="flex items-start gap-4">
                <div
                  class="flex-shrink-0 w-4 h-4 rounded-full border-2 border-cyan-400 bg-slate-900 z-10 relative mt-0.5 flex items-center justify-center">
                  <div class="w-1.5 h-1.5 rounded-full bg-cyan-400"></div>
                </div>
                <div class="flex-1">
                  <span class="text-sm font-medium text-cyan-300">Auto-draft replies</span>
                  <p class="text-xs text-slate-400 mt-1">Respond faster with AI suggestions</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full mt-10">
        <div class="">
          <p class="text-sm font-medium text-white tracking-tight">Transform every interaction</p>
          <p class="text-sm text-slate-300 mt-1 max-w-sm">
            Smart filtering, context-aware responses, and workflow automation that keeps you productive and focused.
          </p>
          <a href="#features"
            class="inline-flex items-center justify-center gap-2 h-10 hover:bg-lime-600/90 transition text-sm font-normal text-white bg-lime-600 rounded-full mt-4 px-4 max-w-sm">
            Explore features
            <span class="inline-flex h-2 w-2 rounded-full bg-white"></span>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>