AI Benefits Grid Section with Icon Cards

<section class="relative z-10 max-w-7xl mr-auto ml-auto pb-20">
  <div class="mx-auto max-w-4xl text-center px-6">
    <span class="inline-flex items-center rounded-full bg-white/5 px-3 py-1 text-xs text-white/80 ring-1 ring-inset ring-white/10">Benefits</span>
    <h2 class="mt-6 text-3xl sm:text-5xl md:text-6xl font-semibold tracking-tight">The Key Benefits of AI for Your
      Business Growth</h2>
    <p class="mt-3 sm:mt-4 text-sm sm:text-base text-white/70">Discover how AI automation enhances efficiency, reduces
      costs, and drives business growth with smarter, faster processes.</p>
  </div>

  <div class="mt-10 sm:mt-12 px-6">
    <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
      <!-- Card 1 -->
      <div
        class="relative ring-inset sm:p-6 overflow-hidden bg-white/5 ring-white/10 ring-1 rounded-2xl pt-5 pr-5 pb-5 pl-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 h-5 w-5 text-white/80">
          <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>
        <h3 class="mt-3 text-lg sm:text-xl font-semibold tracking-tight">Increased Productivity</h3>
        <p class="mt-2 text-sm text-white/70">Gain actionable insights with AI‑driven analytics to improve
          decision‑making and strategy.</p>
        <div
          class="pointer-events-none absolute -right-12 -bottom-12 h-40 w-40 rounded-full bg-gradient-to-t from-purple-600/30 to-transparent blur-3xl">
        </div>
      </div>

      <!-- Card 2 -->
      <div class="relative ring-inset sm:p-6 overflow-hidden ring-white/10 ring-1 rounded-2xl pt-5 pr-5 pb-5 pl-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="handshake"
          class="lucide lucide-handshake h-5 w-5 text-white/80">
          <path d="m11 17 2 2a1 1 0 1 0 3-3" class=""></path>
          <path
            d="m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4"
            class=""></path>
          <path d="m21 3 1 11h-2" class=""></path>
          <path d="M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3" class=""></path>
          <path d="M3 4h8" class=""></path>
        </svg>
        <h3 class="mt-3 text-lg sm:text-xl font-semibold tracking-tight">Better Customer Experience</h3>
        <p class="mt-2 text-sm text-white/70">Personalized AI interactions improve response times, customer engagement,
          and overall satisfaction.</p>
        <div
          class="pointer-events-none absolute -right-12 -bottom-12 h-40 w-40 rounded-full bg-gradient-to-t from-purple-600/30 to-transparent blur-3xl">
        </div>
      </div>

      <!-- Card 3 -->
      <div class="relative rounded-2xl bg-white/5 ring-1 ring-inset ring-white/10 p-5 sm:p-6 overflow-hidden">
        <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="clock"
          class="lucide lucide-clock h-5 w-5 text-white/80">
          <path d="M12 6v6l4 2" class=""></path>
          <circle cx="12" cy="12" r="10" class=""></circle>
        </svg>
        <h3 class="mt-3 text-lg sm:text-xl font-semibold tracking-tight">24/7 Availability</h3>
        <p class="mt-2 text-sm text-white/70">AI‑powered systems operate around the clock, ensuring seamless support and
          execution without downtime.</p>
        <div
          class="pointer-events-none absolute -right-12 -bottom-12 h-40 w-40 rounded-full bg-gradient-to-t from-purple-600/30 to-transparent blur-3xl">
        </div>
      </div>

      <!-- Card 4 -->
      <div class="relative rounded-2xl bg-white/5 ring-1 ring-inset ring-white/10 p-5 sm:p-6 overflow-hidden">
        <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="circle-dollar-sign" class="lucide lucide-circle-dollar-sign h-5 w-5 text-white/80">
          <circle cx="12" cy="12" r="10" class=""></circle>
          <path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8" class=""></path>
          <path d="M12 18V6" class=""></path>
        </svg>
        <h3 class="mt-3 text-lg sm:text-xl font-semibold tracking-tight">Cost Reduction</h3>
        <p class="mt-2 text-sm text-white/70">AI automation minimizes manual work, cuts operational costs, and optimizes
          resources for better profitability.</p>
        <div
          class="pointer-events-none absolute -right-12 -bottom-12 h-40 w-40 rounded-full bg-gradient-to-t from-purple-600/30 to-transparent blur-3xl">
        </div>
      </div>

      <!-- Card 5 -->
      <div class="relative rounded-2xl bg-white/5 ring-1 ring-inset ring-white/10 p-5 sm:p-6 overflow-hidden">
        <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="pie-chart"
          class="lucide lucide-pie-chart h-5 w-5 text-white/80">
          <path d="M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z"
            class=""></path>
          <path d="M21.21 15.89A10 10 0 1 1 8 2.83" class=""></path>
        </svg>
        <h3 class="mt-3 text-lg sm:text-xl font-semibold tracking-tight">Data‑Driven Insights</h3>
        <p class="mt-2 text-sm text-white/70">Leverage AI to analyze vast data sets, identify trends, and make smarter,
          faster, and more accurate decisions.</p>
        <div
          class="pointer-events-none absolute -right-12 -bottom-12 h-40 w-40 rounded-full bg-gradient-to-t from-purple-600/30 to-transparent blur-3xl">
        </div>
      </div>

      <!-- Card 6 -->
      <div class="relative rounded-2xl bg-white/5 ring-1 ring-inset ring-white/10 p-5 sm:p-6 overflow-hidden">
        <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 h-5 w-5 text-white/80">
          <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>
        <h3 class="mt-3 text-lg sm:text-xl font-semibold tracking-tight">Scalability &amp; Growth</h3>
        <p class="mt-2 text-sm text-white/70">AI adapts to your business needs, allowing you to scale efficiently
          without increasing workload or costs.</p>
        <div
          class="pointer-events-none absolute -right-12 -bottom-12 h-40 w-40 rounded-full bg-gradient-to-t from-purple-600/30 to-transparent blur-3xl">
        </div>
      </div>
    </div>
  </div>
</section>