what-is and tools sections

components/CardTool.vue

@@ -0,0 +1,65 @@
+<template>
+  <NuxtLink :to="`/${langcode}/${link}`">
+    <div
+      class="flex flex-col min-h-21.8 min-w-80 max-w-80 gap-4 p-8 rounded-3xl shadow-tool-card hover:border-4 border-white transition-all duration-300 ease-in-out"
+      :class="{
+        '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',
+        'bg-aula-base hover:bg-linear-to-t hover:from-aula-base hover:to-aula-extra-light': color === 'aula',
+        'bg-certifica-base hover:bg-linear-to-t hover:from-certifica-base hover:to-certifica-extra-light': color === 'certifica',
+        'bg-foro-base hover:bg-linear-to-t hover:from-foro-base hover:to-foro-extra-light': color === 'foro',
+        'bg-ods-base hover:bg-linear-to-t hover:from-ods-base hover:to-ods-extra-light': color === 'ods',
+      }"
+    >
+      <div class="col-span-4 h-10.2 w-full">
+        <img 
+          v-if="image"
+          :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">
+        <p class="text-5.5 font-semibold uppercase">{{ title }}</p>
+        <p class="text-center text-base">{{ description }}</p>
+      </div>
+    </div>
+  </NuxtLink>
+</template>
+
+<script>
+export default {
+  props: {
+    color: {
+      type: String,
+      default: "consumo",
+    },
+    title: {
+        type: String,
+        default: ''
+    },
+    description: {
+        type: String,
+        default: ''
+    },
+    image: {
+        type: Object,
+        default: () => ({
+          src: "",
+          alt: "",
+        }),
+    },
+    link: {
+        type: String,
+        default: null
+    },
+  },
+  computed: {
+    langcode() {
+      return this.$store.getters.langcode;
+    },
+  },
+}
+</script>

components/HeroHome.vue

@@ -1,7 +1,7 @@
 <template>
   <section
     :id="id"
-    class="relative flex flex-col p-4 md:p-12 items-center justify-center gap-4 md:gap-8 text-center h-dvh lg:h-[85dvh] bg-gradient-conic-hero rounded-3xl">
+    class="relative flex flex-col p-4 md:p-12 mb-8 items-center justify-center gap-4 md:gap-8 text-center h-dvh lg:h-[85dvh] bg-gradient-conic-hero rounded-3xl">
 
     <img 
       v-if="shapes.shape_1" 

components/SectionWithCards.vue

@@ -0,0 +1,47 @@
+<template>
+  <section 
+  :id="id"
+  class="flex flex-col gap-8 lg:gap-21 rounded-3xl mb-8 px-4 pt-12 pb-16 md:p-16 md:pb-24 bg-gradient-conic-2 ">
+    <div class="flex flex-col justify-center items-center w-full">
+      <h2 class="text-4xl font-bold mb-6">{{ title }}</h2>
+      <p class="mb-8 text-lg">{{ 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 md:col-span-6 lg:col-span-4">
+        <CardTool
+          :color="item.color"
+          :title="item.title"
+          :description="item.description"
+          :image="item.image"
+          :link="item.link"
+          class=""
+        />
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: String,
+      default: "",
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    description: {
+      type: String,
+      default: "",
+    },
+     cards: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  
+};
+</script>

components/WhatIs.vue

@@ -0,0 +1,70 @@
+<template>
+  <section 
+  :id="id"
+  class="flex flex-col-reverse lg:flex-row gap-8 lg:gap-21 rounded-3xl mb-8 px-4 py-12 md:p-12 lg:p-16 bg-gradient-conic-2 ">
+    <div class="flex flex-col lg:w-3/5">
+      <div class="flex flex-col">
+        <h2 class="text-4xl font-bold mb-6">{{ title }}</h2>
+        <p class="mb-8 text-lg" v-html="description"></p>
+      </div>
+
+      <ul  class="flex flex-col gap-4 mb-8">
+        <li v-for="(item, index) in items" :key="`item-${index}`" class="flex items-center gap-4">
+          <img v-if="item.icon" :src="`/svg/${item.icon}`" :alt="`icon-${item.icon}`" class="w-8 h-8" />
+          <p v-html="item.content"></p>
+        </li>
+      </ul>
+      <NuxtLink v-if="button" :to="button.link" class=" w-fit">
+          <ButtonCTA :color="button.color" class="uppercase">
+            {{ button.label }}
+          </ButtonCTA>
+        </NuxtLink>
+    </div>
+    <div class="lg:w-2/5 h-full">
+      <img 
+        v-if="image"
+        :src="`/img/${image.src}`"
+        :alt="image.alt"
+        class="w-full h-full object-cover"
+      />
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: String,
+      default: "",
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    description: {
+      type: String,
+      default: "",
+    },
+    image: {
+      type: Object,
+      default: () => ({
+        src: "",
+        alt: "",
+      }),
+    },
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    button: {
+      type: Object,
+      default: () => ({
+        label: "",
+        link: "",
+      }),
+    },
+  },
+  
+};
+</script>