kit-eco.social/landing
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

amend some issues and change texts

Browse Source
This commit is contained in:
María
2025-09-02 08:59:38 +02:00
committed by María
parent e5d470103f
commit 31fa587ea7
19 changed files with 116 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/ButtonCTA.vue
View File

@@ -18,15 +18,15 @@ export default {
},
size: {
type: String,
default: "lg",
default: "md",
}
},
computed: {
buttonClasses() {
return {
"px-3.5 py-2 gap-x-2 text-sm": this.size === "sm",
"px-4 py-2.5 gap-x-2 text-sm": this.size === "md",
"px-6 py-4 gap-x-1 text-md": this.size === "lg",
"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,

28
components/CardTool.vue
View File

@@ -4,17 +4,17 @@
: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-21.8 min-w-80 max-w-80': color !== 'transparent' && color !== 'number',
'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',
'bg-aula-base hover:bg-linear-to-t hover:from-aula-base hover:to-aula-extra-light': color === 'aula',
'bg-certifica-base hover:bg-linear-to-t hover:from-certifica-base hover:to-certifica-extra-light': color === 'certifica',
'bg-foro-base hover:bg-linear-to-t hover:from-foro-base hover:to-foro-extra-light': color === 'foro',
'bg-ods-base hover:bg-linear-to-t hover:from-ods-base hover:to-ods-extra-light': color === 'ods',
'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">
<div class="h-10.2 w-full">
<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}`"
@@ -24,9 +24,9 @@
<!-- <img v-else src="" alt="imagen-error"> -->
<!-- TODO: Add a fallback image -->
</div>
<div class="flex flex-col gap-4 items-center">
<p class="text-5.5 font-semibold uppercase">{{ title }}</p>
<p class="text-center text-base" v-html="description"></p>
<div class="flex flex-col gap-2 items-center">
<h4 class="text-5.5 font-semibold uppercase">{{ title }}</h4>
<p class="text-center text-base max-w-xl" v-html="description"></p>
</div>
</NuxtLink>
<div v-if="!link" class="flex flex-col gap-4 p-8 items-center">
@@ -43,8 +43,8 @@
<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-4 items-center text-center">
<p class="text-5.5 font-semibold uppercase">{{ title }}</p>
<div class="flex flex-col gap-2 items-center text-center">
<h4 class="text-5.5 font-semibold uppercase">{{ title }}</h4>
<p class="text-center text-base" v-html="description"></p>
</div>
</div>

20
components/Footer.vue
View File

@@ -1,5 +1,5 @@
<template>
<footer class="bg-background-dark text-white py-12 px-4 md:px-8 flex flex-col gap-8 rounded-t-3xl">
<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">
@@ -8,9 +8,9 @@
</div>
<p class="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">
<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">
<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">
@@ -40,9 +40,9 @@
<li><NuxtLink :to="`/${langcode}/consumo-cuidado`" class="hover:font-semibold">Consumo Cuidado</NuxtLink></li>
<li><NuxtLink :to="`/${langcode}/aula-virtual`" class="hover:font-semibold">Aula Virtual</NuxtLink></li>
<li><NuxtLink :to="`/${langcode}/iguales`" class="hover:font-semibold">Iguales</NuxtLink></li>
<li><NuxtLink :to="`/${langcode}/ods`" class="hover:font-semibold">ODS</NuxtLink></li>
<li><NuxtLink :to="`/${langcode}/objetivo2030`" class="hover:font-semibold">Objetivo 2030</NuxtLink></li>
<li><NuxtLink :to="`/${langcode}/certifica-t`" class="hover:font-semibold">Certifica-T</NuxtLink></li>
<li><NuxtLink :to="`/${langcode}/foro`" class="hover:font-semibold">Foro</NuxtLink></li>
<li><NuxtLink :to="`/${langcode}/enlazados`" class="hover:font-semibold">Enlazados</NuxtLink></li>
</ul>
</div>
@@ -68,7 +68,7 @@
</div>
</div>
<div class="border-t border-extra-light mt-8 pt-4 text-center text-xs">
<div class="border-t border-extra-light mt-8 pt-4 text-center text-xs-custom">
<p><span>{{ year }}</span> © kit-ECO.SOCIAL | Diseñado y desarrollado por Enreda Coop</p>
</div>
</footer>
@@ -86,4 +86,10 @@ export default {
},
},
};
</script>
</script>
<style>
.text-12 {
font-size: 12px;
}
</style>

26
components/HeroHome.vue
View File

@@ -14,9 +14,9 @@
alt="hero background shape right"
class="absolute right-0 top-0 h-60 md:h-25.6" >
<div class=" flex flex-col items-center z-10 gap-6">
<h1 class="text-32 md:text-40 lg:text-5xl font-bold max-w-4xl">{{ title }}</h1>
<p class="text-lg md:text-xl lg:text-2xl max-w-3xl">{{ subtitle }}</p>
<div class=" flex flex-col items-center z-10 gap-6 px-4 max-w-3xl">
<h1 class="text-32 md:text-40 lg:text-5xl font-bold">{{ title }}</h1>
<p class="text-24 max-w-2xl">{{ subtitle }}</p>
<NuxtLink v-if="button" :to="button.link">
<ButtonCTA :color="button.color" class="uppercase mt-6">
{{ button.label }}
@@ -59,4 +59,22 @@ export default {
},
};
</script>
</script>
<style>
p {
font-size: 24px;
}
text-24 {
@media screen and (min-width: 1023px) {
font-size: 24px;
}
@media screen and (max-width: 1023px) {
font-size: 20px;
}
@media screen and (max-width: 640px) {
font-size: 18px;
}
}
</style>

2
components/HeroPages.vue
View File

@@ -1,7 +1,7 @@
<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="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 min-h-21.8 346"
:class="{
'bg-gradient-conic-hero': bgColor === 'gradient',
'bg-consumo-base bg-linear-to-t from-consumo-base to-consumo-extra-light': bgColor === 'consumo',

10
components/NavBar.vue
View File

@@ -1,5 +1,5 @@
<template>
<nav class="relative">
<nav class="relative bg-white">
<div class="mx-auto flex justify-between items-center h-20">
<!-- Logo -->
<NuxtLink :to="`/${langcode}/`">
@@ -38,9 +38,9 @@
<li><NuxtLink :to="`/${langcode}/consumo-cuidado`" class="block hover:bg-button hover:text-white px-2 py-1 rounded-t-2xl">CONSUMO CUIDADO</NuxtLink></li>
<li><NuxtLink :to="`/${langcode}/aula-virtual`" class="block hover:bg-button hover:text-white px-2 py-1">AULA VIRTUAL</NuxtLink></li>
<li><NuxtLink :to="`/${langcode}/iguales`" class="block hover:bg-button hover:text-white px-2 py-1">IGUALES</NuxtLink></li>
<li><NuxtLink :to="`/${langcode}/ods`" class="block hover:bg-button hover:text-white px-2 py-1">ODS</NuxtLink></li>
<li><NuxtLink :to="`/${langcode}/objetivo2030`" class="block hover:bg-button hover:text-white px-2 py-1">OBJETIVO 2030</NuxtLink></li>
<li><NuxtLink :to="`/${langcode}/certifica-t`" class="block hover:bg-button hover:text-white px-2 py-1">CERTIFICA-T</NuxtLink></li>
<li><NuxtLink :to="`/${langcode}/foro`" class="block hover:bg-button hover:text-white px-2 py-1 rounded-b-2xl">FORO</NuxtLink></li>
<li><NuxtLink :to="`/${langcode}/enlazados`" class="block hover:bg-button hover:text-white px-2 py-1 rounded-b-2xl">ENLAZADOS</NuxtLink></li>
</ul>
</transition>
</li>
@@ -81,9 +81,9 @@
<li class="p-2"><NuxtLink :to="`/${langcode}/consumo-cuidado`">CONSUMO CUIDADO</NuxtLink></li>
<li class="p-2"><NuxtLink :to="`/${langcode}/aula-virtual`">AULA VIRTUAL</NuxtLink></li>
<li class="p-2"><NuxtLink :to="`/${langcode}/iguales`">IGUALES</NuxtLink></li>
<li class="p-2"><NuxtLink :to="`/${langcode}/ods`">ODS</NuxtLink></li>
<li class="p-2"><NuxtLink :to="`/${langcode}/objetivo2030`">OBJETIVO 2030</NuxtLink></li>
<li class="p-2"><NuxtLink :to="`/${langcode}/certifica-t`">CERTIFICA-T</NuxtLink></li>
<li class="p-2"><NuxtLink :to="`/${langcode}/foro`">FORO</NuxtLink></li>
<li class="p-2"><NuxtLink :to="`/${langcode}/enlazados`">ENLAZADOS</NuxtLink></li>
</ul>
</div>
</transition>

10
components/SectionWithCards.vue
View File

@@ -1,7 +1,7 @@
<template>
<section
:id="id"
class="flex flex-col gap-8 rounded-3xl mb-8 px-4 pt-12 pb-16 md:p-16 md:pb-24"
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',
@@ -13,18 +13,18 @@
'bg-linear-to-t from-ods-extra-light to-background-light': bgColor === 'ods',
}">
<div
class="mx-auto max-w-2xl text-center"
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-lg " v-html="description"></p>
<p v-if="description" class="text-lg max-w-4xl" v-html="description"></p>
</div>
<ul class="grid grid-cols-12 gap-8 mx-auto w-full">
<ul class="grid grid-cols-12 gap-8 max-w-5xl">
<li
v-for="(item, index) in cards" :key="`cards-${id}-${index}`"
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',

2
components/TextWithIconAndButtons.vue
View File

@@ -20,7 +20,7 @@
<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 max-w-3xl" v-html="subtitle"></p>
<p class="text-2xl 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">

2
components/TextWithImage.vue
View File

@@ -3,6 +3,8 @@
class="rounded-3xl mb-8 px-4 py-12 md:p-12 lg:p-16"
:class="{
'bg-gradient-conic-2': bgColor === 'conic-2',
'bg-gradient-conic-base': bgColor === 'conic-base',
'bg-gradient-conic-base-gray': bgColor === 'conic-base-gray',
'bg-background-light': bgColor === 'light'
}">
<div