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