116 lines
3.5 KiB
Vue
116 lines
3.5 KiB
Vue
<template>
|
|
<section
|
|
:id="id"
|
|
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',
|
|
'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-light to-background-light': bgColor === 'certifica',
|
|
'bg-linear-to-t from-foro-light to-background-light': bgColor === 'foro',
|
|
'bg-linear-to-t from-ods-extra-light to-background-light': bgColor === 'ods',
|
|
}">
|
|
<div
|
|
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-custom max-w-4xl" v-html="description"></p>
|
|
</div>
|
|
|
|
<ul class="grid grid-cols-12 gap-8 ">
|
|
<li
|
|
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',
|
|
'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
|
|
v-if="cardsType === 'colored' || cardsType === 'number' || cardsType === 'transparent'"
|
|
:color="item.color"
|
|
:title="item.title"
|
|
:description="item.description"
|
|
:image="item.image"
|
|
:link="item.link"
|
|
:number="item.number"
|
|
class=""
|
|
/>
|
|
<CardCourse
|
|
v-if="cardsType === 'course'"
|
|
:color="item.color"
|
|
:title="item.title"
|
|
:description="item.description"
|
|
/>
|
|
<CardCompany
|
|
v-if="cardsType === 'company'"
|
|
:description="item.description"
|
|
:image="item.image"
|
|
:link="item.link"
|
|
/>
|
|
</li>
|
|
</ul>
|
|
<div v-if="hasButton && buttonSection" class="flex flex-col justify-center items-center mt-8">
|
|
<h4 v-if="buttonSection.title" class="font-semibold uppercase text-center">{{ buttonSection.title }}</h4>
|
|
<NuxtLink v-if="buttonSection?.button" :to="buttonSection?.button?.link">
|
|
<ButtonCTA :color="buttonSection?.button?.color" class="uppercase mt-6">
|
|
{{ buttonSection?.button?.label }}
|
|
</ButtonCTA>
|
|
</NuxtLink>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
id: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
titlePosition: {
|
|
type: String,
|
|
default: "center",
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
description: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
display: {
|
|
type: String,
|
|
default: "col-3",
|
|
},
|
|
bgColor: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
cardsType: {
|
|
type: String,
|
|
default: "transparent", // 'colored', 'number', 'transparent'
|
|
},
|
|
cards: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
hasButton: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
buttonSection: {
|
|
type: Object,
|
|
default: null
|
|
},
|
|
},
|
|
|
|
};
|
|
</script>
|