merge upstream

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

groups/ACAAB/index.html

@@ -1185,9 +1185,9 @@
                                 <span class="acaab-fade-in"
                                     style="display:inline-block;background:#feb401;color:#0f172a;font-size:0.65rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;padding:0.2rem 0.625rem;margin-bottom:0.75rem;"
                                     data-i18n="grp_acaab_hero_badge">MAHASISWA &amp; PRESTASI</span>
-                                <h1 class="acaab-fade-in"
+                                <h2 class="acaab-fade-in"
                                     style="font-size:clamp(1.875rem,3.5vw,2.5rem);font-weight:700;line-height:1.2;letter-spacing:-0.01em;margin:0 0 0.75rem;font-family:'Roboto Condensed',sans-serif;"
-                                    data-i18n="grp_acaab_hero_title">Sorotan dan Prestasi Karya Mahasiswa</h1>
+                                    data-i18n="grp_acaab_hero_title">Sorotan dan Prestasi Karya Mahasiswa</h2>
                                 <p class="acaab-fade-in"
                                     style="color:rgba(255,255,255,0.7);font-size:0.9375rem;line-height:1.7;margin:0;"
                                     data-i18n="grp_acaab_hero_desc">Temukan pencapaian luar biasa mahasiswa Informatika
@@ -1201,6 +1201,8 @@
                                 </div>
                                 <div style="position:relative;">
                                     <img src="./hero.png" alt="Mahasiswa Informatika UNTAN"
+                                        width="612" height="407"
+                                        fetchpriority="high"
                                         style="position:relative;z-index:10;width:100%;max-width:320px;height:auto;object-fit:contain;opacity:0.95;filter:drop-shadow(0 15px 35px rgba(0,0,0,0.25));transition:transform 0.5s;"
                                         onerror="this.style.display='none'">
                                     <!-- Gradient fades over image -->
@@ -1247,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;">
+                                        <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>
+                                            data-i18n="grp_acaab_stats_label_ach">Prestasi<br>Mahasiswa</div>
                                     </div>
                                     <!-- Internasional -->
                                     <div style="flex:1;text-align:center;padding:0 0.15rem;">
@@ -1289,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;">
+                                        <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>
+                                            data-i18n="grp_acaab_stats_label_proj">Proyek<br>Mahasiswa</div>
                                     </div>
                                 </div>
                             </div>
@@ -1339,11 +1341,11 @@
                         </div>
                         <!-- Row 3: Dropdowns -->
                         <div style="display:flex;flex-wrap:wrap;gap:0.625rem;">
-                            <select id="acaab-ach-level"
+                            <select id="acaab-ach-level" aria-label="Filter tingkat prestasi"
                                 style="flex:1;min-width:130px;background:#f8fafc;color:#334155;font-size:0.8rem;font-weight:700;border-radius:0.375rem;padding:0.5rem 0.75rem;border:1px solid #e2e8f0;cursor:pointer;"></select>
-                            <select id="acaab-ach-cat"
+                            <select id="acaab-ach-cat" aria-label="Filter kategori prestasi"
                                 style="flex:1;min-width:130px;background:#f8fafc;color:#334155;font-size:0.8rem;font-weight:700;border-radius:0.375rem;padding:0.5rem 0.75rem;border:1px solid #e2e8f0;cursor:pointer;"></select>
-                            <select id="acaab-ach-year"
+                            <select id="acaab-ach-year" aria-label="Filter tahun prestasi"
                                 style="flex:1;min-width:120px;background:#f8fafc;color:#334155;font-size:0.8rem;font-weight:700;border-radius:0.375rem;padding:0.5rem 0.75rem;border:1px solid #e2e8f0;cursor:pointer;"></select>
                         </div>
                     </div>
@@ -1405,9 +1407,9 @@
                                 placeholder="Cari karya..." data-i18n-placeholder="grp_acaab_proj_search">
                         </div>
                         <div style="display:flex;flex-wrap:wrap;gap:0.625rem;">
-                            <select id="acaab-proj-cat"
+                            <select id="acaab-proj-cat" aria-label="Filter kategori portofolio"
                                 style="flex:1;min-width:130px;background:#f8fafc;color:#334155;font-size:0.8rem;font-weight:700;border-radius:0.375rem;padding:0.5rem 0.75rem;border:1px solid #e2e8f0;cursor:pointer;"></select>
-                            <select id="acaab-proj-year"
+                            <select id="acaab-proj-year" aria-label="Filter tahun portofolio"
                                 style="flex:1;min-width:120px;background:#f8fafc;color:#334155;font-size:0.8rem;font-weight:700;border-radius:0.375rem;padding:0.5rem 0.75rem;border:1px solid #e2e8f0;cursor:pointer;"></select>
                         </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('calendar-alt', t('grp_acaab_modal_year'), String(a.year))}
-                ${infoRow('award', 'Kompetisi', a.competition)}
+                ${infoRow('award', t('grp_acaab_modal_competition'), a.competition)}
-                ${infoRow('tag', 'Bidang', a.category)}
+                ${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('calendar-alt', t('grp_acaab_modal_year'), String(p.year))}
-                ${infoRow('tag', 'Bidang', p.categories.join(', '))}
+                ${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

@@ -12,11 +12,14 @@ Dokumentasi ini dibuat untuk memudahkan pengembang atau pengguna berikutnya dala
    - Data SOP: `groups/C4A/data/data-sop.json`
    - Data FAQ: `groups/C4A/data/data-faq.json`
 
-2. **Ikon FontAwesome (v4)**:
+2. **Dukungan Bilingual (ID/EN)**:
+   Semua teks konten yang ditampilkan ke pengguna mendukung dua bahasa. Anda perlu menggunakan objek dengan properti `id` (Bahasa Indonesia) dan `en` (Bahasa Inggris) pada setiap field teks. Jika properti `en` tidak diisi atau data masih berupa *string* biasa, sistem akan otomatis menggunakan Bahasa Indonesia sebagai *fallback*.
+
+3. **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**:
+4. **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.
 
 ---
@@ -30,21 +33,39 @@ Silakan salin-tempel (copy-paste) format di bawah ini ke dalam array JSON yang s
 {
     "id": 3,
     "name": "Nama Staf Beserta Gelar",
-    "role": "Peran / Jabatan Staf",
+    "role": {
+        "id": "Peran / Jabatan Staf",
+        "en": "Staff Role / Title"
+    },
     "image": "assets/images/nama-file-foto.png",
-    "location": "Lokasi Ruang Kerja / Kantor Staf",
+    "location": {
+        "id": "Lokasi Ruang Kerja / Kantor Staf",
+        "en": "Staff Workspace / Office Location"
+    },
     "contact_consent": true,
     "phone": "628xxxxxxxxxx",
     "schedule": [
         {
-            "day": "Hari Kerja (contoh: Senin – Jumat)",
+            "day": {
-            "time": "Jam Kerja (contoh: 07.30–16.00 WIB)",
+                "id": "Hari Kerja (contoh: Senin – Jumat)",
-            "break": "Jam Istirahat (contoh: istirahat 12.00–13.00 WIB)"
+                "en": "Work Days (e.g., Monday – Friday)"
+            },
+            "time": "07.30–16.00 WIB",
+            "break": {
+                "id": "Jam Istirahat (contoh: istirahat 12.00–13.00 WIB)",
+                "en": "Break Time (e.g., break 12.00–13.00 WIB)"
+            }
         }
     ],
     "tasks": [
-        "Tugas dan tanggung jawab utama 1",
+        {
-        "Tugas dan tanggung jawab utama 2"
+            "id": "Tugas dan tanggung jawab utama 1",
+            "en": "Main task and responsibility 1"
+        },
+        {
+            "id": "Tugas dan tanggung jawab utama 2",
+            "en": "Main task and responsibility 2"
+        }
     ]
 }
 ```
@@ -57,21 +78,33 @@ Silakan salin-tempel (copy-paste) format di bawah ini ke dalam array JSON yang s
     "tab_number": 9,
     "category": "akademik", 
     "icon": "fa-file-text",
-    "title": "Judul Lengkap SOP",
+    "title": {
-    "description": "Deskripsi singkat mengenai SOP ini.",
+        "id": "Judul Lengkap SOP",
-    "purpose": "Tujuan dibuatnya standar operasional prosedur ini.",
+        "en": "Full SOP Title"
+    },
+    "description": {
+        "id": "Deskripsi singkat mengenai SOP ini.",
+        "en": "Brief description of this SOP."
+    },
+    "purpose": {
+        "id": "Tujuan dibuatnya standar operasional prosedur ini.",
+        "en": "The purpose of creating this standard operating procedure."
+    },
     "requirements": [
-        "Persyaratan administratif/akademik 1",
+        { "id": "Persyaratan administratif/akademik 1", "en": "Administrative/academic requirement 1" },
-        "Persyaratan administratif/akademik 2"
+        { "id": "Persyaratan administratif/akademik 2", "en": "Administrative/academic requirement 2" }
     ],
     "procedures": [
-        "Langkah alur prosedur ke-1",
+        { "id": "Langkah alur prosedur ke-1", "en": "Procedure flow step 1" },
-        "Langkah alur prosedur ke-2"
+        { "id": "Langkah alur prosedur ke-2", "en": "Procedure flow step 2" }
     ],
     "staff_responsible": [
-        "👤 Staf Administrasi Informatika"
+        "👤 Staf Administrasi Informatika / Informatics Administrative Staff"
     ],
-    "additional_info": "Informasi tambahan penting."
+    "additional_info": {
+        "id": "Informasi tambahan penting.",
+        "en": "Important additional information."
+    }
 }
 ```
 *Catatan: Properti `category` bernilai antara `"akademik"` atau `"praktikum"`. Properti `staff_responsible` dan `additional_info` bersifat opsional.*
@@ -80,7 +113,13 @@ Silakan salin-tempel (copy-paste) format di bawah ini ke dalam array JSON yang s
 ```json
 {
     "id": 11,
-    "question": "Pertanyaan yang sering diajukan?",
+    "question": {
-    "answer": "Jawaban dari pertanyaan tersebut. Boleh menggunakan tag HTML seperti <strong>tebal</strong>."
+        "id": "Pertanyaan yang sering diajukan?",
+        "en": "Frequently asked question?"
+    },
+    "answer": {
+        "id": "Jawaban dari pertanyaan tersebut. Boleh menggunakan tag HTML seperti <strong>tebal</strong>.",
+        "en": "Answer to the question. HTML tags like <strong>bold</strong> can be used."
+    }
 }
 ```

groups/C4A/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="id" class="scroll-smooth">
 
 <head>
@@ -1163,7 +1163,7 @@
                         <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 />
+                            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

groups/C4A/js/ui.js

@@ -32,7 +32,7 @@ function loc(field) {
         const lang = getLang();
         return field[lang] || field['id'] || '';
     }
-    return field;
+    return String(field);
 }
 
 /**
@@ -127,7 +127,7 @@ export function renderStaffCards(staffs) {
         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>` +
+            `<span class="s-time">${loc(sched.time)} <span class="s-break">| ${loc(sched.break)}</span></span>` +
             `</div>`
         ).join('');
 
@@ -149,7 +149,7 @@ export function renderStaffCards(staffs) {
           <img src="${image}" alt="${name}" onerror="this.style.display='none'"/>
         </div>
         <div>
-          <div class="staff-name">${name}</div>
+          <div class="staff-name">${loc(name)}</div>
           <div class="staff-role">${roleText}</div>
         </div>
       </div>
@@ -283,14 +283,13 @@ function buildSopModalContent(sop) {
 
     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('')
+        ? staffResponsible.map(staffName => `<span class="sop-staff-pill">${loc(staffName)}</span>`).join('')
         : '';
     const staffBlockHTML = hasStaff
         ? `<div class="sop-staff-block">
@@ -353,15 +352,19 @@ export function renderSopCards(sops) {
     // simpan data global di element agar bisa diakses filter/search
     container._sopData = sops;
 
+    const emptyState = document.getElementById('sop-empty-state');
+
     // 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);
+        if (emptyState) emptyState.style.display = 'none';
         return;
     }
 
     container.innerHTML = sops.map(buildSopCard).join('');
     updateResultInfo(sops.length, sops.length);
+    if (emptyState) emptyState.style.display = 'none';
 }
 
 /** Update teks info jumlah hasil */
@@ -405,7 +408,12 @@ export function applySopFilter() {
     });
 
     const emptyState = document.getElementById('sop-empty-state');
-    if (emptyState) emptyState.style.display = visibleCount === 0 ? 'flex' : 'none';
+    if (emptyState) {
+        // Tampilkan "SOP tidak ditemukan" HANYA jika memang ada data SOP tetapi hasil filter 0.
+        // Jika data SOP memang kosong (tidak ada card sama sekali di data source), sembunyikan.
+        const hasData = container._sopData && container._sopData.length > 0;
+        emptyState.style.display = (hasData && visibleCount === 0) ? 'flex' : 'none';
+    }
 
     updateResultInfo(visibleCount, cards.length);
 }

groups/HarusSelesaiKP/icons/book-filled.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.375 1.25C3.71196 1.25 3.07607 1.51339 2.60723 1.98223C2.13839 2.45107 1.875 3.08696 1.875 3.75V11.25C1.875 11.913 2.13839 12.5489 2.60723 13.0178C3.07607 13.4866 3.71196 13.75 4.375 13.75H13.125V1.25H4.375ZM6.875 3.125H11.25V4.375H6.875V3.125ZM3.125 11.25C3.125 10.9185 3.2567 10.6005 3.49112 10.3661C3.72554 10.1317 4.04348 10 4.375 10H11.875V12.5H4.375C4.04348 12.5 3.72554 12.3683 3.49112 12.1339C3.2567 11.8995 3.125 11.5815 3.125 11.25Z" fill="black"/>
+</svg>

groups/HarusSelesaiKP/icons/building-home.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.448 0.105966C15.3089 0.0362835 15.1555 0 15 0C14.8445 0 14.6911 0.0362835 14.552 0.105966L2.552 6.10597L3.448 7.89397L15 2.11997L26.552 7.89597L27.448 6.10797L15.448 0.105966ZM28 12H30V9.99997H0V12H2V28H0V30H8V16H18V30H30V28H28V12Z" fill="black"/>
+<path d="M16 30V18H10V30H16Z" fill="black"/>
+</svg>

groups/HarusSelesaiKP/icons/building.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.7498 10H11.3332V11.3333H12.7498M12.7498 7.33333H11.3332V8.66667H12.7498M14.1665 12.6667H8.49984V11.3333H9.9165V10H8.49984V8.66667H9.9165V7.33333H8.49984V6H14.1665M7.08317 4.66667H5.6665V3.33333H7.08317M7.08317 7.33333H5.6665V6H7.08317M7.08317 10H5.6665V8.66667H7.08317M7.08317 12.6667H5.6665V11.3333H7.08317M4.24984 4.66667H2.83317V3.33333H4.24984M4.24984 7.33333H2.83317V6H4.24984M4.24984 10H2.83317V8.66667H4.24984M4.24984 12.6667H2.83317V11.3333H4.24984M8.49984 4.66667V2H1.4165V14H15.5832V4.66667H8.49984Z" fill="black"/>
+</svg>

groups/HarusSelesaiKP/icons/flag-indonesia.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 0.53125C3.858 0.53125 0.5 4.09912 0.5 8.5C0.5 12.9009 3.858 16.4688 8 16.4688C12.142 16.4688 15.5 12.9009 15.5 8.5C15.5 4.09912 12.142 0.53125 8 0.53125ZM8 15.9375C4.14025 15.9375 1 12.601 1 8.5H15C15 12.601 11.8597 15.9375 8 15.9375Z" fill="black"/>
+</svg>

groups/HarusSelesaiKP/icons/hospital.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 1.33337C10.3536 1.33337 10.6928 1.47385 10.9428 1.7239C11.1929 1.97395 11.3333 2.31309 11.3333 2.66671V6.00004H12.6667C13.0203 6.00004 13.3594 6.14052 13.6095 6.39056C13.8595 6.64061 14 6.97975 14 7.33337V13.9334C14 14.0297 13.981 14.125 13.9442 14.214C13.9073 14.303 13.8533 14.3838 13.7852 14.4519C13.7171 14.52 13.6363 14.574 13.5473 14.6109C13.4583 14.6477 13.363 14.6667 13.2667 14.6667H2.73333C2.63703 14.6667 2.54167 14.6477 2.4527 14.6109C2.36373 14.574 2.28288 14.52 2.21479 14.4519C2.14669 14.3838 2.09268 14.303 2.05582 14.214C2.01897 14.125 2 14.0297 2 13.9334V2.66671C2 2.31309 2.14048 1.97395 2.39052 1.7239C2.64057 1.47385 2.97971 1.33337 3.33333 1.33337H10ZM10 2.66671H3.33333V13.3334H4.66667V11.3334C4.66667 10.8029 4.87738 10.2942 5.25245 9.91916C5.62753 9.54409 6.13623 9.33337 6.66667 9.33337C7.1971 9.33337 7.70581 9.54409 8.08088 9.91916C8.45595 10.2942 8.66667 10.8029 8.66667 11.3334V13.3334H10V2.66671ZM12.6667 7.33337H11.3333V13.3334H12.6667V7.33337ZM6.66667 10.6667C6.50338 10.6667 6.34578 10.7267 6.22375 10.8352C6.10173 10.9437 6.02377 11.0932 6.00467 11.2554L6 11.3334V13.3334H7.33333V11.3334C7.33333 11.1566 7.2631 10.987 7.13807 10.862C7.01305 10.7369 6.84348 10.6667 6.66667 10.6667ZM6.66667 4.00004C6.84348 4.00004 7.01305 4.07028 7.13807 4.1953C7.2631 4.32033 7.33333 4.4899 7.33333 4.66671V5.33337H8C8.17681 5.33337 8.34638 5.40361 8.4714 5.52864C8.59643 5.65366 8.66667 5.82323 8.66667 6.00004C8.66667 6.17685 8.59643 6.34642 8.4714 6.47144C8.34638 6.59647 8.17681 6.66671 8 6.66671H7.33333V7.33337C7.33333 7.51018 7.2631 7.67975 7.13807 7.80478C7.01305 7.9298 6.84348 8.00004 6.66667 8.00004C6.48986 8.00004 6.32029 7.9298 6.19526 7.80478C6.07024 7.67975 6 7.51018 6 7.33337V6.66671H5.33333C5.15652 6.66671 4.98695 6.59647 4.86193 6.47144C4.7369 6.34642 4.66667 6.17685 4.66667 6.00004C4.66667 5.82323 4.7369 5.65366 4.86193 5.52864C4.98695 5.40361 5.15652 5.33337 5.33333 5.33337H6V4.66671C6 4.4899 6.07024 4.32033 6.19526 4.1953C6.32029 4.07028 6.48986 4.00004 6.66667 4.00004Z" fill="black"/>
+</svg>

groups/HarusSelesaiKP/icons/house.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.75 5.625L7.5 0.625L1.25 5.625V6.875H2.5V13.125H5.625V10.625C5.625 10.1277 5.82254 9.65081 6.17417 9.29917C6.52581 8.94754 7.00272 8.75 7.5 8.75C7.99728 8.75 8.47419 8.94754 8.82583 9.29917C9.17746 9.65081 9.375 10.1277 9.375 10.625V13.125H12.5V6.875H13.75V5.625Z" fill="black"/>
+</svg>

groups/HarusSelesaiKP/icons/research-glass.svg

@@ -0,0 +1,3 @@
+<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.2352 0.5V13.4231L27.735 23.2661C28.149 23.7428 28.407 24.316 28.4792 24.9199C28.5514 25.5238 28.435 26.134 28.1433 26.6805C27.8516 27.227 27.3964 27.6875 26.83 28.0094C26.2636 28.3312 25.609 28.5013 24.9412 28.5H4.05878C3.39099 28.5013 2.73635 28.3312 2.16998 28.0094C1.6036 27.6875 1.14845 27.227 0.856745 26.6805C0.565044 26.134 0.448617 25.5238 0.520825 24.9199C0.593034 24.316 0.850952 23.7428 1.26498 23.2661L9.76475 13.4231V0.5M6.21332 0.5H22.7867" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

groups/HarusSelesaiKP/icons/run-fill.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.55342 5.86L5.33342 6.304V8.66667H4.00009V5.36667H4.01009L7.52209 4.088C7.68475 4.026 7.86209 3.99467 8.04342 4.00067C8.40565 4.01009 8.75599 4.13194 9.04589 4.34934C9.33579 4.56673 9.5509 4.86891 9.66142 5.214C9.78542 5.60289 9.89875 5.86533 10.0014 6.00133C10.3119 6.41489 10.7144 6.75054 11.177 6.98172C11.6396 7.2129 12.1496 7.33328 12.6668 7.33333V8.66667C11.9783 8.66723 11.2983 8.51525 10.6756 8.22165C10.0529 7.92806 9.50301 7.50014 9.06542 6.96867L8.67809 9.16667L10.0001 10.4467V15.3333H8.66675V11.3427L7.30009 10.018L6.66875 12.8833L2.07275 12.0733L2.30475 10.76L5.58742 11.3387L6.55342 5.86ZM9.00009 3.66667C8.64647 3.66667 8.30733 3.52619 8.05728 3.27614C7.80723 3.02609 7.66675 2.68696 7.66675 2.33333C7.66675 1.97971 7.80723 1.64057 8.05728 1.39052C8.30733 1.14048 8.64647 1 9.00009 1C9.35371 1 9.69285 1.14048 9.9429 1.39052C10.1929 1.64057 10.3334 1.97971 10.3334 2.33333C10.3334 2.68696 10.1929 3.02609 9.9429 3.27614C9.69285 3.52619 9.35371 3.66667 9.00009 3.66667Z" fill="black"/>
+</svg>

groups/HarusSelesaiKP/icons/tabler-mosque.svg

@@ -0,0 +1,3 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.6877 8.00625C19.4492 8.24564 19.166 8.43572 18.8541 8.56564C18.5422 8.69557 18.2078 8.76279 17.8699 8.76346C17.1875 8.76483 16.5326 8.49508 16.0491 8.01354C15.5657 7.53201 15.2933 6.87814 15.2919 6.19578C15.2905 5.51342 15.5603 4.85847 16.0418 4.375M17.5002 8.75V13.125M17.5002 13.125C19.4678 15.3764 21.8178 17.2624 24.4418 18.6958C27.8252 20.5333 29.1668 22.3563 29.1668 25.2729C29.0721 27.1412 28.5746 28.9669 27.7085 30.625H7.29183C6.4257 28.9669 5.92823 27.1412 5.8335 25.2729C5.8335 22.4146 7.17516 20.5333 10.5585 18.6958C13.1825 17.2624 15.5326 15.3764 17.5002 13.125Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

groups/HarusSelesaiKP/localization.js

@@ -0,0 +1,270 @@
+(function () {
+	const dict = {
+		id: {
+			// --- Hero Section ---
+			skp_hero_desc: "Kuliah di kampus unggulan Kalimantan Barat dengan fasilitas lengkap, lingkungan nyaman dan kehidupan mahasiswa yang terjangkau",
+
+			// --- About Section ---
+			skp_about_eyebrow: "Tentang Untan",
+			skp_about_title: "Kampus Unggul di Kalimantan Barat",
+			skp_about_desc_1: "Universitas Tanjungpura merupakan perguruan tinggi negeri terkemuka di Kalimantan Barat yang berkomitmen menghadirkan pendidikan berkualitas.",
+			skp_about_desc_2: "UNTAN terus mendorong pengembangan riset, inovasi, dan kolaborasi di berbagai bidang.",
+			skp_about_desc_3: "Didukung lingkungan belajar yang nyaman, mahasiswa memiliki ruang untuk berkembang secara akademik maupun nonakademik.",
+			skp_about_link_text: "Kunjungi Website Resmi",
+
+			// --- Facilities Section ---
+			skp_fac_eyebrow: "Fasilitas Kampus",
+			skp_fac_main_title: "Fasilitas Kampus untuk Pengalaman Belajar yang Nyaman",
+			skp_fac_title_perpus: "Perpustakaan UNTAN",
+			skp_fac_desc_perpus: "Koleksi literatur digital dan fisik terlengkap dengan ruang baca yang tenang dan modern.",
+			skp_fac_title_rusunawa: "Rusunawa",
+			skp_fac_desc_rusunawa: "Hunian mahasiswa yang aman, terjangkau, dan berlokasi strategis di dalam lingkungan kampus.",
+			skp_fac_title_rs: "Rumah Sakit Untan & Klinik Pratama",
+			skp_fac_desc_rs: "Layanan kesehatan prima bagi seluruh sivitas akademika dengan tenaga medis profesional.",
+			skp_fac_title_gkb: "Gedung Kuliah Bersama",
+			skp_fac_desc_gkb: "Ruang kelas interaktif dengan dukungan teknologi multimedia terkini untuk proses belajar mengajar.",
+			skp_fac_title_bahasa: "UPT Bahasa",
+			skp_fac_desc_bahasa: "Pusat pelatihan bahasa asing dan sertifikasi internasional untuk menunjang karir global.",
+			skp_fac_title_olahraga: "Area Olahraga",
+			skp_fac_desc_olahraga: "Fasilitas olahraga outdoor dan indoor lengkap untuk menjaga kebugaran dan menyalurkan bakat.",
+			skp_fac_title_masjid: "Masjid Muhtadin UNTAN",
+			skp_fac_desc_masjid: "Pusat ibadah yang nyaman dan inklusif bagi sivitas akademika UNTAN dengan suasana religius yang menenangkan.",
+			skp_fac_title_lab: "Laboraturium Kampus UNTAN",
+			skp_fac_desc_lab: "Fasilitas laboratorium modern UNTAN yang mendukung riset, praktikum, dan inovasi mahasiswa.",
+			skp_fac_title_audit: "Auditorium UNTAN",
+			skp_fac_desc_audit: "Ruang serbaguna representatif UNTAN untuk seminar, acara akademik, dan kegiatan besar kampus.",
+
+			// --- Campus Section ---
+			skp_campus_eyebrow: "Kehidupan Kampus",
+			skp_campus_title: "Aktivitas Mahasiswa & Organisasi Kampus",
+			skp_campus_subtitle: "Mahasiswa UNTAN memiliki berbagai kesempatan untuk berkembang melalui organisasi, UKM, komunitas, dan kegiatan ekstrakurikuler.",
+			skp_campus_cat_org: "Organisasi",
+			skp_campus_cat_ukm: "UKM",
+			skp_campus_cat_com: "Komunitas",
+			skp_campus_dir_bem_title: "BEM UNTAN",
+			skp_campus_dir_bem_desc: "Badan Eksekutif Mahasiswa tingkat universitas yang menjadi wadah aspirasi dan pergerakan mahasiswa untuk perubahan positif di kampus.",
+			skp_campus_dir_dpm_title: "DPM UNTAN",
+			skp_campus_dir_dpm_desc: "Dewan Perwakilan Mahasiswa yang menjalankan fungsi legislasi dan pengawasan terhadap kebijakan-kebijakan organisasi mahasiswa di universitas.",
+			skp_campus_dir_hmif_title: "HMIF UNTAN",
+			skp_campus_dir_hmif_desc: "Organisasi mahasiswa di bawah Program Studi Informatika yang menjadi wadah pengembangan akademik, kepemimpinan, dan jejaring bagi anggotanya.",
+			skp_campus_dir_cafa_title: "CAFATIFA",
+			skp_campus_dir_cafa_desc: "Organisasi ini menjadi wadah pelayanan, pembinaan iman, dan pengembangan karakter bagi mahasiswa Katolik di fakultas tersebut.",
+			skp_campus_dir_mapala_title: "MAPALA UNTAN",
+			skp_campus_dir_mapala_desc: "Wadah pecinta alam mahasiswa UNTAN yang membentuk karakter tangguh, peduli lingkungan, dan berjiwa petualang.",
+			skp_campus_dir_lisma_title: "LISMA UNTAN",
+			skp_campus_dir_lisma_desc: "Wadah mahasiswa yang mengembangkan minat literasi, diskusi, dan pemikiran kritis secara kolaboratif.",
+			skp_campus_dir_lsmi_title: "LSMI UNTAN",
+			skp_campus_dir_lsmi_desc: "Unit kegiatan mahasiswa yang mewadahi pembinaan keagamaan, dakwah, dan pengembangan spiritual mahasiswa.",
+			skp_campus_dir_semut_title: "SARANG SEMUT",
+			skp_campus_dir_semut_desc: "Komunitas mahasiswa yang menumbuhkan budaya literasi, diskusi kritis, dan pemikiran intelektual di lingkungan kampus.",
+			skp_campus_dir_aiesec_title: "AIESEC",
+			skp_campus_dir_aiesec_desc: "Organisasi kepemudaan internasional di UNTAN yang mengembangkan kepemimpinan, pengalaman global, dan kolaborasi lintas budaya mahasiswa.",
+
+			// --- Pontianak City Section ---
+			skp_pontianak_eyebrow: "Kota Pontianak",
+			skp_pontianak_title: "Live In Pontianak",
+			skp_pontianak_desc: "Pontianak bukan sekadar ibu kota Kalimantan Barat, tetapi tempat yang nyaman untuk tinggal, ramah bagi mahasiswa, dan bersahabat di kantong. Kota ini menawarkan akses fasilitas umum yang lengkap, ragam kuliner yang menggoda, serta suasana belajar yang aktif dan penuh semangat.",
+
+			// --- Destination Section ---
+			skp_dest_eyebrow: "Wisata & Destinasi",
+			skp_dest_title: "Tempat Menarik di Pontianak",
+			skp_dest_open_maps: "Buka Peta",
+			skp_dest_khatulistiwa_name: "Tugu Khatulistiwa",
+			skp_dest_khatulistiwa_desc: "Ikon kota yang menandakan posisi garis lintang nol derajat di bumi.",
+			skp_dest_waterfront_name: "Waterfront",
+			skp_dest_waterfront_desc: "Area pedestrian tepi sungai Kapuas yang populer untuk menikmati senja.",
+			skp_dest_qubu_name: "Qubu Resort",
+			skp_dest_qubu_desc: "Kawasan taman wisata terpadu dan resort bintang 4 di Kubu Raya.",
+			skp_dest_radank_name: "Rumah Radakng",
+			skp_dest_radank_desc: "Rumah adat suku Dayak dan merupakan simbol harmoni budaya.",
+			skp_dest_museum_name: "Museum",
+			skp_dest_museum_desc: "Koleksi Geografika/Geologika berupa peta dan jenis batu-batuan.",
+			skp_dest_amalzone_name: "Amalzone",
+			skp_dest_amalzone_desc: "Destinasi wisata alam dan rekreasi keluarga yang populer.",
+			skp_dest_mangrove_name: "Hutan Mangrove",
+			skp_dest_mangrove_desc: "Pemandangan alami yang menakjubkan jalur trekking kayu.",
+			skp_dest_mujahidin_name: "Masjid Mujahidin",
+			skp_dest_mujahidin_desc: "Masjid terbesar di Provinsi Kalimantan Barat.",
+
+			// --- Culinary Section ---
+			skp_cul_eyebrow: "Cafe & Kuliner",
+			skp_cul_title: "Kuliner dan Coffee Shop Favorit Mahasiswa",
+			skp_cul_cat_rm: "Rumah Makan",
+			skp_cul_cat_cs: "Coffee Shop",
+			skp_cul_gebuk_desc: "Ayam gepuk pedas gurih meresap, bikin nambah nasi terus.",
+			skp_cul_sari_desc: "Masakan hangat rumahan menggoda, sekali coba langsung jatuh cinta.",
+			skp_cul_mom_desc: "Menu rumahan enak dengan porsi besar.",
+			skp_cul_shine_desc: "Nasi topping kekinian dengan tampilan menarik dan topping yang melimpah.",
+			skp_cul_melepar_desc: "Ayam crispy gurih pedas favorit mahasiswa dengan ayam renyah pedas menggigit.",
+			skp_cul_umi_desc: "Ayam geprek pedas murah dan mengenyangkan dengan pedasnya nampol mantap.",
+			skp_cul_cw_desc: "CW Coffee awalnya berdiri pada tahun 2015 dengan nama Cyber World iCafe, sebuah kafe internet (warnet) berkecepatan tinggi yang buka 24 jam.",
+			skp_cul_nordu_desc: "NORDU Coffee & Eatery (populer dikenal sebagai Kopi Nomor Dua) menawarkan tempat yang nyaman untuk bekerja (Work From Home) dengan menu kopi dan hidangan yang ramah di kantong.",
+			skp_cul_kami_desc: "Toko Kami didirikan pada November 2021 oleh seorang pemuda kreatif bernama Yudistira Nusantara. Nama 'Toko Kami' merupakan sebuah akronim dari Toko Kudapan dan Aneka Minuman Indonesia.",
+			skp_cul_lokale_desc: "Lokale didirikan oleh Asmako pada tahun 2017. Berawal dari kecintaan pemiliknya terhadap racikan kopi, Lokale hadir untuk menciptakan cita rasa kopi modern yang pas dengan lidah masyarakat.",
+			skp_cul_weng_desc: "Weng Coffee adalah salah satu legenda hidup warung kopi di Kota Khatulistiwa yang sudah berdiri sejak tahun 1970.",
+			skp_cul_tropic_desc: "Tropic Cafe Pontianak merupakan salah satu pelopor coffee shop modern berskala besar di Pontianak yang mengusung konsep 24 jam nonstop dengan harga super ramah kantong.",
+
+			// --- Living Cost Section ---
+			skp_cost_eyebrow: "Biaya Hidup Mahasiswa",
+			skp_cost_title: "Perkiraan Biaya Hidup Mahasiswa di Pontianak",
+			skp_cost_desc: "Perencanaan keuangan yang baik membantu mahasiswa menjalani masa studi dengan lebih nyaman di Pontianak.",
+			skp_cost_note: "*Data yang didapat bersumber dari survey internal",
+			skp_cost_period: "per bulan",
+			skp_cost_type_home: "Hunian",
+			skp_cost_type_food: "Makan",
+			skp_cost_type_transport: "Transport",
+		},
+		en: {
+			// --- Hero Section ---
+			skp_hero_desc: "Study at the leading campus in West Kalimantan with complete facilities, comfortable environment, and affordable student life",
+
+			// --- About Section ---
+			skp_about_eyebrow: "About Untan",
+			skp_about_title: "A Leading Campus in West Kalimantan",
+			skp_about_desc_1: "Universitas Tanjungpura is a leading public university in West Kalimantan committed to delivering quality education.",
+			skp_about_desc_2: "UNTAN continues to drive research development, innovation, and collaboration across various fields.",
+			skp_about_desc_3: "Supported by a comfortable learning environment, students have the opportunity to grow both academically and non-academically.",
+			skp_about_link_text: "Visit Official Website",
+
+			// --- Facilities Section ---
+			skp_fac_eyebrow: "Campus Facilities",
+			skp_fac_main_title: "Campus Facilities for a Comfortable Learning Experience",
+			skp_fac_title_perpus: "UNTAN Library",
+			skp_fac_desc_perpus: "The most complete collection of digital and physical literature with a quiet and modern reading room.",
+			skp_fac_title_rusunawa: "Student Dormitory (Rusunawa)",
+			skp_fac_desc_rusunawa: "Safe, affordable, and strategically located student housing within the campus environment.",
+			skp_fac_title_rs: "Untan Hospital & Pratama Clinic",
+			skp_fac_desc_rs: "Excellent health services for the entire academic community with professional medical staff.",
+			skp_fac_title_gkb: "Shared Lecture Building (GKB)",
+			skp_fac_desc_gkb: "Interactive classrooms with the latest multimedia technology support for the teaching and learning process.",
+			skp_fac_title_bahasa: "Language Center (UPT Bahasa)",
+			skp_fac_desc_bahasa: "Foreign language training and international certification center to support global careers.",
+			skp_fac_title_olahraga: "Sports Area",
+			skp_fac_desc_olahraga: "Complete outdoor and indoor sports facilities to maintain fitness and channel talents.",
+			skp_fac_title_masjid: "Muhtadin Mosque UNTAN",
+			skp_fac_desc_masjid: "A comfortable and inclusive place of worship for the UNTAN academic community with a soothing religious atmosphere.",
+			skp_fac_title_lab: "UNTAN Campus Laboratory",
+			skp_fac_desc_lab: "Modern UNTAN laboratory facilities that support student research, practicums, and innovation.",
+			skp_fac_title_audit: "UNTAN Auditorium",
+			skp_fac_desc_audit: "A representative multi-purpose hall for seminars, academic events, and major campus activities.",
+
+			// --- Campus Section ---
+			skp_campus_eyebrow: "Campus Life",
+			skp_campus_title: "Student Activities & Campus Organizations",
+			skp_campus_subtitle: "UNTAN students have various opportunities to grow through organizations, Student Activity Units (UKM), communities, and extracurricular activities.",
+			skp_campus_cat_org: "Organizations",
+			skp_campus_cat_ukm: "Student Units",
+			skp_campus_cat_com: "Communities",
+			skp_campus_dir_bem_title: "BEM UNTAN",
+			skp_campus_dir_bem_desc: "The university-level Student Executive Board that acts as a forum for student aspirations and movements for positive campus change.",
+			skp_campus_dir_dpm_title: "DPM UNTAN",
+			skp_campus_dir_dpm_desc: "The Student Representative Council that performs legislative and supervisory functions over student organization policies at the university.",
+			skp_campus_dir_hmif_title: "HMIF UNTAN",
+			skp_campus_dir_hmif_desc: "A student organization under the Informatics Study Program that serves as a hub for academic development, leadership, and networking for its members.",
+			skp_campus_dir_cafa_title: "CAFATIFA",
+			skp_campus_dir_cafa_desc: "This organization provides a forum for service, faith formation, and character building for Catholic students in the faculty.",
+			skp_campus_dir_mapala_title: "MAPALA UNTAN",
+			skp_campus_dir_mapala_desc: "A community for UNTAN student nature lovers that shapes a resilient character, environmental awareness, and an adventurous spirit.",
+			skp_campus_dir_lisma_title: "LISMA UNTAN",
+			skp_campus_dir_lisma_desc: "A student forum that develops interest in literacy, discussion, and critical thinking collaboratively.",
+			skp_campus_dir_lsmi_title: "LSMI UNTAN",
+			skp_campus_dir_lsmi_desc: "A student activity unit that handles religious guidance, Islamic outreach (da'wah), and spiritual development for students.",
+			skp_campus_dir_semut_title: "SARANG SEMUT",
+			skp_campus_dir_semut_desc: "A student community that fosters a culture of literacy, critical discussion, and intellectual thought within the campus environment.",
+			skp_campus_dir_aiesec_title: "AIESEC",
+			skp_campus_dir_aiesec_desc: "An international youth organization at UNTAN that develops leadership, global experience, and cross-cultural collaboration among students.",
+
+			// --- Pontianak City Section ---
+			skp_pontianak_eyebrow: "Pontianak City",
+			skp_pontianak_title: "Live In Pontianak",
+			skp_pontianak_desc: "Pontianak is not just the capital of West Kalimantan, but a comfortable place to live, student-friendly, and very affordable. The city offers complete access to public facilities, a tempting variety of culinary options, and an active, vibrant learning environment.",
+
+			// --- Destination Section ---
+			skp_dest_eyebrow: "Tourism & Destinations",
+			skp_dest_title: "Interesting Places in Pontianak",
+			skp_dest_open_maps: "Open Maps",
+			skp_dest_khatulistiwa_name: "Equator Monument",
+			skp_dest_khatulistiwa_desc: "The city icon marking the zero-degree latitude position on earth.",
+			skp_dest_waterfront_name: "Waterfront",
+			skp_dest_waterfront_desc: "A popular pedestrian area by the Kapuas River to enjoy the sunset.",
+			skp_dest_qubu_name: "Qubu Resort",
+			skp_dest_qubu_desc: "An integrated tourism park area and a 4-star resort in Kubu Raya.",
+			skp_dest_radank_name: "Radakng House",
+			skp_dest_radank_desc: "The traditional longhouse of the Dayak tribe, a symbol of cultural harmony.",
+			skp_dest_museum_name: "Museum",
+			skp_dest_museum_desc: "Geographical and geological collections featuring maps and various types of rocks.",
+			skp_dest_amalzone_name: "Amalzone",
+			skp_dest_amalzone_desc: "A popular nature tourism and family recreation destination.",
+			skp_dest_mangrove_name: "Mangrove Forest",
+			skp_dest_mangrove_desc: "Stunning natural scenery along a wooden trekking pathway.",
+			skp_dest_mujahidin_name: "Mujahidin Mosque",
+			skp_dest_mujahidin_desc: "The largest mosque in the West Kalimantan Province.",
+
+			// --- Culinary Section ---
+			skp_cul_eyebrow: "Cafe & Culinary",
+			skp_cul_title: "Students' Favorite Culinary and Coffee Shops",
+			skp_cul_cat_rm: "Eateries",
+			skp_cul_cat_cs: "Coffee Shops",
+			skp_cul_gebuk_desc: "Spicy and savory pounded chicken that makes you want to keep adding rice.",
+			skp_cul_sari_desc: "Tempting home-cooked warmth, fall in love at first bite.",
+			skp_cul_mom_desc: "Delicious home-style meals with generous portions.",
+			skp_cul_shine_desc: "Trendy rice bowls with attractive presentation and abundant toppings.",
+			skp_cul_melepar_desc: "Crispy, savory, and spicy chicken, a student favorite with a crunchy, fiery bite.",
+			skp_cul_umi_desc: "Cheap, filling, and spicy smashed chicken with an intensely satisfying kick.",
+			skp_cul_cw_desc: "CW Coffee originally started in 2015 as Cyber World iCafe, a high-speed 24-hour internet cafe.",
+			skp_cul_nordu_desc: "NORDU Coffee & Eatery (popularly known as Kopi Nomor Dua) offers a comfortable place to work (WFH) with student-friendly coffee and meals.",
+			skp_cul_kami_desc: "Toko Kami was founded in November 2021 by a creative youth named Yudistira Nusantara. The name is an acronym for Indonesian Snack and Beverage Shop.",
+			skp_cul_lokale_desc: "Lokale was founded by Asmako in 2017. Rooted in the owner's passion for coffee brewing, Lokale brings modern coffee flavors tailored to the local palate.",
+			skp_cul_weng_desc: "Weng Coffee is one of the living legends of coffee shops in the Equator City, operating since 1970.",
+			skp_cul_tropic_desc: "Tropic Cafe Pontianak is a pioneer of large-scale modern coffee shops in Pontianak, featuring a 24/7 non-stop concept with highly affordable prices.",
+
+			// --- Living Cost Section ---
+			skp_cost_eyebrow: "Student Living Cost",
+			skp_cost_title: "Estimated Living Cost for Students in Pontianak",
+			skp_cost_desc: "Good financial planning helps students go through their study period more comfortably in Pontianak.",
+			skp_cost_note: "*Data obtained is sourced from an internal survey",
+			skp_cost_period: "per month",
+			skp_cost_type_home: "Housing",
+			skp_cost_type_food: "Food",
+			skp_cost_type_transport: "Transport",
+		},
+	};
+
+	function currentLang() {
+		if (typeof window.getLang === 'function') {
+			const l = window.getLang();
+			if (l === 'id' || l === 'en') return l;
+		}
+		try {
+			const saved = localStorage.getItem('if_untan_lang');
+			if (saved === 'id' || saved === 'en') return saved;
+		} catch (e) { /* localStorage unavailable */ }
+		const nav = (navigator.language || 'id').toLowerCase();
+		return nav.startsWith('en') ? 'en' : 'id';
+	}
+
+	function skpT(key) {
+		const lang = currentLang();
+		return (dict[lang] && dict[lang][key]) || dict.id[key] || null;
+	}
+
+	function applySkp(root) {
+		const scope = root || document;
+
+		scope.querySelectorAll('[data-skp-i18n]').forEach(el => {
+			const val = skpT(el.getAttribute('data-skp-i18n'));
+			if (val != null) el.textContent = val;
+		});
+
+		scope.querySelectorAll('[data-skp-i18n-placeholder]').forEach(el => {
+			const val = skpT(el.getAttribute('data-skp-i18n-placeholder'));
+			if (val != null) el.placeholder = val;
+		});
+	}
+
+	window.skpT = skpT;
+	window.applySkp = applySkp;
+
+	document.addEventListener('languageChanged', () => applySkp());
+	document.addEventListener('DOMContentLoaded', () => applySkp());
+})();

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>
+                <!-- ===================== A. HERO ===================== -->
-                <h3>Subjudul</h3>
+                <section class="jf-hero-landing">
-                <p>Gunakan paragraf, list, tabel, gambar, dan elemen konten lainnya.</p>
+                    <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

@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Sorotan dan Prestasi Karya Mahasiswa | Informatika UNTAN</title>
+    <title>Riset & Kelompok Bidang Keahlian | Informatika UNTAN</title>
     <!-- Tailwind CSS via CDN -->
     <script src="https://cdn.tailwindcss.com"></script>
     <!-- Font Awesome untuk Icon -->