48 lines
1.0 KiB
Vue
48 lines
1.0 KiB
Vue
<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 ">
|
|
<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>
|
|
</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
|
|
:color="item.color"
|
|
:title="item.title"
|
|
:description="item.description"
|
|
:image="item.image"
|
|
:link="item.link"
|
|
class=""
|
|
/>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
id: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
description: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
cards: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
},
|
|
|
|
};
|
|
</script>
|