feat(lima-em): menambahkan implementasi fitur bilingual ID-EN pada konten

This commit is contained in:
powji17
2026-06-04 20:01:23 +07:00
parent 243541d1e4
commit 7996ee0186
2 changed files with 194 additions and 55 deletions
+54 -55
View File
@@ -1140,7 +1140,7 @@
</div>
</div>
<main id="main-content" class="pt-[88px] lg:pt-[160px] min-h-screen bg-white">
<main id="main-content" class="pt-[88px] lg:pt-[160px] min-h-screen bg-white">
<div class="container mx-auto px-4 lg:px-8 py-12">
<div class="mb-8 pb-8 border-b border-slate-200">
<span class="bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 inline-block mb-3">Tugas Halaman Statis</span>
@@ -1163,21 +1163,21 @@
<div class="flex flex-col items-start text-left space-y-6">
<div
<div data-i18n="grp_limaem_hero_badge"
class="bg-hmif-secondary/15 text-hmif-secondary font-bold text-xs md:text-sm px-3 py-1 rounded-full">
COMMUNITY & LEADERSHIP
</div>
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-white leading-tight">
<h1 data-i18n="grp_limaem_hero_title" 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>
</h1>
<p class="text-base md:text-lg text-gray-300 font-light leading-relaxed max-w-xl">
<p data-i18n="grp_limaem_hero_desc" class="text-base md:text-lg text-gray-300 font-light leading-relaxed max-w-xl">
Membangun ekosistem kolaboratif di mana teknologi bertemu dengan
kreativitas, membentuk calon pemimpin industri masa depan.
</p>
<button
<button data-i18n="grp_limaem_hero_btn"
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>
@@ -1199,18 +1199,18 @@
<div class="flex flex-col gap-8 order-1 lg:pr-6">
<!-- Heading -->
<h2 class="text-3xl lg:text-4xl xl:text-5xl font-extrabold text-hmif-primary leading-snug">
<h2 data-i18n="grp_limaem_about_title" class="text-3xl lg:text-4xl xl:text-5xl font-extrabold text-hmif-primary leading-snug">
Ruang Tumbuh Bagi<br>Mahasiswa Informatika
</h2>
<!-- Paragraf -->
<div class="space-y-4 text-gray-500 text-base lg:text-[17px] leading-relaxed">
<p>
<p data-i18n="grp_limaem_about_p1">
Himpunan Mahasiswa Informatika (HMIF) Universitas Tanjungpura bukan sekadar
organisasi, melainkan rumah bagi para pemimpin teknologi. Kami percaya bahwa
pendidikan formal adalah fondasi, namun komunitas adalah akselerator.
</p>
<p>
<p data-i18n="grp_limaem_about_p2">
Melalui berbagai inisiatif, kami menjembatani kesenjangan antara kurikulum
akademik dan kebutuhan industri, sambil tetap menjaga semangat kekeluargaan
dan integritas ilmiah.
@@ -1223,7 +1223,7 @@
<p
class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums">
518</p>
<p class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3">
<p data-i18n="grp_limaem_about_stat_students" class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3">
Mahasiswa Aktif
</p>
</div>
@@ -1231,7 +1231,7 @@
<p
class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums">
8</p>
<p class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3">
<p data-i18n="grp_limaem_about_stat_partners" class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3">
MITRA
</p>
</div>
@@ -1267,7 +1267,7 @@
<path stroke-linecap="round" stroke-linejoin="round"
d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197m6.22-7.496a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6-3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-12 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
</svg>
<p class="text-[11px] lg:text-xs font-bold leading-snug">
<p data-i18n="grp_limaem_about_badge" class="text-[11px] lg:text-xs font-bold leading-snug">
Inklusivitas &<br>Kolaborasi
</p>
</div>
@@ -1277,11 +1277,10 @@
</div>
</section>
<!-- Partner & Kolaborator -->
<section id="partners" class="bg-white py-16">
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
<h2 class="text-2xl lg:text-3xl font-extrabold text-gray-900 mb-10">
<h2 data-i18n="grp_limaem_partners_title" class="text-2xl lg:text-3xl font-extrabold text-gray-900 mb-10">
Partner dan Kolaborator
</h2>
@@ -1335,10 +1334,10 @@
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
<!-- Header -->
<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 data-i18n="grp_limaem_divisi_title" class="text-3xl md:text-4xl lg:text-5xl font-bold text-hmif-secondary leading-tight mb-4">
Divisi Kepengurusan HMIF
</h2>
<p class="text-base md:text-lg text-slate-300 font-light leading-relaxed">
<p data-i18n="grp_limaem_divisi_desc" class="text-base md:text-lg text-slate-300 font-light leading-relaxed">
Struktur organisasi yang dirancang untuk efisiensi dan pengembangan kapasitas anggota di berbagai
bidang strategis.
</p>
@@ -1349,15 +1348,15 @@
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">
<span
<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
</span>
<h3
<h3 data-i18n="grp_limaem_divisi_b1_title"
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
Pengembangan Sumber Daya Mahasiswa dan Kaderisasi
</h3>
<p class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
<p data-i18n="grp_limaem_divisi_b1_desc" class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
Divisi ini menyelenggarakan kaderisasi terstruktur, mentoring berkala, dan pelatihan
kepemimpinan serta soft-skill. Program kerja mencakup onboarding anggota baru,
workshop kepemimpinan, proyek kolaboratif, dan kegiatan pengabdian yang melatih
@@ -1368,15 +1367,15 @@
<!-- Bidang 2 -->
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
<span
<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
</span>
<h3
<h3 data-i18n="grp_limaem_divisi_b2_title"
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
Media Komunikasi dan Konten Digital
</h3>
<p class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
<p data-i18n="grp_limaem_divisi_b2_desc" class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
Divisi ini mengelola strategi komunikasi dan produksi konten HMIF, termasuk
perencanaan editorial, manajemen media sosial, serta dokumentasi acara. Program
kerjanya meliputi pembuatan materi promosi, publikasi kegiatan, dan penguatan
@@ -1386,15 +1385,15 @@
<!-- Bidang 3 -->
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
<span
<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
</span>
<h3
<h3 data-i18n="grp_limaem_divisi_b3_title"
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
Inovasi dan Kompetisi Teknologi
</h3>
<p class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
<p data-i18n="grp_limaem_divisi_b3_desc" class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
Divisi ini memfasilitasi persiapan lomba dan pengembangan proyek teknis melalui
coaching clinic, bootcamp berbasis proyek, serta study club untuk Competitive
Programming, Software Development, dan Data/ML. Kegiatan termasuk seleksi internal,
@@ -1405,15 +1404,15 @@
<!-- Bidang 4 -->
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
<span
<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
</span>
<h3
<h3 data-i18n="grp_limaem_divisi_b4_title"
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
Pengembangan Organisasi
</h3>
<p class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
<p data-i18n="grp_limaem_divisi_b4_desc" class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
Divisi ini memperkuat tata kelola dan kapabilitas internal melalui pelatihan
pengurus, penyusunan SOP sederhana, dan evaluasi proses kerja. Program kerjanya
mencakup pengembangan budaya organisasi, peningkatan efektivitas koordinasi, dan
@@ -1424,15 +1423,15 @@
<!-- Bidang 5 -->
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
<span
<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
</span>
<h3
<h3 data-i18n="grp_limaem_divisi_b5_title"
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
Sosial Masyarakat
</h3>
<p class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
<p data-i18n="grp_limaem_divisi_b5_desc" class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
Divisi ini merancang dan melaksanakan program pengabdian serta aksi sosial yang
berdampak, termasuk pendampingan komunitas dan bantuan kemanusiaan. Kegiatan
meliputi identifikasi kebutuhan lapangan, pelaksanaan terstruktur, dan evaluasi
@@ -1442,15 +1441,15 @@
<!-- Bidang 6 -->
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
<span
<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
</span>
<h3
<h3 data-i18n="grp_limaem_divisi_b6_title"
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
Kewirausahaan dan Kemitraan
</h3>
<p class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
<p data-i18n="grp_limaem_divisi_b6_desc" class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
Divisi ini mengembangkan unit usaha organisasi, merancang skema pendanaan kreatif,
dan menjalin kemitraan strategis untuk mendukung keberlanjutan program HMIF. Unit
kerjanya meliputi riset peluang usaha, penyusunan proposal kemitraan, dan
@@ -1467,10 +1466,10 @@
<div class="max-w-none mx-auto px-6 lg:px-16 xl:px-24 relative w-full">
<!-- Header -->
<div class="mb-12">
<h2 class="text-3xl font-extrabold text-hmif-primary tracking-tight">
<h2 data-i18n="grp_limaem_kegiatan_title" class="text-3xl font-extrabold text-hmif-primary tracking-tight">
Kegiatan Unggulan
</h2>
<p class="text-sm text-gray-500 mt-2 font-medium">
<p data-i18n="grp_limaem_kegiatan_subtitle" class="text-sm text-gray-500 mt-2 font-medium">
Kegiatan tahunan yang menjadi ikon Informatika UNTAN.
</p>
</div>
@@ -1507,10 +1506,10 @@
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Feb</span>
</div>
<div class="space-y-1">
<h3
<h3 data-i18n="grp_limaem_kegiatan_c1_title"
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
Silaturahmi Keluarga Besar Informatika</h3>
<p class="text-sm text-gray-500 leading-relaxed font-light">Kegiatan buka bersama
<p data-i18n="grp_limaem_kegiatan_c1_desc" class="text-sm text-gray-500 leading-relaxed font-light">Kegiatan buka bersama
seluruh keluarga Informatika Untan yang selalu diadakan setiap tahunnya.</p>
</div>
</div>
@@ -1534,7 +1533,7 @@
<h3
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
GEMASTIK</h3>
<p class="text-sm text-gray-500 leading-relaxed font-light"> Ajang kompetisi IT bergengsi tingkat nasional tahunan dari kementerian.
<p data-i18n="grp_limaem_kegiatan_c2_desc" class="text-sm text-gray-500 leading-relaxed font-light"> Ajang kompetisi IT bergengsi tingkat nasional tahunan dari kementerian.
Wadah bagi mahasiswa Informatika UNTAN untuk unjuk
gigi di bidang <em>programming</em>, <em>cyber security</em>, <em>data mining</em>, hingga UI/UX.
</p>
@@ -1557,10 +1556,10 @@
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Agu</span>
</div>
<div class="space-y-1">
<h3
<h3 data-i18n="grp_limaem_kegiatan_c3_title"
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
Perayaan 17 Agustus</h3>
<p class="text-sm text-gray-500 leading-relaxed font-light">Momen perayaan Hari Kemerdekaan Indonesia yang diisi dengan berbagai perlombaan menarik.
<p data-i18n="grp_limaem_kegiatan_c3_desc" class="text-sm text-gray-500 leading-relaxed font-light">Momen perayaan Hari Kemerdekaan Indonesia yang diisi dengan berbagai perlombaan menarik.
Ajang seru-seruan bersama untuk mempererat rasa nasionalisme dan kekeluargaan mahasiswa Informatika.</p>
</div>
</div>
@@ -1584,7 +1583,7 @@
<h3
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
Bootcamp HMIF</h3>
<p class="text-sm text-gray-500 leading-relaxed font-light">Program intensif
<p data-i18n="grp_limaem_kegiatan_c4_desc" class="text-sm text-gray-500 leading-relaxed font-light">Program intensif
pengembangan skill teknis mahasiswa Informatika bersama mentor profesional dari
industri.</p>
</div>
@@ -1608,7 +1607,7 @@
<h3
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
UPC</h3>
<p class="text-sm text-gray-500 leading-relaxed font-light">Kompetisi Pemograman untuk
<p data-i18n="grp_limaem_kegiatan_c5_desc" class="text-sm text-gray-500 leading-relaxed font-light">Kompetisi Pemograman untuk
mengasah skill coding mahasiswa Informatika.</p>
</div>
</div>
@@ -1632,7 +1631,7 @@
<h3
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
INFORMERS</h3>
<p class="text-sm text-gray-500 leading-relaxed font-light">Perayaan ulang tahun
<p data-i18n="grp_limaem_kegiatan_c6_desc" class="text-sm text-gray-500 leading-relaxed font-light">Perayaan ulang tahun
Informatika UNTAN, momen kebersamaan dan kebanggaan seluruh keluarga besar
Informatika.</p>
</div>
@@ -1697,7 +1696,7 @@
<h3 class="text-lg font-bold text-hmif-primary">
ARISE
</h3>
<p class="text-sm text-gray-500 leading-relaxed font-light">
<p data-i18n="grp_limaem_sc_arise_desc" class="text-sm text-gray-500 leading-relaxed font-light">
Belajar logika dan algoritma bersama, di mana kalian bisa berkembang dan membuka peluang
mengikuti kompetisi pemrograman di berbagai level.
</p>
@@ -1719,7 +1718,7 @@
<h3 class="text-lg font-bold text-hmif-primary">
MINERVA
</h3>
<p class="text-sm text-gray-500 leading-relaxed font-light">
<p data-i18n="grp_limaem_sc_minerva_desc" class="text-sm text-gray-500 leading-relaxed font-light">
Gali potensi tersembunyi dari tumpukan data! Di sini kita akan bereksplorasi dengan
algoritma <em>Machine Learning</em>, membedah teknik klasifikasi, hingga melatih model
prediktif untuk menghasilkan <em>insight</em> yang bermakna.
@@ -1741,7 +1740,7 @@
<h3 class="text-lg font-bold text-hmif-primary">
Software Development (Soon)
</h3>
<p class="text-sm text-gray-500 leading-relaxed font-light">
<p data-i18n="grp_limaem_sc_sd_desc" class="text-sm text-gray-500 leading-relaxed font-light">
Wujudkan idemu jadi produk digital yang nyata! Kita akan ngoding bareng dari merancang
<em>frontend</em> yang interaktif, membangun <em>backend</em> yang tangguh, serta
mengintegrasikan berbagai API untuk menciptakan aplikasi web masa kini.
@@ -1758,7 +1757,7 @@
<!-- Header -->
<div class="text-center mb-12">
<h2 class="text-3xl lg:text-4xl font-bold text-hmif-primary">
<h2 data-i18n="grp_limaem_galeri_title" class="text-3xl lg:text-4xl font-bold text-hmif-primary">
Galeri Keseruan
</h2>
</div>
@@ -1939,18 +1938,18 @@
<div class="relative z-10">
<div class="mx-auto max-w-4xl text-center">
<h2 class="text-2xl sm:text-3xl lg:text-[38px] font-bold leading-tight text-white">
<h2 data-i18n="grp_limaem_cta_title" class="text-2xl sm:text-3xl lg:text-[38px] font-bold leading-tight text-white">
Ada yang Ingin Ditanyakan Seputar HMIF?
</h2>
<p
<p data-i18n="grp_limaem_cta_desc"
class="mx-auto mt-4 max-w-2xl text-xs sm:text-sm lg:text-[15px] leading-relaxed text-white/72">
Bergabunglah dengan HMIF untuk memperluas jaringan, mengasah skill, dan
menciptakan dampak nyata.
</p>
<div class="mt-7 flex flex-col items-center justify-center gap-3 sm:flex-row">
<a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer"
<a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer" data-i18n="grp_limaem_cta_btn"
class="inline-flex items-center justify-center rounded-lg bg-hmif-secondary px-6 py-3 text-sm font-bold text-hmif-primary shadow-[0_10px_24px_rgba(245,200,47,0.35)] transition-transform duration-200 hover:-translate-y-0.5">
Hubungi Kami
</a>
@@ -1982,27 +1981,27 @@
<div class="mt-10 border-t border-white/10 pt-8 lg:mt-12 lg:pt-10">
<div class="grid grid-cols-1 gap-8 md:grid-cols-3 md:gap-6">
<div class="text-center md:px-4">
<p class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
<p data-i18n="grp_limaem_cta_info1_label" class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
Sekretariat
</p>
<p class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
<p data-i18n="grp_limaem_cta_info1_val" class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
Gedung Fakultas Teknik Lt. 2<br>
Jl. Prof. Dr. H. Hadari Nawawi
</p>
</div>
<div class="text-center md:px-4 md:border-x md:border-white/10">
<p class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
<p data-i18n="grp_limaem_cta_info2_label" class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
Jam Operasional
</p>
<p class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
<p data-i18n="grp_limaem_cta_info2_val"class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
Senin - Jumat<br>
08:00 - 17:00 WIB
</p>
</div>
<div class="text-center md:px-4">
<p class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
<p data-i18n="grp_limaem_cta_info3_label" class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
Media Sosial
</p>
<p class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">