Platform Feature Grid Section with CTA

<section class="w-full sm:px-6 md:px-10 max-w-7xl mx-auto pt-12 pr-4 pb-12 pl-4">
  <div class="flex items-end justify-between mb-6 sm:mb-8">
    <div>
      <p class="text-[11px] sm:text-xs uppercase text-neutral-500 tracking-[0.2em]">(02) Platform</p>
      <h2 class="mt-2 text-2xl sm:text-3xl lg:text-4xl font-semibold tracking-tight">Scale your business operations.</h2>
    </div>
    <a href="#contact" class="hidden sm:inline-flex items-center gap-2 ring-1 ring-neutral-200 hover:shadow text-sm text-neutral-700 bg-white rounded-full px-4 py-2">
      Explore platform
      <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 w-4 h-4"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
    </a>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
    <!-- Revenue & Analytics -->
    <article class="relative bg-white ring-1 ring-neutral-200 rounded-3xl p-5 sm:p-8 flex flex-col hover:-translate-y-0.5 transition-transform duration-200">
      <div class="flex items-center gap-3 mb-4">
        
        <span class="inline-flex items-center gap-2 rounded-full bg-emerald-400/10 text-emerald-600 text-xs px-2.5 py-1">
          <span class="h-1.5 w-1.5 rounded-full bg-emerald-400"></span>
          Revenue Engine
        </span>
      </div>
      <h3 class="text-2xl sm:text-3xl font-semibold tracking-tight text-neutral-900 leading-tight mb-4">Revenue &amp; Analytics</h3>
      <p class="text-neutral-600 text-base leading-relaxed mb-6 flex-1">Transform your business with intelligent revenue tracking, predictive analytics, and automated growth optimization.</p>
      <div class="grid grid-cols-2 gap-3">
        <span class="inline-flex items-center gap-2 ring-1 ring-neutral-200 text-xs text-neutral-800 bg-zinc-100 rounded-xl pt-2 pr-3.5 pb-2 pl-3.5">
          <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="bar-chart-3" class="lucide lucide-bar-chart-3 w-4 h-4 text-neutral-700"><path d="M3 3v16a2 2 0 0 0 2 2h16" class=""></path><path d="M18 17V9" class=""></path><path d="M13 17V5" class=""></path><path d="M8 17v-3" class=""></path></svg>
          Real-time Metrics
        </span>
        <span class="inline-flex items-center gap-2 ring-1 ring-neutral-200 text-xs text-neutral-800 bg-zinc-100 rounded-xl pt-2 pr-3.5 pb-2 pl-3.5">
          <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="target" class="lucide lucide-target w-4 h-4 text-neutral-700"><circle cx="12" cy="12" r="10" class=""></circle><circle cx="12" cy="12" r="6" class=""></circle><circle cx="12" cy="12" r="2" class=""></circle></svg>
          Growth Targets
        </span>
        <span class="inline-flex items-center gap-2 ring-1 ring-neutral-200 text-xs text-neutral-800 bg-zinc-100 rounded-xl pt-2 pr-3.5 pb-2 pl-3.5">
          <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="zap" class="lucide lucide-zap w-4 h-4 text-neutral-700"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" class=""></path></svg>
          Auto Optimization
        </span>
        <span class="inline-flex items-center gap-2 ring-1 ring-neutral-200 text-xs text-neutral-800 bg-zinc-100 rounded-xl pt-2 pr-3.5 pb-2 pl-3.5">
          <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="shield-check" class="lucide lucide-shield-check w-4 h-4 text-neutral-700"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path><path d="m9 12 2 2 4-4" class=""></path></svg>
          Secure Platform
        </span>
      </div>
    </article>

    <!-- Team Collaboration -->
    <article class="relative bg-white ring-1 ring-neutral-200 rounded-3xl p-5 sm:p-8 flex flex-col hover:-translate-y-0.5 transition-transform duration-200">
      <div class="flex items-center gap-3 mb-4">
        
        <span class="inline-flex items-center gap-2 rounded-full bg-amber-400/10 text-amber-600 text-xs px-2.5 py-1">
          <span class="h-1.5 w-1.5 rounded-full bg-amber-400"></span>
          Collaboration Hub
        </span>
      </div>
      <h3 class="text-2xl sm:text-3xl font-semibold tracking-tight text-neutral-900 leading-tight mb-4">Team Collaboration</h3>
      <p class="text-neutral-600 text-base leading-relaxed mb-6 flex-1">Streamline teamwork with unified workspaces, real-time collaboration, and intelligent project management.</p>

      <!-- Team member stack -->
      <div class="mt-auto relative">
        
        <div class="absolute inset-x-6 -top-1.5 h-12 rounded-xl bg-zinc-100/60 ring-1 ring-neutral-200"></div>
        <div class="relative">
          <div class="flex items-center gap-3 rounded-2xl bg-zinc-100 ring-1 ring-neutral-200 p-4">
            <div class="flex -space-x-2">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/096dab35-ecaf-418f-a932-5b514543b035_320w.jpg" alt="Team member" class="h-8 w-8 rounded-full object-cover ring-2 ring-white" style="">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/fc935cb1-ef8c-4e13-8bce-c3fd8e402f63_320w.jpg" alt="Team member" class="h-8 w-8 rounded-full object-cover ring-2 ring-white" style="">
              <div class="h-8 w-8 rounded-full bg-neutral-200 ring-2 ring-white flex items-center justify-center">
                <span class="text-xs font-medium text-neutral-600">+3</span>
              </div>
            </div>
            <div class="min-w-0 flex-1">
              <p class="text-neutral-900 font-medium tracking-tight text-sm">Team Alpha</p>
              <p class="text-xs text-neutral-600">5 active projects • Online</p>
            </div>
            <div class="h-2 w-2 rounded-full bg-emerald-400"></div>
          </div>
        </div>
      </div>
    </article>

    <!-- AI-Powered Insights -->
    <article class="relative bg-white ring-1 ring-neutral-200 rounded-3xl p-5 sm:p-8 flex flex-col hover:-translate-y-0.5 transition-transform duration-200">
      <div class="flex items-center gap-3 mb-4">
        
        <span class="inline-flex items-center gap-2 rounded-full bg-indigo-400/10 text-indigo-600 text-xs px-2.5 py-1">
          <span class="h-1.5 w-1.5 rounded-full bg-indigo-400"></span>
          AI Intelligence
        </span>
      </div>
      <h3 class="text-2xl sm:text-3xl font-semibold tracking-tight text-neutral-900 leading-tight mb-4">AI-Powered Insights</h3>
      <p class="text-neutral-600 text-base leading-relaxed mb-6 flex-1">Leverage artificial intelligence for predictive analytics, automated decision-making, and strategic insights.</p>

      <!-- AI insights panel -->
      <div class="mt-auto">
        <div class="rounded-2xl bg-zinc-100 ring-1 ring-neutral-200 p-4">
          <div class="flex items-center justify-between mb-3">
            <p class="text-sm font-medium text-neutral-900 flex items-center gap-2">
              </p><div class="h-2 w-2 rounded-full bg-indigo-400 animate-pulse"></div>
              AI Analysis
            <p></p>
            <span class="text-xs font-medium text-indigo-600">Active</span>
          </div>
          <div class="space-y-2">
            <div class="flex items-center justify-between px-3.5 py-2 rounded-lg bg-white/60 ring-1 ring-neutral-200">
              <span class="text-sm text-neutral-600 flex items-center gap-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="trending-up" class="lucide lucide-trending-up w-3.5 h-3.5 text-emerald-500"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
                Performance Score
              </span>
              <span class="text-sm font-medium text-neutral-900">94%</span>
            </div>
            <div class="flex items-center justify-between px-3.5 py-2 rounded-lg bg-white/60 ring-1 ring-neutral-200">
              <span class="text-sm text-neutral-600 flex items-center gap-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="lightbulb" class="lucide lucide-lightbulb w-3.5 h-3.5 text-amber-500"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5" class=""></path><path d="M9 18h6" class=""></path><path d="M10 22h4" class=""></path></svg>
                Recommendations
              </span>
              <span class="text-sm font-medium text-neutral-900">12 new</span>
            </div>
          </div>
        </div>
      </div>
    </article>
  </div>

  <!-- CTA section at bottom -->
  <div class="mt-8 sm:mt-10 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 p-6 bg-neutral-50 rounded-2xl ring-1 ring-neutral-200">
    <div class="">
      <h3 class="text-lg font-semibold text-neutral-900 tracking-tight">Ready to transform your operations?</h3>
      <p class="text-sm text-neutral-600 mt-1">Join thousands of businesses scaling with our platform.</p>
    </div>
    <div class="flex items-center gap-3">
      <a href="#work" class="inline-flex items-center gap-2 rounded-xl bg-white ring-1 ring-neutral-200 px-4 py-2.5 text-sm text-neutral-700 hover:shadow transition">
        View case studies
      </a>
      <a href="#contact" class="inline-flex items-center gap-2 rounded-xl bg-neutral-900 text-white px-4 py-2.5 text-sm font-medium hover:bg-neutral-800 transition shadow">
        Get started
        <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>
      </a>
    </div>
  </div>
</section>