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

section with transparent cards

Browse Source
This commit is contained in:
María
2025-07-31 13:14:13 +02:00
committed by María
parent 86d77c3e48
commit 41d2d8a47b
12 changed files with 117 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
components/CardTool.vue
View File

@@ -1,17 +1,19 @@
<template>
<NuxtLink :to="`/${langcode}/${link}`">
<div
class="flex flex-col min-h-21.8 min-w-80 max-w-80 gap-4 p-8 rounded-3xl shadow-tool-card hover:border-4 border-white transition-all duration-300 ease-in-out"
:class="{
'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',
}"
>
<div class="col-span-4 h-10.2 w-full">
<div
class="flex flex-col gap-4 rounded-3xl"
:class="{
'border-2 border-white min-h-20.3': 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',
'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',
}"
>
<NuxtLink v-if="link" :to="`/${langcode}/${link}`" class="p-8">
<div class="h-10.2 w-full">
<img
v-if="image"
:src="`/img/${image.src}`"
@@ -23,10 +25,26 @@
</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">{{ description }}</p>
<p class="text-center text-base" v-html="description"></p>
</div>
</NuxtLink>
<div v-if="!link" class="flex flex-col gap-4 p-8 items-center">
<div class="h-25 w-25">
<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-4 items-center">
<p class="text-5.5 font-semibold uppercase">{{ title }}</p>
<p class="text-center text-base" v-html="description"></p>
</div>
</div>
</NuxtLink>
</div>
</template>
<script>

2
components/HeroPages.vue
View File

@@ -1,7 +1,7 @@
<template>
<section
:id="id"
class="relative flex flex-col p-4 md:p-12 mb-8 items-center justify-center gap-4 md:gap-8 text-center 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 rounded-3xl"
:class="{
'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',

6
components/NavBar.vue
View File

@@ -99,6 +99,12 @@ export default {
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;

35
components/SectionWithCards.vue
View File

@@ -1,15 +1,30 @@
<template>
<section
:id="id"
class="flex flex-col gap-8 lg:gap-21 rounded-3xl mb-8 px-4 pt-12 pb-16 md:p-16 md:pb-24 bg-gradient-conic-cards ">
class="flex flex-col gap-8 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-linear-to-t from-consumo-extra-light to-background-light': bgColor === 'consumo',
'bg-linear-to-t from-iguales-extra-light to-background-light': bgColor === 'iguales',
'bg-linear-to-t from-aula-extra-light to-background-light': bgColor === 'aula',
'bg-linear-to-t from-certifica-extra-light to-background-light': bgColor === 'certifica',
'bg-linear-to-t from-foro-extra-light to-background-light': bgColor === 'foro',
'bg-linear-to-t from-ods-extra-light to-background-light': bgColor === 'ods',
}">
<div class="flex flex-col justify-center items-center w-full">
<h2 class="text-4xl font-bold mb-6">{{ title }}</h2>
<p class="mb-8 text-lg">{{ description }}</p>
<h2 class="font-bold mb-6">{{ title }}</h2>
<p class="text-lg text-center" v-html="description"></p>
</div>
<ul class="grid grid-cols-12 gap-8 mx-auto">
<li v-for="(item, index) in cards" :key="`cards-${id}-${index}`" class="col-span-12 md:col-span-6 lg:col-span-4">
<CardTool
<li
v-for="(item, index) in cards" :key="`cards-${id}-${index}`"
:class="{
'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
:color="item.color"
:title="item.title"
:description="item.description"
@@ -37,7 +52,15 @@ export default {
type: String,
default: "",
},
cards: {
display: {
type: String,
default: "col-3",
},
bgColor: {
type: String,
default: "",
},
cards: {
type: Array,
default: () => [],
},

6
components/TextWithImage.vue
View File

@@ -11,15 +11,15 @@
'lg:flex-row': position === 'left',
'lg:flex-row-reverse': position === 'right',
'items-center gap-12': image.display === 'circle',
'items-start': image.display === 'normal' && position === 'left',
'items-start justify-between': image.display === 'normal' && position === 'right'
'items-center lg:items-start gap-8': image.display === 'normal' && position === 'left',
'items-center lg:items-start justify-between gap-8': image.display === 'normal' && position === 'right'
}">
<div
v-if="image"
:class="{
'h-20.1 w-20.1 rounded-full overflow-hidden border-4 border-white': image.display === 'circle',
'h-20.9 w-fit': image.display === 'normal'
'h-fit lg:h-20.9 w-full lg:w-fit': image.display === 'normal'
}">
<img
:src="`/img/${image.src}`"