70 lines
1.9 KiB
Vue
70 lines
1.9 KiB
Vue
<template>
|
|
<UPageSection
|
|
id="features"
|
|
:ui="{
|
|
root: 'scroll-mt-20'
|
|
}"
|
|
>
|
|
<template #title>
|
|
<div class="flex flex-col items-center text-center mb-4">
|
|
<span
|
|
class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-cyan-100 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 text-sm font-medium mb-4"
|
|
>
|
|
<UIcon name="i-lucide-sparkles" class="w-4 h-4" />
|
|
{{ $t('features.badge') }}
|
|
</span>
|
|
<h2
|
|
class="font-heading text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-gray-900 dark:text-white"
|
|
>
|
|
{{ $t('features.title') }}<span class="gradient-text">{{ $t('features.titleHighlight') }}</span>{{ $t('features.titleSuffix') }}
|
|
</h2>
|
|
</div>
|
|
</template>
|
|
|
|
<template #description>
|
|
<p class="text-center text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
|
|
{{ $t('features.description') }}
|
|
</p>
|
|
</template>
|
|
|
|
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-12">
|
|
<UPageCard
|
|
v-for="(feature, index) in features"
|
|
:key="index"
|
|
:icon="feature.icon"
|
|
:title="feature.title"
|
|
:description="feature.description"
|
|
variant="subtle"
|
|
spotlight
|
|
spotlight-color="primary"
|
|
class="animate-fade-in-up"
|
|
:style="{ animationDelay: `${index * 100}ms` }"
|
|
/>
|
|
</div>
|
|
</UPageSection>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { t } = useI18n()
|
|
|
|
const featureIcons = [
|
|
'i-lucide-route',
|
|
'i-lucide-shield-alert',
|
|
'i-lucide-gauge',
|
|
'i-lucide-history',
|
|
'i-lucide-message-square',
|
|
'i-lucide-file-text',
|
|
'i-lucide-pen-tool',
|
|
'i-lucide-bell',
|
|
'i-lucide-shield-check'
|
|
]
|
|
|
|
const features = computed(() =>
|
|
featureIcons.map((icon, index) => ({
|
|
icon,
|
|
title: t(`features.items[${index}].title`),
|
|
description: t(`features.items[${index}].description`)
|
|
}))
|
|
)
|
|
</script>
|