82 lines
3.1 KiB
Vue
82 lines
3.1 KiB
Vue
<template>
|
|
<div class="glass rounded-2xl overflow-hidden shadow-2xl border border-white/50 dark:border-white/10">
|
|
<!-- Mock header -->
|
|
<div
|
|
class="flex items-center justify-between px-5 py-4 bg-white/50 dark:bg-gray-900/50 border-b border-gray-200/50 dark:border-gray-700/50"
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="w-8 h-8 rounded-lg bg-linear-to-br from-primary-500 to-cyan-500 flex items-center justify-center"
|
|
>
|
|
<UIcon name="i-lucide-file-text" class="w-4 h-4 text-white" />
|
|
</div>
|
|
<div>
|
|
<p class="font-semibold text-gray-900 dark:text-white text-sm">
|
|
Microsoft 365
|
|
</p>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">
|
|
{{ $t('hero.cards.operatingAgreement') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<UBadge color="primary" variant="soft" size="sm">
|
|
{{ $t('hero.cards.inProgress') }}
|
|
</UBadge>
|
|
</div>
|
|
|
|
<!-- Mock content -->
|
|
<div class="p-5 space-y-4">
|
|
<!-- Progress section -->
|
|
<div>
|
|
<div class="flex justify-between text-sm mb-2">
|
|
<span class="text-gray-600 dark:text-gray-300 font-medium">
|
|
{{ $t('hero.cards.progress') }}
|
|
</span>
|
|
<span class="text-primary-600 dark:text-primary-400 font-semibold">67%</span>
|
|
</div>
|
|
<div class="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
|
<div class="h-full w-[67%] bg-linear-to-r from-primary-500 to-cyan-500 rounded-full" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status items -->
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div
|
|
class="flex items-center gap-2 p-3 rounded-xl bg-success-50 dark:bg-success-900/20 border border-success-200 dark:border-success-800"
|
|
>
|
|
<UIcon name="i-lucide-check-circle" class="w-5 h-5 text-success-500" />
|
|
<div>
|
|
<p class="text-xs font-medium text-success-700 dark:text-success-300">
|
|
{{ $t('hero.cards.sectionsCompleted') }}
|
|
</p>
|
|
<p class="text-xs text-success-600 dark:text-success-400">
|
|
{{ $t('hero.cards.completed') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex items-center gap-2 p-3 rounded-xl bg-primary-50 dark:bg-primary-900/20 border border-primary-200 dark:border-primary-800"
|
|
>
|
|
<UIcon name="i-lucide-message-square" class="w-5 h-5 text-primary-500" />
|
|
<div>
|
|
<p class="text-xs font-medium text-primary-700 dark:text-primary-300">
|
|
{{ $t('hero.cards.commentsNew') }}
|
|
</p>
|
|
<p class="text-xs text-primary-600 dark:text-primary-400">
|
|
{{ $t('hero.cards.new') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action button -->
|
|
<button
|
|
class="w-full py-3 px-4 rounded-xl bg-linear-to-r from-primary-500 to-cyan-500 text-white font-semibold text-sm hover:from-primary-600 hover:to-cyan-600 transition-all shadow-lg shadow-primary-500/25"
|
|
>
|
|
{{ $t('hero.cards.continueEditing') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|