From 41d2d8a47b53a8cf9f2c15c4059a1cf962b2e27b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <mherrezuelo94@hotmail.com>
Date: Thu, 31 Jul 2025 13:14:13 +0200
Subject: [PATCH] section with transparent cards

---
 assets/css/main.css                  |   2 ++
 components/CardTool.vue              |  48 ++++++++++++++++++---------
 components/HeroPages.vue             |   2 +-
 components/NavBar.vue                |   6 ++++
 components/SectionWithCards.vue      |  35 +++++++++++++++----
 components/TextWithImage.vue         |   6 ++--
 data/es/consumo-cuidado.json         |  39 ++++++++++++++++++++++
 data/es/index.json                   |   1 +
 pages/[langcode]/consumo-cuidado.vue |   4 ++-
 public/img/handshake.png             | Bin 0 -> 2497 bytes
 public/img/messages-square.png       | Bin 0 -> 1022 bytes
 public/img/waypoints.png             | Bin 0 -> 1464 bytes
 12 files changed, 117 insertions(+), 26 deletions(-)
 create mode 100644 public/img/handshake.png
 create mode 100644 public/img/messages-square.png
 create mode 100644 public/img/waypoints.png

diff --git a/assets/css/main.css b/assets/css/main.css
index 87c9c88..1a3fddd 100644
--- a/assets/css/main.css
+++ b/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 */
diff --git a/components/CardTool.vue b/components/CardTool.vue
index 7343057..2db218a 100644
--- a/components/CardTool.vue
+++ b/components/CardTool.vue
@@ -1,17 +1,19 @@
 <template>
-  <NuxtLink :to="`/${langcode}/${link}`">
-    <div
-      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="{
-        'bg-consumo-base hover:bg-linear-to-t hover:from-consumo-base hover:to-consumo-extra-light': color === 'consumo',
-        'bg-iguales-base hover:bg-linear-to-t hover:from-iguales-base hover:to-iguales-extra-light': color === 'iguales',
-        'bg-aula-base hover:bg-linear-to-t hover:from-aula-base hover:to-aula-extra-light': color === 'aula',
-        'bg-certifica-base hover:bg-linear-to-t hover:from-certifica-base hover:to-certifica-extra-light': color === 'certifica',
-        '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">
+  <div
+    class="flex flex-col gap-4 rounded-3xl"
+    :class="{
+      'border-2 border-white min-h-20.3': color === 'transparent',
+      '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-consumo-base hover:bg-linear-to-t hover:from-consumo-base hover:to-consumo-extra-light': color === 'consumo',
+      'bg-iguales-base hover:bg-linear-to-t hover:from-iguales-base hover:to-iguales-extra-light': color === 'iguales',
+      'bg-aula-base hover:bg-linear-to-t hover:from-aula-base hover:to-aula-extra-light': color === 'aula',
+      'bg-certifica-base hover:bg-linear-to-t hover:from-certifica-base hover:to-certifica-extra-light': color === 'certifica',
+      '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',
+    }"
+  >
+    <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>
diff --git a/components/HeroPages.vue b/components/HeroPages.vue
index e064bc3..3c5fb7f 100644
--- a/components/HeroPages.vue
+++ b/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',
diff --git a/components/NavBar.vue b/components/NavBar.vue
index 1727ed8..88166a1 100644
--- a/components/NavBar.vue
+++ b/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;
diff --git a/components/SectionWithCards.vue b/components/SectionWithCards.vue
index 5998c57..b5f3a7a 100644
--- a/components/SectionWithCards.vue
+++ b/components/SectionWithCards.vue
@@ -1,15 +1,30 @@
 <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>
-      <p class="mb-8 text-lg">{{ description }}</p>
+      <h2 class="font-bold mb-6">{{ title }}</h2>
+      <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">
-        <CardTool
+      <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"
           :description="item.description"
@@ -37,7 +52,15 @@ export default {
       type: String,
       default: "",
     },
-     cards: {
+    display: {
+      type: String,
+      default: "col-3",
+    },
+    bgColor: {
+      type: String,
+      default: "",
+    },
+    cards: {
       type: Array,
       default: () => [],
     },
diff --git a/components/TextWithImage.vue b/components/TextWithImage.vue
index 6c897f1..4cfeadb 100644
--- a/components/TextWithImage.vue
+++ b/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-start justify-between': image.display === 'normal' && position === 'right'
+        'items-center lg:items-start gap-8': image.display === 'normal' && position === 'left',
+        '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}`"
diff --git a/data/es/consumo-cuidado.json b/data/es/consumo-cuidado.json
index 80b6ad1..aa77923 100644
--- a/data/es/consumo-cuidado.json
+++ b/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"
+          }
+        }
+      ]
+    }
   }
 ]
\ No newline at end of file
diff --git a/data/es/index.json b/data/es/index.json
index 4f71d7a..1df6358 100644
--- a/data/es/index.json
+++ b/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",
diff --git a/pages/[langcode]/consumo-cuidado.vue b/pages/[langcode]/consumo-cuidado.vue
index a61a029..f7220a6 100644
--- a/pages/[langcode]/consumo-cuidado.vue
+++ b/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 {
diff --git a/public/img/handshake.png b/public/img/handshake.png
new file mode 100644
index 0000000000000000000000000000000000000000..45e75cda81406e5c6afb8a01628c08239ddc220d
GIT binary patch
literal 2497
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
LNkvXXu0mjfB(s_I

literal 0
HcmV?d00001

diff --git a/public/img/messages-square.png b/public/img/messages-square.png
new file mode 100644
index 0000000000000000000000000000000000000000..143d35a84ac39ef269c17d4203ecfd14324d6f8a
GIT binary patch
literal 1022
zcmeAS@N?(olHy`uVBq!ia0vp^sUXb31|&mjbk74R&H|6fVg?3oVGw3ym^DWND9BhG
z<nF|<?wrg^AcrO0(btiIVPik{pF~y$2Ik40E{-7;jBn@m7hX0HIc9Ic_JX6IGlBUG
zi>|Oq4ukNOy9=a`_%Qeg<U7n<ki>L~#dX!>)iU>0x2fLr|Mq=%^>q8`aZCOzQa@f*
z#OTDK*dpK*c2>LR@u6c=d&__Sj;h%5@wQv;;RMx=-nqTYd6IVLzhAU-+eh(A4$GG8
z_u?sT_rH`TFSe;#x9y{_@2Lw--b<&ObuE6r|JIJfO#)l?*Ydw8i;`|yHn(m!w+_et
z;&=O&b^aAuH+TPsOW$P0nye3f`n*{|pXF`kh67AD7S)<eR#yG=-kH1phxm!fOmDx;
zw*BWaQ#&v3<SO~+e4X>z_JkQnetm4(VWr`!IAxK5S0Kkyjg}x0Crz$}BCP>kPPm2h
z9exEZi2vBJT4L{g_erlVs*3noIQ<TE2%KoS)I@|s+hqSihHDe{-K+lo-mvf1vGgy$
zukD_+jNkoz^t=3g!A8{{k?o?7F0{+f;B(x5!sgVro;yo9ZpoivyBxeQwqG_zVgBwZ
z?`P~!`MTrReiwzEUWM{U_}+fYH;`w&wfLz@@RYT23A=1{^NLC*zj^k;_AX0wQrw>_
zU&R=uQ=Q$r7Fgf(l~pZyu>8{MV11uT51ovljs&?Z6XhjseE%xH`=|AV1hM2Q_RmN=
zyy~~?C-$=o^Lu?f6<sfgCFRr{>C!V3@OrcP2oo2l+A<NwRu{!-AX2#vM5=~#H8?F2
zR&sSv^pwyBk|!mUL2OAa5L*%?KH0#9tJUYog^7<07ED;eGdGxLnfN2W;@wTnyeEwR
zC0%5G7Ad{c`QP;IMIkSCn$+ekk$7LWZpu@A4$iOxmYRM?bS>I_PVIEnW46t{v$`=_
z5fmFI9lPQSCZ0B(*n9%W(yZ?kozN_@KWLxBz5St86TN?}+Iu`&$ENqG(Z$`o*6ll8
zFNAF57W2{z;+a*yz0l!8N8#dS3^PUR!>`FaJoi5~Sw^%Z=d?#t!auKnhDlm3R*EYH
zo73u#t4rTEs4LFo5Ixo}AtdNn-ohssoOn<<RgY&^`e|(y3BxHyJk6X(0!|h12z4)<
zQYfJ!;;i}D&_ksy=#YVj0+2N9&}j>Llpqkuv-HSeg-H@|>kRbRdS}SSO%u}+5arml
zJmt^v*}?T^zD#9n&eIb9(h_tj(O}c2DM6Q#4or&Q%5kgMi*XT?<L0%>r;gfkf-(<B
cq``m2Nj(qiA2)XL1G6iGr>mdKI;Vst0Mf9kmjD0&

literal 0
HcmV?d00001

diff --git a/public/img/waypoints.png b/public/img/waypoints.png
new file mode 100644
index 0000000000000000000000000000000000000000..bb5ec65d99b1c81abc0001271b294804da3e7118
GIT binary patch
literal 1464
zcmV;p1xNacP)<h;3K|Lk000e1NJLTq003nG003nO1^@s6RD3PZ00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1x-mrK~#7F?VaIq
z+%^z}Uo!b0bs%(*D*>q>>L5r3b_d6F;0}%*D5>Bs6<DdjrwZf_67G;3EkN>)1i&-s
zd*95?&=f(Fc)$u+U@3qQLI@#*kh|swY?p_|c8%G_9@Y8R#!j7)8zExs8+&W)zY8Wm
zKQv}QR^<b(ixJwF#y(<0Y{`8|@2G-v=f?hS>_wdum-ZWmJw(d>36c#FBy9cmN|~qb
zI$drLk_899Vr#U&SLRX&<)1*3(XIU%an$g8*%DDnfP-I|262c8dVo-YMDrQ%73q-1
zM|H0wNE8PC?}Aj96ZV#3UD%H(7o(0(jeSKLQeF?8Eed5TqMVV3S9Q#uLgsUCqWr9m
zQ{CZelq|{`{(q;Aixs7G^k~T<jUD_5GKr){`fR@Epzd`5iN?a8t60S0g8LYdBx?9>
zXScBY4!#>?FUf$xa7EG0EE_J0rNqxjhfMHv{7ajhcNk6rAG-5L4A)=`ND^a$go{@C
z{Ff^~Hy}xj3F5l*73QzczjfDh{UnhoK{N(!C_Z#iIy7H_Vq{^CAY&M1BqOnckd>ey
zg+W0IgMt(W1t|;)a)BIsiKT)q-sc2gJ3C#tUgi-xu=oesz~k1~!GDjlvYXSVBTP-+
z`q}gW{@mev=ph#EdtKW7-^b-{#uKJvOj9N=vBS0nkp?C2vE;p_o*Y(YkMSOH>>gO`
z8S_MQ*bWBc?<D6A%8nR+*F9Du6hy?3_|sH;NqR<&?^6(Icy{9Ye(4}AlU<k(!GBO=
zez4EM_rGro%6@C)Id$dAv)h?v4O;PZy=BWNGr@z^SWdVkTVWe$?+~*TE!0?{K_1}y
z&{*`Y_bv1mgFG%b>}?e?pj&uq7Ss{j=`FeueMTA<85^WUo?g=9)cuYq8{L2$($T%e
zB7sWX=o8X;fbSAYMn7i`SNjPwy~Izrj8VrgNJqjiXLaAwg%Qrkv+r2f-{YkVnF>)L
z6s16}xv#T2jv1qeh;KIP-z9(XqIazZ?Q^HPFkOGINWg-lui{2uVMeV*8ahgxE#$Bg
z74kKpC;0P}WGeW*C3bk|;14qm$|h`(DUC??k^?djK3vRAw;KDZkRJOwz;DzBnb0AJ
zK6GtnmbDnBBWx*397ed^g0fnWRa|z3;R27tbOl=sL)Teb$_@A(<Lg0E*;Bnn>O(3&
zTrRFKlcht_3ge44C-}o>i(%!<&ws@?+EfsM2vT3U=8Sfx-Vc`zTCu{0Dj$EVup$m|
zYxG-jSwh%DWYl<RC3VWAo>C+0i*T6Evg-Y>h+(lU#stv~%AghJ(r%U`5>hd8%%}~9
zX$UXK6TrMRq05qY5SKeOo405yUhjE3fgeuD#<d<oZVUw}3<^>h6r?aHNMTTr8(=U$
zJD7s3#I;lmIWO@i6O^MME6|Iv<S#?)yK)p{1q{-@%|bykV=$~(aZwJ_UopD$^&<+B
zh`}%&VeVp)!_d_kkYo<<1zEZz%P-?)#=vjo4sqDvJ{BYz-Ahti_%qmBvY_2g%uW)G
zh3^JQ1Qz~~HV1mZkSg+Ol)S-P4_p659{y3s6eR*J%3Zk|ra}}*$)f1Z2L^d~RL5tK
z#pwLV94X#mzNG<);)wT3Ox=g;;K#p6Bo*@X76X4c>_DOkzt#{t6W6o(TyvhgM)u<B
z-vvvA8B0fSAX%s|T(r8jaoS?I22)`Jl$@O#Qel{eac=A{_%r@r&<bXPYgbQ4xL0HZ
zHnrqCWlI*tNF)Z=QxSSGDr|7+cT4VT4BOeGIwv0vIKj`bB7_h^2qA=QhyMZW*%ca4
S=)4#J0000<MNUMnLSTZ6Et{hN

literal 0
HcmV?d00001