Responsive Services Grid with Icon Cards

<section class="md:py-20 bg-white pt-16 pb-16">
      <div class="max-w-7xl mr-auto ml-auto pr-6 pl-6">
        <div class="flex items-end justify-between gap-6">
          <div class="">
            
            <h2 class="sm:text-4xl text-3xl font-medium text-neutral-900 tracking-tight">Our services —<span class="font-normal italic font-instrument-serif">designed to scale</span></h2><p class="mt-3 text-neutral-600 max-w-2xl font-sans">
              We build exceptional product experiences with a focus on clarity, speed, and measurable outcomes.
            </p>
          </div>
          <a href="#" class="hidden sm:inline-flex items-center gap-2 rounded-full bg-neutral-900 text-white px-5 py-3 text-sm font-medium hover:bg-black font-sans">
            Explore services <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 h-4 w-4"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
          </a>
        </div>

        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-10">
  <div class="hover:shadow-xl transition-shadow duration-300 bg-gradient-to-br from-white to-slate-50 border-slate-100 border rounded-2xl pt-6 pr-6 pb-6 pl-6 shadow-lg">
    <div class="flex items-start justify-between mb-4">
      <div class="h-10 w-10 rounded-full bg-emerald-100 flex items-center justify-center">
        <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" class="h-5 w-5 text-emerald-600">
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
        </svg>
      </div>
      <button class="text-slate-400 hover:text-slate-600 transition-colors">
        <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" class="h-4 w-4">
          <path d="M5 12h14"></path>
          <path d="m12 5 7 7-7 7"></path>
        </svg>
      </button>
    </div>
    <h3 class="text-lg font-semibold text-slate-900 mb-2">Product Strategy</h3>
    <p class="text-sm text-slate-600 mb-6">Transform ideas into actionable roadmaps with user research, competitive analysis, and strategic planning.</p>
    <div class="space-y-3 text-sm">
      <div class="flex items-center justify-between">
        <span class="text-slate-700">Research &amp; Discovery</span>
        <span class="text-emerald-600 font-medium">✓</span>
      </div>
      <div class="flex items-center justify-between">
        <span class="text-slate-700">Market Analysis</span>
        <span class="text-emerald-600 font-medium">✓</span>
      </div>
      <div class="flex items-center justify-between">
        <span class="text-slate-700">Product Roadmap</span>
        <span class="text-emerald-600 font-medium">✓</span>
      </div>
    </div>
  </div>

  <div class="hover:shadow-xl transition-shadow duration-300 bg-gradient-to-br from-gray-900 to-gray-800 border-gray-700 border rounded-2xl pt-6 pr-6 pb-6 pl-6 shadow-lg">
    <div class="flex items-start justify-between mb-4">
      <div class="h-10 w-10 rounded-full bg-blue-900 flex items-center justify-center">
        <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" class="h-5 w-5 text-blue-400">
          <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" class=""></path>
          <polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline>
          <polyline points="7.5 19.79 7.5 14.6 3 12"></polyline>
          <polyline points="21 12 16.5 14.6 16.5 19.79"></polyline>
          <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
          <line x1="12" x2="12" y1="22.08" y2="12"></line>
        </svg>
      </div>
      <button class="text-gray-500 hover:text-gray-300 transition-colors">
        <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" class="h-4 w-4">
          <path d="M5 12h14"></path>
          <path d="m12 5 7 7-7 7"></path>
        </svg>
      </button>
    </div>
    <h3 class="text-lg font-semibold text-white mb-2">Design Systems</h3>
    <p class="text-sm text-gray-300 mb-6">Create scalable design foundations with components, patterns, and guidelines that grow with your product.</p>
    <div class="space-y-3 text-sm">
      <div class="flex items-center justify-between">
        <span class="text-gray-300">Component Library</span>
        <span class="text-blue-400 font-medium">✓</span>
      </div>
      <div class="flex items-center justify-between">
        <span class="text-gray-300">Brand Guidelines</span>
        <span class="text-blue-400 font-medium">✓</span>
      </div>
      <div class="flex items-center justify-between">
        <span class="text-gray-300">Design Tokens</span>
        <span class="text-blue-400 font-medium">✓</span>
      </div>
    </div>
  </div>

  <div class="hover:shadow-xl transition-shadow duration-300 bg-gradient-to-br from-white to-slate-50 border-slate-100 border rounded-2xl pt-6 pr-6 pb-6 pl-6 shadow-lg">
    <div class="flex items-start justify-between mb-4">
      <div class="h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center">
        <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" class="h-5 w-5 text-purple-600">
          <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
        </svg>
      </div>
      <button class="text-slate-400 hover:text-slate-600 transition-colors">
        <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" class="h-4 w-4">
          <path d="M5 12h14"></path>
          <path d="m12 5 7 7-7 7"></path>
        </svg>
      </button>
    </div>
    <h3 class="text-lg font-semibold text-slate-900 mb-2">Growth Optimization</h3>
    <p class="text-sm text-slate-600 mb-6">Data-driven optimization to increase conversions, retention, and user engagement through testing and analytics.</p>
    <div class="space-y-3 text-sm">
      <div class="flex items-center justify-between">
        <span class="text-slate-700">A/B Testing</span>
        <span class="text-purple-600 font-medium">✓</span>
      </div>
      <div class="flex items-center justify-between">
        <span class="text-slate-700">Analytics Setup</span>
        <span class="text-purple-600 font-medium">✓</span>
      </div>
      <div class="flex items-center justify-between">
        <span class="text-slate-700">Conversion Rate</span>
        <span class="text-purple-600 font-medium">+24%</span>
      </div>
    </div>
  </div>
</div>
      </div>
    </section>