some index components changed

components/LogosWithText.vue

@@ -0,0 +1,91 @@
+<template>
+  <section :id="id" class="iniciativa-section">
+    <div class="iniciativa-header">
+      <h3>Una iniciativa colectiva</h3>
+      <p>
+        kit-ECO.social es posible gracias al trabajo conjunto de organizaciones
+        que apuestan por una economía social transformadora.
+      </p>
+    </div>
+
+    <ul class="iniciativa-logos">
+      <li>
+        <img 
+          src="/assets/img/logo-enreda.png"
+          alt="Logo de Enreda"
+        />
+      </li>
+      <li>
+        <img 
+          src="/assets/img/logo-nortes.png"
+          alt="Logo de Nortes"
+        />
+      </li>
+      <li>
+        <img 
+          src="/assets/img/logo-ecored.png"
+          alt="Logo de Ecored"
+        />
+      </li>
+    </ul>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+.iniciativa-section {
+  display: flex;
+  flex-direction: column;
+  gap: 3rem; // gap-12
+  margin-bottom: 2rem; // mb-8
+  padding: 2rem 1rem 4rem; // pt-8 px-4 pb-16
+  max-width: 48rem; // max-w-3xl
+  margin-left: auto;
+  margin-right: auto;
+
+  .iniciativa-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+
+    h3 {
+      font-size: $h3;
+      font-weight: $bold;
+      margin-bottom: 1.5rem; // mb-6
+    }
+
+    p {
+      font-size: 1.125rem; // text-lg
+      text-align: center;
+    }
+  }
+
+  .iniciativa-logos {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: 2rem; // gap-8
+    list-style: none;
+    padding: 0;
+
+    li {
+      grid-column: span 12;
+      height: 5rem; // h-20
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      @media (min-width: 768px) {
+        grid-column: span 4;
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        filter: grayscale(100%);
+      }
+    }
+  }
+}
+</style>