<!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>SMK Informatika Bina Generasi 3 Bogor</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome (Ikon) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;700;800&display=swap" rel="stylesheet">
<script>
tailwind.config = {
darkMode: 'class', // Mengaktifkan mode gelap manual
theme: {
extend: {
fontFamily: {
sans: ['"Plus Jakarta Sans"', 'sans-serif'],
},
colors: {
brand: {
50: '#eff6ff',
100: '#dbeafe',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
900: '#1e3a8a',
dark: '#0f172a', // Background utama dark mode
card: '#1e293b', // Background kartu dark mode
}
},
borderRadius: {
'3xl': '1.5rem',
'4xl': '2rem',
},
// KEYFRAMES DAN ANIMASI BARU UNTUK SCROLL
keyframes: {
fadeInUp: {
'0%': { opacity: '0', transform: 'translateY(20px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
fadeInLeft: {
'0%': { opacity: '0', transform: 'translateX(-20px)' },
'100%': { opacity: '1', transform: 'translateX(0)' },
},
fadeInRight: {
'0%': { opacity: '0', transform: 'translateX(20px)' },
'100%': { opacity: '1', transform: 'translateX(0)' },
},
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
}
},
animation: {
fadeInUp: 'fadeInUp 0.7s ease-out forwards',
fadeInLeft: 'fadeInLeft 0.7s ease-out forwards',
fadeInRight: 'fadeInRight 0.7s ease-out forwards',
fadeIn: 'fadeIn 0.7s ease-out forwards',
}
}
}
}
</script>
<style>
/* Custom Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #1e293b; }
::-webkit-scrollbar-thumb { background: #3b82f6; border-radius: 10px; }
/* Slider Transitions */
.slide {
transition: opacity 0.7s ease-in-out;
opacity: 0;
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
z-index: 10;
}
.slide.active { opacity: 1; z-index: 20; }
/* Glassmorphism yang adaptif (Terang/Gelap) */
.glass {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.3);
}
.dark .glass {
background: rgba(15, 23, 42, 0.8);
border: 1px solid rgba(255,255,255,0.05);
}
/* IMAGE HOLDER STYLE */
.img-container {
width: 100%;
height: 100%;
background-color: #cbd5e1;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
color: #64748b;
text-align: center;
}
.dark .img-container {
background-color: #334155;
color: #94a3b8;
}
.img-container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
position: absolute;
top: 0; left: 0;
}
.placeholder-text {
z-index: 1;
font-size: 0.8rem;
pointer-events: none;
padding: 10px;
}
/* Kelas untuk elemen yang akan dianimasikan */
.scroll-reveal {
opacity: 0; /* Semua elemen yang akan dianimasikan dimulai dengan opacity 0 */
transition: opacity 0.3s ease; /* Transisi untuk menghindari kedipan saat load */
}
</style>
</head>
<body class="bg-slate-50 text-slate-800 dark:bg-brand-dark dark:text-slate-100 font-sans antialiased transition-colors duration-300">
<!-- NAVBAR -->
<nav class="fixed w-full z-50 transition-all duration-300 top-0" id="navbar">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-4">
<div class="glass rounded-full shadow-lg px-6 py-3 flex justify-between items-center">
<a href="#" class="flex items-center gap-3">
<!-- LOGO SEKOLAH (UPDATED) -->
<img src= "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiR1Jc3dZqoelQ_jpx0jsQo7PGhLS_rNEf51556_pL57PyE24ivlgJBMA4-ti756XpKI86X1kWF5fcVKMuxSuyQcgOllAhvz3ydeZ50OImvLzJYtYId-ctr4Fw1JSy9OMl20aMmuKpWEy7Zqdfdm_xZoNnMteawVL73JqER0FCYYpamI0/s1600/logo%20ibg.png" alt= "Logo smk ing" class="w-12 h-12 object-contain filter drop-shadow-md">
<div class="leading-tight">
<h1 class="font-bold text-brand-900 dark:text-white text-sm sm:text-base">SMK Informatika</h1>
<p class="text-xs text-brand-600 dark:text-brand-500 font-semibold">Bina Generasi 3 Bogor</p>
</div>
</a>
<!-- Desktop Menu -->
<div class="hidden lg:flex items-center space-x-8 text-sm font-semibold text-slate-600 dark:text-slate-300">
<a href="#home" class="hover:text-brand-600 dark:hover:text-brand-400 transition">Beranda</a>
<a href="#profil" class="hover:text-brand-600 dark:hover:text-brand-400 transition">Profil</a>
<a href="#prestasi" class="hover:text-brand-600 dark:hover:text-brand-400 transition">Prestasi</a>
<a href="#jurusan" class="hover:text-brand-600 dark:hover:text-brand-400 transition">Jurusan</a>
<a href="#galeri" class="hover:text-brand-600 dark:hover:text-brand-400 transition">Galeri</a>
</div>
<div class="flex items-center gap-3">
<!-- Dark Mode Toggle -->
<button id="theme-toggle" class="w-9 h-9 rounded-full bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-yellow-400 flex items-center justify-center transition hover:scale-110">
<i class="fa-solid fa-moon dark:hidden"></i>
<i class="fa-solid fa-sun hidden dark:block"></i>
</button>
<!-- CTA Button -->
<div class="hidden md:block">
<a href="#ppdb" class="bg-brand-600 hover:bg-brand-700 text-white px-5 py-2.5 rounded-full text-sm font-bold transition shadow-md shadow-brand-500/30 flex items-center gap-2">
<i class="fa-solid fa-user-plus"></i> PPDB
</a>
</div>
<!-- Mobile Menu Button -->
<button id="mobile-menu-btn" class="lg:hidden text-brand-900 dark:text-white focus:outline-none text-2xl ml-2">
<i class="fa-solid fa-bars"></i>
</button>
</div>
</div>
<!-- Mobile Menu Dropdown -->
<div id="mobile-menu" class="hidden lg:hidden mt-2 bg-white dark:bg-brand-card rounded-3xl shadow-xl border border-slate-100 dark:border-slate-700 p-4 absolute left-4 right-4 top-20 flex-col gap-2 z-40 origin-top animate-fade-in-down">
<a href="#home" class="block px-4 py-3 hover:bg-brand-50 dark:hover:bg-slate-700 rounded-xl font-semibold text-slate-700 dark:text-slate-200">Beranda</a>
<a href="#profil" class="block px-4 py-3 hover:bg-brand-50 dark:hover:bg-slate-700 rounded-xl font-semibold text-slate-700 dark:text-slate-200">Profil</a>
<a href="#prestasi" class="block px-4 py-3 hover:bg-brand-50 dark:hover:bg-slate-700 rounded-xl font-semibold text-slate-700 dark:text-slate-200">Prestasi</a>
<a href="#jurusan" class="block px-4 py-3 hover:bg-brand-50 dark:hover:bg-slate-700 rounded-xl font-semibold text-slate-700 dark:text-slate-200">Jurusan</a>
<a href="#galeri" class="block px-4 py-3 hover:bg-brand-50 dark:hover:bg-slate-700 rounded-xl font-semibold text-slate-700 dark:text-slate-200">Galeri</a>
<a href="#ppdb" class="block w-full text-center bg-brand-600 text-white px-4 py-3 rounded-xl font-bold mt-2">Daftar Sekarang</a>
</div>
</div>
</nav>
<!-- HERO SLIDER SECTION -->
<!-- Hero section tidak diberi scroll-reveal karena ini adalah elemen pertama yang langsung terlihat -->
<section id="home" class="relative w-full h-[600px] md:h-[700px] overflow-hidden -mt-24 pt-24">
<div class="relative w-full h-full" id="slider-container">
<!-- Slide 1 -->
<div class="slide active">
<div class="img-container">
<div class="placeholder-text"><i class="fa-solid fa-image text-4xl mb-2"></i><br>Slider Image 1 (Gedung Sekolah)</div>
</div>
<div class="absolute inset-0 bg-gradient-to-t md:bg-gradient-to-r from-brand-900/90 via-brand-900/50 to-transparent z-20 flex items-center">
<div class="container mx-auto px-6">
<div class="max-w-2xl text-white mt-20 md:mt-0 text-center md:text-left mx-auto md:mx-0">
<span class="bg-white/20 backdrop-blur-sm text-white px-4 py-1.5 rounded-full text-xs font-bold uppercase mb-4 inline-block border border-white/30">Selamat Datang</span>
<h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6">Mencetak Generasi <span class="text-blue-300">Digital</span> Unggulan</h1>
<p class="text-lg text-slate-200 mb-8">Siapkan diri Anda menghadapi masa depan teknologi bersama SMK Informatika Bina Generasi 3 Bogor.</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
<a href="#jurusan" class="bg-white text-brand-700 hover:bg-brand-50 px-8 py-3.5 rounded-full font-bold transition shadow-lg">Lihat Jurusan</a>
<a href="#ppdb" class="bg-transparent border-2 border-white text-white hover:bg-white/10 px-8 py-3.5 rounded-full font-bold transition">Daftar Online</a>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="slide">
<div class="img-container">
<div class="placeholder-text"><i class="fa-solid fa-image text-4xl mb-2"></i><br>Slider Image 2 (Kegiatan Belajar)</div>
</div>
<div class="absolute inset-0 bg-gradient-to-t md:bg-gradient-to-r from-brand-900/90 via-brand-900/50 to-transparent z-20 flex items-center">
<div class="container mx-auto px-6">
<div class="max-w-2xl text-white mt-20 md:mt-0 text-center md:text-left mx-auto md:mx-0">
<span class="bg-brand-500/80 text-white px-4 py-1.5 rounded-full text-xs font-bold uppercase mb-4 inline-block">Fasilitas Lengkap</span>
<h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6">Laboratorium <span class="text-blue-300">Berstandar Industri</span></h1>
<p class="text-lg text-slate-200 mb-8">Praktik langsung dengan perangkat keras dan lunak terbaru untuk menunjang kompetensi siswa.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Controls -->
<button id="prevBtn" class="absolute left-4 md:left-6 top-1/2 z-30 w-10 h-10 md:w-12 md:h-12 flex items-center justify-center rounded-full bg-white/20 hover:bg-white text-white hover:text-brand-900 transition backdrop-blur-md"><i class="fa-solid fa-chevron-left"></i></button>
<button id="nextBtn" class="absolute right-4 md:right-6 top-1/2 z-30 w-10 h-10 md:w-12 md:h-12 flex items-center justify-center rounded-full bg-white/20 hover:bg-white text-white hover:text-brand-900 transition backdrop-blur-md"><i class="fa-solid fa-chevron-right"></i></button>
</section>
<!-- WIDGET KEPALA SEKOLAH -->
<section id="profil" class="py-20 container mx-auto px-4 relative z-20 -mt-10">
<div class="bg-white dark:bg-brand-card rounded-[2.5rem] p-6 md:p-12 shadow-2xl shadow-slate-200 dark:shadow-none border border-slate-100 dark:border-slate-700 flex flex-col lg:flex-row gap-8 lg:gap-12 items-center transition-colors duration-300 scroll-reveal">
<!-- Foto Kepsek -->
<div class="lg:w-1/3 w-full max-w-sm relative group scroll-reveal" data-animation="fadeInLeft">
<div class="absolute inset-0 bg-brand-600 rounded-[2rem] rotate-6 group-hover:rotate-3 transition duration-500"></div>
<div class="relative h-[350px] md:h-[400px] w-full bg-slate-200 dark:bg-slate-700 rounded-[2rem] overflow-hidden border-4 border-white dark:border-brand-card shadow-lg">
<div class="img-container">
<div class="placeholder-text"><i class="fa-solid fa-user-tie text-5xl mb-3"></i><br>Foto Ibu Tri Lestari<br>(Portrait)</div>
</div>
</div>
<div class="absolute bottom-6 left-1/2 -translate-x-1/2 bg-white/90 dark:bg-slate-800/90 backdrop-blur px-6 py-3 rounded-2xl shadow text-center w-[90%] border border-white dark:border-slate-600">
<h3 class="font-bold text-brand-900 dark:text-white text-lg">Tri Lestari, M.Pd</h3>
<p class="text-xs text-brand-600 dark:text-brand-400 font-semibold uppercase tracking-wider">Kepala Sekolah</p>
</div>
</div>
<div class="lg:w-2/3 text-center lg:text-left scroll-reveal" data-animation="fadeInRight">
<span class="text-brand-600 dark:text-brand-400 font-bold tracking-wider text-sm uppercase mb-2 block"><i class="fa-solid fa-quote-left mr-2"></i>Sambutan Kepala Sekolah</span>
<h2 class="text-3xl md:text-4xl font-extrabold text-slate-900 dark:text-white mb-6 leading-tight">Membangun Karakter, <br>Menguasai Teknologi.</h2>
<div class="space-y-4 text-slate-600 dark:text-slate-300 text-lg leading-relaxed">
<p>"Assalamualaikum Wr. Wb. Selamat datang di website resmi SMK Informatika Bina Generasi 3 Bogor."</p>
<p>Pendidikan adalah fondasi masa depan. Kami hadir dengan kurikulum yang relevan dengan kebutuhan industri, memastikan setiap lulusan memiliki *hard skill* yang mumpuni serta *soft skill* dan karakter yang kuat untuk bersaing di era global.</p>
</div>
<div class="mt-8 flex gap-4 justify-center lg:justify-start">
<a href="#" class="inline-flex items-center gap-2 text-brand-700 dark:text-blue-400 font-bold hover:gap-3 transition">Baca Selengkapnya <i class="fa-solid fa-arrow-right"></i></a>
</div>
</div>
</div>
</section>
<!-- SECTION PRESTASI & SISWA BERPRESTASI -->
<section id="prestasi" class="py-16 bg-brand-50/50 dark:bg-slate-800/50 transition-colors duration-300">
<div class="container mx-auto px-4">
<div class="text-center mb-10 scroll-reveal" data-animation="fadeIn">
<h2 class="text-2xl font-bold text-slate-900 dark:text-white">Prestasi Sekolah</h2>
<p class="text-slate-500 dark:text-slate-400 text-sm">Bukti nyata dedikasi kami dalam pendidikan.</p>
</div>
<!-- Grid Penghargaan -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 mb-16">
<!-- Item 1 -->
<div class="bg-white dark:bg-brand-card p-6 rounded-3xl shadow-sm hover:shadow-xl transition border border-slate-100 dark:border-slate-700 text-center group scroll-reveal" data-animation="fadeInUp" data-delay="0">
<div class="w-16 h-16 mx-auto bg-yellow-50 dark:bg-yellow-900/30 rounded-full flex items-center justify-center text-yellow-500 text-2xl mb-4 group-hover:scale-110 transition"><i class="fa-solid fa-trophy"></i></div>
<h3 class="font-bold text-slate-800 dark:text-slate-200 text-sm md:text-base">Juara 1 LKS</h3>
<p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Web Tech Kota Bogor</p>
</div>
<!-- Item 2 -->
<div class="bg-white dark:bg-brand-card p-6 rounded-3xl shadow-sm hover:shadow-xl transition border border-slate-100 dark:border-slate-700 text-center group scroll-reveal" data-animation="fadeInUp" data-delay="100">
<div class="w-16 h-16 mx-auto bg-blue-50 dark:bg-blue-900/30 rounded-full flex items-center justify-center text-brand-500 text-2xl mb-4 group-hover:scale-110 transition"><i class="fa-solid fa-medal"></i></div>
<h3 class="font-bold text-slate-800 dark:text-slate-200 text-sm md:text-base">Adiwiyata</h3>
<p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Tingkat Provinsi</p>
</div>
<!-- Item 3 -->
<div class="bg-white dark:bg-brand-card p-6 rounded-3xl shadow-sm hover:shadow-xl transition border border-slate-100 dark:border-slate-700 text-center group scroll-reveal" data-animation="fadeInUp" data-delay="200">
<div class="w-16 h-16 mx-auto bg-green-50 dark:bg-green-900/30 rounded-full flex items-center justify-center text-green-500 text-2xl mb-4 group-hover:scale-110 transition"><i class="fa-solid fa-certificate"></i></div>
<h3 class="font-bold text-slate-800 dark:text-slate-200 text-sm md:text-base">Akreditasi A</h3>
<p class="text-xs text-slate-500 dark:text-slate-400 mt-1">BAN-SM (Unggul)</p>
</div>
<!-- Item 4 -->
<div class="bg-white dark:bg-brand-card p-6 rounded-3xl shadow-sm hover:shadow-xl transition border border-slate-100 dark:border-slate-700 text-center group scroll-reveal" data-animation="fadeInUp" data-delay="300">
<div class="w-16 h-16 mx-auto bg-purple-50 dark:bg-purple-900/30 rounded-full flex items-center justify-center text-purple-500 text-2xl mb-4 group-hover:scale-110 transition"><i class="fa-solid fa-handshake"></i></div>
<h3 class="font-bold text-slate-800 dark:text-slate-200 text-sm md:text-base">Mitra Industri</h3>
<p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Terluas di Bogor</p>
</div>
</div>
<!-- WIDGET SISWA BERPRESTASI (OLIMPIADE MATEMATIKA) -->
<div class="bg-gradient-to-br from-brand-600 to-brand-900 rounded-[2rem] md:rounded-[3rem] p-1 shadow-2xl overflow-hidden relative scroll-reveal" data-animation="fadeIn">
<!-- Decorative Circles -->
<div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -mr-16 -mt-16 blur-2xl"></div>
<div class="absolute bottom-0 left-0 w-48 h-48 bg-blue-400/20 rounded-full -ml-10 -mb-10 blur-xl"></div>
<div class="bg-white/5 backdrop-blur-sm rounded-[1.8rem] md:rounded-[2.8rem] p-6 md:p-12 flex flex-col md:flex-row items-center gap-8 md:gap-16 relative z-10">
<!-- Foto Siswa -->
<div class="w-full md:w-1/3 flex justify-center scroll-reveal" data-animation="fadeInLeft">
<div class="relative w-56 h-56 md:w-72 md:h-72">
<!-- Badge -->
<div class="absolute -top-4 -right-4 z-20 bg-yellow-400 text-yellow-900 px-4 py-2 rounded-full font-bold shadow-lg flex items-center gap-2 animate-bounce text-sm md:text-base">
<i class="fa-solid fa-crown"></i> Juara 1
</div>
<!-- Bingkai Foto Bulat -->
<div class="w-full h-full rounded-full border-4 border-white/30 p-2 relative shadow-2xl bg-white/5">
<div class="w-full h-full rounded-full overflow-hidden relative bg-slate-300">
<div class="img-container">
<div class="placeholder-text text-slate-600"><i class="fa-solid fa-user text-4xl mb-2"></i><br>Foto Ayu Anggi Lestari</div>
</div>
</div>
</div>
</div>
</div>
<!-- Info Siswa -->
<div class="w-full md:w-2/3 text-center md:text-left text-white scroll-reveal" data-animation="fadeInRight">
<div class="inline-block bg-blue-500/30 border border-blue-400/30 px-4 py-1 rounded-full text-xs font-bold uppercase tracking-wide mb-3">Student of The Month</div>
<h2 class="text-3xl md:text-5xl font-bold mb-2">Ayu Anggi Lestari</h2>
<p class="text-blue-200 text-lg mb-6">Kelas XI - Rekayasa Perangkat Lunak</p>
<div class="bg-white/10 rounded-2xl p-6 border border-white/10 mb-6">
<div class="flex flex-col md:flex-row items-center gap-4 text-center md:text-left">
<div class="w-12 h-12 bg-yellow-400 rounded-full flex items-center justify-center text-yellow-900 text-2xl shadow-lg shrink-0">
<i class="fa-solid fa-calculator"></i>
</div>
<div>
<h3 class="font-bold text-xl md:text-2xl text-white">Juara 1 Olimpiade Matematika</h3>
<p class="text-blue-200 text-sm">Tingkat Provinsi Jawa Barat Tahun 2025</p>
</div>
</div>
</div>
<p class="italic text-blue-100/80 text-sm md:text-base">"Matematika adalah kunci untuk memahami logika pemrograman. Jangan pernah menyerah memecahkan masalah."</p>
</div>
</div>
</div>
</div>
</section>
<!-- JURUSAN (UPDATE 5 JURUSAN) -->
<section id="jurusan" class="py-20 relative bg-slate-50 dark:bg-brand-dark transition-colors duration-300">
<div class="container mx-auto px-4">
<div class="text-center max-w-2xl mx-auto mb-16 scroll-reveal" data-animation="fadeInUp">
<h2 class="text-3xl md:text-4xl font-bold text-slate-900 dark:text-white mb-4">Program Keahlian</h2>
<p class="text-slate-600 dark:text-slate-400">Pilih jurusan sesuai minat dan bakatmu untuk masa depan yang gemilang.</p>
</div>
<!-- Grid System: 1 kolom di HP, 2 di Tablet, 3 di Laptop. Flex justify-center agar baris terakhir (2 item) ada di tengah -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 justify-center">
<!-- Card 1: RPL -->
<div class="bg-white dark:bg-brand-card rounded-[2rem] p-3 shadow-lg hover:shadow-2xl transition duration-300 group border border-slate-100 dark:border-slate-700 scroll-reveal" data-animation="fadeInUp" data-delay="0">
<div class="h-56 rounded-[1.5rem] overflow-hidden relative">
<div class="img-container">
<div class="placeholder-text"><i class="fa-solid fa-code text-3xl mb-2"></i><br>Foto RPL</div>
</div>
<div class="absolute top-4 right-4 bg-white/90 backdrop-blur p-2 rounded-xl shadow text-brand-600">
<i class="fa-solid fa-laptop-code text-xl"></i>
</div>
</div>
<div class="p-5">
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">Rekayasa Perangkat Lunak</h3>
<p class="text-slate-500 dark:text-slate-400 text-sm mb-4">Web Development, Android Apps, Database Management.</p>
<a href="#" class="inline-block py-2 px-4 rounded-lg bg-brand-50 dark:bg-slate-700 text-brand-700 dark:text-blue-400 font-bold text-sm group-hover:bg-brand-600 group-hover:text-white transition">Lihat Detail</a>
</div>
</div>
<!-- Card 2: TKJ -->
<div class="bg-white dark:bg-brand-card rounded-[2rem] p-3 shadow-lg hover:shadow-2xl transition duration-300 group border border-slate-100 dark:border-slate-700 scroll-reveal" data-animation="fadeInUp" data-delay="100">
<div class="h-56 rounded-[1.5rem] overflow-hidden relative">
<div class="img-container">
<div class="placeholder-text"><i class="fa-solid fa-server text-3xl mb-2"></i><br>Foto TKJ</div>
</div>
<div class="absolute top-4 right-4 bg-white/90 backdrop-blur p-2 rounded-xl shadow text-brand-600">
<i class="fa-solid fa-network-wired text-xl"></i>
</div>
</div>
<div class="p-5">
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">Teknik Komputer Jaringan</h3>
<p class="text-slate-500 dark:text-slate-400 text-sm mb-4">Network Admin, Fiber Optic, Mikrotik, IoT System.</p>
<a href="#" class="inline-block py-2 px-4 rounded-lg bg-brand-50 dark:bg-slate-700 text-brand-700 dark:text-blue-400 font-bold text-sm group-hover:bg-brand-600 group-hover:text-white transition">Lihat Detail</a>
</div>
</div>
<!-- Card 3: DKV (Multimedia) -->
<div class="bg-white dark:bg-brand-card rounded-[2rem] p-3 shadow-lg hover:shadow-2xl transition duration-300 group border border-slate-100 dark:border-slate-700 scroll-reveal" data-animation="fadeInUp" data-delay="200">
<div class="h-56 rounded-[1.5rem] overflow-hidden relative">
<div class="img-container">
<div class="placeholder-text"><i class="fa-solid fa-pen-nib text-3xl mb-2"></i><br>Foto DKV</div>
</div>
<div class="absolute top-4 right-4 bg-white/90 backdrop-blur p-2 rounded-xl shadow text-brand-600">
<i class="fa-solid fa-camera text-xl"></i>
</div>
</div>
<div class="p-5">
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">Multimedia</h3>
<p class="text-slate-500 dark:text-slate-400 text-sm mb-4">Graphic Design, Photography, Videography, Animation.</p>
<a href="#" class="inline-block py-2 px-4 rounded-lg bg-brand-50 dark:bg-slate-700 text-brand-700 dark:text-blue-400 font-bold text-sm group-hover:bg-brand-600 group-hover:text-white transition">Lihat Detail</a>
</div>
</div>
<!-- Card 4: Administrasi Perkantoran (BARU) -->
<div class="bg-white dark:bg-brand-card rounded-[2rem] p-3 shadow-lg hover:shadow-2xl transition duration-300 group border border-slate-100 dark:border-slate-700 scroll-reveal" data-animation="fadeInUp" data-delay="300">
<div class="h-56 rounded-[1.5rem] overflow-hidden relative">
<div class="img-container">
<div class="placeholder-text"><i class="fa-solid fa-print text-3xl mb-2"></i><br>Foto OTKP</div>
</div>
<div class="absolute top-4 right-4 bg-white/90 backdrop-blur p-2 rounded-xl shadow text-brand-600">
<i class="fa-solid fa-briefcase text-xl"></i>
</div>
</div>
<div class="p-5">
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">Administrasi Perkantoran</h3>
<p class="text-slate-500 dark:text-slate-400 text-sm mb-4">Office Management, Surat Menyurat, Arsip Digital, Public Relation.</p>
<a href="#" class="inline-block py-2 px-4 rounded-lg bg-brand-50 dark:bg-slate-700 text-brand-700 dark:text-blue-400 font-bold text-sm group-hover:bg-brand-600 group-hover:text-white transition">Lihat Detail</a>
</div>
</div>
<!-- Card 5: Pemasaran (BARU) -->
<div class="bg-white dark:bg-brand-card rounded-[2rem] p-3 shadow-lg hover:shadow-2xl transition duration-300 group border border-slate-100 dark:border-slate-700 scroll-reveal" data-animation="fadeInUp" data-delay="400">
<div class="h-56 rounded-[1.5rem] overflow-hidden relative">
<div class="img-container">
<div class="placeholder-text"><i class="fa-solid fa-shop text-3xl mb-2"></i><br>Foto Pemasaran</div>
</div>
<div class="absolute top-4 right-4 bg-white/90 backdrop-blur p-2 rounded-xl shadow text-brand-600">
<i class="fa-solid fa-bullhorn text-xl"></i>
</div>
</div>
<div class="p-5">
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">Bisnis Daring & Pemasaran</h3>
<p class="text-slate-500 dark:text-slate-400 text-sm mb-4">Digital Marketing, E-Commerce, Entrepreneurship, Retail.</p>
<a href="#" class="inline-block py-2 px-4 rounded-lg bg-brand-50 dark:bg-slate-700 text-brand-700 dark:text-blue-400 font-bold text-sm group-hover:bg-brand-600 group-hover:text-white transition">Lihat Detail</a>
</div>
</div>
</div>
</div>
</section>
<!-- GALERI KEGIATAN -->
<section id="galeri" class="py-20 bg-slate-100 dark:bg-slate-800 transition-colors duration-300">
<div class="container mx-auto px-4">
<div class="text-center mb-12 scroll-reveal" data-animation="fadeIn">
<h2 class="text-3xl md:text-4xl font-bold text-slate-900 dark:text-white">Galeri Sekolah</h2>
<p class="text-slate-600 dark:text-slate-400 mt-2">Momen terbaik dari kegiatan siswa kami.</p>
</div>
<!-- Mosaic Grid Responsive -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 auto-rows-[150px] md:auto-rows-[200px]">
<div class="col-span-2 row-span-2 rounded-3xl overflow-hidden shadow-lg relative group scroll-reveal" data-animation="fadeIn" data-delay="0">
<div class="img-container"><div class="placeholder-text">Foto Utama</div></div>
<div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition duration-300 flex items-end p-6">
<span class="text-white font-bold text-lg">Kegiatan Akbar</span>
</div>
</div>
<div class="col-span-1 row-span-1 rounded-3xl overflow-hidden shadow-lg relative group scroll-reveal" data-animation="fadeInUp" data-delay="100">
<div class="img-container"><div class="placeholder-text">Foto 1</div></div>
</div>
<div class="col-span-1 row-span-1 rounded-3xl overflow-hidden shadow-lg relative group scroll-reveal" data-animation="fadeInUp" data-delay="200">
<div class="img-container"><div class="placeholder-text">Foto 2</div></div>
</div>
<div class="col-span-2 row-span-1 rounded-3xl overflow-hidden shadow-lg relative group scroll-reveal" data-animation="fadeInUp" data-delay="300">
<div class="img-container"><div class="placeholder-text">Foto Lebar</div></div>
</div>
<div class="col-span-1 row-span-1 rounded-3xl overflow-hidden shadow-lg relative group scroll-reveal" data-animation="fadeInUp" data-delay="400">
<div class="img-container"><div class="placeholder-text">Foto 3</div></div>
</div>
<div class="col-span-1 row-span-1 rounded-3xl overflow-hidden shadow-lg relative group scroll-reveal" data-animation="fadeInUp" data-delay="500">
<div class="img-container"><div class="placeholder-text">Foto 4</div></div>
</div>
</div>
<div class="text-center mt-8 scroll-reveal" data-animation="fadeInUp">
<button class="px-8 py-3 rounded-full border-2 border-slate-300 dark:border-slate-600 text-slate-600 dark:text-slate-300 font-bold hover:bg-slate-200 dark:hover:bg-slate-700 transition">Muat Lebih Banyak</button>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="bg-brand-900 dark:bg-slate-950 text-white pt-20 pb-10 rounded-t-[3rem] mt-10 transition-colors duration-300 scroll-reveal" data-animation="fadeInUp">
<div class="container mx-auto px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
<!-- Info Sekolah -->
<div class="col-span-1 md:col-span-1">
<div class="flex items-center gap-3 mb-6">
<!-- LOGO FOOTER (UPDATED) -->
<img src= "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiR1Jc3dZqoelQ_jpx0jsQo7PGhLS_rNEf51556_pL57PyE24ivlgJBMA4-ti756XpKI86X1kWF5fcVKMuxSuyQcgOllAhvz3ydeZ50OImvLzJYtYId-ctr4Fw1JSy9OMl20aMmuKpWEy7Zqdfdm_xZoNnMteawVL73JqER0FCYYpamI0/s1600/logo%20ibg.png" alt="Logo SMK IBG 3" class="w-10 h-10 object-contain bg-white rounded-full p-1">
<h2 class="font-bold text-lg">SMK Informatika Bina Generasi 3 Bogor</h2>
</div>
<!-- ALAMAT BARU -->
<p class="text-slate-300 text-sm leading-relaxed mb-6">
Jl. Kebandungan 1 RT 1 RW 5 Gg Merpati, Desa Sirnagalih, Kecamatan Tamansari, Kabupaten Bogor.<br>
Mencetak generasi unggul, berakhlak mulia, dan siap kerja.
</p>
<div class="flex gap-4">
<a href="#" class="w-10 h-10 rounded-full bg-white/10 hover:bg-brand-500 flex items-center justify-center transition"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#" class="w-10 h-10 rounded-full bg-white/10 hover:bg-brand-500 flex items-center justify-center transition"><i class="fa-brands fa-instagram"></i></a>
<a href="#" class="w-10 h-10 rounded-full bg-white/10 hover:bg-brand-500 flex items-center justify-center transition"><i class="fa-brands fa-youtube"></i></a>
</div>
</div>
<!-- Links -->
<div>
<h3 class="font-bold text-lg mb-6">Navigasi</h3>
<ul class="space-y-3 text-sm text-slate-300">
<li><a href="#home" class="hover:text-white transition">Beranda</a></li>
<li><a href="#profil" class="hover:text-white transition">Profil</a></li>
<li><a href="#galeri" class="hover:text-white transition">Galeri</a></li>
<li><a href="#ppdb" class="hover:text-white transition">PPDB Online</a></li>
</ul>
</div>
<!-- Kontak -->
<div class="col-span-1 md:col-span-2">
<h3 class="font-bold text-lg mb-6">Lokasi Kami</h3>
<div class="w-full h-32 bg-slate-800 rounded-xl flex items-center justify-center text-slate-500 text-sm border border-slate-700">
<i class="fa-solid fa-map-location-dot mr-2"></i> Embed Google Maps Disini
</div>
</div>
</div>
<div class="border-t border-white/10 pt-8 text-center text-sm text-slate-400">
<p>© 2025 SMK Informatika Bina Generasi 3 Bogor. All Rights Reserved.</p>
</div>
</div>
</footer>
<!-- FLOATING CONTACT WIDGET BARU -->
<!-- Floating widget tidak diberi scroll-reveal karena ini adalah elemen yang selalu terlihat -->
<div class="fixed bottom-6 right-4 md:right-6 z-50 flex flex-col gap-3">
<!-- WhatsApp/Telepon Button -->
<a href="https://wa.me/6283812345612" target="_blank" class="bg-green-500 hover:bg-green-600 text-white w-14 h-14 rounded-full shadow-xl flex items-center justify-center text-3xl transition duration-300 transform hover:scale-110" aria-label="Hubungi via WhatsApp 083812345612">
<i class="fa-brands fa-whatsapp"></i>
</a>
<!-- Email Button -->
<a href="mailto:smkibg3@gmail.com" class="bg-red-600 hover:bg-red-700 text-white w-14 h-14 rounded-full shadow-xl flex items-center justify-center text-2xl transition duration-300 transform hover:scale-110" aria-label="Kirim Email ke smkibg3@gmail.com">
<i class="fa-solid fa-envelope"></i>
</a>
</div>
<!-- JAVASCRIPT -->
<script>
// --- Dark Mode Logic ---
const themeToggleBtn = document.getElementById('theme-toggle');
const htmlElement = document.documentElement;
// Cek preferensi tersimpan
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
htmlElement.classList.add('dark');
} else {
htmlElement.classList.remove('dark');
}
themeToggleBtn.addEventListener('click', () => {
htmlElement.classList.toggle('dark');
if (htmlElement.classList.contains('dark')) {
localStorage.theme = 'dark';
} else {
localStorage.theme = 'light';
}
});
// --- Slider Logic ---
const slides = document.querySelectorAll('.slide');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
let currentSlide = 0;
let slideInterval;
function showSlide(index) {
if (index >= slides.length) currentSlide = 0;
else if (index < 0) currentSlide = slides.length - 1;
else currentSlide = index;
slides.forEach(slide => slide.classList.remove('active'));
slides[currentSlide].classList.add('active');
}
function nextSlide() { showSlide(currentSlide + 1); }
function prevSlide() { showSlide(currentSlide - 1); }
function startAutoSlide() { slideInterval = setInterval(nextSlide, 5000); }
function stopAutoSlide() { clearInterval(slideInterval); }
nextBtn.addEventListener('click', () => { stopAutoSlide(); nextSlide(); startAutoSlide(); });
prevBtn.addEventListener('click', () => { stopAutoSlide(); prevSlide(); startAutoSlide(); });
startAutoSlide();
// --- Mobile Menu ---
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
mobileMenu.classList.toggle('flex');
});
document.querySelectorAll('#mobile-menu a').forEach(link => {
link.addEventListener('click', () => mobileMenu.classList.add('hidden'));
});
// ===================================
// --- SCROLL ANIMATION LOGIC (BARU) ---
// ===================================
window.addEventListener('DOMContentLoaded', () => {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
const el = entry.target;
const animationType = el.getAttribute('data-animation') || 'fadeInUp';
const delay = parseInt(el.getAttribute('data-delay')) || 0;
if (entry.isIntersecting) {
// Tambahkan animasi saat elemen terlihat
setTimeout(() => {
el.classList.add(`animate-${animationType}`);
el.classList.remove('scroll-reveal'); // Hapus class awal
}, delay);
// Hentikan pengamatan setelah dianimasikan
observer.unobserve(el);
}
});
}, {
// rootMargin: '0px',
// threshold: 0.1 // Memicu saat 10% elemen terlihat
});
// Cari semua elemen dengan class 'scroll-reveal'
document.querySelectorAll('.scroll-reveal').forEach(el => {
// Tambahkan class awal untuk memastikan opacity 0 sebelum animasi
// Kita tambahkan class ini di HTML/CSS agar elemen tidak terlihat sebelum JS berjalan
observer.observe(el);
});
});
// --- Fixed Navbar Style Change on Scroll ---
const navbar = document.getElementById('navbar');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
// Tambahkan class untuk membuat navbar lebih solid saat menggulir
navbar.classList.add('bg-white/95', 'dark:bg-brand-dark/95', 'shadow-lg');
navbar.classList.remove('mt-4'); // Hapus margin atas
} else {
// Kembalikan ke tampilan transparan saat di atas
navbar.classList.remove('bg-white/95', 'dark:bg-brand-dark/95', 'shadow-lg');
navbar.classList.add('mt-4'); // Tambahkan margin atas
}
});
</script>
</body>
</html>