add links and amend some design

This commit is contained in:
María
2025-10-01 10:14:41 +02:00
parent de75605c82
commit c6e1502c6f
4 changed files with 19 additions and 20 deletions

View File

@@ -7,7 +7,7 @@
'bg-consumo-base bg-linear-to-t from-consumo-base to-consumo-extra-light': bgColor === 'consumo', '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-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-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-linear-to-t from-certifica-light to-certifica-extra-light': bgColor === 'certifica',
'bg-foro-base bg-linear-to-t from-foro-base to-foro-extra-light': bgColor === 'foro', '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', 'bg-ods-base bg-linear-to-t from-ods-base to-ods-extra-light': bgColor === 'ods',
}"> }">
@@ -22,11 +22,11 @@
<div class=" flex flex-col items-center z-10 gap-6"> <div class=" flex flex-col items-center z-10 gap-6">
<h1 class="font-bold max-w-4xl">{{ title }}</h1> <h1 class="font-bold max-w-4xl">{{ title }}</h1>
<p class="text-2xl-custom max-w-3xl" v-html="subtitle"></p> <p class="text-2xl-custom max-w-3xl" v-html="subtitle"></p>
<NuxtLink v-if="button" :to="button.link"> <!-- <NuxtLink v-if="button" :to="button.link">
<ButtonCTA :color="button.color" class="uppercase mt-6"> <ButtonCTA :color="button.color" class="uppercase mt-6">
{{ button.label }} {{ button.label }}
</ButtonCTA> </ButtonCTA>
</NuxtLink> </NuxtLink> -->
</div> </div>
</section> </section>
</template> </template>

View File

@@ -14,7 +14,7 @@
<!-- Desktop menu --> <!-- Desktop menu -->
<ul class="hidden md:flex items-center gap-6 font-semibold text-sm-custom"> <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="`/${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://aula.kit-eco.social/" 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> <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> </ul>
@@ -40,7 +40,7 @@
<div v-show="menuIsOpen" class="lg:hidden p-5 bg-gradient-conic rounded-3xl min-h-svh"> <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"> <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="`/${langcode}/`">INICIO</NuxtLink></li>
<li class="p-2"><NuxtLink to="#">GUÍA PASO A PASO</NuxtLink></li> <li class="p-2"><NuxtLink to="https://aula.kit-eco.social/">GUÍA PASO A PASO</NuxtLink></li>
<li class="p-2"><NuxtLink to="https://www.kit-eco.social/es/">KIT-ECO.SOCIAL</NuxtLink></li> <li class="p-2"><NuxtLink to="https://www.kit-eco.social/es/">KIT-ECO.SOCIAL</NuxtLink></li>
</ul> </ul>
</div> </div>

View File

@@ -1,19 +1,11 @@
<template> <template>
<section <section
:id="id" :id="id"
class="flex flex-col gap-8 justify-center items-center rounded-3xl mb-8 px-8 md:px-4 pt-12 pb-16 md:p-16 md:pb-24" class="rounded-3xl mb-8 px-8 md:px-4 pt-12 pb-16 md:p-16 md:pb-24 bg-gradient-certifica"
:class="{ >
'bg-gradient-conic-cards': bgColor === 'gradient-conic', <div class="flex flex-col gap-8 justify-center items-center container mx-auto">
'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 <div
class="mx-auto text-center" class=" text-center"
:class="{ :class="{
'flex flex-col justify-center items-center w-full': titlePosition === 'center', 'flex flex-col justify-center items-center w-full': titlePosition === 'center',
'flex flex-col items-start w-full': titlePosition === 'left', 'flex flex-col items-start w-full': titlePosition === 'left',
@@ -45,6 +37,7 @@
<div class="relative w-full min-h-96 h-[40rem] bg-background-extra-light rounded-3xl flex justify-center items-center"> <div class="relative w-full min-h-96 h-[40rem] bg-background-extra-light rounded-3xl flex justify-center items-center">
<iframe class="absolute top-0 w-full h-full rounded-3xl" src="https://form.certifica-t.kit-eco.social/" /> <iframe class="absolute top-0 w-full h-full rounded-3xl" src="https://form.certifica-t.kit-eco.social/" />
</div> </div>
</div>
</section> </section>
</template> </template>
@@ -87,3 +80,9 @@ export default {
}; };
</script> </script>
<style scoped>
.bg-gradient-certifica {
background: linear-gradient(180deg, #F6F6E3 0%, var(--Background--bg-light, #F9F4F2) 100%);
}
</style>

View File

@@ -55,16 +55,16 @@
"props": { "props": {
"id": "certifica-t-cta", "id": "certifica-t-cta",
"title": "¿Quieres aprender paso a paso?", "title": "¿Quieres aprender paso a paso?",
"subtitle": "Accede al aula virtual para formarte de forma sencilla en el uso de la herramienta. Conoce los fundamentos de la sostenibilidad certificada y aprende a interpretar tu diagnóstico. Desde kit-ECO.SOCIAL te acompañamos en cada paso.", "subtitle": "Accede al aula virtual para formarte de forma sencilla en el uso de la herramienta. Conoce los fundamentos de la sostenibilidad certificada y aprende a interpretar tu diagnóstico. Desde <strong>kit-ECO.SOCIAL</strong> te acompañamos en cada paso.",
"bgColor": "certifica", "bgColor": "certifica",
"icon": "scale.svg", "icon": "graduation-cap.svg",
"bgImage": { "bgImage": {
"src": "hero-certifica-t-formas.png", "src": "hero-certifica-t-formas.png",
"alt": "Certifica-T Imagenes Fondo" "alt": "Certifica-T Imagenes Fondo"
}, },
"button": { "button": {
"label": "Empezar curso", "label": "Empezar curso",
"link": "", "link": "https://aula.kit-eco.social/",
"color": "button" "color": "button"
} }
} }