forked from izu/student-web-if-development-kit
2567 lines
161 KiB
HTML
2567 lines
161 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id" class="scroll-smooth">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Group 07 – LIMA EM | Informatika UNTAN</title>
|
|
<link href="./assets/css/output.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="../../assets/global/output.css">
|
|
<link rel="stylesheet" href="./style.css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
|
|
rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<style>
|
|
/* ===== MOBILE NAV STABILITY FIX =====
|
|
Prevents logo bar from collapsing/shifting on Android when
|
|
address bar hides/shows and triggers viewport reflow.
|
|
===================================== */
|
|
#nav-wrapper {
|
|
position: fixed !important;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 50;
|
|
backface-visibility: hidden;
|
|
-webkit-backface-visibility: hidden;
|
|
will-change: box-shadow;
|
|
}
|
|
|
|
#nav-wrapper>div:first-child {
|
|
transform: translateZ(0);
|
|
-webkit-transform: translateZ(0);
|
|
}
|
|
|
|
@media (max-width: 1023px) {
|
|
#nav-wrapper>div:first-child {
|
|
min-height: 0 !important;
|
|
max-height: none;
|
|
}
|
|
}
|
|
|
|
#pengumuman-bar {
|
|
z-index: 40;
|
|
}
|
|
|
|
#pengumuman-bar.is-stuck {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 40;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
/* Skip Link Styling */
|
|
.skip-link {
|
|
position: absolute;
|
|
top: -40px;
|
|
left: 0;
|
|
background: #003150;
|
|
color: white;
|
|
padding: 8px 16px;
|
|
z-index: 100;
|
|
transition: top 0.3s;
|
|
}
|
|
|
|
.skip-link:focus {
|
|
top: 0;
|
|
}
|
|
|
|
/* Focus visible for better keyboard navigation */
|
|
:focus-visible {
|
|
outline: 3px solid #feb401;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Mega Menu Styles */
|
|
.hero-pagination .swiper-pagination-bullet {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.4);
|
|
display: inline-block;
|
|
margin: 0 4px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.hero-pagination .swiper-pagination-bullet-active {
|
|
background: rgba(255, 255, 255, 1);
|
|
width: 24px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.mega-panel {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.2s ease, visibility 0.2s ease;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.mega-panel.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
/* Overlay transition */
|
|
#mega-overlay {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.2s ease, visibility 0.2s ease;
|
|
}
|
|
|
|
#mega-overlay.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.mega-link-card {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
border-radius: 0.75rem;
|
|
border: 1px solid #e2e8f0;
|
|
background: white;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.mega-link-card:hover {
|
|
border-color: #3b82f6;
|
|
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.mega-link-icon {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
border-radius: 0.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.nav-menu-btn.active {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
color: #1e40af;
|
|
}
|
|
|
|
.nav-menu-btn:hover {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
/* Mega menu positioning - no gap */
|
|
#main-nav {
|
|
position: relative;
|
|
}
|
|
|
|
#mega-menu-container {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#mega-menu-container .mega-panel {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* Keep pointer bridge under nav to prevent hover loss */
|
|
.nav-menu-item {
|
|
position: relative;
|
|
}
|
|
|
|
.nav-menu-item::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -12px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 12px;
|
|
}
|
|
|
|
/* ===== Luco Chatbot Animations ===== */
|
|
@keyframes slideInRight {
|
|
from {
|
|
transform: translateX(100px);
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
transform: translateY(10px);
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes lucoPulse {
|
|
|
|
0%,
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
#luco-container {
|
|
animation: slideInRight 0.5s ease-out forwards;
|
|
}
|
|
|
|
#luco-bubble {
|
|
animation: fadeInUp 0.3s ease-out forwards;
|
|
width: min(18rem, calc(100vw - 2rem));
|
|
}
|
|
|
|
#luco-btn {
|
|
animation: lucoPulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
#luco-btn:hover {
|
|
animation: none;
|
|
}
|
|
|
|
/* Typing indicator */
|
|
.typing-indicator span {
|
|
display: inline-block;
|
|
animation: bounce 1.4s infinite ease-in-out;
|
|
}
|
|
|
|
.typing-indicator span:nth-child(1) {
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.typing-indicator span:nth-child(2) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.typing-indicator span:nth-child(3) {
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
@keyframes bounce {
|
|
|
|
0%,
|
|
80%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
40% {
|
|
transform: translateY(-6px);
|
|
}
|
|
}
|
|
|
|
/* Luco speech bubble arrow */
|
|
#luco-bubble .bubble-arrow {
|
|
position: absolute;
|
|
right: 24px;
|
|
bottom: -6px;
|
|
width: 12px;
|
|
height: 12px;
|
|
background: white;
|
|
transform: rotate(45deg);
|
|
border-right: 1px solid #e2e8f0;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="text-slate-800 antialiased bg-white selection:bg-untan-yellow selection:text-black">
|
|
|
|
<a href="#main-content" class="skip-link" data-i18n="skip_to_content">Langsung ke Konten Utama</a>
|
|
|
|
<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"
|
|
onclick="const p=document.getElementById('access-panel'); if (p) { p.classList.toggle('hidden'); p.classList.toggle('flex'); }">
|
|
<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="mailto:info@informatika.untan.ac.id" 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"
|
|
onclick="const p=document.getElementById('access-panel'); if (p) { p.classList.toggle('hidden'); p.classList.toggle('flex'); }">
|
|
<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="mailto:info@informatika.untan.ac.id"
|
|
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>
|
|
|
|
<main id="main-content" class="min-h-screen bg-white">
|
|
|
|
<div id="assignment-body" class="w-full">
|
|
<!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
|
|
<!-- Hero Section -->
|
|
<header class="relative w-full min-h-screen flex items-center overflow-hidden" style="padding-top: 92px;">
|
|
|
|
<img id="api-hero-bg" src="./assets/images/bg-kehidupan-mahasiswa.png" alt="Foto Kegiatan Mahasiswa"
|
|
class="absolute inset-0 w-full h-full object-cover z-0" />
|
|
|
|
<div class="absolute inset-0 z-0"
|
|
style="background: linear-gradient(to right, #003150 0%, rgba(0, 49, 80, 0.8) 50%, transparent 100%);">
|
|
</div>
|
|
|
|
<div class="relative z-10 max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12 py-16 lg:py-24 w-full">
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
|
|
<div class="flex flex-col items-start text-left space-y-6">
|
|
|
|
<div data-i18n="grp_limaem_hero_badge"
|
|
class="font-bold text-xs md:text-sm px-3 py-1 rounded-full ring-1 backdrop-blur-sm cursor-default"
|
|
style="background-color: rgba(254, 180, 1, 0.15); color: #feb401; --tw-ring-color: rgba(254, 180, 1, 0.3); transition: background-color 300ms ease;"
|
|
onmouseover="this.style.backgroundColor='rgba(254, 180, 1, 0.25)'"
|
|
onmouseout="this.style.backgroundColor='rgba(254, 180, 1, 0.15)'">
|
|
COMMUNITY & LEADERSHIP
|
|
</div>
|
|
|
|
<h1 data-i18n-html="grp_limaem_hero_title"
|
|
class="text-3xl md:text-4xl lg:text-5xl font-bold text-white leading-tight">
|
|
Kehidupan Mahasiswa & <span style="color:#feb401;">Himpunan (HMIF)</span>
|
|
</h1>
|
|
|
|
<p data-i18n="grp_limaem_hero_desc"
|
|
class="text-base md:text-lg text-gray-300 font-light leading-relaxed max-w-xl">
|
|
Membangun ekosistem kolaboratif di mana teknologi bertemu dengan
|
|
kreativitas, membentuk calon pemimpin industri masa depan.
|
|
</p>
|
|
|
|
<button data-i18n="grp_limaem_hero_btn"
|
|
onclick="document.getElementById('divisi')?.scrollIntoView({behavior:'smooth'})"
|
|
class="mt-4 bg-transparent border-2 border-white text-white font-bold text-sm md:text-base px-6 py-3 rounded-md transition-all hover:cursor-pointer"
|
|
style="transition: all 0.25s ease;"
|
|
onmouseover="this.style.backgroundColor='#feb401'; this.style.color='#003150'; this.style.borderColor='#feb401';"
|
|
onmouseout="this.style.backgroundColor='transparent'; this.style.color='white'; this.style.borderColor='white';">
|
|
Lihat Struktur Kepengurusan
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<div class="hidden lg:block"></div>
|
|
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- About Section -->
|
|
<section id="about" class="bg-white overflow-hidden">
|
|
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-16 pt-20 lg:pt-24 pb-16">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 items-start">
|
|
|
|
<!-- ─── Left: Text Content ─── -->
|
|
<div class="flex flex-col gap-8 order-1 lg:pr-6">
|
|
|
|
<!-- Heading -->
|
|
<h2 data-i18n="grp_limaem_about_title"
|
|
class="text-3xl lg:text-4xl xl:text-5xl font-extrabold text-hmif-primary leading-snug">
|
|
Ruang Tumbuh Bagi<br>Mahasiswa Informatika
|
|
</h2>
|
|
|
|
<!-- Paragraf -->
|
|
<div class="space-y-4 text-gray-500 text-base lg:text-[17px] leading-relaxed">
|
|
<p data-i18n="grp_limaem_about_p1">
|
|
Himpunan Mahasiswa Informatika (HMIF) Universitas Tanjungpura bukan sekadar
|
|
organisasi, melainkan rumah bagi para pemimpin teknologi. Kami percaya bahwa
|
|
pendidikan formal adalah fondasi, namun komunitas adalah akselerator.
|
|
</p>
|
|
<p data-i18n="grp_limaem_about_p2">
|
|
Melalui berbagai inisiatif, kami menjembatani kesenjangan antara kurikulum
|
|
akademik dan kebutuhan industri, sambil tetap menjaga semangat kekeluargaan
|
|
dan integritas ilmiah.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Stats -->
|
|
<div class="flex gap-12 lg:gap-16 pt-6 border-t border-gray-100">
|
|
<div>
|
|
<p
|
|
class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums">
|
|
518</p>
|
|
<p data-i18n="grp_limaem_about_stat_students"
|
|
class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3">
|
|
Mahasiswa Aktif
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p
|
|
class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums">
|
|
8</p>
|
|
<p data-i18n="grp_limaem_about_stat_partners"
|
|
class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3">
|
|
MITRA
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ─── Right: Photo ─── -->
|
|
<div class="order-2 relative mt-8 lg:mt-0 lg:pl-4">
|
|
|
|
<!-- Offset shadow block biru tua, posisi % (ikut skala zoom) -->
|
|
<div class="absolute top-[4%] left-[8%] right-[-4%] bottom-[-4%]
|
|
bg-hmif-primary rounded-2xl lg:rounded-3xl z-0 shadow-2xl"></div>
|
|
|
|
<!-- Frame foto — overflow hidden, foto full width tanpa crop -->
|
|
<div
|
|
class="relative rounded-2xl lg:rounded-3xl overflow-hidden shadow-2xl z-10 group cursor-default"
|
|
style="height: 420px;">
|
|
<img src="./assets/images/ruang-tumbuh/ruangtumbuh_foto.jpeg"
|
|
alt="Ruang Tumbuh HMIF Universitas Tanjungpura" class="w-full h-full object-cover block
|
|
transition-transform duration-700 ease-out group-hover:scale-[1.03]" />
|
|
<!-- Gradient overlay bawah -->
|
|
<div class="absolute inset-0
|
|
bg-gradient-to-t from-hmif-primary/45 via-transparent to-transparent
|
|
opacity-70 group-hover:opacity-45 transition-opacity duration-500">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Badge Inklusivitas & Kolaborasi pojok kiri bawah -->
|
|
<div class="absolute z-20 bottom-[-3%] left-[0%]
|
|
bg-hmif-secondary text-hmif-primary
|
|
rounded-xl px-4 py-3 text-center shadow-2xl
|
|
border-2 border-white/20" style="min-width: 120px; max-width: 140px;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
stroke-width="2.5" stroke="currentColor" class="w-6 h-6 mx-auto mb-1"
|
|
aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197m6.22-7.496a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6-3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-12 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
|
|
</svg>
|
|
<p data-i18n="grp_limaem_about_badge"
|
|
class="text-[11px] lg:text-xs font-bold leading-snug">
|
|
Inklusivitas &<br>Kolaborasi
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Partner & Kolaborator -->
|
|
<section id="partners" class="bg-white pb-16">
|
|
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
|
|
<h2 data-i18n="grp_limaem_partners_title"
|
|
class="text-2xl lg:text-3xl font-extrabold text-gray-900 mb-10">
|
|
Partner dan Kolaborator
|
|
</h2>
|
|
|
|
<div class="flex flex-wrap gap-6 lg:gap-10 items-center">
|
|
<!-- Partner Aktif (Terbaru) - ring kuning + glow -->
|
|
<a href="https://www.instagram.com/namakucoffee.id?igsh=MXYyMnI3ZTNmMGxtZQ==" target="_blank"
|
|
rel="noopener noreferrer" aria-label="Partner Aktif - Namaku"
|
|
style="display:inline-block; border-radius:9999px; transition: transform 0.2s ease;"
|
|
onmouseover="this.style.transform='scale(1.1)'"
|
|
onmouseout="this.style.transform='scale(1)'">
|
|
<img src="./assets/images/ruang-tumbuh/partner/namaku.jpeg" alt="Namaku"
|
|
title="Partner Aktif" style="width:5rem; height:5rem; border-radius:9999px; object-fit:cover; display:block;
|
|
border: 4px solid #feb401;
|
|
box-shadow: 0 0 0 2px rgba(254,180,1,0.4), 0 4px 16px rgba(254,180,1,0.3);
|
|
transition: box-shadow 0.2s ease;" />
|
|
</a>
|
|
|
|
<!-- Partner Aktif (Sobat Konveksi) - ring kuning + glow -->
|
|
<a href="https://www.instagram.com/sobat.konveksi?igsh=OWxkZGJtMjhjeDZj" target="_blank"
|
|
rel="noopener noreferrer" aria-label="Partner Aktif - Sobat Konveksi"
|
|
style="display:inline-block; border-radius:9999px; transition: transform 0.2s ease;"
|
|
onmouseover="this.style.transform='scale(1.1)'"
|
|
onmouseout="this.style.transform='scale(1)'">
|
|
<img src="./assets/images/ruang-tumbuh/partner/sobatkonveksi.jpeg" alt="Sobat Konveksi"
|
|
title="Partner Aktif" style="width:5rem; height:5rem; border-radius:9999px; object-fit:cover; display:block;
|
|
border: 4px solid #feb401;
|
|
box-shadow: 0 0 0 2px rgba(254,180,1,0.4), 0 4px 16px rgba(254,180,1,0.3);
|
|
transition: box-shadow 0.2s ease;" />
|
|
</a>
|
|
|
|
<!-- Partner Legacy (Ayani) - abu-abu, hover tampil warna asli -->
|
|
<div style="display:inline-block; border-radius:9999px; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor:default;"
|
|
onmouseover="this.style.transform='scale(1.1)'; this.querySelector('img').style.filter='grayscale(0%)';"
|
|
onmouseout="this.style.transform='scale(1)'; this.querySelector('img').style.filter='grayscale(100%)';">
|
|
<img src="./assets/images/ruang-tumbuh/partner/ayanimegamall.jpeg" alt="Ayani Megamall"
|
|
style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
|
|
filter: grayscale(100%); transition: filter 0.3s ease;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.15);" />
|
|
</div>
|
|
|
|
<!-- Partner Legacy (Indofood) -->
|
|
<div style="display:inline-block; border-radius:9999px; transition: transform 0.3s ease; cursor:default;"
|
|
onmouseover="this.style.transform='scale(1.1)'; this.querySelector('img').style.filter='grayscale(0%)';"
|
|
onmouseout="this.style.transform='scale(1)'; this.querySelector('img').style.filter='grayscale(100%)';">
|
|
<img src="./assets/images/ruang-tumbuh/partner/indofood.jpeg" alt="Indofood" style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
|
|
filter: grayscale(100%); transition: filter 0.3s ease;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.15);" />
|
|
</div>
|
|
|
|
<!-- Partner Legacy (Playhera) -->
|
|
<div style="display:inline-block; border-radius:9999px; transition: transform 0.3s ease; cursor:default;"
|
|
onmouseover="this.style.transform='scale(1.1)'; this.querySelector('img').style.filter='grayscale(0%)';"
|
|
onmouseout="this.style.transform='scale(1)'; this.querySelector('img').style.filter='grayscale(100%)';">
|
|
<img src="./assets/images/ruang-tumbuh/partner/playhera.jpeg" alt="Playhera" style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
|
|
filter: grayscale(100%); transition: filter 0.3s ease;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.15);" />
|
|
</div>
|
|
|
|
<!-- Partner Legacy (PLN) -->
|
|
<div style="display:inline-block; border-radius:9999px; transition: transform 0.3s ease; cursor:default;"
|
|
onmouseover="this.style.transform='scale(1.1)'; this.querySelector('img').style.filter='grayscale(0%)';"
|
|
onmouseout="this.style.transform='scale(1)'; this.querySelector('img').style.filter='grayscale(100%)';">
|
|
<img src="./assets/images/ruang-tumbuh/partner/pln.jpeg" alt="PLN" style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
|
|
filter: grayscale(100%); transition: filter 0.3s ease;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.15);" />
|
|
</div>
|
|
|
|
<!-- Partner Legacy (RTech) -->
|
|
<div style="display:inline-block; border-radius:9999px; transition: transform 0.3s ease; cursor:default;"
|
|
onmouseover="this.style.transform='scale(1.1)'; this.querySelector('img').style.filter='grayscale(0%)';"
|
|
onmouseout="this.style.transform='scale(1)'; this.querySelector('img').style.filter='grayscale(100%)';">
|
|
<img src="./assets/images/ruang-tumbuh/partner/rtech.jpeg" alt="RTech" style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
|
|
filter: grayscale(100%); transition: filter 0.3s ease;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.15);" />
|
|
</div>
|
|
|
|
<!-- Partner Legacy (Rumangsa) -->
|
|
<div style="display:inline-block; border-radius:9999px; transition: transform 0.3s ease; cursor:default;"
|
|
onmouseover="this.style.transform='scale(1.1)'; this.querySelector('img').style.filter='grayscale(0%)';"
|
|
onmouseout="this.style.transform='scale(1)'; this.querySelector('img').style.filter='grayscale(100%)';">
|
|
<img src="./assets/images/ruang-tumbuh/partner/rumangsa.jpeg" alt="Rumangsa" style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
|
|
filter: grayscale(100%); transition: filter 0.3s ease;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.15);" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Divisi Kepengurusan HMIF Section -->
|
|
<section id="divisi" class="bg-hmif-primary text-white py-20 lg:py-24">
|
|
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
|
|
<!-- Header -->
|
|
<div class="mb-12 md:mb-16 max-w-3xl">
|
|
<h2 data-i18n="grp_limaem_divisi_title"
|
|
class="text-3xl md:text-4xl lg:text-5xl font-bold text-hmif-secondary leading-tight mb-4">
|
|
Divisi Kepengurusan HMIF
|
|
</h2>
|
|
<p data-i18n="grp_limaem_divisi_desc"
|
|
class="text-base md:text-lg text-slate-300 font-light leading-relaxed">
|
|
Struktur organisasi yang dirancang untuk efisiensi dan pengembangan kapasitas anggota di
|
|
berbagai
|
|
bidang strategis.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Grid Card Container -->
|
|
<div
|
|
class="border border-white/10 rounded-2xl bg-white/[0.01] backdrop-blur-md grid grid-cols-1 md:grid-cols-3 overflow-hidden">
|
|
<!-- Bidang 1 -->
|
|
<div class="group flex flex-col space-y-3 cursor-default p-8 lg:p-10">
|
|
<span data-i18n="grp_limaem_divisi_b1_label"
|
|
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
|
|
Bidang 1
|
|
</span>
|
|
<h3 data-i18n="grp_limaem_divisi_b1_title"
|
|
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
|
|
Pengembangan Sumber Daya Mahasiswa dan Kaderisasi
|
|
</h3>
|
|
<p data-i18n="grp_limaem_divisi_b1_desc"
|
|
class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
|
|
Divisi ini menyelenggarakan kaderisasi terstruktur, mentoring berkala, dan pelatihan
|
|
kepemimpinan serta soft-skill. Program kerja mencakup onboarding anggota baru,
|
|
workshop kepemimpinan, proyek kolaboratif, dan kegiatan pengabdian yang melatih
|
|
tanggung jawab sosial. Fokusnya adalah menyiapkan kader yang kompeten dan
|
|
menjaga regenerasi organisasi.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Bidang 2 -->
|
|
<div class="group flex flex-col space-y-3 cursor-default p-8 lg:p-10">
|
|
<span data-i18n="grp_limaem_divisi_b2_label"
|
|
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
|
|
Bidang 2
|
|
</span>
|
|
<h3 data-i18n="grp_limaem_divisi_b2_title"
|
|
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
|
|
Media Komunikasi dan Konten Digital
|
|
</h3>
|
|
<p data-i18n="grp_limaem_divisi_b2_desc"
|
|
class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
|
|
Divisi ini mengelola strategi komunikasi dan produksi konten HMIF, termasuk
|
|
perencanaan editorial, manajemen media sosial, serta dokumentasi acara. Program
|
|
kerjanya meliputi pembuatan materi promosi, publikasi kegiatan, dan penguatan
|
|
identitas digital agar informasi organisasi tersampaikan konsisten dan menarik.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Bidang 3 -->
|
|
<div class="group flex flex-col space-y-3 cursor-default p-8 lg:p-10">
|
|
<span data-i18n="grp_limaem_divisi_b3_label"
|
|
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
|
|
Bidang 3
|
|
</span>
|
|
<h3 data-i18n="grp_limaem_divisi_b3_title"
|
|
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
|
|
Inovasi dan Kompetisi Teknologi
|
|
</h3>
|
|
<p data-i18n="grp_limaem_divisi_b3_desc"
|
|
class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
|
|
Divisi ini memfasilitasi persiapan lomba dan pengembangan proyek teknis melalui
|
|
coaching clinic, bootcamp berbasis proyek, serta study club untuk Competitive
|
|
Programming, Software Development, dan Data/ML. Kegiatan termasuk seleksi internal,
|
|
bimbingan kompetitif, dan inisiatif digitalisasi seperti pengembangan website
|
|
dan dashboard untuk mendukung ekosistem inovasi HMIF.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Bidang 4 -->
|
|
<div class="group flex flex-col space-y-3 cursor-default p-8 lg:p-10">
|
|
<span data-i18n="grp_limaem_divisi_b4_label"
|
|
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
|
|
Bidang 4
|
|
</span>
|
|
<h3 data-i18n="grp_limaem_divisi_b4_title"
|
|
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
|
|
Pengembangan Organisasi
|
|
</h3>
|
|
<p data-i18n="grp_limaem_divisi_b4_desc"
|
|
class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
|
|
Divisi ini memperkuat tata kelola dan kapabilitas internal melalui pelatihan
|
|
pengurus, penyusunan SOP sederhana, dan evaluasi proses kerja. Program kerjanya
|
|
mencakup pengembangan budaya organisasi, peningkatan efektivitas koordinasi, dan
|
|
kegiatan peningkatan profesionalisme sehingga operasi HMIF menjadi lebih terstruktur
|
|
dan efisien.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Bidang 5 -->
|
|
<div class="group flex flex-col space-y-3 cursor-default p-8 lg:p-10">
|
|
<span data-i18n="grp_limaem_divisi_b5_label"
|
|
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
|
|
Bidang 5
|
|
</span>
|
|
<h3 data-i18n="grp_limaem_divisi_b5_title"
|
|
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
|
|
Sosial Masyarakat
|
|
</h3>
|
|
<p data-i18n="grp_limaem_divisi_b5_desc"
|
|
class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
|
|
Divisi ini merancang dan melaksanakan program pengabdian serta aksi sosial yang
|
|
berdampak, termasuk pendampingan komunitas dan bantuan kemanusiaan. Kegiatan
|
|
meliputi identifikasi kebutuhan lapangan, pelaksanaan terstruktur, dan evaluasi
|
|
dampak untuk memastikan keberlanjutan dan manfaat nyata bagi masyarakat.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Bidang 6 -->
|
|
<div class="group flex flex-col space-y-3 cursor-default p-8 lg:p-10">
|
|
<span data-i18n="grp_limaem_divisi_b6_label"
|
|
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
|
|
Bidang 6
|
|
</span>
|
|
<h3 data-i18n="grp_limaem_divisi_b6_title"
|
|
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
|
|
Kewirausahaan dan Kemitraan
|
|
</h3>
|
|
<p data-i18n="grp_limaem_divisi_b6_desc"
|
|
class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
|
|
Divisi ini mengembangkan unit usaha organisasi, merancang skema pendanaan kreatif,
|
|
dan menjalin kemitraan strategis untuk mendukung keberlanjutan program HMIF. Unit
|
|
kerjanya meliputi riset peluang usaha, penyusunan proposal kemitraan, dan
|
|
pengelolaan sponsor untuk meningkatkan kemandirian finansial dan akses jaringan
|
|
profesional.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Kegiatan Unggulan Section -->
|
|
<section id="kegiatan-unggulan" class="bg-white py-20 lg:py-24">
|
|
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12 relative w-full">
|
|
<!-- Header -->
|
|
<div class="mb-12">
|
|
<h2 data-i18n="grp_limaem_kegiatan_title"
|
|
class="text-3xl font-extrabold text-hmif-primary tracking-tight">
|
|
Kegiatan Unggulan
|
|
</h2>
|
|
<p data-i18n="grp_limaem_kegiatan_subtitle" class="text-sm text-gray-500 mt-2 font-medium">
|
|
Kegiatan tahunan yang menjadi ikon Informatika UNTAN.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Slider Container with Arrows -->
|
|
<div class="relative flex items-center">
|
|
<!-- Left Arrow Button -->
|
|
<button id="slider-prev"
|
|
class="absolute -left-4 lg:-left-12 z-10 w-11 h-11 bg-white border border-gray-200 hover:border-hmif-primary rounded-full flex items-center justify-center shadow-md hover:shadow-lg text-slate-600 hover:text-hmif-primary transition-all cursor-pointer"
|
|
aria-label="Sebelumnya">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
|
|
stroke="currentColor" class="w-5 h-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Viewport / Overflow Wrapper -->
|
|
<div class="overflow-hidden w-full" id="slider-viewport">
|
|
<!-- Track holds all cards in a single row -->
|
|
<div id="slider-track" class="flex gap-8 transition-transform duration-500 ease-in-out">
|
|
|
|
<!-- Card 1 Silaturahmi Keluarga Besar Informatika-->
|
|
<div
|
|
class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
|
|
<div
|
|
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
|
<img src="./assets/images/kegiatan-unggulan/SKBI.jpeg"
|
|
alt="Silaturahmi Keluarga Besar"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</div>
|
|
<div class="flex items-start gap-4 mt-6">
|
|
<div
|
|
class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
|
|
<span
|
|
class="text-lg font-extrabold text-hmif-primary leading-none">27</span>
|
|
<span
|
|
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Feb</span>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<h3 data-i18n="grp_limaem_kegiatan_c1_title"
|
|
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
|
|
Silaturahmi Keluarga Besar Informatika</h3>
|
|
<p data-i18n="grp_limaem_kegiatan_c1_desc"
|
|
class="text-sm text-gray-500 leading-relaxed font-light">Kegiatan buka
|
|
bersama
|
|
seluruh keluarga Informatika Untan yang selalu diadakan setiap tahunnya.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 2 Gemastik -->
|
|
<div
|
|
class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
|
|
<div
|
|
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
|
<img src="./assets/images/kegiatan-unggulan/gemastik.jpg" alt="Bootcamp HMIF"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</div>
|
|
<div class="flex items-start gap-4 mt-6">
|
|
<div
|
|
class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
|
|
<span class="text-lg font-extrabold text-hmif-primary leading-none">1</span>
|
|
<span
|
|
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Jul</span>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<h3
|
|
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
|
|
GEMASTIK</h3>
|
|
<p data-i18n="grp_limaem_kegiatan_c2_desc"
|
|
class="text-sm text-gray-500 leading-relaxed font-light"> Ajang
|
|
kompetisi IT bergengsi tingkat nasional tahunan dari kementerian.
|
|
Wadah bagi mahasiswa Informatika UNTAN untuk unjuk
|
|
gigi di bidang <em>programming</em>, <em>cyber security</em>, <em>data
|
|
mining</em>, hingga UI/UX.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 3 17 agustus -->
|
|
<div
|
|
class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
|
|
<div
|
|
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
|
<img src="./assets/images/kegiatan-unggulan/17-agustus.jpeg"
|
|
alt="Perayaan 17 Agustus"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</div>
|
|
<div class="flex items-start gap-4 mt-6">
|
|
<div
|
|
class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
|
|
<span
|
|
class="text-lg font-extrabold text-hmif-primary leading-none">17</span>
|
|
<span
|
|
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Agu</span>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<h3 data-i18n="grp_limaem_kegiatan_c3_title"
|
|
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
|
|
Perayaan 17 Agustus</h3>
|
|
<p data-i18n="grp_limaem_kegiatan_c3_desc"
|
|
class="text-sm text-gray-500 leading-relaxed font-light">Momen perayaan
|
|
Hari Kemerdekaan Indonesia yang diisi dengan berbagai perlombaan
|
|
menarik.
|
|
Ajang seru-seruan bersama untuk mempererat rasa nasionalisme dan
|
|
kekeluargaan mahasiswa Informatika.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 3 Bootcamp -->
|
|
<div
|
|
class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
|
|
<div
|
|
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
|
<img src="./assets/images/kegiatan-unggulan/bootcamp.jpeg" alt="Bootcamp HMIF"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</div>
|
|
<div class="flex items-start gap-4 mt-6">
|
|
<div
|
|
class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
|
|
<span
|
|
class="text-lg font-extrabold text-hmif-primary leading-none">28</span>
|
|
<span
|
|
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Agu</span>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<h3
|
|
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
|
|
Bootcamp HMIF</h3>
|
|
<p data-i18n="grp_limaem_kegiatan_c4_desc"
|
|
class="text-sm text-gray-500 leading-relaxed font-light">Program
|
|
intensif
|
|
pengembangan skill teknis mahasiswa Informatika bersama mentor
|
|
profesional dari
|
|
industri.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 5 UPC 2025 -->
|
|
<div
|
|
class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
|
|
<div
|
|
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
|
<img src="./assets/images/kegiatan-unggulan/upc.jpg" alt="UPC 2025"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</div>
|
|
<div class="flex items-start gap-4 mt-6">
|
|
<div
|
|
class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
|
|
<span
|
|
class="text-lg font-extrabold text-hmif-primary leading-none">20</span>
|
|
<span
|
|
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Okt</span>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<h3
|
|
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
|
|
UPC</h3>
|
|
<p data-i18n="grp_limaem_kegiatan_c5_desc"
|
|
class="text-sm text-gray-500 leading-relaxed font-light">Kompetisi
|
|
Pemograman untuk
|
|
mengasah skill coding mahasiswa Informatika.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 6 Study Excursion -->
|
|
<div
|
|
class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
|
|
<div
|
|
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
|
<img src="./assets/images/kegiatan-unggulan/SE.jpeg" alt="Study Excursion"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</div>
|
|
<div class="flex items-start gap-4 mt-6">
|
|
<div
|
|
class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
|
|
<span
|
|
class="text-lg font-extrabold text-hmif-primary leading-none">20</span>
|
|
<span
|
|
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Okt</span>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<h3 data-i18n="grp_limaem_kegiatan_c6_title"
|
|
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
|
|
Study Excursion</h3>
|
|
<p data-i18n="grp_limaem_kegiatan_c6_desc"
|
|
class="text-sm text-gray-500 leading-relaxed font-light">Study Excursion
|
|
menjadi pengalaman
|
|
berharga bagi mahasiswa semester 5 untuk belajar di luar kampus,
|
|
memperluas wawasan,
|
|
mengenal suasana baru, serta menciptakan kenangan berkesan bersama
|
|
selama perjalanan.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 7 Informers -->
|
|
<div
|
|
class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
|
|
<div
|
|
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
|
<img src="./assets/images/kegiatan-unggulan/informers.jpg"
|
|
alt="Ultah Informatika"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</div>
|
|
<div class="flex items-start gap-4 mt-6">
|
|
<div
|
|
class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
|
|
<span
|
|
class="text-lg font-extrabold text-hmif-primary leading-none">25</span>
|
|
<span
|
|
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Okt</span>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<h3 data-i18n="grp_limaem_kegiatan_c7_title"
|
|
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
|
|
INFORMERS</h3>
|
|
<p data-i18n="grp_limaem_kegiatan_c7_desc"
|
|
class="text-sm text-gray-500 leading-relaxed font-light">Perayaan ulang
|
|
tahun
|
|
Informatika UNTAN, momen kebersamaan dan kebanggaan seluruh keluarga
|
|
besar
|
|
Informatika.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- end slider-track -->
|
|
</div><!-- end slider-viewport -->
|
|
|
|
<!-- Right Arrow Button -->
|
|
<button id="slider-next"
|
|
class="absolute -right-4 lg:-right-12 z-10 w-11 h-11 bg-white border border-gray-200 hover:border-hmif-primary rounded-full flex items-center justify-center shadow-md hover:shadow-lg text-slate-600 hover:text-hmif-primary transition-all cursor-pointer"
|
|
aria-label="Berikutnya">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
|
|
stroke="currentColor" class="w-5 h-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Dot Indicators — akan di-render ulang oleh JS, ini hanya placeholder awal -->
|
|
<div id="slider-dots" class="flex justify-center gap-2 mt-10">
|
|
<button class="slider-dot h-2.5 w-6 rounded-full bg-hmif-primary transition-all duration-300"
|
|
data-index="0" aria-label="Slide 1"></button>
|
|
<button
|
|
class="slider-dot h-2.5 w-2.5 rounded-full bg-gray-200 transition-all duration-300 cursor-pointer"
|
|
data-index="1" aria-label="Slide 2"></button>
|
|
<button
|
|
class="slider-dot h-2.5 w-2.5 rounded-full bg-gray-200 transition-all duration-300 cursor-pointer"
|
|
data-index="2" aria-label="Slide 3"></button>
|
|
<button
|
|
class="slider-dot h-2.5 w-2.5 rounded-full bg-gray-200 transition-all duration-300 cursor-pointer"
|
|
data-index="3" aria-label="Slide 4"></button>
|
|
<button
|
|
class="slider-dot h-2.5 w-2.5 rounded-full bg-gray-200 transition-all duration-300 cursor-pointer"
|
|
data-index="4" aria-label="Slide 5"></button>
|
|
<button
|
|
class="slider-dot h-2.5 w-2.5 rounded-full bg-gray-200 transition-all duration-300 cursor-pointer"
|
|
data-index="5" aria-label="Slide 6"></button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Study Club Section -->
|
|
<section id="study-clubs" class="bg-[#EEF2FC]/70 py-20 lg:py-24 border-t border-b border-gray-100">
|
|
<div class="max-w-none mx-auto px-6 lg:px-16 xl:px-24 w-full">
|
|
<!-- Centered Header -->
|
|
<div class="text-center max-w-3xl mx-auto mb-16 flex flex-col items-center">
|
|
<h2 class="text-2xl font-extrabold text-hmif-primary tracking-widest uppercase">
|
|
STUDY CLUB
|
|
</h2>
|
|
<div class="w-16 h-1 bg-hmif-secondary mt-3 rounded-full"></div>
|
|
</div>
|
|
|
|
<!-- Cards Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<!-- CP Card -->
|
|
<div
|
|
class="bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-md border border-gray-100/50 transition-all duration-300 flex flex-col space-y-6">
|
|
<div class="text-[#b48608]">
|
|
<!-- Brackets Icon -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
|
stroke="currentColor" class="w-8 h-8">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
|
|
</svg>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<h3 class="text-lg font-bold text-hmif-primary">
|
|
ARISE
|
|
</h3>
|
|
<p data-i18n="grp_limaem_sc_arise_desc"
|
|
class="text-sm text-gray-500 leading-relaxed font-light">
|
|
Belajar logika dan algoritma bersama, di mana kalian bisa berkembang dan membuka
|
|
peluang
|
|
mengikuti kompetisi pemrograman di berbagai level.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Data Mining Card -->
|
|
<div
|
|
class="bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-md border border-gray-100/50 transition-all duration-300 flex flex-col space-y-6">
|
|
<div class="text-[#b48608]">
|
|
<!-- Shield Icon -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
|
stroke="currentColor" class="w-8 h-8">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
|
|
</svg>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<h3 class="text-lg font-bold text-hmif-primary">
|
|
MINERVA
|
|
</h3>
|
|
<p data-i18n="grp_limaem_sc_minerva_desc"
|
|
class="text-sm text-gray-500 leading-relaxed font-light">
|
|
Gali potensi tersembunyi dari tumpukan data! Di sini kita akan bereksplorasi dengan
|
|
algoritma <em>Machine Learning</em>, membedah teknik klasifikasi, hingga melatih
|
|
model
|
|
prediktif untuk menghasilkan <em>insight</em> yang bermakna.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- Software Development Card -->
|
|
<div
|
|
class="bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-md border border-gray-100/50 transition-all duration-300 flex flex-col space-y-6">
|
|
<div class="text-[#b48608]">
|
|
<!-- Layout Dashboard Icon -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
|
stroke="currentColor" class="w-8 h-8">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25" />
|
|
</svg>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<h3 class="text-lg font-bold text-hmif-primary">
|
|
Software Development (Soon)
|
|
</h3>
|
|
<p data-i18n="grp_limaem_sc_sd_desc"
|
|
class="text-sm text-gray-500 leading-relaxed font-light">
|
|
Wujudkan idemu jadi produk digital yang nyata! Kita akan ngoding bareng dari
|
|
merancang
|
|
<em>frontend</em> yang interaktif, membangun <em>backend</em> yang tangguh, serta
|
|
mengintegrasikan berbagai API untuk menciptakan aplikasi web masa kini.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Galeri Keseruan Section -->
|
|
<section id="galeri" class="bg-white py-20 lg:py-24">
|
|
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
|
|
|
|
<!-- Header -->
|
|
<div class="text-center mb-12">
|
|
<h2 data-i18n="grp_limaem_galeri_title"
|
|
class="text-3xl lg:text-4xl font-bold text-hmif-primary">
|
|
Galeri Keseruan
|
|
</h2>
|
|
</div>
|
|
|
|
<!-- Slider Wrapper -->
|
|
<div class="relative">
|
|
|
|
<!-- Left Arrow Button -->
|
|
<button id="galeri-prev" style="top: 50%; transform: translateY(-50%);"
|
|
class="absolute -left-4 lg:-left-12 z-10 w-11 h-11 bg-white border border-gray-200 hover:border-hmif-primary rounded-full flex items-center justify-center shadow-md hover:shadow-lg text-slate-600 hover:text-hmif-primary transition-all cursor-pointer"
|
|
aria-label="Sebelumnya">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
|
|
stroke="currentColor" class="w-5 h-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Viewport: overflow-hidden agar slide lain tidak terlihat -->
|
|
<div id="galeri-viewport" class="overflow-hidden rounded-2xl">
|
|
|
|
<!-- Track: semua slide berjejer horizontal -->
|
|
<div id="galeri-track" class="flex transition-transform duration-700 ease-in-out">
|
|
|
|
<!-- ====== Slide 1 ====== -->
|
|
<div class="flex-shrink-0 w-full">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 galeri-grid">
|
|
<!-- Foto besar kiri (span 2 baris) -->
|
|
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx"
|
|
target="_blank" rel="noopener noreferrer"
|
|
class="block w-full h-full col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
|
|
<img src="./assets/images/galeri-keseruan/DSC00636.jpg" alt="UPC V"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</a>
|
|
<!-- Foto kecil kanan atas 1 -->
|
|
<a href="https://instagram.com/hmif_ftuntan" target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
|
<img src="./assets/images/galeri-keseruan/Copy of DSC09492.jpg"
|
|
alt="Gemastik"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</a>
|
|
<!-- Foto kecil kanan atas 2 -->
|
|
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
|
|
target="_blank" rel="noopener noreferrer"
|
|
class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
|
<img src="./assets/images/galeri-keseruan/IMG_0204.jpg" alt="INFORMERS"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</a>
|
|
<!-- Foto lebar kanan bawah (span 2 kolom) -->
|
|
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx"
|
|
target="_blank" rel="noopener noreferrer"
|
|
class="hidden md:block w-full h-full col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
|
<img src="./assets/images/galeri-keseruan/DSC00456.jpg" alt="UPC V"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ====== Slide 2 ====== -->
|
|
<div class="flex-shrink-0 w-full">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 galeri-grid">
|
|
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
|
|
target="_blank" rel="noopener noreferrer"
|
|
class="block w-full h-full col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
|
|
<img src="./assets/images/galeri-keseruan/DSCF8922.jpg"
|
|
alt="Ulang Tahun Informatika"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</a>
|
|
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx"
|
|
target="_blank" rel="noopener noreferrer"
|
|
class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
|
<img src="./assets/images/galeri-keseruan/DSC00091.jpg" alt="UPC V"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</a>
|
|
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx"
|
|
target="_blank" rel="noopener noreferrer"
|
|
class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
|
<img src="./assets/images/galeri-keseruan/DSC03316.jpg"
|
|
alt="Silaturahmi Keluarga Besar Informatika"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</a>
|
|
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
|
|
target="_blank" rel="noopener noreferrer"
|
|
class="hidden md:block w-full h-full col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
|
<img src="./assets/images/galeri-keseruan/IMG_5705.jpg" alt="INFORMERS"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ====== Slide 3 ====== -->
|
|
<div class="flex-shrink-0 w-full">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 galeri-grid">
|
|
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx"
|
|
target="_blank" rel="noopener noreferrer"
|
|
class="block w-full h-full col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
|
|
<img src="./assets/images/galeri-keseruan/DSC00252.jpg" alt="UPC V"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</a>
|
|
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx"
|
|
target="_blank" rel="noopener noreferrer"
|
|
class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
|
<img src="./assets/images/galeri-keseruan/DSC00519.jpg" alt="UPC V"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</a>
|
|
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
|
|
target="_blank" rel="noopener noreferrer"
|
|
class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
|
<img src="./assets/images/galeri-keseruan/IMG_0030.jpg" alt="INFORMERS"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</a>
|
|
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx"
|
|
target="_blank" rel="noopener noreferrer"
|
|
class="hidden md:block w-full h-full col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
|
<img src="./assets/images/galeri-keseruan/DSC01002.jpg" alt="UPC V"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- end galeri-track -->
|
|
</div><!-- end galeri-viewport -->
|
|
|
|
<!-- Right Arrow Button -->
|
|
<button id="galeri-next" style="top: 50%; transform: translateY(-50%);"
|
|
class="absolute -right-4 lg:-right-12 z-10 w-11 h-11 bg-white border border-gray-200 hover:border-hmif-primary rounded-full flex items-center justify-center shadow-md hover:shadow-lg text-slate-600 hover:text-hmif-primary transition-all cursor-pointer"
|
|
aria-label="Berikutnya">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
|
|
stroke="currentColor" class="w-5 h-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
|
</svg>
|
|
</button>
|
|
|
|
</div><!-- end slider wrapper -->
|
|
|
|
<!-- Dot Indicators -->
|
|
<div id="galeri-dots" class="flex justify-center gap-2 mt-8">
|
|
<button class="galeri-dot h-2.5 rounded-full bg-hmif-primary transition-all duration-300 w-6"
|
|
data-index="0" aria-label="Slide 1"></button>
|
|
<button class="galeri-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
|
|
data-index="1" aria-label="Slide 2"></button>
|
|
<button class="galeri-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
|
|
data-index="2" aria-label="Slide 3"></button>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section id="contact-cta" class="bg-[#EEF2FC] py-16 lg:py-20">
|
|
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
|
|
<div
|
|
class="relative overflow-hidden rounded-[24px] bg-[#082A4B] px-5 py-10 sm:px-8 sm:py-12 lg:px-16 lg:py-14 shadow-[0_24px_70px_rgba(4,17,31,0.32)]">
|
|
|
|
<div class="absolute -top-20 -left-16 h-48 w-48 rounded-full bg-white/10 blur-3xl"></div>
|
|
<div class="absolute -bottom-24 -right-20 h-56 w-56 rounded-full bg-hmif-secondary/15 blur-3xl">
|
|
</div>
|
|
<div class="absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-white/5 to-transparent"></div>
|
|
|
|
<div class="relative z-10">
|
|
<div class="mx-auto max-w-4xl text-center">
|
|
<h2 data-i18n="grp_limaem_cta_title"
|
|
class="text-2xl sm:text-3xl lg:text-[38px] font-bold leading-tight text-white">
|
|
Ada yang Ingin Ditanyakan Seputar HMIF?
|
|
</h2>
|
|
|
|
<p data-i18n="grp_limaem_cta_desc"
|
|
class="mx-auto mt-4 max-w-2xl text-xs sm:text-sm lg:text-[15px] leading-relaxed text-white/72">
|
|
Bergabunglah dengan HMIF untuk memperluas jaringan, mengasah skill, dan
|
|
menciptakan dampak nyata.
|
|
</p>
|
|
|
|
<div class="mt-7 flex flex-col items-center justify-center gap-3 sm:flex-row">
|
|
<a href="https://wa.me/6289694492305" target="_blank" rel="noopener noreferrer"
|
|
data-i18n="grp_limaem_cta_btn"
|
|
class="inline-flex items-center justify-center rounded-lg bg-hmif-secondary px-6 py-3 text-sm font-bold text-hmif-primary shadow-[0_10px_24px_rgba(245,200,47,0.35)] transition-transform duration-200 hover:-translate-y-0.5">
|
|
Hubungi Kami
|
|
</a>
|
|
|
|
<div class="flex items-center justify-center gap-3">
|
|
<a href="https://instagram.com/hmif_ftuntan" target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-white/10 bg-white/10 text-white transition-colors duration-200 hover:bg-white/15"
|
|
aria-label="Instagram HMIF">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
|
|
fill="currentColor" class="h-4.5 w-4.5">
|
|
<path
|
|
d="M7.5 2A5.5 5.5 0 0 0 2 7.5v9A5.5 5.5 0 0 0 7.5 22h9a5.5 5.5 0 0 0 5.5-5.5v-9A5.5 5.5 0 0 0 16.5 2h-9Zm9 1.5A4 4 0 0 1 20.5 7.5v9a4 4 0 0 1-4 4h-9a4 4 0 0 1-4-4v-9a4 4 0 0 1 4-4h9Zm-4.5 2.25a5.75 5.75 0 1 0 0 11.5 5.75 5.75 0 0 0 0-11.5Zm0 2a3.75 3.75 0 1 1 0 7.5 3.75 3.75 0 0 1 0-7.5Zm5.9-.95a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6Z" />
|
|
</svg>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-10 border-t border-white/10 pt-8 lg:mt-12 lg:pt-10">
|
|
<div class="grid grid-cols-1 gap-8 md:grid-cols-3 md:gap-6">
|
|
<div class="text-center md:px-4">
|
|
<p data-i18n="grp_limaem_cta_info1_label"
|
|
class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
|
|
Sekretariat
|
|
</p>
|
|
<p data-i18n="grp_limaem_cta_info1_val"
|
|
class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
|
|
Gedung Fakultas Teknik Lt. 2<br>
|
|
Jl. Prof. Dr. H. Hadari Nawawi
|
|
</p>
|
|
</div>
|
|
|
|
<div class="text-center md:px-4 md:border-x md:border-white/10">
|
|
<p data-i18n="grp_limaem_cta_info2_label"
|
|
class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
|
|
Jam Operasional
|
|
</p>
|
|
<p data-i18n="grp_limaem_cta_info2_val"
|
|
class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
|
|
Senin - Jumat<br>
|
|
08:00 - 17:00 WIB
|
|
</p>
|
|
</div>
|
|
|
|
<div class="text-center md:px-4">
|
|
<p data-i18n="grp_limaem_cta_info3_label"
|
|
class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
|
|
Media Sosial
|
|
</p>
|
|
<p class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
|
|
@hmif_ftuntan<br>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="bg-untan-navy text-white pt-16 relative overflow-hidden mt-0">
|
|
<div class="container mx-auto px-4 lg:px-8 relative z-10 flex flex-col items-center justify-center text-center">
|
|
|
|
<h3 class="text-xs font-bold text-slate-300 uppercase tracking-widest mb-4" data-i18n="footer_follow_us">
|
|
Ikuti Kami</h3>
|
|
<div class="flex items-center justify-center gap-5 sm:gap-6 mb-10">
|
|
<a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
|
|
class="text-white hover:text-untan-yellow transition-colors"><i
|
|
class="fab fa-instagram text-xl sm:text-2xl"></i></a>
|
|
<a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
|
|
class="text-white hover:text-untan-yellow transition-colors"><i
|
|
class="fab fa-youtube text-xl sm:text-2xl"></i></a>
|
|
<a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
|
|
class="text-white hover:text-untan-yellow transition-colors"><i
|
|
class="fab fa-facebook-f text-xl sm:text-2xl"></i></a>
|
|
<a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
|
|
class="text-white hover:text-untan-yellow transition-colors"><i
|
|
class="fab fa-twitter text-xl sm:text-2xl"></i></a>
|
|
<a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
|
|
class="text-white hover:text-untan-yellow transition-colors"><i
|
|
class="fab fa-linkedin-in text-xl sm:text-2xl"></i></a>
|
|
<a href="https://instagram.com/informatika.untan" target="_blank" rel="noopener noreferrer"
|
|
class="text-white hover:text-untan-yellow transition-colors"><i
|
|
class="fab fa-tiktok text-xl sm:text-2xl"></i></a>
|
|
</div>
|
|
|
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-6 mb-8 text-left">
|
|
<img src="https://upload.wikimedia.org/wikipedia/id/0/03/Lambang_Universitas_Tanjungpura.png"
|
|
class="h-16 sm:h-20 shrink-0" alt="Logo UNTAN">
|
|
<div
|
|
class="border-t sm:border-t-0 sm:border-l-2 border-white/30 pt-4 sm:pt-0 sm:pl-5 py-1 flex flex-col justify-center leading-tight">
|
|
<h2 class="text-2xl sm:text-3xl font-bold font-sans tracking-widest uppercase mb-1">INFORMATIKA</h2>
|
|
<h2 class="text-xs sm:text-sm font-normal text-slate-200 tracking-widest uppercase mt-0.5">
|
|
UNIVERSITAS TANJUNGPURA</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-5 text-sm sm:text-base text-slate-100 max-w-2xl font-light">
|
|
<p class="flex flex-col sm:flex-row items-center justify-center gap-2 mb-1">
|
|
<i class="fas fa-map-marker-alt text-untan-yellow"></i>
|
|
Jl. Prof. Dr. H. Hadari Nawawi, Bansir Laut, Kec. Pontianak Tenggara,
|
|
</p>
|
|
<p>Kota Pontianak, Kalimantan Barat 78124</p>
|
|
</div>
|
|
|
|
<div
|
|
class="text-xs sm:text-sm text-slate-200 flex flex-wrap justify-center items-center gap-x-3 gap-y-2 mb-12 font-light tracking-wide">
|
|
<span>E: info@informatika.untan.ac.id</span>
|
|
<span class="hidden sm:inline opacity-50">|</span>
|
|
<span>P: +62 851-7165-5161</span>
|
|
<span class="hidden sm:inline opacity-50">|</span>
|
|
<span>F: +62(561) 739637</span>
|
|
<span class="hidden sm:inline opacity-50">|</span>
|
|
<span>WA: +62 851-7165-5161</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="w-full relative z-0 mt-4 pointer-events-none flex justify-center">
|
|
<img src="../../assets/global/footer.png" alt="Footer Illustration"
|
|
class="w-full h-auto object-cover object-bottom" style="object-position: bottom;">
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// =============================================================================
|
|
// main.js — Logika Interaksi Halaman HMIF
|
|
//
|
|
// Struktur:
|
|
// 1. Galeri Keseruan — Slider bento grid foto keseruan
|
|
// 2. Kegiatan Unggulan — Slider kartu kegiatan tahunan
|
|
// =============================================================================
|
|
|
|
// =============================================================================
|
|
// 1. GALERI KESERUAN — SLIDER
|
|
// Slider bento grid foto keseruan dengan auto-slide, navigasi manual,
|
|
// dot indicator, pause on hover, dan recalculate on resize.
|
|
// =============================================================================
|
|
|
|
(function () {
|
|
var AUTO_DELAY_MS = 4000; // 4 detik per slide
|
|
var GAP_PX = 16 * 2; // grid gap-4 = 1rem? but original used gap-4; keep reasonable spacing if needed
|
|
|
|
var track = document.getElementById('galeri-track');
|
|
var viewport = document.getElementById('galeri-viewport');
|
|
var prevBtn = document.getElementById('galeri-prev');
|
|
var nextBtn = document.getElementById('galeri-next');
|
|
var dotsContainer = document.getElementById('galeri-dots');
|
|
|
|
if (!track || !viewport || !prevBtn || !nextBtn) return;
|
|
|
|
var currentSlide = 0;
|
|
var autoSlideTimer;
|
|
var originalHTML = track.innerHTML;
|
|
|
|
// collect all anchor elements (images) in the original order
|
|
var originalAnchors = Array.from((function () {
|
|
var tmp = document.createElement('div'); tmp.innerHTML = originalHTML; return tmp;
|
|
})().querySelectorAll('a'));
|
|
|
|
// builds slides where each slide contains a single image (for small screens)
|
|
function buildSingleImageSlides() {
|
|
var slides = originalAnchors.map(function (a) {
|
|
// clone anchor and remove mobile-hidden class so it becomes visible in single-image slides
|
|
try {
|
|
var clone = a.cloneNode(true);
|
|
if (clone.classList) clone.classList.remove('hidden');
|
|
// also remove inline style display:none if present
|
|
if (clone.style) clone.style.display = '';
|
|
return '<div class="flex-shrink-0 w-full">' +
|
|
'<div class="aspect-video w-full overflow-hidden rounded-xl">' +
|
|
clone.outerHTML +
|
|
'</div></div>';
|
|
} catch (e) {
|
|
return '';
|
|
}
|
|
});
|
|
return slides.join('');
|
|
}
|
|
|
|
function getTotalSlides() {
|
|
return track.children.length;
|
|
}
|
|
|
|
// render dot buttons dynamically according to total slides
|
|
function renderDots(n) {
|
|
if (!dotsContainer) return;
|
|
dotsContainer.innerHTML = '';
|
|
for (var i = 0; i < n; i++) {
|
|
var btn = document.createElement('button');
|
|
btn.className = 'galeri-dot h-2.5 rounded-full transition-all duration-300 ' + (i === 0 ? 'bg-hmif-primary w-6' : 'bg-gray-200 w-2.5');
|
|
btn.setAttribute('data-index', String(i));
|
|
btn.setAttribute('aria-label', 'Slide ' + (i + 1));
|
|
(function (idx) { btn.addEventListener('click', function () { goToSlide(idx); startAutoSlide(); }); })(i);
|
|
dotsContainer.appendChild(btn);
|
|
}
|
|
}
|
|
|
|
function updateDots(activeIndex) {
|
|
if (!dotsContainer) return;
|
|
var dots = dotsContainer.querySelectorAll('button');
|
|
dots.forEach(function (dot, i) {
|
|
if (i === activeIndex) {
|
|
dot.classList.remove('bg-gray-200', 'w-2.5');
|
|
dot.classList.add('bg-hmif-primary', 'w-6');
|
|
} else {
|
|
dot.classList.remove('bg-hmif-primary', 'w-6');
|
|
dot.classList.add('bg-gray-200', 'w-2.5');
|
|
}
|
|
});
|
|
}
|
|
|
|
function rebuildTrackForViewport() {
|
|
var isMobile = window.innerWidth < 768; // md breakpoint
|
|
if (isMobile) {
|
|
track.innerHTML = buildSingleImageSlides();
|
|
} else {
|
|
track.innerHTML = originalHTML;
|
|
}
|
|
renderDots(getTotalSlides());
|
|
}
|
|
|
|
// Pindah ke slide dengan index tertentu, loop otomatis di kedua arah
|
|
function goToSlide(index) {
|
|
var total = getTotalSlides();
|
|
if (total === 0) return;
|
|
currentSlide = ((index % total) + total) % total;
|
|
track.style.transform = 'translateX(-' + (currentSlide * viewport.offsetWidth) + 'px)';
|
|
updateDots(currentSlide);
|
|
}
|
|
|
|
// Mulai atau restart timer auto-slide
|
|
function startAutoSlide() {
|
|
clearInterval(autoSlideTimer);
|
|
autoSlideTimer = setInterval(function () { goToSlide(currentSlide + 1); }, AUTO_DELAY_MS);
|
|
}
|
|
|
|
prevBtn.addEventListener('click', function () { goToSlide(currentSlide - 1); startAutoSlide(); });
|
|
nextBtn.addEventListener('click', function () { goToSlide(currentSlide + 1); startAutoSlide(); });
|
|
|
|
// Pause saat kursor di atas galeri
|
|
viewport.addEventListener('mouseenter', function () { clearInterval(autoSlideTimer); });
|
|
viewport.addEventListener('mouseleave', startAutoSlide);
|
|
|
|
// Recalculate posisi slide saat browser di-resize
|
|
window.addEventListener('resize', function () { rebuildTrackForViewport(); goToSlide(currentSlide); });
|
|
|
|
// initial build
|
|
rebuildTrackForViewport();
|
|
goToSlide(0);
|
|
startAutoSlide();
|
|
})();
|
|
|
|
|
|
// =============================================================================
|
|
// 2. KEGIATAN UNGGULAN — SLIDER
|
|
// Slider kartu kegiatan tahunan yang menampilkan 2 kartu sekaligus pada desktop,
|
|
// dan 1 kartu pada layar sempit. Logika pergantian disesuaikan agar pergeseran
|
|
// selalu berpindah tepat satu item, memperhitungkan gap antar-kartu.
|
|
// =============================================================================
|
|
|
|
(function () {
|
|
var TOTAL_CARDS = 7;
|
|
var AUTO_DELAY_MS = 2000;
|
|
var GAP_PX = 32; // gap-8 = 2rem = 32px (tailwind)
|
|
|
|
var track = document.getElementById('slider-track');
|
|
var viewport = document.getElementById('slider-viewport');
|
|
var prevBtn = document.getElementById('slider-prev');
|
|
var nextBtn = document.getElementById('slider-next');
|
|
var dotsContainer = document.getElementById('slider-dots');
|
|
|
|
if (!track || !viewport || !prevBtn || !nextBtn) return;
|
|
|
|
var current = 0;
|
|
var autoTimer;
|
|
|
|
function getCardsVisible() {
|
|
return window.innerWidth >= 768 ? 2 : 1; // md breakpoint
|
|
}
|
|
|
|
// lebar kartu yang terlihat (tidak termasuk gap)
|
|
function getCardWidth() {
|
|
var visible = getCardsVisible();
|
|
if (visible === 1) return viewport.offsetWidth;
|
|
return (viewport.offsetWidth - GAP_PX) / visible;
|
|
}
|
|
|
|
function getMaxIndex() {
|
|
return Math.max(0, TOTAL_CARDS - getCardsVisible());
|
|
}
|
|
|
|
// Pindah ke posisi slide tertentu; perhitungan berbeda untuk 1 atau 2 kartu
|
|
function goTo(index) {
|
|
var maxIndex = getMaxIndex();
|
|
current = ((index % (maxIndex + 1)) + (maxIndex + 1)) % (maxIndex + 1);
|
|
|
|
if (getCardsVisible() === 1) {
|
|
// langkah pergeseran = viewport width + gap
|
|
var step = viewport.offsetWidth + GAP_PX;
|
|
track.style.transform = 'translateX(-' + (current * step) + 'px)';
|
|
} else {
|
|
var cardW = getCardWidth();
|
|
track.style.transform = 'translateX(-' + (current * (cardW + GAP_PX)) + 'px)';
|
|
}
|
|
|
|
updateDots(current);
|
|
}
|
|
|
|
// Render dot indicators dynamically based on total slides
|
|
function renderSliderDots(n) {
|
|
if (!dotsContainer) return;
|
|
dotsContainer.innerHTML = '';
|
|
for (var i = 0; i < n; i++) {
|
|
var btn = document.createElement('button');
|
|
btn.className = 'slider-dot h-2.5 w-2.5 rounded-full transition-all duration-300 bg-gray-200 cursor-pointer';
|
|
if (i === 0) { btn.classList.remove('w-2.5', 'bg-gray-200'); btn.classList.add('w-6', 'bg-hmif-primary'); }
|
|
btn.setAttribute('data-index', String(i));
|
|
btn.setAttribute('aria-label', 'Slide ' + (i + 1));
|
|
(function (idx) { btn.addEventListener('click', function () { goTo(idx); startAuto(); }); })(i);
|
|
dotsContainer.appendChild(btn);
|
|
}
|
|
}
|
|
|
|
function updateDots(activeIndex) {
|
|
if (!dotsContainer) return;
|
|
var dots = dotsContainer.querySelectorAll('button');
|
|
dots.forEach(function (dot, i) {
|
|
if (i === activeIndex) {
|
|
dot.classList.remove('bg-gray-200', 'w-2.5');
|
|
dot.classList.add('bg-hmif-primary', 'w-6');
|
|
} else {
|
|
dot.classList.remove('bg-hmif-primary', 'w-6');
|
|
dot.classList.add('bg-gray-200', 'w-2.5');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Mulai atau restart timer auto-slide
|
|
function startAuto() {
|
|
clearInterval(autoTimer);
|
|
autoTimer = setInterval(function () { goTo(current + 1); }, AUTO_DELAY_MS);
|
|
}
|
|
|
|
prevBtn.addEventListener('click', function () { goTo(current - 1); startAuto(); });
|
|
nextBtn.addEventListener('click', function () { goTo(current + 1); startAuto(); });
|
|
|
|
// initial render of dots according to current viewport
|
|
renderSliderDots(getMaxIndex() + 1);
|
|
|
|
// Pause saat kursor di atas slider
|
|
viewport.addEventListener('mouseenter', function () { clearInterval(autoTimer); });
|
|
viewport.addEventListener('mouseleave', startAuto);
|
|
|
|
// Recalculate posisi slide and dots saat browser di-resize
|
|
window.addEventListener('resize', function () { renderSliderDots(getMaxIndex() + 1); goTo(current); });
|
|
|
|
goTo(0);
|
|
startAuto();
|
|
})();
|
|
</script>
|
|
|
|
<script>
|
|
(function () {
|
|
const menuItems = document.querySelectorAll('[data-menu]');
|
|
const megaOverlay = document.getElementById('mega-overlay');
|
|
|
|
let activeMenu = null;
|
|
|
|
const menuMap = {
|
|
tentang: 'mega-tentang',
|
|
program: 'mega-program',
|
|
sdm: 'mega-sdm',
|
|
fasilitas: 'mega-fasilitas',
|
|
karya: 'mega-karya',
|
|
kontak: 'mega-kontak'
|
|
};
|
|
|
|
function setButtonState(menuId) {
|
|
menuItems.forEach(item => {
|
|
const isActive = item.getAttribute('data-menu') === menuId;
|
|
const btn = item.querySelector('.nav-menu-btn');
|
|
const chevron = item.querySelector('.fa-chevron-down');
|
|
|
|
btn.classList.toggle('active', isActive);
|
|
btn.setAttribute('aria-expanded', isActive ? 'true' : 'false');
|
|
chevron.style.transform = isActive ? 'rotate(180deg)' : '';
|
|
});
|
|
}
|
|
|
|
function closeMenus() {
|
|
Object.values(menuMap).forEach(panelId => {
|
|
const panel = document.getElementById(panelId);
|
|
if (panel) panel.classList.remove('active');
|
|
});
|
|
|
|
megaOverlay.classList.remove('active');
|
|
setButtonState(null);
|
|
activeMenu = null;
|
|
}
|
|
|
|
function openMenu(menuId) {
|
|
const targetPanel = document.getElementById(menuMap[menuId]);
|
|
if (!targetPanel) return;
|
|
|
|
Object.values(menuMap).forEach(panelId => {
|
|
const panel = document.getElementById(panelId);
|
|
if (panel) panel.classList.remove('active');
|
|
});
|
|
|
|
targetPanel.classList.add('active');
|
|
megaOverlay.classList.add('active');
|
|
setButtonState(menuId);
|
|
activeMenu = menuId;
|
|
}
|
|
|
|
menuItems.forEach(item => {
|
|
const menuId = item.getAttribute('data-menu');
|
|
const button = item.querySelector('.nav-menu-btn');
|
|
|
|
button.setAttribute('aria-haspopup', 'true');
|
|
button.setAttribute('aria-expanded', 'false');
|
|
|
|
button.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
if (activeMenu === menuId) {
|
|
closeMenus();
|
|
} else {
|
|
openMenu(menuId);
|
|
}
|
|
});
|
|
});
|
|
|
|
megaOverlay.addEventListener('click', closeMenus);
|
|
|
|
document.addEventListener('click', (e) => {
|
|
const clickedInsideNav = e.target.closest('#main-nav');
|
|
const clickedInsidePanel = e.target.closest('.mega-panel');
|
|
|
|
if (!clickedInsideNav && !clickedInsidePanel && activeMenu) {
|
|
closeMenus();
|
|
}
|
|
});
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && activeMenu) {
|
|
closeMenus();
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
<script>
|
|
(function () {
|
|
const mobileBtn = document.getElementById('mobile-menu-button');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
const closeMobileBtn = document.getElementById('close-mobile-menu');
|
|
if (mobileBtn && mobileMenu) {
|
|
mobileBtn.addEventListener('click', function () {
|
|
const isOpen = !mobileMenu.classList.contains('-translate-x-full');
|
|
mobileMenu.classList.toggle('-translate-x-full');
|
|
mobileBtn.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
|
|
});
|
|
}
|
|
if (closeMobileBtn && mobileMenu) {
|
|
closeMobileBtn.addEventListener('click', function () {
|
|
mobileMenu.classList.add('-translate-x-full');
|
|
if (mobileBtn) mobileBtn.setAttribute('aria-expanded', 'false');
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
<script src="../../assets/global/localization.js"></script>
|
|
</body>
|
|
|
|
</html> |