Feature Card Grid

<div class="py-20 px-6 bg-white">
  <style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); * { font-family: 'Inter', 'Helvetica Neue', sans-serif; }</style>
  <div class="max-w-7xl mx-auto">
    <div class="text-center mb-16">
      <h2 class="text-4xl font-bold text-gray-900 mb-4">Everything You Need</h2>
      <p class="text-xl text-gray-600 max-w-3xl mx-auto">Powerful features designed to help your team work more efficiently and deliver better results.</p>
    </div>
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
      <div class="bg-white p-8 rounded-xl border border-gray-200 shadow-sm
        hover:shadow-lg transition-all duration-200
        hover:-translate-y-2">
        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <h3 class="text-xl font-semibold text-gray-900 mb-3">Easy Integration</h3>
        <p class="text-gray-600">Connect with your existing tools in minutes, not hours. Our API makes integration seamless.</p>
      </div>
      <div class="bg-white p-8 rounded-xl border border-gray-200 shadow-sm
        hover:shadow-lg transition-all duration-200
        hover:-translate-y-2">
        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 20 20">
            <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z"></path>
          </svg>
        </div>
        <h3 class="text-xl font-semibold text-gray-900 mb-3">Team Collaboration</h3>
        <p class="text-gray-600">Work together in real-time with advanced sharing and collaboration features.</p>
      </div>
      <div class="bg-white p-8 rounded-xl border border-gray-200 shadow-sm
        hover:shadow-lg transition-all duration-200
        hover:-translate-y-2">
        <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
            <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"></path>
          </svg>
        </div>
        <h3 class="text-xl font-semibold text-gray-900 mb-3">Analytics Dashboard</h3>
        <p class="text-gray-600">Get insights into your performance with detailed analytics and reporting tools.</p>
      </div>
    </div>
  </div>
</div>