nosotras page

components/CardCompany.vue

@@ -0,0 +1,46 @@
+<template>
+  <div
+    class="flex flex-col gap-4 rounded-3xl border-4 border-white min-h-64">
+    <div class="flex flex-col gap-4 p-8 items-center w-full">
+      <div v-if="image" class=" h-15 w-fit grayscale">
+        <img 
+          :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 text-center">
+        <p class="text-center text-base" v-html="description"></p>
+          <NuxtLink v-if="link" :to="link.url">
+            <p class="text-button hover:text-button-hover">{{ link.label }}</p>
+          </NuxtLink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    description: {
+        type: String,
+        default: ''
+    },
+    image: {
+        type: Object,
+        default: null,
+    },
+    link: {
+        type: String,
+        default: null
+    },
+  },
+  computed: {
+    langcode() {
+      return this.$store.getters.langcode;
+    },
+  },
+}
+</script>

components/HeroPages.vue

@@ -3,6 +3,7 @@
     :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 overflow-hidden rounded-3xl"
     :class="{
+        'bg-gradient-conic-hero': bgColor === 'gradient',
         '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',
         'bg-aula-base bg-linear-to-t from-aula-base to-aula-extra-light': bgColor === 'aula',

components/SectionWithCards.vue

@@ -4,6 +4,7 @@
   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-gradient-conic-green': bgColor === 'gradient-conic-green',
     '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',
@@ -12,6 +13,7 @@
     'bg-linear-to-t from-ods-extra-light to-background-light': bgColor === 'ods',
   }">
     <div 
+    class="mx-auto max-w-2xl"
     :class="{
       'flex flex-col justify-center items-center w-full': titlePosition === 'center',
       'flex flex-col items-start w-full': titlePosition === 'left',
@@ -45,6 +47,12 @@
           :title="item.title"
           :description="item.description"
         />
+        <CardCompany
+          v-if="cardsType === 'company'"
+          :description="item.description"
+          :image="item.image"
+          :link="item.link"
+        />
       </li>
     </ul>
     <div v-if="hasButton && buttonSection" class="flex flex-col justify-center items-center mt-8">

components/TextWithImage.vue

@@ -9,25 +9,37 @@
       class="flex justify-between"
       :class="{
         'flex-col lg:flex-row gap-4': position === 'left',
-        'flex-col lg:flex-row-reverse': position === 'right',
-        'items-center gap-12': image.display === 'circle',
+        'flex-col lg:flex-row-reverse gap-4': position === 'right' && !imageCTA,
+        'flex-col-reverse lg:flex-row-reverse gap-4': position === 'right' && imageCTA,
+        'items-center gap-12': image.display === 'circle'
       }">
 
       <div 
-        v-if="image"
-        :class="{
-          'h-20.1 w-20.1 rounded-full overflow-hidden border-4 border-white': image.display === 'circle',
-          'h-fit w-full lg:w-auto': image.display === 'normal'
+      :class="{
+        'flex flex-col gap-4': imageCTA
         }">
-        <img 
-          :src="`/img/${image.src}`"
-          :alt="image.alt"
-          class="w-full h-full"
+        <div 
+          v-if="image"
           :class="{
-            'object-cover': image.display === 'circle',
-            'object-contain': image.display === 'normal'
-          }"
-        />
+            'h-20.1 w-20.1 rounded-full overflow-hidden border-4 border-white': image.display === 'circle',
+            'h-fit w-full lg:w-auto': image.display === 'normal'
+          }">
+          <img 
+            :src="`/img/${image.src}`"
+            :alt="image.alt"
+            class="w-full h-full"
+            :class="{
+              'object-cover': image.display === 'circle',
+              'object-contain': image.display === 'normal'
+            }"
+          />
+        </div>
+        <div v-if="imageCTA" class="flex flex-col items-end">
+          <p v-if="imageCTA.description" class="text-lg mt-2">{{ imageCTA.description }}</p>
+          <NuxtLink v-if="imageCTA.button" :to="imageCTA.button.url">
+            <ButtonCTA size="md" class="uppercase mt-4">{{ imageCTA.button.label }}</ButtonCTA>
+          </NuxtLink>
+        </div>
       </div>
 
       <div 
@@ -42,16 +54,20 @@
             <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}`"
-            :class="{
-              'list-disc ml-6': hasBullets,
-            }">
-            <p class="text-lg" v-html="item"></p>
-          </li>
-        </ul>
+        <div v-for="(list, index) in lists" :key="`list-${index}-${index}`" class="">
+          <p v-if="list.description" class="text-lg mb-4">{{ list.description }}</p>
+          <ul v-if="list.items" class="flex flex-col gap-4">
+            <li
+              v-for="(item, index) in list.items" 
+              :key="`item-list-${id}-${index}`"
+              :class="{
+                'list-disc ml-6': hasBullets,
+              }">
+              <p class="text-lg" v-html="item"></p>
+            </li>
+          </ul>
+        </div>
+        <p class="text-lg" v-html="finalParagraph"></p>
       </div>
     </div>
   </section>
@@ -72,10 +88,14 @@ export default {
       type: Array,
       default: () => []
     },
-    list: {
+    lists: {
       type: Array,
       default: () => []
     },
+    finalParagraph: {
+      type: String,
+      default: ''
+    },
     hasBullets: {
       type: Boolean,
       default: false
@@ -90,11 +110,11 @@ export default {
     },
     image: {
       type: Object,
-      default: () => ({
-        src: '',
-        alt: '',
-        display: ''
-      })
+      default: null
+    },
+    imageCTA: {
+      type: Object,
+      default: null
     }
   }
 }