forked from izu/student-web-if-development-kit
1050 lines
69 KiB
HTML
1050 lines
69 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Kehidupan Mahasiswa & Himpunan (HMIF)</title>
|
|
|
|
<link href="./assets/css/output.css" rel="stylesheet">
|
|
</head>
|
|
|
|
<body class="bg-[#EEF2FC] text-slate-800">
|
|
<!-- Header -->
|
|
<div id="site-header" class="fixed top-0 left-0 right-0 z-50 shadow-sm">
|
|
<div class="bg-hmif-primary text-white border-b border-white/10">
|
|
<div
|
|
class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-4 lg:px-6 py-3 lg:py-4 flex items-center justify-between">
|
|
<a href="#" class="flex items-center gap-3">
|
|
<img src="https://upload.wikimedia.org/wikipedia/id/0/03/Lambang_Universitas_Tanjungpura.png"
|
|
alt="Logo Universitas Tanjungpura" class="w-9 h-9 lg:w-11 lg:h-11 object-contain" />
|
|
<div class="border-l border-white/25 pl-3 leading-tight">
|
|
<p class="text-sm lg:text-xl font-bold tracking-widest uppercase text-white">INFORMATIKA</p>
|
|
<p class="text-[9px] lg:text-[11px] tracking-[0.2em] uppercase text-slate-200">UNIVERSITAS
|
|
TANJUNGPURA</p>
|
|
</div>
|
|
</a>
|
|
|
|
<div class="hidden lg:flex items-center gap-5 text-[11px] tracking-wide uppercase">
|
|
<a href="https://satu.untan.ac.id" target="_blank" rel="noopener noreferrer"
|
|
class="font-semibold hover:text-hmif-secondary transition-colors">SATU UNTAN</a>
|
|
<div class="h-5 w-px bg-white/20"></div>
|
|
<button id="language-toggle" data-language-toggle type="button"
|
|
class="hover:text-hmif-secondary transition-colors" aria-label="Ganti bahasa"
|
|
aria-pressed="false">ID | EN</button>
|
|
<button class="w-7 h-7 rounded hover:bg-white/10 transition-colors" aria-label="Aksesibilitas">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
|
stroke="currentColor" class="w-4 h-4 mx-auto">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M12 4.5m-1.5 0a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0M9 21l3-6 3 6M6 9.75h12M12 6v9" />
|
|
</svg>
|
|
</button>
|
|
<button class="w-7 h-7 rounded hover:bg-white/10 transition-colors" aria-label="Cari">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
|
stroke="currentColor" class="w-4 h-4 mx-auto">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="m21 21-4.35-4.35m0 0A7.5 7.5 0 1 0 6 6a7.5 7.5 0 0 0 10.65 10.65Z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<button id="mobile-menu-button"
|
|
class="lg:hidden text-white w-9 h-9 inline-flex items-center justify-center rounded hover:bg-white/10 transition-colors"
|
|
aria-label="Buka menu" aria-expanded="false" aria-controls="mobile-menu">
|
|
<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="M3.75 6.75h16.5m-16.5 5.25h16.5m-16.5 5.25h16.5" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="hidden lg:block bg-hmif-secondary border-t border-white/30 shadow-md">
|
|
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6">
|
|
<ul class="flex items-center justify-center gap-1 py-2">
|
|
<li><a href="#"
|
|
class="px-4 py-2 text-[11px] font-bold uppercase tracking-wide text-slate-800 hover:text-hmif-primary transition-colors">ABOUT
|
|
US</a></li>
|
|
<li><a href="#"
|
|
class="px-4 py-2 text-[11px] font-bold uppercase tracking-wide text-slate-800 hover:text-hmif-primary transition-colors">PROGRAMS</a>
|
|
</li>
|
|
<li><a href="#"
|
|
class="px-4 py-2 text-[11px] font-bold uppercase tracking-wide text-slate-800 hover:text-hmif-primary transition-colors">HUMAN
|
|
RESOURCES</a></li>
|
|
<li><a href="#"
|
|
class="px-4 py-2 text-[11px] font-bold uppercase tracking-wide text-slate-800 hover:text-hmif-primary transition-colors">FACILITIES</a>
|
|
</li>
|
|
<li><a href="#"
|
|
class="px-4 py-2 text-[11px] font-bold uppercase tracking-wide text-slate-800 hover:text-hmif-primary transition-colors">WORKS
|
|
& EVENTS</a></li>
|
|
<li><a href="#"
|
|
class="px-4 py-2 text-[11px] font-bold uppercase tracking-wide text-slate-800 hover:text-hmif-primary transition-colors">CONTACT</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<div id="mobile-menu" class="lg:hidden hidden bg-hmif-secondary border-t border-white/30 shadow-md">
|
|
<div class="px-4 py-3 grid grid-cols-1 gap-1">
|
|
<a href="#" class="py-2 text-[11px] font-bold uppercase tracking-wide text-slate-800">ABOUT US</a>
|
|
<a href="#" class="py-2 text-[11px] font-bold uppercase tracking-wide text-slate-800">PROGRAMS</a>
|
|
<a href="#" class="py-2 text-[11px] font-bold uppercase tracking-wide text-slate-800">HUMAN
|
|
RESOURCES</a>
|
|
<a href="#" class="py-2 text-[11px] font-bold uppercase tracking-wide text-slate-800">FACILITIES</a>
|
|
<a href="#" class="py-2 text-[11px] font-bold uppercase tracking-wide text-slate-800">WORKS &
|
|
EVENTS</a>
|
|
<a href="#" class="py-2 text-[11px] font-bold uppercase tracking-wide text-slate-800">CONTACT</a>
|
|
<button data-language-toggle type="button"
|
|
class="py-2 text-left text-[11px] font-bold uppercase tracking-wide text-slate-800"
|
|
aria-label="Ganti bahasa" aria-pressed="false">ID | EN</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hero Section -->
|
|
<header class="relative w-full min-h-screen flex items-center overflow-hidden pt-[92px] lg:pt-[118px]">
|
|
|
|
<img id="api-hero-bg" src="./assets/images/bg-kehidupan-mahasiswa.png" alt="Foto Kegiatan Mahasiswa"
|
|
class="absolute inset-0 w-full h-full object-cover z-0" />
|
|
|
|
<div class="absolute inset-0 bg-gradient-to-r from-hmif-primary via-hmif-primary/80 to-transparent z-0"></div>
|
|
|
|
<div class="relative z-10 max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12 py-16 lg:py-24 w-full">
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
|
|
<div class="flex flex-col items-start text-left space-y-6">
|
|
|
|
<div
|
|
class="bg-hmif-secondary/15 text-hmif-secondary font-bold text-xs md:text-sm px-3 py-1 rounded-full">
|
|
COMMUNITY & LEADERSHIP
|
|
</div>
|
|
|
|
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-white leading-tight">
|
|
Kehidupan Mahasiswa & <span class="text-hmif-secondary" style="color:var(--color-hmif-secondary)">Himpunan (HMIF)</span>
|
|
</h1>
|
|
|
|
<p class="text-base md:text-lg text-gray-300 font-light leading-relaxed max-w-xl">
|
|
Membangun ekosistem kolaboratif di mana teknologi bertemu dengan
|
|
kreativitas, membentuk calon pemimpin industri masa depan.
|
|
</p>
|
|
|
|
<button
|
|
class="mt-4 bg-transparent border-2 border-white text-white font-bold text-sm md:text-base px-6 py-3 rounded-md hover:bg-hmif-secondary hover:text-hmif-primary hover:border-hmif-secondary transition-all hover:cursor-pointer">
|
|
Lihat Struktur Kepengurusan
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<div class="hidden lg:block"></div>
|
|
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- About Section -->
|
|
<section id="about" class="bg-white overflow-hidden">
|
|
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-16 pt-20 lg:pt-24 pb-16">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 items-start">
|
|
|
|
<!-- ─── Left: Text Content ─── -->
|
|
<div class="flex flex-col gap-8 order-1 lg:pr-6">
|
|
|
|
<!-- Heading -->
|
|
<h2 class="text-3xl lg:text-4xl xl:text-5xl font-extrabold text-hmif-primary leading-snug">
|
|
Ruang Tumbuh Bagi<br>Mahasiswa Informatika
|
|
</h2>
|
|
|
|
<!-- Paragraf -->
|
|
<div class="space-y-4 text-gray-500 text-base lg:text-[17px] leading-relaxed">
|
|
<p>
|
|
Himpunan Mahasiswa Informatika (HMIF) Universitas Tanjungpura bukan sekadar
|
|
organisasi, melainkan rumah bagi para pemimpin teknologi. Kami percaya bahwa
|
|
pendidikan formal adalah fondasi, namun komunitas adalah akselerator.
|
|
</p>
|
|
<p>
|
|
Melalui berbagai inisiatif, kami menjembatani kesenjangan antara kurikulum
|
|
akademik dan kebutuhan industri, sambil tetap menjaga semangat kekeluargaan
|
|
dan integritas ilmiah.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Stats -->
|
|
<div class="flex gap-12 lg:gap-16 pt-6 border-t border-gray-100">
|
|
<div>
|
|
<p
|
|
class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums">
|
|
518</p>
|
|
<p class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3">
|
|
Mahasiswa Aktif
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p
|
|
class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums">
|
|
8</p>
|
|
<p class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3">
|
|
MITRA
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ─── Right: Photo ─── -->
|
|
<div class="order-2 relative mt-8 lg:mt-0 lg:pl-4">
|
|
|
|
<!-- Offset shadow block biru tua, posisi % (ikut skala zoom) -->
|
|
<div class="absolute top-[4%] left-[8%] right-[-4%] bottom-[-4%]
|
|
bg-hmif-primary rounded-2xl lg:rounded-3xl z-0 shadow-2xl"></div>
|
|
|
|
<!-- Frame foto — overflow hidden, foto full width tanpa crop -->
|
|
<div
|
|
class="relative rounded-2xl lg:rounded-3xl overflow-hidden shadow-2xl z-10 group cursor-default">
|
|
<img src="./assets/images/ruang-tumbuh/ruangtumbuh_foto.jpeg"
|
|
alt="Ruang Tumbuh HMIF Universitas Tanjungpura" class="w-full h-auto block
|
|
transition-transform duration-700 ease-out group-hover:scale-[1.03]" />
|
|
<!-- Gradient overlay bawah -->
|
|
<div class="absolute inset-0
|
|
bg-gradient-to-t from-hmif-primary/45 via-transparent to-transparent
|
|
opacity-70 group-hover:opacity-45 transition-opacity duration-500"></div>
|
|
</div>
|
|
|
|
<!-- Badge Inklusivitas & Kolaborasi pojok kiri bawah -->
|
|
<div class="absolute z-20 bottom-[-3%] left-[0%]
|
|
bg-hmif-secondary text-hmif-primary
|
|
rounded-xl px-4 py-3 text-center shadow-2xl
|
|
border-2 border-white/20" style="min-width: 120px; max-width: 140px;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
|
|
stroke="currentColor" class="w-6 h-6 mx-auto mb-1" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197m6.22-7.496a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6-3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-12 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
|
|
</svg>
|
|
<p class="text-[11px] lg:text-xs font-bold leading-snug">
|
|
Inklusivitas &<br>Kolaborasi
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Partner & Kolaborator -->
|
|
<section id="partners" class="bg-white py-16">
|
|
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
|
|
<h2 class="text-2xl lg:text-3xl font-extrabold text-gray-900 mb-10">
|
|
Partner dan Kolaborator
|
|
</h2>
|
|
|
|
<div class="flex flex-wrap gap-6 lg:gap-10 items-center">
|
|
<!-- Partner Aktif (Terbaru) -->
|
|
<a href="https://www.instagram.com/namakucoffee.id?igsh=MXYyMnI3ZTNmMGxtZQ==" target="_blank"
|
|
rel="noopener noreferrer" aria-label="Partner Aktif - Namaku">
|
|
<img src="./assets/images/ruang-tumbuh/partner/namaku.jpeg" alt="Namaku" class="w-16 h-16 lg:w-20 lg:h-20 rounded-full object-cover shadow-lg border-4 border-hmif-secondary
|
|
hover:scale-110 transition-transform duration-200 cursor-pointer"
|
|
title="Partner Terbaru" />
|
|
</a>
|
|
<!-- Partner Aktif (Sobat Konveksi) -->
|
|
<a href="https://www.instagram.com/sobat.konveksi?igsh=OWxkZGJtMjhjeDZj" target="_blank"
|
|
rel="noopener noreferrer" aria-label="Partner Aktif - Sobat Konveksi">
|
|
<img src="./assets/images/ruang-tumbuh/partner/sobatkonveksi.jpeg" alt="Sobat Konveksi" class="w-16 h-16 lg:w-20 lg:h-20 rounded-full object-cover shadow-lg border-4 border-hmif-secondary
|
|
hover:scale-110 transition-transform duration-200 cursor-pointer"
|
|
title="Partner Aktif" />
|
|
</a>
|
|
|
|
<!-- Partner Lainnya (Legacy) - Tidak bisa diklik, hover ganti warna -->
|
|
<div class="relative group">
|
|
<img src="./assets/images/ruang-tumbuh/partner/ayanimegamall.jpeg" alt="Ayani Megamall" class="w-14 h-14 lg:w-16 lg:h-16 rounded-full object-cover shadow-md grayscale hover:grayscale-0
|
|
hover:scale-110 hover:shadow-lg transition-all duration-300" />
|
|
</div>
|
|
<div class="relative group">
|
|
<img src="./assets/images/ruang-tumbuh/partner/indofood.jpeg" alt="Indofood" class="w-14 h-14 lg:w-16 lg:h-16 rounded-full object-cover shadow-md grayscale hover:grayscale-0
|
|
hover:scale-110 hover:shadow-lg transition-all duration-300" />
|
|
</div>
|
|
<div class="relative group">
|
|
<img src="./assets/images/ruang-tumbuh/partner/playhera.jpeg" alt="Playhera" class="w-14 h-14 lg:w-16 lg:h-16 rounded-full object-cover shadow-md grayscale hover:grayscale-0
|
|
hover:scale-110 hover:shadow-lg transition-all duration-300" />
|
|
</div>
|
|
<div class="relative group">
|
|
<img src="./assets/images/ruang-tumbuh/partner/pln.jpeg" alt="PLN" class="w-14 h-14 lg:w-16 lg:h-16 rounded-full object-cover shadow-md grayscale hover:grayscale-0
|
|
hover:scale-110 hover:shadow-lg transition-all duration-300" />
|
|
</div>
|
|
<div class="relative group">
|
|
<img src="./assets/images/ruang-tumbuh/partner/rtech.jpeg" alt="RTech" class="w-14 h-14 lg:w-16 lg:h-16 rounded-full object-cover shadow-md grayscale hover:grayscale-0
|
|
hover:scale-110 hover:shadow-lg transition-all duration-300" />
|
|
</div>
|
|
<div class="relative group">
|
|
<img src="./assets/images/ruang-tumbuh/partner/rumangsa.jpeg" alt="Rumangsa" class="w-14 h-14 lg:w-16 lg:h-16 rounded-full object-cover shadow-md grayscale hover:grayscale-0
|
|
hover:scale-110 hover:shadow-lg transition-all duration-300" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Divisi Kepengurusan HMIF Section -->
|
|
<section id="divisi" class="bg-hmif-primary text-white py-20 lg:py-24">
|
|
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
|
|
<!-- Header -->
|
|
<div class="mb-12 md:mb-16 max-w-3xl">
|
|
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-hmif-secondary leading-tight mb-4">
|
|
Divisi Kepengurusan HMIF
|
|
</h2>
|
|
<p class="text-base md:text-lg text-slate-300 font-light leading-relaxed">
|
|
Struktur organisasi yang dirancang untuk efisiensi dan pengembangan kapasitas anggota di berbagai
|
|
bidang strategis.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Grid Card Container -->
|
|
<div
|
|
class="border border-white/10 rounded-2xl bg-white/[0.01] backdrop-blur-md grid grid-cols-1 md:grid-cols-3 overflow-hidden">
|
|
<!-- Bidang 1 -->
|
|
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
|
|
<span
|
|
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
|
|
Bidang 1
|
|
</span>
|
|
<h3
|
|
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
|
|
Pengembangan Sumber Daya Mahasiswa dan Kaderisasi
|
|
</h3>
|
|
<p class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
|
|
Divisi ini menyelenggarakan kaderisasi terstruktur, mentoring berkala, dan pelatihan
|
|
kepemimpinan serta soft-skill. Program kerja mencakup onboarding anggota baru,
|
|
workshop kepemimpinan, proyek kolaboratif, dan kegiatan pengabdian yang melatih
|
|
tanggung jawab sosial. Fokusnya adalah menyiapkan kader yang kompeten dan
|
|
menjaga regenerasi organisasi.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Bidang 2 -->
|
|
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
|
|
<span
|
|
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
|
|
Bidang 2
|
|
</span>
|
|
<h3
|
|
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
|
|
Media Komunikasi dan Konten Digital
|
|
</h3>
|
|
<p class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
|
|
Divisi ini mengelola strategi komunikasi dan produksi konten HMIF, termasuk
|
|
perencanaan editorial, manajemen media sosial, serta dokumentasi acara. Program
|
|
kerjanya meliputi pembuatan materi promosi, publikasi kegiatan, dan penguatan
|
|
identitas digital agar informasi organisasi tersampaikan konsisten dan menarik.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Bidang 3 -->
|
|
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
|
|
<span
|
|
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
|
|
Bidang 3
|
|
</span>
|
|
<h3
|
|
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
|
|
Inovasi dan Kompetisi Teknologi
|
|
</h3>
|
|
<p class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
|
|
Divisi ini memfasilitasi persiapan lomba dan pengembangan proyek teknis melalui
|
|
coaching clinic, bootcamp berbasis proyek, serta study club untuk Competitive
|
|
Programming, Software Development, dan Data/ML. Kegiatan termasuk seleksi internal,
|
|
bimbingan kompetitif, dan inisiatif digitalisasi seperti pengembangan website
|
|
dan dashboard untuk mendukung ekosistem inovasi HMIF.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Bidang 4 -->
|
|
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
|
|
<span
|
|
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
|
|
Bidang 4
|
|
</span>
|
|
<h3
|
|
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
|
|
Pengembangan Organisasi
|
|
</h3>
|
|
<p class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
|
|
Divisi ini memperkuat tata kelola dan kapabilitas internal melalui pelatihan
|
|
pengurus, penyusunan SOP sederhana, dan evaluasi proses kerja. Program kerjanya
|
|
mencakup pengembangan budaya organisasi, peningkatan efektivitas koordinasi, dan
|
|
kegiatan peningkatan profesionalisme sehingga operasi HMIF menjadi lebih terstruktur
|
|
dan efisien.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Bidang 5 -->
|
|
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
|
|
<span
|
|
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
|
|
Bidang 5
|
|
</span>
|
|
<h3
|
|
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
|
|
Sosial Masyarakat
|
|
</h3>
|
|
<p class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
|
|
Divisi ini merancang dan melaksanakan program pengabdian serta aksi sosial yang
|
|
berdampak, termasuk pendampingan komunitas dan bantuan kemanusiaan. Kegiatan
|
|
meliputi identifikasi kebutuhan lapangan, pelaksanaan terstruktur, dan evaluasi
|
|
dampak untuk memastikan keberlanjutan dan manfaat nyata bagi masyarakat.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Bidang 6 -->
|
|
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
|
|
<span
|
|
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
|
|
Bidang 6
|
|
</span>
|
|
<h3
|
|
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
|
|
Kewirausahaan dan Kemitraan
|
|
</h3>
|
|
<p class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
|
|
Divisi ini mengembangkan unit usaha organisasi, merancang skema pendanaan kreatif,
|
|
dan menjalin kemitraan strategis untuk mendukung keberlanjutan program HMIF. Unit
|
|
kerjanya meliputi riset peluang usaha, penyusunan proposal kemitraan, dan
|
|
pengelolaan sponsor untuk meningkatkan kemandirian finansial dan akses jaringan
|
|
profesional.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Kegiatan Unggulan Section -->
|
|
<section id="kegiatan-unggulan" class="bg-white py-20 lg:py-24">
|
|
<div class="max-w-none mx-auto px-6 lg:px-16 xl:px-24 relative w-full">
|
|
<!-- Header -->
|
|
<div class="mb-12">
|
|
<h2 class="text-3xl font-extrabold text-hmif-primary tracking-tight">
|
|
Kegiatan Unggulan
|
|
</h2>
|
|
<p class="text-sm text-gray-500 mt-2 font-medium">
|
|
Kegiatan tahunan yang menjadi ikon Informatika UNTAN.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Slider Container with Arrows -->
|
|
<div class="relative flex items-center">
|
|
<!-- Left Arrow Button -->
|
|
<button id="slider-prev"
|
|
class="absolute -left-4 lg:-left-12 z-10 w-11 h-11 bg-white border border-gray-200 hover:border-hmif-primary rounded-full flex items-center justify-center shadow-md hover:shadow-lg text-slate-600 hover:text-hmif-primary transition-all cursor-pointer"
|
|
aria-label="Sebelumnya">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
|
|
stroke="currentColor" class="w-5 h-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Viewport / Overflow Wrapper -->
|
|
<div class="overflow-hidden w-full" id="slider-viewport">
|
|
<!-- Track holds all cards in a single row -->
|
|
<div id="slider-track" class="flex gap-8 transition-transform duration-500 ease-in-out">
|
|
|
|
<!-- Card 1 Silaturahmi Keluarga Besar Informatika-->
|
|
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
|
|
<div
|
|
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
|
<img src="./assets/images/kegiatan-unggulan/SKBI.jpeg" alt="Silaturahmi Keluarga Besar"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</div>
|
|
<div class="flex items-start gap-4 mt-6">
|
|
<div
|
|
class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
|
|
<span class="text-lg font-extrabold text-hmif-primary leading-none">27</span>
|
|
<span
|
|
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Feb</span>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<h3
|
|
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
|
|
Silaturahmi Keluarga Besar Informatika</h3>
|
|
<p class="text-sm text-gray-500 leading-relaxed font-light">Kegiatan buka bersama
|
|
seluruh keluarga Informatika Untan yang selalu diadakan setiap tahunnya.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 2 Gemastik -->
|
|
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
|
|
<div
|
|
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
|
<img src="./assets/images/kegiatan-unggulan/gemastik.jpg" alt="Bootcamp HMIF"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</div>
|
|
<div class="flex items-start gap-4 mt-6">
|
|
<div
|
|
class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
|
|
<span class="text-lg font-extrabold text-hmif-primary leading-none">1</span>
|
|
<span
|
|
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Jul</span>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<h3
|
|
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
|
|
GEMASTIK</h3>
|
|
<p class="text-sm text-gray-500 leading-relaxed font-light"> Ajang kompetisi IT bergengsi tingkat nasional tahunan dari kementerian.
|
|
Wadah bagi mahasiswa Informatika UNTAN untuk unjuk
|
|
gigi di bidang <em>programming</em>, <em>cyber security</em>, <em>data mining</em>, hingga UI/UX.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 3 17 agustus -->
|
|
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
|
|
<div
|
|
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
|
<img src="./assets/images/kegiatan-unggulan/17-agustus.jpeg" alt="Perayaan 17 Agustus"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</div>
|
|
<div class="flex items-start gap-4 mt-6">
|
|
<div
|
|
class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
|
|
<span class="text-lg font-extrabold text-hmif-primary leading-none">17</span>
|
|
<span
|
|
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Agu</span>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<h3
|
|
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
|
|
Perayaan 17 Agustus</h3>
|
|
<p class="text-sm text-gray-500 leading-relaxed font-light">Momen perayaan Hari Kemerdekaan Indonesia yang diisi dengan berbagai perlombaan menarik.
|
|
Ajang seru-seruan bersama untuk mempererat rasa nasionalisme dan kekeluargaan mahasiswa Informatika.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 3 Bootcamp -->
|
|
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
|
|
<div
|
|
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
|
<img src="./assets/images/kegiatan-unggulan/bootcamp.jpeg" alt="Bootcamp HMIF"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</div>
|
|
<div class="flex items-start gap-4 mt-6">
|
|
<div
|
|
class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
|
|
<span class="text-lg font-extrabold text-hmif-primary leading-none">28</span>
|
|
<span
|
|
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Agu</span>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<h3
|
|
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
|
|
Bootcamp HMIF</h3>
|
|
<p class="text-sm text-gray-500 leading-relaxed font-light">Program intensif
|
|
pengembangan skill teknis mahasiswa Informatika bersama mentor profesional dari
|
|
industri.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Card 5 UPC 2025 -->
|
|
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
|
|
<div
|
|
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
|
<img src="./assets/images/kegiatan-unggulan/upc.JPG" alt="UPC 2025"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</div>
|
|
<div class="flex items-start gap-4 mt-6">
|
|
<div
|
|
class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
|
|
<span class="text-lg font-extrabold text-hmif-primary leading-none">13</span>
|
|
<span
|
|
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Sep</span>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<h3
|
|
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
|
|
UPC</h3>
|
|
<p class="text-sm text-gray-500 leading-relaxed font-light">Kompetisi Pemograman untuk
|
|
mengasah skill coding mahasiswa Informatika.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 6 Informers -->
|
|
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]">
|
|
<div
|
|
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
|
<img src="./assets/images/kegiatan-unggulan/informers.JPG" alt="Ultah Informatika"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</div>
|
|
<div class="flex items-start gap-4 mt-6">
|
|
<div
|
|
class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
|
|
<span class="text-lg font-extrabold text-hmif-primary leading-none">25</span>
|
|
<span
|
|
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Okt</span>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<h3
|
|
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
|
|
INFORMERS</h3>
|
|
<p class="text-sm text-gray-500 leading-relaxed font-light">Perayaan ulang tahun
|
|
Informatika UNTAN, momen kebersamaan dan kebanggaan seluruh keluarga besar
|
|
Informatika.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- end slider-track -->
|
|
</div><!-- end slider-viewport -->
|
|
|
|
<!-- Right Arrow Button -->
|
|
<button id="slider-next"
|
|
class="absolute -right-4 lg:-right-12 z-10 w-11 h-11 bg-white border border-gray-200 hover:border-hmif-primary rounded-full flex items-center justify-center shadow-md hover:shadow-lg text-slate-600 hover:text-hmif-primary transition-all cursor-pointer"
|
|
aria-label="Berikutnya">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
|
|
stroke="currentColor" class="w-5 h-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Dot Indicators -->
|
|
<div id="slider-dots" class="flex justify-center gap-2 mt-10">
|
|
<button class="slider-dot h-2.5 rounded-full bg-hmif-primary transition-all duration-300 w-6"
|
|
data-index="0" aria-label="Slide 1"></button>
|
|
<button class="slider-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
|
|
data-index="1" aria-label="Slide 2"></button>
|
|
<button class="slider-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
|
|
data-index="2" aria-label="Slide 3"></button>
|
|
<button class="slider-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
|
|
data-index="3" aria-label="Slide 4"></button>
|
|
<button class="slider-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
|
|
data-index="4" aria-label="Slide 5"></button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Study Club Section -->
|
|
<section id="study-clubs" class="bg-[#EEF2FC]/70 py-20 lg:py-24 border-t border-b border-gray-100">
|
|
<div class="max-w-none mx-auto px-6 lg:px-16 xl:px-24 w-full">
|
|
<!-- Centered Header -->
|
|
<div class="text-center max-w-3xl mx-auto mb-16 flex flex-col items-center">
|
|
<h2 class="text-2xl font-extrabold text-hmif-primary tracking-widest uppercase">
|
|
STUDY CLUB
|
|
</h2>
|
|
<div class="w-16 h-1 bg-hmif-secondary mt-3 rounded-full"></div>
|
|
</div>
|
|
|
|
<!-- Cards Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<!-- CP Card -->
|
|
<div
|
|
class="bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-md border border-gray-100/50 transition-all duration-300 flex flex-col space-y-6">
|
|
<div class="text-[#b48608]">
|
|
<!-- Brackets Icon -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
|
stroke="currentColor" class="w-8 h-8">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
|
|
</svg>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<h3 class="text-lg font-bold text-hmif-primary">
|
|
ARISE
|
|
</h3>
|
|
<p class="text-sm text-gray-500 leading-relaxed font-light">
|
|
Belajar logika dan algoritma bersama, di mana kalian bisa berkembang dan membuka peluang
|
|
mengikuti kompetisi pemrograman di berbagai level.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Data Mining Card -->
|
|
<div
|
|
class="bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-md border border-gray-100/50 transition-all duration-300 flex flex-col space-y-6">
|
|
<div class="text-[#b48608]">
|
|
<!-- Shield Icon -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
|
stroke="currentColor" class="w-8 h-8">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
|
|
</svg>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<h3 class="text-lg font-bold text-hmif-primary">
|
|
MINERVA
|
|
</h3>
|
|
<p class="text-sm text-gray-500 leading-relaxed font-light">
|
|
Gali potensi tersembunyi dari tumpukan data! Di sini kita akan bereksplorasi dengan
|
|
algoritma <em>Machine Learning</em>, membedah teknik klasifikasi, hingga melatih model
|
|
prediktif untuk menghasilkan <em>insight</em> yang bermakna.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- Software Development Card -->
|
|
<div
|
|
class="bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-md border border-gray-100/50 transition-all duration-300 flex flex-col space-y-6">
|
|
<div class="text-[#b48608]">
|
|
<!-- Layout Dashboard Icon -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
|
stroke="currentColor" class="w-8 h-8">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25" />
|
|
</svg>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<h3 class="text-lg font-bold text-hmif-primary">
|
|
Software Development (Soon)
|
|
</h3>
|
|
<p class="text-sm text-gray-500 leading-relaxed font-light">
|
|
Wujudkan idemu jadi produk digital yang nyata! Kita akan ngoding bareng dari merancang
|
|
<em>frontend</em> yang interaktif, membangun <em>backend</em> yang tangguh, serta
|
|
mengintegrasikan berbagai API untuk menciptakan aplikasi web masa kini.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Galeri Keseruan Section -->
|
|
<section id="galeri" class="bg-white py-20 lg:py-24">
|
|
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
|
|
|
|
<!-- Header -->
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl lg:text-4xl font-bold text-hmif-primary">
|
|
Galeri Keseruan
|
|
</h2>
|
|
</div>
|
|
|
|
<!-- Slider Wrapper -->
|
|
<div class="relative">
|
|
|
|
<!-- Left Arrow Button -->
|
|
<button id="galeri-prev" style="top: 50%; transform: translateY(-50%);"
|
|
class="absolute -left-4 lg:-left-12 z-10 w-11 h-11 bg-white border border-gray-200 hover:border-hmif-primary rounded-full flex items-center justify-center shadow-md hover:shadow-lg text-slate-600 hover:text-hmif-primary transition-all cursor-pointer"
|
|
aria-label="Sebelumnya">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
|
|
stroke="currentColor" class="w-5 h-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Viewport: overflow-hidden agar slide lain tidak terlihat -->
|
|
<div id="galeri-viewport" class="overflow-hidden rounded-2xl">
|
|
|
|
<!-- Track: semua slide berjejer horizontal -->
|
|
<div id="galeri-track" class="flex transition-transform duration-700 ease-in-out">
|
|
|
|
<!-- ====== Slide 1 ====== -->
|
|
<div class="flex-shrink-0 w-full">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 h-auto md:h-[420px] lg:h-[500px]">
|
|
|
|
<!-- Foto besar kiri (span 2 baris) -->
|
|
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="block col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
|
|
<img src=".\assets\images\galeri-keseruan\DSC00636.JPG" alt="UPC V"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</a>
|
|
|
|
<!-- Foto kecil kanan atas 1 -->
|
|
<a href="https://instagram.com/hmif_ftuntan" target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
|
<img src=".\assets\images\galeri-keseruan\Copy of DSC09492.JPG" alt="Gemastik"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</a>
|
|
|
|
<!-- Foto kecil kanan atas 2 -->
|
|
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
|
|
target="_blank" rel="noopener noreferrer"
|
|
class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
|
<img src=".\assets\images\galeri-keseruan\IMG_0204.JPG" alt="INFORMERS"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</a>
|
|
|
|
<!-- Foto lebar kanan bawah (span 2 kolom) -->
|
|
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="hidden md:block col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
|
<img src=".\assets\images\galeri-keseruan\DSC00456.JPG" alt="UPC V"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ====== Slide 2 ====== -->
|
|
<div class="flex-shrink-0 w-full">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 h-auto md:h-[420px] lg:h-[500px]">
|
|
|
|
<!-- Foto besar kiri -->
|
|
<a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer"
|
|
class="block col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
|
|
<img src=".\assets\images\galeri-keseruan\DSCF8922.JPG"
|
|
alt="Ulang Tahun Informatika"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</a>
|
|
|
|
<!-- Foto kecil kanan atas 1 -->
|
|
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
|
<img src=".\assets\images\galeri-keseruan\DSC00091.JPG" alt="UPC V"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</a>
|
|
|
|
<!-- Foto kecil kanan atas 2 -->
|
|
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
|
|
class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
|
<img src=".\assets\images\galeri-keseruan\DSC03316.JPG"
|
|
alt="Silaturahmi Keluarga Besar Informatika"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</a>
|
|
|
|
<!-- Foto lebar kanan bawah -->
|
|
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
|
|
target="_blank" rel="noopener noreferrer"
|
|
class="hidden md:block col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
|
<img src=".\assets\images\galeri-keseruan\IMG_5705.JPG" alt="INFORMERS"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ====== Slide 3 ====== -->
|
|
<div class="flex-shrink-0 w-full">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 h-auto md:h-[420px] lg:h-[500px]">
|
|
|
|
<!-- Foto besar kiri -->
|
|
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="block col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
|
|
<img src=".\assets\images\galeri-keseruan\DSC00252.JPG" alt="UPC V"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</a>
|
|
|
|
<!-- Foto kecil kanan atas 1 -->
|
|
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
|
<img src=".\assets\images\galeri-keseruan\DSC00519.JPG" alt="UPC V"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</a>
|
|
|
|
<!-- Foto kecil kanan atas 2 -->
|
|
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
|
|
target="_blank" rel="noopener noreferrer"
|
|
class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
|
<img src=".\assets\images\galeri-keseruan\IMG_0030.JPG" alt="INFORMERS"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</a>
|
|
|
|
<!-- Foto lebar kanan bawah -->
|
|
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="hidden md:block col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
|
<img src=".\assets\images\galeri-keseruan\DSC01002.JPG" alt="UPC V"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- end galeri-track -->
|
|
</div><!-- end galeri-viewport -->
|
|
|
|
<!-- Right Arrow Button -->
|
|
<button id="galeri-next" style="top: 50%; transform: translateY(-50%);"
|
|
class="absolute -right-4 lg:-right-12 z-10 w-11 h-11 bg-white border border-gray-200 hover:border-hmif-primary rounded-full flex items-center justify-center shadow-md hover:shadow-lg text-slate-600 hover:text-hmif-primary transition-all cursor-pointer"
|
|
aria-label="Berikutnya">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
|
|
stroke="currentColor" class="w-5 h-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
|
</svg>
|
|
</button>
|
|
|
|
</div><!-- end slider wrapper -->
|
|
|
|
<!-- Dot Indicators -->
|
|
<div id="galeri-dots" class="flex justify-center gap-2 mt-8">
|
|
<button class="galeri-dot h-2.5 rounded-full bg-hmif-primary transition-all duration-300 w-6"
|
|
data-index="0" aria-label="Slide 1"></button>
|
|
<button class="galeri-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
|
|
data-index="1" aria-label="Slide 2"></button>
|
|
<button class="galeri-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
|
|
data-index="2" aria-label="Slide 3"></button>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section id="contact-cta" class="bg-[#EEF2FC] py-16 lg:py-20">
|
|
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
|
|
<div
|
|
class="relative overflow-hidden rounded-[24px] bg-[#082A4B] px-5 py-10 sm:px-8 sm:py-12 lg:px-16 lg:py-14 shadow-[0_24px_70px_rgba(4,17,31,0.32)]">
|
|
|
|
<div class="absolute -top-20 -left-16 h-48 w-48 rounded-full bg-white/10 blur-3xl"></div>
|
|
<div class="absolute -bottom-24 -right-20 h-56 w-56 rounded-full bg-hmif-secondary/15 blur-3xl"></div>
|
|
<div class="absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-white/5 to-transparent"></div>
|
|
|
|
<div class="relative z-10">
|
|
<div class="mx-auto max-w-4xl text-center">
|
|
<h2 class="text-2xl sm:text-3xl lg:text-[38px] font-bold leading-tight text-white">
|
|
Ada yang Ingin Ditanyakan Seputar HMIF?
|
|
</h2>
|
|
|
|
<p
|
|
class="mx-auto mt-4 max-w-2xl text-xs sm:text-sm lg:text-[15px] leading-relaxed text-white/72">
|
|
Bergabunglah dengan HMIF untuk memperluas jaringan, mengasah skill, dan
|
|
menciptakan dampak nyata.
|
|
</p>
|
|
|
|
<div class="mt-7 flex flex-col items-center justify-center gap-3 sm:flex-row">
|
|
<a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer"
|
|
class="inline-flex items-center justify-center rounded-lg bg-hmif-secondary px-6 py-3 text-sm font-bold text-hmif-primary shadow-[0_10px_24px_rgba(245,200,47,0.35)] transition-transform duration-200 hover:-translate-y-0.5">
|
|
Hubungi Kami
|
|
</a>
|
|
|
|
<div class="flex items-center justify-center gap-3">
|
|
<a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer"
|
|
class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-white/10 bg-white/10 text-white transition-colors duration-200 hover:bg-white/15"
|
|
aria-label="Instagram HMIF">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
|
|
class="h-4.5 w-4.5">
|
|
<path
|
|
d="M7.5 2A5.5 5.5 0 0 0 2 7.5v9A5.5 5.5 0 0 0 7.5 22h9a5.5 5.5 0 0 0 5.5-5.5v-9A5.5 5.5 0 0 0 16.5 2h-9Zm9 1.5A4 4 0 0 1 20.5 7.5v9a4 4 0 0 1-4 4h-9a4 4 0 0 1-4-4v-9a4 4 0 0 1 4-4h9Zm-4.5 2.25a5.75 5.75 0 1 0 0 11.5 5.75 5.75 0 0 0 0-11.5Zm0 2a3.75 3.75 0 1 1 0 7.5 3.75 3.75 0 0 1 0-7.5Zm5.9-.95a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6Z" />
|
|
</svg>
|
|
</a>
|
|
|
|
<a href="https://youtube.com" target="_blank" rel="noopener noreferrer"
|
|
class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-white/10 bg-white/10 text-white transition-colors duration-200 hover:bg-white/15"
|
|
aria-label="YouTube HMIF">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
|
|
class="h-4.5 w-4.5">
|
|
<path
|
|
d="M21.6 7.2a2.9 2.9 0 0 0-2.04-2.05C17.77 4.7 12 4.7 12 4.7s-5.77 0-7.56.45A2.9 2.9 0 0 0 2.4 7.2 30.3 30.3 0 0 0 2 12a30.3 30.3 0 0 0 .4 4.8 2.9 2.9 0 0 0 2.04 2.05c1.79.45 7.56.45 7.56.45s5.77 0 7.56-.45a2.9 2.9 0 0 0 2.04-2.05A30.3 30.3 0 0 0 22 12a30.3 30.3 0 0 0-.4-4.8Zm-9.2 7.44V8.36l4.83 3.14-4.83 3.14Z" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-10 border-t border-white/10 pt-8 lg:mt-12 lg:pt-10">
|
|
<div class="grid grid-cols-1 gap-8 md:grid-cols-3 md:gap-6">
|
|
<div class="text-center md:px-4">
|
|
<p class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
|
|
Sekretariat
|
|
</p>
|
|
<p class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
|
|
Gedung Fakultas Teknik Lt. 2<br>
|
|
Jl. Prof. Dr. H. Hadari Nawawi
|
|
</p>
|
|
</div>
|
|
|
|
<div class="text-center md:px-4 md:border-x md:border-white/10">
|
|
<p class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
|
|
Jam Operasional
|
|
</p>
|
|
<p class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
|
|
Senin - Jumat<br>
|
|
08:00 - 17:00 WIB
|
|
</p>
|
|
</div>
|
|
|
|
<div class="text-center md:px-4">
|
|
<p class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
|
|
Media Sosial
|
|
</p>
|
|
<p class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
|
|
@hmif.untan<br>
|
|
YouTube: HMIF UNTAN TV
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-hmif-primary text-white pt-14 relative overflow-hidden">
|
|
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12 text-center relative z-10">
|
|
<p class="text-[10px] font-bold tracking-widest uppercase text-slate-300">FOLLOW US</p>
|
|
|
|
<div class="mt-4 flex items-center justify-center gap-4">
|
|
<a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer"
|
|
class="text-white hover:text-hmif-secondary transition-colors" aria-label="Instagram">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
|
|
<path
|
|
d="M7.5 2A5.5 5.5 0 0 0 2 7.5v9A5.5 5.5 0 0 0 7.5 22h9a5.5 5.5 0 0 0 5.5-5.5v-9A5.5 5.5 0 0 0 16.5 2h-9Zm9 1.5A4 4 0 0 1 20.5 7.5v9a4 4 0 0 1-4 4h-9a4 4 0 0 1-4-4v-9a4 4 0 0 1 4-4h9Zm-4.5 2.25a5.75 5.75 0 1 0 0 11.5 5.75 5.75 0 0 0 0-11.5Zm0 2a3.75 3.75 0 1 1 0 7.5 3.75 3.75 0 0 1 0-7.5Zm5.9-.95a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6Z" />
|
|
</svg>
|
|
</a>
|
|
<a href="https://youtube.com" target="_blank" rel="noopener noreferrer"
|
|
class="text-white hover:text-hmif-secondary transition-colors" aria-label="YouTube">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
|
|
<path
|
|
d="M21.6 7.2a2.9 2.9 0 0 0-2.04-2.05C17.77 4.7 12 4.7 12 4.7s-5.77 0-7.56.45A2.9 2.9 0 0 0 2.4 7.2 30.3 30.3 0 0 0 2 12a30.3 30.3 0 0 0 .4 4.8 2.9 2.9 0 0 0 2.04 2.05c1.79.45 7.56.45 7.56.45s5.77 0 7.56-.45a2.9 2.9 0 0 0 2.04-2.05A30.3 30.3 0 0 0 22 12a30.3 30.3 0 0 0-.4-4.8Zm-9.2 7.44V8.36l4.83 3.14-4.83 3.14Z" />
|
|
</svg>
|
|
</a>
|
|
<a href="#" class="text-white hover:text-hmif-secondary transition-colors" aria-label="Facebook">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
|
|
<path
|
|
d="M13.5 21v-7h2.3l.45-3h-2.75V9.18c0-.85.26-1.43 1.48-1.43h1.38V5.03A18.72 18.72 0 0 0 14.37 5C11.92 5 10.5 6.44 10.5 9.08V11H8v3h2.5v7h3Z" />
|
|
</svg>
|
|
</a>
|
|
<a href="#" class="text-white hover:text-hmif-secondary transition-colors" aria-label="LinkedIn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
|
|
<path
|
|
d="M6.94 8.5A1.97 1.97 0 1 1 3 8.5a1.97 1.97 0 0 1 3.94 0ZM3.45 10h3v10h-3V10Zm5.08 0h2.87v1.37h.04c.4-.74 1.38-1.52 2.85-1.52 3.05 0 3.62 1.96 3.62 4.5V20h-3v-4.8c0-1.14-.02-2.6-1.62-2.6s-1.86 1.2-1.86 2.5V20h-2.9V10Z" />
|
|
</svg>
|
|
</a>
|
|
<a href="#" class="text-white hover:text-hmif-secondary transition-colors" aria-label="TikTok">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
|
|
<path
|
|
d="M14.5 3h2.6c.2 1.5 1.2 2.86 2.72 3.43v2.53a7.03 7.03 0 0 1-2.8-.84v5.4A5.52 5.52 0 1 1 11.5 8h.08v2.63a2.95 2.95 0 1 0 2.92 2.95V3Z" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="mt-7 flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-6">
|
|
<img src="https://upload.wikimedia.org/wikipedia/id/0/03/Lambang_Universitas_Tanjungpura.png"
|
|
alt="Logo UNTAN" class="h-14 sm:h-16" />
|
|
<div class="sm:border-l sm:border-white/30 sm:pl-5 pt-3 sm:pt-0">
|
|
<p class="text-2xl sm:text-3xl font-bold tracking-widest uppercase">INFORMATIKA</p>
|
|
<p class="text-[10px] sm:text-xs tracking-[0.22em] uppercase text-slate-200 mt-1">UNIVERSITAS
|
|
TANJUNGPURA</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 text-xs sm:text-sm text-slate-200 leading-relaxed">
|
|
<p>Jl. Prof. Dr. H. Hadari Nawawi, Bansir Laut, Kec. Pontianak Tenggara,</p>
|
|
<p>Kota Pontianak, Kalimantan Barat 78124</p>
|
|
</div>
|
|
|
|
<div
|
|
class="mt-3 mb-10 text-[11px] text-slate-300 flex flex-wrap items-center justify-center gap-x-3 gap-y-1">
|
|
<span>E: info@informatika.untan.ac.id</span>
|
|
<span class="opacity-50">|</span>
|
|
<span>P: +62 851-7165-5161</span>
|
|
<span class="opacity-50">|</span>
|
|
<span>F: +62(561) 739637</span>
|
|
<span class="opacity-50">|</span>
|
|
<span>WA: +62 851-7165-5161</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full relative z-0 pointer-events-none">
|
|
<img src="https://informatika.untan.ac.id/logo/footer.png" alt="Footer Illustration"
|
|
class="w-full h-auto object-cover object-bottom" />
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- JavaScript eksternal (logika interaksi dipisah dari HTML) -->
|
|
<script src="./assets/js/main.js"></script>
|
|
</body>
|
|
|
|
</html> |