ods and foro pages

components/CardTool.vue

@@ -2,7 +2,7 @@
   <div
     class="flex flex-col gap-4 rounded-3xl"
     :class="{
-      'border-2 border-white min-h-20.3': color === 'transparent',
+      'border-4 border-white min-h-20.3': color === 'transparent' || color === 'number',
       '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',
@@ -22,6 +22,10 @@
         />
         <!-- <img v-else src="" alt="imagen-error"> -->
         <!-- TODO: Add a fallback image -->
+         <p 
+          v-if="index"
+          class="w-full h-full rounded-full text-2xl font-bold"
+        >{{ index }}</p>
       </div>
       <div class="flex flex-col gap-4 items-center">
         <p class="text-5.5 font-semibold uppercase">{{ title }}</p>
@@ -39,7 +43,7 @@
         <!-- <img v-else src="" alt="imagen-error"> -->
         <!-- TODO: Add a fallback image -->
       </div>
-      <div class="flex flex-col gap-4 items-center">
+      <div class="flex flex-col gap-4 items-center text-center">
         <p class="text-5.5 font-semibold uppercase">{{ title }}</p>
         <p class="text-center text-base" v-html="description"></p>
       </div>
@@ -69,6 +73,10 @@ export default {
           alt: "",
         }),
     },
+    index: {
+        type: String,
+        default: null
+    },
     link: {
         type: String,
         default: null

components/Quote.vue

@@ -1,29 +1,25 @@
 <template>
   <section
     :id="id"
-    class="flex p-8 md:p-12 mb-8 rounded-3xl h-69">
+    class="flex flex-col lg:flex-row gap-y-4 p-4 md:py-12 mb-8 rounded-3xl h-full lg:h-69">
+
     <div v-if="shapes.shape_1" class="h-38 w-1/4 flex items-start justify-center">
-      <img 
-      :src="`/img/${shapes.shape_1}`" 
-      alt="hero background shape right" 
-      class="h-full w-full object-contain" >
+      <img
+        :src="`/img/${shapes.shape_1}`"
+        alt="hero background shape right"
+        class="h-full w-full object-contain">
     </div>
 
     <div class="flex flex-col items-center justify-center gap-4 md:gap-8 w-full">
       <h2 
-        class="font-semibold italic"
+        class="font-semibold italic text-center"
         :class="{
-          'text-consumo-dark': textColor === 'consumo',
           'text-iguales-dark': textColor === 'iguales',
-          'text-aula-dark': textColor === 'aula',
-          'text-certifica-dark': textColor === 'certifica',
-          'text-foro-dark': textColor === 'foro',
-          'text-ods-dark': textColor === 'ods',
         }" v-html="content">
       </h2>
     </div>
     
-    <div v-if="shapes.shape_2" class="h-38 w-1/4 mt-auto">
+    <div v-if="shapes.shape_2" class="h-38 w-1/4 ml-auto lg:mt-auto">
       <img 
       :src="`/img/${shapes.shape_2}`" 
       alt="hero background shape right" 

components/SectionWithCards.vue

@@ -7,19 +7,24 @@
     '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-certifica-light to-background-light': bgColor === 'certifica',
+    'bg-linear-to-t from-foro-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">
+    <div 
+    :class="{
+      'flex flex-col justify-center items-center w-full': titlePosition === 'center',
+      'flex flex-col items-start w-full': titlePosition === 'left',
+    }">
       <h2 class="font-bold mb-6">{{ title }}</h2>
-      <p class="text-lg text-center" v-html="description"></p>
+      <p v-if="description" 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 lg:col-span-6': display === 'col-2',
           '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',
@@ -34,6 +39,14 @@
         />
       </li>
     </ul>
+    <div v-if="hasButton && buttonSection" class="flex flex-col justify-center items-center mt-8">
+      <h4 class="font-semibold uppercase">{{ buttonSection.title }}</h4>
+      <NuxtLink v-if="buttonSection?.button" :to="buttonSection?.button?.link">
+        <ButtonCTA :color="buttonSection?.button?.color" class="uppercase mt-6">
+          {{ buttonSection?.button?.label }}
+        </ButtonCTA>
+      </NuxtLink>
+    </div>
   </section>
 </template>
 
@@ -44,6 +57,10 @@ export default {
       type: String,
       default: "",
     },
+    titlePosition: {
+      type: String,
+      default: "center",
+    },
     title: {
       type: String,
       default: "",
@@ -64,6 +81,14 @@ export default {
       type: Array,
       default: () => [],
     },
+    hasButton: {
+      type: Boolean,
+      default: false,
+    },
+    buttonSection: {
+      type: Object,
+      default: null
+    },
   },
   
 };

components/TextWithImage.vue

@@ -6,20 +6,18 @@
       'bg-background-light': bgColor === 'light'
     }">
     <div 
-      class="flex flex-col lg:flex-row"
+      class="flex justify-between"
       :class="{
-        'lg:flex-row': position === 'left',
-        'lg:flex-row-reverse': position === 'right',
+        'flex-col lg:flex-row gap-4': position === 'left',
+        'flex-col lg:flex-row-reverse': position === 'right',
         'items-center gap-12': image.display === 'circle',
-        '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-fit lg:h-20.9 w-full lg:w-fit': image.display === 'normal'
+          'h-fit w-full lg:w-auto': image.display === 'normal'
         }">
         <img 
           :src="`/img/${image.src}`"
@@ -45,7 +43,12 @@
           </li>
         </ul>
         <ul v-if="list" class="flex flex-col gap-4">
-          <li v-for="(item, index) in list" :key="`item-list-${id}-${index}`">
+          <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>
@@ -73,6 +76,10 @@ export default {
       type: Array,
       default: () => []
     },
+    hasBullets: {
+      type: Boolean,
+      default: false
+    },
     position: {
       type: String,
       default: 'left'
@@ -91,10 +98,4 @@ export default {
     }
   }
 }
-</script>
-
-<style scoped>
-.custom-clip {
-  clip-path: polygon(0 10%, 100% 0%, 100% 90%, 0% 100%);
-}
-</style>
+</script>