fix(LimaEm): make all sections full-width, fix button hover inline style, add yellow glow on active partners

This commit is contained in:
2026-06-04 20:16:33 +07:00
parent bedac5851e
commit 54b00194a8
+44 -21
View File
@@ -1157,7 +1157,7 @@
<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 z-0" style="background: linear-gradient(to right, #003150 0%, rgba(0, 49, 80, 0.8) 50%, transparent 100%);"></div>
<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="relative z-10 w-full px-6 lg:px-16 xl:px-24 py-16 lg:py-24">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
@@ -1178,7 +1178,11 @@
</p> </p>
<button onclick="document.getElementById('divisi')?.scrollIntoView({behavior:'smooth'})" <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"> 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)';">
Lihat Struktur Kepengurusan Lihat Struktur Kepengurusan
</button> </button>
@@ -1192,7 +1196,7 @@
<!-- About Section --> <!-- About Section -->
<section id="about" class="bg-white overflow-hidden"> <section id="about" class="bg-white overflow-hidden">
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-16 pt-20 lg:pt-24 pb-16"> <div class="w-full px-6 lg:px-16 xl:px-24 pt-20 lg:pt-24 pb-16">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 items-start"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 items-start">
<!-- ─── Left: Text Content ─── --> <!-- ─── Left: Text Content ─── -->
@@ -1275,26 +1279,45 @@
<!-- Partner & Kolaborator --> <!-- Partner & Kolaborator -->
<section id="partners" class="bg-white py-16"> <section id="partners" class="bg-white py-16">
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12"> <div class="w-full px-6 lg:px-16 xl:px-24">
<h2 class="text-2xl lg:text-3xl font-extrabold text-gray-900 mb-10"> <h2 class="text-2xl lg:text-3xl font-extrabold text-gray-900 mb-10">
Partner dan Kolaborator Partner dan Kolaborator
</h2> </h2>
<div class="flex flex-wrap gap-6 lg:gap-10 items-center"> <div class="flex flex-wrap gap-6 lg:gap-10 items-center">
<!-- Partner Aktif (Terbaru) --> <!-- Partner Aktif (Terbaru) -->
<a href="https://www.instagram.com/namakucoffee.id?igsh=MXYyMnI3ZTNmMGxtZQ==" target="_blank" <div class="relative group flex flex-col items-center gap-2">
rel="noopener noreferrer" aria-label="Partner Aktif - Namaku"> <a href="https://www.instagram.com/namakucoffee.id?igsh=MXYyMnI3ZTNmMGxtZQ==" target="_blank"
<img src="./assets/images/ruang-tumbuh/partner/namaku.jpeg" alt="Namaku" class="w-16 h-16 lg:w-20 lg:h-20 rounded-full object-cover shadow-lg border-4 border-hmif-secondary rel="noopener noreferrer" aria-label="Partner Aktif - Namaku"
hover:scale-110 transition-transform duration-200 cursor-pointer" class="block relative">
title="Partner Terbaru" /> <!-- Yellow ring glow on hover -->
</a> <span class="absolute -inset-1 rounded-full bg-hmif-secondary opacity-0 group-hover:opacity-40 transition-opacity duration-300 blur-sm z-0" style="background-color:#feb401;"></span>
<img src="./assets/images/ruang-tumbuh/partner/namaku.jpeg" alt="Namaku"
class="relative z-10 w-16 h-16 lg:w-20 lg:h-20 rounded-full object-cover shadow-lg border-4 transition-all duration-300 cursor-pointer group-hover:scale-110 group-hover:shadow-xl"
style="border-color: #feb401;"
title="Partner Aktif" />
</a>
<!-- Label AKTIF -->
<span class="text-[10px] font-bold tracking-widest uppercase px-2 py-0.5 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 -translate-y-1 group-hover:translate-y-0"
style="background-color:#feb401; color:#003150;">AKTIF</span>
</div>
<!-- Partner Aktif (Sobat Konveksi) --> <!-- Partner Aktif (Sobat Konveksi) -->
<a href="https://www.instagram.com/sobat.konveksi?igsh=OWxkZGJtMjhjeDZj" target="_blank" <div class="relative group flex flex-col items-center gap-2">
rel="noopener noreferrer" aria-label="Partner Aktif - Sobat Konveksi"> <a href="https://www.instagram.com/sobat.konveksi?igsh=OWxkZGJtMjhjeDZj" target="_blank"
<img src="./assets/images/ruang-tumbuh/partner/sobatkonveksi.jpeg" alt="Sobat Konveksi" class="w-16 h-16 lg:w-20 lg:h-20 rounded-full object-cover shadow-lg border-4 border-hmif-secondary rel="noopener noreferrer" aria-label="Partner Aktif - Sobat Konveksi"
hover:scale-110 transition-transform duration-200 cursor-pointer" class="block relative">
title="Partner Aktif" /> <!-- Yellow ring glow on hover -->
</a> <span class="absolute -inset-1 rounded-full opacity-0 group-hover:opacity-40 transition-opacity duration-300 blur-sm z-0" style="background-color:#feb401;"></span>
<img src="./assets/images/ruang-tumbuh/partner/sobatkonveksi.jpeg" alt="Sobat Konveksi"
class="relative z-10 w-16 h-16 lg:w-20 lg:h-20 rounded-full object-cover shadow-lg border-4 transition-all duration-300 cursor-pointer group-hover:scale-110 group-hover:shadow-xl"
style="border-color: #feb401;"
title="Partner Aktif" />
</a>
<!-- Label AKTIF -->
<span class="text-[10px] font-bold tracking-widest uppercase px-2 py-0.5 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 -translate-y-1 group-hover:translate-y-0"
style="background-color:#feb401; color:#003150;">AKTIF</span>
</div>
<!-- Partner Lainnya (Legacy) - Tidak bisa diklik, hover ganti warna --> <!-- Partner Lainnya (Legacy) - Tidak bisa diklik, hover ganti warna -->
<div class="relative group"> <div class="relative group">
@@ -1327,7 +1350,7 @@
<!-- Divisi Kepengurusan HMIF Section --> <!-- Divisi Kepengurusan HMIF Section -->
<section id="divisi" class="bg-hmif-primary text-white py-20 lg:py-24"> <section id="divisi" class="bg-hmif-primary text-white py-20 lg:py-24">
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12"> <div class="w-full px-6 lg:px-16 xl:px-24">
<!-- Header --> <!-- Header -->
<div class="mb-12 md:mb-16 max-w-3xl"> <div class="mb-12 md:mb-16 max-w-3xl">
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-hmif-secondary leading-tight mb-4"> <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-hmif-secondary leading-tight mb-4">
@@ -1459,7 +1482,7 @@
<!-- Kegiatan Unggulan Section --> <!-- Kegiatan Unggulan Section -->
<section id="kegiatan-unggulan" class="bg-white py-20 lg:py-24"> <section id="kegiatan-unggulan" class="bg-white py-20 lg:py-24">
<div class="max-w-none mx-auto px-6 lg:px-16 xl:px-24 relative w-full"> <div class="w-full px-6 lg:px-16 xl:px-24 relative">
<!-- Header --> <!-- Header -->
<div class="mb-12"> <div class="mb-12">
<h2 class="text-3xl font-extrabold text-hmif-primary tracking-tight"> <h2 class="text-3xl font-extrabold text-hmif-primary tracking-tight">
@@ -1666,7 +1689,7 @@
<!-- Study Club Section --> <!-- Study Club Section -->
<section id="study-clubs" class="bg-[#EEF2FC]/70 py-20 lg:py-24 border-t border-b border-gray-100"> <section id="study-clubs" class="bg-[#EEF2FC]/70 py-20 lg:py-24 border-t border-b border-gray-100">
<div class="max-w-none mx-auto px-6 lg:px-16 xl:px-24 w-full"> <div class="w-full px-6 lg:px-16 xl:px-24">
<!-- Centered Header --> <!-- Centered Header -->
<div class="text-center max-w-3xl mx-auto mb-16 flex flex-col items-center"> <div class="text-center max-w-3xl mx-auto mb-16 flex flex-col items-center">
<h2 class="text-2xl font-extrabold text-hmif-primary tracking-widest uppercase"> <h2 class="text-2xl font-extrabold text-hmif-primary tracking-widest uppercase">
@@ -1749,7 +1772,7 @@
<!-- Galeri Keseruan Section --> <!-- Galeri Keseruan Section -->
<section id="galeri" class="bg-white py-20 lg:py-24"> <section id="galeri" class="bg-white py-20 lg:py-24">
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12"> <div class="w-full px-6 lg:px-16 xl:px-24">
<!-- Header --> <!-- Header -->
<div class="text-center mb-12"> <div class="text-center mb-12">
@@ -1924,7 +1947,7 @@
<!-- CTA Section --> <!-- CTA Section -->
<section id="contact-cta" class="bg-[#EEF2FC] py-16 lg:py-20"> <section id="contact-cta" class="bg-[#EEF2FC] py-16 lg:py-20">
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12"> <div class="w-full px-6 lg:px-16 xl:px-24">
<div <div
class="relative overflow-hidden rounded-[24px] bg-[#082A4B] px-5 py-10 sm:px-8 sm:py-12 lg:px-16 lg:py-14 shadow-[0_24px_70px_rgba(4,17,31,0.32)]"> class="relative overflow-hidden rounded-[24px] bg-[#082A4B] px-5 py-10 sm:px-8 sm:py-12 lg:px-16 lg:py-14 shadow-[0_24px_70px_rgba(4,17,31,0.32)]">