enhance(LimaEm): restore missing hover/interaction effects across all sections

This commit is contained in:
2026-06-04 20:01:05 +07:00
parent 034b131c12
commit bedac5851e
+31 -31
View File
@@ -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">