fix(LimaEm): sync Hero section to exactly match reference HMIF page — gradient, text size, badge, button

This commit is contained in:
2026-06-04 20:32:02 +07:00
parent 35f1dd3865
commit 61f43b726a
+5 -9
View File
@@ -1156,21 +1156,21 @@
<img id="api-hero-bg" src="./assets/images/bg-kehidupan-mahasiswa.png" alt="Foto Kegiatan Mahasiswa"
class="absolute inset-0 w-full h-full object-cover z-0" />
<div class="absolute inset-0 z-0" style="background: linear-gradient(to right, #003150 0%, rgba(0, 49, 80, 0.8) 50%, transparent 100%);"></div>
<div class="absolute inset-0 bg-gradient-to-r from-hmif-primary via-hmif-primary/80 to-transparent z-0"></div>
<div class="relative z-10 w-full px-6 lg:px-16 xl:px-24 py-16 lg:py-24">
<div class="relative z-10 max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12 py-16 lg:py-24 w-full">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<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 ring-1 ring-hmif-secondary/30 backdrop-blur-sm hover:bg-hmif-secondary/25 transition-all duration-300 cursor-default">
class="bg-hmif-secondary/15 text-hmif-secondary font-bold text-xs md:text-sm px-3 py-1 rounded-full">
COMMUNITY &amp; LEADERSHIP
</div>
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-white leading-tight">
Kehidupan Mahasiswa & <span class="text-hmif-secondary" style="color:var(--color-hmif-secondary)">Himpunan (HMIF)</span>
Kehidupan Mahasiswa &amp; <span class="text-hmif-secondary" style="color:var(--color-hmif-secondary)">Himpunan (HMIF)</span>
</h1>
<p class="text-base md:text-lg text-gray-300 font-light leading-relaxed max-w-xl">
@@ -1179,11 +1179,7 @@
</p>
<button onclick="document.getElementById('divisi')?.scrollIntoView({behavior:'smooth'})"
style="margin-top:1rem; background:transparent; border: 2px solid white; color:white; font-weight:700; font-size:0.875rem; padding: 0.75rem 1.5rem; border-radius:6px; cursor:pointer; transition: all 0.25s ease;"
onmouseover="this.style.background='#feb401'; this.style.color='#003150'; this.style.borderColor='#feb401'; this.style.transform='scale(1.05)'; this.style.boxShadow='0 10px 25px rgba(254,180,1,0.4)';"
onmouseout="this.style.background='transparent'; this.style.color='white'; this.style.borderColor='white'; this.style.transform='scale(1)'; this.style.boxShadow='none';"
onmousedown="this.style.transform='scale(0.96)';"
onmouseup="this.style.transform='scale(1.05)';">
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">
Lihat Struktur Kepengurusan
</button>