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>