Dodo
844 lines
60 KiB
JavaScript
844 lines
60 KiB
JavaScript
export function navigationTemplate() {
|
|
return ` <a href="#main-content" class="skip-link" data-i18n="skip_to_content">Langsung ke Konten Utama</a>
|
|
|
|
<div id="nav-wrapper"
|
|
class="fixed top-0 left-0 right-0 z-50 transition-shadow duration-300 shadow-sm border-b border-slate-200 will-change-auto">
|
|
<div class="bg-untan-navy text-white py-3 lg:py-4 relative overflow-hidden" style="min-height:0;">
|
|
<div class="absolute inset-0 w-full overflow-hidden pointer-events-none" aria-hidden="true">
|
|
<div class="absolute inset-0 opacity-[0.02] font-mono text-[10px] md:text-[12px] text-white select-none leading-snug whitespace-pre-wrap break-all text-right"
|
|
style="overflow:hidden;max-height:100%;">
|
|
01101001 01101110 01100110 01101111 01110010 01101101 01100001 01110100 01101001
|
|
01101011 01100001 00100000 01110101 01101110 01110100 01100001 01101110 00100000
|
|
01100010 01101001 01110011 01100001 01101001 01101110 01100110 01101111 01110010
|
|
01101101 01100001 01110100 01101001 01101011 01100001 00100000 01110101 01101110
|
|
01110100 01100001 01101110 00100000 01100010 01101001 01110011 01100001 01010101
|
|
01001110 01010100 01000001 01001110 00100000 00110010 00110000 00110010 00110101
|
|
00100000 01100110 01110101 01110100 01110101 01110010 01100101 00100000 01110010
|
|
01100101 01100001 01100100 01111001 01101001 01101110 01100110 01101111 01110010
|
|
01101101 01100001 01110100 01101001 01101011 01100001 00100000 01110101 01101110
|
|
</div>
|
|
<div class="absolute inset-0 bg-gradient-to-r from-untan-navy via-untan-navy/80 to-transparent"></div>
|
|
</div>
|
|
|
|
<div class="container mx-auto px-4 lg:px-6 flex justify-between items-center relative z-10">
|
|
<a href="../../index.html" class="flex items-center gap-4 group">
|
|
<div class="relative w-12 h-12 lg:w-14 lg:h-14 flex items-center justify-center shrink-0">
|
|
<img src="https://upload.wikimedia.org/wikipedia/id/0/03/Lambang_Universitas_Tanjungpura.png"
|
|
alt="Logo Universitas Tanjungpura - Lambang resmi UNTAN"
|
|
class="w-full h-full object-contain transition-transform duration-500 group-hover:scale-105 group-hover:rotate-3 relative z-10">
|
|
</div>
|
|
<div class="border-l-2 border-white/30 pl-4 lg:pl-5 py-1 flex flex-col justify-center">
|
|
<span
|
|
class="text-lg lg:text-2xl font-bold tracking-widest text-white leading-none font-sans drop-shadow-sm mb-1 uppercase">INFORMATIKA</span>
|
|
<span
|
|
class="text-[10px] lg:text-sm font-normal tracking-[0.15em] lg:tracking-[0.3em] text-slate-200 mt-0.5 opacity-90 drop-shadow-sm uppercase font-sans">UNIVERSITAS
|
|
TANJUNGPURA</span>
|
|
</div>
|
|
</a>
|
|
|
|
<div class="hidden lg:flex items-center gap-5">
|
|
<div class="flex items-center gap-3 text-sm">
|
|
<a href="https://satu.untan.ac.id" target="_blank"
|
|
class="hover:text-untan-yellow transition-colors font-medium">SATU UNTAN</a>
|
|
</div>
|
|
<div class="pl-5 border-l border-white/20 flex items-center gap-3">
|
|
<button
|
|
class="language-toggle-btn text-xs hover:text-untan-yellow transition-colors flex items-center gap-1">
|
|
<span class="font-bold">ID</span> <span class="text-white/40">|</span> EN
|
|
</button>
|
|
<button
|
|
class="w-8 h-8 flex items-center justify-center rounded-sm hover:bg-white/10 transition-colors"
|
|
aria-label="Pengaturan aksesibilitas" data-accessibility-toggle>
|
|
<i class="fas fa-universal-access" aria-hidden="true"></i>
|
|
</button>
|
|
<button
|
|
class="w-8 h-8 flex items-center justify-center rounded-sm hover:bg-white/10 transition-colors"
|
|
aria-label="Cari konten">
|
|
<i class="fas fa-search" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="mobile-menu-button"
|
|
class="lg:hidden text-xl text-white w-9 h-9 flex items-center justify-center rounded-sm hover:bg-white/10 transition-colors"
|
|
aria-label="Buka menu navigasi" aria-expanded="false" aria-controls="mobile-menu">
|
|
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="bg-[#feb401] shadow-md hidden lg:block border-t border-white/20 relative" id="main-nav"
|
|
aria-label="Menu navigasi utama">
|
|
<div class="container mx-auto px-6">
|
|
<div class="flex items-center justify-center w-full gap-1 py-2" role="menubar">
|
|
|
|
<!-- Menu: Tentang Kami -->
|
|
<div class="nav-menu-item relative" data-menu="tentang">
|
|
<button
|
|
class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
|
|
<span data-i18n="nav_about">Tentang Kami</span>
|
|
<i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Menu: Program -->
|
|
<div class="nav-menu-item relative" data-menu="program">
|
|
<button
|
|
class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
|
|
<span data-i18n="nav_program">Program</span>
|
|
<i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Menu: SDM -->
|
|
<div class="nav-menu-item relative" data-menu="sdm">
|
|
<button
|
|
class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
|
|
<span data-i18n="nav_sdm">SDM</span>
|
|
<i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Menu: Fasilitas -->
|
|
<div class="nav-menu-item relative" data-menu="fasilitas">
|
|
<button
|
|
class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
|
|
<span data-i18n="nav_facilities">Fasilitas</span>
|
|
<i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Menu: Karya & Agenda -->
|
|
<div class="nav-menu-item relative" data-menu="karya">
|
|
<button
|
|
class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
|
|
<span data-i18n="nav_works">Karya & Agenda</span>
|
|
<i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Menu: Kontak -->
|
|
<div class="nav-menu-item relative" data-menu="kontak">
|
|
<button
|
|
class="nav-menu-btn px-4 py-2.5 text-sm font-bold text-slate-800 hover:text-untan-blue rounded-sm transition-all flex items-center gap-1.5 uppercase tracking-wide">
|
|
<span data-i18n="nav_contact">Kontak</span>
|
|
<i class="fas fa-chevron-down text-[10px] opacity-70 transition-transform duration-300"></i>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MEGA MENU PANELS (Inside nav for proper positioning) -->
|
|
<div id="mega-menu-container" class="absolute left-0 right-0 top-full z-50">
|
|
|
|
<!-- Mega Menu: Tentang Kami -->
|
|
<div id="mega-tentang" class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl">
|
|
<div class="container mx-auto px-6 py-8">
|
|
<div class="grid grid-cols-12 gap-8">
|
|
<!-- Left: Featured -->
|
|
<div
|
|
class="col-span-4 bg-gradient-to-br from-untan-navy to-slate-800 rounded-2xl p-6 text-white relative overflow-hidden">
|
|
<div
|
|
class="absolute top-0 right-0 w-32 h-32 bg-untan-yellow/10 rounded-full -mr-16 -mt-16">
|
|
</div>
|
|
<div class="absolute bottom-0 left-0 w-24 h-24 bg-white/5 rounded-full -ml-12 -mb-12">
|
|
</div>
|
|
<div class="relative z-10">
|
|
<span
|
|
class="inline-block px-3 py-1 bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-wider rounded-full mb-4"
|
|
data-i18n="mega_about_title">Tentang Kami</span>
|
|
<h3 class="text-2xl font-bold mb-3">Mengenal Informatika UNTAN</h3>
|
|
<p class="text-slate-300 text-sm mb-6 leading-relaxed" data-i18n="mega_about_desc">
|
|
Terakreditasi Unggul, mencetak lulusan kompeten di bidang teknologi informasi
|
|
sejak 1993.</p>
|
|
<a href="content.html?type=berita"
|
|
class="inline-flex items-center gap-2 text-untan-yellow font-semibold text-sm hover:gap-3 transition-all">
|
|
Selengkapnya <i class="fas fa-arrow-right"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- Right: Links -->
|
|
<div class="col-span-8 grid grid-cols-2 gap-6">
|
|
<a href="content.html?type=berita" class="mega-link-card group">
|
|
<div
|
|
class="mega-link-icon bg-amber-50 text-amber-600 group-hover:bg-amber-600 group-hover:text-white">
|
|
<i class="fas fa-landmark"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
|
|
data-i18n="link_history">Sejarah & Tonggak</h4>
|
|
<p class="text-xs text-slate-500 mt-1" data-i18n="link_history_desc">Perjalanan
|
|
panjang membangun generasi digital</p>
|
|
</div>
|
|
</a>
|
|
<a href="content.html?type=berita" class="mega-link-card group">
|
|
<div
|
|
class="mega-link-icon bg-blue-50 text-blue-600 group-hover:bg-blue-600 group-hover:text-white">
|
|
<i class="fas fa-users"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
|
|
data-i18n="link_org">Struktur Organisasi</h4>
|
|
<p class="text-xs text-slate-500 mt-1" data-i18n="link_org_desc">Pimpinan dan
|
|
jajaran pengelola</p>
|
|
</div>
|
|
</a>
|
|
<a href="profil.html" class="mega-link-card group">
|
|
<div
|
|
class="mega-link-icon bg-emerald-50 text-emerald-600 group-hover:bg-emerald-600 group-hover:text-white">
|
|
<i class="fas fa-bullseye"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
|
|
data-i18n="link_vision">Visi & Misi</h4>
|
|
<p class="text-xs text-slate-500 mt-1" data-i18n="link_vision_desc">Arah dan
|
|
tujuan pengembangan prodi</p>
|
|
</div>
|
|
</a>
|
|
<a href="content.html?type=berita" class="mega-link-card group">
|
|
<div
|
|
class="mega-link-icon bg-purple-50 text-purple-600 group-hover:bg-purple-600 group-hover:text-white">
|
|
<i class="fas fa-handshake"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue transition-colors"
|
|
data-i18n="link_partnership">Kerjasama & MoU</h4>
|
|
<p class="text-xs text-slate-500 mt-1" data-i18n="link_partnership_desc">Mitra
|
|
industri dan akademik</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mega Menu: Program -->
|
|
<div id="mega-program" class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl">
|
|
<div class="container mx-auto px-6 py-8">
|
|
<div class="grid grid-cols-12 gap-8">
|
|
<!-- Left: Featured -->
|
|
<div
|
|
class="col-span-4 bg-gradient-to-br from-blue-600 to-indigo-700 rounded-2xl p-6 text-white relative overflow-hidden">
|
|
<div class="absolute top-0 right-0 w-40 h-40 bg-white/10 rounded-full -mr-20 -mt-20">
|
|
</div>
|
|
<div class="relative z-10">
|
|
<span
|
|
class="inline-block px-3 py-1 bg-white/20 text-white text-[10px] font-bold uppercase tracking-wider rounded-full mb-4">Program
|
|
Akademik</span>
|
|
<h3 class="text-2xl font-bold mb-3" data-i18n="mega_program_obe">Kurikulum Berbasis
|
|
OBE</h3>
|
|
<p class="text-blue-100 text-sm mb-6 leading-relaxed">Outcome-Based Education dengan
|
|
4 jalur konsentrasi: AI, Software Engineering, Network, dan Information Systems.
|
|
</p>
|
|
<a href="subject-and-courses.html"
|
|
class="inline-flex items-center gap-2 bg-white text-blue-600 px-4 py-2 rounded-lg font-semibold text-sm hover:bg-blue-50 transition-all"
|
|
data-i18n="btn_krs_sim">
|
|
<i class="fas fa-play-circle"></i> Simulasi KRS
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- Right: Links Grid -->
|
|
<div class="col-span-8">
|
|
<div class="grid grid-cols-3 gap-4">
|
|
<a href="subject-and-courses.html" class="mega-link-card group">
|
|
<div
|
|
class="mega-link-icon bg-indigo-50 text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white">
|
|
<i class="fas fa-graduation-cap"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
|
|
data-i18n="link_academic">Akademik</h4>
|
|
<p class="text-xs text-slate-500 mt-1" data-i18n="link_academic_desc">
|
|
Jadwal, KRS, dan kalender</p>
|
|
</div>
|
|
</a>
|
|
<a href="content.html?type=berita" class="mega-link-card group">
|
|
<div
|
|
class="mega-link-icon bg-yellow-50 text-yellow-600 group-hover:bg-yellow-600 group-hover:text-white">
|
|
<i class="fas fa-award"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
|
|
data-i18n="link_accreditation">Akreditasi</h4>
|
|
<p class="text-xs text-slate-500 mt-1" data-i18n="link_accred_desc">Status
|
|
Unggul BAN-PT</p>
|
|
</div>
|
|
</a>
|
|
<a href="graduate-profile.html" class="mega-link-card group">
|
|
<div
|
|
class="mega-link-icon bg-green-50 text-green-600 group-hover:bg-green-600 group-hover:text-white">
|
|
<i class="fas fa-user-graduate"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
|
|
data-i18n="link_graduate">Profil Lulusan</h4>
|
|
<p class="text-xs text-slate-500 mt-1" data-i18n="link_graduate_desc">
|
|
Kompetensi & karir</p>
|
|
</div>
|
|
</a>
|
|
<a href="subject-and-courses.html" class="mega-link-card group">
|
|
<div
|
|
class="mega-link-icon bg-rose-50 text-rose-600 group-hover:bg-rose-600 group-hover:text-white">
|
|
<i class="fas fa-book-open"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
|
|
data-i18n="link_courses">Mata Kuliah</h4>
|
|
<p class="text-xs text-slate-500 mt-1">144 SKS kurikulum</p>
|
|
</div>
|
|
</a>
|
|
<a href="academic-guidelines.html" class="mega-link-card group">
|
|
<div
|
|
class="mega-link-icon bg-cyan-50 text-cyan-600 group-hover:bg-cyan-600 group-hover:text-white">
|
|
<i class="fas fa-file-alt"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
|
|
data-i18n="link_guideline">Panduan</h4>
|
|
<p class="text-xs text-slate-500 mt-1" data-i18n="link_guideline_desc">Buku
|
|
panduan akademik</p>
|
|
</div>
|
|
</a>
|
|
<a href="content.html?type=berita" class="mega-link-card group">
|
|
<div
|
|
class="mega-link-icon bg-orange-50 text-orange-600 group-hover:bg-orange-600 group-hover:text-white">
|
|
<i class="fas fa-chart-bar"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
|
|
data-i18n="link_statistics">Informatika Angka</h4>
|
|
<p class="text-xs text-slate-500 mt-1" data-i18n="link_statistics_desc">
|
|
Statistik & data</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mega Menu: SDM -->
|
|
<div id="mega-sdm" class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl">
|
|
<div class="container mx-auto px-6 py-8">
|
|
<div class="grid grid-cols-12 gap-8">
|
|
<!-- Left: Featured Dosen -->
|
|
<div
|
|
class="col-span-5 bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl p-6 text-white relative overflow-hidden">
|
|
<div class="absolute inset-0 opacity-10">
|
|
<div class="absolute top-4 right-4 w-20 h-20 border-2 border-white rounded-full">
|
|
</div>
|
|
<div class="absolute bottom-4 left-4 w-16 h-16 border-2 border-white rounded-full">
|
|
</div>
|
|
</div>
|
|
<div class="relative z-10">
|
|
<span
|
|
class="inline-block px-3 py-1 bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-wider rounded-full mb-4"
|
|
data-i18n="mega_sdm_title">Sumber Daya Manusia</span>
|
|
<h3 class="text-2xl font-bold mb-3" data-i18n="mega_sdm_desc">Tim Pengajar
|
|
Profesional</h3>
|
|
<p class="text-slate-300 text-sm mb-4 leading-relaxed">30+ dosen berkualifikasi
|
|
S2/S3 dari universitas terkemuka dalam dan luar negeri.</p>
|
|
<div class="flex gap-4 mb-6">
|
|
<div class="text-center">
|
|
<div class="text-2xl font-bold text-untan-yellow">15+</div>
|
|
<div class="text-[10px] text-slate-400 uppercase">Doktor</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-2xl font-bold text-untan-yellow">20+</div>
|
|
<div class="text-[10px] text-slate-400 uppercase">Magister</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-2xl font-bold text-untan-yellow">5</div>
|
|
<div class="text-[10px] text-slate-400 uppercase">Guru Besar</div>
|
|
</div>
|
|
</div>
|
|
<a href="people-based-on-kk.html"
|
|
class="inline-flex items-center gap-2 text-untan-yellow font-semibold text-sm hover:gap-3 transition-all"
|
|
data-i18n="btn_all_lecturers">
|
|
Lihat Semua Dosen <i class="fas fa-arrow-right"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- Right: KK Groups -->
|
|
<div class="col-span-7">
|
|
<h4 class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4"
|
|
data-i18n="label_expertise">Kelompok Keahlian</h4>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<a href="people-based-on-kk.html"
|
|
class="group bg-gradient-to-r from-purple-50 to-white border border-purple-100 rounded-xl p-5 hover:shadow-lg hover:border-purple-300 transition-all">
|
|
<div class="flex items-start gap-4">
|
|
<div
|
|
class="w-12 h-12 bg-purple-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform">
|
|
<i class="fas fa-brain"></i>
|
|
</div>
|
|
<div>
|
|
<h5 class="font-bold text-slate-800 mb-1">KK Kecerdasan Buatan</h5>
|
|
<p class="text-xs text-slate-500">Machine Learning, Computer Vision, NLP
|
|
</p>
|
|
<span class="inline-block mt-2 text-xs text-purple-600 font-semibold">8
|
|
Dosen <i class="fas fa-chevron-right ml-1"></i></span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="people-based-on-kk.html"
|
|
class="group bg-gradient-to-r from-blue-50 to-white border border-blue-100 rounded-xl p-5 hover:shadow-lg hover:border-blue-300 transition-all">
|
|
<div class="flex items-start gap-4">
|
|
<div
|
|
class="w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform">
|
|
<i class="fas fa-code"></i>
|
|
</div>
|
|
<div>
|
|
<h5 class="font-bold text-slate-800 mb-1">KK Rekayasa Perangkat Lunak
|
|
</h5>
|
|
<p class="text-xs text-slate-500">Software Engineering, DevOps, Testing
|
|
</p>
|
|
<span class="inline-block mt-2 text-xs text-blue-600 font-semibold">10
|
|
Dosen <i class="fas fa-chevron-right ml-1"></i></span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="people-based-on-kk.html"
|
|
class="group bg-gradient-to-r from-emerald-50 to-white border border-emerald-100 rounded-xl p-5 hover:shadow-lg hover:border-emerald-300 transition-all">
|
|
<div class="flex items-start gap-4">
|
|
<div
|
|
class="w-12 h-12 bg-emerald-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform">
|
|
<i class="fas fa-network-wired"></i>
|
|
</div>
|
|
<div>
|
|
<h5 class="font-bold text-slate-800 mb-1">KK Jaringan & Keamanan</h5>
|
|
<p class="text-xs text-slate-500">Network, Cybersecurity, Cloud</p>
|
|
<span class="inline-block mt-2 text-xs text-emerald-600 font-semibold">7
|
|
Dosen <i class="fas fa-chevron-right ml-1"></i></span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="people-based-on-kk.html"
|
|
class="group bg-gradient-to-r from-orange-50 to-white border border-orange-100 rounded-xl p-5 hover:shadow-lg hover:border-orange-300 transition-all">
|
|
<div class="flex items-start gap-4">
|
|
<div
|
|
class="w-12 h-12 bg-orange-600 rounded-xl flex items-center justify-center text-white text-xl group-hover:scale-110 transition-transform">
|
|
<i class="fas fa-database"></i>
|
|
</div>
|
|
<div>
|
|
<h5 class="font-bold text-slate-800 mb-1">KK Sistem Informasi</h5>
|
|
<p class="text-xs text-slate-500">Data Science, GIS, Business Intel</p>
|
|
<span class="inline-block mt-2 text-xs text-orange-600 font-semibold">6
|
|
Dosen <i class="fas fa-chevron-right ml-1"></i></span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mega Menu: Fasilitas -->
|
|
<div id="mega-fasilitas" class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl">
|
|
<div class="container mx-auto px-6 py-8">
|
|
<div class="grid grid-cols-4 gap-6">
|
|
<a href="content.html?type=rubrik"
|
|
class="group relative bg-gradient-to-br from-cyan-500 to-blue-600 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all">
|
|
<div class="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -mr-12 -mt-12">
|
|
</div>
|
|
<i class="fas fa-flask text-4xl mb-4 opacity-80"></i>
|
|
<h4 class="text-lg font-bold mb-2" data-i18n="mega_lab">Laboratorium</h4>
|
|
<p class="text-sm text-cyan-100 mb-4" data-i18n="mega_lab_desc">8 lab modern dengan
|
|
peralatan terkini</p>
|
|
<span
|
|
class="inline-flex items-center gap-1 text-xs font-semibold opacity-80 group-hover:opacity-100 group-hover:gap-2 transition-all"
|
|
data-i18n="btn_explore">
|
|
Jelajahi <i class="fas fa-arrow-right"></i>
|
|
</span>
|
|
</a>
|
|
<a href="content.html?type=rubrik"
|
|
class="group relative bg-gradient-to-br from-violet-500 to-purple-600 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all">
|
|
<div class="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -mr-12 -mt-12">
|
|
</div>
|
|
<i class="fas fa-server text-4xl mb-4 opacity-80"></i>
|
|
<h4 class="text-lg font-bold mb-2" data-i18n="mega_dc">Data Center</h4>
|
|
<p class="text-sm text-violet-100 mb-4" data-i18n="mega_dc_desc">Server & infrastruktur
|
|
cloud lokal</p>
|
|
<span
|
|
class="inline-flex items-center gap-1 text-xs font-semibold opacity-80 group-hover:opacity-100 group-hover:gap-2 transition-all"
|
|
data-i18n="btn_explore">
|
|
Jelajahi <i class="fas fa-arrow-right"></i>
|
|
</span>
|
|
</a>
|
|
<a href="content.html?type=rubrik"
|
|
class="group relative bg-gradient-to-br from-emerald-500 to-teal-600 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all">
|
|
<div class="absolute top-0 right-0 w-24 h-24 bg-white/10 rounded-full -mr-12 -mt-12">
|
|
</div>
|
|
<i class="fas fa-book-reader text-4xl mb-4 opacity-80"></i>
|
|
<h4 class="text-lg font-bold mb-2" data-i18n="mega_eresources">E-Resources</h4>
|
|
<p class="text-sm text-emerald-100 mb-4" data-i18n="mega_eresources_desc">Akses jurnal &
|
|
database ilmiah</p>
|
|
<span
|
|
class="inline-flex items-center gap-1 text-xs font-semibold opacity-80 group-hover:opacity-100 group-hover:gap-2 transition-all"
|
|
data-i18n="btn_explore">
|
|
Jelajahi <i class="fas fa-arrow-right"></i>
|
|
</span>
|
|
</a>
|
|
<a href="ifuntanhub.html"
|
|
class="group relative bg-gradient-to-br from-slate-700 to-slate-900 rounded-2xl p-6 text-white overflow-hidden hover:shadow-xl transition-all">
|
|
<div
|
|
class="absolute top-0 right-0 w-24 h-24 bg-untan-yellow/20 rounded-full -mr-12 -mt-12">
|
|
</div>
|
|
<i class="fas fa-cloud text-4xl mb-4 opacity-80"></i>
|
|
<h4 class="text-lg font-bold mb-2">IFUNTANHUB</h4>
|
|
<p class="text-sm text-slate-300 mb-4" data-i18n="mega_hub_desc">Platform PaaS untuk
|
|
mahasiswa</p>
|
|
<span
|
|
class="inline-flex items-center gap-1 text-xs font-semibold text-untan-yellow group-hover:gap-2 transition-all">
|
|
Launch <i class="fas fa-external-link-alt"></i>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mega Menu: Karya & Agenda -->
|
|
<div id="mega-karya" class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl">
|
|
<div class="container mx-auto px-6 py-8">
|
|
<div class="grid grid-cols-12 gap-8">
|
|
<!-- Left: Research Highlight -->
|
|
<div class="col-span-5">
|
|
<div
|
|
class="bg-gradient-to-br from-amber-400 to-orange-500 rounded-2xl p-6 text-white mb-4">
|
|
<span
|
|
class="inline-block px-3 py-1 bg-white/20 text-white text-[10px] font-bold uppercase tracking-wider rounded-full mb-3"
|
|
data-i18n="mega_research_title">Riset Unggulan</span>
|
|
<h3 class="text-xl font-bold mb-2" data-i18n="mega_sinta_title">Indeks SINTA Terbaik
|
|
</h3>
|
|
<p class="text-amber-100 text-sm mb-4" data-i18n="mega_sinta_desc">Publikasi dosen
|
|
terindeks Scopus, WoS, dan jurnal nasional terakreditasi.</p>
|
|
<a href="content.html?type=berita"
|
|
class="inline-flex items-center gap-2 bg-white text-orange-600 px-4 py-2 rounded-lg font-semibold text-sm hover:bg-orange-50 transition-all"
|
|
data-i18n="btn_publications">
|
|
Lihat Publikasi
|
|
</a>
|
|
</div>
|
|
<a href="content.html?type=berita"
|
|
class="block bg-slate-50 border border-slate-200 rounded-xl p-4 hover:bg-slate-100 hover:border-slate-300 transition-all">
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center text-red-600">
|
|
<i class="fas fa-calendar-alt"></i>
|
|
</div>
|
|
<div>
|
|
<h5 class="font-bold text-slate-800 text-sm" data-i18n="link_info_agenda">
|
|
Info & Agenda</h5>
|
|
<p class="text-xs text-slate-500" data-i18n="link_info_agenda_desc">
|
|
Pengumuman dan jadwal kegiatan</p>
|
|
</div>
|
|
<i class="fas fa-chevron-right text-slate-400 ml-auto"></i>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<!-- Right: Grid -->
|
|
<div class="col-span-7 grid grid-cols-2 gap-4">
|
|
<a href="karya.html" class="mega-link-card group">
|
|
<div
|
|
class="mega-link-icon bg-indigo-50 text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white">
|
|
<i class="fas fa-layer-group"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue">Semua Karya
|
|
</h4>
|
|
<p class="text-xs text-slate-500 mt-1">Lihat seluruh karya dalam satu halaman
|
|
</p>
|
|
</div>
|
|
</a>
|
|
<a href="karya.html?filter=penelitian" class="mega-link-card group">
|
|
<div
|
|
class="mega-link-icon bg-blue-50 text-blue-600 group-hover:bg-blue-600 group-hover:text-white">
|
|
<i class="fas fa-microscope"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
|
|
data-i18n="link_research">Riset</h4>
|
|
<p class="text-xs text-slate-500 mt-1" data-i18n="link_research_desc">Penelitian
|
|
dosen dan mahasiswa</p>
|
|
</div>
|
|
</a>
|
|
<a href="karya.html?filter=pkm" class="mega-link-card group">
|
|
<div
|
|
class="mega-link-icon bg-green-50 text-green-600 group-hover:bg-green-600 group-hover:text-white">
|
|
<i class="fas fa-hands-helping"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
|
|
data-i18n="link_community">Pengabdian</h4>
|
|
<p class="text-xs text-slate-500 mt-1" data-i18n="link_community_desc">Program
|
|
pengabdian masyarakat</p>
|
|
</div>
|
|
</a>
|
|
<a href="content.html?type=rubrik" class="mega-link-card group">
|
|
<div
|
|
class="mega-link-icon bg-amber-50 text-amber-600 group-hover:bg-amber-600 group-hover:text-white">
|
|
<i class="fas fa-trophy"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
|
|
data-i18n="link_achievements">Prestasi</h4>
|
|
<p class="text-xs text-slate-500 mt-1" data-i18n="link_achievements_desc">
|
|
Pencapaian dosen & mahasiswa</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mega Menu: Kontak -->
|
|
<div id="mega-kontak" class="mega-panel bg-white border-b-4 border-untan-navy shadow-2xl">
|
|
<div class="container mx-auto px-6 py-8">
|
|
<div class="grid grid-cols-12 gap-8">
|
|
<!-- Left: Contact Info -->
|
|
<div class="col-span-5 bg-untan-navy rounded-2xl p-6 text-white">
|
|
<h3 class="text-xl font-bold mb-4" data-i18n="mega_contact_title">Hubungi Kami</h3>
|
|
<div class="space-y-4">
|
|
<div class="flex items-start gap-3">
|
|
<div
|
|
class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
<i class="fas fa-map-marker-alt text-untan-yellow"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm text-slate-300">Jl. Prof. Dr. H. Hadari Nawawi, Bansir
|
|
Laut, Pontianak Tenggara</p>
|
|
<p class="text-xs text-slate-400 mt-1">Kalimantan Barat 78124</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
<i class="fab fa-whatsapp text-untan-yellow"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm text-white font-medium">+62 851-7165-5161</p>
|
|
<p class="text-xs text-slate-400">Senin - Jumat, 08:00 - 16:00</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
<i class="fas fa-envelope text-untan-yellow"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm text-white font-medium">info@informatika.untan.ac.id</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Right: Quick Links & Social -->
|
|
<div class="col-span-7">
|
|
<div class="grid grid-cols-2 gap-4 mb-6">
|
|
<a href="content.html?type=berita" class="mega-link-card group">
|
|
<div
|
|
class="mega-link-icon bg-blue-50 text-blue-600 group-hover:bg-blue-600 group-hover:text-white">
|
|
<i class="fas fa-id-card"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
|
|
data-i18n="link_official_contact">Kontak Resmi</h4>
|
|
<p class="text-xs text-slate-500 mt-1" data-i18n="link_contact_desc">
|
|
Direktori kontak staf</p>
|
|
</div>
|
|
</a>
|
|
<a href="https://mail.google.com/mail/?view=cm&fs=1&to=info@informatika.untan.ac.id" target="_blank" rel="noopener noreferrer" class="mega-link-card group">
|
|
<div
|
|
class="mega-link-icon bg-green-50 text-green-600 group-hover:bg-green-600 group-hover:text-white">
|
|
<i class="fas fa-comment-dots"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-slate-800 group-hover:text-untan-blue"
|
|
data-i18n="link_feedback">Saran & Masukan</h4>
|
|
<p class="text-xs text-slate-500 mt-1" data-i18n="link_feedback_desc">Kirim
|
|
feedback Anda</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="bg-slate-50 rounded-xl p-5">
|
|
<h4 class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4"
|
|
data-i18n="follow_us">Ikuti Kami</h4>
|
|
<div class="flex gap-3">
|
|
<a href="https://instagram.com/informatika.untan" target="_blank"
|
|
class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform">
|
|
<i class="fab fa-instagram text-xl"></i>
|
|
</a>
|
|
<a href="#"
|
|
class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform">
|
|
<i class="fab fa-youtube text-xl"></i>
|
|
</a>
|
|
<a href="#"
|
|
class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform">
|
|
<i class="fab fa-facebook-f text-xl"></i>
|
|
</a>
|
|
<a href="#"
|
|
class="w-12 h-12 bg-gradient-to-br from-sky-400 to-sky-500 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform">
|
|
<i class="fab fa-twitter text-xl"></i>
|
|
</a>
|
|
<a href="#"
|
|
class="w-12 h-12 bg-gradient-to-br from-blue-600 to-blue-700 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform">
|
|
<i class="fab fa-linkedin-in text-xl"></i>
|
|
</a>
|
|
<a href="#"
|
|
class="w-12 h-12 bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl flex items-center justify-center text-white hover:scale-110 transition-transform">
|
|
<i class="fab fa-tiktok text-xl"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- End mega-menu-container -->
|
|
</nav>
|
|
|
|
<!-- Overlay for mega menu -->
|
|
<div id="mega-overlay" class="fixed inset-0 bg-black/30 backdrop-blur-sm z-30"></div>
|
|
</div>
|
|
|
|
<div id="mobile-menu"
|
|
class="fixed inset-0 bg-slate-900 z-[60] transform -translate-x-full lg:hidden flex flex-col transition-transform duration-300"
|
|
role="dialog" aria-modal="true" aria-label="Menu navigasi mobile">
|
|
<div class="p-4 flex justify-between items-center border-b border-white/10 bg-untan-navy">
|
|
<div class="flex items-center gap-4">
|
|
<span class="font-bold text-lg text-white font-serif">Menu Utama</span>
|
|
<button
|
|
class="language-toggle-btn px-2 py-1 rounded-sm border border-white/20 text-xs text-white hover:bg-white/10 transition-colors flex items-center gap-2"
|
|
aria-label="Ganti bahasa">
|
|
<span class="font-bold">ID</span> <span class="text-white/40" aria-hidden="true">|</span> EN
|
|
</button>
|
|
<button
|
|
class="w-8 h-8 rounded-sm bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition-colors"
|
|
aria-label="Pengaturan aksesibilitas" data-accessibility-toggle>
|
|
<i class="fas fa-universal-access" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
<button id="close-mobile-menu"
|
|
class="w-8 h-8 rounded-sm bg-white/10 flex items-center justify-center text-white"
|
|
aria-label="Tutup menu navigasi">
|
|
<i class="fas fa-times" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
<div class="flex-1 overflow-y-auto p-5 space-y-4 bg-slate-50">
|
|
<a href="../../index.html" class="block text-base font-bold text-slate-800 py-1 border-b border-slate-200"
|
|
data-i18n="nav_home">Beranda</a>
|
|
|
|
<!-- Tentang Kami -->
|
|
<div class="pt-2">
|
|
<span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_about">Tentang
|
|
Kami</span>
|
|
<div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
|
|
<a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_history">Sejarah & Tonggak</a>
|
|
<a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_org">Struktur Organisasi</a>
|
|
<a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_vision">Visi & Misi</a>
|
|
<a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_partnership">Kerjasama & MoU</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Program -->
|
|
<div class="pt-2 border-t border-slate-200">
|
|
<span class="text-xs font-bold text-slate-400 uppercase font-serif"
|
|
data-i18n="nav_program">Program</span>
|
|
<div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
|
|
<a href="subject-and-courses.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_academic">Akademik</a>
|
|
<a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_accreditation">Akreditasi</a>
|
|
<a href="graduate-profile.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_graduate">Profil Lulusan</a>
|
|
<a href="subject-and-courses.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_courses">Mata Kuliah</a>
|
|
<a href="academic-guidelines.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_guideline">Panduan Akademik</a>
|
|
<a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_statistics">Informatika Angka</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SDM -->
|
|
<div class="pt-2 border-t border-slate-200">
|
|
<span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_sdm">SDM</span>
|
|
<div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
|
|
<a href="people-based-on-kk.html"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue font-medium"
|
|
data-i18n="btn_all_lecturers">Semua Dosen</a>
|
|
<a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="kk_ai">Kecerdasan Buatan</a>
|
|
<a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="kk_se">Rekayasa Perangkat Lunak</a>
|
|
<a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="kk_network">Jaringan & Keamanan</a>
|
|
<a href="people-based-on-kk.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="kk_is">Sistem Informasi</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Fasilitas -->
|
|
<div class="pt-2 border-t border-slate-200">
|
|
<span class="text-xs font-bold text-slate-400 uppercase font-serif"
|
|
data-i18n="nav_facilities">Fasilitas</span>
|
|
<div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
|
|
<a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="mega_lab">Laboratorium</a>
|
|
<a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="mega_dc">Data Center</a>
|
|
<a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="mega_eresources">E-Resources</a>
|
|
<a href="ifuntanhub.html"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue">IFUNTANHUB</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Karya & Agenda -->
|
|
<div class="pt-2 border-t border-slate-200">
|
|
<span class="text-xs font-bold text-slate-400 uppercase font-serif" data-i18n="nav_works">Karya &
|
|
Agenda</span>
|
|
<div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
|
|
<a href="karya.html" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_all_karya">Semua Karya</a>
|
|
<a href="karya.html?filter=penelitian"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_research">Riset</a>
|
|
<a href="karya.html?filter=pkm" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_community">Pengabdian Masyarakat</a>
|
|
<a href="content.html?type=rubrik" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_achievements">Prestasi</a>
|
|
<a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_info_agenda">Info & Agenda</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Kontak -->
|
|
<div class="pt-2 border-t border-slate-200 pb-8">
|
|
<span class="text-xs font-bold text-slate-400 uppercase font-serif"
|
|
data-i18n="nav_contact">Kontak</span>
|
|
<div class="pl-2 border-l-2 border-slate-100 mt-1 space-y-1">
|
|
<a href="content.html?type=berita" class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_official_contact">Kontak Resmi</a>
|
|
<a href="https://mail.google.com/mail/?view=cm&fs=1&to=info@informatika.untan.ac.id" target="_blank" rel="noopener noreferrer"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue"
|
|
data-i18n="link_feedback">Saran & Masukan</a>
|
|
<a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue flex items-center gap-2">
|
|
<i class="fab fa-instagram text-pink-500"></i> Instagram
|
|
</a>
|
|
<a href="#"
|
|
class="block py-1.5 text-sm text-slate-700 hover:text-untan-blue flex items-center gap-2">
|
|
<i class="fab fa-youtube text-red-500"></i> YouTube
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
}
|