ods and foro pages

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
+    },
   },
   
 };