first commit
This commit is contained in:
María
51
components/ButtonCTA.vue
Normal file
51
components/ButtonCTA.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<button type="button" class="flex items-center justify-center cursor-pointer text-button-base"
|
||||
:disabled="disabled" :class="buttonClasses" @click="handleClick">
|
||||
<slot></slot>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: "button",
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: "md",
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
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",
|
||||
|
||||
"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,
|
||||
|
||||
"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) {
|
||||
if (this.disabled) {
|
||||
$ev.stopPropagation();
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
88
components/CardTool.vue
Normal file
88
components/CardTool.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col gap-4 rounded-3xl"
|
||||
:class="{
|
||||
'border-4 border-white min-h-64 md:min-h-full max-w-80 sm:max-w-full': color === 'number',
|
||||
'border-4 border-white min-h-20.9 md:min-h-full max-h-full max-w-80 sm:max-w-full': color === 'transparent',
|
||||
'shadow-tool-card hover:border-4 border-white transition-all duration-300 ease-in-out min-h-22.3 sm:min-h-21.8 min-w-full lg:min-w-80 max-w-fit sm:max-w-80 w-fit': color !== 'transparent' && color !== 'number',
|
||||
'bg-linear-to-t from-consumo-base to-consumo-light hover:to-consumo-extra-light': color === 'consumo',
|
||||
'bg-linear-to-t from-iguales-base to-iguales-light hover:to-iguales-extra-light': color === 'iguales',
|
||||
'bg-linear-to-t from-aula-base to-aula-light hover:to-aula-extra-light': color === 'aula',
|
||||
'bg-linear-to-t from-certifica-base to-certifica-light hover:to-certifica-extra-light': color === 'certifica',
|
||||
'bg-linear-to-t from-foro-base to-foro-light hover:to-foro-extra-light': color === 'foro',
|
||||
'bg-linear-to-t from-ods-base to-ods-light hover:to-ods-extra-light': color === 'ods',
|
||||
}"
|
||||
>
|
||||
<NuxtLink v-if="link" :to="`/${langcode}/${link}`" class="p-8 flex flex-col gap-4 items-center">
|
||||
<div class="min-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-2 items-center">
|
||||
<h4 class="font-semibold uppercase">{{ title }}</h4>
|
||||
<p class="text-center max-w-xl text-base-custom" v-html="description"></p>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
<div v-if="!link" class="flex flex-col gap-4 px-8 py-12 items-center">
|
||||
<div v-if="image" class="h-25 w-25">
|
||||
<img
|
||||
: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 v-if="number" class="h-15 w-15">
|
||||
<h3 class="w-full h-full rounded-full border font-bold flex items-center justify-center">
|
||||
{{ number }}</h3>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 items-center text-center">
|
||||
<h4 class="font-semibold uppercase">{{ title }}</h4>
|
||||
<p class="text-center text-base-custom" v-html="description"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: "consumo",
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
image: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
number: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
link: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
langcode() {
|
||||
return this.$store.getters.langcode;
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
89
components/Footer.vue
Normal file
89
components/Footer.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<footer class=" bg-gradient-to-t from-background-dark-2 to-button text-white py-12 px-4 md:px-8 flex flex-col gap-8 rounded-t-3xl">
|
||||
<div class="flex flex-col lg:flex-row gap-16 md:gap-12 lg:gap-16">
|
||||
|
||||
<div class="flex flex-col gap-6 items-center md:items-start w-full md:w-1/3 lg:w-1/6">
|
||||
<div class="mb-4">
|
||||
<img src="/assets/svg/logo.svg" alt="Kit-ECO.SOCIAL Logo" class="h-15 w-auto">
|
||||
</div>
|
||||
<p class=" text-lg-custom mb-4 text-center md:text-start">Síguenos y entérate de los próximos eventos, novedades y recursos.</p>
|
||||
<ul class="flex space-x-4">
|
||||
<li class="h-12 lg:h-8 w-12 lg:w-8 rounded-full border border-white hover:bg-white hover:text-background-dark">
|
||||
<NuxtLink to="#" class="flex items-center justify-center h-full w-full">
|
||||
<img src="/assets/svg/instagram.svg" alt="Instagram" class="w-4 h-4" />
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="h-12 lg:h-8 w-12 lg:w-8 rounded-full border border-white">
|
||||
<NuxtLink to="#" class="flex items-center justify-center h-full w-full">
|
||||
<img src="/assets/svg/facebook.svg" alt="Facebook" class="w-4 h-4">
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="h-12 lg:h-8 w-12 lg:w-8 rounded-full border border-white">
|
||||
<NuxtLink to="#" class="flex items-center justify-center h-full w-full">
|
||||
<img src="/assets/svg/linkedin.svg" alt="LinkedIn" class="w-4 h-4">
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="h-12 lg:h-8 w-12 lg:w-8 rounded-full border border-white">
|
||||
<NuxtLink to="#" class="flex items-center justify-center h-full w-full">
|
||||
<img src="/assets/svg/x.svg" alt="X-Twitter" class="w-4 h-4">
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="mailto:info@kit-eco.social">info@kit-eco.social</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row justify-between gap-16 md:gap-0 lg:gap-16 w-full lg:w-5/6">
|
||||
<div class="flex md:w-2/3 lg:w-1/2">
|
||||
<div class="flex flex-col w-1/2">
|
||||
<h3 class="font-semibold text-lg-custom mb-6">Herramientas</h3>
|
||||
<ul class="space-y-3 text-left text-lg-custom">
|
||||
<li><NuxtLink to="https://www.kit-eco.social/es/consumo-cuidado" class="hover:font-semibold">Consumo Cuidado</NuxtLink></li>
|
||||
<li><NuxtLink to="https://www.kit-eco.social/es/aula-virtual" class="hover:font-semibold">Aula Virtual</NuxtLink></li>
|
||||
<li><NuxtLink to="https://www.kit-eco.social/es/iguales" class="hover:font-semibold">Iguales</NuxtLink></li>
|
||||
<li><NuxtLink to="https://www.kit-eco.social/es/objetivo2030" class="hover:font-semibold">Objetivo 2030</NuxtLink></li>
|
||||
<li><NuxtLink to="https://www.kit-eco.social/es/certifica-t" class="hover:font-semibold">Certifica-T</NuxtLink></li>
|
||||
<li><NuxtLink to="https://www.kit-eco.social/es/foro" class="hover:font-semibold">Foro</NuxtLink></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col w-1/2">
|
||||
<h3 class="font-semibold text-lg-custom mb-6">Enlaces rápidos</h3>
|
||||
<ul class="space-y-3 text-left">
|
||||
<li><a href="https://www.kit-eco.social/es/nosotras" class="hover:underline">Nosotras</a></li>
|
||||
<li><a href="#" class="hover:underline">Contactanos</a></li>
|
||||
<li><a href="#" class="hover:underline">Terminos y condiciones</a></li>
|
||||
<li><a href="#" class="hover:underline">Politica de privacidad</a></li>
|
||||
<li><a href="#" class="hover:underline">Aviso legal</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center md:items-end md:w-1/3 lg:w-1/2">
|
||||
<h3 class="font-semibold text-lg-custom mb-4">Proyecto financiado por:</h3>
|
||||
<div class="grid grid-cols-12 gap-y-3 w-full">
|
||||
<img src="/assets/img/uelogo 1.png" alt="Financiado por la Unión Europea - NextGenerationEU" class="h-12 lg:h-14 col-span-6 md:col-span-12 mx-auto md:mx-0 md:ml-auto">
|
||||
<img src="/assets/img/logotipo_ministerio.png" alt="Gobierno de España" class="h-12 lg:h-14 col-span-6 md:col-span-12 mx-auto md:mx-0 md:ml-auto">
|
||||
<img src="/assets/img/logotipo_PRTR.png" alt="Plan de Recuperación, Transformación y Resiliencia" class="h-12 lg:h-14 col-span-12 md:col-span-12 mx-auto md:mx-0 md:ml-auto">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-background-extra-light mt-8 pt-4 text-center">
|
||||
<p class="text-xs-custom"><span>{{ year }}</span> © kit-ECO.SOCIAL | Diseñado y desarrollado por <a href="https://enreda.coop">Enreda Coop</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCurrentYear } from "@/utils/dates.js";
|
||||
export default {
|
||||
computed: {
|
||||
langcode() {
|
||||
return this.$store.getters.langcode;
|
||||
},
|
||||
year() {
|
||||
return getCurrentYear();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
72
components/HeroPages.vue
Normal file
72
components/HeroPages.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<section
|
||||
:id="id"
|
||||
class="relative flex flex-col p-8 md:p-12 mb-8 items-center justify-center gap-4 md:gap-8 text-center rounded-3xl min-h-[346px]"
|
||||
:class="{
|
||||
'bg-gradient-conic-hero': bgColor === 'gradient',
|
||||
'bg-consumo-base bg-linear-to-t from-consumo-base to-consumo-extra-light': bgColor === 'consumo',
|
||||
'bg-iguales-base bg-linear-to-t from-iguales-base to-iguales-extra-light': bgColor === 'iguales',
|
||||
'bg-aula-base bg-linear-to-t from-aula-base to-aula-extra-light': bgColor === 'aula',
|
||||
'bg-certifica-base bg-linear-to-t from-certifica-base to-certifica-extra-light': bgColor === 'certifica',
|
||||
'bg-foro-base bg-linear-to-t from-foro-base to-foro-extra-light': bgColor === 'foro',
|
||||
'bg-ods-base bg-linear-to-t from-ods-base to-ods-extra-light': bgColor === 'ods',
|
||||
}">
|
||||
|
||||
<img
|
||||
|
||||
v-if="bgImage"
|
||||
:src="`/img/${bgImage.src}`"
|
||||
:alt="bgImage.alt"
|
||||
class="absolute left-0 bottom-0 w-full h-auto" >
|
||||
|
||||
<div class=" flex flex-col items-center z-10 gap-6">
|
||||
<h1 class="font-bold max-w-4xl">{{ title }}</h1>
|
||||
<p class="text-2xl-custom max-w-3xl" v-html="subtitle"></p>
|
||||
<NuxtLink v-if="button" :to="button.link">
|
||||
<ButtonCTA :color="button.color" class="uppercase mt-6">
|
||||
{{ button.label }}
|
||||
</ButtonCTA>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
subtitle: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: "consumo",
|
||||
},
|
||||
bgImage: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
src: "",
|
||||
alt: "",
|
||||
}),
|
||||
},
|
||||
button: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
label: "",
|
||||
link: "",
|
||||
color: "button",
|
||||
}),
|
||||
}
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
92
components/NavBar.vue
Normal file
92
components/NavBar.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<nav class="relative bg-white">
|
||||
<div class="mx-auto flex justify-between items-center h-20">
|
||||
<!-- Logo -->
|
||||
<NuxtLink :to="`/${langcode}/`">
|
||||
<img
|
||||
width="121.22628021240234"
|
||||
height="48"
|
||||
alt="logo-kit-economia-social-certifica-t"
|
||||
src="/assets/img/logo-certifica-t.png"
|
||||
/>
|
||||
</NuxtLink>
|
||||
|
||||
<!-- Desktop menu -->
|
||||
<ul class="hidden md:flex items-center gap-6 font-semibold text-sm-custom">
|
||||
<li><NuxtLink :to="`/${langcode}/`" class="hover:bg-button-hover hover:text-white p-2 rounded-lg">INICIO</NuxtLink></li>
|
||||
<li><NuxtLink to="#" class="hover:bg-button-hover hover:text-white p-2 rounded-lg">GUÍA PASO A PASO</NuxtLink></li>
|
||||
<li><NuxtLink to="https://www.kit-eco.social/es/" class="hover:bg-button-hover hover:text-white p-2 rounded-lg">KIT-ECO.SOCIAL</NuxtLink></li>
|
||||
|
||||
</ul>
|
||||
|
||||
<!-- Mobile menu toggle -->
|
||||
<button
|
||||
class="md:hidden focus:outline-none"
|
||||
@click="handleMenu">
|
||||
<svg v-if="!menuIsOpen" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12h18"/><path d="M3 18h18"/><path d="M3 6h18"/></svg>
|
||||
<svg v-if="menuIsOpen" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" stroke-width="2"><path d="M18 6l-12 12"/><path d="M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu -->
|
||||
<transition
|
||||
enter-active-class="transition duration-300 ease-out"
|
||||
enter-from-class="opacity-0 translate-x-2"
|
||||
enter-to-class="opacity-100 translate-x-0"
|
||||
leave-active-class="transition duration-200 ease-in"
|
||||
leave-from-class="opacity-100 translate-x-0"
|
||||
leave-to-class="opacity-0 translate-x-2"
|
||||
>
|
||||
<div v-show="menuIsOpen" class="lg:hidden p-5 bg-gradient-conic rounded-3xl min-h-svh">
|
||||
<ul class="space-y-4 text-sm-custom text-end w-fit ml-auto">
|
||||
<li class="p-2"><NuxtLink :to="`/${langcode}/`">INICIO</NuxtLink></li>
|
||||
<li class="p-2"><NuxtLink to="#">GUÍA PASO A PASO</NuxtLink></li>
|
||||
<li class="p-2"><NuxtLink to="https://www.kit-eco.social/es/">KIT-ECO.SOCIAL</NuxtLink></li>
|
||||
</ul>
|
||||
</div>
|
||||
</transition>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dropdownOpen: false,
|
||||
menuIsOpen: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$route': function() {
|
||||
this.dropdownOpen = false; // Close dropdown on language change
|
||||
this.menuIsOpen = false; // Close mobile menu on language change
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
langcode() {
|
||||
return this.$store.getters.langcode;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
document.addEventListener('click', this.handleClickOutside);
|
||||
},
|
||||
beforeUnmount() {
|
||||
document.removeEventListener('click', this.handleClickOutside);
|
||||
},
|
||||
methods: {
|
||||
handleDropdown() {
|
||||
this.dropdownOpen = !this.dropdownOpen;
|
||||
},
|
||||
handleClickOutside(e) {
|
||||
const dropdown = this.$refs.dropdownRef;
|
||||
if (dropdown && !dropdown.contains(e.target)) {
|
||||
this.dropdownOpen = false;
|
||||
}
|
||||
},
|
||||
handleMenu() {
|
||||
this.menuIsOpen = !this.menuIsOpen;
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
89
components/SectionWithCardsAndForm.vue
Normal file
89
components/SectionWithCardsAndForm.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<section
|
||||
:id="id"
|
||||
class="flex flex-col gap-8 justify-center items-center rounded-3xl mb-8 px-4 pt-12 pb-16 md:p-16 md:pb-24"
|
||||
:class="{
|
||||
'bg-gradient-conic-cards': bgColor === 'gradient-conic',
|
||||
'bg-gradient-conic-green': bgColor === 'gradient-conic-green',
|
||||
'bg-linear-to-b from-consumo-extra-light to-background-light': bgColor === 'consumo',
|
||||
'bg-linear-to-b from-iguales-extra-light to-background-light': bgColor === 'iguales',
|
||||
'bg-linear-to-b from-aula-extra-light to-background-light': bgColor === 'aula',
|
||||
'bg-linear-to-b from-certifica-light to-background-light': bgColor === 'certifica',
|
||||
'bg-linear-to-b from-foro-light to-background-light': bgColor === 'foro',
|
||||
'bg-linear-to-b from-ods-extra-light to-background-light': bgColor === 'ods',
|
||||
}">
|
||||
<div
|
||||
class="mx-auto text-center"
|
||||
:class="{
|
||||
'flex flex-col justify-center items-center w-full': titlePosition === 'center',
|
||||
'flex flex-col items-start w-full': titlePosition === 'left',
|
||||
}">
|
||||
<h2 class="font-bold mb-6">{{ title }}</h2>
|
||||
<p v-if="description" class="text-2xl-custom max-w-4xl" v-html="description"></p>
|
||||
</div>
|
||||
<ul class="grid grid-cols-12 gap-8 ">
|
||||
<li
|
||||
v-for="(item, index) in cards" :key="`cards-${id}-${index}`" class=""
|
||||
:class="{
|
||||
'col-span-12 lg:col-span-6': display === 'col-2',
|
||||
'col-span-12 md:col-span-6 lg:col-span-4': display === 'col-3',
|
||||
'col-span-12 lg:col-span-4': display === 'col-3-transparent',
|
||||
'col-span-12 md:col-span-6 lg:col-span-3': display === 'col-4',
|
||||
}">
|
||||
<CardTool
|
||||
v-if="cardsType === 'colored' || cardsType === 'number' || cardsType === 'transparent'"
|
||||
:color="item.color"
|
||||
:title="item.title"
|
||||
:description="item.description"
|
||||
:image="item.image"
|
||||
:link="item.link"
|
||||
:number="item.number"
|
||||
class=""
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="w-full min-h-96 bg-background-extra-light rounded-3xl flex justify-center items-center">
|
||||
<h1 class="text-center text-2xl font-bold">Formulario</h1>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
titlePosition: {
|
||||
type: String,
|
||||
default: "center",
|
||||
},
|
||||
display: {
|
||||
type: String,
|
||||
default: "col-4",
|
||||
},
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
cardsType: {
|
||||
type: String,
|
||||
default: "transparent", // 'colored', 'number', 'transparent'
|
||||
},
|
||||
cards: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
}
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
86
components/TextWithIconAndButtons.vue
Normal file
86
components/TextWithIconAndButtons.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<section
|
||||
:id="id"
|
||||
class="relative flex flex-col p-8 md:p-12 mb-8 items-center justify-center gap-4 md:gap-8 text-center overflow-hidden rounded-3xl"
|
||||
:class="{
|
||||
'bg-consumo-base bg-linear-to-b from-consumo-light to-consumo-extra-light': bgColor === 'consumo',
|
||||
'bg-iguales-base bg-linear-to-b from-iguales-light to-iguales-extra-light': bgColor === 'iguales',
|
||||
'bg-aula-base bg-linear-to-b from-aula-light to-aula-extra-light': bgColor === 'aula',
|
||||
'bg-certifica-base bg-linear-to-b from-certifica-light to-certifica-extra-light': bgColor === 'certifica',
|
||||
'bg-foro-base bg-linear-to-b from-foro-light to-foro-extra-light': bgColor === 'foro',
|
||||
'bg-ods-base bg-linear-to-b from-ods-light to-ods-extra-light': bgColor === 'ods',
|
||||
}">
|
||||
|
||||
<img
|
||||
v-if="bgImage"
|
||||
:src="`/img/${bgImage.src}`"
|
||||
:alt="bgImage.alt"
|
||||
class="absolute left-0 top-0 w-full h-full" >
|
||||
|
||||
<div class=" flex flex-col items-center z-10 gap-6">
|
||||
<img v-if="icon" :src="`/svg/${icon}`" :alt="`icon-${icon}`" class="w-15 h-15" />
|
||||
<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">
|
||||
{{ button.label }}
|
||||
</ButtonCTA>
|
||||
</NuxtLink>
|
||||
<NuxtLink v-if="button2" :to="button2.link">
|
||||
<ButtonCTA :color="button2.color" class="uppercase mt-6">
|
||||
{{ button2.label }}
|
||||
</ButtonCTA>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
subtitle: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: "consumo",
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
bgImage: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
src: "",
|
||||
alt: "",
|
||||
}),
|
||||
},
|
||||
button: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
label: "",
|
||||
link: "",
|
||||
color: "button",
|
||||
}),
|
||||
},
|
||||
button2: {
|
||||
type: Object,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user