TextWithIconAndButton component

components/TextWithIconAndButton.vue

@@ -0,0 +1,75 @@
+<template>
+  <section
+    :id="id"
+    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-b from-consumo-light to-consumo-extra-light': bgColor === 'consumo',
+        'bg-iguales-base bg-linear-to-b from-iguales-light to-iguales-extra-light': bgColor === 'iguales',
+        'bg-aula-base bg-linear-to-b from-aula-light to-aula-extra-light': bgColor === 'aula',
+        'bg-certifica-base bg-linear-to-b from-certifica-light to-certifica-extra-light': bgColor === 'certifica',
+        'bg-foro-base bg-linear-to-b from-foro-light to-foro-extra-light': bgColor === 'foro',
+        'bg-ods-base bg-linear-to-b from-ods-light to-ods-extra-light': bgColor === 'ods',
+      }">
+    
+    <img
+      v-if="bgImage" 
+      :src="`/img/${bgImage.src}`" 
+      :alt="bgImage.alt" 
+      class="absolute left-0 top-10 w-full h-auto" >
+
+    <div class=" flex flex-col items-center z-10 gap-6">
+      <img v-if="icon" :src="`/svg/${icon}`" :alt="`icon-${icon}`" class="w-15 h-15" />
+      <h2 class="font-bold max-w-4xl">{{ title }}</h2>
+      <p class="text-2xl max-w-3xl" v-html="subtitle"></p>
+      <NuxtLink v-if="button" :to="button.link">
+        <ButtonCTA :color="button.color" class="uppercase mt-6">
+          {{ button.label }}
+        </ButtonCTA>
+      </NuxtLink>
+    </div>
+  </section>
+</template>
+
+<script>
+
+export default {
+  props: {
+    id: {
+      type: String,
+      default: "",
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    subtitle: {
+      type: String,
+      default: "",
+    },
+    bgColor: {
+      type: String,
+      default: "consumo",
+    },
+    icon: {
+      type: String,
+      default: "",
+    },
+    bgImage: {
+      type: Object,
+      default: () => ({
+        src: "",
+        alt: "",
+      }),
+    },
+    button: {
+      type: Object,
+      default: () => ({
+        label: "",
+        link: "",
+        color: "button",
+      }),
+    }
+  },
+  
+};
+</script>

components/TextWithImage.vue

@@ -44,6 +44,11 @@
             <p class="text-lg" v-html="paragraph"></p>
           </li>
         </ul>
+        <ul v-if="list" class="flex flex-col gap-4">
+          <li v-for="(item, index) in list" :key="`item-list-${id}-${index}`">
+            <p class="text-lg" v-html="item"></p>
+          </li>
+        </ul>
       </div>
     </div>
   </section>
@@ -62,7 +67,11 @@ export default {
     },
     paragraphs: {
       type: Array,
-      default: () => ['description']
+      default: () => []
+    },
+    list: {
+      type: Array,
+      default: () => []
     },
     position: {
       type: String,

data/es/consumo-cuidado.json

@@ -74,5 +74,46 @@
         }
       ]
     }
+  },
+  {
+    "component": "TextWithImage",
+    "id": "a-quien-va-dirigido",
+    "props": {
+      "title": "¿A quién va dirigido?",
+      "paragraphs": [
+        "Consumo Cuidado está pensado para quienes quieren transformar su forma de consumir y producir. Personas, entidades y redes que apuestan por la economía social como motor de cambio."
+      ],
+      "list": [
+        "<strong>Personas consumidoras</strong> que buscan productos y servicios alineados con el cuidado del entorno y la comunidad.",
+        "<strong>Entidades de economía social</strong> que quieren visibilizar su proyecto y vender sin perder autonomía ni asumir intermediarios.",
+        "<strong>Administraciones y redes territoriales</strong> que promueven el comercio justo, la digitalización local y la cooperación entre iniciativas."
+      ],
+      "position": "left",
+      "bgColor": "light",
+      "image": {
+        "src": "vendedor.png",
+        "alt": "Vendedor da muestras de manzanas",
+        "display": "normal"
+      }
+    }
+  },
+  {
+    "component": "TextWithIconAndButton",
+    "props": {
+      "id": "consumo-cuidado-cta",
+      "title": "Conecta con quienes producen con cuidado.",
+      "subtitle": "Descubre productos con valores y apoya una economía social viva.",
+      "bgColor": "consumo",
+      "icon": "tabler_seeding.svg",
+      "bgImage": {
+        "src": "hero-consumo-formas.png",
+        "alt": "Consumo Cuidado Imagenes Fondo"
+      },
+      "button": {
+        "label": "Entrar al Marketplace",
+        "link": "",
+        "color": "button"
+      }
+    }
   }
 ]

pages/[langcode]/consumo-cuidado.vue

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

public/svg/tabler_seeding.svg

@@ -0,0 +1,3 @@
+<svg width="61" height="60" viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.5 30.0088H23C19.0218 30.0088 15.2064 28.4284 12.3934 25.6154C9.58035 22.8023 8 18.987 8 15.0088V10.0088H15.5C19.4782 10.0088 23.2936 11.5891 26.1066 14.4022C28.9196 17.2152 30.5 21.0305 30.5 25.0088V50.0088M30.5 35.0088C30.5 31.0305 32.0804 27.2152 34.8934 24.4022C37.7064 21.5891 41.5218 20.0088 45.5 20.0088H53V22.5088C53 26.487 51.4196 30.3023 48.6066 33.1154C45.7936 35.9284 41.9782 37.5088 38 37.5088H30.5" stroke="#111111" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>