Aktifkan proxy dashboard di Vite dev

Reviewed-on: izu/student-web-if-development-kit#21
Approved

assets/global/localization.js

@@ -505,6 +505,193 @@ const translations = {
         kontrib_guideline_4: "Hindari plagiarisme. Karya harus orisinal.",
         kontrib_guideline_5: "Tim redaksi berhak menyunting konten untuk keperluan editorial.",
 
+        // Jellyfish.Corp
+        grp_jellyfish_hero_title: "Sekilas Informatika",
+        grp_jellyfish_hero_subtitle: "Universitas Tanjungpura",
+        grp_jellyfish_hero_desc: "Mencetak talenta digital unggulan dari Kalimantan Barat untuk Indonesia dan dunia. Bergabunglah bersama kami dalam perjalanan membangun masa depan teknologi.",
+        grp_jellyfish_btn_register: "Daftar Sekarang",
+        grp_jellyfish_btn_learn: "Pelajari Lebih ↓",
+        grp_jellyfish_stat_founded: "Tahun Berdirinya",
+        grp_jellyfish_stat_students: "Mahasiswa Aktif",
+        
+        grp_jellyfish_about_badge: "Tentang Prodi",
+        grp_jellyfish_about_title: "Mengenal Program Studi Informatika UNTAN",
+        grp_jellyfish_about_intro: "Program Studi Informatika Universitas Tanjungpura hadir sejak 2004 dan merupakan salah satu pusat pengembangan talenta digital di Kalimantan Barat. Seiring berkembangnya era digital, kami terus berinovasi untuk menjadi yang terdepan di bidang teknologi informasi yang terus maju.",
+        grp_jellyfish_vision_label: "🎯 Visi",
+        grp_jellyfish_vision_text: "Menjadi program studi unggul, inovatif, dan berdaya saing global, dengan fokus pada informatika cerdas untuk mendukung keberlanjutan dan pemberdayaan masyarakat melalui solusi teknologi berbasis kearifan lokal.",
+        grp_jellyfish_mission_label: "📋 Misi",
+        grp_jellyfish_mission_1_title: "Pendidikan OBE Unggul",
+        grp_jellyfish_mission_1_desc: "Menyelenggarakan pendidikan berbasis informatika cerdas yang unggul dan inovatif melalui pendekatan OBE untuk menghasilkan lulusan yang kompeten, adaptif, beretika, dan berdaya saing global.",
+        grp_jellyfish_mission_2_title: "Penelitian untuk SDGs",
+        grp_jellyfish_mission_2_desc: "Mengembangkan penelitian unggul di bidang informatika cerdas yang mendukung pencapaian Tujuan Pembangunan Berkelanjutan (SDGs) dan relevan dengan tantangan lokal maupun global.",
+        grp_jellyfish_mission_3_title: "Pengabdian Berbasis Kearifan Lokal",
+        grp_jellyfish_mission_3_desc: "Menerapkan dan mengembangkan solusi teknologi berbasis kearifan lokal dalam kegiatan pengabdian kepada masyarakat untuk memberdayakan komunitas secara inklusif dan berkelanjutan.",
+        grp_jellyfish_mission_4_title: "Kemitraan Strategis",
+        grp_jellyfish_mission_4_desc: "Membangun kemitraan strategis dengan industri, pemerintah, dan institusi akademik untuk memperkuat ekosistem riset, inovasi, dan penerapan informatika cerdas yang memberikan dampak nyata.",
+        grp_jellyfish_mission_5_title: "Budaya Akademik Beretika",
+        grp_jellyfish_mission_5_desc: "Menumbuhkan budaya akademik yang beretika, kolaboratif, kreatif, dan berorientasi pada pembelajaran sepanjang hayat untuk mempersiapkan SDM unggul menghadapi disrupsi teknologi.",
+        grp_jellyfish_timeline_title: "Tonggak Sejarah",
+        
+        grp_jellyfish_stats_badge: "Data & Statistik",
+        grp_jellyfish_stats_title: "Informatika UNTAN dalam Angka",
+        grp_jellyfish_stats_subtitle: "Bukan sekadar angka, ini adalah cerita nyata dari perjalanan panjang Informatika UNTAN.",
+        
+        grp_jellyfish_achievement_badge: "Prestasi",
+        grp_jellyfish_achievement_title: "Pencapaian Membanggakan",
+        grp_jellyfish_achievement_subtitle: "Dari panggung nasional hingga kolaborasi internasional — Informatika UNTAN hadir, bersaing, dan meninggalkan jejak.",
+        
+        grp_jellyfish_studyclub_badge: "Komunitas",
+        grp_jellyfish_studyclub_title: "Study Club",
+        grp_jellyfish_studyclub_subtitle: "Study Club hadir sebagai wadah pengembangan kompetensi mahasiswa melalui peminatan yang terstruktur dan berbasis komunitas. Setiap study club dirancang untuk memperdalam keahlian spesifik di bidang informatika.",
+        
+        grp_jellyfish_career_badge: "Karir",
+        grp_jellyfish_career_title: "Masa Depan Lulusan Informatika",
+        grp_jellyfish_career_headline: "Lulusan Informatika UNTAN bukan hanya pencari kerja — mereka pencipta solusi.",
+        grp_jellyfish_career_desc: "Lulusan Prodi Informatika UNTAN diserap secara luas oleh industri teknologi, instansi pemerintah, BUMN, dan startup. Dengan bekal kompetensi digital yang kuat, karir cemerlang menanti di berbagai sektor strategis.",
+        
+        grp_jellyfish_alumni_badge: "Alumni",
+        grp_jellyfish_alumni_title: "Kisah Sukses Alumni",
+        grp_jellyfish_alumni_subtitle: "Mereka adalah bukti nyata bahwa Informatika UNTAN adalah batu loncatan menuju karir gemilang — dari Pontianak, ke panggung dunia.",
+        
+        grp_jellyfish_infra_badge: "Infrastruktur",
+        grp_jellyfish_infra_title: "Infrastruktur dan Fasilitas",
+        grp_jellyfish_infra_subtitle: "Fasilitas lengkap dan modern untuk mendukung proses belajar, penelitian, dan inovasi mahasiswa.",
+        
+        grp_jellyfish_partner_badge: "Kerjasama",
+        grp_jellyfish_partner_title: "Mitra Strategis Informatika UNTAN",
+        grp_jellyfish_partner_subtitle: "Dibangun di atas kepercayaan dan kolaborasi dengan perusahaan teknologi, instansi pemerintah, dan lembaga pendidikan terkemuka.",
+        
+        grp_jellyfish_cta_badge: "Bergabung Bersama Kami",
+        grp_jellyfish_cta_title: "Mulai Perjalanan Digital Anda",
+        grp_jellyfish_cta_highlight: "Bersama Kami",
+        grp_jellyfish_cta_desc: "Jadilah bagian dari komunitas informatika terbaik di Kalimantan Barat. Daftarkan diri Anda sekarang dan wujudkan impian karir teknologi bersama Informatika UNTAN.",
+        grp_jellyfish_btn_registration: "Daftar Mahasiswa Baru",
+        grp_jellyfish_btn_whatsapp: "💬 Chat WhatsApp",
+
+        grp_jellyfish_timeline_2004_title: "Pendirian Program Studi",
+        grp_jellyfish_timeline_2004_desc: "Penerimaan mahasiswa angkatan pertama diselenggarakan pada tanggal 18 Mei melalui mekanisme seleksi internal dan perpindahan studi dari Program Studi Teknik Elektro.",
+        grp_jellyfish_timeline_2005_title: "SNMPTN Pertama",
+        grp_jellyfish_timeline_2005_desc: "Penerimaan mahasiswa baru mulai diintegrasikan secara nasional melalui jalur Seleksi Nasional Masuk Perguruan Tinggi Negeri (SNMPTN).",
+        grp_jellyfish_timeline_2006_title: "Akreditasi C",
+        grp_jellyfish_timeline_2006_desc: "Program studi memperoleh peringkat Akreditasi C dari BAN-PT sebagai langkah awal penjaminan mutu akademik secara sistematis.",
+        grp_jellyfish_timeline_2008_title: "Kelas Malam & SPOTA",
+        grp_jellyfish_timeline_2008_desc: "Pembukaan program kelas sore/malam serta pengembangan SPOTA (Sistem Pendukung Outline Tugas Akhir) sebagai aplikasi inovatif perdana program studi.",
+        grp_jellyfish_timeline_2016_title: "Akreditasi B",
+        grp_jellyfish_timeline_2016_desc: "Peningkatan standar mutu akademik yang ditandai dengan pencapaian peringkat Akreditasi B dari BAN-PT.",
+        grp_jellyfish_timeline_2017_title: "Nama Resmi Berubah",
+        grp_jellyfish_timeline_2017_desc: "Perubahan nomenklatur program studi dari Teknik Informatika menjadi Informatika, serta penyesuaian gelar akademik lulusan dari Sarjana Teknik (S.T.) menjadi Sarjana Komputer (S.Kom.).",
+        grp_jellyfish_timeline_2019_title: "Angkatan PPAPK Terakhir",
+        grp_jellyfish_timeline_2019_desc: "Penyelenggaraan penerimaan mahasiswa jalur non-reguler (PPAPK) angkatan terakhir sebelum resmi dinonaktifkan.",
+        grp_jellyfish_timeline_2021_title: "EdoXid Lahir",
+        grp_jellyfish_timeline_2021_desc: "Peluncuran EdoXid, sistem informasi manajemen sidang tugas akhir berbasis digital guna memfasilitasi kebutuhan akademik selama masa pandemi.",
+        grp_jellyfish_timeline_2023_title: "Guru Besar Pertama",
+        grp_jellyfish_timeline_2023_desc: "Pengukuhan Guru Besar pertama Program Studi Informatika UNTAN, yaitu Prof. Dr. Herry Sujaini, S.T., M.T.",
+        grp_jellyfish_timeline_2025_title: "Kaprodi Ke-5",
+        grp_jellyfish_timeline_2025_desc: "Pelantikan Ibu Eva Faja Ripanti, S.Kom., M.M.S.I., Ph.D. sebagai Ketua Program Studi Informatika yang kelima.",
+        
+        badge_competition: "Kompetisi",
+        badge_publication: "Publikasi",
+        badge_community: "Pengabdian Masyarakat",
+        badge_innovation: "Inovasi Aplikasi",
+        label_finalist: "Finalis",
+        label_team_best: "Tim Regional Terbaik",
+        label_honor: "Honor",
+        label_participant: "PESERTA",
+        label_still_active: "💡 Masih aktif",
+        label_faculty_scale: "🚀 Skala Fakultas",
+        
+        grp_jellyfish_prest_compfest_title: "Finalis 10 Besar Competitive Programming Contest (COMPFEST) 17",
+        grp_jellyfish_prest_compfest_desc: "Berhasil meraih posisi 10 besar nasional pada COMPFEST 17, kompetisi pemrograman yang diselenggarakan oleh Universitas Indonesia (UI).",
+        grp_jellyfish_prest_gemastik18_title: "Tim Regional Terbaik GEMASTIK XVIII bidang Competitive Programming",
+        grp_jellyfish_prest_gemastik18_desc: "Berhasil menjadi Tim Regional Terbaik pada GEMASTIK XVIII pada bidang Competitive Programming",
+        grp_jellyfish_prest_icpc_title: "International Collegiate Programming Contest predikat Honor",
+        grp_jellyfish_prest_icpc_desc: "Tim competitive programming Informatika UNTAN berhasil lolos ke babak regional ICPC Asia Jakarta 2025.",
+        grp_jellyfish_prest_gemastik17_title: "Tim Regional Terbaik GEMASTIK XVII bidang Competitive Programming",
+        grp_jellyfish_prest_gemastik17_desc: "Berhasil menjadi Tim Regional Terbaik pada GEMASTIK XVII pada bidang Competitive Programming",
+        grp_jellyfish_prest_mtq_title: "LOMBA MTQ TINGKAT PROVINSI KALIMANTAN BARAT PESERTA CABANG TAHFIDZ HADITS GOLONGAN 100 HADIST DENGAN SANAD PUTRI",
+        grp_jellyfish_prest_mtq_desc: "Berpastisipasi pada MTQ tingkat provinsi Kalimantan Barat cabang Tahfidz Hadits 100 Hadits Bersanad Putri",
+        grp_jellyfish_prest_crm_title: "Customer Relationship Management (CRM) System pada Peningkatan Layanan Pengguna E-Learning",
+        grp_jellyfish_prest_crm_desc: "Penulis: EF Ripanti, EE Pratama, F Asrin. Penelitian ini mengkaji penerapan sistem CRM untuk meningkatkan kualitas layanan dan kepuasan pengguna pada platform e-learning.",
+        grp_jellyfish_prest_dbscan_title: "REKOMENDASI AREA PEMASARAN BAGI PEDAGANG SAYUR KELILING MENGGUNAKAN METODE DBSCAN DAN VISUALISASI HEATMAP",
+        grp_jellyfish_prest_dbscan_desc: "Penulis: DA Nugraha, IY Sholva, EE Pratama. Penelitian ini memanfaatkan metode DBSCAN dan visualisasi heatmap untuk merekomendasikan area pemasaran yang potensial bagi pedagang sayur keliling.",
+        grp_jellyfish_prest_kmeans_title: "Data mining untuk pengelompokan saham pada sektor energi dengan metode k-means",
+        grp_jellyfish_prest_kmeans_desc: "Penulis: AS Sukamto, W Setiawan, EE Pratama. Penelitian ini menerapkan algoritma K-Means untuk mengelompokkan saham sektor energi berdasarkan karakteristik data yang serupa guna mendukung analisis investasi.",
+        grp_jellyfish_prest_kodingmu_title: "KODINGMU PLATFORM BELAJAR COMPUTATIONAL THINKING BAGI SISWA SMAN 1 MEMPAWAH HILIR",
+        grp_jellyfish_prest_kodingmu_desc: "Kegiatan pengabdian yang bertujuan meningkatkan kemampuan berpikir komputasional dan pemecahan masalah siswa melalui pelatihan serta pemanfaatan platform pembelajaran Kodingmu berbasis aktivitas pemrograman yang interaktif dan menyenangkan.",
+        grp_jellyfish_prest_spota_title: "SPOTA (2008)",
+        grp_jellyfish_prest_spota_desc: "Sistem Pendukung Outline Tugas Akhir — lahir dari ide dosen, dibangun mahasiswa, masih digunakan hingga kini. Inovasi yang melampaui zamannya.",
+        grp_jellyfish_prest_edoxid_title: "EdoXid (2021)",
+        grp_jellyfish_prest_edoxid_desc: "Sistem pengajuan sidang digital — hadir menjawab pandemi, kini naik kelas ke skala Fakultas MIPA Universitas Tanjungpura.",
+
+        grp_jellyfish_btn_filter_publikasi: "Publikasi & Pengabdian",
+        grp_jellyfish_btn_filter_aplikasi: "Aplikasi Unggulan",
+        grp_jellyfish_mhs_aktif: "Mahasiswa Aktif",
+        grp_jellyfish_tahun_akademik: "Tahun Akademik 2024/2025",
+        grp_jellyfish_total_alumni: "Total Alumni",
+        grp_jellyfish_data_total_alumni: "Data sejak tahun 2022",
+        grp_jellyfish_bulan_tunggu: "6 Bulan",
+        grp_jellyfish_waktu_tunggu_kerja: "Waktu Tunggu Kerja",
+        grp_jellyfish_rata_lulusan: "Rata-rata lulusan terserap",
+        grp_jellyfish_dosen_tetap: "Dosen Tetap",
+        grp_jellyfish_desc_dosen: "Berpengalaman dan bersertifikasi di bidangnya masing-masing.",
+        grp_jellyfish_jurnal_ilmiah: "Jurnal Ilmiah",
+        grp_jellyfish_jurnal: "400+ Jurnal",
+        grp_jellyfish_rasio_dosen: "Rasio Dosen : Mahasiswa",
+        grp_jellyfish_guru_besar: "Guru Besar",
+        grp_jellyfish_jlh_guru_besar: "1 Guru Besar",
+        grp_jellyfish_nama_guru_besar: "Prof. Dr. Herry Sujaini, S.T., M.T. — Guru Besar pertama Informatika UNTAN (sejak 2023).",
+        grp_jellyfish_rasio_standar: "Memenuhi standar BAN-PT",
+        grp_jellyfish_arise: "Program kerja ini berfokus pada peminatan competitive programming. Mahasiswa dilatih untuk mengasah kemampuan pemecahan masalah dan algoritma melalui kompetisi pemrograman bergengsi tingkat nasional maupun internasional.",
+        grp_jellyfish_software: "Berfokus pada peminatan software development. Materi yang diajarkan meliputi fundamental dasar web, version control (GitHub), software development life cycle, Entity Relationship Diagram, tech-stack, dan use case.",
+        grp_jellyfish_minerva: "Berfokus pada peminatan data mining. Mahasiswa akan mendalami teknik penggalian data, analisis statistik, dan penerapannya dalam berbagai domain industri untuk menghasilkan insight yang bernilai.",
+        grp_jellyfish_join_studyclub: "Bergabung dengan Study Club",
+        grp_jellyfish_studyclub: "Study club ini terbuka bagi seluruh mahasiswa aktif Prodi Informatika UNTAN. Pilih peminatan yang sesuai dengan minat dan tujuan karirmu.",
+        grp_jellyfish_study_info: "Info Lebih Lanjut →",
+        grp_jellyfish_btn_filter_semua: "Semua",
+        grp_jellyfish_btn_filter_kompetisi: "Kompetisi",
+        grp_jellyfish_bidang_karir: "Bidang Karir",
+
+        grp_jellyfish_akademisi: "Akademisi / Dosen",
+        grp_jellyfish_wirausaha: "Wirausaha Digital",
+        grp_jellyfish_mandiri: "Mandiri, Remote Work",
+        grp_jellyfish_if_akt1: "Informatika, Angkatan 2005",
+        grp_jellyfish_if_akt2: "Informatika, Angkatan 2018",
+        grp_jellyfish_if_akt3: "Informatika, Angkatan 2006",
+        grp_jellyfish_kerja1: "Dosen UM Pontianak",
+        grp_jellyfish_alumni_desc1: "Alumni Informatika UNTAN angkatan 2005 yang membangun fondasi kuat di bidang komputasi, melanjutkan studi magister di Marmara University melalui beasiswa Türkiye Bursları, berkarier sebagai dosen di Universitas Muhammadiyah Pontianak, dan kini menempuh doktoral di Universidad de Granada dengan fokus pada kecerdasan buatan untuk sistem transportasi cerdas dan informatika kesehatan.",
+        grp_jellyfish_alumni_desc2: "Alumni Informatika UNTAN dengan kemampuan kuat dalam pemrograman dan problem solving, melanjutkan studi master di Saarland University Jerman dengan riset kecerdasan buatan bertaraf internasional, lalu berkarier sebagai Software Developer di perusahaan FinTech Travixy Frankfurt, mengembangkan platform pembiayaan yang menggerakkan transaksi bernilai miliaran Euro.",
+        grp_jellyfish_alumni_desc3: "Alumni Informatika UNTAN angkatan 2006 yang kini berkarier sebagai Product Team di AI Rudder, berbekal pengalaman pembelajaran berbasis proyek selama kuliah, melanjutkan studi S2 di China melalui beasiswa, serta berkontribusi dalam industri kecerdasan buatan dengan perspektif global.",
+        grp_jellyfish_infra_lab_name: "8 Laboratorium",
+        grp_jellyfish_infra_lab_desc: "Lab Pemrograman, Jaringan, Multimedia, IoT, AI, Basis Data, Mobile Dev, dan Keamanan Siber — ber-AC, High-Speed PC.",
+        grp_jellyfish_infra_lab_stat: "8 Lab Aktif & Berteknologi",
+        grp_jellyfish_infra_dc_name: "Data Center",
+        grp_jellyfish_infra_dc_desc: "Server on-premise dengan infrastruktur cloud lokal berkapasitas tinggi untuk penelitian dan deployment aplikasi.",
+        grp_jellyfish_infra_dc_stat: "99.9% Uptime · Redundant",
+        grp_jellyfish_infra_hub_name: "IFUNTANHUB",
+        grp_jellyfish_infra_hub_desc: "Platform PaaS eksklusif mahasiswa untuk deploy aplikasi, hosting proyek, akses GPU computing, dan kolaborasi tim.",
+        grp_jellyfish_infra_hub_stat: "Gratis · GPU Access",
+        grp_jellyfish_infra_eresources_name: "E-Resources",
+        grp_jellyfish_infra_eresources_desc: "Akses jurnal internasional Scopus, IEEE Xplore, ACM Digital Library, Springer, dan database ilmiah lainnya.",
+        grp_jellyfish_infra_eresources_stat: "IEEE · Scopus · ACM",
+        grp_jellyfish_license_label: "Lisensi Perangkat Lunak Tersedia:",
+
+        grp_jellyfish_labs: "Lab Pemrograman, Jaringan, Multimedia, IoT, AI, Basis Data, Mobile Dev, dan Keamanan Siber — ber-AC, High-Speed PC.",
+        grp_jellyfish_labs2: "8 Lab Aktif & Berteknologi",
+        grp_jellyfish_data_center: "Server on-premise dengan infrastruktur cloud lokal berkapasitas tinggi untuk penelitian dan deployment aplikasi.",
+        grp_jellyfish_ifuntanhub: "Platform PaaS eksklusif mahasiswa untuk deploy aplikasi, hosting proyek, akses GPU computing, dan kolaborasi tim.",
+        grp_jellyfish_free: "Gratis · GPU Access",
+        grp_jellyfish_resources: "Akses jurnal internasional Scopus, IEEE Xplore, ACM Digital Library, Springer, dan database ilmiah lainnya.",
+        grp_jellyfish_license: "Lisensi Perangkat Lunak Tersedia:",
+
+        grp_jellyfish_industri: "Industri & Swasta",
+        grp_jellyfish_pemerintah: "Instansi Pemerintah",
+        grp_jellyfish_perguruan_tinggi: "Perguruan Tinggi & Lembaga Riset",
+
+        grp_jellyfish_info_kontak: "Informasi Kontak",
+        grp_jellyfish_alamat: "Alamat",
+        grp_jellyfish_tanggal: "Senin – Jumat, 08.00 – 16.00 WIB",
+        grp_jellyfish_telepon: "Telepon / Fax",
+
         grp_limaem_hero_badge: "KOMUNITAS & KEPEMIMPINAN",
         grp_limaem_hero_title: "Kehidupan Mahasiswa & <span style=\"color:#f5c82f;\">Himpunan (HMIF)</span>",
         grp_limaem_hero_desc: "Membangun ekosistem kolaboratif di mana teknologi bertemu dengan kreativitas, membentuk calon pemimpin industri masa depan.",
@@ -601,7 +788,7 @@ const translations = {
         ape_cta_btn2: "Hubungi Kami",
         grp_habisiniseminar_page_title: "Penerimaan Mahasiswa Baru Informatika UNTAN | Kelompok 02",
         grp_habisiniseminar_brand: "Informatika UNTAN Penerimaan Mahasiswa Baru",
-        grp_habisiniseminar_badge: "Halaman Statis",
+        grp_habisiniseminar_badge: "Informasi Jalur Seleksi",
         grp_habisiniseminar_hero_title_1: "Penerimaan Mahasiswa Baru",
         grp_habisiniseminar_hero_title_2: "Informatika UNTAN",
         grp_habisiniseminar_hero_description: "Informasi dan jadwal pendaftaran mahasiswa baru melalui jalur SNBP, SNBT, dan Jalur Mandiri UNTAN",
@@ -729,15 +916,15 @@ const translations = {
         grp_habisiniseminar_faq_q3: "Apa yang harus dilakukan setelah dinyatakan lulus seleksi?",
         grp_habisiniseminar_faq_a3: "Calon mahasiswa wajib melakukan registrasi ulang dan memenuhi seluruh persyaratan administrasi sesuai ketentuan. Informasi lebih lanjut dapat diakses melalui website atau media sosial resmi Informatika UNTAN.",
         grp_habisiniseminar_faq_q4: "Berapa pilihan peminatan yang tersedia pada program studi ini?",
-        grp_habisiniseminar_faq_a4: "Program studi ini menyediakan 4 peminatan, yaitu Kecerdasan Buatan (AI), Rekayasa Perangkat Lunak, Jaringan & Keamanan, serta Sistem Informasi.",
+        grp_habisiniseminar_faq_a4: "Program studi ini menyediakan 4 peminatan, yaitu Kecerdasan Buatan (AI), Rekayasa Perangkat Lunak, Jaringan & Keamanan, serta Sistem Informasi. Informasi mengenai kelompok peminatan dapat diakses <a href=\"https://student-project.ifuntanhub.dev/groups/RODA/index.html\" style=\"text-decoration: underline;\" target=\"_blank\" rel=\"noopener noreferrer\">di sini</a>.",
         grp_habisiniseminar_faq_q5: "Apakah mahasiswa akan mendapatkan pengalaman praktik atau proyek selama kuliah?",
         grp_habisiniseminar_faq_a5: "Ya, mahasiswa akan mengikuti berbagai praktikum, tugas proyek, serta kerja kelompok yang dirancang untuk meningkatkan keterampilan teknis dan pemecahan masalah secara nyata.",
         grp_habisiniseminar_faq_q6: "Bagaimana suasana dan kehidupan kampus di Informatika UNTAN?",
-        grp_habisiniseminar_faq_a6: "Lingkungan kampus mendukung kegiatan akademik dan non-akademik, dengan berbagai organisasi mahasiswa dan komunitas teknologi. Untuk mengetahui lebih lanjut mengenai kehidupan kampus dan aktivitas mahasiswa, silakan kunjungi halaman terkait <a href=\"https://informatika.untan.ac.id/content.html?type=people_stories\" target=\"_blank\" rel=\"noopener noreferrer\">di sini</a>.",
+        grp_habisiniseminar_faq_a6: "Lingkungan kampus mendukung kegiatan akademik dan non-akademik, dengan berbagai organisasi mahasiswa dan komunitas teknologi. Untuk mengetahui lebih lanjut mengenai kehidupan kampus dan aktivitas mahasiswa, silakan kunjungi halaman terkait <a href=\"https://student-project.ifuntanhub.dev/groups/HarusSelesaiKP/index.html\" style=\"text-decoration: underline;\" target=\"_blank\" rel=\"noopener noreferrer\">di sini</a>.",
         grp_habisiniseminar_faq_q7: "Apakah lulusan Informatika UNTAN memiliki peluang kerja yang baik?",
         grp_habisiniseminar_faq_a7: "Lulusan memiliki peluang kerja yang luas di berbagai bidang seperti pengembangan perangkat lunak, analisis data, keamanan jaringan, hingga kewirausahaan di bidang teknologi.",
         grp_habisiniseminar_faq_q8: "Apakah mahasiswa Informatika UNTAN dapat mengikuti lomba atau kompetisi?",
-        grp_habisiniseminar_faq_a8: "Ya, mahasiswa didorong untuk berpartisipasi dalam berbagai lomba dan kompetisi di bidang teknologi, baik tingkat lokal, nasional, maupun internasional. Informasi mengenai lomba dan prestasi mahasiswa dapat diakses <a href=\"https://informatika.untan.ac.id/content.html?type=people_stories\" target=\"_blank\" rel=\"noopener noreferrer\">di sini</a>.",
+        grp_habisiniseminar_faq_a8: "Ya, mahasiswa didorong untuk berpartisipasi dalam berbagai lomba dan kompetisi di bidang teknologi, baik tingkat lokal, nasional, maupun internasional. Informasi mengenai lomba dan prestasi mahasiswa dapat diakses <a href=\"https://student-project.ifuntanhub.dev/groups/ACAAB/index.html\" style=\"text-decoration: underline;\" target=\"_blank\" rel=\"noopener noreferrer\">di sini</a>.",
         grp_habisiniseminar_month_jan: "Januari",
         grp_habisiniseminar_month_feb: "Februari",
         grp_habisiniseminar_month_mar: "Maret",
@@ -898,6 +1085,46 @@ const translations = {
         grp_m4n1fest_cta_box_title: "Siap bergabung?",
         grp_m4n1fest_cta_box_desc: "Scroll ke atas dan isi form pendaftaran IKA sekarang. Gratis, cepat, dan langsung terhubung dengan ratusan alumni!",
         grp_m4n1fest_cta_box_btn: "Daftar IKA Sekarang",
+
+        // --- Group C4A: Staf Pendukung & SOP ---
+        grp_c4a_hero_tag: "LAYANAN AKADEMIK \u2022 INFORMATIKA UNTAN",
+        grp_c4a_hero_title: "Staf Pendukung &amp; <br/><span class=\"highlight-orange\">Standar Operasional Prosedur (SOP)</span>",
+        grp_c4a_hero_desc: "Halaman ini menampilkan informasi petugas layanan akademik serta prosedur administrasi mahasiswa Program Studi Informatika UNTAN.",
+        grp_c4a_stat_staf: "Staf Aktif",
+        grp_c4a_stat_sop: "Jenis SOP",
+        grp_c4a_staff_tag: "Tim Kami",
+        grp_c4a_staff_title: "Staf Pendukung",
+        grp_c4a_staff_subtitle: "Staf yang siap melayani kebutuhan akademik dan operasional laboratorium di Prodi Informatika UNTAN.",
+        grp_c4a_sop_tag: "Prosedur Resmi",
+        grp_c4a_sop_title: "Standar Operasional Prosedur (SOP)",
+        grp_c4a_sop_subtitle: "Standar Operasional Prosedur untuk berbagai kebutuhan administrasi akademik mahasiswa. Gunakan pencarian atau filter untuk menemukan SOP yang Anda butuhkan.",
+        grp_c4a_sop_search_placeholder: "Cari SOP berdasarkan judul...",
+        grp_c4a_sop_chip_semua: "Semua",
+        grp_c4a_sop_chip_akademik: "Akademik",
+        grp_c4a_sop_chip_praktikum: "Praktikum",
+        grp_c4a_sop_empty_title: "SOP tidak ditemukan",
+        grp_c4a_sop_empty_desc: "Coba kata kunci lain atau reset filter pencarian.",
+        grp_c4a_sop_reset_btn: "Reset Pencarian",
+        grp_c4a_faq_tag: "Pertanyaan Umum",
+        grp_c4a_faq_title: "Pertanyaan yang Sering Diajukan",
+        grp_c4a_faq_subtitle: "Temukan jawaban cepat atas pertanyaan umum mahasiswa seputar layanan akademik prodi.",
+        grp_c4a_empty_staff: "Data staf pendukung tidak tersedia saat ini.",
+        grp_c4a_empty_sop: "Data SOP tidak tersedia saat ini.",
+        grp_c4a_empty_faq: "Data FAQ tidak tersedia saat ini.",
+        grp_c4a_label_location: "Lokasi",
+        grp_c4a_label_service_hours: "Jam Layanan",
+        grp_c4a_label_wa_contact: "Kontak WhatsApp",
+        grp_c4a_label_tasks: "Tugas & Tanggung Jawab",
+        grp_c4a_label_send_wa: "Kirim Pesan WA",
+        grp_c4a_label_steps: "Langkah",
+        grp_c4a_label_view_detail: "Lihat Detail",
+        grp_c4a_label_responsible_staff: "Staf Bertanggung Jawab (Bersifat Opsional)",
+        grp_c4a_label_additional_info: "Informasi Tambahan (Bersifat Opsional):",
+        grp_c4a_label_purpose: "Tujuan",
+        grp_c4a_label_requirements: "Persyaratan",
+        grp_c4a_label_procedure: "Alur Prosedur",
+        grp_c4a_sop_showing_all: "Menampilkan {total} SOP",
+        grp_c4a_sop_showing_filtered: "Menampilkan {shown} dari {total} SOP",
     },
     en: {
         skip_to_content: "Skip to Main Content",
@@ -1397,6 +1624,194 @@ const translations = {
         kontrib_guideline_2: "Minimum article length is 500 words.",
         kontrib_guideline_3: "Include accurate and verifiable facts and data.",
         kontrib_guideline_4: "Avoid plagiarism. Work must be original.",
+        kontrib_guideline_5: "The editorial team reserves the right to edit content for editorial purposes.",
+
+        // Jellyfish.Corp
+        grp_jellyfish_hero_title: "Informatika Overview",
+        grp_jellyfish_hero_subtitle: "Tanjungpura University",
+        grp_jellyfish_hero_desc: "Producing outstanding digital talents from West Kalimantan for Indonesia and the world. Join us on the journey to build the future of technology.",
+        grp_jellyfish_btn_register: "Register Now",
+        grp_jellyfish_btn_learn: "Learn More ↓",
+        grp_jellyfish_stat_founded: "Year Founded",
+        grp_jellyfish_stat_students: "Active Students",
+        
+        grp_jellyfish_about_badge: "About the Program",
+        grp_jellyfish_about_title: "Get to Know Informatika Study Program UNTAN",
+        grp_jellyfish_about_intro: "The Informatika Study Program at Tanjungpura University has been active since 2004 and is one of the centers for developing digital talents in West Kalimantan. As the digital era evolves, we continue to innovate to be at the forefront of rapidly advancing information technology.",
+        grp_jellyfish_vision_label: "🎯 Vision",
+        grp_jellyfish_vision_text: "To become an excellent, innovative, and globally competitive study program, focusing on intelligent informatics to support sustainability and community empowerment through technology solutions based on local wisdom.",
+        grp_jellyfish_mission_label: "📋 Mission",
+        grp_jellyfish_mission_1_title: "Excellent OBE Education",
+        grp_jellyfish_mission_1_desc: "Deliver excellent and innovative education based on intelligent informatics through an OBE approach to produce graduates who are competent, adaptable, ethical, and globally competitive.",
+        grp_jellyfish_mission_2_title: "Research for SDGs",
+        grp_jellyfish_mission_2_desc: "Develop leading research in the field of intelligent informatics that supports the achievement of Sustainable Development Goals (SDGs) and is relevant to local and global challenges.",
+        grp_jellyfish_mission_3_title: "Community Service Based on Local Wisdom",
+        grp_jellyfish_mission_3_desc: "Apply and develop technology solutions based on local wisdom in community service activities to empower communities inclusively and sustainably.",
+        grp_jellyfish_mission_4_title: "Strategic Partnerships",
+        grp_jellyfish_mission_4_desc: "Build strategic partnerships with industry, government, and academic institutions to strengthen the ecosystem of research, innovation, and application of intelligent informatics that has real impact.",
+        grp_jellyfish_mission_5_title: "Ethical Academic Culture",
+        grp_jellyfish_mission_5_desc: "Foster an ethical, collaborative, creative academic culture oriented toward lifelong learning to prepare excellent human resources facing technology disruption.",
+        grp_jellyfish_timeline_title: "Milestones",
+        
+        grp_jellyfish_stats_badge: "Data & Statistics",
+        grp_jellyfish_stats_title: "Informatika UNTAN in Numbers",
+        grp_jellyfish_stats_subtitle: "Not just numbers—these are real stories from the long journey of Informatika UNTAN.",
+        
+        grp_jellyfish_achievement_badge: "Achievements",
+        grp_jellyfish_achievement_title: "Outstanding Achievements",
+        grp_jellyfish_achievement_subtitle: "From national stages to international collaboration — Informatika UNTAN is present, competing, and leaving a mark.",
+        
+        grp_jellyfish_studyclub_badge: "Community",
+        grp_jellyfish_studyclub_title: "Study Club",
+        grp_jellyfish_studyclub_subtitle: "Study Club is a platform for developing student competencies through structured interests and community-based initiatives. Each study club is designed to deepen specific expertise in informatics.",
+        
+        grp_jellyfish_career_badge: "Career",
+        grp_jellyfish_career_title: "Future of Informatika Graduates",
+        grp_jellyfish_career_headline: "Informatika UNTAN graduates are not just job seekers — they are solution creators.",
+        grp_jellyfish_career_desc: "Informatika UNTAN graduates are absorbed widely by technology industries, government agencies, SOEs, and startups. With strong digital competencies, brilliant careers await in various strategic sectors.",
+        
+        grp_jellyfish_alumni_badge: "Alumni",
+        grp_jellyfish_alumni_title: "Alumni Success Stories",
+        grp_jellyfish_alumni_subtitle: "They are proof that Informatika UNTAN is a stepping stone to a brilliant career — from Pontianak, to the world stage.",
+        
+        grp_jellyfish_infra_badge: "Infrastructure",
+        grp_jellyfish_infra_title: "Infrastructure and Facilities",
+        grp_jellyfish_infra_subtitle: "Complete and modern facilities to support student learning, research, and innovation processes.",
+        
+        grp_jellyfish_partner_badge: "Partnerships",
+        grp_jellyfish_partner_title: "Strategic Partners of Informatika UNTAN",
+        grp_jellyfish_partner_subtitle: "Built on trust and collaboration with leading technology companies, government agencies, and educational institutions.",
+        
+        grp_jellyfish_cta_badge: "Join Us",
+        grp_jellyfish_cta_title: "Start Your Digital Journey",
+        grp_jellyfish_cta_highlight: "With Us",
+        grp_jellyfish_cta_desc: "Become part of the best informatics community in West Kalimantan. Register now and realize your technology career dreams with Informatika UNTAN.",
+        grp_jellyfish_btn_registration: "Register as New Student",
+        grp_jellyfish_btn_whatsapp: "💬 Chat on WhatsApp",
+
+        grp_jellyfish_timeline_2004_title: "Program Establishment",
+        grp_jellyfish_timeline_2004_desc: "The first batch of students was admitted on May 18 through internal selection and transfer from the Electrical Engineering Study Program.",
+        grp_jellyfish_timeline_2005_title: "First SNMPTN",
+        grp_jellyfish_timeline_2005_desc: "New student admissions were integrated nationally through the Seleksi Nasional Masuk Perguruan Tinggi Negeri (SNMPTN).",
+        grp_jellyfish_timeline_2006_title: "Accreditation C",
+        grp_jellyfish_timeline_2006_desc: "The study program obtained Accreditation C rating from BAN-PT as the first step of systematic academic quality assurance.",
+        grp_jellyfish_timeline_2008_title: "Evening Classes & SPOTA",
+        grp_jellyfish_timeline_2008_desc: "Opening of evening program classes and development of SPOTA (Final Project Outline Support System) as the first innovative application of the study program.",
+        grp_jellyfish_timeline_2016_title: "Accreditation B",
+        grp_jellyfish_timeline_2016_desc: "Improvement of academic quality standards marked by achieving Accreditation B rating from BAN-PT.",
+        grp_jellyfish_timeline_2017_title: "Official Name Change",
+        grp_jellyfish_timeline_2017_desc: "Change of study program nomenclature from Information Technology Engineering to Informatics, and adjustment of graduate degree title from Bachelor of Engineering (S.T.) to Bachelor of Computer Science (S.Kom.).",
+        grp_jellyfish_timeline_2019_title: "Last PPAPK Cohort",
+        grp_jellyfish_timeline_2019_desc: "Implementation of non-regular student admission (PPAPK) as the last cohort before official deactivation.",
+        grp_jellyfish_timeline_2021_title: "EdoXid Launch",
+        grp_jellyfish_timeline_2021_desc: "Launch of EdoXid, a digital information management system for final project examinations to support academic needs during the pandemic.",
+        grp_jellyfish_timeline_2023_title: "First Professor",
+        grp_jellyfish_timeline_2023_desc: "Inauguration of the first Professor of Informatika Study Program UNTAN, namely Prof. Dr. Herry Sujaini, S.T., M.T.",
+        grp_jellyfish_timeline_2025_title: "5th Head of Study Program",
+        grp_jellyfish_timeline_2025_desc: "Inauguration of Eva Faja Ripanti, S.Kom., M.M.S.I., Ph.D. as the fifth Head of Informatika Study Program.",
+
+        badge_competition: "Competition",
+        badge_publication: "Publication",
+        badge_community: "Community Service",
+        badge_innovation: "Application Innovation",
+        label_finalist: "Finalist",
+        label_team_best: "Best Regional Team",
+        label_honor: "Honor",
+        label_participant: "PARTICIPANT",
+        label_still_active: "💡 Still Active",
+        label_faculty_scale: "🚀 Faculty-wide Scale",
+        
+        grp_jellyfish_prest_compfest_title: "Top 10 Finalist Competitive Programming Contest (COMPFEST) 17",
+        grp_jellyfish_prest_compfest_desc: "Successfully achieved top 10 national position at COMPFEST 17, a programming competition organized by Universitas Indonesia (UI).",
+        grp_jellyfish_prest_gemastik18_title: "Best Regional Team GEMASTIK XVIII Competitive Programming Category",
+        grp_jellyfish_prest_gemastik18_desc: "Successfully became the Best Regional Team at GEMASTIK XVIII in the Competitive Programming category.",
+        grp_jellyfish_prest_icpc_title: "International Collegiate Programming Contest with Honor Distinction",
+        grp_jellyfish_prest_icpc_desc: "Informatika UNTAN's competitive programming team successfully advanced to the ICPC Asia Jakarta 2025 regional round.",
+        grp_jellyfish_prest_gemastik17_title: "Best Regional Team GEMASTIK XVII Competitive Programming Category",
+        grp_jellyfish_prest_gemastik17_desc: "Successfully became the Best Regional Team at GEMASTIK XVII in the Competitive Programming category.",
+        grp_jellyfish_prest_mtq_title: "WEST KALIMANTAN PROVINCIAL MTQ COMPETITION PARTICIPANT TAHFIDZ HADITS 100 HADITS WITH CHAIN FEMALE CATEGORY",
+        grp_jellyfish_prest_mtq_desc: "Participated in the West Kalimantan provincial MTQ competition in the Tahfidz Hadits 100 Hadits with Chain Female category.",
+        grp_jellyfish_prest_crm_title: "Customer Relationship Management (CRM) System to Improve E-Learning User Services",
+        grp_jellyfish_prest_crm_desc: "Authors: EF Ripanti, EE Pratama, F Asrin. This research examines the application of CRM systems to improve service quality and user satisfaction on e-learning platforms.",
+        grp_jellyfish_prest_dbscan_title: "MARKETING AREA RECOMMENDATIONS FOR MOBILE VEGETABLE VENDORS USING DBSCAN METHOD AND HEATMAP VISUALIZATION",
+        grp_jellyfish_prest_dbscan_desc: "Authors: DA Nugraha, IY Sholva, EE Pratama. This research uses DBSCAN method and heatmap visualization to recommend potential marketing areas for mobile vegetable vendors.",
+        grp_jellyfish_prest_kmeans_title: "Data mining for stock clustering in the energy sector using k-means method",
+        grp_jellyfish_prest_kmeans_desc: "Authors: AS Sukamto, W Setiawan, EE Pratama. This research applies K-Means algorithm to cluster energy sector stocks based on similar data characteristics to support investment analysis.",
+        grp_jellyfish_prest_kodingmu_title: "KODINGMU COMPUTATIONAL THINKING LEARNING PLATFORM FOR SMAN 1 MEMPAWAH HILIR STUDENTS",
+        grp_jellyfish_prest_kodingmu_desc: "A community service program aimed at improving computational thinking and problem-solving skills of students through training and the use of the interactive Kodingmu learning platform based on programming activities.",
+        grp_jellyfish_prest_spota_title: "SPOTA (2008)",
+        grp_jellyfish_prest_spota_desc: "Final Project Outline Support System — born from faculty idea, built by students, still in use today. An innovation ahead of its time.",
+        grp_jellyfish_prest_edoxid_title: "EdoXid (2021)",
+        grp_jellyfish_prest_edoxid_desc: "Digital examination submission system — emerged to meet pandemic needs, now scaled up to the Faculty of Mathematics and Natural Sciences of Tanjungpura University.",
+        
+        grp_jellyfish_btn_filter_publikasi: "Publications & Community Service",
+        grp_jellyfish_btn_filter_aplikasi: "Application Innovation",
+        grp_jellyfish_mhs_aktif: "Active Students",
+        grp_jellyfish_tahun_akademik: "Academic Year 2024/2025",
+        grp_jellyfish_total_alumni: "Alumni Total",
+        grp_jellyfish_data_total_alumni: "Data since 2022",
+        grp_jellyfish_bulan_tunggu: "6 Months",
+        grp_jellyfish_waktu_tunggu_kerja: "Employment Wait Time",
+        grp_jellyfish_rata_lulusan: "Average graduate absorption",
+        grp_jellyfish_dosen_tetap: "Permanent Lecturers",
+        grp_jellyfish_desc_dosen: "Experienced and certified in their respective fields.",
+        grp_jellyfish_jurnal_ilmiah: "Scientific Journals",
+        grp_jellyfish_jurnal: "400+ Journals",
+        grp_jellyfish_rasio_dosen: "Lecturer and Student Ratio",
+        grp_jellyfish_guru_besar: "Professor",
+        grp_jellyfish_jlh_guru_besar: "1 Professor",
+        grp_jellyfish_nama_guru_besar: "Prof. Dr. Herry Sujaini, S.T., M.T. — the first Professor of Informatika UNTAN (since 2023).",
+        grp_jellyfish_rasio_standar: "Meets BAN-PT standards",
+        grp_jellyfish_arise: "This activity program focuses on competitive programming. Students are trained to sharpen problem-solving and algorithm skills through prestigious national and international programming competitions.",
+        grp_jellyfish_software: "Focused on software development. The materials cover basic web fundamentals, version control (GitHub), software development life cycle, Entity Relationship Diagram, tech stack, and use cases.",
+        grp_jellyfish_minerva: "Focused on data mining. Students will deepen data extraction techniques, statistical analysis, and application in various industry domains to produce valuable insights.",
+        grp_jellyfish_join_studyclub: "Join a Study Club",
+        grp_jellyfish_studyclub: "This study club is open to all active Informatika UNTAN students. Choose a specialization that matches your interests and career goals.",
+        grp_jellyfish_study_info: "More Info →",
+        grp_jellyfish_btn_filter_semua: "All",
+        grp_jellyfish_btn_filter_kompetisi: "Competition",
+        grp_jellyfish_bidang_karir: "Career Field",
+
+        grp_jellyfish_akademisi: "Academia / Lecturer",
+        grp_jellyfish_wirausaha: "Digital Entrepreneurship",
+        grp_jellyfish_mandiri: "Independent, Remote Work",
+        grp_jellyfish_if_akt1: "Informatics, Class of 2005",
+        grp_jellyfish_if_akt2: "Informatics, Class of 2018",
+        grp_jellyfish_if_akt3: "Informatics, Class of 2006",
+        grp_jellyfish_kerja1: "Lecturer at UM Pontianak",
+        grp_jellyfish_alumni_desc1: "A 2005 Informatika UNTAN alumnus who built a strong computing foundation, continued master's studies at Marmara University on a Türkiye Bursları scholarship, worked as a lecturer at Muhammadiyah University of Pontianak, and is now pursuing a doctoral degree at Universidad de Granada with a focus on AI for smart transportation systems and health informatics.",
+        grp_jellyfish_alumni_desc2: "An Informatika UNTAN alumnus with strong programming and problem-solving skills, who continued master's studies at Saarland University in Germany on international AI research, then worked as a Software Developer at FinTech Travixy Frankfurt, developing financing platforms that power billion-euro transactions.",
+        grp_jellyfish_alumni_desc3: "A 2006 Informatika UNTAN alumnus currently working on the Product Team at AI Rudder, leveraging project-based learning experience from college, continuing postgraduate studies in China on scholarship, and contributing to the global AI industry.",
+        grp_jellyfish_infra_lab_name: "8 Laboratories",
+        grp_jellyfish_infra_lab_desc: "Programming, Networking, Multimedia, IoT, AI, Database, Mobile Dev, and Cybersecurity labs — air-conditioned, high-speed PCs.",
+        grp_jellyfish_infra_lab_stat: "8 Active & High-Tech Labs",
+        grp_jellyfish_infra_dc_name: "Data Center",
+        grp_jellyfish_infra_dc_desc: "On-premise servers with high-capacity local cloud infrastructure for research and application deployment.",
+        grp_jellyfish_infra_dc_stat: "99.9% Uptime · Redundant",
+        grp_jellyfish_infra_hub_name: "IFUNTANHUB",
+        grp_jellyfish_infra_hub_desc: "Exclusive student PaaS platform for app deployment, project hosting, GPU access, and team collaboration.",
+        grp_jellyfish_infra_hub_stat: "Free · GPU Access",
+        grp_jellyfish_infra_eresources_name: "E-Resources",
+        grp_jellyfish_infra_eresources_desc: "Access to international journals like Scopus, IEEE Xplore, ACM Digital Library, Springer, and other research databases.",
+        grp_jellyfish_infra_eresources_stat: "IEEE · Scopus · ACM",
+        grp_jellyfish_license_label: "Available Software Licenses:",
+
+        grp_jellyfish_labs: "Programming, Networking, Multimedia, IoT, AI, Database, Mobile Dev, and Cybersecurity labs — air-conditioned, high-speed PCs.",
+        grp_jellyfish_labs2: "8 Active & High-Tech Labs",
+        grp_jellyfish_data_center: "On-premise servers with high-capacity local cloud infrastructure for research and application deployment.",
+        grp_jellyfish_ifuntanhub: "Exclusive student PaaS platform for app deployment, project hosting, GPU access, and team collaboration.",
+        grp_jellyfish_free: "Free · GPU Access",
+        grp_jellyfish_resources: "Access to international journals like Scopus, IEEE Xplore, ACM Digital Library, Springer, and other research databases.",
+        grp_jellyfish_license: "Available Software Licenses:",
+
+        grp_jellyfish_industri: "Industry & Private Sector",
+        grp_jellyfish_pemerintah: "Government Agencies",
+        grp_jellyfish_perguruan_tinggi: "Higher Education & Research Institutes",
+
+        grp_jellyfish_info_kontak: "Contact Information",
+        grp_jellyfish_alamat: "Address",
+        grp_jellyfish_tanggal: "Monday – Friday, 08.00 – 16.00 WIB",
+        grp_jellyfish_telepon: "Phone / Fax",
         kontrib_guideline_5: "The editorial team reserves the right",
         ape_breadcrumb_profile: "Profile",
         ape_breadcrumb_scholarship: "Scholarship",
@@ -1423,7 +1838,7 @@ const translations = {
         ape_cta_btn2: "Contact Us",
         grp_habisiniseminar_page_title: "New Student Admission Informatics UNTAN | Group 02",
         grp_habisiniseminar_brand: "Informatics UNTAN New Student Admission",
-        grp_habisiniseminar_badge: "Static Page",
+        grp_habisiniseminar_badge: "Selection Path Information",
         grp_habisiniseminar_hero_title_1: "New Student Admission",
         grp_habisiniseminar_hero_title_2: "Informatics UNTAN",
         grp_habisiniseminar_hero_description: "Information and schedule for new student registration via the SNBP, SNBT, and UNTAN Independent Pathways",
@@ -1551,15 +1966,15 @@ const translations = {
         grp_habisiniseminar_faq_q3: "What should I do after being declared accepted?",
         grp_habisiniseminar_faq_a3: "Accepted applicants must complete re-registration and fulfill all administrative requirements. Further information is available on the official Informatics UNTAN website and social media channels.",
         grp_habisiniseminar_faq_q4: "How many specializations does this study program offer?",
-        grp_habisiniseminar_faq_a4: "This program offers four specializations: Artificial Intelligence (AI), Software Engineering, Networks & Security, and Information Systems.",
+        grp_habisiniseminar_faq_a4: "This program offers four specializations: Artificial Intelligence (AI), Software Engineering, Networks & Security, and Information Systems. Information regarding specialization groups can be accessed <a href=\"https://student-project.ifuntanhub.dev/groups/RODA/index.html\" style=\"text-decoration: underline;\" target=\"_blank\" rel=\"noopener noreferrer\">here</a>.",
         grp_habisiniseminar_faq_q5: "Will students gain practical or project experience during their studies?",
         grp_habisiniseminar_faq_a5: "Yes. Students will take part in various practicum sessions, project assignments, and group work designed to build technical skills and real-world problem-solving abilities.",
         grp_habisiniseminar_faq_q6: "What is campus life like at Informatics UNTAN?",
-        grp_habisiniseminar_faq_a6: "The campus environment supports both academic and non-academic activities, with numerous student organizations and technology communities. To learn more about campus life and student activities, please visit the related page <a href=\"https://informatika.untan.ac.id/content.html?type=people_stories\" target=\"_blank\" rel=\"noopener noreferrer\">here</a>.",
+        grp_habisiniseminar_faq_a6: "The campus environment supports both academic and non-academic activities, with numerous student organizations and technology communities. To learn more about campus life and student activities, please visit the related page <a href=\"https://student-project.ifuntanhub.dev/groups/HarusSelesaiKP/index.html\" style=\"text-decoration: underline;\" target=\"_blank\" rel=\"noopener noreferrer\">here</a>.",
         grp_habisiniseminar_faq_q7: "Do Informatics UNTAN graduates have good career prospects?",
         grp_habisiniseminar_faq_a7: "Graduates have broad career opportunities across fields such as software development, data analytics, network security, and technology entrepreneurship.",
         grp_habisiniseminar_faq_q8: "Can Informatics UNTAN students participate in competitions?",
-        grp_habisiniseminar_faq_a8: "Yes. Students are actively encouraged to participate in technology competitions at local, national, and international levels. Information on competitions and student achievements is available <a href=\"https://informatika.untan.ac.id/content.html?type=people_stories\" target=\"_blank\" rel=\"noopener noreferrer\">here</a>.",
+        grp_habisiniseminar_faq_a8: "Yes. Students are actively encouraged to participate in technology competitions at local, national, and international levels. Information on competitions and student achievements is available <a href=\"https://student-project.ifuntanhub.dev/groups/ACAAB/index.html\" style=\"text-decoration: underline;\" target=\"_blank\" rel=\"noopener noreferrer\">here</a>.",
         grp_habisiniseminar_month_jan: "January",
         grp_habisiniseminar_month_feb: "February",
         grp_habisiniseminar_month_mar: "March",
@@ -1792,6 +2207,46 @@ const translations = {
         grp_limaem_cta_info2_val: "Monday - Friday, 08:00 - 17:00 WIB",
         grp_limaem_cta_info3_label: "Social Media",
         grp_limaem_cta_info3_val: "@hmif.untan, YouTube: HMIF UNTAN TV",
+
+        // --- Group C4A: Supporting Staff & SOP ---
+        grp_c4a_hero_tag: "ACADEMIC SERVICES \u2022 INFORMATICS UNTAN",
+        grp_c4a_hero_title: "Supporting Staff &amp; <br/><span class=\"highlight-orange\">Standard Operating Procedures (SOP)</span>",
+        grp_c4a_hero_desc: "This page presents information about academic service officers and administrative procedures for students of the Informatics Study Program at UNTAN.",
+        grp_c4a_stat_staf: "Active Staff",
+        grp_c4a_stat_sop: "SOP Types",
+        grp_c4a_staff_tag: "Our Team",
+        grp_c4a_staff_title: "Supporting Staff",
+        grp_c4a_staff_subtitle: "Staff ready to serve academic and laboratory operational needs at the Informatics Study Program, UNTAN.",
+        grp_c4a_sop_tag: "Official Procedures",
+        grp_c4a_sop_title: "Standard Operating Procedures (SOP)",
+        grp_c4a_sop_subtitle: "Standard Operating Procedures for various student academic administration needs. Use search or filter to find the SOP you need.",
+        grp_c4a_sop_search_placeholder: "Search SOP by title...",
+        grp_c4a_sop_chip_semua: "All",
+        grp_c4a_sop_chip_akademik: "Academic",
+        grp_c4a_sop_chip_praktikum: "Practicum",
+        grp_c4a_sop_empty_title: "No SOP found",
+        grp_c4a_sop_empty_desc: "Try another keyword or reset the search filter.",
+        grp_c4a_sop_reset_btn: "Reset Search",
+        grp_c4a_faq_tag: "Frequently Asked",
+        grp_c4a_faq_title: "Frequently Asked Questions",
+        grp_c4a_faq_subtitle: "Find quick answers to common student questions about the study program's academic services.",
+        grp_c4a_empty_staff: "Staff data is currently unavailable.",
+        grp_c4a_empty_sop: "SOP data is currently unavailable.",
+        grp_c4a_empty_faq: "FAQ data is currently unavailable.",
+        grp_c4a_label_location: "Location",
+        grp_c4a_label_service_hours: "Service Hours",
+        grp_c4a_label_wa_contact: "WhatsApp Contact",
+        grp_c4a_label_tasks: "Tasks & Responsibilities",
+        grp_c4a_label_send_wa: "Send WA Message",
+        grp_c4a_label_steps: "Steps",
+        grp_c4a_label_view_detail: "View Details",
+        grp_c4a_label_responsible_staff: "Responsible Staff (Optional)",
+        grp_c4a_label_additional_info: "Additional Information (Optional):",
+        grp_c4a_label_purpose: "Purpose",
+        grp_c4a_label_requirements: "Requirements",
+        grp_c4a_label_procedure: "Procedure Flow",
+        grp_c4a_sop_showing_all: "Showing {total} SOP",
+        grp_c4a_sop_showing_filtered: "Showing {shown} of {total} SOP",
     }
 };
 
@@ -1887,4 +2342,4 @@ document.addEventListener('DOMContentLoaded', () => {
         btn.addEventListener('click', toggleLanguage);
     });
     applyLang();
-});
+});

groups/ACAAB/index.html

@@ -1249,8 +1249,8 @@
                                         <div id="stat-total-ach"
                                             style="font-size:clamp(2rem,4.5vw,4rem);font-weight:900;color:#003150;line-height:1;font-family:'Roboto Condensed',sans-serif;">
                                             0</div>
-                                        <div style="font-size:clamp(0.5rem,1.2vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;line-height:1.3;word-break:break-word;">
-                                            Prestasi<br>Mahasiswa</div>
+                                        <div style="font-size:clamp(0.5rem,1.2vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;line-height:1.3;word-break:break-word;"
+                                            data-i18n="grp_acaab_stats_label_ach">Prestasi<br>Mahasiswa</div>
                                     </div>
                                     <!-- Internasional -->
                                     <div style="flex:1;text-align:center;padding:0 0.15rem;">
@@ -1291,8 +1291,8 @@
                                         <div id="stat-total-proj"
                                             style="font-size:clamp(2rem,4.5vw,4rem);font-weight:900;color:#003150;line-height:1;font-family:'Roboto Condensed',sans-serif;">
                                             0</div>
-                                        <div style="font-size:clamp(0.5rem,1.2vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;line-height:1.3;word-break:break-word;">
-                                            Proyek<br>Mahasiswa</div>
+                                        <div style="font-size:clamp(0.5rem,1.2vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;line-height:1.3;word-break:break-word;"
+                                            data-i18n="grp_acaab_stats_label_proj">Proyek<br>Mahasiswa</div>
                                     </div>
                                 </div>
                             </div>

groups/ACAAB/localization.js

@@ -48,6 +48,15 @@
             grp_acaab_modal_visit: "Kunjungi Proyek",
             grp_acaab_modal_read_more: "Selengkapnya",
             grp_acaab_modal_no_link: "Link tidak tersedia",
+            grp_acaab_stats_label_ach: "Prestasi Mahasiswa",
+            grp_acaab_stats_label_proj: "Proyek Mahasiswa",
+            grp_acaab_modal_year: "Tahun",
+            grp_acaab_modal_competition: "Kompetisi",
+            grp_acaab_modal_field: "Bidang",
+            grp_acaab_modal_description: "Deskripsi",
+            grp_acaab_modal_close: "Tutup",
+            grp_acaab_modal_note: "Catatan Tambahan",
+            grp_acaab_modal_batch_prefix: "Angkatan",
             grp_acaab_cta_badge: "HUBUNGI KAMI",
             grp_acaab_cta_title: "Ingin Tahu Lebih Lanjut?",
             grp_acaab_cta_desc: "Tertarik bergabung dengan Program Studi Informatika UNTAN, mendaftarkan prestasi mahasiswa, atau menjalin kerja sama? Hubungi kami sekarang.",
@@ -93,6 +102,15 @@
             grp_acaab_modal_visit: "Visit Project",
             grp_acaab_modal_read_more: "Read More",
             grp_acaab_modal_no_link: "Link not available",
+            grp_acaab_stats_label_ach: "Student Achievements",
+            grp_acaab_stats_label_proj: "Student Projects",
+            grp_acaab_modal_year: "Year",
+            grp_acaab_modal_competition: "Competition",
+            grp_acaab_modal_field: "Field",
+            grp_acaab_modal_description: "Description",
+            grp_acaab_modal_close: "Close",
+            grp_acaab_modal_note: "Additional Notes",
+            grp_acaab_modal_batch_prefix: "Batch",
             grp_acaab_cta_badge: "CONTACT US",
             grp_acaab_cta_title: "Want to Know More?",
             grp_acaab_cta_desc: "Interested in joining the Informatics Study Program at UNTAN, registering a student achievement, or establishing a partnership? Contact us now.",

groups/ACAAB/main.js

@@ -99,7 +99,7 @@ function transformAchievement(item) {
         id, title, category, competition, rank, year, level, description,
         team,
         nim:        item.nim || '',
-        generation: item.angkatan ? `Angkatan ${item.angkatan}` : 'Informatika',
+        generation: item.angkatan ? `${t('grp_acaab_modal_batch_prefix')} ${item.angkatan}` : 'Informatika',
         image:      getImageUrl(item, `prestasi-${id}`),
         avatar,
         members:    anggota.map(m => ({ nama: m.nama || '', angkatan: m.angkatan ? parseInt(m.angkatan) : undefined })),
@@ -489,9 +489,9 @@ function memberItem(nama, sub) {
 function openAchModal(a) {
     const membersHtml = a.members && a.members.length > 0 ? `
         <div style="border-top:1px solid #f1f5f9;padding-top:1rem;margin-bottom:1rem;">
-            <p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin:0 0 0.5rem;">Anggota Tim</p>
+            <p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin:0 0 0.5rem;">${t('grp_acaab_modal_members')}</p>
             <ul style="list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;">
-                ${a.members.map(m => memberItem(m.nama, m.angkatan ? `Angkatan ${m.angkatan}` : '')).join('')}
+                ${a.members.map(m => memberItem(m.nama, m.angkatan ? `${t('grp_acaab_modal_batch_prefix')} ${m.angkatan}` : '')).join('')}
             </ul>
         </div>` : '';
 
@@ -525,19 +525,19 @@ function openAchModal(a) {
                 ${infoRow('users', t('grp_acaab_modal_team'), a.team)}
                 ${a.nim ? infoRow('id-card', 'NIM', a.nim) : ''}
                 ${infoRow('user-graduate', t('grp_acaab_modal_generation'), a.generation)}
-                ${infoRow('calendar-alt', 'Tahun', String(a.year))}
-                ${infoRow('award', 'Kompetisi', a.competition)}
-                ${infoRow('tag', 'Bidang', a.category)}
+                ${infoRow('calendar-alt', t('grp_acaab_modal_year'), String(a.year))}
+                ${infoRow('award', t('grp_acaab_modal_competition'), a.competition)}
+                ${infoRow('tag', t('grp_acaab_modal_field'), a.category)}
             </div>
             ${membersHtml}
             <!-- Description -->
             <div style="border-top:1px solid #f1f5f9;padding-top:1rem;">
-                <p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin:0 0 0.5rem;">Deskripsi</p>
+                <p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin:0 0 0.5rem;">${t('grp_acaab_modal_description')}</p>
                 <p style="color:#475569;font-size:0.875rem;line-height:1.65;margin:0;">${escHtml(a.description)}</p>
             </div>
             <!-- Close button full-width -->
             <button id="acaab-modal-close-btn" style="margin-top:1.5rem;width:100%;padding:0.75rem;background:#003150;color:white;font-weight:700;border:none;border-radius:0.5rem;cursor:pointer;font-size:0.875rem;">
-                Tutup
+                ${t('grp_acaab_modal_close')}
             </button>
         </div>
     `, true);
@@ -714,7 +714,7 @@ function bindProjEvents() {
 function openProjModal(p) {
     const membersHtml = p.members && p.members.length > 0 ? `
         <div style="border-top:1px solid #f1f5f9;padding-top:1rem;margin-bottom:1rem;">
-            <p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin:0 0 0.5rem;">Anggota Tim</p>
+            <p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin:0 0 0.5rem;">${t('grp_acaab_modal_members')}</p>
             <ul style="list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;">
                 ${p.members.map(m => memberItem(m.nama, m.nim || '')).join('')}
             </ul>
@@ -755,24 +755,24 @@ function openProjModal(p) {
             <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1rem;background:#f8fafc;border-radius:0.5rem;margin-bottom:1.25rem;">
                 ${p.studentName ? infoRow('users', t('grp_acaab_modal_team'), p.studentName) : ''}
                 ${p.nim ? infoRow('id-card', 'NIM', p.nim) : ''}
-                ${infoRow('calendar-alt', 'Tahun', String(p.year))}
-                ${infoRow('tag', 'Bidang', p.categories.join(', '))}
+                ${infoRow('calendar-alt', t('grp_acaab_modal_year'), String(p.year))}
+                ${infoRow('tag', t('grp_acaab_modal_field'), p.categories.join(', '))}
             </div>
             ${membersHtml}
             <!-- Description -->
             <div style="border-top:1px solid #f1f5f9;padding-top:1rem;margin-bottom:1.25rem;">
-                <p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin:0 0 0.5rem;">Deskripsi</p>
+                <p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin:0 0 0.5rem;">${t('grp_acaab_modal_description')}</p>
                 <p style="color:#475569;font-size:0.875rem;line-height:1.65;margin:0;">${escHtml(p.description)}</p>
                 ${p.catatan ? `
                 <div style="margin-top:1rem;padding:0.75rem;background:rgba(239,246,255,0.5);border:1px solid #bfdbfe;border-radius:0.5rem;">
-                    <p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;color:#93c5fd;margin:0 0 0.25rem;">Catatan Tambahan</p>
+                    <p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;color:#93c5fd;margin:0 0 0.25rem;">${t('grp_acaab_modal_note')}</p>
                     <p style="font-size:0.875rem;color:#475569;font-style:italic;margin:0;">${escHtml(p.catatan)}</p>
                 </div>` : ''}
             </div>
             <!-- Link + close buttons -->
             ${linkSection}
             <button id="acaab-modal-close-btn" style="width:100%;padding:0.625rem;border:2px solid #e2e8f0;color:#475569;font-weight:700;background:white;border-radius:0.5rem;cursor:pointer;font-size:0.875rem;transition:border-color 0.2s,background 0.2s;">
-                Tutup
+                ${t('grp_acaab_modal_close')}
             </button>
         </div>
     `, true);

groups/C4A/README.md

@@ -0,0 +1,86 @@
+# Panduan Pengelolaan Data Kelompok C4A
+
+Dokumentasi ini dibuat untuk memudahkan pengembang atau pengguna berikutnya dalam mengelola data Staf Pendukung, SOP, dan FAQ pada halaman C4A.
+
+---
+
+## 📋 Aturan Umum Pengelolaan Data
+
+1. **Lokasi Berkas Data**:
+   Seluruh data disimpan dalam format JSON di direktori `groups/C4A/data/`:
+   - Data Staf: `groups/C4A/data/data-staff.json`
+   - Data SOP: `groups/C4A/data/data-sop.json`
+   - Data FAQ: `groups/C4A/data/data-faq.json`
+
+2. **Ikon FontAwesome (v4)**:
+   Jika ingin mengubah atau menambahkan logo/ikon pada data SOP, harap gunakan daftar ikon dari **FontAwesome v4** melalui tautan berikut:
+   👉 **[FontAwesome v4 Icons](https://fontawesome.com/v4/icons/)** (Contoh penggunaan: `fa-dot-circle-o`, `fa-graduation-cap`, `fa-flask`).
+
+3. **Field Opsional**:
+   Pada data SOP, properti **`staff_responsible`** (Staf Bertanggung Jawab) dan **`additional_info`** (Informasi Tambahan) bersifat **opsional**. Jika informasi tersebut tidak tersedia, kosongkan nilainya atau hapus propertinya dari JSON agar UI secara otomatis menyembunyikan bloknya.
+
+---
+
+## 🛠️ Template Penambahan Data
+
+Silakan salin-tempel (copy-paste) format di bawah ini ke dalam array JSON yang sesuai di folder `data/` untuk menambahkan data baru.
+
+### 1. Template Data Staf (`data-staff.json`)
+```json
+{
+    "id": 3,
+    "name": "Nama Staf Beserta Gelar",
+    "role": "Peran / Jabatan Staf",
+    "image": "assets/images/nama-file-foto.png",
+    "location": "Lokasi Ruang Kerja / Kantor Staf",
+    "contact_consent": true,
+    "phone": "628xxxxxxxxxx",
+    "schedule": [
+        {
+            "day": "Hari Kerja (contoh: Senin – Jumat)",
+            "time": "Jam Kerja (contoh: 07.30–16.00 WIB)",
+            "break": "Jam Istirahat (contoh: istirahat 12.00–13.00 WIB)"
+        }
+    ],
+    "tasks": [
+        "Tugas dan tanggung jawab utama 1",
+        "Tugas dan tanggung jawab utama 2"
+    ]
+}
+```
+*Catatan: Letakkan file gambar/foto staf ke dalam direktori `groups/C4A/assets/images/` dan masukkan nama berkas fotonya pada properti `image` di atas. Untuk nomor telepon (`phone`), Anda dapat menggunakan format `08xxxxxxxxxx` atau `628xxxxxxxxxx` karena skrip JavaScript akan melakukan normalisasi secara otomatis.*
+
+### 2. Template Data SOP (`data-sop.json`)
+```json
+{
+    "tab_id": "id-unik-sop-tanpa-spasi",
+    "tab_number": 9,
+    "category": "akademik", 
+    "icon": "fa-file-text",
+    "title": "Judul Lengkap SOP",
+    "description": "Deskripsi singkat mengenai SOP ini.",
+    "purpose": "Tujuan dibuatnya standar operasional prosedur ini.",
+    "requirements": [
+        "Persyaratan administratif/akademik 1",
+        "Persyaratan administratif/akademik 2"
+    ],
+    "procedures": [
+        "Langkah alur prosedur ke-1",
+        "Langkah alur prosedur ke-2"
+    ],
+    "staff_responsible": [
+        "👤 Staf Administrasi Informatika"
+    ],
+    "additional_info": "Informasi tambahan penting."
+}
+```
+*Catatan: Properti `category` bernilai antara `"akademik"` atau `"praktikum"`. Properti `staff_responsible` dan `additional_info` bersifat opsional.*
+
+### 3. Template Data FAQ (`data-faq.json`)
+```json
+{
+    "id": 11,
+    "question": "Pertanyaan yang sering diajukan?",
+    "answer": "Jawaban dari pertanyaan tersebut. Boleh menggunakan tag HTML seperti <strong>tebal</strong>."
+}
+```

groups/C4A/data/data-faq.json

@@ -0,0 +1,112 @@
+[
+    {
+        "id": 1,
+        "question": {
+            "id": "Apa saja syarat administratif agar saya bisa mengikuti perkuliahan?",
+            "en": "What are the administrative requirements for me to attend lectures?"
+        },
+        "answer": {
+            "id": "Syarat untuk mengikuti perkuliahan adalah mahasiswa telah melakukan <strong>pembayaran UKT</strong>, mengisi <strong>KRS</strong>, dan terdaftar di <strong>kelas Edlink</strong>.",
+            "en": "The requirements to attend lectures are that the student has completed <strong>UKT payment</strong>, filled out the <strong>KRS</strong>, and is registered in <strong>Edlink classes</strong>."
+        }
+    },
+    {
+        "id": 2,
+        "question": {
+            "id": "Berapa persentase kehadiran minimal agar bisa mengikuti Ujian Akhir Semester (UAS)?",
+            "en": "What is the minimum attendance percentage required to take the Final Semester Exam (UAS)?"
+        },
+        "answer": {
+            "id": "Mahasiswa wajib memenuhi minimal <strong>75% kehadiran</strong> dari total pertemuan perkuliahan. Mahasiswa yang tidak memenuhi syarat kehadiran ini tidak diperkenankan mengikuti UAS.",
+            "en": "Students must meet a minimum of <strong>75% attendance</strong> out of the total lecture sessions. Students who do not meet this attendance requirement are not permitted to take the UAS."
+        }
+    },
+    {
+        "id": 3,
+        "question": {
+            "id": "Apakah pengisian evaluasi perkuliahan itu wajib?",
+            "en": "Is filling out the lecture evaluation mandatory?"
+        },
+        "answer": {
+            "id": "Ya, karena pengisian evaluasi perkuliahan dapat menjadi salah satu syarat untuk <strong>mengakses hasil studi</strong> sesuai dengan kebijakan yang berlaku. Hasil ini sangat penting untuk perbaikan dan pengembangan kualitas pembelajaran prodi ke depannya.",
+            "en": "Yes, because completing the lecture evaluation may be one of the requirements to <strong>access study results</strong> in accordance with applicable policies. This is very important for improving and developing the quality of the study program's learning in the future."
+        }
+    },
+    {
+        "id": 4,
+        "question": {
+            "id": "Berapa minimal SKS dan IPK untuk bisa mendaftar Kerja Praktik (KP)?",
+            "en": "What is the minimum number of credits (SKS) and GPA required to register for an Internship (KP)?"
+        },
+        "answer": {
+            "id": "Untuk mendaftar KP, mahasiswa harus sudah lulus minimal <strong>100 SKS</strong> dan memiliki Indeks Prestasi Kumulatif (IPK) <strong>≥ 2,00</strong>.",
+            "en": "To register for KP, students must have passed at least <strong>100 credits (SKS)</strong> and have a Cumulative Grade Point Average (GPA) of <strong>≥ 2.00</strong>."
+        }
+    },
+    {
+        "id": 5,
+        "question": {
+            "id": "Apakah ada syarat kelulusan mata kuliah tertentu sebelum saya bisa mengajukan Kerja Praktik (KP)?",
+            "en": "Are there specific course completion requirements before I can apply for an Internship (KP)?"
+        },
+        "answer": {
+            "id": "Ya, selain memenuhi syarat minimal SKS dan IPK, mahasiswa juga diwajibkan telah lulus mata kuliah <strong>Penulisan Proposal Tugas Akhir dengan nilai minimal C</strong>. Selain itu, mahasiswa juga harus menyerahkan berkas pendukung pengajuan KP seperti KTM, riwayat studi, transkrip nilai, dan surat permohonan.",
+            "en": "Yes, in addition to meeting the minimum SKS and GPA requirements, students are also required to have passed the <strong>Final Project Proposal Writing course with a minimum grade of C</strong>. Furthermore, students must also submit supporting documents for the KP application, such as student ID card, academic record, transcript, and application letter."
+        }
+    },
+    {
+        "id": 6,
+        "question": {
+            "id": "Apa kualifikasi yang dibutuhkan untuk Pembimbing Lapangan di instansi tempat KP?",
+            "en": "What qualifications are required for a Field Supervisor at the KP institution?"
+        },
+        "answer": {
+            "id": "Pembimbing Lapangan dari tempat pelaksanaan KP diwajibkan memiliki kualifikasi pendidikan minimal <strong>S1 atau D4</strong>.",
+            "en": "The Field Supervisor from the KP institution is required to have a minimum educational qualification of <strong>Bachelor's (S1) or Applied Bachelor's (D4)</strong>."
+        }
+    },
+    {
+        "id": 7,
+        "question": {
+            "id": "Bolehkah saya mengambil mata kuliah Kerja Praktik (KP) bersamaan dengan Tugas Akhir?",
+            "en": "Can I take the Internship (KP) course concurrently with my Final Project (Tugas Akhir)?"
+        },
+        "answer": {
+            "id": "Boleh. Mata Kuliah Kerja Praktik (KP) dapat diambil secara bersamaan dengan <strong>Tugas Akhir 1 (TA1)</strong> dan <strong>Tugas Akhir 2 (TA2)</strong> dalam satu semester yang sama.",
+            "en": "Yes. The Internship (KP) course can be taken concurrently with <strong>Final Project 1 (TA1)</strong> and <strong>Final Project 2 (TA2)</strong> within the same semester."
+        }
+    },
+    {
+        "id": 8,
+        "question": {
+            "id": "Apa saja syarat akademik utama sebelum mengajukan judul Tugas Akhir (Skripsi)?",
+            "en": "What are the main academic requirements before submitting a Final Project (Thesis) title?"
+        },
+        "answer": {
+            "id": "Syarat utamanya adalah mahasiswa harus telah lulus minimal <strong>120 SKS</strong>, memiliki <strong>IPK minimal 2,00</strong>, telah lulus mata kuliah <strong>Penulisan Proposal Tugas Akhir dengan nilai minimal C</strong>, serta telah mendaftarkan mata kuliah skripsi pada KRS.",
+            "en": "The main requirements are that the student must have passed at least <strong>120 credits (SKS)</strong>, have a <strong>minimum GPA of 2.00</strong>, have passed the <strong>Final Project Proposal Writing course with a minimum grade of C</strong>, and have registered the thesis course in the KRS."
+        }
+    },
+    {
+        "id": 9,
+        "question": {
+            "id": "Siapa yang berhak mendaftar menjadi Asisten Praktikum (Aslab)?",
+            "en": "Who is eligible to register as a Practicum Assistant (Aslab)?"
+        },
+        "answer": {
+            "id": "Rekrutmen terbuka bagi <strong>mahasiswa aktif Program Studi Informatika UNTAN</strong> yang telah lulus mata kuliah terkait (dengan nilai minimal sesuai ketentuan Dosen Pengampu) dan berkomitmen mengikuti seluruh jadwal praktikum selama semester berjalan.",
+            "en": "Recruitment is open to <strong>active students of the Informatics Study Program at UNTAN</strong> who have passed the relevant courses (with a minimum grade as per the Lecturer's requirements) and are committed to attending all practicum schedules throughout the semester."
+        }
+    },
+    {
+        "id": 10,
+        "question": {
+            "id": "Bagaimana prosedur meminjam Laboratorium Komputer untuk keperluan kegiatan kampus?",
+            "en": "What is the procedure for borrowing the Computer Laboratory for campus activities?"
+        },
+        "answer": {
+            "id": "Peminjam (dosen atau mahasiswa) harus mengajukan <strong>surat permohonan peminjaman</strong> kepada staf laboratorium pengelola dan menyampaikan jadwal penggunaannya. Penggunaan lab juga harus didampingi oleh <strong>dosen atau asisten praktikum</strong> yang bertanggung jawab.",
+            "en": "The borrower (lecturer or student) must submit a <strong>borrowing request letter</strong> to the laboratory management staff and provide the usage schedule. Lab usage must also be supervised by a <strong>responsible lecturer or practicum assistant</strong>."
+        }
+    }
+]

groups/C4A/data/data-sop.json

@@ -0,0 +1,293 @@
+[
+    {
+        "tab_id": "kuliah",
+        "tab_number": 1,
+        "category": "akademik",
+        "icon": "fa-chalkboard-teacher",
+        "title": {
+            "id": "SOP Pelaksanaan Kuliah",
+            "en": "Lecture Procedure SOP"
+        },
+        "description": {
+            "id": "Mengatur tata cara dan tahapan pelaksanaan perkuliahan mulai dari persiapan hingga evaluasi pembelajaran.",
+            "en": "Regulates the procedures and stages of lecture implementation from preparation to learning evaluation."
+        },
+        "purpose": {
+            "id": "SOP ini bertujuan untuk menjelaskan tata cara pelaksanaan perkuliahan bagi mahasiswa Program Studi Informatika Universitas Tanjungpura.",
+            "en": "This SOP aims to explain the procedures for conducting lectures for students of the Informatics Study Program at Tanjungpura University."
+        },
+        "requirements": [
+            { "id": "Mahasiswa telah melakukan pembayaran UKT", "en": "Student has completed UKT payment" },
+            { "id": "Mahasiswa telah mengisi KRS", "en": "Student has filled out the KRS" },
+            { "id": "Mahasiswa terdaftar di kelas Edlink", "en": "Student is registered in Edlink classes" },
+            { "id": "Mahasiswa wajib mengikuti perkuliahan dan menyelesaikan tugas tepat waktu", "en": "Students must attend lectures and complete assignments on time" },
+            { "id": "Mahasiswa wajib mengisi daftar hadir dan memberikan alasan resmi jika tidak hadir", "en": "Students must fill in the attendance list and provide an official reason if absent" },
+            { "id": "Mahasiswa memenuhi minimal 70% kehadiran untuk mengikuti UAS", "en": "Students must meet a minimum of 70% attendance to take the UAS" }
+        ],
+        "procedures": [
+            { "id": "Dosen memasuki ruang perkuliahan sesuai jadwal yang telah ditetapkan", "en": "The lecturer enters the lecture room according to the set schedule" },
+            { "id": "Dosen mengabsensi mahasiswa dengan mencantumkan keterangan hadir, izin, atau tidak hadir", "en": "The lecturer takes attendance, noting present, excused, or absent" },
+            { "id": "Pada pertemuan pertama, dosen membuat kontrak perkuliahan secara tertulis bersama mahasiswa", "en": "At the first meeting, the lecturer creates a written lecture contract with students" },
+            { "id": "Dosen menjelaskan materi perkuliahan sesuai RPS yang telah diserahkan ke program studi", "en": "The lecturer explains the course material according to the RPS submitted to the study program" },
+            { "id": "Mahasiswa mendiskusikan, mencatat, dan mengkritisi materi perkuliahan", "en": "Students discuss, take notes, and critically engage with the lecture material" },
+            { "id": "Dosen menyimpulkan materi perkuliahan dan memberikan penugasan", "en": "The lecturer summarizes the lecture material and gives assignments" }
+        ],
+        "additional_info": {
+            "id": "Mahasiswa yang tidak memenuhi persyaratan kehadiran minimal tidak diperkenankan mengikuti Ujian Akhir Semester (UAS) sesuai ketentuan akademik yang berlaku.",
+            "en": "Students who do not meet the minimum attendance requirements are not permitted to take the Final Semester Exam (UAS) in accordance with applicable academic regulations."
+        }
+    },
+    {
+        "tab_id": "ujian",
+        "tab_number": 2,
+        "category": "akademik",
+        "icon": "fa-file-signature",
+        "title": {
+            "id": "SOP Pelaksanaan Ujian (UTS & UAS)",
+            "en": "Exam Procedure SOP (Mid-Term & Final Exams)"
+        },
+        "description": {
+            "id": "Mengatur pedoman pelaksanaan Ujian Tengah Semester (UTS) dan Ujian Akhir Semester (UAS) mulai dari penentuan kriteria evaluasi, pelaksanaan, hingga perekapan nilai.",
+            "en": "Regulates the guidelines for conducting Mid-Term Exams (UTS) and Final Semester Exams (UAS), from determining evaluation criteria and implementation to grade recording."
+        },
+        "purpose": {
+            "id": "SOP ini bertujuan untuk memastikan kelancaran proses evaluasi pembelajaran mahasiswa melalui UTS dan UAS agar berjalan tertib, terukur, dan sesuai dengan instruksi dosen pengampu mata kuliah.",
+            "en": "This SOP aims to ensure the smooth process of student learning evaluation through UTS and UAS so that it runs orderly, measurably, and in accordance with the course lecturer's instructions."
+        },
+        "requirements": [
+            { "id": "Mahasiswa terdaftar aktif pada mata kuliah yang sedang berjalan pada semester tersebut", "en": "Students are actively registered in the courses running in that semester" },
+            { "id": "Persentase kehadiran perkuliahan mahasiswa tidak kurang dari 75%", "en": "Student lecture attendance percentage is not less than 75%" }
+        ],
+        "procedures": [
+            { "id": "Dosen pengampu menentukan kriteria UTS dan UAS", "en": "The course lecturer determines the UTS and UAS criteria" },
+            { "id": "Mahasiswa mengikuti UTS atau UAS sesuai instruksi dosen pengampu, dan wajib melakukan presensi", "en": "Students take UTS or UAS according to the lecturer's instructions and must complete attendance" },
+            { "id": "Mahasiswa mengumpulkan hasil UTS atau UAS sesuai rentang waktu yang diberikan", "en": "Students submit UTS or UAS results within the given timeframe" },
+            { "id": "Dosen menilai dan merekap pengerjaan UTS atau UAS mahasiswa", "en": "The lecturer grades and records the students' UTS or UAS work" }
+        ],
+        "additional_info": {
+            "id": "Segala bentuk kecurangan saat ujian, maupun tindakan plagiarisme dalam pengerjaan UTS/UAS, dapat mengakibatkan pembatalan nilai atau pemberian sanksi.",
+            "en": "Any form of cheating during exams, as well as plagiarism in completing the UTS/UAS, may result in grade cancellation or sanctions."
+        }
+    },
+    {
+        "tab_id": "evaluasi",
+        "tab_number": 3,
+        "category": "akademik",
+        "icon": "fa-chart-line",
+        "title": {
+            "id": "SOP Pelaksanaan Evaluasi Pengembangan Perkuliahan",
+            "en": "Lecture Development Evaluation SOP"
+        },
+        "description": {
+            "id": "Mengatur tata cara pelaksanaan evaluasi perkuliahan oleh mahasiswa sebagai sarana umpan balik untuk meningkatkan kualitas proses belajar mengajar.",
+            "en": "Regulates the procedures for conducting lecture evaluations by students as a feedback mechanism to improve the quality of the teaching and learning process."
+        },
+        "purpose": {
+            "id": "SOP ini bertujuan memberikan pedoman pelaksanaan evaluasi perkuliahan guna mendukung peningkatan mutu pembelajaran di Program Studi Informatika Universitas Tanjungpura.",
+            "en": "This SOP aims to provide guidelines for conducting lecture evaluations to support the improvement of learning quality in the Informatics Study Program at Tanjungpura University."
+        },
+        "requirements": [
+            { "id": "Mahasiswa terdaftar aktif pada semester berjalan", "en": "Students are actively registered for the current semester" },
+            { "id": "Telah mengikuti kegiatan perkuliahan pada mata kuliah yang dievaluasi", "en": "Has attended lecture activities for the course being evaluated" },
+            { "id": "Tersedia akses ke sistem evaluasi perkuliahan", "en": "Access to the lecture evaluation system is available" }
+        ],
+        "procedures": [
+            { "id": "Program Studi membuka periode evaluasi perkuliahan", "en": "The Study Program opens the lecture evaluation period" },
+            { "id": "Mahasiswa mengakses satu untan dan mengisi kuesioner evaluasi perkuliahan", "en": "Students access the Satu Untan portal and fill out the lecture evaluation questionnaire" },
+            { "id": "Sistem merekap hasil evaluasi yang telah diisi mahasiswa", "en": "The system records the evaluation results filled in by students" },
+            { "id": "Program Studi meninjau hasil evaluasi sebagai bahan pengembangan perkuliahan", "en": "The Study Program reviews the evaluation results as material for lecture development" }
+        ],
+        "additional_info": {
+            "id": "Hasil evaluasi digunakan sebagai dasar perbaikan dan pengembangan kualitas pembelajaran pada semester berikutnya. Pengisian evaluasi perkuliahan dapat menjadi salah satu syarat untuk mengakses hasil studi sesuai kebijakan yang berlaku.",
+            "en": "Evaluation results are used as a basis for improving and developing the quality of learning in the following semester. Completing the lecture evaluation may be one of the requirements for accessing study results in accordance with applicable policies."
+        }
+    },
+    {
+        "tab_id": "kp",
+        "tab_number": 4,
+        "category": "akademik",
+        "icon": "fa-briefcase",
+        "title": {
+            "id": "SOP Kerja Praktik",
+            "en": "Internship (KP) SOP"
+        },
+        "description": {
+            "id": "Panduan resmi pelaksanaan Kerja Praktek (KP) mulai dari tata cara pendaftaran, pelaksanaan, hingga seminar Kerja Praktek (KP).",
+            "en": "The official guide for conducting the Internship (KP), from registration procedures and implementation to the KP seminar."
+        },
+        "purpose": {
+            "id": "SOP ini bertujuan memberikan pedoman kepada seluruh pihak terkait dalam pelaksanaan Kerja Praktek serta meningkatkan efisiensi dan efektivitas pelaksanaannya di Program Studi Informatika Fakultas Teknik Universitas Tanjungpura.",
+            "en": "This SOP aims to provide guidelines to all relevant parties in the implementation of the Internship and to improve the efficiency and effectiveness of its execution in the Informatics Study Program, Faculty of Engineering, Tanjungpura University."
+        },
+        "requirements": [
+            { "id": "Telah lulus minimal 100 SKS", "en": "Has passed a minimum of 100 credits (SKS)" },
+            { "id": "Memiliki IPK minimal 2,00", "en": "Has a minimum GPA of 2.00" },
+            { "id": "Telah lulus mata kuliah Penulisan Proposal Tugas Akhir dengan nilai minimal C", "en": "Has passed the Final Project Proposal Writing course with a minimum grade of C" },
+            { "id": "Menyerahkan berkas pendukung pengajuan KP (KTM, riwayat studi, transkrip, dan surat permohonan)", "en": "Submits supporting documents for the KP application (student ID, academic record, transcript, and application letter)" },
+            { "id": "Pembimbing Lapangan dari tempat KP memiliki kualifikasi pendidikan minimal S1/D4", "en": "The Field Supervisor at the KP institution holds a minimum educational qualification of Bachelor's (S1) or Applied Bachelor's (D4)" }
+        ],
+        "procedures": [
+            { "id": "Mahasiswa mengusulkan topik, draf proposal, dan menyerahkan berkas KP", "en": "Students propose a topic, submit a draft proposal, and submit KP documents" },
+            { "id": "Staf Administrasi memverifikasi kelengkapan berkas", "en": "Administrative Staff verifies the completeness of documents" },
+            { "id": "Ketua Prodi menerbitkan surat pengantar KP", "en": "The Head of the Study Program issues the KP introductory letter" },
+            { "id": "Mahasiswa melaksanakan KP dan mengikuti bimbingan", "en": "Students carry out the KP and attend supervision sessions" },
+            { "id": "Pembimbing Lapangan memberikan penilaian KP", "en": "The Field Supervisor provides a KP assessment" },
+            { "id": "Mahasiswa mengajukan seminar dan Prodi menerbitkan undangan", "en": "Students apply for the seminar and the Study Program issues an invitation" },
+            { "id": "Mahasiswa melaksanakan seminar KP", "en": "Students conduct the KP seminar" },
+            { "id": "Mahasiswa melakukan revisi laporan akhir KP", "en": "Students revise the final KP report" }
+        ],
+        "staff_responsible": [
+            "👤 Staf Administrasi Informatika / Informatics Administrative Staff"
+        ],
+        "additional_info": {
+            "id": "Mata Kuliah Kerja Praktik (KP) dapat diambil bersamaan dengan Tugas Akhir 1 (TA1) dan Tugas Akhir 2 (TA2) dalam semester yang sama.",
+            "en": "The Internship (KP) course can be taken concurrently with Final Project 1 (TA1) and Final Project 2 (TA2) in the same semester."
+        }
+    },
+    {
+        "tab_id": "ta",
+        "tab_number": 5,
+        "category": "akademik",
+        "icon": "fa-graduation-cap",
+        "title": {
+            "id": "SOP Tugas Akhir/Skripsi",
+            "en": "Final Project / Thesis SOP"
+        },
+        "description": {
+            "id": "Mengatur tata cara pelaksanaan skripsi mulai dari pengajuan judul hingga ujian dan penyelesaian skripsi mahasiswa.",
+            "en": "Regulates the procedures for thesis implementation, from title submission to examination and completion of the student's thesis."
+        },
+        "purpose": {
+            "id": "SOP ini bertujuan untuk memberikan pedoman kepada mahasiswa dan dosen dalam pelaksanaan skripsi agar proses penyusunan skripsi berjalan tertib, terarah, dan sesuai ketentuan akademik.",
+            "en": "This SOP aims to provide guidance to students and lecturers in the implementation of the thesis so that the thesis writing process runs in an orderly, directed, and academically compliant manner."
+        },
+        "requirements": [
+            { "id": "Telah lulus minimal 120 SKS", "en": "Has passed a minimum of 120 credits (SKS)" },
+            { "id": "Memiliki IPK minimal 2,00", "en": "Has a minimum GPA of 2.00" },
+            { "id": "Telah lulus mata kuliah Penulisan Proposal Tugas Akhir dengan nilai minimal C", "en": "Has passed the Final Project Proposal Writing course with a minimum grade of C" },
+            { "id": "Telah mendaftarkan mata kuliah skripsi pada KRS", "en": "Has registered the thesis course in the KRS" },
+            { "id": "Telah menyiapkan judul dan proposal skripsi", "en": "Has prepared a thesis title and proposal" },
+            { "id": "Memiliki dosen pembimbing skripsi", "en": "Has a thesis supervisor" },
+            { "id": "Melengkapi berkas persyaratan", "en": "Completes the required documents" }
+        ],
+        "procedures": [
+            { "id": "Mahasiswa mengajukan judul dan proposal skripsi", "en": "Students submit the thesis title and proposal" },
+            { "id": "Program studi menetapkan dosen pembimbing skripsi", "en": "The study program assigns a thesis supervisor" },
+            { "id": "Mahasiswa melakukan bimbingan dan penyusunan skripsi", "en": "Students conduct supervision sessions and write the thesis" },
+            { "id": "Mahasiswa mengajukan seminar atau sidang skripsi", "en": "Students apply for the thesis seminar or defense" },
+            { "id": "Tim penguji dan pembimbing melaksanakan seminar skripsi", "en": "The examination committee and supervisor conduct the thesis seminar" },
+            { "id": "Mahasiswa melakukan revisi skripsi", "en": "Students revise the thesis" },
+            { "id": "Mahasiswa menyerahkan skripsi final", "en": "Students submit the final thesis" }
+        ],
+        "staff_responsible": [
+            "👤 Staf Administrasi Informatika / Informatics Administrative Staff"
+        ],
+        "additional_info": {
+            "id": "Mahasiswa diberi waktu maksimal 2 semester untuk menyelesaikan Tugas Akhir. Perpanjangan dapat dilakukan dengan persetujuan tertulis dari Kaprodi dan Pembimbing.",
+            "en": "Students are given a maximum of 2 semesters to complete the Final Project. Extensions can be made with written approval from the Head of Study Program and the Supervisor."
+        }
+    },
+    {
+        "tab_id": "praktikum",
+        "tab_number": 6,
+        "category": "praktikum",
+        "icon": "fa-flask",
+        "title": {
+            "id": "SOP Praktikum Mata Kuliah",
+            "en": "Course Practicum SOP"
+        },
+        "description": {
+            "id": "Mengatur tata cara pelaksanaan praktikum mata kuliah agar kegiatan praktikum berjalan tertib, aman, dan sesuai ketentuan pembelajaran.",
+            "en": "Regulates the procedures for conducting course practicums so that practicum activities run in an orderly, safe, and learning-compliant manner."
+        },
+        "purpose": {
+            "id": "SOP ini bertujuan untuk menjelaskan tata cara pelaksanaan perkuliahan yang memiliki komponen praktikum pada semester berjalan.",
+            "en": "This SOP aims to explain the procedures for conducting courses that have a practicum component in the current semester."
+        },
+        "requirements": [
+            { "id": "Terdaftar sebagai peserta mata kuliah yang memiliki komponen praktikum pada semester berjalan", "en": "Registered as a participant in courses with a practicum component in the current semester" },
+            { "id": "Mahasiswa membawa perlengkapan praktikum yang diperlukan", "en": "Students bring the required practicum equipment" }
+        ],
+        "procedures": [
+            { "id": "Dosen mata kuliah menuntaskan pembahasan materi yang menjadi dasar praktikum", "en": "The course lecturer completes the discussion of material that forms the basis of the practicum" },
+            { "id": "Mahasiswa mengisi daftar hadir dan menerima penjelasan prosedur praktikum", "en": "Students fill in the attendance list and receive an explanation of the practicum procedures" },
+            { "id": "Mahasiswa melaksanakan praktikum sesuai modul di bawah pengawasan dosen atau asisten praktikum", "en": "Students carry out the practicum according to the module under the supervision of the lecturer or practicum assistant" },
+            { "id": "Mahasiswa menyusun dan mengumpulkan laporan praktikum sesuai tenggat waktu", "en": "Students compile and submit the practicum report by the deadline" },
+            { "id": "Dosen atau asisten melakukan penilaian laporan dan hasil praktikum sebagai komponen nilai akhir", "en": "The lecturer or assistant grades the practicum report and results as a component of the final grade" }
+        ],
+        "additional_info": {
+            "id": "Mahasiswa wajib mengikuti seluruh ketentuan praktikum dan menjaga ketertiban serta keamanan selama kegiatan praktikum berlangsung.",
+            "en": "Students must comply with all practicum regulations and maintain order and safety throughout the practicum activities."
+        }
+    },
+    {
+        "tab_id": "rekrut_asprak",
+        "tab_number": 7,
+        "category": "praktikum",
+        "icon": "fa-user-plus",
+        "title": {
+            "id": "SOP Perekrutan Asisten Praktikum",
+            "en": "Practicum Assistant Recruitment SOP"
+        },
+        "description": {
+            "id": "Prosedur perekrutan Asisten Praktikum (Aslab) mulai dari pendataan kebutuhan mata kuliah, proses seleksi, hingga pengumuman kelulusan.",
+            "en": "The procedure for recruiting Practicum Assistants (Aslab), from identifying course needs and the selection process to announcing results."
+        },
+        "purpose": {
+            "id": "SOP ini bertujuan sebagai panduan baku untuk menyelenggarakan rekrutmen Asisten Praktikum secara transparan, guna menyaring mahasiswa Informatika UNTAN yang kompeten dan berkomitmen sesuai kualifikasi mata kuliah.",
+            "en": "This SOP aims to serve as a standard guide for conducting transparent Practicum Assistant recruitment, in order to select competent and committed Informatics UNTAN students according to course qualifications."
+        },
+        "requirements": [
+            { "id": "Mahasiswa aktif Program Studi Informatika UNTAN", "en": "Active student of the Informatics Study Program at UNTAN" },
+            { "id": "Lulus mata kuliah terkait dengan nilai minimal ketentuan Dosen Pengampu", "en": "Passed the relevant course with a minimum grade as per the Lecturer's requirements" },
+            { "id": "Berkomitmen mengikuti seluruh jadwal dan kontrak praktikum selama semester berjalan", "en": "Committed to following all practicum schedules and contracts throughout the current semester" }
+        ],
+        "procedures": [
+            { "id": "Dosen mendata kebutuhan kuota dan kualifikasi Asisten Praktikum", "en": "The lecturer records the quota needs and qualifications for Practicum Assistants" },
+            { "id": "Dosen mengumumkan pembukaan rekrutmen asisten praktikum", "en": "The lecturer announces the opening of Practicum Assistant recruitment" },
+            { "id": "Mahasiswa mendaftarkan diri sesuai persyaratan yang diberikan", "en": "Students register according to the given requirements" },
+            { "id": "Dosen melakukan seleksi wawancara kepada calon asisten praktikum", "en": "The lecturer conducts interview selection for practicum assistant candidates" },
+            { "id": "Dosen mengumumkan calon yang diterima berdasarkan hasil seleksi", "en": "The lecturer announces the accepted candidates based on the selection results" }
+        ],
+        "additional_info": {
+            "id": "Keputusan hasil seleksi bersifat final dan ditetapkan oleh dosen pengampu mata kuliah. Asisten Praktikum yang terpilih wajib mematuhi seluruh ketentuan yang berlaku selama menjalankan tugas sebagai Asisten Praktikum.",
+            "en": "The selection results are final and determined by the course lecturer. Selected Practicum Assistants must comply with all applicable regulations while performing their duties as Practicum Assistants."
+        }
+    },
+    {
+        "tab_id": "labkom",
+        "tab_number": 8,
+        "category": "praktikum",
+        "icon": "fa-desktop",
+        "title": {
+            "id": "SOP Peminjaman Laboratorium Komputer",
+            "en": "Computer Laboratory Borrowing SOP"
+        },
+        "description": {
+            "id": "Mengatur tata cara peminjaman dan penggunaan laboratorium komputer untuk mendukung kegiatan praktikum dan pembelajaran.",
+            "en": "Regulates the procedures for borrowing and using the computer laboratory to support practicum activities and learning."
+        },
+        "purpose": {
+            "id": "SOP ini bertujuan menjelaskan tata cara peminjaman lab komputer dan memastikan peminjaman mendukung kelancaran proses belajar mengajar di Program Studi Informatika Universitas Tanjungpura.",
+            "en": "This SOP aims to explain the procedures for borrowing the computer lab and to ensure that borrowing supports the smooth teaching and learning process in the Informatics Study Program at Tanjungpura University."
+        },
+        "requirements": [
+            { "id": "Melampirkan surat permohonan peminjaman laboratorium", "en": "Attach a laboratory borrowing request letter" },
+            { "id": "Terdapat dosen atau asisten praktikum yang bertanggung jawab", "en": "A responsible lecturer or practicum assistant is present" },
+            { "id": "Pengguna menaati tata tertib dan ketentuan penggunaan perangkat laboratorium", "en": "Users comply with the rules and regulations for using laboratory equipment" }
+        ],
+        "procedures": [
+            { "id": "Dosen atau mahasiswa mengajukan surat permohonan peminjaman laboratorium kepada pengelola", "en": "The lecturer or student submits a laboratory borrowing request letter to the management" },
+            { "id": "Pengguna menyampaikan jadwal penggunaan laboratorium", "en": "The user submits the laboratory usage schedule" },
+            { "id": "Pengelola menyusun jadwal penggunaan laboratorium", "en": "The management arranges the laboratory usage schedule" },
+            { "id": "Laboratorium digunakan sesuai jadwal dan ketentuan yang berlaku", "en": "The laboratory is used according to the schedule and applicable regulations" }
+        ],
+        "staff_responsible": [
+            "👤 Staf Laboratorium Informatika / Informatics Laboratory Staff"
+        ],
+        "additional_info": {
+            "id": "Pengguna laboratorium wajib menjaga kebersihan, keamanan, dan kondisi perangkat laboratorium selama kegiatan berlangsung.",
+            "en": "Laboratory users must maintain the cleanliness, safety, and condition of laboratory equipment throughout the activity."
+        }
+    }
+]

groups/C4A/data/data-staff.json

@@ -0,0 +1,82 @@
+[
+    {
+        "id": 1,
+        "name": "Tuning Rahayu, S.Hut.",
+        "role": {
+            "id": "Staf Administrasi Informatika",
+            "en": "Informatics Administrative Staff"
+        },
+        "image": "assets/images/staff-female.png",
+        "location": {
+            "id": "Ruang Administrasi Prodi Informatika",
+            "en": "Informatics Study Program Administration Room"
+        },
+        "contact_consent": true,
+        "phone": "6282350250892",
+        "schedule": [
+            {
+                "day": {
+                    "id": "Senin – Jumat",
+                    "en": "Monday – Friday"
+                },
+                "time": "07.30–16.00 WIB",
+                "break": {
+                    "id": "istirahat 12.00–13.00 WIB",
+                    "en": "break 12.00–13.00 WIB"
+                }
+            }
+        ],
+        "tasks": [
+            {
+                "id": "Administrasi mahasiswa",
+                "en": "Student administration"
+            },
+            {
+                "id": "Informasi berkas akademik",
+                "en": "Academic document information"
+            }
+        ]
+    },
+    {
+        "id": 2,
+        "name": "Mahyus Safutra, A.Md.",
+        "role": {
+            "id": "Staf Laboratorium Informatika",
+            "en": "Informatics Laboratory Staff"
+        },
+        "image": "assets/images/staff-male.png",
+        "location": {
+            "id": "Laboratorium Informatika",
+            "en": "Informatics Laboratory"
+        },
+        "contact_consent": true,
+        "phone": "895338672533",
+        "schedule": [
+            {
+                "day": {
+                    "id": "Senin – Jumat",
+                    "en": "Monday – Friday"
+                },
+                "time": "07.30–16.00 WIB",
+                "break": {
+                    "id": "istirahat 12.00–13.00 WIB",
+                    "en": "break 12.00–13.00 WIB"
+                }
+            }
+        ],
+        "tasks": [
+            {
+                "id": "Pengelolaan laboratorium",
+                "en": "Laboratory management"
+            },
+            {
+                "id": "Dukungan praktikum",
+                "en": "Practicum support"
+            },
+            {
+                "id": "Peminjaman ruangan dan alat",
+                "en": "Room and equipment borrowing"
+            }
+        ]
+    }
+]

groups/C4A/index.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="id" class="scroll-smooth">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,9 +8,12 @@
     <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>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+    <link
+        href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+        rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-        <style>
+    <link rel="stylesheet" href="./style.css">
+    <style>
         /* ===== MOBILE NAV STABILITY FIX =====
            Prevents logo bar from collapsing/shifting on Android when
            address bar hides/shows and triggers viewport reflow.
@@ -293,9 +297,10 @@
         }
     </style>
 </head>
+
 <body class="text-slate-800 antialiased bg-white selection:bg-untan-yellow selection:text-black">
 
-    <a href="#main-content" class="skip-link" data-i18n="skip_to_content">Langsung ke Konten Utama</a>
+    <a href="#main-content" class="skip-link">Langsung ke Konten Utama</a>
 
     <div id="nav-wrapper"
         class="fixed top-0 left-0 right-0 z-50 transition-shadow duration-300 shadow-sm border-b border-slate-200 will-change-auto">
@@ -373,7 +378,7 @@
                     <div class="nav-menu-item relative" data-menu="tentang">
                         <button
                             class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
-                            <span data-i18n="nav_about">Tentang Kami</span>
+                            <span>Tentang Kami</span>
                             <i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
                         </button>
                     </div>
@@ -382,7 +387,7 @@
                     <div class="nav-menu-item relative" data-menu="program">
                         <button
                             class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
-                            <span data-i18n="nav_program">Program</span>
+                            <span>Program</span>
                             <i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
                         </button>
                     </div>
@@ -391,7 +396,7 @@
                     <div class="nav-menu-item relative" data-menu="sdm">
                         <button
                             class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
-                            <span data-i18n="nav_sdm">SDM</span>
+                            <span>SDM</span>
                             <i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
                         </button>
                     </div>
@@ -400,7 +405,7 @@
                     <div class="nav-menu-item relative" data-menu="fasilitas">
                         <button
                             class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
-                            <span data-i18n="nav_facilities">Fasilitas</span>
+                            <span>Fasilitas</span>
                             <i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
                         </button>
                     </div>
@@ -409,7 +414,7 @@
                     <div class="nav-menu-item relative" data-menu="karya">
                         <button
                             class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
-                            <span data-i18n="nav_works">Karya & Agenda</span>
+                            <span>Karya & Agenda</span>
                             <i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
                         </button>
                     </div>
@@ -418,7 +423,7 @@
                     <div class="nav-menu-item relative" data-menu="kontak">
                         <button
                             class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
-                            <span data-i18n="nav_contact">Kontak</span>
+                            <span>Kontak</span>
                             <i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
                         </button>
                     </div>
@@ -1139,18 +1144,149 @@
         </div>
     </div>
 
-<main id="main-content" class="pt-[88px] lg:pt-[160px] min-h-screen bg-white">
+    <main id="main-content" class="pt-[88px] lg:pt-[160px] min-h-screen bg-white">
         <div class="container mx-auto px-4 lg:px-8 py-12">
             <div class="mb-8 pb-8 border-b border-slate-200">
-                <span class="bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 inline-block mb-3">Tugas Halaman Statis</span>
-                <h1 class="text-3xl lg:text-4xl font-bold text-slate-900 mb-2">Judul Halaman Group 04</h1>
-                <p class="text-slate-500 text-sm">Kelompok 04 &mdash; C4A &nbsp;&middot;&nbsp; Informatika UNTAN 2026</p>
+                <span
+                    class="bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 inline-block mb-3">Tugas
+                    Halaman Statis</span>
+                <h1 class="text-3xl lg:text-4xl font-bold text-slate-900 mb-2">Staf Pendukung dan Standar Operasional
+                    Prosedur (SOP)</h1>
+                <p class="text-slate-500 text-sm">Kelompok 04 &mdash; C4A &nbsp;&middot;&nbsp; Informatika UNTAN 2026
+                </p>
             </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>
-                <h3>Subjudul</h3>
-                <p>Gunakan paragraf, list, tabel, gambar, dan elemen konten lainnya.</p>
+                <!-- HERO SECTION -->
+                <section class="c4a-hero reveal">
+                    <div class="c4a-hero-inner">
+                        <div class="c4a-hero-tag" data-i18n="grp_c4a_hero_tag">LAYANAN AKADEMIK &bull; INFORMATIKA UNTAN
+                        </div>
+                        <h1 class="c4a-hero-title" data-i18n-html="grp_c4a_hero_title">
+                            Staf Pendukung &amp; <br />
+                            <span class="highlight-orange">Standar Operasional Prosedur (SOP)</span>
+                        </h1>
+                        <p class="c4a-hero-desc" data-i18n="grp_c4a_hero_desc">Halaman ini menampilkan informasi petugas
+                            layanan akademik serta
+                            prosedur administrasi
+                            mahasiswa
+                            Program Studi Informatika UNTAN.</p>
+                        <div class="hero-stats">
+                            <div class="stat-item">
+                                <div class="stat-number" id="stat-staf">0</div>
+                                <div class="stat-label" data-i18n="grp_c4a_stat_staf">Staf Aktif</div>
+                            </div>
+                            <div class="stat-divider"></div>
+                            <div class="stat-item">
+                                <div class="stat-number" id="stat-sop">0</div>
+                                <div class="stat-label" data-i18n="grp_c4a_stat_sop">Jenis SOP</div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- STAFF SECTION -->
+                <section class="content-section">
+                    <div class="section-header">
+                        <div class="section-tag"><span class="dot"></span> <span data-i18n="grp_c4a_staff_tag">Tim
+                                Kami</span></div>
+                        <h2 class="section-title" data-i18n="grp_c4a_staff_title">Staf Pendukung</h2>
+                        <p class="section-subtitle" data-i18n="grp_c4a_staff_subtitle">Staf yang siap melayani kebutuhan
+                            akademik dan operasional
+                            laboratorium di Prodi Informatika UNTAN.</p>
+                    </div>
+                    <div class="staff-grid" id="staff-container">
+                        <!-- Kartu staf akan diisi secara dinamis melalui main.js berdasarkan data-staff.json -->
+                    </div>
+                </section>
+
+                <!-- SOP SECTION -->
+                <section class="sop-section">
+                    <div class="section-header">
+                        <div class="section-tag"><span class="dot"></span> <span data-i18n="grp_c4a_sop_tag">Prosedur
+                                Resmi</span></div>
+                        <h2 class="section-title" data-i18n="grp_c4a_sop_title">Standar Operasional Prosedur (SOP)</h2>
+                        <p class="section-subtitle" data-i18n="grp_c4a_sop_subtitle">Standar Operasional Prosedur untuk
+                            berbagai kebutuhan administrasi
+                            akademik mahasiswa. Gunakan pencarian atau filter untuk menemukan SOP yang Anda butuhkan.
+                        </p>
+                    </div>
+
+                    <!-- SEARCH & FILTER BAR -->
+                    <div class="sop-toolbar reveal">
+                        <div class="sop-search-wrap">
+                            <i class="fas fa-search sop-search-icon"></i>
+                            <input type="search" id="sop-search-input" class="sop-search-input"
+                                data-i18n-placeholder="grp_c4a_sop_search_placeholder"
+                                placeholder="Cari SOP berdasarkan judul..." autocomplete="off" aria-label="Cari SOP" />
+                            <button class="sop-search-clear" id="sop-search-clear" aria-label="Hapus pencarian"
+                                style="display:none;">
+                                <i class="fas fa-times"></i>
+                            </button>
+                        </div>
+                        <div class="sop-filter-chips" id="sop-filter-chips" role="group"
+                            aria-label="Filter kategori SOP">
+                            <button class="sop-chip active" data-filter="semua" id="chip-semua"
+                                data-i18n="grp_c4a_sop_chip_semua">Semua</button>
+                            <button class="sop-chip" data-filter="akademik" id="chip-akademik">
+                                <i class="fas fa-graduation-cap"></i> <span
+                                    data-i18n="grp_c4a_sop_chip_akademik">Akademik</span>
+                            </button>
+                            <button class="sop-chip" data-filter="praktikum" id="chip-praktikum">
+                                <i class="fas fa-flask"></i> <span
+                                    data-i18n="grp_c4a_sop_chip_praktikum">Praktikum</span>
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- RESULT COUNT -->
+                    <div class="sop-result-info" id="sop-result-info" aria-live="polite"></div>
+
+                    <!-- SOP CARD GRID -->
+                    <div class="sop-card-grid" id="sop-cards-container"></div>
+
+                    <!-- EMPTY STATE -->
+                    <div class="sop-empty-state" id="sop-empty-state" style="display:none;">
+                        <i class="fas fa-search-minus sop-empty-icon"></i>
+                        <p class="sop-empty-title" data-i18n="grp_c4a_sop_empty_title">SOP tidak ditemukan</p>
+                        <p class="sop-empty-desc" data-i18n="grp_c4a_sop_empty_desc">Coba kata kunci lain atau reset
+                            filter pencarian.</p>
+                        <button class="sop-empty-reset" id="sop-empty-reset">
+                            <i class="fas fa-undo"></i> <span data-i18n="grp_c4a_sop_reset_btn">Reset Pencarian</span>
+                        </button>
+                    </div>
+
+                    <!-- SOP DETAIL MODAL -->
+                    <div class="sop-modal-overlay" id="sop-modal-overlay" role="dialog" aria-modal="true"
+                        aria-labelledby="sop-modal-title">
+                        <div class="sop-modal-box" id="sop-modal-box">
+                            <button class="sop-modal-close" id="sop-modal-close" aria-label="Tutup detail SOP">
+                                <i class="fas fa-times"></i>
+                            </button>
+                            <div id="sop-modal-content"></div>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- FAQ SECTION -->
+                <section class="faq-section-wrap">
+                    <div class="faq-section-inner">
+                        <div class="faq-header reveal">
+                            <div class="section-tag"><span class="dot"></span> <span
+                                    data-i18n="grp_c4a_faq_tag">Pertanyaan Umum</span></div>
+                            <h2 data-i18n="grp_c4a_faq_title">Pertanyaan yang Sering Diajukan</h2>
+                            <p data-i18n="grp_c4a_faq_subtitle">Temukan jawaban cepat atas pertanyaan umum mahasiswa
+                                seputar layanan akademik prodi.</p>
+                        </div>
+
+
+                        <div class="faq-wrap" id="faq-container">
+                            <!-- Item FAQ diisi secara dinamis melalui main.js berdasarkan data-faq.json -->
+                        </div>
+                    </div>
+                </section>
+
+                <script type="module" src="./js/main.js"></script>
                 <!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->
             </div>
         </div>
@@ -1215,8 +1351,8 @@
         </div>
 
         <div class="w-full relative z-0 mt-4 pointer-events-none flex justify-center">
-            <img src="../../assets/global/footer.png" alt="Footer Illustration" class="w-full h-auto object-cover object-bottom"
-                style="object-position: bottom;">
+            <img src="../../assets/global/footer.png" alt="Footer Illustration"
+                class="w-full h-auto object-cover object-bottom" style="object-position: bottom;">
         </div>
     </footer>
 
@@ -1312,27 +1448,28 @@
         })();
     </script>
 
-<script>
-    (function() {
-        const mobileBtn     = document.getElementById('mobile-menu-button');
-        const mobileMenu    = document.getElementById('mobile-menu');
-        const closeMobileBtn= document.getElementById('close-mobile-menu');
-        if (mobileBtn && mobileMenu) {
-            mobileBtn.addEventListener('click', function() {
-                const isOpen = !mobileMenu.classList.contains('-translate-x-full');
-                mobileMenu.classList.toggle('-translate-x-full');
-                mobileBtn.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
-            });
-        }
-        if (closeMobileBtn && mobileMenu) {
-            closeMobileBtn.addEventListener('click', function() {
-                mobileMenu.classList.add('-translate-x-full');
-                if (mobileBtn) mobileBtn.setAttribute('aria-expanded', 'false');
-            });
-        }
-    })();
-</script>
+    <script>
+        (function () {
+            const mobileBtn = document.getElementById('mobile-menu-button');
+            const mobileMenu = document.getElementById('mobile-menu');
+            const closeMobileBtn = document.getElementById('close-mobile-menu');
+            if (mobileBtn && mobileMenu) {
+                mobileBtn.addEventListener('click', function () {
+                    const isOpen = !mobileMenu.classList.contains('-translate-x-full');
+                    mobileMenu.classList.toggle('-translate-x-full');
+                    mobileBtn.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
+                });
+            }
+            if (closeMobileBtn && mobileMenu) {
+                closeMobileBtn.addEventListener('click', function () {
+                    mobileMenu.classList.add('-translate-x-full');
+                    if (mobileBtn) mobileBtn.setAttribute('aria-expanded', 'false');
+                });
+            }
+        })();
+    </script>
 
-<script src="../../assets/global/localization.js"></script>
+    <script src="../../assets/global/localization.js"></script>
 </body>
+
 </html>

groups/C4A/js/data.js

@@ -0,0 +1,56 @@
+/**
+ * Berisi fungsi-fungsi untuk mengambil data (Data Fetching).
+ */
+
+/**
+ * Mengambil data staf pendukung dari berkas JSON.
+ * @returns {Promise<Array<Object>>} Daftar objek data staf
+ */
+export async function getStaffData() {
+    try {
+        const response = await fetch('data/data-staff.json');
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        return await response.json();
+    } catch (error) {
+        console.error('Gagal memuat data staf:', error);
+        return [];
+    }
+}
+
+/**
+ * Mengambil data SOP dari berkas JSON.
+ * @returns {Promise<Array<Object>>} Daftar objek data SOP
+ */
+export async function getSopData() {
+    try {
+        const response = await fetch('data/data-sop.json');
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        return await response.json();
+    } catch (error) {
+        console.error('Gagal memuat data SOP:', error);
+        return [];
+    }
+}
+
+/**
+ * Mengambil data FAQ dari berkas JSON.
+ * @returns {Promise<Array<Object>>} Daftar objek data FAQ
+ */
+export async function getFaqData() {
+    try {
+        const response = await fetch('data/data-faq.json');
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        return await response.json();
+    } catch (error) {
+        console.error('Gagal memuat data FAQ:', error);
+        return [];
+    }
+}
+
+

groups/C4A/js/main.js

@@ -0,0 +1,71 @@
+/**
+ * Main Entry Point Kelompok C4A.
+ * Menghubungkan pengambilan data dengan rendering UI dan interaksi halaman.
+ */
+
+import { getStaffData, getSopData, getFaqData } from './data.js';
+import {
+    renderStaffCards,
+    renderSopCards,
+    renderFaqSection,
+    initSopInteraction,
+    initAnimations,
+    initFaq,
+    applySopFilter
+} from './ui.js';
+
+// Cache data secara global untuk mendukung rendering UI
+let cachedStaffData = [];
+let cachedSopData = [];
+let cachedFaqData = [];
+
+/**
+ * Menginisialisasi aplikasi dengan mengambil seluruh data secara pararel,
+ * merender konten awal, serta mendaftarkan event listener interaksi UI.
+ * @returns {Promise<void>}
+ */
+async function initApp() {
+    try {
+        const [staffData, sopData, faqData] = await Promise.all([
+            getStaffData(),
+            getSopData(),
+            getFaqData()
+        ]);
+
+        cachedStaffData = staffData || [];
+        cachedSopData = sopData || [];
+        cachedFaqData = faqData || [];
+
+        renderStaffCards(cachedStaffData);
+        renderSopCards(cachedSopData);
+        renderFaqSection(cachedFaqData);
+
+        initSopInteraction();
+        initFaq();
+
+        // Memberikan sedikit waktu tunda (jeda) agar rendering DOM selesai sebelum memulai animasi.
+        setTimeout(() => {
+            initAnimations();
+        }, 100);
+    } catch (error) {
+        console.error('Terjadi kesalahan saat menginisialisasi halaman:', error);
+    }
+}
+
+// Re-render UI saat bahasa berubah (data tetap sama, hanya label UI yang berganti via t())
+document.addEventListener('languageChanged', () => {
+    renderStaffCards(cachedStaffData);
+    renderSopCards(cachedSopData);
+    renderFaqSection(cachedFaqData);
+    initFaq();
+    applySopFilter();
+
+    // Re-inisialisasi observer agar elemen .reveal yang baru di-render mendapat class .visible
+    setTimeout(() => {
+        initAnimations();
+    }, 100);
+});
+
+// Jalankan inisialisasi aplikasi saat DOM siap
+document.addEventListener('DOMContentLoaded', initApp);
+

groups/C4A/js/ui.js

@@ -0,0 +1,673 @@
+// --- Helper Fungsi ---
+
+/**
+ * Helper untuk menerjemahkan string berdasarkan key dari localization.js.
+ * Menggunakan fallback jika key tidak ditemukan atau localization.js tidak aktif.
+ */
+function t(key, fallback) {
+    if (window.t) {
+        const val = window.t(key);
+        if (val !== key) return val;
+    }
+    return fallback;
+}
+
+/**
+ * Mendapatkan bahasa aktif dari localStorage atau default 'id'.
+ * @returns {'id'|'en'} Kode bahasa aktif
+ */
+function getLang() {
+    return localStorage.getItem('if_untan_lang') || 'id';
+}
+
+/**
+ * Mengambil teks dari field bilingual JSON { id: '...', en: '...' }.
+ * Jika field bukan objek (string lama / belum diupdate), kembalikan apa adanya.
+ * @param {string|Object} field - Field data dari JSON
+ * @returns {string} Teks sesuai bahasa aktif
+ */
+function loc(field) {
+    if (!field) return '';
+    if (typeof field === 'object' && field !== null) {
+        const lang = getLang();
+        return field[lang] || field['id'] || '';
+    }
+    return field;
+}
+
+/**
+ * Normalisasi nomor telepon ke format standard e.g. 628...
+ * @param {string} phone - Nomor telepon mentah
+ * @returns {string} Nomor telepon ternormalisasi
+ */
+function normalizePhone(phone) {
+    let digits = String(phone || '').replace(/\D/g, '');
+    if (digits.startsWith('0')) {
+        digits = `62${digits.slice(1)}`;
+    } else if (digits.startsWith('8')) {
+        digits = `62${digits}`;
+    }
+    return digits;
+}
+
+/**
+ * Format nomor telepon untuk tampilan UI
+ * @param {string} phone - Nomor telepon mentah
+ * @returns {string} Nomor telepon terformat (e.g. +62 8xx-xxxx-xxxx)
+ */
+function formatPhoneForDisplay(phone) {
+    const norm = normalizePhone(phone);
+    if (!norm) return '-';
+    return `+${norm.slice(0, 2)} ${norm.slice(2, 5)}-${norm.slice(5, 9)}-${norm.slice(9)}`;
+}
+
+/**
+ * Memvalidasi apakah nomor telepon valid untuk digunakan di WhatsApp.
+ * @param {string} phone - Nomor telepon mentah
+ * @returns {boolean} True jika nomor valid (seluler Indonesia 10-15 digit)
+ */
+function isValidWhatsAppNumber(phone) {
+    const norm = normalizePhone(phone);
+    return norm.startsWith('628') && norm.length >= 10 && norm.length <= 15;
+}
+
+/**
+ * Enkripsi nomor telepon menggunakan Base64 untuk keamanan kontak.
+ * @param {string} phone - Nomor telepon ternormalisasi
+ * @returns {string} Nomor telepon terenkripsi Base64
+ */
+function encodePhone(phone) {
+    return btoa(normalizePhone(phone));
+}
+
+/**
+ * Dekripsi nomor telepon dari Base64.
+ * @param {string} encoded - Nomor telepon terenkripsi Base64
+ * @returns {string} Nomor telepon terdekripsi
+ */
+function decodePhone(encoded) {
+    try {
+        return atob(encoded);
+    } catch (error) {
+        console.error('Gagal mendekripsi nomor telepon:', error);
+        return '';
+    }
+}
+
+/**
+ * Merender daftar staf pendukung ke dalam container HTML.
+ * @param {Array<Object>} staffs - Array data staf pendukung
+ */
+export function renderStaffCards(staffs) {
+    const container = document.getElementById('staff-container');
+    if (!container) return;
+
+    container.innerHTML = '';
+
+    if (!staffs || staffs.length === 0) {
+        container.innerHTML = `<p class="empty-state-msg">${t('grp_c4a_empty_staff', 'Data staf pendukung tidak tersedia saat ini.')}</p>`;
+        return;
+    }
+
+    staffs.forEach((staff, index) => {
+        const {
+            name,
+            role,
+            image,
+            location,
+            phone,
+            contact_consent: contactConsent,
+            schedule,
+            tasks
+        } = staff;
+
+        const roleText = loc(role);
+        const locationText = loc(location);
+
+        const scheduleHTML = schedule.map(sched =>
+            `<div class="schedule-item">` +
+            `<span class="s-day">${loc(sched.day)}</span>` +
+            `<span class="s-time">${sched.time} <span class="s-break">| ${loc(sched.break)}</span></span>` +
+            `</div>`
+        ).join('');
+
+        const tasksHTML = tasks.map(task => `<li>${loc(task)}</li>`).join('');
+        const isPhoneValid = isValidWhatsAppNumber(phone);
+        const encodedPhone = isPhoneValid ? encodePhone(phone) : '';
+        const displayPhone = isPhoneValid ? formatPhoneForDisplay(phone) : '-';
+        const hideContactItemClass = contactConsent ? '' : 'is-hidden';
+        const hideContactActionClass = (contactConsent && isPhoneValid) ? '' : 'is-hidden';
+        const initial = name ? name.charAt(0).toUpperCase() : '';
+
+        const card = document.createElement('div');
+        card.className = `staff-card reveal reveal-delay-${index + 1}`;
+
+        card.innerHTML = `
+      <div class="staff-card-header">
+        <div class="staff-avatar">
+          <span class="staff-initial">${initial}</span>
+          <img src="${image}" alt="${name}" onerror="this.style.display='none'"/>
+        </div>
+        <div>
+          <div class="staff-name">${name}</div>
+          <div class="staff-role">${roleText}</div>
+        </div>
+      </div>
+      <div class="staff-card-body">
+        <div class="staff-info-grid">
+          <div class="staff-info-item"><span class="icon">📍</span><div><span class="label">${t('grp_c4a_label_location', 'Lokasi')}</span><span class="val">${locationText}</span></div></div>
+          <div class="staff-info-item">
+            <span class="icon">🕒</span>
+            <div style="flex:1">
+              <span class="label">${t('grp_c4a_label_service_hours', 'Jam Layanan')}</span>
+              <div class="schedule-list">${scheduleHTML}</div>
+            </div>
+          </div>
+          <div class="staff-info-item staff-contact-item ${hideContactItemClass}"><span class="icon">📞</span><div><span class="label">${t('grp_c4a_label_wa_contact', 'Kontak WhatsApp')}</span><span class="val">${displayPhone}</span></div></div>
+        </div>
+        <div class="staff-divider"></div>
+        <div class="staff-tasks-title">${t('grp_c4a_label_tasks', 'Tugas & Tanggung Jawab')}</div>
+        <ul class="staff-tasks">${tasksHTML}</ul>
+      </div>
+      <div class="staff-card-actions staff-contact-actions ${hideContactActionClass}">
+        <button class="btn-staff btn-staff-wa" data-wa="${encodedPhone}" aria-label="${t('grp_c4a_label_send_wa', 'Kirim Pesan WA')} ${name}"><svg class="wa-icon" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg> ${t('grp_c4a_label_send_wa', 'Kirim Pesan WA')}</button>
+      </div>
+
+    `;
+
+        container.appendChild(card);
+
+        // Setup WA button click handler dengan dekrips nomor
+        const waBtn = card.querySelector('[data-wa]');
+        if (waBtn) {
+            waBtn.addEventListener('click', () => {
+                const phoneNum = decodePhone(waBtn.dataset.wa);
+                if (phoneNum) {
+                    window.open(`https://wa.me/${phoneNum}`, '_blank', 'noopener,noreferrer');
+                }
+            });
+        }
+    });
+}
+// ============================================================
+// --- Render SOP sebagai Card Grid dengan Search & Filter ---
+// ============================================================
+
+const CATEGORY_COLORS = {
+    akademik: 'sop-cat-akademik',
+    praktikum: 'sop-cat-praktikum',
+};
+
+/**
+ * Ambil label kategori
+ * @param {string} category - Kategori SOP ('akademik' atau 'praktikum')
+ * @returns {string} Label kategori
+ */
+function getCatLabel(category) {
+    const map = {
+        akademik: t('grp_c4a_sop_chip_akademik', 'Akademik'),
+        praktikum: t('grp_c4a_sop_chip_praktikum', 'Praktikum')
+    };
+    return map[category] || t('grp_c4a_sop_chip_akademik', 'Akademik');
+}
+
+/**
+ * Buat HTML untuk satu SOP card di grid.
+ * @param {Object} sop - Data objek SOP
+ * @returns {string} String markup HTML kartu SOP
+ */
+function buildSopCard(sop) {
+    const {
+        tab_id: tabId,
+        category,
+        icon = 'fa-file-alt',
+        title,
+        description,
+        procedures
+    } = sop;
+
+    const titleText = loc(title);
+    const descText = loc(description);
+
+    const catLabel = getCatLabel(category);
+    const catClass = CATEGORY_COLORS[category] || '';
+
+    return `
+    <article class="sop-grid-card reveal" data-tab-id="${tabId}" data-category="${category}" data-title="${titleText.toLowerCase()}">
+      <div class="sgc-header">
+        <div class="sgc-icon-wrap">
+          <i class="fas ${icon}"></i>
+        </div>
+        <div class="sgc-meta">
+          <h3 class="sgc-title">${titleText}</h3>
+        </div>
+      </div>
+      <div class="sgc-category-row">
+        <span class="sgc-category ${catClass}">${catLabel}</span>
+      </div>
+      <p class="sgc-desc">${descText}</p>
+      <div class="sgc-footer">
+        <div class="sgc-steps">
+          <i class="fas fa-list-ol"></i>
+          <span>${procedures.length} ${t('grp_c4a_label_steps', 'Langkah')}</span>
+        </div>
+        <button class="sgc-detail-btn" data-tab-id="${tabId}" aria-label="${t('grp_c4a_label_view_detail', 'Lihat Detail')} ${titleText}">
+          ${t('grp_c4a_label_view_detail', 'Lihat Detail')} <i class="fas fa-arrow-right"></i>
+        </button>
+      </div>
+    </article>`;
+}
+
+/**
+ * Buat HTML untuk isi modal detail SOP.
+ * @param {Object} sop - Data objek SOP
+ * @returns {string} String markup HTML isi modal
+ */
+function buildSopModalContent(sop) {
+    const {
+        category,
+        icon = 'fa-file-alt',
+        title,
+        description,
+        purpose,
+        requirements,
+        procedures,
+        staff_responsible: staffResponsible,
+        additional_info: additionalInfo
+    } = sop;
+
+    const titleText = loc(title);
+    const descText = loc(description);
+    const purposeText = loc(purpose);
+    const additionalInfoText = loc(additionalInfo);
+
+    const catLabel = getCatLabel(category);
+    const catClass = CATEGORY_COLORS[category] || '';
+
+    const reqsHTML = requirements.map(req => `<li>${loc(req)}</li>`).join('');
+    const procsHTML = procedures.map(proc => `<li>${loc(proc)}</li>`).join('');
+
+    // staffResponsible bersifat opsional — sembunyikan blok jika tidak ada
+    const hasStaff = Array.isArray(staffResponsible) && staffResponsible.length > 0;
+    const staffHTML = hasStaff
+        ? staffResponsible.map(staffName => `<span class="sop-staff-pill">${staffName}</span>`).join('')
+        : '';
+    const staffBlockHTML = hasStaff
+        ? `<div class="sop-staff-block">
+        <div class="sop-block-label">${t('grp_c4a_label_responsible_staff', 'Staf Bertanggung Jawab (Bersifat Opsional)')}</div>
+        <div class="sop-staff-pills">${staffHTML}</div>
+      </div>`
+        : '';
+
+    // additionalInfo bersifat opsional — sembunyikan blok jika tidak ada
+    const additionalInfoHTML = additionalInfoText
+        ? `<div class="sop-info-box">
+        <span class="iico">ℹ️</span>
+        <p class="sop-info-box-text"><strong>${t('grp_c4a_label_additional_info', 'Informasi Tambahan (Bersifat Opsional):')}</strong> ${additionalInfoText}</p>
+      </div>`
+        : '';
+
+    return `
+    <div class="sop-modal-header">
+      <div class="sop-modal-header-top">
+        <div class="sop-modal-icon-wrap">
+          <i class="fas ${icon}"></i>
+        </div>
+        <div>
+          <div class="sop-modal-badges">
+            <span class="sgc-category ${catClass}">${catLabel}</span>
+          </div>
+          <h2 class="sop-modal-title" id="sop-modal-title">${titleText}</h2>
+          <p class="sop-modal-desc">${descText}</p>
+        </div>
+      </div>
+    </div>
+    <div class="sop-modal-body">
+      <div class="sop-block">
+        <div class="sop-block-label">${t('grp_c4a_label_purpose', 'Tujuan')}</div>
+        <p class="sop-block-text">${purposeText}</p>
+      </div>
+      <div class="sop-two-col">
+        <div>
+          <div class="sop-block-label">${t('grp_c4a_label_requirements', 'Persyaratan')}</div>
+          <ul class="sop-list bullets">${reqsHTML}</ul>
+        </div>
+        <div>
+          <div class="sop-block-label">${t('grp_c4a_label_procedure', 'Alur Prosedur')}</div>
+          <ul class="sop-list numbered">${procsHTML}</ul>
+        </div>
+      </div>
+      ${staffBlockHTML}
+      ${additionalInfoHTML}
+    </div>`;
+}
+
+/**
+ * Render semua SOP card ke grid.
+ * @param {Array<Object>} sops - Array objek SOP
+ */
+export function renderSopCards(sops) {
+    const container = document.getElementById('sop-cards-container');
+    if (!container) return;
+
+    // simpan data global di element agar bisa diakses filter/search
+    container._sopData = sops;
+
+    // Tampilkan pesan jika data SOP kosong atau gagal dimuat
+    if (!sops || sops.length === 0) {
+        container.innerHTML = `<p class="empty-state-msg">${t('grp_c4a_empty_sop', 'Data SOP tidak tersedia saat ini.')}</p>`;
+        updateResultInfo(0, 0);
+        return;
+    }
+
+    container.innerHTML = sops.map(buildSopCard).join('');
+    updateResultInfo(sops.length, sops.length);
+}
+
+/** Update teks info jumlah hasil */
+function updateResultInfo(shown, total) {
+    const el = document.getElementById('sop-result-info');
+    if (!el) return;
+    if (shown === total) {
+        const allTemplate = t('grp_c4a_sop_showing_all', 'Menampilkan {total} SOP');
+        el.textContent = allTemplate.replace('{total}', total);
+    } else {
+        const filteredTemplate = t('grp_c4a_sop_showing_filtered', 'Menampilkan {shown} dari {total} SOP');
+        el.textContent = filteredTemplate.replace('{shown}', shown).replace('{total}', total);
+    }
+}
+
+/**
+ * Memfilter dan menyaring kartu SOP berdasarkan query pencarian dan chip filter aktif.
+ */
+export function applySopFilter() {
+    const container = document.getElementById('sop-cards-container');
+    if (!container) return;
+
+    const query = (document.getElementById('sop-search-input')?.value || '').toLowerCase().trim();
+    const activeChip = document.querySelector('.sop-chip.active');
+    const activeFilter = activeChip ? activeChip.dataset.filter : 'semua';
+
+    const cards = container.querySelectorAll('.sop-grid-card');
+    let visibleCount = 0;
+
+    cards.forEach(card => {
+        const title = card.dataset.title || '';
+        const code = card.dataset.code || '';
+        const category = card.dataset.category || '';
+
+        const matchesSearch = !query || title.includes(query) || code.includes(query);
+        const matchesFilter = activeFilter === 'semua' || category === activeFilter;
+
+        const isVisible = matchesSearch && matchesFilter;
+        card.style.display = isVisible ? '' : 'none';
+        if (isVisible) visibleCount++;
+    });
+
+    const emptyState = document.getElementById('sop-empty-state');
+    if (emptyState) emptyState.style.display = visibleCount === 0 ? 'flex' : 'none';
+
+    updateResultInfo(visibleCount, cards.length);
+}
+
+
+/**
+ * Membuka modal detail untuk SOP tertentu berdasarkan tab_id.
+ * @param {string} tabId - ID unik tab/SOP yang ingin ditampilkan
+ */
+function openSopModal(tabId) {
+    const container = document.getElementById('sop-cards-container');
+    if (!container || !container._sopData) return;
+    const sop = container._sopData.find(item => item.tab_id === tabId);
+    if (!sop) return;
+
+    const modalContent = document.getElementById('sop-modal-content');
+    const modalOverlay = document.getElementById('sop-modal-overlay');
+    if (!modalContent || !modalOverlay) return;
+
+    modalContent.innerHTML = buildSopModalContent(sop);
+    modalOverlay.classList.add('active');
+    document.body.style.overflow = 'hidden';
+
+    // Gulir isi modal ke paling atas
+    const modalBox = document.getElementById('sop-modal-box');
+    if (modalBox) modalBox.scrollTop = 0;
+}
+
+/**
+ * Menutup modal detail SOP yang sedang aktif.
+ */
+function closeSopModal() {
+    const modalOverlay = document.getElementById('sop-modal-overlay');
+    if (modalOverlay) modalOverlay.classList.remove('active');
+    document.body.style.overflow = '';
+}
+
+/**
+ * Menginisialisasi interaksi halaman SOP (pencarian, filter chip, modal detail).
+ */
+export function initSopInteraction() {
+    // Search input
+    const searchInput = document.getElementById('sop-search-input');
+    const searchClear = document.getElementById('sop-search-clear');
+
+    if (searchInput) {
+        searchInput.addEventListener('input', () => {
+            if (searchClear) {
+                searchClear.style.display = searchInput.value ? 'flex' : 'none';
+            }
+            applySopFilter();
+        });
+    }
+
+    if (searchClear) {
+        searchClear.addEventListener('click', () => {
+            if (searchInput) {
+                searchInput.value = '';
+            }
+            searchClear.style.display = 'none';
+            applySopFilter();
+        });
+    }
+
+    // Filter chips
+    document.querySelectorAll('.sop-chip').forEach(chip => {
+        chip.addEventListener('click', () => {
+            document.querySelectorAll('.sop-chip').forEach(activeChip => {
+                activeChip.classList.remove('active');
+            });
+            chip.classList.add('active');
+            applySopFilter();
+        });
+    });
+
+    // Empty state reset button
+    const emptyReset = document.getElementById('sop-empty-reset');
+    if (emptyReset) {
+        emptyReset.addEventListener('click', () => {
+            if (searchInput) {
+                searchInput.value = '';
+            }
+            if (searchClear) {
+                searchClear.style.display = 'none';
+            }
+            document.querySelectorAll('.sop-chip').forEach(activeChip => {
+                activeChip.classList.remove('active');
+            });
+            const allChip = document.querySelector('[data-filter="semua"]');
+            if (allChip) {
+                allChip.classList.add('active');
+            }
+            applySopFilter();
+        });
+    }
+
+    // Card detail button (event delegation)
+    const container = document.getElementById('sop-cards-container');
+    if (container) {
+        container.addEventListener('click', (event) => {
+            const btn = event.target.closest('.sgc-detail-btn');
+            if (btn) {
+                openSopModal(btn.dataset.tabId);
+            }
+        });
+    }
+
+    // Modal close button
+    const closeBtn = document.getElementById('sop-modal-close');
+    if (closeBtn) {
+        closeBtn.addEventListener('click', closeSopModal);
+    }
+
+    // Close on overlay click
+    const overlay = document.getElementById('sop-modal-overlay');
+    if (overlay) {
+        overlay.addEventListener('click', (event) => {
+            if (event.target === overlay) {
+                closeSopModal();
+            }
+        });
+    }
+
+    // Close on Escape key
+    document.addEventListener('keydown', (event) => {
+        if (event.key === 'Escape') {
+            closeSopModal();
+        }
+    });
+}
+
+// --- Kompatibilitas Mundur ---
+
+/**
+ * Stub kompatibilitas mundur untuk renderSopTabs.
+ * @param {Array<Object>} sops - Array objek SOP
+ */
+export function renderSopTabs(sops) {
+    renderSopCards(sops);
+}
+
+/**
+ * Stub kompatibilitas mundur untuk initSopTabsInteraction.
+ */
+export function initSopTabsInteraction() {
+    initSopInteraction();
+}
+
+// --- Interaksi & Animasi ---
+
+/**
+ * Menginisialisasi animasi scroll reveal dan counter statistik pada hero section.
+ */
+export function initAnimations() {
+    // Scroll Reveal
+    const revealObserver = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+            if (!entry.isIntersecting) return;
+            entry.target.classList.add('visible');
+            revealObserver.unobserve(entry.target);
+        });
+    }, { threshold: 0.1 });
+
+    document.querySelectorAll('.reveal').forEach((el) => revealObserver.observe(el));
+
+    // Hero Counter
+    const COUNT_ANIMATION_DURATION_MS = 800;
+
+    /**
+     * Menjalankan animasi hitung angka (counter)
+     * @param {Element} targetElement - Elemen target angka
+     * @param {number} targetValue - Nilai akhir counter
+     */
+    function animateCount(targetElement, targetValue) {
+        if (!targetElement) return;
+        const stepValue = targetValue / (COUNT_ANIMATION_DURATION_MS / 16);
+        let currentValue = 0;
+        const timerId = setInterval(() => {
+            currentValue += stepValue;
+            if (currentValue >= targetValue) {
+                currentValue = targetValue;
+                clearInterval(timerId);
+            }
+            targetElement.textContent = Math.floor(currentValue).toString();
+        }, 16);
+    }
+
+    const staffCounter = document.getElementById('stat-staf');
+    const sopCounter = document.getElementById('stat-sop');
+
+    // Hitung jumlah data yang berhasil di-render (tidak termasuk template)
+    const totalStaffCards = document.querySelectorAll('.staff-card').length;
+    const totalSopCards = document.querySelectorAll('.sop-grid-card').length;
+
+    animateCount(staffCounter, totalStaffCards);
+    animateCount(sopCounter, totalSopCards);
+}
+
+// --- FAQ Accordion ---
+
+/**
+ * Membuka item FAQ yang diklik; menutup item lain yang sebelumnya
+ * terbuka (perilaku accordion satu-terbuka-sekaligus).
+ * @param {Element} questionEl - Elemen .faq-question yang diklik
+ */
+function toggleFaq(questionEl) {
+    const item = questionEl.closest('.faq-item');
+    if (!item) return;
+    const isOpen = item.classList.contains('open');
+
+    // Tutup semua item terlebih dahulu
+    document.querySelectorAll('.faq-item').forEach(faqItem => {
+        faqItem.classList.remove('open');
+    });
+
+    // Buka item yang diklik hanya jika sebelumnya tertutup
+    if (!isOpen) {
+        item.classList.add('open');
+    }
+}
+
+/**
+ * Menginisialisasi event listener klik untuk setiap accordion FAQ.
+ */
+export function initFaq() {
+    document.querySelectorAll('.faq-question').forEach(questionEl => {
+        questionEl.addEventListener('click', () => toggleFaq(questionEl));
+    });
+}
+
+// --- Render FAQ ---
+
+/**
+ * Merender section FAQ secara dinamis dari data-faq.json.
+ * Diinjeksikan ke dalam #faq-container di index.html.
+ * @param {Array<Object>} faqs - Array objek FAQ dari data-faq.json
+ */
+export function renderFaqSection(faqs) {
+    const container = document.getElementById('faq-container');
+    if (!container) return;
+
+    if (!faqs || faqs.length === 0) {
+        container.innerHTML = `<p class="empty-state-msg">${t('grp_c4a_empty_faq', 'Data FAQ tidak tersedia saat ini.')}</p>`;
+        return;
+    }
+
+
+    const delayClasses = ['reveal-delay-1', 'reveal-delay-2', 'reveal-delay-3'];
+
+    const itemsHTML = faqs.map((faq, index) => {
+        const delayClass = delayClasses[index] || '';
+        return `
+        <div class="faq-item reveal ${delayClass}">
+            <div class="faq-question">
+                <span class="faq-question-text">${loc(faq.question)}</span>
+                <div class="faq-icon">+</div>
+            </div>
+            <div class="faq-answer">
+                <div class="faq-answer-inner">${loc(faq.answer)}</div>
+            </div>
+        </div>`;
+    }).join('');
+
+    container.innerHTML = itemsHTML;
+}

groups/Jellyfish.Corp/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Group 01 &ndash; Jellyfish.Corp | Informatika UNTAN</title>
+    <link rel="stylesheet" href="style.css">
     <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>
@@ -1143,14 +1144,726 @@
         <div class="container mx-auto px-4 lg:px-8 py-12">
             <div class="mb-8 pb-8 border-b border-slate-200">
                 <span class="bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 inline-block mb-3">Tugas Halaman Statis</span>
-                <h1 class="text-3xl lg:text-4xl font-bold text-slate-900 mb-2">Judul Halaman Group 01</h1>
+                <h1 class="text-3xl lg:text-4xl font-bold text-slate-900 mb-2">Sekilas Informatika UNTAN</h1>
                 <p class="text-slate-500 text-sm">Kelompok 01 &mdash; Jellyfish.Corp &nbsp;&middot;&nbsp; Informatika UNTAN 2026</p>
             </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>
-                <h3>Subjudul</h3>
-                <p>Gunakan paragraf, list, tabel, gambar, dan elemen konten lainnya.</p>
+                <!-- ===================== A. HERO ===================== -->
+                <section class="jf-hero-landing">
+                    <div class="jf-hero-landing-bg"></div>
+                    <div class="container jf-hero-landing-inner">
+                        <div class="jf-hero-landing-content">
+                            <h1 class="jf-hero-headline" data-i18n="grp_jellyfish_hero_title">Sekilas Informatika<br>
+                            <h1 class="jf-hero-headline" data-i18n="grp_jellyfish_hero_subtitle" style="color: #feb401">Universitas Tanjungpura</h1>
+                            <p class="jf-hero-sub" data-i18n="grp_jellyfish_hero_desc">Mencetak talenta digital unggulan dari Kalimantan Barat untuk Indonesia dan
+                                dunia. Bergabunglah bersama kami dalam perjalanan membangun masa depan teknologi.</p>
+                            <div class="jf-hero-ctas">
+                                <a href="#kontak" class="jf-hero-cta-primary" data-i18n="grp_jellyfish_btn_register">Daftar Sekarang</a>
+                                <a href="#tentang" class="jf-hero-cta-secondary" data-i18n="grp_jellyfish_btn_learn">Pelajari Lebih ↓</a>
+                            </div>
+                            <div class="jf-hero-stats">
+                                <div class="jf-hs-item">
+                                    <span class="jf-hs-num">2004</span>
+                                    <span class="jf-hs-label" data-i18n="grp_jellyfish_stat_founded">Tahun Berdirinya</span>
+                                </div>
+                                <div class="jf-hs-div"></div>
+                                <div class="jf-hs-item">
+                                    <span class="jf-hs-num">512</span>
+                                    <span class="jf-hs-label" data-i18n="grp_jellyfish_stat_students">Mahasiswa Aktif</span>
+                                </div>
+                                <div class="jf-hs-div"></div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- ===== MAIN CONTENT ===== -->
+                <main id="assignment-body">
+
+                    <!-- ===================== B. TENTANG PRODI ===================== -->
+                    <section class="jf-section jf-section-white" id="tentang">
+                        <div class="container">
+                            <div class="jf-about-layout">
+                                <div class="jf-about-left">
+                                    <span class="jf-badge" data-i18n="grp_jellyfish_about_badge">Tentang Prodi</span>
+                                    <h2 class="jf-section-title" data-i18n="grp_jellyfish_about_title">Mengenal Program Studi Informatika UNTAN</h2>
+                                    <p class="jf-about-intro" data-i18n="grp_jellyfish_about_intro">Program Studi Informatika Universitas Tanjungpura hadir sejak <strong>2004</strong> dan merupakan salah satu pusat pengembangan talenta digital di Kalimantan Barat. Seiring berkembangnya era digital, kami terus berinovasi untuk menjadi yang terdepan di bidang teknologi informasi yang terus maju.</p>
+
+                                    <div class="jf-visi-misi-cards">
+                                        <div class="jf-vm-card jf-vm-visi">
+                                            <div class="jf-vm-label" data-i18n="grp_jellyfish_vision_label">🎯 Visi</div>
+                                            <p data-i18n="grp_jellyfish_vision_text">Menjadi program studi unggul, inovatif, dan berdaya saing global, dengan fokus pada informatika cerdas untuk mendukung keberlanjutan dan pemberdayaan masyarakat melalui solusi teknologi berbasis kearifan lokal.</p>
+                                        </div>
+                                    </div>
+
+                                    <div class="jf-misi-section">
+                                        <div class="jf-misi-label" data-i18n="grp_jellyfish_mission_label">📋 Misi</div>
+                                        <div class="jf-misi-list">
+                                            <div class="jf-misi-item">
+                                                <div class="jf-misi-num">1</div>
+                                                <div>
+                                                    <strong data-i18n="grp_jellyfish_mission_1_title">Pendidikan OBE Unggul</strong>
+                                                    <p data-i18n="grp_jellyfish_mission_1_desc">Menyelenggarakan pendidikan berbasis informatika cerdas yang unggul dan inovatif melalui pendekatan OBE untuk menghasilkan lulusan yang kompeten, adaptif, beretika, dan berdaya saing global.</p>
+                                                </div>
+                                            </div>
+                                            <div class="jf-misi-item">
+                                                <div class="jf-misi-num">2</div>
+                                                <div>
+                                                    <strong data-i18n="grp_jellyfish_mission_2_title">Penelitian untuk SDGs</strong>
+                                                    <p data-i18n="grp_jellyfish_mission_2_desc">Mengembangkan penelitian unggul di bidang informatika cerdas yang mendukung pencapaian Tujuan Pembangunan Berkelanjutan (SDGs) dan relevan dengan tantangan lokal maupun global.</p>
+                                                </div>
+                                            </div>
+                                            <div class="jf-misi-item">
+                                                <div class="jf-misi-num">3</div>
+                                                <div>
+                                                    <strong data-i18n="grp_jellyfish_mission_3_title">Pengabdian Berbasis Kearifan Lokal</strong>
+                                                    <p data-i18n="grp_jellyfish_mission_3_desc">Menerapkan dan mengembangkan solusi teknologi berbasis kearifan lokal dalam kegiatan pengabdian kepada masyarakat untuk memberdayakan komunitas secara inklusif dan berkelanjutan.</p>
+                                                </div>
+                                            </div>
+                                            <div class="jf-misi-item">
+                                                <div class="jf-misi-num">4</div>
+                                                <div>
+                                                    <strong data-i18n="grp_jellyfish_mission_4_title">Kemitraan Strategis</strong>
+                                                    <p data-i18n="grp_jellyfish_mission_4_desc">Membangun kemitraan strategis dengan industri, pemerintah, dan institusi akademik untuk memperkuat ekosistem riset, inovasi, dan penerapan informatika cerdas yang memberikan dampak nyata.</p>
+                                                </div>
+                                            </div>
+                                            <div class="jf-misi-item">
+                                                <div class="jf-misi-num">5</div>
+                                                <div>
+                                                    <strong data-i18n="grp_jellyfish_mission_5_title">Budaya Akademik Beretika</strong>
+                                                    <p data-i18n="grp_jellyfish_mission_5_desc">Menumbuhkan budaya akademik yang beretika, kolaboratif, kreatif, dan berorientasi pada pembelajaran sepanjang hayat untuk mempersiapkan SDM unggul menghadapi disrupsi teknologi.</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="jf-about-right">
+                                    <div class="jf-timeline-card">
+                                        <div class="jf-timeline-title" data-i18n="grp_jellyfish_timeline_title">Tonggak Sejarah</div>
+                                            <div class="jf-timeline-list">
+                                                <div class="jf-tl-item">
+                                                    <div class="jf-tl-year">2004</div>
+                                                    <div class="jf-tl-dot"></div>
+                                                    <div class="jf-tl-content">
+                                                        <strong data-i18n="grp_jellyfish_timeline_2004_title">Pendirian Program Studi</strong>
+                                                        <span data-i18n="grp_jellyfish_timeline_2004_desc">Penerimaan mahasiswa angkatan pertama diselenggarakan pada tanggal 18 Mei melalui mekanisme seleksi internal dan perpindahan studi dari Program Studi Teknik Elektro.</span>
+                                                    </div>
+                                                </div>
+                                                <div class="jf-tl-item">
+                                                    <div class="jf-tl-year">2005</div>
+                                                    <div class="jf-tl-dot"></div>
+                                                    <div class="jf-tl-content">
+                                                        <strong data-i18n="grp_jellyfish_timeline_2005_title">SNMPTN Pertama</strong>
+                                                        <span data-i18n="grp_jellyfish_timeline_2005_desc">Penerimaan mahasiswa baru mulai diintegrasikan secara nasional melalui jalur Seleksi Nasional Masuk Perguruan Tinggi Negeri (SNMPTN).</span>
+                                                    </div>
+                                                </div>
+                                                <div class="jf-tl-item">
+                                                    <div class="jf-tl-year">2006</div>
+                                                    <div class="jf-tl-dot"></div>
+                                                    <div class="jf-tl-content">
+                                                        <strong data-i18n="grp_jellyfish_timeline_2006_title">Akreditasi C</strong>
+                                                        <span data-i18n="grp_jellyfish_timeline_2006_desc">Program studi memperoleh peringkat Akreditasi C dari BAN-PT sebagai langkah awal penjaminan mutu akademik secara sistematis.</span>
+                                                    </div>
+                                                </div>
+                                                <div class="jf-tl-item">
+                                                    <div class="jf-tl-year">2008</div>
+                                                    <div class="jf-tl-dot"></div>
+                                                    <div class="jf-tl-content">
+                                                        <strong data-i18n="grp_jellyfish_timeline_2008_title">Kelas Malam & SPOTA</strong>
+                                                        <span data-i18n="grp_jellyfish_timeline_2008_desc">Pembukaan program kelas sore/malam serta pengembangan SPOTA (Sistem Pendukung Outline Tugas Akhir) sebagai aplikasi inovatif perdana program studi.</span>
+                                                    </div>
+                                                </div>
+                                                <div class="jf-tl-item">
+                                                    <div class="jf-tl-year">2016</div>
+                                                    <div class="jf-tl-dot"></div>
+                                                    <div class="jf-tl-content">
+                                                        <strong data-i18n="grp_jellyfish_timeline_2016_title">Akreditasi B</strong>
+                                                        <span data-i18n="grp_jellyfish_timeline_2016_desc">Peningkatan standar mutu akademik yang ditandai dengan pencapaian peringkat Akreditasi B dari BAN-PT.</span>
+                                                    </div>
+                                                </div>
+                                                <div class="jf-tl-item">
+                                                    <div class="jf-tl-year">2017</div>
+                                                    <div class="jf-tl-dot"></div>
+                                                    <div class="jf-tl-content">
+                                                        <strong data-i18n="grp_jellyfish_timeline_2017_title">Nama Resmi Berubah</strong>
+                                                        <span data-i18n="grp_jellyfish_timeline_2017_desc">Perubahan nomenklatur program studi dari Teknik Informatika menjadi Informatika, serta penyesuaian gelar akademik lulusan dari Sarjana Teknik (S.T.) menjadi Sarjana Komputer (S.Kom.).</span>
+                                                    </div>
+                                                </div>
+                                                <div class="jf-tl-item">
+                                                    <div class="jf-tl-year">2019</div>
+                                                    <div class="jf-tl-dot"></div>
+                                                    <div class="jf-tl-content">
+                                                        <strong data-i18n="grp_jellyfish_timeline_2019_title">Angkatan PPAPK Terakhir</strong>
+                                                        <span data-i18n="grp_jellyfish_timeline_2019_desc">Penyelenggaraan penerimaan mahasiswa jalur non-reguler (PPAPK) angkatan terakhir sebelum resmi dinonaktifkan.</span>
+                                                    </div>
+                                                </div>
+                                                <div class="jf-tl-item">
+                                                    <div class="jf-tl-year">2021</div>
+                                                    <div class="jf-tl-dot"></div>
+                                                    <div class="jf-tl-content">
+                                                        <strong data-i18n="grp_jellyfish_timeline_2021_title">EdoXid Lahir</strong>
+                                                        <span data-i18n="grp_jellyfish_timeline_2021_desc">Peluncuran EdoXid, sistem informasi manajemen sidang tugas akhir berbasis digital guna memfasilitasi kebutuhan akademik selama masa pandemi.</span>
+                                                    </div>
+                                                </div>
+                                                <div class="jf-tl-item">
+                                                    <div class="jf-tl-year">2023</div>
+                                                    <div class="jf-tl-dot"></div>
+                                                    <div class="jf-tl-content">
+                                                        <strong data-i18n="grp_jellyfish_timeline_2023_title">Guru Besar Pertama</strong>
+                                                        <span data-i18n="grp_jellyfish_timeline_2023_desc">Pengukuhan Guru Besar pertama Program Studi Informatika UNTAN, yaitu Prof. Dr. Herry Sujaini, S.T., M.T.</span>
+                                                    </div>
+                                                </div>
+                                                <div class="jf-tl-item">
+                                                    <div class="jf-tl-year">2025</div>
+                                                    <div class="jf-tl-dot"></div>
+                                                    <div class="jf-tl-content">
+                                                        <strong data-i18n="grp_jellyfish_timeline_2025_title">Kaprodi Ke-5</strong>
+                                                        <span data-i18n="grp_jellyfish_timeline_2025_desc">Pelantikan Ibu Eva Faja Ripanti, S.Kom., M.M.S.I., Ph.D. sebagai Ketua Program Studi Informatika yang kelima.</span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+
+                    <!-- ===================== C. ANGKA ===================== -->
+                    <section class="jf-section jf-section-light">
+                        <div class="container">
+                            <div class="jf-section-header jf-center">
+                                <span class="jf-badge" data-i18n="grp_jellyfish_stats_badge">Data &amp; Statistik</span>
+                                <h2 class="jf-section-title" data-i18n="grp_jellyfish_stats_title">Informatika UNTAN dalam Angka</h2>
+                                <p class="jf-section-sub">
+                                   <center data-i18n="grp_jellyfish_stats_subtitle">Bukan sekadar angka, ini adalah cerita nyata dari perjalanan panjang Informatika UNTAN.</center>
+                                </p>
+                            </div>
+                            <div class="jf-stats-grid">
+                                <div class="jf-stat-card jf-stat-blue">
+                                    <div class="jf-stat-num">518</div>
+                                    <div class="jf-stat-label" data-i18n="grp_jellyfish_mhs_aktif">Mahasiswa Aktif</div>
+                                    <div class="jf-stat-sub" data-i18n="grp_jellyfish_tahun_akademik">Tahun Akademik 2024/2025</div>
+                                </div>
+                                <div class="jf-stat-card jf-stat-yellow">
+                                    <div class="jf-stat-num">213</div>
+                                    <div class="jf-stat-label" data-i18n="grp_jellyfish_total_alumni">Total Alumni</div>
+                                    <div class="jf-stat-sub" data-i18n="grp_jellyfish_data_total_alumni">Data sejak tahun 2022</div>
+                                </div>
+                                <div class="jf-stat-card jf-stat-green">
+                                    <div class="jf-stat-num" data-i18n="grp_jellyfish_bulan_tunggu"> 6 Bulan</div>
+                                    <div class="jf-stat-label" data-i18n="grp_jellyfish_waktu_tunggu_kerja">Waktu Tunggu Kerja</div>
+                                    <div class="jf-stat-sub" data-i18n="grp_jellyfish_rata_lulusan">Rata-rata lulusan terserap</div>
+                                </div>
+                            </div>
+                            <div class="jf-stats-row2">
+                                <div class="jf-stat-row-card">
+                                    <div class="jf-stat-row-label" data-i18n="grp_jellyfish_dosen_tetap">Dosen Tetap</div>
+                                    <div class="jf-stat-row-num" style="color:#005eb8;">33</div>
+                                    <p style="font-size:0.82rem;color:#475569;margin-top:0.4rem;" data-i18n="grp_jellyfish_desc_dosen">Berpengalaman dan bersertifikasi
+                                        di bidangnya masing-masing.</p>
+                                </div>
+                                <div class="jf-stat-row-card">
+                                    <div class="jf-stat-row-label" data-i18n="grp_jellyfish_jurnal_ilmiah">Jurnal Ilmiah</div>
+                                    <div class="jf-stat-row-num" style="color:#feb401;" data-i18n="grp_jellyfish_jurnal">400+ Jurnal</div>
+                                    <div style="margin-top:0.4rem; font-size:0.82rem; color:#475569;">
+                                        <div style="margin-bottom:0.2rem;">📄 JEPIN &nbsp;·&nbsp; JUSTIN</div>
+                                        <div>📄 JURISTY &nbsp;·&nbsp; JUARA</div>
+                                    </div>
+                                </div>
+                                <div class="jf-stat-row-card">
+                                    <div class="jf-stat-row-label" data-i18n="grp_jellyfish_guru_besar">Guru Besar</div>
+                                    <div class="jf-stat-row-num" style="color:#10b981;" data-i18n="grp_jellyfish_jlh_guru_besar">1 Guru Besar</div>
+                                    <p style="font-size:0.82rem;color:#475569;margin-top:0.4rem;" data-i18n="grp_jellyfish_nama_guru_besar">Prof. Dr. Herry Sujaini, S.T., M.T. — Guru Besar pertama
+                                        Informatika UNTAN (sejak 2023).</p>
+                                </div>
+                            </div>
+                            <div style="text-align:center;margin-top:1.5rem;">
+                                <div class="jf-stat-row-card" style="display:inline-block;padding:1rem 2.5rem;">
+                                    <div class="jf-stat-row-label" data-i18n="grp_jellyfish_rasio_dosen">Rasio Dosen : Mahasiswa</div>
+                                    <div class="jf-stat-row-num" style="color:#7c3aed;font-size:2rem;">1 : 11</div>
+                                    <div style="font-size:0.75rem;color:#94a3b8;" data-i18n="grp_jellyfish_rasio_standar">Memenuhi standar BAN-PT</div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+
+                    <!-- ===================== D. PENCAPAIAN ===================== -->
+                    <section class="jf-section jf-section-white">
+                        <div class="container">
+                            <div class="jf-section-header jf-center">
+                                <span class="jf-badge" data-i18n="grp_jellyfish_achievement_badge">Prestasi</span>
+                                <h2 class="jf-section-title" data-i18n="grp_jellyfish_achievement_title">Pencapaian Membanggakan</h2>
+                                <p class="jf-section-sub">
+                                    <center data-i18n="grp_jellyfish_achievement_subtitle">Dari panggung nasional hingga kolaborasi internasional — Informatika UNTAN hadir,
+                                        bersaing, dan meninggalkan jejak.</center>
+                                </p>
+                            </div>
+                            <div class="jf-filter-tabs">
+                                <button class="jf-tab-btn jf-tab-active" data-filter="all" data-i18n="grp_jellyfish_btn_filter_semua">Semua</button>
+                                <button class="jf-tab-btn" data-filter="kompetisi" data-i18n="grp_jellyfish_btn_filter_kompetisi">Kompetisi</button>
+                                <button class="jf-tab-btn" data-filter="publikasi" data-i18n="grp_jellyfish_btn_filter_publikasi">Publikasi &amp; Pengabdian</button>
+                                <button class="jf-tab-btn" data-filter="aplikasi" data-i18n="grp_jellyfish_btn_filter_aplikasi">Aplikasi Unggulan</button>
+                            </div>
+                            <div class="jf-prestasi-grid" id="prestasi-grid">
+                                <div class="jf-prestasi-card" data-cat="kompetisi">
+                                    <span class="jf-prest-badge jf-prest-nasional" data-i18n="badge_competition">Kompetisi</span>
+                                    <h4 data-i18n="grp_jellyfish_prest_compfest_title">Finalis 10 Besar Competitive Programming Contest (COMPFEST) 17</h4>
+                                    <p data-i18n="grp_jellyfish_prest_compfest_desc">Berhasil meraih posisi 10 besar nasional pada COMPFEST 17, kompetisi pemrograman yang diselenggarakan oleh Universitas Indonesia (UI).</p>
+                                    <div class="jf-prest-meta"><span data-i18n="label_year_2025">📅 2025 </span><span data-i18n="label_finalist">Finalis</span></div>
+                                </div>
+                                <div class="jf-prestasi-card" data-cat="kompetisi">
+                                    <span class="jf-prest-badge jf-prest-nasional" data-i18n="badge_competition">Kompetisi</span>
+                                    <h4 data-i18n="grp_jellyfish_prest_gemastik18_title">Tim Regional Terbaik GEMASTIK XVIII bidang Competitive Programming</h4>
+                                    <p data-i18n="grp_jellyfish_prest_gemastik18_desc">Berhasil menjadi Tim Regional Terbaik pada GEMASTIK XVIII pada bidang Competitive Programming</p>
+                                    <div class="jf-prest-meta"><span>📅 2025</span><span data-i18n="label_team_best">Tim Regional Terbaik</span></div>
+                                </div>
+                                <div class="jf-prestasi-card" data-cat="kompetisi">
+                                    <span class="jf-prest-badge jf-prest-nasional" data-i18n="badge_competition">Kompetisi</span>
+                                    <h4 data-i18n="grp_jellyfish_prest_icpc_title">International Collegiate Programming Contest predikat Honor</h4>
+                                    <p data-i18n="grp_jellyfish_prest_icpc_desc">Tim competitive programming Informatika UNTAN berhasil lolos ke babak regional ICPC Asia Jakarta 2025.</p>
+                                    <div class="jf-prest-meta"><span>📅 2025</span><span data-i18n="label_honor">Honor</span></div>
+                                </div>
+                                <div class="jf-prestasi-card" data-cat="kompetisi">
+                                    <span class="jf-prest-badge jf-prest-nasional" data-i18n="badge_competition">Kompetisi</span>
+                                    <h4 data-i18n="grp_jellyfish_prest_gemastik17_title">Tim Regional Terbaik GEMASTIK XVII bidang Competitive Programming</h4>
+                                    <p data-i18n="grp_jellyfish_prest_gemastik17_desc">Berhasil menjadi Tim Regional Terbaik pada GEMASTIK XVII pada bidang Competitive Programming</p>
+                                    <div class="jf-prest-meta"><span>📅 2024</span><span data-i18n="label_team_best">Tim Regional Terbaik</span></div>
+                                </div>
+                                <div class="jf-prestasi-card" data-cat="kompetisi">
+                                    <span class="jf-prest-badge jf-prest-nasional" data-i18n="badge_competition">Kompetisi</span>
+                                    <h4 data-i18n="grp_jellyfish_prest_mtq_title">LOMBA MTQ TINGKAT PROVINSI KALIMANTAN BARAT PESERTA CABANG TAHFIDZ HADITS GOLONGAN 100 HADIST DENGAN SANAD PUTRI</h4>
+                                    <p data-i18n="grp_jellyfish_prest_mtq_desc">Berpastisipasi pada MTQ tingkat provinsi Kalimantan Barat cabang Tahfidz Hadits 100 Hadits Bersanad Putri</p>
+                                    <div class="jf-prest-meta"><span>📅 2024</span><span data-i18n="label_participant">PESERTA</span></div>
+                                </div>
+                                <div class="jf-prestasi-card" data-cat="publikasi">
+                                    <span class="jf-prest-badge jf-prest-publikasi" data-i18n="badge_publication">Publikasi</span>
+                                    <h4 data-i18n="grp_jellyfish_prest_crm_title">Customer Relationship Management (CRM) System pada Peningkatan Layanan Pengguna E-Learning</h4>
+                                    <p data-i18n="grp_jellyfish_prest_crm_desc">Penulis: EF Ripanti, EE Pratama, F Asrin. Penelitian ini mengkaji penerapan sistem CRM untuk meningkatkan kualitas layanan dan kepuasan pengguna pada platform e-learning.</p>
+                                    <div class="jf-prest-meta"><span>📅 2025</span></div>
+                                </div>
+                                <div class="jf-prestasi-card" data-cat="publikasi">
+                                    <span class="jf-prest-badge jf-prest-publikasi" data-i18n="badge_publication">Publikasi</span>
+                                    <h4 data-i18n="grp_jellyfish_prest_dbscan_title">REKOMENDASI AREA PEMASARAN BAGI PEDAGANG SAYUR KELILING MENGGUNAKAN METODE DBSCAN DAN VISUALISASI HEATMAP</h4>
+                                    <p data-i18n="grp_jellyfish_prest_dbscan_desc">Penulis: DA Nugraha, IY Sholva, EE Pratama. Penelitian ini memanfaatkan metode DBSCAN dan visualisasi heatmap untuk merekomendasikan area pemasaran yang potensial bagi pedagang sayur keliling.</p>
+                                    <div class="jf-prest-meta"><span>📅 2024</span></div>
+                                </div>
+                                <div class="jf-prestasi-card" data-cat="publikasi">
+                                    <span class="jf-prest-badge jf-prest-publikasi" data-i18n="badge_publication">Publikasi</span>
+                                    <h4 data-i18n="grp_jellyfish_prest_kmeans_title">Data mining untuk pengelompokan saham pada sektor energi dengan metode k-means</h4>
+                                    <p data-i18n="grp_jellyfish_prest_kmeans_desc">Penulis: AS Sukamto, W Setiawan, EE Pratama. Penelitian ini menerapkan algoritma K-Means untuk mengelompokkan saham sektor energi berdasarkan karakteristik data yang serupa guna mendukung analisis investasi.</p>
+                                    <div class="jf-prest-meta"><span>📅 2023</span></div>
+                                </div>
+                                <div class="jf-prestasi-card" data-cat="publikasi">
+                                    <span class="jf-prest-badge jf-prest-penghargaan" data-i18n="badge_community">Pengabdian Masyarakat</span>
+                                    <h4 data-i18n="grp_jellyfish_prest_kodingmu_title">KODINGMU PLATFORM BELAJAR COMPUTATIONAL THINKING BAGI SISWA SMAN 1 MEMPAWAH HILIR</h4>
+                                    <p data-i18n="grp_jellyfish_prest_kodingmu_desc">Kegiatan pengabdian yang bertujuan meningkatkan kemampuan berpikir komputasional dan pemecahan masalah siswa melalui pelatihan serta pemanfaatan platform pembelajaran Kodingmu berbasis aktivitas pemrograman yang interaktif dan menyenangkan.</p>
+                                    <div class="jf-prest-meta"><span>📅 2025</span></div>
+                                </div>
+                                <div class="jf-prestasi-card" data-cat="aplikasi">
+                                    <span class="jf-prest-badge" style="background:#e0f2fe;color:#0369a1;" data-i18n="badge_innovation">Inovasi Aplikasi</span>
+                                    <h4 data-i18n="grp_jellyfish_prest_spota_title">SPOTA (2008)</h4>
+                                    <p data-i18n="grp_jellyfish_prest_spota_desc">Sistem Pendukung Outline Tugas Akhir — lahir dari ide dosen, dibangun mahasiswa, masih digunakan hingga kini. Inovasi yang melampaui zamannya.</p>
+                                    <div class="jf-prest-meta"><span>📅 2008</span><span data-i18n="label_still_active">💡 Masih aktif</span></div>
+                                </div>
+                                <div class="jf-prestasi-card" data-cat="aplikasi">
+                                    <span class="jf-prest-badge" style="background:#e0f2fe;color:#0369a1;" data-i18n="badge_innovation">Inovasi Aplikasi</span>
+                                    <h4 data-i18n="grp_jellyfish_prest_edoxid_title">EdoXid (2021)</h4>
+                                    <p data-i18n="grp_jellyfish_prest_edoxid_desc">Sistem pengajuan sidang digital — hadir menjawab pandemi, kini naik kelas ke skala Fakultas MIPA Universitas Tanjungpura.</p>
+                                    <div class="jf-prest-meta"><span>📅 2021</span><span data-i18n="label_faculty_scale">🚀 Skala Fakultas</span></div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+
+                    <!-- ===================== E. STUDY CLUB ===================== -->
+                    <section class="jf-section jf-section-light">
+                        <div class="container">
+                            <div class="jf-section-header jf-center">
+                                <span class="jf-badge" data-i18n="grp_jellyfish_studyclub_badge">Komunitas</span>
+                                <h2 class="jf-section-title" data-i18n="grp_jellyfish_studyclub_title">Study Club</h2>
+                                <p class="jf-section-sub">
+                                    <center data-i18n="grp_jellyfish_studyclub_subtitle">Study Club hadir sebagai wadah pengembangan kompetensi mahasiswa melalui peminatan yang terstruktur dan berbasis komunitas. Setiap study club dirancang untuk memperdalam keahlian spesifik di bidang informatika.</center>
+                                </p>
+                            </div>
+                            <div class="jf-sc-grid">
+                                <div class="jf-sc-card">
+                                    <div class="jf-sc-icon" style="background:#eff6ff;">💻</div>
+                                    <div class="jf-sc-name">ARISE</div>
+                                    <div class="jf-sc-alias">&nbsp; Competitive Programming</div>
+                                    <p data-i18n="grp_jellyfish_arise">Program kerja ini berfokus pada peminatan <em>competitive programming</em>. Mahasiswa dilatih
+                                        untuk mengasah kemampuan pemecahan masalah dan algoritma melalui kompetisi pemrograman
+                                        bergengsi tingkat nasional maupun internasional.</p>
+                                </div>
+                                <div class="jf-sc-card">
+                                    <div class="jf-sc-icon" style="background:#f0fdf4;">🛠️</div>
+                                    <div class="jf-sc-name">Software Development</div>
+                                    <div class="jf-sc-alias">&nbsp; Software Development </div>
+                                    <p data-i18n="grp_jellyfish_software">Berfokus pada peminatan software development. Materi yang diajarkan meliputi fundamental
+                                        dasar web, version control (GitHub), software development life cycle, Entity Relationship
+                                        Diagram, tech-stack, dan use case.</p>
+                                </div>
+                                <div class="jf-sc-card">
+                                    <div class="jf-sc-icon" style="background:#fefce8;">📊</div>
+                                    <div class="jf-sc-name">MINERVA</div>
+                                    <div class="jf-sc-alias">&nbsp; Data Mining</div>
+                                    <p data-i18n="grp_jellyfish_minerva">Berfokus pada peminatan data mining. Mahasiswa akan mendalami teknik penggalian data,
+                                        analisis statistik, dan penerapannya dalam berbagai domain industri untuk menghasilkan
+                                        insight yang bernilai.</p>
+                                </div>
+                            </div>
+                            <div class="jf-sc-cta">
+                                <div class="jf-sc-cta-left">
+                                    <strong data-i18n="grp_jellyfish_join_studyclub">Bergabung dengan Study Club</strong>
+                                    <span data-i18n="grp_jellyfish_studyclub">Study club ini terbuka bagi seluruh mahasiswa aktif Prodi Informatika UNTAN. Pilih
+                                        peminatan yang sesuai dengan minat dan tujuan karirmu.</span>
+                                </div>
+                                <a href="mailto:info@informatika.untan.ac.id" class="jf-cta-button" data-i18n="grp_jellyfish_study_info">Info Lebih Lanjut →</a>
+                            </div>
+                        </div>
+                    </section>
+
+                    <!-- ===================== F. KARIR ===================== -->
+                    <section class="jf-section jf-section-white">
+                        <div class="container">
+                            <div class="jf-karir-layout">
+                                <div class="jf-karir-left">
+                                    <span class="jf-badge" data-i18n="grp_jellyfish_career_badge">Karir</span>
+                                    <h2 class="jf-section-title" data-i18n="grp_jellyfish_career_title">Masa Depan Lulusan Informatika</h2>
+                                    <p class="jf-karir-headline-italic" data-i18n="grp_jellyfish_career_headline">Lulusan Informatika UNTAN bukan hanya pencari kerja — mereka pencipta solusi.</p>
+                                    <p data-i18n="grp_jellyfish_career_desc">Lulusan Prodi Informatika UNTAN diserap secara luas oleh industri teknologi, instansi pemerintah, BUMN, dan startup. Dengan bekal kompetensi digital yang kuat, karir cemerlang menanti di berbagai sektor strategis.</p>
+                                    <div class="jf-karir-other" style="margin-top:1.5rem;">
+                                        <strong data-i18n="grp_jellyfish_bidang_karir">Bidang Karir Lainnya:</strong>
+                                        <div class="jf-chip-wrap" style="margin-top:0.5rem;">
+                                            <span class="jf-chip">IT Project Manager</span>
+                                            <span class="jf-chip">Database Admin</span>
+                                            <span class="jf-chip">Cloud Architect</span>
+                                            <span class="jf-chip">Game Developer</span>
+                                            <span class="jf-chip">Business Intelligence</span>
+                                            <span class="jf-chip">IoT Engineer</span>
+                                            <span class="jf-chip" data-i18n="grp_jellyfish_akademisi">Akademisi / Dosen</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="jf-karir-right">
+                                    <div class="jf-karir-card jf-karir-navy">
+                                        <div class="jf-kc-title">Software Engineer</div>
+                                        <div class="jf-kc-chips">
+                                            <span>Backend</span><span>Frontend</span><span>Mobile Dev</span><span>DevOps</span>
+                                        </div>
+                                        <div class="jf-kc-company">Gojek, Tokopedia, Traveloka, Startup</div>
+                                    </div>
+                                    <div class="jf-karir-card jf-karir-purple">
+                                        <div class="jf-kc-title">Data &amp; AI Specialist</div>
+                                        <div class="jf-kc-chips">
+                                            <span>Data Scientist</span><span>ML Engineer</span><span>AI
+                                                Researcher</span><span>Business Analyst</span>
+                                        </div>
+                                        <div class="jf-kc-company">Bank, BUMN, Fintech</div>
+                                    </div>
+                                    <div class="jf-karir-card jf-karir-green">
+                                        <div class="jf-kc-title">Cybersecurity</div>
+                                        <div class="jf-kc-chips">
+                                            <span>Penetration Tester</span><span>Security Analyst</span><span>Network
+                                                Engineer</span>
+                                        </div>
+                                        <div class="jf-kc-company">BSSN, Kominfo, Perbankan</div>
+                                    </div>
+                                    <div class="jf-karir-card jf-karir-orange">
+                                        <div class="jf-kc-title" data-i18n="grp_jellyfish_wirausaha">Wirausaha Digital</div>
+                                        <div class="jf-kc-chips">
+                                            <span>Founder Startup</span><span>Freelancer</span><span>Digital
+                                                Consultant</span><span>E-commerce</span>
+                                        </div>
+                                        <div class="jf-kc-company" data-i18n="grp_jellyfish_mandiri">Mandiri, Remote Work</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+
+                    <!-- ===================== G. ALUMNI ===================== -->
+                    <section class="jf-section jf-section-light">
+                        <div class="container">
+                            <div class="jf-section-header jf-center">
+                                <span class="jf-badge" data-i18n="grp_jellyfish_alumni_badge">Alumni</span>
+                                <h2 class="jf-section-title" data-i18n="grp_jellyfish_alumni_title">Kisah Sukses Alumni</h2>
+                                <p class="jf-section-sub">
+                                    <center data-i18n="grp_jellyfish_alumni_subtitle">Mereka adalah bukti nyata bahwa Informatika UNTAN adalah batu loncatan menuju karir gemilang — dari Pontianak, ke panggung dunia.</center>
+                                </p>
+                            </div>
+                            <div class="jf-alumni-grid">
+                                <div class="jf-alumni-card">
+                                    <div class="jf-alumni-header">
+                                        <div class="jf-alumni-avatar" style="background:linear-gradient(135deg,#005eb8,#00b5e2);">IF
+                                        </div>
+                                        <div>
+                                            <div class="jf-alumni-name">Izhan Fakhruzi</div>
+                                            <div class="jf-alumni-batch" data-i18n="grp_jellyfish_if_akt1">Informatika, Angkatan 2005</div>
+                                        </div>
+                                    </div>
+                                    <div class="jf-alumni-photo-placeholder">
+                                        <div class="jf-alumni-photo-inner">
+                                            <img src="images\Izhan.jpg" alt="">
+                                        </div>
+                                    </div>
+                                    <div class="jf-alumni-roles">
+                                        <span data-i18n="grp_jellyfish_kerja1">Dosen UM Pontianak</span>
+                                        <span>PhD Candidate Granada</span>
+                                    </div>
+                                    <p data-i18n="grp_jellyfish_alumni_desc1">Alumni Informatika UNTAN angkatan 2005 yang membangun fondasi kuat di bidang komputasi,
+                                        melanjutkan studi magister di Marmara University melalui beasiswa Türkiye Bursları,
+                                        berkarier sebagai dosen di Universitas Muhammadiyah Pontianak, dan kini menempuh doktoral di
+                                        Universidad de Granada dengan fokus pada kecerdasan buatan untuk sistem transportasi cerdas
+                                        dan informatika kesehatan.</p>
+                                    <div class="jf-alumni-divider"></div>
+                                </div>
+                                <div class="jf-alumni-card">
+                                    <div class="jf-alumni-header">
+                                        <div class="jf-alumni-avatar" style="background:linear-gradient(135deg,#7c3aed,#a855f7);">CD
+                                        </div>
+                                        <div>
+                                            <div class="jf-alumni-name">Charles Darwis Hariman</div>
+                                            <div class="jf-alumni-batch" data-i18n="grp_jellyfish_if_akt2">Informatika, Angkatan 2018</div>
+                                        </div>
+                                    </div>
+                                    <div class="jf-alumni-photo-placeholder">
+                                        <div class="jf-alumni-photo-inner">
+                                            <img src="images\Charles.jpg" alt="">
+                                        </div>
+                                    </div>
+                                    <div class="jf-alumni-roles">
+                                        <span>Software Developer</span>
+                                        <span>FinTech Travixy Frankfurt</span>
+                                    </div>
+                                    <p data-i18n="grp_jellyfish_alumni_desc2">Alumni Informatika UNTAN dengan kemampuan kuat dalam pemrograman dan problem solving,
+                                        melanjutkan studi master di Saarland University Jerman dengan riset kecerdasan buatan
+                                        bertaraf internasional, lalu berkarier sebagai Software Developer di perusahaan FinTech
+                                        Travixy Frankfurt, mengembangkan platform pembiayaan yang menggerakkan transaksi bernilai
+                                        miliaran Euro.</p>
+                                    <div class="jf-alumni-divider"></div>
+                                </div>
+                                <div class="jf-alumni-card">
+                                    <div class="jf-alumni-header">
+                                        <div class="jf-alumni-avatar" style="background:linear-gradient(135deg,#059669,#10b981);">DP
+                                        </div>
+                                        <div>
+                                            <div class="jf-alumni-name">Dona Pramana Putra</div>
+                                            <div class="jf-alumni-batch" data-i18n="grp_jellyfish_if_akt3">Informatika, Angkatan 2006</div>
+                                        </div>
+                                    </div>
+                                    <div class="jf-alumni-photo-placeholder">
+                                        <div class="jf-alumni-photo-inner">
+                                            <img src="images\Dona.jpg" alt="">
+                                        </div>
+                                    </div>
+                                    <div class="jf-alumni-roles">
+                                        <span>Product Team</span>
+                                        <span>AI Rudder</span>
+                                    </div>
+                                    <p data-i18n="grp_jellyfish_alumni_desc3">Alumni Informatika UNTAN angkatan 2006 yang kini berkarier sebagai Product Team di AI Rudder,
+                                        berbekal pengalaman pembelajaran berbasis proyek selama kuliah, melanjutkan studi S2 di
+                                        China melalui beasiswa, serta berkontribusi dalam industri kecerdasan buatan dengan
+                                        perspektif global.</p>
+                                    <div class="jf-alumni-divider"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+
+                    <!-- ===================== H. INFRASTRUKTUR ===================== -->
+                    <section class="jf-section jf-section-dark">
+                        <div class="container">
+                            <div class="jf-section-header jf-center">
+                                <span class="jf-badge" data-i18n="grp_jellyfish_infra_badge">Infrastruktur</span>
+                                <h2 class="jf-section-title" style="color:white;" data-i18n="grp_jellyfish_infra_title">Infrastruktur dan Fasilitas</h2>
+                                <p class="jf-section-sub" style="color:white;">
+                                    <center data-i18n="grp_jellyfish_infra_subtitle" style="color:rgba(255, 255, 255, 0.7);">Fasilitas lengkap dan modern untuk mendukung proses belajar, penelitian, dan inovasi mahasiswa.</center>
+                                </p>
+                                <div class="jf-infra-line"></div>
+                            </div>
+                            <div class="jf-infra-grid">
+                                <div class="jf-infra-card" style="background:linear-gradient(135deg,#0ea5e9,#0284c7);">
+                                    <div class="jf-infra-icon">🖥️</div>
+                                    <div class="jf-infra-name">8 Laboratorium</div>
+                                    <p data-i18n="grp_jellyfish_labs">Lab Pemrograman, Jaringan, Multimedia, IoT, AI, Basis Data, Mobile Dev, dan Keamanan Siber —
+                                        ber-AC, High-Speed PC.</p>
+                                    <div class="jf-infra-stat" data-i18n="grp_jellyfish_labs2"><span>8</span> Lab Aktif &amp; Berteknologi</div>
+                                </div>
+                                <div class="jf-infra-card" style="background:linear-gradient(135deg,#7c3aed,#6d28d9);">
+                                    <div class="jf-infra-icon">☁️</div>
+                                    <div class="jf-infra-name">Data Center</div>
+                                    <p data-i18n="grp_jellyfish_data_center">Server on-premise dengan infrastruktur cloud lokal berkapasitas tinggi untuk penelitian dan
+                                        deployment aplikasi.</p>
+                                    <div class="jf-infra-stat"><span>99.9%</span> Uptime · Redundant</div>
+                                </div>
+                                <div class="jf-infra-card" style="background:linear-gradient(135deg,#059669,#047857);">
+                                    <div class="jf-infra-icon">🚀</div>
+                                    <div class="jf-infra-name">IFUNTANHUB</div>
+                                    <p data-i18n="grp_jellyfish_ifuntanhub">Platform PaaS eksklusif mahasiswa untuk deploy aplikasi, hosting proyek, akses GPU computing,
+                                        dan kolaborasi tim.</p>
+                                    <div class="jf-infra-stat" data-i18n="grp_jellyfish_free"><span>Gratis</span> · GPU Access</div>
+                                </div>
+                                <div class="jf-infra-card" style="background:linear-gradient(135deg,#d97706,#b45309);">
+                                    <div class="jf-infra-icon">📚</div>
+                                    <div class="jf-infra-name">E-Resources</div>
+                                    <p data-i18n="grp_jellyfish_resources">Akses jurnal internasional Scopus, IEEE Xplore, ACM Digital Library, Springer, dan database
+                                        ilmiah lainnya.</p>
+                                    <div class="jf-infra-stat"><span>IEEE · Scopus · ACM</span></div>
+                                </div>
+                            </div>
+                            <div class="jf-license-bar">
+                                <span class="jf-lic-label" data-i18n="grp_jellyfish_license">Lisensi Perangkat Lunak Tersedia:</span>
+                                <div class="jf-lic-chips">
+                                    <span>Microsoft Office 365</span>
+                                    <span>JetBrains IDE</span>
+                                    <span>Adobe Creative Cloud</span>
+                                    <span>GitHub Enterprise</span>
+                                    <span>Figma Education</span>
+                                    <span>MATLAB</span>
+                                    <span>Cisco Packet Tracer</span>
+                                    <span>AWS Academy</span>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+
+                    <!-- ===================== I. MITRA ===================== -->
+                    <section class="jf-section jf-section-white">
+                        <div class="container">
+                            <div class="jf-section-header jf-center">
+                                <span class="jf-badge" data-i18n="grp_jellyfish_partner_badge">Kerjasama</span>
+                                <h2 class="jf-section-title" data-i18n="grp_jellyfish_partner_title">Mitra Strategis Informatika UNTAN</h2>
+                                <p class="jf-section-sub">
+                                    <center data-i18n="grp_jellyfish_partner_subtitle">Dibangun di atas kepercayaan dan kolaborasi dengan perusahaan teknologi, instansi
+                                        pemerintah, dan lembaga pendidikan terkemuka.</center>
+                                </p>
+                            </div>
+
+                            <div class="jf-mitra-group-title" data-i18n="grp_jellyfish_industri">Industri &amp; Swasta</div>
+                            <div class="jf-mitra-grid">
+                                <div class="jf-mitra-card">
+                                    <div class="jf-mitra-logo"></div>
+                                    <div class="jf-mitra-name">PT. Indosat Ooredoo</div>
+                                </div>
+                                <div class="jf-mitra-card">
+                                    <div class="jf-mitra-logo"></div>
+                                    <div class="jf-mitra-name">PT. PLN Nusantara</div>
+                                </div>
+                            </div>
+
+                            <div class="jf-mitra-group-title" data-i18n="grp_jellyfish_pemerintah">Instansi Pemerintah</div>
+                            <div class="jf-mitra-grid jf-mitra-grid-gov" style="grid-template-columns:repeat(6,1fr)">
+                                <div class="jf-mitra-card">
+                                    <div class="jf-mitra-name">Diskominfo Kalbar</div>
+                                </div>
+                                <div class="jf-mitra-card">
+                                    <div class="jf-mitra-name">POLDA Kalbar</div>
+                                </div>
+                                <div class="jf-mitra-card">
+                                    <div class="jf-mitra-name">Bappeda Sambas</div>
+                                </div>
+                                <div class="jf-mitra-card">
+                                    <div class="jf-mitra-name">Bappeda Sintang</div>
+                                </div>
+                                <div class="jf-mitra-card">
+                                    <div class="jf-mitra-name">Bappeda Bengkayang</div>
+                                </div>
+                                <div class="jf-mitra-card">
+                                    <div class="jf-mitra-name">BKPSDM</div>
+                                </div>
+                                <div class="jf-mitra-card">
+                                    <div class="jf-mitra-name">BPBD Sintang</div>
+                                </div>
+                                <div class="jf-mitra-card">
+                                    <div class="jf-mitra-name">BKD Pontianak</div>
+                                </div>
+                                <div class="jf-mitra-card">
+                                    <div class="jf-mitra-name">Disperkim Singkawang</div>
+                                </div>
+                            </div>
+
+                            <div class="jf-mitra-group-title" data-i18n="grp_jellyfish_perguruan_tinggi">Perguruan Tinggi &amp; Lembaga Riset</div>
+                            <div class="jf-mitra-grid" style="grid-template-columns:repeat(6,1fr);">
+                                <div class="jf-mitra-card">
+                                    <div class="jf-mitra-name">UNIMAS Malaysia</div>
+                                </div>
+                                <div class="jf-mitra-card">
+                                    <div class="jf-mitra-name">UUM Malaysia</div>
+                                </div>
+                                <div class="jf-mitra-card">
+                                    <div class="jf-mitra-name">UCS Sarawak</div>
+                                </div>
+                                <div class="jf-mitra-card">
+                                    <div class="jf-mitra-name">UTEM Malaysia</div>
+                                </div>
+                                <div class="jf-mitra-card">
+                                    <div class="jf-mitra-name">IPB Indonesia</div>
+                                </div>
+                                <div class="jf-mitra-card">
+                                    <div class="jf-mitra-name">Polnep</div>
+                                </div>
+                                <div class="jf-mitra-card">
+                                    <div class="jf-mitra-name">Poltekkes Pontianak</div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+
+                    <!-- ===================== K. CTA / KONTAK ===================== -->
+                    <section class="jf-section jf-cta-section" id="kontak">
+                        <div class="container jf-cta-inner">
+                            <div class="jf-cta-left">
+                                <span class="jf-badge" data-i18n="grp_jellyfish_cta_badge">Bergabung Bersama Kami</span>
+                                <h2 class="jf-cta-title" data-i18n="grp_jellyfish_cta_title">Mulai Perjalanan Digital Anda <span class="jf-cta-highlight" data-i18n="grp_jellyfish_cta_highlight">Bersama Kami</span></h2>
+                                <p data-i18n="grp_jellyfish_cta_desc">Jadilah bagian dari komunitas informatika terbaik di Kalimantan Barat. Daftarkan diri Anda sekarang dan wujudkan impian karir teknologi bersama Informatika UNTAN.</p>
+                                <div class="jf-cta-btns">
+                                    <a href="#" class="jf-btn-yellow" data-i18n="grp_jellyfish_btn_registration">Daftar Mahasiswa Baru</a>
+                                    <a href="https://wa.me/6285171655161" class="jf-btn-green" data-i18n="grp_jellyfish_btn_whatsapp">💬 Chat WhatsApp</a>
+                                </div>
+                            </div>
+                            <div class="jf-cta-right">
+                                <div class="jf-kontak-card">
+                                    <div class="jf-kontak-title" data-i18n="grp_jellyfish_info_kontak">Informasi Kontak</div>
+                                    <div class="jf-kontak-list">
+                                        <div class="jf-kontak-item">
+                                            <div class="jf-kontak-icon">📍</div>
+                                            <div class="jf-kontak-info">
+                                                <div class="jf-kontak-label" data-i18n="grp_jellyfish_alamat">Alamat</div>
+                                                <div class="jf-kontak-val">Jl. Prof. Dr. H. Hadari Nawawi, Bansir Laut, Kec.
+                                                    Pontianak Tenggara, Kota Pontianak, Kalimantan Barat 78124</div>
+                                            </div>
+                                        </div>
+                                        <div class="jf-kontak-item">
+                                            <div class="jf-kontak-icon">✉️</div>
+                                            <div class="jf-kontak-info">
+                                                <div class="jf-kontak-label">Email</div>
+                                                <div class="jf-kontak-val">info@informatika.untan.ac.id</div>
+                                            </div>
+                                        </div>
+                                        <div class="jf-kontak-item">
+                                            <div class="jf-kontak-icon">💬</div>
+                                            <div class="jf-kontak-info">
+                                                <div class="jf-kontak-label">WhatsApp</div>
+                                                <div class="jf-kontak-val">+62 851-7165-5161<br><small data-i18n="grp_jellyfish_tanggal">Senin – Jumat, 08.00 – 16.00
+                                                        WIB</small></div>
+                                            </div>
+                                        </div>
+                                        <div class="jf-kontak-item">
+                                            <div class="jf-kontak-icon">📞</div>
+                                            <div class="jf-kontak-info">
+                                                <div class="jf-kontak-label" data-i18n="grp_jellyfish_telepon">Telepon / Fax</div>
+                                                <div class="jf-kontak-val">+62(561) 739637</div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+
+                </main>
                 <!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->
             </div>
         </div>
@@ -1332,7 +2045,7 @@
         }
     })();
 </script>
-
+<script src="script.js"></script>
 <script src="../../assets/global/localization.js"></script>
 </body>
 </html>

groups/Jellyfish.Corp/script.js

@@ -0,0 +1,92 @@
+// ===== SCROLL REVEAL — jf-* cards di dalam #assignment-body =====
+function initScrollReveal() {
+    const body = document.getElementById('assignment-body');
+    if (!body) return;
+
+    const targets = body.querySelectorAll(
+        '.jf-stat-card, .jf-stat-row-card, .jf-prestasi-card, ' +
+        '.jf-sc-card, .jf-karir-card, .jf-alumni-card, ' +
+        '.jf-infra-card, .jf-mitra-card, .jf-tl-item, .jf-kontak-item'
+    );
+    targets.forEach(el => {
+        el.style.opacity = '0';
+        el.style.transform = 'translateY(24px)';
+        el.style.transition = 'opacity 0.55s ease, transform 0.55s ease';
+    });
+
+    const obs = new IntersectionObserver((entries) => {
+        entries.forEach((entry, i) => {
+            if (!entry.isIntersecting) return;
+            setTimeout(() => {
+                entry.target.style.opacity = '1';
+                entry.target.style.transform = 'translateY(0)';
+            }, i * 70);
+            obs.unobserve(entry.target);
+        });
+    }, { threshold: 0.08 });
+
+    targets.forEach(el => obs.observe(el));
+}
+
+// ===== PRESTASI FILTER — tab filter di dalam #assignment-body =====
+function initPrestasiFilter() {
+    const body = document.getElementById('assignment-body');
+    if (!body) return;
+
+    const tabs  = body.querySelectorAll('.jf-tab-btn');
+    const cards = body.querySelectorAll('#prestasi-grid .jf-prestasi-card');
+    if (!tabs.length) return;
+
+    tabs.forEach(tab => {
+        tab.addEventListener('click', () => {
+            tabs.forEach(t => t.classList.remove('jf-tab-active'));
+            tab.classList.add('jf-tab-active');
+            const filter = tab.dataset.filter;
+            cards.forEach(card => {
+                const show = filter === 'all' || card.dataset.cat === filter;
+                card.style.display = show ? '' : 'none';
+                if (show) card.style.animation = 'jfFadeIn 0.35s ease forwards';
+            });
+        });
+    });
+}
+
+// ===== ANIMATED COUNTER — .jf-stat-num di dalam #assignment-body =====
+function initCounters() {
+    const body = document.getElementById('assignment-body');
+    if (!body) return;
+
+    const obs = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (!entry.isIntersecting) return;
+            const el  = entry.target;
+            const raw = el.textContent.trim();
+            const num = parseFloat(raw.replace(/[^0-9.]/g, ''));
+            if (isNaN(num) || num === 0) return;
+
+            const prefix = raw.match(/^[^0-9]*/)[0];
+            const suffix = raw.match(/[^0-9.]*$/)[0];
+
+            let start = 0;
+            const step = 16;
+            const increment = num / (1400 / step);
+            const timer = setInterval(() => {
+                start = Math.min(start + increment, num);
+                const display = Number.isInteger(num)
+                    ? Math.floor(start).toLocaleString('id-ID')
+                    : start.toFixed(1);
+                el.textContent = prefix + display + suffix;
+                if (start >= num) clearInterval(timer);
+            }, step);
+
+            obs.unobserve(el);
+        });
+    }, { threshold: 0.5 });
+
+    body.querySelectorAll('.jf-stat-num').forEach(el => obs.observe(el));
+}
+
+// ===== INIT =====
+initScrollReveal();
+initPrestasiFilter();
+initCounters();

groups/RODA/index.html

@@ -78,7 +78,9 @@
             dashboardRuntimeFetch: 'always',
             dashboardTargetUrl: 'https://dashboard.informatika.untan.ac.id/index.php?penelitian',
             dashboardProxyTemplates: [
-                'https://api.codetabs.com/v1/proxy?quest={{url}}'
+                'https://api.codetabs.com/v1/proxy?quest={{url}}',
+                'https://api.allorigins.win/get?url={{url}}&ts={{ts}}',
+                'https://thingproxy.freeboard.io/fetch/{{rawUrl}}'
             ]
         };
     </script>
@@ -1631,6 +1633,22 @@
             updateStatPub(newData.length);
         }
 
+        async function fetchProxyRows(proxyUrl) {
+            const controller = new AbortController();
+            const timeoutId = setTimeout(() => controller.abort(), 15000);
+
+            try {
+                const response = await fetch(proxyUrl, { signal: controller.signal });
+                if (!response.ok) throw new Error(`HTTP_ERROR_${response.status}`);
+
+                const responseData = await response.text();
+                const html = extractDashboardHtml(responseData);
+                return parseDashboardRows(html);
+            } finally {
+                clearTimeout(timeoutId);
+            }
+        }
+
         async function fetchDashboardData() {
             const grid = document.getElementById('riset-grid');
             if (grid) {
@@ -1681,28 +1699,15 @@
                 return;
             }
 
-            for (const getProxyUrl of proxyServers) {
-                const controller = new AbortController();
-                const timeoutId = setTimeout(() => controller.abort(), 15000);
-
-                try {
-                    const proxyUrl = getProxyUrl(targetUrl);
-
-                    const response = await fetch(proxyUrl, { signal: controller.signal });
-                    clearTimeout(timeoutId);
-
-                    if (!response.ok) throw new Error(`HTTP_ERROR_${response.status}`);
-
-                    const responseData = await response.text();
-                    const html = extractDashboardHtml(responseData);
-                    const rows = parseDashboardRows(html);
-                    applyDashboardRows(rows);
-                    return; // Berhasil! Keluar dari loop
-                } catch (error) {
-                    clearTimeout(timeoutId);
-                    lastError = error;
-                    // Lanjut ke proxy berikutnya...
-                }
+            try {
+                const proxyUrls = proxyServers.map((getProxyUrl) => getProxyUrl(targetUrl));
+                const rows = await Promise.any(proxyUrls.map((proxyUrl) => fetchProxyRows(proxyUrl)));
+                applyDashboardRows(rows);
+                return;
+            } catch (error) {
+                lastError = error instanceof AggregateError && error.errors?.length
+                    ? error.errors[error.errors.length - 1]
+                    : error;
             }
 
             // Jika semua proxy gagal

vite.config.js

@@ -6,8 +6,13 @@ import { defineConfig } from 'vite';
 const root = path.dirname(fileURLToPath(import.meta.url));
 const excludedDirs = new Set(['.git', 'dist', 'node_modules']);
 const rodaDashboardUrl = 'https://dashboard.informatika.untan.ac.id/index.php?penelitian';
+const rodaDashboardCacheTtlMs = 5 * 60 * 1000;
+const dashboardRequestHeaders = {
+  'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0 Safari/537.36',
+};
 
 let rodaDashboardHtmlCache;
+let rodaDashboardDevCache = { html: '', timestamp: 0 };
 
 function collectHtmlInputs(dir) {
   const inputs = {};
@@ -50,33 +55,37 @@ function copyStaticAssets() {
   };
 }
 
-async function fetchRodaDashboardHtml() {
-  if (rodaDashboardHtmlCache !== undefined) {
-    return rodaDashboardHtmlCache;
-  }
-
+async function requestRodaDashboardHtml() {
   const controller = new AbortController();
   const timeoutId = setTimeout(() => controller.abort(), 12000);
 
   try {
     const response = await fetch(rodaDashboardUrl, {
       signal: controller.signal,
-      headers: {
-        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0 Safari/537.36',
-      },
+      headers: dashboardRequestHeaders,
     });
 
     if (!response.ok) {
       throw new Error(`HTTP ${response.status}`);
     }
 
-    rodaDashboardHtmlCache = await response.text();
+    return response.text();
+  } finally {
+    clearTimeout(timeoutId);
+  }
+}
+
+async function fetchRodaDashboardHtml() {
+  if (rodaDashboardHtmlCache !== undefined) {
+    return rodaDashboardHtmlCache;
+  }
+
+  try {
+    rodaDashboardHtmlCache = await requestRodaDashboardHtml();
   } catch (error) {
     const message = error instanceof Error ? error.message : String(error);
     console.warn(`[roda-dashboard] Build-time dashboard fetch skipped: ${message}`);
     rodaDashboardHtmlCache = '';
-  } finally {
-    clearTimeout(timeoutId);
   }
 
   return rodaDashboardHtmlCache;
@@ -115,8 +124,61 @@ function embedRodaDashboardData() {
   };
 }
 
+function serveRodaDashboardApi() {
+  return {
+    name: 'serve-roda-dashboard-api',
+    configureServer(server) {
+      server.middlewares.use(async (req, res, next) => {
+        const requestUrl = new URL(req.url || '/', 'http://localhost');
+        if (requestUrl.pathname !== '/api/dashboard') {
+          next();
+          return;
+        }
+
+        if (req.method !== 'GET' && req.method !== 'HEAD') {
+          res.writeHead(405, { 'Content-Type': 'text/plain; charset=utf-8' });
+          res.end('METHOD_NOT_ALLOWED');
+          return;
+        }
+
+        const now = Date.now();
+        try {
+          let html = rodaDashboardDevCache.html;
+          let cacheStatus = 'HIT';
+
+          if (!html || (now - rodaDashboardDevCache.timestamp) >= rodaDashboardCacheTtlMs) {
+            html = await requestRodaDashboardHtml();
+            rodaDashboardDevCache = { html, timestamp: Date.now() };
+            cacheStatus = 'MISS';
+          }
+
+          res.writeHead(200, {
+            'Content-Type': 'text/html; charset=utf-8',
+            'X-Cache': cacheStatus,
+          });
+          res.end(req.method === 'HEAD' ? '' : html);
+        } catch (error) {
+          if (rodaDashboardDevCache.html) {
+            res.writeHead(200, {
+              'Content-Type': 'text/html; charset=utf-8',
+              'X-Cache': 'STALE',
+            });
+            res.end(req.method === 'HEAD' ? '' : rodaDashboardDevCache.html);
+            return;
+          }
+
+          const message = error instanceof Error ? error.message : String(error);
+          console.warn(`[roda-dashboard] Dev dashboard fetch failed: ${message}`);
+          res.writeHead(502, { 'Content-Type': 'text/plain; charset=utf-8' });
+          res.end('DASHBOARD_FETCH_FAILED');
+        }
+      });
+    },
+  };
+}
+
 export default defineConfig({
-  plugins: [embedRodaDashboardData(), copyStaticAssets()],
+  plugins: [serveRodaDashboardApi(), embedRodaDashboardData(), copyStaticAssets()],
   build: {
     rollupOptions: {
       input: collectHtmlInputs(root),