Feature Grid

<section className="py-20">
  <div className="max-w-6xl mx-auto px-6">
    <h2 className="text-3xl font-bold mb-4">Features</h2>
    <p className="text-muted-foreground max-w-2xl mb-12">Brief section intro.</p>
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {features.map((f) => (
        <div key={f.name} className="p-6 rounded-lg border bg-card">
          <div className="w-10 h-10 rounded-md bg-primary/10 flex items-center justify-center mb-4">
            {f.icon}
          </div>
          <h3 className="font-semibold mb-2">{f.name}</h3>
          <p className="text-sm text-muted-foreground">{f.description}</p>
        </div>
      ))}
    </div>
  </div>
</section>