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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user