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>