ButtonCTA amended and urls updated

components/ButtonCTA.vue

@@ -1,7 +1,11 @@
 <template>
   <a
-    class="flex items-center justify-center cursor-pointer text-button-base"
+    :disabled="disabled" 
-    :disabled="disabled" :class="buttonClasses" :href="href" target="_blank" rel="noopener noreferrer" @click="handleClick">
+    :class="buttonClasses" 
+    :href="href ? href : to" 
+    :target="isExternal ? '_blank' : null" 
+    rel="noopener noreferrer" 
+    @click="handleClick">
     <slot/>
   </a>
 </template>
@@ -20,26 +24,50 @@ export default {
     size: {
       type: String,
       default: "md",
-    }
+    },
+    to: {
+      type: [String, Object, null],
+      default: null,
+    },
+    href: {
+      type: [ String, null],
+      default: null,
+    },
   },
   computed: {
+    isNuxtLink() {
+      return !!this.to;
+    },
+    isExternal() {
+      return !!this.href;
+    },
+    tag() {
+      if (this.isNuxtLink) return 'NuxtLink';
+      if (this.isExternal) return 'a';
+      return 'button';
+    },
     buttonClasses() {
       return {
-        "px-3.5 py-2 gap-x-2 text-sm": this.size === "sm",
+        "px-3.5 py-2 gap-x-2 text-sm cursor-pointer": this.size === "sm",
-        "px-5 py-2.5 gap-x-2 text-sm": this.size === "md",
+        "px-5 py-2.5 gap-x-2 text-sm cursor-pointer": this.size === "md",
-        "px-6 py-4 gap-x-1 text-base": this.size === "lg",
+        "px-6 py-4 gap-x-1 text-base cursor-pointer": this.size === "lg",
 
         "bg-button hover:bg-button-hover text-white rounded-xl shadow-button":
           this.color === "button" && !this.disabled,
         "cursor-not-allowed bg-gray-200 border border-gray-400 text-gray-400 stroke-current rounded-xl shadow-button":
           this.color === "button" && this.disabled,
 
+        "text-button hover:text-button-hover":
+          this.color === "only-link" && !this.disabled,
+        "cursor-not-allowed bg-gray-200 border border-gray-400 text-gray-400 stroke-current rounded-xl shadow-button":
+          this.color === "only-link" && this.disabled,
+
         "bg-aula-base hover:bg-button hover:text-white rounded-xl shadow-button":
           this.color === "aula-base" && !this.disabled,
         "cursor-not-allowed bg-gray-200 border border-gray-400 text-gray-400 stroke-current rounded-xl shadow-button":
           this.color === "aula-base" && this.disabled,
       };
-    }
+    },
   },
   methods: {
     handleClick($ev) {

components/CardCompany.vue

@@ -13,9 +13,9 @@
       </div>
       <div class="flex flex-col gap-4 items-center text-center">
         <p class="text-center text-base-custom" v-html="description"></p>
-          <NuxtLink v-if="link" :to="link.url">
+        <ButtonCTA v-if="link" color="only-link" :href="link.url" size="lg">
-            <p class="text-button hover:text-button-hover">{{ link.label }}</p>
+          {{ link.label }}
-          </NuxtLink>
+        </ButtonCTA>
       </div>
     </div>
   </div>
@@ -33,7 +33,7 @@ export default {
         default: null,
     },
     link: {
-        type: String,
+        type: Object,
         default: null
     },
   },

components/HeroHome.vue

@@ -17,11 +17,9 @@
     <div class=" flex flex-col items-center z-10 gap-6 px-4 max-w-3xl">
       <h1 class="font-bold">{{ title }}</h1>
       <p class="text-2xl-custom max-w-2xl">{{ subtitle }}</p>
-      <NuxtLink v-if="button" :to="button.link">
+      <ButtonCTA v-if="button && button.link" :color="button.color" :to="button.link" class="uppercase mt-6">
-        <ButtonCTA :color="button.color" class="uppercase mt-6">
+        {{ button.label }}
-          {{ button.label }}
+      </ButtonCTA>
-        </ButtonCTA>
-      </NuxtLink>
     </div>
   </section>
 </template>

components/NavBar.vue

@@ -47,11 +47,9 @@
 
         <!-- CTA -->
         <li>
-          <NuxtLink :to="`/${langcode}/aula-virtual`">
+            <ButtonCTA color="aula-base" :to="`/${langcode}/aula-virtual`" size="lg">
-            <ButtonCTA color="aula-base" size="lg">
               AULA VIRTUAL
             </ButtonCTA>
-          </NuxtLink>
         </li>
       </ul>
 

components/SectionWithCards.vue

@@ -57,11 +57,9 @@
     </ul>
     <div v-if="hasButton && buttonSection" class="flex flex-col justify-center items-center mt-8">
       <h4 v-if="buttonSection.title" class="font-semibold uppercase text-center">{{ buttonSection.title }}</h4>
-      <NuxtLink v-if="buttonSection?.button" :to="buttonSection?.button?.link">
+        <ButtonCTA v-if="buttonSection.button" :color="buttonSection?.button?.color" :to="buttonSection?.button?.link" class="uppercase mt-6">
-        <ButtonCTA :color="buttonSection?.button?.color" class="uppercase mt-6">
           {{ buttonSection?.button?.label }}
         </ButtonCTA>
-      </NuxtLink>
     </div>
   </section>
 </template>

components/TextWithIconAndButtons.vue

@@ -22,16 +22,12 @@
       <h2 class="font-bold max-w-4xl">{{ title }}</h2>
       <p class="text-2xl-custom max-w-4xl" v-html="subtitle"></p>
       <div class="flex flex-col md:flex-row items-center justify-center gap-4">
-        <NuxtLink v-if="button" :to="button.link">
+        <ButtonCTA v-if="button" :to="button.link" :color="button.color" class="uppercase mt-6">
-          <ButtonCTA :color="button.color" class="uppercase mt-6">
+          {{ button.label }}
-            {{ button.label }}
+        </ButtonCTA>
-          </ButtonCTA>
+        <ButtonCTA v-if="button2" :to="button2.link" :color="button2.color" class="uppercase mt-6">
-        </NuxtLink>
+          {{ button2.label }}
-        <NuxtLink v-if="button2" :to="button2.link">
+        </ButtonCTA>
-          <ButtonCTA :color="button2.color" class="uppercase mt-6">
-            {{ button2.label }}
-          </ButtonCTA>
-        </NuxtLink>
       </div>
     </div>
   </section>

components/TextWithImage.vue

@@ -40,9 +40,7 @@
         </div>
         <div v-if="imageCTA" class="flex flex-col items-end">
           <p v-if="imageCTA.description" class="text-lg-custom mt-2">{{ imageCTA.description }}</p>
-          <NuxtLink v-if="imageCTA.button" :to="imageCTA.button.url">
+          <ButtonCTA  v-if="imageCTA.button" :to="imageCTA.button.url" size="md" class="uppercase mt-4">{{ imageCTA.button.label }}</ButtonCTA>
-            <ButtonCTA size="md" class="uppercase mt-4">{{ imageCTA.button.label }}</ButtonCTA>
-          </NuxtLink>
         </div>
       </div>
 

components/WhatIs.vue

@@ -14,11 +14,9 @@
           <p class="text-lg-custom" v-html="item.content"></p>
         </li>
       </ul>
-      <NuxtLink v-if="button" :to="`/${langcode}/${button.link}`" class=" w-fit">
+      <ButtonCTA v-if="button" :to="`/${langcode}/${button.link}`" :color="button.color" class="uppercase w-fit">
-        <ButtonCTA :color="button.color" class="uppercase">
+        {{ button.label }}
-          {{ button.label }}
+      </ButtonCTA>
-        </ButtonCTA>
-      </NuxtLink>
     </div>
     <div class="lg:w-2/5 h-full">
       <img 

data/es/aula-virtual.json

@@ -95,7 +95,7 @@
       "buttonSection": {
         "button": {
           "label": "Comienza tu formación",
-          "link": "",
+          "link": "https://aula.kit-eco.social/",
           "color": "button"
         }
       }

data/es/certifica-t.json

@@ -117,12 +117,12 @@
       },
       "button": {
         "label": "Explorar la herramienta",
-        "link": "",
+        "link": "https://certifica-t.kit-eco.social/es",
         "color": "button"
       },
       "button2": {
         "label": "Ir al aula virtual",
-        "link": "",
+        "link": "https://aula.kit-eco.social/",
         "color": "button"
       }
     }

data/es/consumo-cuidado.json

@@ -117,7 +117,7 @@
       },
       "button": {
         "label": "Entrar al Marketplace",
-        "link": "",
+        "link": "https://consumo.kit-eco.social/",
         "color": "button"
       }
     }

data/es/foro.json

@@ -104,7 +104,7 @@
         "title": "¿Lista para sumarte al Espacio de intercooperación?",
         "button": {
           "label": "Entrar al espacio",
-          "link": "",
+          "link": "https://foro.kit-eco.social/",
           "color": "button"
         }
       }

data/es/iguales.json

@@ -130,7 +130,7 @@
       },
       "button": {
         "label": "Comenzar autodiagnóstico",
-        "link": "",
+        "link": "https://iguales.kit-eco.social/",
         "color": "button"
       }
     }

data/es/index.json

@@ -103,7 +103,7 @@
             "src": "ods.png",
             "alt": "ODS"
           },
-          "link": "ods"
+          "link": "objetivo2030"
         },
         {
           "color": "certifica",

data/es/objetivo2030.json

@@ -81,12 +81,12 @@
       },
       "button": {
         "label": "Explorar la herramienta",
-        "link": "",
+        "link": "https://objetivo2030.kit-eco.social/",
         "color": "button"
       },
       "button2": {
         "label": "Acceder al aula virtual",
-        "link": "",
+        "link": "https://aula.kit-eco.social/",
         "color": "button"
       }
     }