69 lines
2.7 KiB
Vue
69 lines
2.7 KiB
Vue
<template>
|
|
<div
|
|
class="bg-white dark:bg-gray-900 rounded-2xl shadow-lg border border-gray-100 dark:border-gray-800"
|
|
:class="compact ? 'p-4 flex-1 min-w-0' : 'p-5'"
|
|
>
|
|
<div :class="compact ? 'flex items-center gap-2 mb-3' : 'flex items-center gap-3 mb-4'">
|
|
<div
|
|
class="bg-linear-to-br from-warning-400 to-warning-500 flex items-center justify-center shrink-0"
|
|
:class="compact ? 'w-8 h-8 rounded-lg' : 'w-10 h-10 rounded-xl'"
|
|
>
|
|
<UIcon name="i-lucide-alert-triangle" :class="compact ? 'w-4 h-4' : 'w-5 h-5'" class="text-white" />
|
|
</div>
|
|
<div class="min-w-0">
|
|
<p
|
|
class="font-semibold text-gray-900 dark:text-white"
|
|
:class="compact ? 'text-xs truncate' : 'text-sm'"
|
|
>
|
|
{{ $t('hero.cards.riskAssessment') }}
|
|
</p>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">
|
|
{{ $t('hero.cards.pointsOpen') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div :class="compact ? 'space-y-1.5' : 'space-y-2'">
|
|
<div class="flex items-center" :class="compact ? 'gap-1.5' : 'gap-2'">
|
|
<div
|
|
class="rounded bg-warning-100 dark:bg-warning-900/50 flex items-center justify-center shrink-0"
|
|
:class="compact ? 'w-3 h-3' : 'w-4 h-4'"
|
|
>
|
|
<UIcon name="i-lucide-clock" :class="compact ? 'w-2 h-2' : 'w-2.5 h-2.5'" class="text-warning-600" />
|
|
</div>
|
|
<span class="text-xs text-gray-600 dark:text-gray-300" :class="{ 'truncate': compact }">
|
|
{{ $t('hero.cards.privacyImpact') }}
|
|
</span>
|
|
</div>
|
|
<!-- Desktop-only: Performance check item -->
|
|
<div v-if="!compact" class="flex items-center gap-2">
|
|
<div class="w-4 h-4 rounded bg-warning-100 dark:bg-warning-900/50 flex items-center justify-center">
|
|
<UIcon name="i-lucide-clock" class="w-2.5 h-2.5 text-warning-600" />
|
|
</div>
|
|
<span class="text-xs text-gray-600 dark:text-gray-300">
|
|
{{ $t('hero.cards.performanceCheck') }}
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center" :class="compact ? 'gap-1.5' : 'gap-2'">
|
|
<div
|
|
class="rounded bg-success-100 dark:bg-success-900/50 flex items-center justify-center shrink-0"
|
|
:class="compact ? 'w-3 h-3' : 'w-4 h-4'"
|
|
>
|
|
<UIcon name="i-lucide-check" :class="compact ? 'w-2 h-2' : 'w-2.5 h-2.5'" class="text-success-600" />
|
|
</div>
|
|
<span class="text-xs text-gray-600 dark:text-gray-300" :class="{ 'truncate': compact }">
|
|
{{ $t('hero.cards.accessDefined') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
useI18n({ useScope: 'global' })
|
|
|
|
defineProps<{
|
|
compact?: boolean
|
|
}>()
|
|
</script>
|
|
|