text-with-image and logo sections

assets/css/main.css

@@ -48,6 +48,7 @@
   /* Spacing */
   --spacing-32: 2rem; /* 32px */
   --spacing-10.2: 10.25rem; /* 164px */
+  --spacing-20.1: 20.168rem; /* 322px */
   --spacing-21.8: 21.875rem; /* 350px */
   --spacing-25.6: 25.688rem; /* 411px */
   --spacing-44.8: 44.813rem; /* 717px */
@@ -61,7 +62,7 @@
 /* Mobile < 640px; */
 
 /* Super desktop */
-@media screen and (min-width: 1920px) {
+@media screen and (min-width: 1023px) {
   :root {
     --default-font-size: var(--font-size-lg); /* 18px */
     --layout-padding-x: 2rem; /* 32px */
@@ -179,6 +180,46 @@ html {
   scroll-behavior: smooth;
 }
 
+h1 {
+  font-size: var(--font-size-H1);
+}
+
+h2 {
+  font-size: var(--font-size-H2);
+}
+
+h3 {
+  font-size: var(--font-size-H3);
+}
+
+h4 {
+  font-size: var(--font-size-H4);
+}
+
+h5 {
+  font-size: var(--font-size-H5);
+}
+
+.text-2xl {
+  font-size: var(--font-size-2xl);
+}
+.text-lg {
+  font-size: var(--font-size-lg);
+}
+.text-base {
+  font-size: var(--font-size-base);
+}
+.text-sm {
+  font-size: var(--font-size-sm);
+}
+.text-xs {
+  font-size: var(--font-size-xs);
+}
+
+.text-button-base {
+  font-size: var(--font-size-button-base);
+}
+
 .body-overflow-hidden {
   overflow: hidden;
 }

components/LogosWithText.vue

@@ -0,0 +1,47 @@
+<template>
+  <section 
+  :id="id"
+  class="flex flex-col gap-12 mb-8 px-4 pt-8 pb-16 max-w-3xl mx-auto">
+    <div class="flex flex-col justify-center items-center w-full">
+      <h2 class=" font-bold mb-6">{{ title }}</h2>
+      <p class="text-lg text-center">{{ description }}</p>
+    </div>
+
+    <ul  class="grid grid-cols-12 gap-8">
+      <li 
+        v-for="(item, index) in logos" :key="`logos-${id}-${index}`" 
+        class="col-span-12 md:col-span-4 h-20 flex justify-center items-center">
+        <img 
+          v-if="item"
+          :src="`/img/${item.src}`"
+          :alt="item.alt"
+          class="w-full h-full object-cover grayscale"
+        />
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: String,
+      default: "",
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    description: {
+      type: String,
+      default: "",
+    },
+     logos: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  
+};
+</script>

components/TextWithImage.vue

@@ -0,0 +1,56 @@
+<template>
+  <section class="rounded-3xl mb-8 px-4 py-12 md:p-12 lg:p-16 bg-gradient-conic-2">
+    <div class="flex flex-col lg:flex-row gap-x-12 gap-y-4 mx-auto container justify-center items-center"
+      :class="{
+        'items-center justify-center': position === 'left',
+        'flex-row-reverse items-center justify-center': position === 'right'
+      }">
+      <div class="h-20.1 w-20.1 rounded-full overflow-hidden border-2 border-white">
+        <img 
+        v-if="image"
+        :src="`/img/${image.src}`"
+        :alt="image.alt"
+        class="w-full h-full object-cover"
+      />
+      </div>
+      <div class="flex flex-col gap-4 w-full lg:w-2/3">
+        <h2 class="font-bold ">{{ title }}</h2>
+        <ul class="flex flex-col gap-6">
+          <li v-for="(paragraph, index) in paragraphs" :key="`paragraph-${id}-${index}`">
+            <p class="text-lg" v-html="paragraph"></p>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: String,
+      default: ""
+    },
+    title: {
+      type: String,
+      default: 'title'
+    },
+    paragraphs: {
+      type: Array,
+      default: () => ['description']
+    },
+    position: {
+      type: String,
+      default: 'left'
+    },
+    image: {
+      type: Object,
+      default: () => ({
+        src: '',
+        alt: ''
+      })
+    }
+  }
+}
+</script>

components/WhatIs.vue

@@ -11,7 +11,7 @@
       <ul  class="flex flex-col gap-4 mb-8">
         <li v-for="(item, index) in items" :key="`item-${index}`" class="flex items-center gap-4">
           <img v-if="item.icon" :src="`/svg/${item.icon}`" :alt="`icon-${item.icon}`" class="w-8 h-8" />
-          <p v-html="item.content"></p>
+          <p class="text-lg" v-html="item.content"></p>
         </li>
       </ul>
       <NuxtLink v-if="button" :to="`/${langcode}/${button.link}`" class=" w-fit">

data/es/index.json

@@ -125,5 +125,43 @@
         }
       ]
     }
+  },
+  {
+    "component": "TextWithImage",
+    "id": "home-impulsar-cambio",
+    "props": {
+      "title": "Impulsar el cambio, transformar en colectivo",
+      "paragraphs": [
+        "En <strong>kit-ECO.SOCIAL</strong> entendemos la sostenibilidad, la igualdad y la mejora continua como principios fundamentales para construir una economía social sólida, inclusiva y con futuro. Por eso, ponemos a disposición de las entidades <strong>herramientas accesibles y prácticas</strong> que promueven la transformación desde el trabajo diario, el compromiso colectivo y la cooperación en red.",
+        "Nuestro propósito es <strong>acompañar a quienes impulsan el cambio</strong>, ofreciendo recursos que refuercen su impacto y les permitan crecer de forma consciente y cuidada."
+      ],
+      "position": "left",
+      "image": {
+        "src": "hands.png",
+        "alt": "Puños unidos en un gesto de fuerza y unidad"
+      }
+    }
+  },
+  {
+    "component": "LogosWithText",
+    "id": "iniciativa-colectiva",
+    "props": {
+      "title": "Una iniciativa colectiva",
+      "description": "kit-ECO.social es posible gracias al trabajo conjunto de organizaciones que apuestan por una economía social transformadora.",
+      "logos": [
+        {
+          "src": "logo-enreda.png",
+          "alt": "Logo de Enreda Coop"
+        },
+        {
+          "src": "logo-nortes.png",
+          "alt": "Logo de Nortes"
+        },
+        {
+          "src": "logo-ecored.png",
+          "alt": "Logo de Ecored"
+        }
+      ]
+    }
   }
 ]

pages/[langcode]/index.vue

@@ -19,11 +19,16 @@ import { mapGetters, mapActions } from 'vuex';
 import HeroHome from '~/components/HeroHome.vue';
 import WhatIs from '../../components/WhatIs.vue';
 import SectionWithCards from '../../components/SectionWithCards.vue';
+import TextWithImage from '../../components/TextWithImage.vue';
+import LogosWithText from '../../components/LogosWithText.vue';
+
 export default {
   components: {
     HeroHome,
     WhatIs,
-    SectionWithCards
+    SectionWithCards,
+    TextWithImage,
+    LogosWithText
   },
   data() {
     return {