fix(limaem): correct asset paths

groups/LimaEm/assets/js/main.js

@@ -0,0 +1,564 @@
+// =============================================================================
+// main.js — Logika Interaksi Halaman HMIF
+//
+// Struktur:
+//   1. Mobile Menu        — Toggle menu navigasi mobile
+//   2. Language Toggle    — Terjemahan halaman ID/EN
+//   3. Galeri Keseruan    — Slider bento grid foto keseruan
+//   4. Kegiatan Unggulan  — Slider kartu kegiatan tahunan
+// =============================================================================
+
+
+// =============================================================================
+// 1. MOBILE MENU
+// Toggle visibilitas menu navigasi pada tampilan mobile.
+// =============================================================================
+
+(function () {
+    var mobileMenuButton = document.getElementById('mobile-menu-button');
+    var mobileMenu       = document.getElementById('mobile-menu');
+
+    if (!mobileMenuButton || !mobileMenu) return;
+
+    mobileMenuButton.addEventListener('click', function () {
+        var isHidden = mobileMenu.classList.contains('hidden');
+        mobileMenu.classList.toggle('hidden', !isHidden);
+        mobileMenuButton.setAttribute('aria-expanded', String(isHidden));
+    });
+})();
+
+
+// =============================================================================
+// 2. LANGUAGE TOGGLE
+// Terjemahan konten halaman antara Bahasa Indonesia dan Bahasa Inggris.
+// Preferensi bahasa disimpan di localStorage agar persisten antar sesi.
+// =============================================================================
+
+(function () {
+    var languageToggles = document.querySelectorAll('[data-language-toggle]');
+
+    if (!languageToggles.length) return;
+
+    var translationMap = {
+        'Kehidupan Mahasiswa & Himpunan (HMIF)': {
+            id: 'Kehidupan Mahasiswa & <span class="text-hmif-secondary" style="color:var(--color-hmif-secondary)">Himpunan (HMIF)</span>',
+            en: 'Student Life & <span class="text-hmif-secondary" style="color:var(--color-hmif-secondary)">Association (HMIF)</span>'
+        },
+        'ABOUT US': { id: 'TENTANG KAMI', en: 'ABOUT US' },
+        'PROGRAMS': { id: 'PROGRAM', en: 'PROGRAMS' },
+        'HUMAN RESOURCES': { id: 'SUMBER DAYA MANUSIA', en: 'HUMAN RESOURCES' },
+        'FACILITIES': { id: 'FASILITAS', en: 'FACILITIES' },
+        'WORKS & EVENTS': { id: 'KARYA & KEGIATAN', en: 'WORKS & EVENTS' },
+        'CONTACT': { id: 'KONTAK', en: 'CONTACT' },
+        'COMMUNITY & LEADERSHIP': { id: 'KOMUNITAS & KEPEMIMPINAN', en: 'COMMUNITY & LEADERSHIP' },
+        'Membangun ekosistem kolaboratif di mana teknologi bertemu dengan kreativitas, membentuk calon pemimpin industri masa depan.': {
+            id: 'Membangun ekosistem kolaboratif di mana teknologi bertemu dengan kreativitas, membentuk calon pemimpin industri masa depan.',
+            en: 'Building a collaborative ecosystem where technology meets creativity, shaping future industry leaders.'
+        },
+        'Lihat Struktur Kepengurusan': { id: 'Lihat Struktur Kepengurusan', en: 'View Organization Structure' },
+        'Ruang Tumbuh Bagi Mahasiswa Informatika': {
+            id: 'Ruang Tumbuh Bagi<br class="hidden sm:block"> Mahasiswa Informatika',
+            en: 'A Growth Space For<br class="hidden sm:block"> Informatics Students'
+        },
+        '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.': {
+            id: '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.',
+            en: 'The Informatics Student Association (HMIF) of Universitas Tanjungpura is more than an organization; it is a home for future technology leaders. We believe formal education is the foundation, while community is the accelerator.'
+        },
+        'Melalui berbagai inisiatif, kami menjembatani kesenjangan antara kurikulum akademik dan kebutuhan industri, sambil tetap menjaga semangat kekeluargaan dan integritas ilmiah.': {
+            id: 'Melalui berbagai inisiatif, kami menjembatani kesenjangan antara kurikulum akademik dan kebutuhan industri, sambil tetap menjaga semangat kekeluargaan dan integritas ilmiah.',
+            en: 'Through various initiatives, we bridge the gap between academic curricula and industry needs while preserving a spirit of kinship and academic integrity.'
+        },
+        'Mahasiswa Aktif': { id: 'Mahasiswa Aktif', en: 'Active Students' },
+        'MITRA': { id: 'MITRA', en: 'PARTNERS' },
+        'Partner Industri': { id: 'Partner Industri', en: 'Industry Partners' },
+        'Inklusivitas & Kolaborasi': { id: 'Inklusivitas &<br>Kolaborasi', en: 'Inclusivity &<br>Collaboration' },
+        'Partner & Kolaborator': { id: 'Partner & Kolaborator', en: 'Partners & Collaborators' },
+        'Partner dan Kolaborator': { id: 'Partner dan Kolaborator', en: 'Partners and Collaborators' },
+        'Divisi Kepengurusan HMIF': { id: 'Divisi Kepengurusan HMIF', en: 'HMIF Management Divisions' },
+        'Struktur organisasi yang dirancang untuk efisiensi dan pengembangan kapasitas anggota di berbagai bidang strategis.': {
+            id: 'Struktur organisasi yang dirancang untuk efisiensi dan pengembangan kapasitas anggota di berbagai bidang strategis.',
+            en: 'An organizational structure designed for efficiency and member capacity development across strategic areas.'
+        },
+        'Bidang 1': { id: 'Bidang 1', en: 'Division 1' },
+        'Bidang 2': { id: 'Bidang 2', en: 'Division 2' },
+        'Bidang 3': { id: 'Bidang 3', en: 'Division 3' },
+        'Bidang 4': { id: 'Bidang 4', en: 'Division 4' },
+        'Bidang 5': { id: 'Bidang 5', en: 'Division 5' },
+        'Bidang 6': { id: 'Bidang 6', en: 'Division 6' },
+        'Pengembangan Sumber Daya Mahasiswa dan Kaderisasi': {
+            id: 'Pengembangan Sumber Daya Mahasiswa dan Kaderisasi',
+            en: 'Student Resource Development and Cadre Formation'
+        },
+        '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 tanggung jawab sosial. Fokusnya adalah menyiapkan kader yang kompeten dan menjaga regenerasi organisasi.': {
+            id: '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 tanggung jawab sosial. Fokusnya adalah menyiapkan kader yang kompeten dan menjaga regenerasi organisasi.',
+            en: 'This division runs structured cadre development, regular mentoring, and leadership and soft-skill training. Its programs include new member onboarding, leadership workshops, collaborative projects, and community service activities that build social responsibility. The focus is preparing competent members and sustaining organizational regeneration.'
+        },
+        'Mendukung mahasiswa untuk terus berkembang, dengan pembinaan dan kaderisasi yang berkelanjutan.': {
+            id: 'Mendukung mahasiswa untuk terus berkembang, dengan pembinaan dan kaderisasi yang berkelanjutan.',
+            en: 'Supporting students to keep growing through continuous mentoring and cadre development.'
+        },
+        'Pengembangan Organisasi': { id: 'Pengembangan Organisasi', en: 'Organizational Development' },
+        '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 kegiatan peningkatan profesionalisme sehingga operasi HMIF menjadi lebih terstruktur dan efisien.': {
+            id: '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 kegiatan peningkatan profesionalisme sehingga operasi HMIF menjadi lebih terstruktur dan efisien.',
+            en: 'This division strengthens governance and internal capability through board training, simple SOP development, and workflow evaluation. Its programs include organizational culture development, coordination effectiveness improvement, and professionalism initiatives so HMIF operations become more structured and efficient.'
+        },
+        'Mendukung organisasi agar berjalan lebih rapi, terstruktur, dan semakin berkembang.': {
+            id: 'Mendukung organisasi agar berjalan lebih rapi, terstruktur, dan semakin berkembang.',
+            en: 'Helping the organization run in a more orderly, structured, and progressive way.'
+        },
+        'Media Komunikasi dan Konten Digital': {
+            id: 'Media Komunikasi dan Konten Digital',
+            en: 'Communication Media and Digital Content'
+        },
+        '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 identitas digital agar informasi organisasi tersampaikan konsisten dan menarik.': {
+            id: '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 identitas digital agar informasi organisasi tersampaikan konsisten dan menarik.',
+            en: 'This division manages HMIF communication strategy and content production, including editorial planning, social media management, and event documentation. Its programs cover promotional materials, activity publications, and digital identity strengthening so organizational information is delivered consistently and attractively.'
+        },
+        'Mengelola media dan komunikasi digital untuk menyampaikan informasi dengan lebih menarik dan mudah diakses.': {
+            id: 'Mengelola media dan komunikasi digital untuk menyampaikan informasi dengan lebih menarik dan mudah diakses.',
+            en: 'Managing digital media and communication to deliver information in a more engaging and accessible way.'
+        },
+        'Sosial Masyarakat': { id: 'Sosial Masyarakat', en: 'Community Service' },
+        '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 dampak untuk memastikan keberlanjutan dan manfaat nyata bagi masyarakat.': {
+            id: '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 dampak untuk memastikan keberlanjutan dan manfaat nyata bagi masyarakat.',
+            en: 'This division designs and carries out impactful community service programs and social actions, including community assistance and humanitarian support. Activities include field needs assessment, structured implementation, and impact evaluation to ensure sustainability and real benefits for the community.'
+        },
+        'Berbagi dan berkontribusi melalui berbagai kegiatan sosial, sekaligus membawa dampak positif bagi masyarakat.': {
+            id: 'Berbagi dan berkontribusi melalui berbagai kegiatan sosial, sekaligus membawa dampak positif bagi masyarakat.',
+            en: 'Sharing and contributing through social activities while bringing positive impact to the community.'
+        },
+        'Inovasi dan Kompetisi Teknologi': {
+            id: 'Inovasi dan Kompetisi Teknologi',
+            en: 'Technology Innovation and Competition'
+        },
+        '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, bimbingan kompetitif, dan inisiatif digitalisasi seperti pengembangan website dan dashboard untuk mendukung ekosistem inovasi HMIF.': {
+            id: '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, bimbingan kompetitif, dan inisiatif digitalisasi seperti pengembangan website dan dashboard untuk mendukung ekosistem inovasi HMIF.',
+            en: 'This division facilitates competition preparation and technical project development through coaching clinics, project-based bootcamps, and study clubs for Competitive Programming, Software Development, and Data/ML. Activities include internal selection, competitive mentoring, and digitalization initiatives such as website and dashboard development to support HMIF innovation.'
+        },
+        'Mengembangkan inovasi dan skill teknologi, sambil mendorong mahasiswa untuk berani mencoba dan ikut berbagai tantangan.': {
+            id: 'Mengembangkan inovasi dan skill teknologi, sambil mendorong mahasiswa untuk berani mencoba dan ikut berbagai tantangan.',
+            en: 'Developing innovation and technology skills while encouraging students to try new challenges.'
+        },
+        'Kewirausahaan dan Kemitraan': { id: 'Kewirausahaan dan Kemitraan', en: 'Entrepreneurship and Partnership' },
+        '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 pengelolaan sponsor untuk meningkatkan kemandirian finansial dan akses jaringan profesional.': {
+            id: '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 pengelolaan sponsor untuk meningkatkan kemandirian finansial dan akses jaringan profesional.',
+            en: 'This division develops organizational business units, designs creative funding schemes, and builds strategic partnerships to support HMIF program sustainability. Its work includes business opportunity research, partnership proposal development, and sponsor management to improve financial independence and professional network access.'
+        },
+        'Mengembangkan jiwa kewirausahaan, sekaligus membangun kolaborasi dan membuka peluang bersama berbagai mitra.': {
+            id: 'Mengembangkan jiwa kewirausahaan, sekaligus membangun kolaborasi dan membuka peluang bersama berbagai mitra.',
+            en: 'Developing an entrepreneurial mindset while building collaboration and opportunities with partners.'
+        },
+        'Kegiatan Unggulan': { id: 'Kegiatan Unggulan', en: 'Featured Activities' },
+        'Kegiatan tahunan yang menjadi ikon Informatika UNTAN.': {
+            id: 'Kegiatan tahunan yang menjadi ikon Informatika UNTAN.',
+            en: 'Annual activities that have become icons of Informatics UNTAN.'
+        },
+        'Kompetisi Coding untuk mengasah skill coding mahasiswa Informatika.': {
+            id: 'Kompetisi Coding untuk mengasah skill coding mahasiswa Informatika.',
+            en: 'A coding competition to sharpen Informatics students coding skills.'
+        },
+        'Silaturahmi Keluarga Besar Informatika': {
+            id: 'Silaturahmi Keluarga Besar Informatika',
+            en: 'Informatics Family Gathering'
+        },
+        'Feb': { id: 'Feb', en: 'Feb' },
+        'Jul': { id: 'Jul', en: 'Jul' },
+        'Sep': { id: 'Sep', en: 'Sep' },
+        'Kegiatan buka bersama seluruh keluarga Informatika Untan yang selalu diadakan setiap tahunnya.': {
+            id: 'Kegiatan buka bersama seluruh keluarga Informatika Untan yang selalu diadakan setiap tahunnya.',
+            en: 'An annual iftar gathering for the entire Informatics UNTAN family.'
+        },
+        'Program intensif GEMASTIK adalah kompetisi IT tahunan tingkat nasional yang mempertemukan mahasiswa se-Indonesia. Lomba ini fokus pada pemecahan masalah lewat teknologi, dengan cabang yang beragam seperti programming, cyber security, data mining, sampai pengembangan UI/UX.': {
+            id: 'Program intensif GEMASTIK adalah kompetisi IT tahunan tingkat nasional yang mempertemukan mahasiswa se-Indonesia. Lomba ini fokus pada pemecahan masalah lewat teknologi, dengan cabang yang beragam seperti <em>programming</em>, <em>cyber security</em>, <em>data mining</em>, sampai pengembangan UI/UX.',
+            en: 'GEMASTIK is an intensive annual national IT competition that brings together students from across Indonesia. It focuses on solving problems through technology, with categories ranging from <em>programming</em>, <em>cyber security</em>, and <em>data mining</em> to UI/UX development.'
+        },
+        'Okt': { id: 'Okt', en: 'Oct' },
+        'Ultah Informatika': { id: 'Ultah Informatika', en: 'Informatics Anniversary' },
+        'Perayaan ulang tahun Informatika UNTAN, momen kebersamaan dan kebanggaan seluruh keluarga besar Informatika.': {
+            id: 'Perayaan ulang tahun Informatika UNTAN, momen kebersamaan dan kebanggaan seluruh keluarga besar Informatika.',
+            en: 'The Informatics UNTAN anniversary celebration, a moment of togetherness and pride for the whole Informatics family.'
+        },
+        'Agu': { id: 'Agu', en: 'Aug' },
+        'Program intensif pengembangan skill teknis mahasiswa Informatika bersama mentor profesional dari industri.': {
+            id: 'Program intensif pengembangan skill teknis mahasiswa Informatika bersama mentor profesional dari industri.',
+            en: 'An intensive program for developing Informatics students technical skills with professional mentors from industry.'
+        },
+        'STUDY CLUB': { id: 'STUDY CLUB', en: 'STUDY CLUB' },
+        'Belajar logika dan algoritma bersama, di mana kalian bisa berkembang dan membuka peluang mengikuti kompetisi pemrograman di berbagai level.': {
+            id: 'Belajar logika dan algoritma bersama, di mana kalian bisa berkembang dan membuka peluang mengikuti kompetisi pemrograman di berbagai level.',
+            en: 'Learn logic and algorithms together, grow your abilities, and open opportunities to join programming competitions at various levels.'
+        },
+        'Gali potensi tersembunyi dari tumpukan data! Di sini kita akan bereksplorasi dengan algoritma Machine Learning, membedah teknik klasifikasi, hingga melatih model prediktif untuk menghasilkan insight yang bermakna.': {
+            id: '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.',
+            en: 'Explore hidden potential in piles of data! Here we experiment with <em>Machine Learning</em> algorithms, examine classification techniques, and train predictive models to produce meaningful <em>insights</em>.'
+        },
+        'Wujudkan idemu jadi produk digital yang nyata! Kita akan ngoding bareng dari merancang frontend yang interaktif, membangun backend yang tangguh, serta mengintegrasikan berbagai API untuk menciptakan aplikasi web masa kini.': {
+            id: '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.',
+            en: 'Turn your ideas into real digital products! We will code together, from designing interactive <em>frontends</em> and building robust <em>backends</em> to integrating APIs for modern web applications.'
+        },
+        'Di sini, kalian bisa belajar membuat website dan aplikasi web, sekaligus mengembangkan ide menjadi sesuatu yang nyata.': {
+            id: 'Di sini, kalian bisa belajar membuat website dan aplikasi web, sekaligus mengembangkan ide menjadi sesuatu yang nyata.',
+            en: 'Here, you can learn to build websites and web applications while turning ideas into something real.'
+        },
+        'Belajar memahami sistem dan cara menjaganya, supaya lebih siap menghadapi berbagai ancaman digital.': {
+            id: 'Belajar memahami sistem dan cara menjaganya, supaya lebih siap menghadapi berbagai ancaman digital.',
+            en: 'Learn to understand systems and how to protect them, so you are better prepared for digital threats.'
+        },
+        'Galeri Keseruan': { id: 'Galeri Keseruan', en: 'Activity Gallery' },
+        'Ada yang Ingin Ditanyakan Seputar HMIF?': {
+            id: 'Ada yang Ingin Ditanyakan Seputar HMIF?',
+            en: 'Have Questions About HMIF?'
+        },
+        'Bergabunglah dengan HMIF untuk memperluas jaringan, mengasah skill, dan menciptakan dampak nyata.': {
+            id: 'Bergabunglah dengan HMIF untuk memperluas jaringan, mengasah skill, dan menciptakan dampak nyata.',
+            en: 'Join HMIF to expand your network, sharpen your skills, and create real impact.'
+        },
+        'Hubungi Kami': { id: 'Hubungi Kami', en: 'Contact Us' },
+        'Sekretariat': { id: 'Sekretariat', en: 'Secretariat' },
+        'Gedung Fakultas Teknik Lt. 2 Jl. Prof. Dr. H. Hadari Nawawi': {
+            id: 'Gedung Fakultas Teknik Lt. 2<br>Jl. Prof. Dr. H. Hadari Nawawi',
+            en: 'Faculty of Engineering Building, 2nd Floor<br>Jl. Prof. Dr. H. Hadari Nawawi'
+        },
+        'Jam Operasional': { id: 'Jam Operasional', en: 'Operating Hours' },
+        'Senin - Jumat 08:00 - 17:00 WIB': {
+            id: 'Senin - Jumat<br>08:00 - 17:00 WIB',
+            en: 'Monday - Friday<br>08:00 - 17:00 WIB'
+        },
+        'Media Sosial': { id: 'Media Sosial', en: 'Social Media' },
+        'Jl. Prof. Dr. H. Hadari Nawawi, Bansir Laut, Kec. Pontianak Tenggara,': {
+            id: 'Jl. Prof. Dr. H. Hadari Nawawi, Bansir Laut, Kec. Pontianak Tenggara,',
+            en: 'Prof. Dr. H. Hadari Nawawi St., Bansir Laut, Southeast Pontianak District,'
+        },
+        'Kota Pontianak, Kalimantan Barat 78124': {
+            id: 'Kota Pontianak, Kalimantan Barat 78124',
+            en: 'Pontianak City, West Kalimantan 78124'
+        },
+        'FOLLOW US': { id: 'IKUTI KAMI', en: 'FOLLOW US' }
+    };
+
+    // Normalisasi whitespace untuk pencocokan teks yang konsisten
+    function normalizeText(value) {
+        return value.replace(/\s+/g, ' ').trim();
+    }
+
+    function stripHtmlTags(value) {
+        var template = document.createElement('template');
+        template.innerHTML = value;
+        return template.content.textContent || '';
+    }
+
+    // Ambil teks murni dari elemen, termasuk teks dalam child nodes
+    function getElementText(element) {
+        function collectText(node) {
+            if (node.nodeType === Node.TEXT_NODE) return node.nodeValue;
+            if (node.nodeName === 'BR') return ' ';
+            return Array.prototype.map.call(node.childNodes, collectText).join('');
+        }
+        return normalizeText(collectText(element));
+    }
+
+    // Buat lookup map dari teks yang sudah dinormalisasi ke key translationMap
+    var translationLookup = Object.keys(translationMap).reduce(function (lookup, key) {
+        lookup[normalizeText(key)] = key;
+        lookup[normalizeText(translationMap[key].id)] = key;
+        lookup[normalizeText(stripHtmlTags(translationMap[key].id))] = key;
+        return lookup;
+    }, {});
+
+    // Tandai semua elemen yang bisa diterjemahkan dengan data attribute
+    function markTranslatableElements() {
+        document.querySelectorAll('a, button, h1, h2, h3, p, span').forEach(function (element) {
+            var key = translationLookup[getElementText(element)];
+            if (key) element.dataset.i18nKey = key;
+        });
+    }
+
+    // Render teks terjemahan — gunakan innerHTML jika ada tag HTML, textContent jika tidak
+    function renderTranslatedText(element, value) {
+        if (value.indexOf('<') !== -1) {
+            element.innerHTML = value;
+        } else {
+            element.textContent = value;
+        }
+    }
+
+    // Update tampilan tombol toggle sesuai bahasa aktif
+    function updateLanguageToggle(language) {
+        languageToggles.forEach(function (toggle) {
+            toggle.innerHTML = language === 'id'
+                ? '<span class="text-hmif-secondary">ID</span> | <span>EN</span>'
+                : '<span>ID</span> | <span class="text-hmif-secondary">EN</span>';
+            toggle.setAttribute('aria-pressed', String(language === 'en'));
+            toggle.setAttribute('aria-label', language === 'id'
+                ? 'Ganti bahasa ke Inggris'
+                : 'Switch language to Indonesian');
+        });
+    }
+
+    // Terapkan bahasa ke seluruh elemen yang sudah ditandai
+    function applyLanguage(language) {
+        var safeLanguage = language === 'en' ? 'en' : 'id';
+
+        document.documentElement.lang = safeLanguage;
+        document.title = translationMap['Kehidupan Mahasiswa & Himpunan (HMIF)'][safeLanguage];
+
+        document.querySelectorAll('[data-i18n-key]').forEach(function (element) {
+            var key = element.dataset.i18nKey;
+            renderTranslatedText(element, translationMap[key][safeLanguage]);
+        });
+
+        updateLanguageToggle(safeLanguage);
+
+        try {
+            localStorage.setItem('hmif-language', safeLanguage);
+        } catch (error) {
+            // Browser mungkin memblokir localStorage di mode private/incognito.
+        }
+    }
+
+    // Inisialisasi: tandai elemen, muat preferensi bahasa, pasang event listener
+    markTranslatableElements();
+
+    var savedLanguage = 'id';
+    try {
+        savedLanguage = localStorage.getItem('hmif-language') || 'id';
+    } catch (error) {
+        savedLanguage = 'id';
+    }
+
+    applyLanguage(savedLanguage);
+
+    languageToggles.forEach(function (toggle) {
+        toggle.addEventListener('click', function () {
+            applyLanguage(document.documentElement.lang === 'en' ? 'id' : 'en');
+        });
+    });
+})();
+
+
+// =============================================================================
+// 3. GALERI KESERUAN — SLIDER
+// Slider bento grid foto keseruan dengan auto-slide, navigasi manual,
+// dot indicator, pause on hover, dan recalculate on resize.
+// =============================================================================
+
+(function () {
+    var AUTO_DELAY_MS = 4000; // 4 detik per slide
+    var GAP_PX = 16 * 2; // grid gap-4 = 1rem? but original used gap-4; keep reasonable spacing if needed
+
+    var track   = document.getElementById('galeri-track');
+    var viewport = document.getElementById('galeri-viewport');
+    var prevBtn  = document.getElementById('galeri-prev');
+    var nextBtn  = document.getElementById('galeri-next');
+    var dotsContainer = document.getElementById('galeri-dots');
+
+    if (!track || !viewport || !prevBtn || !nextBtn) return;
+
+    var currentSlide  = 0;
+    var autoSlideTimer;
+    var originalHTML = track.innerHTML;
+
+    // collect all anchor elements (images) in the original order
+    var originalAnchors = Array.from((function () {
+        var tmp = document.createElement('div'); tmp.innerHTML = originalHTML; return tmp;
+    })().querySelectorAll('a'));
+
+    // builds slides where each slide contains a single image (for small screens)
+    function buildSingleImageSlides() {
+        var slides = originalAnchors.map(function (a) {
+            // clone anchor and remove mobile-hidden class so it becomes visible in single-image slides
+            try {
+                var clone = a.cloneNode(true);
+                if (clone.classList) clone.classList.remove('hidden');
+                // also remove inline style display:none if present
+                if (clone.style) clone.style.display = '';
+                return '<div class="flex-shrink-0 w-full">' +
+                    '<div class="aspect-video w-full overflow-hidden rounded-xl">' +
+                    clone.outerHTML +
+                    '</div></div>';
+            } catch (e) {
+                return '';
+            }
+        });
+        return slides.join('');
+    }
+
+    function getTotalSlides() {
+        return track.children.length;
+    }
+
+    // render dot buttons dynamically according to total slides
+    function renderDots(n) {
+        if (!dotsContainer) return;
+        dotsContainer.innerHTML = '';
+        for (var i = 0; i < n; i++) {
+            var btn = document.createElement('button');
+            btn.className = 'galeri-dot h-2.5 rounded-full transition-all duration-300 ' + (i === 0 ? 'bg-hmif-primary w-6' : 'bg-gray-200 w-2.5');
+            btn.setAttribute('data-index', String(i));
+            btn.setAttribute('aria-label', 'Slide ' + (i+1));
+            (function (idx) { btn.addEventListener('click', function () { goToSlide(idx); startAutoSlide(); }); })(i);
+            dotsContainer.appendChild(btn);
+        }
+    }
+
+    function updateDots(activeIndex) {
+        if (!dotsContainer) return;
+        var dots = dotsContainer.querySelectorAll('button');
+        dots.forEach(function (dot, i) {
+            if (i === activeIndex) {
+                dot.classList.remove('bg-gray-200', 'w-2.5');
+                dot.classList.add('bg-hmif-primary', 'w-6');
+            } else {
+                dot.classList.remove('bg-hmif-primary', 'w-6');
+                dot.classList.add('bg-gray-200', 'w-2.5');
+            }
+        });
+    }
+
+    function rebuildTrackForViewport() {
+        var isMobile = window.innerWidth < 768; // md breakpoint
+        if (isMobile) {
+            track.innerHTML = buildSingleImageSlides();
+        } else {
+            track.innerHTML = originalHTML;
+        }
+        renderDots(getTotalSlides());
+    }
+
+    // Pindah ke slide dengan index tertentu, loop otomatis di kedua arah
+    function goToSlide(index) {
+        var total = getTotalSlides();
+        if (total === 0) return;
+        currentSlide = ((index % total) + total) % total;
+        track.style.transform = 'translateX(-' + (currentSlide * viewport.offsetWidth) + 'px)';
+        updateDots(currentSlide);
+    }
+
+    // Mulai atau restart timer auto-slide
+    function startAutoSlide() {
+        clearInterval(autoSlideTimer);
+        autoSlideTimer = setInterval(function () { goToSlide(currentSlide + 1); }, AUTO_DELAY_MS);
+    }
+
+    prevBtn.addEventListener('click', function () { goToSlide(currentSlide - 1); startAutoSlide(); });
+    nextBtn.addEventListener('click', function () { goToSlide(currentSlide + 1); startAutoSlide(); });
+
+    // Pause saat kursor di atas galeri
+    viewport.addEventListener('mouseenter', function () { clearInterval(autoSlideTimer); });
+    viewport.addEventListener('mouseleave', startAutoSlide);
+
+    // Recalculate posisi slide saat browser di-resize
+    window.addEventListener('resize', function () { rebuildTrackForViewport(); goToSlide(currentSlide); });
+
+    // initial build
+    rebuildTrackForViewport();
+    goToSlide(0);
+    startAutoSlide();
+})();
+
+
+// =============================================================================
+// 4. KEGIATAN UNGGULAN — SLIDER
+// Slider kartu kegiatan tahunan yang menampilkan 2 kartu sekaligus pada desktop,
+// dan 1 kartu pada layar sempit. Logika pergantian disesuaikan agar pergeseran
+// selalu berpindah tepat satu item, memperhitungkan gap antar-kartu.
+// =============================================================================
+
+(function () {
+    var TOTAL_CARDS   = 6;
+    var AUTO_DELAY_MS = 2000;
+    var GAP_PX        = 32; // gap-8 = 2rem = 32px (tailwind)
+
+    var track    = document.getElementById('slider-track');
+    var viewport = document.getElementById('slider-viewport');
+    var prevBtn  = document.getElementById('slider-prev');
+    var nextBtn  = document.getElementById('slider-next');
+    var dotsContainer = document.getElementById('slider-dots');
+
+    if (!track || !viewport || !prevBtn || !nextBtn) return;
+
+    var current = 0;
+    var autoTimer;
+
+    function getCardsVisible() {
+        return window.innerWidth >= 768 ? 2 : 1; // md breakpoint
+    }
+
+    // lebar kartu yang terlihat (tidak termasuk gap)
+    function getCardWidth() {
+        var visible = getCardsVisible();
+        if (visible === 1) return viewport.offsetWidth;
+        return (viewport.offsetWidth - GAP_PX) / visible;
+    }
+
+    function getMaxIndex() {
+        return Math.max(0, TOTAL_CARDS - getCardsVisible());
+    }
+
+    // Pindah ke posisi slide tertentu; perhitungan berbeda untuk 1 atau 2 kartu
+    function goTo(index) {
+        var maxIndex = getMaxIndex();
+        current = ((index % (maxIndex + 1)) + (maxIndex + 1)) % (maxIndex + 1);
+
+        if (getCardsVisible() === 1) {
+            // langkah pergeseran = viewport width + gap
+            var step = viewport.offsetWidth + GAP_PX;
+            track.style.transform = 'translateX(-' + (current * step) + 'px)';
+        } else {
+            var cardW = getCardWidth();
+            track.style.transform = 'translateX(-' + (current * (cardW + GAP_PX)) + 'px)';
+        }
+
+        updateDots(current);
+    }
+
+    // Render dot indicators dynamically based on total slides
+    function renderSliderDots(n) {
+        if (!dotsContainer) return;
+        dotsContainer.innerHTML = '';
+        for (var i = 0; i < n; i++) {
+            var btn = document.createElement('button');
+            btn.className = 'slider-dot h-2.5 rounded-full transition-all duration-300 ' + (i === 0 ? 'bg-hmif-primary w-6' : 'bg-gray-200 w-2.5');
+            btn.setAttribute('data-index', String(i));
+            btn.setAttribute('aria-label', 'Slide ' + (i+1));
+            (function (idx) { btn.addEventListener('click', function () { goTo(idx); startAuto(); }); })(i);
+            dotsContainer.appendChild(btn);
+        }
+    }
+
+    function updateDots(activeIndex) {
+        if (!dotsContainer) return;
+        var dots = dotsContainer.querySelectorAll('button');
+        dots.forEach(function (dot, i) {
+            if (i === activeIndex) {
+                dot.classList.remove('bg-gray-200', 'w-2.5');
+                dot.classList.add('bg-hmif-primary', 'w-6');
+            } else {
+                dot.classList.remove('bg-hmif-primary', 'w-6');
+                dot.classList.add('bg-gray-200', 'w-2.5');
+            }
+        });
+    }
+
+    // Mulai atau restart timer auto-slide
+    function startAuto() {
+        clearInterval(autoTimer);
+        autoTimer = setInterval(function () { goTo(current + 1); }, AUTO_DELAY_MS);
+    }
+
+    prevBtn.addEventListener('click', function () { goTo(current - 1); startAuto(); });
+    nextBtn.addEventListener('click', function () { goTo(current + 1); startAuto(); });
+
+    // initial render of dots according to current viewport
+    renderSliderDots(getMaxIndex() + 1);
+
+    // Pause saat kursor di atas slider
+    viewport.addEventListener('mouseenter', function () { clearInterval(autoTimer); });
+    viewport.addEventListener('mouseleave', startAuto);
+
+    // Recalculate posisi slide and dots saat browser di-resize
+    window.addEventListener('resize', function () { renderSliderDots(getMaxIndex() + 1); goTo(current); });
+
+    goTo(0);
+    startAuto();
+})();

groups/LimaEm/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Group 07 &ndash; LIMA EM | Informatika UNTAN</title>
+    <link href="./assets/css/output.css" rel="stylesheet">
     <link rel="stylesheet" href="../../assets/global/output.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -1148,9 +1149,873 @@
             </div>
             <div id="assignment-body" class="prose prose-slate max-w-none">
                 <!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
-                <p>Tulis konten halaman kelompok di sini.</p>
+                <!-- Hero Section -->
-                <h3>Subjudul</h3>
+                <header class="relative w-full min-h-screen flex items-center overflow-hidden pt-[92px] lg:pt-[118px]">
-                <p>Gunakan paragraf, list, tabel, gambar, dan elemen konten lainnya.</p>
+
+                    <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 bg-gradient-to-r from-hmif-primary via-hmif-primary/80 to-transparent z-0"></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="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">
+                                    COMMUNITY & 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>
+                                </h1>
+
+                                <p 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
+                                    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>
+
+                            </div>
+
+                            <div class="hidden lg:block"></div>
+
+                        </div>
+                    </div>
+                </header>
+
+                <!-- About Section -->
+                <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="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 items-start">
+
+                            <!-- ─── Left: Text Content ─── -->
+                            <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">
+                                    Ruang Tumbuh Bagi<br>Mahasiswa Informatika
+                                </h2>
+
+                                <!-- Paragraf -->
+                                <div class="space-y-4 text-gray-500 text-base lg:text-[17px] leading-relaxed">
+                                    <p>
+                                        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>
+                                        Melalui berbagai inisiatif, kami menjembatani kesenjangan antara kurikulum
+                                        akademik dan kebutuhan industri, sambil tetap menjaga semangat kekeluargaan
+                                        dan integritas ilmiah.
+                                    </p>
+                                </div>
+
+                                <!-- Stats -->
+                                <div class="flex gap-12 lg:gap-16 pt-6 border-t border-gray-100">
+                                    <div>
+                                        <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">
+                                            Mahasiswa Aktif
+                                        </p>
+                                    </div>
+                                    <div>
+                                        <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">
+                                            MITRA
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- ─── Right: Photo ─── -->
+                            <div class="order-2 relative mt-8 lg:mt-0 lg:pl-4">
+
+                                <!-- Offset shadow block biru tua, posisi % (ikut skala zoom) -->
+                                <div class="absolute top-[4%] left-[8%] right-[-4%] bottom-[-4%]
+                                            bg-hmif-primary rounded-2xl lg:rounded-3xl z-0 shadow-2xl"></div>
+
+                                <!-- Frame foto — overflow hidden, foto full width tanpa crop -->
+                                <div
+                                    class="relative rounded-2xl lg:rounded-3xl overflow-hidden shadow-2xl z-10 group cursor-default">
+                                    <img src="./assets/images/ruang-tumbuh/ruangtumbuh_foto.jpeg"
+                                        alt="Ruang Tumbuh HMIF Universitas Tanjungpura" class="w-full h-auto block
+                                                transition-transform duration-700 ease-out group-hover:scale-[1.03]" />
+                                    <!-- Gradient overlay bawah -->
+                                    <div class="absolute inset-0
+                                                bg-gradient-to-t from-hmif-primary/45 via-transparent to-transparent
+                                                opacity-70 group-hover:opacity-45 transition-opacity duration-500"></div>
+                                </div>
+
+                                <!-- Badge Inklusivitas & Kolaborasi pojok kiri bawah -->
+                                <div class="absolute z-20 bottom-[-3%] left-[0%]
+                                            bg-hmif-secondary text-hmif-primary
+                                            rounded-xl px-4 py-3 text-center shadow-2xl
+                                            border-2 border-white/20" style="min-width: 120px; max-width: 140px;">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
+                                        stroke="currentColor" class="w-6 h-6 mx-auto mb-1" aria-hidden="true">
+                                        <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">
+                                        Inklusivitas &<br>Kolaborasi
+                                    </p>
+                                </div>
+                            </div>
+
+                        </div>
+                    </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">
+                            Partner dan Kolaborator
+                        </h2>
+
+                        <div class="flex flex-wrap gap-6 lg:gap-10 items-center">
+                            <!-- Partner Aktif (Terbaru) -->
+                            <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" />
+                            </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" />
+                            </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" />
+                            </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" />
+                            </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" />
+                            </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" />
+                            </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" />
+                            </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">
+                        <!-- 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">
+                                Divisi Kepengurusan HMIF
+                            </h2>
+                            <p 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>
+                        </div>
+
+                        <!-- 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">
+                            <!-- Bidang 1 -->
+                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
+                                <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
+                                </span>
+                                <h3
+                                    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">
+                                    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
+                                    tanggung jawab sosial. Fokusnya adalah menyiapkan kader yang kompeten dan
+                                    menjaga regenerasi organisasi.
+                                </p>
+                            </div>
+
+                            <!-- Bidang 2 -->
+                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
+                                <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
+                                </span>
+                                <h3
+                                    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">
+                                    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
+                                    identitas digital agar informasi organisasi tersampaikan konsisten dan menarik.
+                                </p>
+                            </div>
+
+                            <!-- Bidang 3 -->
+                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
+                                <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
+                                </span>
+                                <h3
+                                    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">
+                                    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,
+                                    bimbingan kompetitif, dan inisiatif digitalisasi seperti pengembangan website
+                                    dan dashboard untuk mendukung ekosistem inovasi HMIF.
+                                </p>
+                            </div>
+
+                            <!-- Bidang 4 -->
+                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
+                                <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
+                                </span>
+                                <h3
+                                    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">
+                                    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
+                                    kegiatan peningkatan profesionalisme sehingga operasi HMIF menjadi lebih terstruktur
+                                    dan efisien.
+                                </p>
+                            </div>
+
+                            <!-- Bidang 5 -->
+                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
+                                <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
+                                </span>
+                                <h3
+                                    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">
+                                    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
+                                    dampak untuk memastikan keberlanjutan dan manfaat nyata bagi masyarakat.
+                                </p>
+                            </div>
+
+                            <!-- Bidang 6 -->
+                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
+                                <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
+                                </span>
+                                <h3
+                                    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">
+                                    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
+                                    pengelolaan sponsor untuk meningkatkan kemandirian finansial dan akses jaringan
+                                    profesional.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- Kegiatan Unggulan Section -->
+                <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">
+                        <!-- Header -->
+                        <div class="mb-12">
+                            <h2 class="text-3xl font-extrabold text-hmif-primary tracking-tight">
+                                Kegiatan Unggulan
+                            </h2>
+                            <p class="text-sm text-gray-500 mt-2 font-medium">
+                                Kegiatan tahunan yang menjadi ikon Informatika UNTAN.
+                            </p>
+                        </div>
+
+                        <!-- Slider Container with Arrows -->
+                        <div class="relative flex items-center">
+                            <!-- Left Arrow Button -->
+                            <button id="slider-prev"
+                                class="absolute -left-4 lg:-left-12 z-10 w-11 h-11 bg-white border border-gray-200 hover:border-hmif-primary rounded-full flex items-center justify-center shadow-md hover:shadow-lg text-slate-600 hover:text-hmif-primary transition-all cursor-pointer"
+                                aria-label="Sebelumnya">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
+                                    stroke="currentColor" class="w-5 h-5">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+                                </svg>
+                            </button>
+
+                            <!-- Viewport / Overflow Wrapper -->
+                            <div class="overflow-hidden w-full" id="slider-viewport">
+                                <!-- Track holds all cards in a single row -->
+                                <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="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"
+                                                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">
+                                            <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">
+                                                <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">
+                                                    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>
+                                            </div>
+                                        </div>
+                                    </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="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"
+                                                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">
+                                            <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">
+                                                <span class="text-lg font-extrabold text-hmif-primary leading-none">1</span>
+                                                <span
+                                                    class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Jul</span>
+                                            </div>
+                                            <div class="space-y-1">
+                                                <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. 
+                                                    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>
+                                            </div>
+                                        </div>
+                                    </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="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"
+                                                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">
+                                            <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">
+                                                <span class="text-lg font-extrabold text-hmif-primary leading-none">17</span>
+                                                <span
+                                                    class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Agu</span>
+                                            </div>
+                                            <div class="space-y-1">
+                                                <h3
+                                                    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.
+                                                    Ajang seru-seruan bersama untuk mempererat rasa nasionalisme dan kekeluargaan mahasiswa Informatika.</p>
+                                            </div>
+                                        </div>
+                                    </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="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"
+                                                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">
+                                            <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">
+                                                <span class="text-lg font-extrabold text-hmif-primary leading-none">28</span>
+                                                <span
+                                                    class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Agu</span>
+                                            </div>
+                                            <div class="space-y-1">
+                                                <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
+                                                    pengembangan skill teknis mahasiswa Informatika bersama mentor profesional dari
+                                                    industri.</p>
+                                            </div>
+                                        </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="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"
+                                                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">
+                                            <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">
+                                                <span class="text-lg font-extrabold text-hmif-primary leading-none">13</span>
+                                                <span
+                                                    class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Sep</span>
+                                            </div>
+                                            <div class="space-y-1">
+                                                <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
+                                                    mengasah skill coding mahasiswa Informatika.</p>
+                                            </div>
+                                        </div>
+                                    </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="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"
+                                                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">
+                                            <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">
+                                                <span class="text-lg font-extrabold text-hmif-primary leading-none">25</span>
+                                                <span
+                                                    class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Okt</span>
+                                            </div>
+                                            <div class="space-y-1">
+                                                <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
+                                                    Informatika UNTAN, momen kebersamaan dan kebanggaan seluruh keluarga besar
+                                                    Informatika.</p>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                </div><!-- end slider-track -->
+                            </div><!-- end slider-viewport -->
+
+                            <!-- Right Arrow Button -->
+                            <button id="slider-next"
+                                class="absolute -right-4 lg:-right-12 z-10 w-11 h-11 bg-white border border-gray-200 hover:border-hmif-primary rounded-full flex items-center justify-center shadow-md hover:shadow-lg text-slate-600 hover:text-hmif-primary transition-all cursor-pointer"
+                                aria-label="Berikutnya">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
+                                    stroke="currentColor" class="w-5 h-5">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+                                </svg>
+                            </button>
+                        </div>
+
+                        <!-- Dot Indicators -->
+                        <div id="slider-dots" class="flex justify-center gap-2 mt-10">
+                            <button class="slider-dot h-2.5 rounded-full bg-hmif-primary transition-all duration-300 w-6"
+                                data-index="0" aria-label="Slide 1"></button>
+                            <button class="slider-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
+                                data-index="1" aria-label="Slide 2"></button>
+                            <button class="slider-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
+                                data-index="2" aria-label="Slide 3"></button>
+                            <button class="slider-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
+                                data-index="3" aria-label="Slide 4"></button>
+                            <button class="slider-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
+                                data-index="4" aria-label="Slide 5"></button>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- Study Club Section -->
+                <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">
+                        <!-- Centered Header -->
+                        <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">
+                                STUDY CLUB
+                            </h2>
+                            <div class="w-16 h-1 bg-hmif-secondary mt-3 rounded-full"></div>
+                        </div>
+
+                        <!-- Cards Grid -->
+                        <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]">
+                                    <!-- 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">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
+                                    </svg>
+                                </div>
+                                <div class="space-y-3">
+                                    <h3 class="text-lg font-bold text-hmif-primary">
+                                        ARISE
+                                    </h3>
+                                    <p 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>
+                                </div>
+                            </div>
+
+                            <!-- 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]">
+                                    <!-- 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">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
+                                    </svg>
+                                </div>
+                                <div class="space-y-3">
+                                    <h3 class="text-lg font-bold text-hmif-primary">
+                                        MINERVA
+                                    </h3>
+                                    <p 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.
+                                    </p>
+                                </div>
+                            </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]">
+                                    <!-- 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">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25" />
+                                    </svg>
+                                </div>
+                                <div class="space-y-3">
+                                    <h3 class="text-lg font-bold text-hmif-primary">
+                                        Software Development (Soon)
+                                    </h3>
+                                    <p 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.
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- Galeri Keseruan Section -->
+                <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">
+
+                        <!-- Header -->
+                        <div class="text-center mb-12">
+                            <h2 class="text-3xl lg:text-4xl font-bold text-hmif-primary">
+                                Galeri Keseruan
+                            </h2>
+                        </div>
+
+                        <!-- Slider Wrapper -->
+                        <div class="relative">
+
+                            <!-- Left Arrow Button -->
+                            <button id="galeri-prev" style="top: 50%; transform: translateY(-50%);"
+                                class="absolute -left-4 lg:-left-12 z-10 w-11 h-11 bg-white border border-gray-200 hover:border-hmif-primary rounded-full flex items-center justify-center shadow-md hover:shadow-lg text-slate-600 hover:text-hmif-primary transition-all cursor-pointer"
+                                aria-label="Sebelumnya">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
+                                    stroke="currentColor" class="w-5 h-5">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+                                </svg>
+                            </button>
+
+                            <!-- Viewport: overflow-hidden agar slide lain tidak terlihat -->
+                            <div id="galeri-viewport" class="overflow-hidden rounded-2xl">
+
+                                <!-- Track: semua slide berjejer horizontal -->
+                                <div id="galeri-track" class="flex transition-transform duration-700 ease-in-out">
+
+                                    <!-- ====== Slide 1 ====== -->
+                                    <div class="flex-shrink-0 w-full">
+                                        <div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 h-auto md:h-[420px] lg:h-[500px]">
+
+                                            <!-- Foto besar kiri (span 2 baris) -->
+                                            <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
+                                                rel="noopener noreferrer"
+                                                class="block 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" />
+                                            </a>
+
+                                            <!-- Foto kecil kanan atas 1 -->
+                                            <a href="https://instagram.com/hmif_ftuntan" target="_blank"
+                                                rel="noopener noreferrer"
+                                                class="hidden md:block 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" />
+                                            </a>
+
+                                            <!-- Foto kecil kanan atas 2 -->
+                                            <a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
+                                                target="_blank" rel="noopener noreferrer"
+                                                class="hidden md:block 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" />
+                                            </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 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" />
+                                            </a>
+
+                                        </div>
+                                    </div>
+
+                                    <!-- ====== Slide 2 ====== -->
+                                    <div class="flex-shrink-0 w-full">
+                                        <div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 h-auto md:h-[420px] lg:h-[500px]">
+
+                                            <!-- Foto besar kiri -->
+                                            <a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer"
+                                                class="block 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" />
+                                            </a>
+
+                                            <!-- Foto kecil kanan atas 1 -->
+                                            <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
+                                                rel="noopener noreferrer"
+                                                class="hidden md:block 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" />
+                                            </a>
+
+                                            <!-- Foto kecil kanan atas 2 -->
+                                            <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
+                                                class="hidden md:block 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" />
+                                            </a>
+
+                                            <!-- Foto lebar kanan bawah -->
+                                            <a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
+                                                target="_blank" rel="noopener noreferrer"
+                                                class="hidden md:block 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" />
+                                            </a>
+
+                                        </div>
+                                    </div>
+
+                                    <!-- ====== Slide 3 ====== -->
+                                    <div class="flex-shrink-0 w-full">
+                                        <div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 h-auto md:h-[420px] lg:h-[500px]">
+
+                                            <!-- Foto besar kiri -->
+                                            <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
+                                                rel="noopener noreferrer"
+                                                class="block 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" />
+                                            </a>
+
+                                            <!-- Foto kecil kanan atas 1 -->
+                                            <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
+                                                rel="noopener noreferrer"
+                                                class="hidden md:block 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" />
+                                            </a>
+
+                                            <!-- Foto kecil kanan atas 2 -->
+                                            <a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
+                                                target="_blank" rel="noopener noreferrer"
+                                                class="hidden md:block 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" />
+                                            </a>
+
+                                            <!-- Foto lebar kanan bawah -->
+                                            <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
+                                                rel="noopener noreferrer"
+                                                class="hidden md:block 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" />
+                                            </a>
+
+                                        </div>
+                                    </div>
+
+                                </div><!-- end galeri-track -->
+                            </div><!-- end galeri-viewport -->
+
+                            <!-- Right Arrow Button -->
+                            <button id="galeri-next" style="top: 50%; transform: translateY(-50%);"
+                                class="absolute -right-4 lg:-right-12 z-10 w-11 h-11 bg-white border border-gray-200 hover:border-hmif-primary rounded-full flex items-center justify-center shadow-md hover:shadow-lg text-slate-600 hover:text-hmif-primary transition-all cursor-pointer"
+                                aria-label="Berikutnya">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
+                                    stroke="currentColor" class="w-5 h-5">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+                                </svg>
+                            </button>
+
+                        </div><!-- end slider wrapper -->
+
+                        <!-- Dot Indicators -->
+                        <div id="galeri-dots" class="flex justify-center gap-2 mt-8">
+                            <button class="galeri-dot h-2.5 rounded-full bg-hmif-primary transition-all duration-300 w-6"
+                                data-index="0" aria-label="Slide 1"></button>
+                            <button class="galeri-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
+                                data-index="1" aria-label="Slide 2"></button>
+                            <button class="galeri-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
+                                data-index="2" aria-label="Slide 3"></button>
+                        </div>
+
+                    </div>
+                </section>
+
+                <!-- CTA Section -->
+                <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="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)]">
+
+                            <div class="absolute -top-20 -left-16 h-48 w-48 rounded-full bg-white/10 blur-3xl"></div>
+                            <div class="absolute -bottom-24 -right-20 h-56 w-56 rounded-full bg-hmif-secondary/15 blur-3xl"></div>
+                            <div class="absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-white/5 to-transparent"></div>
+
+                            <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">
+                                        Ada yang Ingin Ditanyakan Seputar HMIF?
+                                    </h2>
+
+                                    <p
+                                        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"
+                                            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>
+
+                                        <div class="flex items-center justify-center gap-3">
+                                            <a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer"
+                                                class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-white/10 bg-white/10 text-white transition-colors duration-200 hover:bg-white/15"
+                                                aria-label="Instagram HMIF">
+                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
+                                                    class="h-4.5 w-4.5">
+                                                    <path
+                                                        d="M7.5 2A5.5 5.5 0 0 0 2 7.5v9A5.5 5.5 0 0 0 7.5 22h9a5.5 5.5 0 0 0 5.5-5.5v-9A5.5 5.5 0 0 0 16.5 2h-9Zm9 1.5A4 4 0 0 1 20.5 7.5v9a4 4 0 0 1-4 4h-9a4 4 0 0 1-4-4v-9a4 4 0 0 1 4-4h9Zm-4.5 2.25a5.75 5.75 0 1 0 0 11.5 5.75 5.75 0 0 0 0-11.5Zm0 2a3.75 3.75 0 1 1 0 7.5 3.75 3.75 0 0 1 0-7.5Zm5.9-.95a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6Z" />
+                                                </svg>
+                                            </a>
+
+                                            <a href="https://youtube.com" target="_blank" rel="noopener noreferrer"
+                                                class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-white/10 bg-white/10 text-white transition-colors duration-200 hover:bg-white/15"
+                                                aria-label="YouTube HMIF">
+                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
+                                                    class="h-4.5 w-4.5">
+                                                    <path
+                                                        d="M21.6 7.2a2.9 2.9 0 0 0-2.04-2.05C17.77 4.7 12 4.7 12 4.7s-5.77 0-7.56.45A2.9 2.9 0 0 0 2.4 7.2 30.3 30.3 0 0 0 2 12a30.3 30.3 0 0 0 .4 4.8 2.9 2.9 0 0 0 2.04 2.05c1.79.45 7.56.45 7.56.45s5.77 0 7.56-.45a2.9 2.9 0 0 0 2.04-2.05A30.3 30.3 0 0 0 22 12a30.3 30.3 0 0 0-.4-4.8Zm-9.2 7.44V8.36l4.83 3.14-4.83 3.14Z" />
+                                                </svg>
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <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">
+                                                Sekretariat
+                                            </p>
+                                            <p 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">
+                                                Jam Operasional
+                                            </p>
+                                            <p 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">
+                                                Media Sosial
+                                            </p>
+                                            <p class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
+                                                @hmif.untan<br>
+                                                YouTube: HMIF UNTAN TV
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
                 <!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->
             </div>
         </div>

groups/LimaEm/style.css

@@ -1,48 +1,6 @@
-:root {
+/*
-    --brand-navy: #003150;
+ * LimaEm — Group 07 | Kehidupan Mahasiswa & Himpunan (HMIF)
-    --brand-yellow: #feb401;
+ *
-    --text-main: #1e293b;
+ * CSS utama ada di: assets/css/output.css (Tailwind custom build)
-    --text-soft: #64748b;
+ * File ini tersedia untuk CSS tambahan jika diperlukan.
-    --bg-soft: #f8fafc;
+ */
-    --line: #e2e8f0;
-}
-
-* { box-sizing: border-box; }
-html, body { margin: 0; padding: 0; }
-body { font-family: "Roboto", Arial, sans-serif; color: var(--text-main); background: #fff; line-height: 1.6; }
-.container { width: min(1100px, 92%); margin-inline: auto; }
-
-.nav { background: var(--brand-navy); color: #fff; border-bottom: 4px solid var(--brand-yellow); padding: 14px 0; }
-.brand { font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; }
-
-.hero { position: relative; color: #fff; min-height: 220px; display: flex; align-items: flex-end; overflow: hidden; }
-.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45); }
-.hero-inner { position: relative; z-index: 1; padding: 36px 0; }
-.badge { display: inline-block; background: var(--brand-yellow); color: #111827; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .2rem .45rem; margin-bottom: 12px; }
-.hero h1 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.2; }
-
-.layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2rem 0 4rem; }
-@media (min-width: 1024px) { .layout { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); } }
-
-.meta { font-size: .78rem; text-transform: uppercase; color: #475569; display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1rem; }
-.cover { background: var(--bg-soft); border: 1px solid var(--line); margin-bottom: 1.5rem; }
-.cover img { width: 100%; height: auto; display: block; }
-
-.article-body > * + * { margin-top: 1.1em; }
-.article-body h2 { font-size: 1.35rem; margin: 1.6em 0 .5em; }
-.article-body h3 { font-size: 1.1rem; margin: 1.4em 0 .4em; }
-.article-body p { margin: 0 0 1em; }
-.article-body ul, .article-body ol { padding-left: 1.4rem; }
-.article-body blockquote { border-left: 4px solid #005eb8; background: #eef6ff; padding: .8rem 1rem; color: #334155; }
-.article-body a { color: #005eb8; }
-.article-body img { max-width: 100%; border-radius: 8px; }
-.article-body code { background: #f1f5f9; padding: .1em .35em; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
-
-.note { border: 1px solid var(--line); background: var(--bg-soft); padding: 1rem; }
-.note h3 { margin: 0 0 .5rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: #475569; }
-
-.footer { margin-top: 2rem; background: var(--brand-navy); color: #fff; border-top: 4px solid var(--brand-yellow); }
-.footer-inner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem 0; }
-.footer-logo { height: 28px; width: auto; }
-.footer-ornament { width: 100%; display: block; opacity: .9; }
-