From bedac5851efe10c337a74fcc745e27fbd357bd06 Mon Sep 17 00:00:00 2001
From: Bayu <d1041231072@student.untan.ac.id>
Date: Thu, 4 Jun 2026 20:01:05 +0700
Subject: [PATCH] enhance(LimaEm): restore missing hover/interaction effects
 across all sections

---
 groups/LimaEm/index.html | 62 ++++++++++++++++++++--------------------
 1 file changed, 31 insertions(+), 31 deletions(-)

diff --git a/groups/LimaEm/index.html b/groups/LimaEm/index.html
index bad95fb..0f1d413 100644
--- a/groups/LimaEm/index.html
+++ b/groups/LimaEm/index.html
@@ -1164,8 +1164,8 @@
                             <div class="flex flex-col items-start text-left space-y-6">
 
                                 <div
-                                    class="bg-hmif-secondary/15 text-hmif-secondary font-bold text-xs md:text-sm px-3 py-1 rounded-full">
-                                    COMMUNITY & LEADERSHIP
+                                    class="bg-hmif-secondary/15 text-hmif-secondary font-bold text-xs md:text-sm px-3 py-1 rounded-full ring-1 ring-hmif-secondary/30 backdrop-blur-sm hover:bg-hmif-secondary/25 transition-all duration-300 cursor-default">
+                                    COMMUNITY &amp; LEADERSHIP
                                 </div>
 
                                 <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-white leading-tight">
@@ -1177,8 +1177,8 @@
                                     kreativitas, membentuk calon pemimpin industri masa depan.
                                 </p>
 
-                                <button
-                                    class="mt-4 bg-transparent border-2 border-white text-white font-bold text-sm md:text-base px-6 py-3 rounded-md hover:bg-hmif-secondary hover:text-hmif-primary hover:border-hmif-secondary transition-all hover:cursor-pointer">
+                                <button onclick="document.getElementById('divisi')?.scrollIntoView({behavior:'smooth'})"
+                                    class="mt-4 bg-transparent border-2 border-white text-white font-bold text-sm md:text-base px-6 py-3 rounded-md hover:bg-hmif-secondary hover:text-hmif-primary hover:border-hmif-secondary hover:scale-105 hover:shadow-lg active:scale-95 transition-all duration-200 hover:cursor-pointer">
                                     Lihat Struktur Kepengurusan
                                 </button>
 
@@ -1219,19 +1219,19 @@
 
                                 <!-- Stats -->
                                 <div class="flex gap-12 lg:gap-16 pt-6 border-t border-gray-100">
-                                    <div>
+                                    <div class="group cursor-default">
                                         <p
-                                            class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums">
+                                            class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums transition-transform duration-300 group-hover:scale-110 inline-block">
                                             518</p>
-                                        <p class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3">
+                                        <p class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3 group-hover:text-hmif-primary transition-colors duration-300">
                                             Mahasiswa Aktif
                                         </p>
                                     </div>
-                                    <div>
+                                    <div class="group cursor-default">
                                         <p
-                                            class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums">
+                                            class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums transition-transform duration-300 group-hover:scale-110 inline-block">
                                             8</p>
-                                        <p class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3">
+                                        <p class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3 group-hover:text-hmif-primary transition-colors duration-300">
                                             MITRA
                                         </p>
                                     </div>
@@ -1341,9 +1341,9 @@
 
                         <!-- Grid Card Container -->
                         <div
-                            class="border border-white/10 rounded-2xl bg-white/[0.01] backdrop-blur-md grid grid-cols-1 md:grid-cols-3 overflow-hidden">
+                            class="border border-white/10 rounded-2xl bg-white/[0.01] backdrop-blur-md grid grid-cols-1 md:grid-cols-3 overflow-hidden divide-y md:divide-y-0 md:divide-x divide-white/10">
                             <!-- Bidang 1 -->
-                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
+                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10 hover:bg-white/5 transition-colors duration-300 relative before:absolute before:top-0 before:left-0 before:h-full before:w-0.5 before:bg-hmif-secondary before:scale-y-0 before:origin-top before:transition-transform before:duration-300 hover:before:scale-y-100">
                                 <span
                                     class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
                                     Bidang 1
@@ -1362,7 +1362,7 @@
                             </div>
 
                             <!-- Bidang 2 -->
-                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
+                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10 hover:bg-white/5 transition-colors duration-300 relative before:absolute before:top-0 before:left-0 before:h-full before:w-0.5 before:bg-hmif-secondary before:scale-y-0 before:origin-top before:transition-transform before:duration-300 hover:before:scale-y-100">
                                 <span
                                     class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
                                     Bidang 2
@@ -1380,7 +1380,7 @@
                             </div>
 
                             <!-- Bidang 3 -->
-                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
+                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10 hover:bg-white/5 transition-colors duration-300 relative before:absolute before:top-0 before:left-0 before:h-full before:w-0.5 before:bg-hmif-secondary before:scale-y-0 before:origin-top before:transition-transform before:duration-300 hover:before:scale-y-100">
                                 <span
                                     class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
                                     Bidang 3
@@ -1399,7 +1399,7 @@
                             </div>
 
                             <!-- Bidang 4 -->
-                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
+                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10 hover:bg-white/5 transition-colors duration-300 relative before:absolute before:top-0 before:left-0 before:h-full before:w-0.5 before:bg-hmif-secondary before:scale-y-0 before:origin-top before:transition-transform before:duration-300 hover:before:scale-y-100">
                                 <span
                                     class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
                                     Bidang 4
@@ -1418,7 +1418,7 @@
                             </div>
 
                             <!-- Bidang 5 -->
-                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
+                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10 hover:bg-white/5 transition-colors duration-300 relative before:absolute before:top-0 before:left-0 before:h-full before:w-0.5 before:bg-hmif-secondary before:scale-y-0 before:origin-top before:transition-transform before:duration-300 hover:before:scale-y-100">
                                 <span
                                     class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
                                     Bidang 5
@@ -1436,7 +1436,7 @@
                             </div>
 
                             <!-- Bidang 6 -->
-                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
+                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10 hover:bg-white/5 transition-colors duration-300 relative before:absolute before:top-0 before:left-0 before:h-full before:w-0.5 before:bg-hmif-secondary before:scale-y-0 before:origin-top before:transition-transform before:duration-300 hover:before:scale-y-100">
                                 <span
                                     class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
                                     Bidang 6
@@ -1488,7 +1488,7 @@
                                 <div id="slider-track" class="flex gap-8 transition-transform duration-500 ease-in-out">
 
                                     <!-- Card 1 Silaturahmi Keluarga Besar Informatika-->
-                                    <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
+                                    <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-lg w-full md:w-[calc(50%_-_16px)]">
                                         <div
                                             class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
                                             <img src="./assets/images/kegiatan-unggulan/SKBI.jpeg" alt="Silaturahmi Keluarga Besar"
@@ -1496,14 +1496,14 @@
                                         </div>
                                         <div class="flex items-start gap-4 mt-6">
                                             <div
-                                                class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
+                                                class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm transition-transform duration-300 group-hover:scale-110">
                                                 <span class="text-lg font-extrabold text-hmif-primary leading-none">27</span>
                                                 <span
                                                     class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Feb</span>
                                             </div>
                                             <div class="space-y-1">
                                                 <h3
-                                                    class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
+                                                    class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors duration-300">
                                                     Silaturahmi Keluarga Besar Informatika</h3>
                                                 <p class="text-sm text-gray-500 leading-relaxed font-light">Kegiatan buka bersama
                                                     seluruh keluarga Informatika Untan yang selalu diadakan setiap tahunnya.</p>
@@ -1512,7 +1512,7 @@
                                     </div>
 
                                     <!-- Card 2 Gemastik -->
-                                    <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
+                                    <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-lg w-full md:w-[calc(50%_-_16px)]">
                                         <div
                                             class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
                                             <img src="./assets/images/kegiatan-unggulan/gemastik.jpg" alt="Bootcamp HMIF"
@@ -1538,7 +1538,7 @@
                                     </div>
 
                                     <!-- Card 3 17 agustus -->
-                                    <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
+                                    <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-lg w-full md:w-[calc(50%_-_16px)]">
                                         <div
                                             class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
                                             <img src="./assets/images/kegiatan-unggulan/17-agustus.jpeg" alt="Perayaan 17 Agustus"
@@ -1562,7 +1562,7 @@
                                     </div>
 
                                     <!-- Card 3 Bootcamp -->
-                                    <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
+                                    <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-lg w-full md:w-[calc(50%_-_16px)]">
                                         <div
                                             class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
                                             <img src="./assets/images/kegiatan-unggulan/bootcamp.jpeg" alt="Bootcamp HMIF"
@@ -1586,7 +1586,7 @@
                                         </div>
                                     </div>
                                     <!-- Card 5 UPC 2025 -->
-                                    <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
+                                    <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-lg w-full md:w-[calc(50%_-_16px)]">
                                         <div
                                             class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
                                             <img src="./assets/images/kegiatan-unggulan/upc.jpg" alt="UPC 2025"
@@ -1610,7 +1610,7 @@
                                     </div>
 
                                     <!-- Card 6 Informers -->
-                                    <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
+                                    <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-lg w-full md:w-[calc(50%_-_16px)]">
                                         <div
                                             class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
                                             <img src="./assets/images/kegiatan-unggulan/informers.jpg" alt="Ultah Informatika"
@@ -1679,8 +1679,8 @@
                         <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                             <!-- CP Card -->
                             <div
-                                class="bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-md border border-gray-100/50 transition-all duration-300 flex flex-col space-y-6">
-                                <div class="text-[#b48608]">
+                                class="group bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-xl border border-gray-100/50 hover:border-hmif-secondary/30 hover:-translate-y-2 transition-all duration-300 flex flex-col space-y-6">
+                                <div class="text-[#b48608] group-hover:text-hmif-primary transition-colors duration-300">
                                     <!-- Brackets Icon -->
                                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                                         stroke="currentColor" class="w-8 h-8">
@@ -1701,8 +1701,8 @@
 
                             <!-- Data Mining Card -->
                             <div
-                                class="bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-md border border-gray-100/50 transition-all duration-300 flex flex-col space-y-6">
-                                <div class="text-[#b48608]">
+                                class="group bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-xl border border-gray-100/50 hover:border-hmif-secondary/30 hover:-translate-y-2 transition-all duration-300 flex flex-col space-y-6">
+                                <div class="text-[#b48608] group-hover:text-hmif-primary transition-colors duration-300">
                                     <!-- Shield Icon -->
                                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                                         stroke="currentColor" class="w-8 h-8">
@@ -1723,8 +1723,8 @@
                             </div>
                             <!-- Software Development Card -->
                             <div
-                                class="bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-md border border-gray-100/50 transition-all duration-300 flex flex-col space-y-6">
-                                <div class="text-[#b48608]">
+                                class="group bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-xl border border-gray-100/50 hover:border-hmif-secondary/30 hover:-translate-y-2 transition-all duration-300 flex flex-col space-y-6">
+                                <div class="text-[#b48608] group-hover:text-hmif-primary transition-colors duration-300">
                                     <!-- Layout Dashboard Icon -->
                                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                                         stroke="currentColor" class="w-8 h-8">