Compare commits

...

3 Commits

3 changed files with 107 additions and 55 deletions
+2 -2
View File
@@ -571,7 +571,7 @@ const translations = {
kontrib_guideline_5: "Tim redaksi berhak menyunting konten untuk keperluan editorial.",
grp_limaem_hero_badge: "KOMUNITAS & KEPEMIMPINAN",
grp_limaem_hero_title: "Kehidupan Mahasiswa & Himpunan (HMIF)",
grp_limaem_hero_title: "Kehidupan Mahasiswa & <span style=\"color:#f5c82f;\">Himpunan (HMIF)</span>",
grp_limaem_hero_desc: "Membangun ekosistem kolaboratif di mana teknologi bertemu dengan kreativitas, membentuk calon pemimpin industri masa depan.",
grp_limaem_hero_btn: "Lihat Struktur Kepengurusan",
@@ -1207,7 +1207,7 @@ const translations = {
kontrib_guideline_5: "The editorial team reserves the right to edit content for editorial purposes.",
grp_limaem_hero_badge: "COMMUNITY & LEADERSHIP",
grp_limaem_hero_title: "Student Life & Student Association (HMIF)",
grp_limaem_hero_title: "Student Life & <span style=\"color:#f5c82f;\">Student Association (HMIF)</span>",
grp_limaem_hero_desc: "Building a collaborative ecosystem where technology meets creativity, shaping the industry leaders of tomorrow.",
grp_limaem_hero_btn: "View Organizational Structure",
+105 -52
View File
@@ -310,6 +310,11 @@
height: 500px !important;
}
}
/* Fix: title divisi berubah kuning saat hover */
#divisi .group:hover h3 {
color: #f5c82f !important;
}
</style>
</head>
<body class="text-slate-800 antialiased bg-white selection:bg-untan-yellow selection:text-black">
@@ -1190,7 +1195,7 @@
COMMUNITY & LEADERSHIP
</div>
<h1 data-i18n="grp_limaem_hero_title" class="text-3xl md:text-4xl lg:text-5xl font-bold text-white leading-tight">
<h1 data-i18n-html="grp_limaem_hero_title" class="text-3xl md:text-4xl lg:text-5xl font-bold text-white leading-tight">
Kehidupan Mahasiswa & <span style="color:#feb401;">Himpunan (HMIF)</span>
</h1>
@@ -1310,50 +1315,98 @@
</h2>
<div class="flex flex-wrap gap-6 lg:gap-10 items-center">
<!-- Partner Aktif (Terbaru) -->
<!-- Partner Aktif (Terbaru) - ring kuning + glow -->
<a href="https://www.instagram.com/namakucoffee.id?igsh=MXYyMnI3ZTNmMGxtZQ==" target="_blank"
rel="noopener noreferrer" aria-label="Partner Aktif - Namaku">
<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
hover:scale-110 transition-transform duration-200 cursor-pointer"
title="Partner Terbaru" />
</a>
<!-- Partner Aktif (Sobat Konveksi) -->
<a href="https://www.instagram.com/sobat.konveksi?igsh=OWxkZGJtMjhjeDZj" target="_blank"
rel="noopener noreferrer" aria-label="Partner Aktif - Sobat Konveksi">
<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
hover:scale-110 transition-transform duration-200 cursor-pointer"
title="Partner Aktif" />
rel="noopener noreferrer" aria-label="Partner Aktif - Namaku"
style="display:inline-block; border-radius:9999px; transition: transform 0.2s ease;"
onmouseover="this.style.transform='scale(1.1)'"
onmouseout="this.style.transform='scale(1)'">
<img src="./assets/images/ruang-tumbuh/partner/namaku.jpeg" alt="Namaku"
title="Partner Aktif"
style="width:5rem; height:5rem; border-radius:9999px; object-fit:cover; display:block;
border: 4px solid #feb401;
box-shadow: 0 0 0 2px rgba(254,180,1,0.4), 0 4px 16px rgba(254,180,1,0.3);
transition: box-shadow 0.2s ease;" />
</a>
<!-- Partner Lainnya (Legacy) - Tidak bisa diklik, hover ganti warna -->
<div class="relative group">
<img src="./assets/images/ruang-tumbuh/partner/ayanimegamall.jpeg" alt="Ayani Megamall" class="w-14 h-14 lg:w-16 lg:h-16 rounded-full object-cover shadow-md grayscale hover:grayscale-0
hover:scale-110 hover:shadow-lg transition-all duration-300" />
<!-- Partner Aktif (Sobat Konveksi) - ring kuning + glow -->
<a href="https://www.instagram.com/sobat.konveksi?igsh=OWxkZGJtMjhjeDZj" target="_blank"
rel="noopener noreferrer" aria-label="Partner Aktif - Sobat Konveksi"
style="display:inline-block; border-radius:9999px; transition: transform 0.2s ease;"
onmouseover="this.style.transform='scale(1.1)'"
onmouseout="this.style.transform='scale(1)'">
<img src="./assets/images/ruang-tumbuh/partner/sobatkonveksi.jpeg" alt="Sobat Konveksi"
title="Partner Aktif"
style="width:5rem; height:5rem; border-radius:9999px; object-fit:cover; display:block;
border: 4px solid #feb401;
box-shadow: 0 0 0 2px rgba(254,180,1,0.4), 0 4px 16px rgba(254,180,1,0.3);
transition: box-shadow 0.2s ease;" />
</a>
<!-- Partner Legacy (Ayani) - abu-abu, hover tampil warna asli -->
<div style="display:inline-block; border-radius:9999px; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor:default;"
onmouseover="this.style.transform='scale(1.1)'; this.querySelector('img').style.filter='grayscale(0%)';"
onmouseout="this.style.transform='scale(1)'; this.querySelector('img').style.filter='grayscale(100%)';">
<img src="./assets/images/ruang-tumbuh/partner/ayanimegamall.jpeg" alt="Ayani Megamall"
style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
filter: grayscale(100%); transition: filter 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);" />
</div>
<div class="relative group">
<img src="./assets/images/ruang-tumbuh/partner/indofood.jpeg" alt="Indofood" class="w-14 h-14 lg:w-16 lg:h-16 rounded-full object-cover shadow-md grayscale hover:grayscale-0
hover:scale-110 hover:shadow-lg transition-all duration-300" />
<!-- Partner Legacy (Indofood) -->
<div style="display:inline-block; border-radius:9999px; transition: transform 0.3s ease; cursor:default;"
onmouseover="this.style.transform='scale(1.1)'; this.querySelector('img').style.filter='grayscale(0%)';"
onmouseout="this.style.transform='scale(1)'; this.querySelector('img').style.filter='grayscale(100%)';">
<img src="./assets/images/ruang-tumbuh/partner/indofood.jpeg" alt="Indofood"
style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
filter: grayscale(100%); transition: filter 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);" />
</div>
<div class="relative group">
<img src="./assets/images/ruang-tumbuh/partner/playhera.jpeg" alt="Playhera" class="w-14 h-14 lg:w-16 lg:h-16 rounded-full object-cover shadow-md grayscale hover:grayscale-0
hover:scale-110 hover:shadow-lg transition-all duration-300" />
<!-- Partner Legacy (Playhera) -->
<div style="display:inline-block; border-radius:9999px; transition: transform 0.3s ease; cursor:default;"
onmouseover="this.style.transform='scale(1.1)'; this.querySelector('img').style.filter='grayscale(0%)';"
onmouseout="this.style.transform='scale(1)'; this.querySelector('img').style.filter='grayscale(100%)';">
<img src="./assets/images/ruang-tumbuh/partner/playhera.jpeg" alt="Playhera"
style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
filter: grayscale(100%); transition: filter 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);" />
</div>
<div class="relative group">
<img src="./assets/images/ruang-tumbuh/partner/pln.jpeg" alt="PLN" class="w-14 h-14 lg:w-16 lg:h-16 rounded-full object-cover shadow-md grayscale hover:grayscale-0
hover:scale-110 hover:shadow-lg transition-all duration-300" />
<!-- Partner Legacy (PLN) -->
<div style="display:inline-block; border-radius:9999px; transition: transform 0.3s ease; cursor:default;"
onmouseover="this.style.transform='scale(1.1)'; this.querySelector('img').style.filter='grayscale(0%)';"
onmouseout="this.style.transform='scale(1)'; this.querySelector('img').style.filter='grayscale(100%)';">
<img src="./assets/images/ruang-tumbuh/partner/pln.jpeg" alt="PLN"
style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
filter: grayscale(100%); transition: filter 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);" />
</div>
<div class="relative group">
<img src="./assets/images/ruang-tumbuh/partner/rtech.jpeg" alt="RTech" class="w-14 h-14 lg:w-16 lg:h-16 rounded-full object-cover shadow-md grayscale hover:grayscale-0
hover:scale-110 hover:shadow-lg transition-all duration-300" />
<!-- Partner Legacy (RTech) -->
<div style="display:inline-block; border-radius:9999px; transition: transform 0.3s ease; cursor:default;"
onmouseover="this.style.transform='scale(1.1)'; this.querySelector('img').style.filter='grayscale(0%)';"
onmouseout="this.style.transform='scale(1)'; this.querySelector('img').style.filter='grayscale(100%)';">
<img src="./assets/images/ruang-tumbuh/partner/rtech.jpeg" alt="RTech"
style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
filter: grayscale(100%); transition: filter 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);" />
</div>
<div class="relative group">
<img src="./assets/images/ruang-tumbuh/partner/rumangsa.jpeg" alt="Rumangsa" class="w-14 h-14 lg:w-16 lg:h-16 rounded-full object-cover shadow-md grayscale hover:grayscale-0
hover:scale-110 hover:shadow-lg transition-all duration-300" />
<!-- Partner Legacy (Rumangsa) -->
<div style="display:inline-block; border-radius:9999px; transition: transform 0.3s ease; cursor:default;"
onmouseover="this.style.transform='scale(1.1)'; this.querySelector('img').style.filter='grayscale(0%)';"
onmouseout="this.style.transform='scale(1)'; this.querySelector('img').style.filter='grayscale(100%)';">
<img src="./assets/images/ruang-tumbuh/partner/rumangsa.jpeg" alt="Rumangsa"
style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
filter: grayscale(100%); transition: filter 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);" />
</div>
</div>
</div>
</section>
<!-- Divisi Kepengurusan HMIF Section -->
<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">
@@ -1372,7 +1425,7 @@
<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">
<!-- 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-default p-8 lg:p-10">
<span data-i18n="grp_limaem_divisi_b1_label"
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
@@ -1391,7 +1444,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-default p-8 lg:p-10">
<span data-i18n="grp_limaem_divisi_b2_label"
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
@@ -1409,7 +1462,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-default p-8 lg:p-10">
<span data-i18n="grp_limaem_divisi_b3_label"
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
@@ -1428,7 +1481,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-default p-8 lg:p-10">
<span data-i18n="grp_limaem_divisi_b4_label"
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
@@ -1447,7 +1500,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-default p-8 lg:p-10">
<span data-i18n="grp_limaem_divisi_b5_label"
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
@@ -1465,7 +1518,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-default p-8 lg:p-10">
<span data-i18n="grp_limaem_divisi_b6_label"
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
@@ -1619,7 +1672,7 @@
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
<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"
<img src="./assets/images/kegiatan-unggulan/upc.jpg" alt="UPC 2025"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</div>
<div class="flex items-start gap-4 mt-6">
@@ -1643,7 +1696,7 @@
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
<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"
<img src="./assets/images/kegiatan-unggulan/informers.jpg" alt="Ultah Informatika"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</div>
<div class="flex items-start gap-4 mt-6">
@@ -1813,22 +1866,22 @@
<!-- Foto besar kiri (span 2 baris) -->
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
class="block w-full h-full col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
<img src="./assets/images/galeri-keseruan/DSC00636.JPG" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
<img src="./assets/images/galeri-keseruan/DSC00636.jpg" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a>
<!-- Foto kecil kanan atas 1 -->
<a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer"
class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
<img src="./assets/images/galeri-keseruan/Copy of DSC09492.JPG" alt="Gemastik" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
<img src="./assets/images/galeri-keseruan/Copy of DSC09492.jpg" alt="Gemastik" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a>
<!-- Foto kecil kanan atas 2 -->
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA==" target="_blank" rel="noopener noreferrer"
class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
<img src="./assets/images/galeri-keseruan/IMG_0204.JPG" alt="INFORMERS" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
<img src="./assets/images/galeri-keseruan/IMG_0204.jpg" alt="INFORMERS" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a>
<!-- Foto lebar kanan bawah (span 2 kolom) -->
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
class="hidden md:block w-full h-full col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
<img src="./assets/images/galeri-keseruan/DSC00456.JPG" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
<img src="./assets/images/galeri-keseruan/DSC00456.jpg" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a>
</div>
</div>
@@ -1838,19 +1891,19 @@
<div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 galeri-grid">
<a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer"
class="block w-full h-full col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
<img src="./assets/images/galeri-keseruan/DSCF8922.JPG" alt="Ulang Tahun Informatika" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
<img src="./assets/images/galeri-keseruan/DSCF8922.jpg" alt="Ulang Tahun Informatika" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a>
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
<img src="./assets/images/galeri-keseruan/DSC00091.JPG" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
<img src="./assets/images/galeri-keseruan/DSC00091.jpg" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a>
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
<img src="./assets/images/galeri-keseruan/DSC03316.JPG" alt="Silaturahmi Keluarga Besar Informatika" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
<img src="./assets/images/galeri-keseruan/DSC03316.jpg" alt="Silaturahmi Keluarga Besar Informatika" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a>
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA==" target="_blank" rel="noopener noreferrer"
class="hidden md:block w-full h-full col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
<img src="./assets/images/galeri-keseruan/IMG_5705.JPG" alt="INFORMERS" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
<img src="./assets/images/galeri-keseruan/IMG_5705.jpg" alt="INFORMERS" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a>
</div>
</div>
@@ -1860,19 +1913,19 @@
<div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 galeri-grid">
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
class="block w-full h-full col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
<img src="./assets/images/galeri-keseruan/DSC00252.JPG" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
<img src="./assets/images/galeri-keseruan/DSC00252.jpg" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a>
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
<img src="./assets/images/galeri-keseruan/DSC00519.JPG" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
<img src="./assets/images/galeri-keseruan/DSC00519.jpg" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a>
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA==" target="_blank" rel="noopener noreferrer"
class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
<img src="./assets/images/galeri-keseruan/IMG_0030.JPG" alt="INFORMERS" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
<img src="./assets/images/galeri-keseruan/IMG_0030.jpg" alt="INFORMERS" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a>
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
class="hidden md:block w-full h-full col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
<img src="./assets/images/galeri-keseruan/DSC01002.JPG" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
<img src="./assets/images/galeri-keseruan/DSC01002.jpg" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a>
</div>
</div>
-1
View File
@@ -917,7 +917,6 @@
"integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
"dev": true,
"license": "MIT",
"peer": true,
"engines": {
"node": ">=12"
},