From 0356c8b2e27202e26a2983e891213ecd280ff6a0 Mon Sep 17 00:00:00 2001
From: Novy San87 <novysan87@smkn1-wonorejo.sch.id>
Date: Mon, 3 Aug 2026 18:03:22 +0700
Subject: [PATCH] KPI cards: icon watermark membesar halus saat hover
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- group + transition-all duration-500 ease-out pada icon watermark
- group-hover:scale-150 (membesar 1.5x) + opacity 10% → 25%
- Berlaku di 4 kartu KPI (hari ini, total, siswa aktif, SP draft)
---
 resources/views/dashboard/index.blade.php | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/resources/views/dashboard/index.blade.php b/resources/views/dashboard/index.blade.php
index dfea0e5..55df271 100644
--- a/resources/views/dashboard/index.blade.php
+++ b/resources/views/dashboard/index.blade.php
@@ -12,8 +12,8 @@
 
     {{-- 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 stat-card-glow transition-all duration-200">
-            <div class="absolute right-0 top-0 w-20 h-20 opacity-10">
+        <div class="group 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 transition-all duration-500 ease-out group-hover:scale-150 group-hover:opacity-25">
                 <i class="fa-solid fa-triangle-exclamation text-white text-6xl"></i>
             </div>
             <div class="relative z-10">
@@ -22,8 +22,8 @@
                 <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 stat-card-glow transition-all duration-200">
-            <div class="absolute right-0 top-0 w-20 h-20 opacity-10">
+        <div class="group 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 transition-all duration-500 ease-out group-hover:scale-150 group-hover:opacity-25">
                 <i class="fa-solid fa-list-check text-white text-6xl"></i>
             </div>
             <div class="relative z-10">
@@ -32,8 +32,8 @@
                 <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 stat-card-glow transition-all duration-200">
-            <div class="absolute right-0 top-0 w-20 h-20 opacity-10">
+        <div class="group 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 transition-all duration-500 ease-out group-hover:scale-150 group-hover:opacity-25">
                 <i class="fa-solid fa-users text-white text-6xl"></i>
             </div>
             <div class="relative z-10">
@@ -42,8 +42,8 @@
                 <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 stat-card-glow transition-all duration-200">
-            <div class="absolute right-0 top-0 w-20 h-20 opacity-10">
+        <div class="group 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 transition-all duration-500 ease-out group-hover:scale-150 group-hover:opacity-25">
                 <i class="fa-solid fa-file-lines text-white text-6xl"></i>
             </div>
             <div class="relative z-10">