Add features component

Author: davcortez

src/assets/commitments.json

@@ -0,0 +1,17 @@
+[
+    {
+      "title": "Crear espacios de encuentro",
+      "description": "Organizar eventos y actividades que permitan a los miembros de diferentes comunidades conocerse y colaborar.",
+      "icon": "M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
+    },
+    {
+      "title": "Desarrollar recursos compartidos",
+      "description": "Crear herramientas y recursos que sean útiles para todas las comunidades, como guías, tutoriales y plataformas de colaboración.",
+      "icon": "M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
+    },
+    {
+      "title": "Fomentar la participación",
+      "description": "Incentivar la participación activa de los miembros de todas las comunidades en la toma de decisiones y en la organización de actividades.",
+      "icon": "M13 10V3L4 14h7v7l9-11h-7z"
+    }
+]

src/components/Features.astro

@@ -0,0 +1,39 @@
+---
+import commitments from '../assets/commitments.json'
+
+---
+
+<section class="py-16">
+  <div class="container mx-auto px-4">
+    <h2 class="text-3xl font-bold text-center mb-12">
+        Nuestros compromisos
+    </h2>
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+      {commitments.map(commitment => (
+      <div class="text-center p-6">
+        <div
+          class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"
+        >
+          <svg
+            class="w-8 h-8 text-blue-600"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d={commitment.icon}
+            ></path>
+          </svg>
+        </div>
+        <h3 class="text-xl font-bold mb-4">{commitment.title}</h3>
+        <p class="text-gray-600">
+          {commitment.description}
+        </p>
+      </div>
+      ))}
+    </div>
+  </div>
+</section>