ButtonCTA amended and urls updated

2025-10-16 13:27:34 +02:00
parent 0b44b2aa3b
commit 74c1234169
15 changed files with 64 additions and 50 deletions
--- a/components/ButtonCTA.vue
+++ b/components/ButtonCTA.vue
@@ -1,7 +1,11 @@
 <template>
  <a
-    class="flex items-center justify-center cursor-pointer text-button-base"
-    :disabled="disabled" :class="buttonClasses" :href="href" target="_blank" rel="noopener noreferrer" @click="handleClick">
+    :disabled="disabled" 
+    :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-5 py-2.5 gap-x-2 text-sm": this.size === "md",
-        "px-6 py-4 gap-x-1 text-base": this.size === "lg",
+        "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 cursor-pointer": this.size === "md",
+        "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) {
--- a/components/CardCompany.vue
+++ b/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">
-            <p class="text-button hover:text-button-hover">{{ link.label }}</p>
-          </NuxtLink>
+        <ButtonCTA v-if="link" color="only-link" :href="link.url" size="lg">
+          {{ link.label }}
+        </ButtonCTA>
      </div>
    </div>
  </div>
@@ -33,7 +33,7 @@ export default {
        default: null,
    },
    link: {
-        type: String,
+        type: Object,
        default: null
    },
  },
--- a/components/HeroHome.vue
+++ b/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 :color="button.color" class="uppercase mt-6">
+      <ButtonCTA v-if="button && button.link" :color="button.color" :to="button.link" class="uppercase mt-6">
        {{ button.label }}
      </ButtonCTA>
-      </NuxtLink>
    </div>
  </section>
 </template>
--- a/components/NavBar.vue
+++ b/components/NavBar.vue
@@ -47,11 +47,9 @@

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

--- a/components/SectionWithCards.vue
+++ b/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 :color="buttonSection?.button?.color" class="uppercase mt-6">
+        <ButtonCTA v-if="buttonSection.button" :color="buttonSection?.button?.color" :to="buttonSection?.button?.link" class="uppercase mt-6">
          {{ buttonSection?.button?.label }}
        </ButtonCTA>
-      </NuxtLink>
    </div>
  </section>
 </template>
--- a/components/TextWithIconAndButtons.vue
+++ b/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 :color="button.color" class="uppercase mt-6">
+        <ButtonCTA v-if="button" :to="button.link" :color="button.color" class="uppercase mt-6">
          {{ button.label }}
        </ButtonCTA>
-        </NuxtLink>
-        <NuxtLink v-if="button2" :to="button2.link">
-          <ButtonCTA :color="button2.color" class="uppercase mt-6">
+        <ButtonCTA v-if="button2" :to="button2.link" :color="button2.color" class="uppercase mt-6">
          {{ button2.label }}
        </ButtonCTA>
-        </NuxtLink>
      </div>
    </div>
  </section>
--- a/components/TextWithImage.vue
+++ b/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 size="md" class="uppercase mt-4">{{ imageCTA.button.label }}</ButtonCTA>
-          </NuxtLink>
+          <ButtonCTA  v-if="imageCTA.button" :to="imageCTA.button.url" size="md" class="uppercase mt-4">{{ imageCTA.button.label }}</ButtonCTA>
        </div>
      </div>

--- a/components/WhatIs.vue
+++ b/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 :color="button.color" class="uppercase">
+      <ButtonCTA v-if="button" :to="`/${langcode}/${button.link}`" :color="button.color" class="uppercase w-fit">
        {{ button.label }}
      </ButtonCTA>
-      </NuxtLink>
    </div>
    <div class="lg:w-2/5 h-full">
      <img 
--- a/data/es/aula-virtual.json
+++ b/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"
        }
      }
--- a/data/es/certifica-t.json
+++ b/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"
      }
    }
--- a/data/es/consumo-cuidado.json
+++ b/data/es/consumo-cuidado.json
@@ -117,7 +117,7 @@
      },
      "button": {
        "label": "Entrar al Marketplace",
-        "link": "",
+        "link": "https://consumo.kit-eco.social/",
        "color": "button"
      }
    }
--- a/data/es/foro.json
+++ b/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"
        }
      }
--- a/data/es/iguales.json
+++ b/data/es/iguales.json
@@ -130,7 +130,7 @@
      },
      "button": {
        "label": "Comenzar autodiagnóstico",
-        "link": "",
+        "link": "https://iguales.kit-eco.social/",
        "color": "button"
      }
    }
--- a/data/es/index.json
+++ b/data/es/index.json
@@ -103,7 +103,7 @@
            "src": "ods.png",
            "alt": "ODS"
          },
-          "link": "ods"
+          "link": "objetivo2030"
        },
        {
          "color": "certifica",
--- a/data/es/objetivo2030.json
+++ b/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"
      }
    }