feat: UI premium polish

- Sidebar: gradient blue tint background + subtle shadow
- Sidebar nav: active indicator gradient, border-left glow
- Halaman: fade-in animation tiap navigasi
- Stat cards: hover lift + shadow glow (stat-card-glow)
- Transisi halus di semua elemen interaktif
This commit is contained in:
Bro
2026-07-24 18:15:25 +07:00
parent 5df740fcf8
commit f393f79ec0
3 changed files with 18 additions and 10 deletions
+4 -4
View File
@@ -12,7 +12,7 @@
{{-- Gradient Stats Cards --}}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-orange-500 to-red-600 p-5 shadow-sm">
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-orange-500 to-red-600 p-5 shadow-sm stat-card-glow transition-all duration-200">
<div class="absolute right-0 top-0 w-20 h-20 opacity-10">
<i class="fa-solid fa-triangle-exclamation text-white text-6xl"></i>
</div>
@@ -22,7 +22,7 @@
<p class="text-[10px] text-white/50 mt-0.5">data terbaru</p>
</div>
</div>
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-blue-500 to-blue-700 p-5 shadow-sm">
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-blue-500 to-blue-700 p-5 shadow-sm stat-card-glow transition-all duration-200">
<div class="absolute right-0 top-0 w-20 h-20 opacity-10">
<i class="fa-solid fa-list-check text-white text-6xl"></i>
</div>
@@ -32,7 +32,7 @@
<p class="text-[10px] text-white/50 mt-0.5">semua waktu</p>
</div>
</div>
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-emerald-500 to-emerald-700 p-5 shadow-sm">
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-emerald-500 to-emerald-700 p-5 shadow-sm stat-card-glow transition-all duration-200">
<div class="absolute right-0 top-0 w-20 h-20 opacity-10">
<i class="fa-solid fa-users text-white text-6xl"></i>
</div>
@@ -42,7 +42,7 @@
<p class="text-[10px] text-white/50 mt-0.5">terdata</p>
</div>
</div>
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-violet-500 to-violet-700 p-5 shadow-sm">
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-violet-500 to-violet-700 p-5 shadow-sm stat-card-glow transition-all duration-200">
<div class="absolute right-0 top-0 w-20 h-20 opacity-10">
<i class="fa-solid fa-file-lines text-white text-6xl"></i>
</div>