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,