55 lines
1.4 KiB
Vue
55 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
$defineProps<{
|
|
topic: string
|
|
content: {
|
|
title: string
|
|
subtext: string
|
|
description: string
|
|
}[]
|
|
}>()
|
|
|
|
const colors = [
|
|
'text-gradient-pink',
|
|
'text-gradient-blue',
|
|
'text-gradient-green',
|
|
'text-gradient-rose',
|
|
'text-gradient-purple',
|
|
'text-gradient-yello',
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<Section>
|
|
<Typography :topic="$t(topic)" />
|
|
<div class="grid-row gap-0 pt-20 md:(grid-cols-2)" :class="`lg:grid-cols-${content.length}`">
|
|
<div
|
|
v-for="(col, i) in content"
|
|
:key="i"
|
|
class="h-full w-full flex flex-col items-center justify-center"
|
|
>
|
|
<h2 :title="$t(col.title)" class="text-h2 w-full text-center text-7xl font-bold text-transparent" :class="colors[i]">
|
|
{{ $t(col.title) }}
|
|
</h2>
|
|
</div>
|
|
<div
|
|
v-for="(col, i) in content"
|
|
:key="i"
|
|
class="h-full w-full flex flex-col items-center justify-center"
|
|
>
|
|
<h5 :title="$t(col.subtext)" class="text-h4 text-h5 mt-3 text-center">
|
|
{{ $t(col.subtext) }}
|
|
</h5>
|
|
</div>
|
|
<div
|
|
v-for="(col, i) in content"
|
|
:key="i"
|
|
class="h-full w-full flex flex-col items-center justify-center"
|
|
>
|
|
<p :title="$t(col.description)" class="text-h6 mt-1 text-center">
|
|
{{ $t(col.description) }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
</template>
|