Feature Highlights Section with Image Cards

<section class="overflow-hidden relative" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(2)">
      <div class="absolute top-0 right-0 bottom-0 left-0" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(2) &gt; div:nth-of-type(1)">
        <div class="-top-24 -left-24 bg-emerald-900/25 w-[420px] h-[420px] rounded-[56px] absolute blur-3xl" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(2) &gt; div:nth-of-type(1) &gt; div:nth-of-type(1)"></div>
        <div class="absolute -bottom-20 -right-20 h-80 w-80 rounded-full bg-lime-400/10 blur-2xl"></div>
        
      </div>

      <div class="container md:py-28 mr-auto ml-auto pt-20 pr-6 pb-20 pl-6 relative">
        <div class="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between gap-x-6 gap-y-6">
          <div class="max-w-3xl">
            <div class="flex items-center gap-2 text-emerald-200/80 mb-2">
              <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="sparkles" class="lucide lucide-sparkles h-4 w-4"><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><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
              <span class="text-sm font-medium tracking-wide">
                Platform Features
              </span>
            </div>
            <h2 class="text-4xl sm:text-5xl md:text-6xl font-normal tracking-tight leading-[1.05] text-emerald-50">
              Connect globally, operate seamlessly.
            </h2>
          </div>

          <a href="#" class="inline-flex items-center gap-2 self-start lg:self-auto rounded-full bg-lime-400 text-black px-4 py-2 text-sm font-medium hover:bg-lime-300 transition-colors">
            All Features
            <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-up-right" class="lucide lucide-arrow-up-right h-4 w-4"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
          </a>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 md:gap-8 md:mt-10 md:pb-0 md:pt-0 mt-10 pt-4 pb-4 gap-x-6 gap-y-6">
          <!-- Card 1 -->
          <article class="rounded-3xl border border-emerald-800/40 bg-emerald-900/10 p-5 md:p-6 hover:border-emerald-700/60 transition-colors">
            <div class="rounded-2xl overflow-hidden ring-1 ring-white/5 mb-5">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/75c96c73-a515-4d7b-927a-b31d86fe9135_800w.webp" alt="Minimalist Indigo Gradient Hills Illustration" class="w-full h-56 object-cover">
            </div>
            <h3 class="text-2xl font-semibold tracking-tight mb-2">
              Real-Time Tracking
            </h3>
            <p class="text-gray-400 text-sm leading-relaxed">
              Monitor your global projects in real-time with our advanced
              tracking system. Stay informed with live updates and comprehensive
              analytics across all time zones.
            </p>
            <div class="flex items-center gap-3 pt-6">
              <a href="#" class="text-sm font-medium hover:text-emerald-200 transition-colors">
                Read More
              </a>
              <span class="inline-flex items-center justify-center h-8 w-8 rounded-full bg-lime-400 text-black">
                <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-up-right" class="lucide lucide-arrow-up-right h-4 w-4"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
              </span>
            </div>
          </article>

          <!-- Card 2 -->
          <article class="rounded-3xl border border-emerald-800/40 bg-emerald-900/10 p-5 md:p-6 hover:border-emerald-700/60 transition-colors">
            <div class="rounded-2xl overflow-hidden ring-1 ring-white/5 mb-5">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8a17bc7f-0e8e-466b-91df-7a601bf05bcd_800w.webp" alt="Blue Accretion Disk Around Black Hole Illustration" class="w-full h-56 object-cover">
            </div>
            <h3 class="text-2xl font-semibold tracking-tight mb-2">
              Team Collaboration
            </h3>
            <p class="text-gray-400 text-sm leading-relaxed">
              Seamlessly collaborate with teams worldwide. Share insights,
              coordinate tasks, and maintain productivity across borders with
              integrated communication tools.
            </p>
            <div class="flex items-center gap-3 pt-6">
              <a href="#" class="text-sm font-medium hover:text-emerald-200 transition-colors">
                Read More
              </a>
              <span class="inline-flex items-center justify-center h-8 w-8 rounded-full bg-lime-400 text-black">
                <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-up-right" class="lucide lucide-arrow-up-right h-4 w-4"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
              </span>
            </div>
          </article>

          <!-- Card 3 -->
          <article class="rounded-3xl border border-emerald-800/40 bg-emerald-900/10 p-5 md:p-6 hover:border-emerald-700/60 transition-colors">
            <div class="rounded-2xl overflow-hidden ring-1 ring-white/5 mb-5">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/76b92528-18e3-4a59-acfb-746c449378f6_800w.webp" alt="Blue Accretion Disk Around Black Hole Illustration" class="w-full h-56 object-cover">
            </div>
            <h3 class="text-2xl font-semibold tracking-tight mb-2">
              Smart Analytics
            </h3>
            <p class="text-gray-400 text-sm leading-relaxed">
              Leverage powerful analytics to optimize operations and make
              data-driven decisions. Track performance metrics and gain
              actionable insights for your global workflow.
            </p>
            <div class="flex items-center gap-3 pt-6">
              <a href="#" class="text-sm font-medium hover:text-emerald-200 transition-colors">
                Read More
              </a>
              <span class="inline-flex items-center justify-center h-8 w-8 rounded-full bg-lime-400 text-black">
                <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-up-right" class="lucide lucide-arrow-up-right h-4 w-4"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
              </span>
            </div>
          </article>
        </div>
      </div>
    </section>