107 lines
4.0 KiB
Vue
107 lines
4.0 KiB
Vue
<template>
|
|
<UPageSection
|
|
:ui="{
|
|
root: 'bg-gray-50 dark:bg-gray-900/50'
|
|
}"
|
|
>
|
|
<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-success-100 dark:bg-success-900/30 text-success-700 dark:text-success-300 text-sm font-medium mb-4"
|
|
>
|
|
<UIcon name="i-lucide-shield" class="w-4 h-4" />
|
|
{{ $t('additionalFeatures.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('additionalFeatures.title', { highlight: '' })
|
|
}}<span class="gradient-text">{{ $t('additionalFeatures.titleHighlight') }}</span>
|
|
</h2>
|
|
</div>
|
|
</template>
|
|
|
|
<template #description>
|
|
<p class="text-center text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
|
|
{{ $t('additionalFeatures.description') }}
|
|
</p>
|
|
</template>
|
|
|
|
<!-- Icon grid with hover animations -->
|
|
<div class="mt-12 grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<div
|
|
v-for="(feature, index) in features"
|
|
:key="index"
|
|
class="group animate-fade-in-up"
|
|
:style="{ animationDelay: `${index * 100}ms` }"
|
|
>
|
|
<div
|
|
class="h-full p-6 rounded-2xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 hover:border-transparent transition-all relative overflow-hidden"
|
|
>
|
|
<!-- Gradient border on hover -->
|
|
<div
|
|
class="absolute inset-0 rounded-2xl bg-linear-to-br from-primary-500 via-cyan-500 to-accent-500 opacity-0 group-hover:opacity-100 transition-opacity -z-10"
|
|
/>
|
|
<div class="absolute inset-[2px] rounded-[14px] bg-white dark:bg-gray-900 -z-10" />
|
|
|
|
<div class="flex items-start gap-4">
|
|
<!-- Icon with gradient background -->
|
|
<div class="relative shrink-0">
|
|
<div
|
|
class="w-14 h-14 rounded-2xl bg-linear-to-br from-primary-100 to-cyan-100 dark:from-primary-900/50 dark:to-cyan-900/50 flex items-center justify-center group-hover:scale-110 transition-transform"
|
|
>
|
|
<UIcon :name="feature.icon" class="w-7 h-7 text-primary-600 dark:text-primary-400" />
|
|
</div>
|
|
<!-- Animated ring on hover -->
|
|
<div
|
|
class="absolute inset-0 rounded-2xl ring-2 ring-primary-500/0 group-hover:ring-primary-500/50 transition-all scale-100 group-hover:scale-125 opacity-0 group-hover:opacity-100"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex-1">
|
|
<h3
|
|
class="font-heading text-lg font-bold text-gray-900 dark:text-white mb-2 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors"
|
|
>
|
|
{{ feature.title }}
|
|
</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
|
|
{{ feature.description }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bottom CTA -->
|
|
<div class="mt-12 text-center">
|
|
<p class="text-gray-500 dark:text-gray-400 mb-4">{{ $t('additionalFeatures.ctaQuestion') }}</p>
|
|
<UButton to="/kontakt" variant="outline" class="btn-outline-gradient">
|
|
<UIcon name="i-lucide-message-circle" class="w-4 h-4 mr-2" />
|
|
{{ $t('additionalFeatures.ctaButton') }}
|
|
</UButton>
|
|
</div>
|
|
</UPageSection>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { t } = useI18n()
|
|
|
|
const featureIcons = [
|
|
'i-lucide-puzzle',
|
|
'i-lucide-server',
|
|
'i-lucide-lock',
|
|
'i-lucide-sparkles',
|
|
'i-lucide-settings',
|
|
'i-lucide-headphones'
|
|
]
|
|
|
|
const features = computed(() =>
|
|
featureIcons.map((icon, index) => ({
|
|
icon,
|
|
title: t(`additionalFeatures.items[${index}].title`),
|
|
description: t(`additionalFeatures.items[${index}].description`)
|
|
}))
|
|
)
|
|
</script>
|