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

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: () => [],
},