section with transparent cards

assets/css/main.css

@@ -49,8 +49,10 @@
   --spacing-32: 2rem; /* 32px */
   --spacing-10.2: 10.25rem; /* 164px */
   --spacing-20.1: 20.168rem; /* 322px */
+  --spacing-20.3: 20.313rem; /* 326px */
   --spacing-20.9: 20.938rem; /* 335px */
   --spacing-21.8: 21.875rem; /* 350px */
+  --spacing-22.3: 22.313rem; /* 393px */
   --spacing-25.6: 25.688rem; /* 411px */
   --spacing-124.2: 31.063rem; /* 497px */
   --spacing-44.8: 44.813rem; /* 717px */

components/CardTool.vue

@@ -1,17 +1,19 @@
 <template>
-  <NuxtLink :to="`/${langcode}/${link}`">
+  <div
-    <div
+    class="flex flex-col gap-4 rounded-3xl"
-      class="flex flex-col min-h-21.8 min-w-80 max-w-80 gap-4 p-8 rounded-3xl shadow-tool-card hover:border-4 border-white transition-all duration-300 ease-in-out"
+    :class="{
-      :class="{
+      'border-2 border-white min-h-20.3': color === 'transparent',
-        'bg-consumo-base hover:bg-linear-to-t hover:from-consumo-base hover:to-consumo-extra-light': color === 'consumo',
+      'shadow-tool-card hover:border-4 border-white transition-all duration-300 ease-in-out min-h-21.8 min-w-80 max-w-80': color !== 'transparent',
-        'bg-iguales-base hover:bg-linear-to-t hover:from-iguales-base hover:to-iguales-extra-light': color === 'iguales',
+      'bg-consumo-base hover:bg-linear-to-t hover:from-consumo-base hover:to-consumo-extra-light': color === 'consumo',
-        'bg-aula-base hover:bg-linear-to-t hover:from-aula-base hover:to-aula-extra-light': color === 'aula',
+      'bg-iguales-base hover:bg-linear-to-t hover:from-iguales-base hover:to-iguales-extra-light': color === 'iguales',
-        'bg-certifica-base hover:bg-linear-to-t hover:from-certifica-base hover:to-certifica-extra-light': color === 'certifica',
+      'bg-aula-base hover:bg-linear-to-t hover:from-aula-base hover:to-aula-extra-light': color === 'aula',
-        'bg-foro-base hover:bg-linear-to-t hover:from-foro-base hover:to-foro-extra-light': color === 'foro',
+      'bg-certifica-base hover:bg-linear-to-t hover:from-certifica-base hover:to-certifica-extra-light': color === 'certifica',
-        'bg-ods-base hover:bg-linear-to-t hover:from-ods-base hover:to-ods-extra-light': color === 'ods',
+      'bg-foro-base hover:bg-linear-to-t hover:from-foro-base hover:to-foro-extra-light': color === 'foro',
-      }"
+      'bg-ods-base hover:bg-linear-to-t hover:from-ods-base hover:to-ods-extra-light': color === 'ods',
-    >
+    }"
-      <div class="col-span-4 h-10.2 w-full">
+  >
+    <NuxtLink v-if="link" :to="`/${langcode}/${link}`" class="p-8">
+      <div class="h-10.2 w-full">
         <img 
           v-if="image"
           :src="`/img/${image.src}`"
@@ -23,10 +25,26 @@
       </div>
       <div class="flex flex-col gap-4 items-center">
         <p class="text-5.5 font-semibold uppercase">{{ title }}</p>
-        <p class="text-center text-base">{{ description }}</p>
+        <p class="text-center text-base" v-html="description"></p>
+      </div>
+    </NuxtLink>
+    <div v-if="!link" class="flex flex-col gap-4 p-8 items-center">
+      <div class="h-25 w-25">
+        <img 
+          v-if="image"
+          :src="`/img/${image.src}`"
+          :alt="image.alt"
+          class="w-full h-full object-cover"
+        />
+        <!-- <img v-else src="" alt="imagen-error"> -->
+        <!-- TODO: Add a fallback image -->
+      </div>
+      <div class="flex flex-col gap-4 items-center">
+        <p class="text-5.5 font-semibold uppercase">{{ title }}</p>
+        <p class="text-center text-base" v-html="description"></p>
       </div>
     </div>
-  </NuxtLink>
+  </div>
 </template>
 
 <script>

components/HeroPages.vue

@@ -1,7 +1,7 @@
 <template>
   <section
     :id="id"
-    class="relative flex flex-col p-4 md:p-12 mb-8 items-center justify-center gap-4 md:gap-8 text-center  rounded-3xl"
+    class="relative flex flex-col p-8 md:p-12 mb-8 items-center justify-center gap-4 md:gap-8 text-center  rounded-3xl"
     :class="{
         'bg-consumo-base bg-linear-to-t from-consumo-base to-consumo-extra-light': bgColor === 'consumo',
         'bg-iguales-base bg-linear-to-t from-iguales-base to-iguales-extra-light': bgColor === 'iguales',

components/NavBar.vue

@@ -99,6 +99,12 @@ export default {
       menuIsOpen: false,
     };
   },
+  watch: {
+    '$route': function() {
+      this.dropdownOpen = false; // Close dropdown on language change
+      this.menuIsOpen = false; // Close mobile menu on language change
+    }
+  },
   computed: {
     langcode() {
       return this.$store.getters.langcode;

components/SectionWithCards.vue

@@ -1,14 +1,29 @@
 <template>
   <section 
   :id="id"
-  class="flex flex-col gap-8 lg:gap-21 rounded-3xl mb-8 px-4 pt-12 pb-16 md:p-16 md:pb-24 bg-gradient-conic-cards ">
+  class="flex flex-col gap-8  rounded-3xl mb-8 px-4 pt-12 pb-16 md:p-16 md:pb-24"
+  :class="{
+    'bg-gradient-conic-cards': bgColor === 'gradient-conic',
+    'bg-linear-to-t from-consumo-extra-light to-background-light': bgColor === 'consumo',
+    'bg-linear-to-t from-iguales-extra-light to-background-light': bgColor === 'iguales',
+    'bg-linear-to-t from-aula-extra-light to-background-light': bgColor === 'aula',
+    'bg-linear-to-t from-certifica-extra-light to-background-light': bgColor === 'certifica',
+    'bg-linear-to-t from-foro-extra-light to-background-light': bgColor === 'foro',
+    'bg-linear-to-t from-ods-extra-light to-background-light': bgColor === 'ods',
+  }">
     <div class="flex flex-col justify-center items-center w-full">
-      <h2 class="text-4xl font-bold mb-6">{{ title }}</h2>
+      <h2 class="font-bold mb-6">{{ title }}</h2>
-      <p class="mb-8 text-lg">{{ description }}</p>
+      <p class="text-lg text-center" v-html="description"></p>
     </div>
 
     <ul  class="grid grid-cols-12 gap-8 mx-auto">
-      <li v-for="(item, index) in cards" :key="`cards-${id}-${index}`" class="col-span-12 md:col-span-6 lg:col-span-4">
+      <li 
+        v-for="(item, index) in cards" :key="`cards-${id}-${index}`" 
+        :class="{
+          'col-span-12 md:col-span-6 lg:col-span-4': display === 'col-3',
+          'col-span-12 lg:col-span-4': display === 'col-3-transparent',
+          'col-span-12 md:col-span-6 lg:col-span-3': display === 'col-4',
+        }">
         <CardTool 
           :color="item.color"
           :title="item.title"
@@ -37,7 +52,15 @@ export default {
       type: String,
       default: "",
     },
-     cards: {
+    display: {
+      type: String,
+      default: "col-3",
+    },
+    bgColor: {
+      type: String,
+      default: "",
+    },
+    cards: {
       type: Array,
       default: () => [],
     },

components/TextWithImage.vue

@@ -11,15 +11,15 @@
         'lg:flex-row': position === 'left',
         'lg:flex-row-reverse': position === 'right',
         'items-center gap-12': image.display === 'circle',
-        'items-start': image.display === 'normal' && position === 'left',
+        'items-center lg:items-start gap-8': image.display === 'normal' && position === 'left',
-        'items-start justify-between': image.display === 'normal' && position === 'right'
+        'items-center lg:items-start justify-between gap-8': image.display === 'normal' && position === 'right'
       }">
 
       <div 
         v-if="image"
         :class="{
           'h-20.1 w-20.1 rounded-full overflow-hidden border-4 border-white': image.display === 'circle',
-          'h-20.9 w-fit': image.display === 'normal'
+          'h-fit lg:h-20.9 w-full lg:w-fit': image.display === 'normal'
         }">
         <img 
           :src="`/img/${image.src}`"

data/es/consumo-cuidado.json

@@ -35,5 +35,44 @@
         "display": "normal"
       }
     }
+  },
+  {
+    "component": "SectionWithCards",
+    "props": {
+      "id": "herramientas",
+      "title": "¿Cómo funciona?",
+      "description": "Consumo Cuidado no es una tienda online tradicional.</br>Es una plataforma tipo escaparate digital descentralizado.",
+      "display": "col-3-transparent",
+      "bgColor": "consumo",
+      "cards": [
+        {
+          "color": "transparent",
+          "title": "sin intermediación",
+          "description": "Cada entidad gestiona sus propios pedidos.</br>No hay plataformas externas que actúen como intermediarias ni controlen el proceso de venta.",
+          "image": {
+            "src": "handshake.png",
+            "alt": "Manos dándose la mano"
+          }
+        },
+        {
+          "color": "transparent",
+          "title": "descentralizado",
+          "description": "La plataforma visibiliza los productos y servicios, pero no gestiona ventas ni entregas: cada entidad mantiene el control de su proceso.",
+          "image": {
+            "src": "waypoints.png",
+            "alt": "Waypoint"
+          }
+        },
+        {
+          "color": "transparent",
+          "title": "RELACIÓN CERCANA",
+          "description": "Puedes contactar directamente con las entidades productoras.</br>Conoces quién está detrás de lo que compras.",
+          "image": {
+            "src": "messages-square.png",
+            "alt": "Mensaje"
+          }
+        }
+      ]
+    }
   }
 ]

data/es/index.json

@@ -62,6 +62,7 @@
       "title": "Explora las herramientas del kit-ECO.SOCIAL",
       "description": "Elige la herramienta que mejor se adapte a tu entidad. Todas son gratuitas, prácticas y pensadas para organizaciones de economía social.",
       "display": "col-3",
+      "bgColor": "gradient-conic",
       "cards": [
         {
           "color": "consumo",

pages/[langcode]/consumo-cuidado.vue

@@ -12,11 +12,13 @@
 <script>
 import HeroPages from '~/components/HeroPages.vue';
 import TextWithImage from '../../components/TextWithImage.vue';
+import SectionWithCards from '../../components/SectionWithCards.vue';
 
 export default {
   components: {
     HeroPages,
-    TextWithImage
+    TextWithImage,
+    SectionWithCards
   },
   data() {
     return {