Akademik
Kurikulum & Pembelajaran)
Jadwal KBM
Kalender Pendidikan
Materi Belajar (E-Learning)
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kurikulum & Pembelajaran SMPN 1 Cibiuk</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@500;600;700;800&display=swap" rel="stylesheet">
<style>
.font-poppins { font-family: 'Poppins', sans-serif; }
.font-inter { font-family: 'Inter', sans-serif; }
/* Kustomisasi Swiper Pagination (Titik-titik di bawah) */
.swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: #cbd5e1;
opacity: 1;
transition: all 0.3s ease;
}
.swiper-pagination-bullet-active {
background-color: #2563eb;
width: 32px;
border-radius: 8px;
}
/* Kustomisasi Tombol Navigasi Swiper (Panah) */
.swiper-button-next, .swiper-button-prev {
color: #2563eb;
background-color: white;
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
background-color: #2563eb;
color: white;
transform: scale(1.1);
}
.swiper-button-next::after, .swiper-button-prev::after {
font-size: 20px;
font-weight: bold;
}
/* Gradient Text Animasi */
.text-gradient-animate {
background-size: 200% auto;
animation: textShine 4s linear infinite;
}
@keyframes textShine {
to { background-position: 200% center; }
}
/* Background Pattern Latar Belakang */
.bg-grid-pattern {
background-image: linear-gradient(to right, #e2e8f0 1px, transparent 1px), linear-gradient(to bottom, #e2e8f0 1px, transparent 1px);
background-size: 40px 40px;
}
/* Efek Kaca (Glassmorphism) Halus untuk Card Download */
.glass-btn {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.5);
}
</style>
</head>
<body class="bg-slate-50 font-inter text-slate-700 antialiased overflow-x-hidden">
<section class="relative w-full py-20 lg:py-28 overflow-hidden bg-white">
<!-- Ornamen Background -->
<div class="absolute inset-0 bg-grid-pattern opacity-30 z-0"></div>
<div class="absolute top-0 right-0 w-[500px] h-[500px] bg-blue-100/50 rounded-full mix-blend-multiply filter blur-3xl opacity-60 z-0 -translate-y-1/2 translate-x-1/3"></div>
<div class="max-w-[1400px] mx-auto px-6 sm:px-10 lg:px-16 relative z-10 w-full">
<div class="text-center max-w-4xl mx-auto mb-16">
<span class="inline-flex items-center justify-center py-1.5 px-5 rounded-full bg-indigo-50 border border-indigo-100 text-indigo-700 font-bold text-sm tracking-widest uppercase mb-6 shadow-sm">
<i class="fa-solid fa-book-open mr-2"></i> Kurikulum & Pembelajaran
</span>
<h2 class="font-poppins font-extrabold text-4xl md:text-5xl lg:text-6xl text-slate-900 leading-tight mb-6">
<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-700 via-indigo-600 to-blue-700 text-gradient-animate">Learning Zone:</span><br>
Menumbuhkan Nalar Kritis, Kreativitas, & Kemandirian Digital
</h2>
<p class="text-lg md:text-xl text-slate-500">
Eksplorasi sistem akademik, program unggulan, dan fasilitas digital interaktif yang kami hadirkan untuk mendukung potensi emas setiap siswa.
</p>
</div>
<!-- Wrapper Slider -->
<div class="relative w-full max-w-6xl mx-auto">
<div class="swiper curriculumSwiper pb-16"> <!-- pb-16 memberi ruang untuk titik paginasi -->
<div class="swiper-wrapper">
<div class="swiper-slide h-auto">
<div class="bg-white rounded-3xl p-8 lg:p-12 shadow-[0_8px_30px_rgb(0,0,0,0.06)] border border-slate-100 h-full">
<div class="flex flex-col lg:flex-row gap-10 items-center">
<div class="lg:w-5/12">
<div class="w-16 h-16 bg-blue-100 text-blue-600 rounded-2xl flex items-center justify-center text-3xl mb-6 shadow-inner">
<i class="fa-solid fa-network-wired"></i>
</div>
<h3 class="font-poppins font-bold text-3xl text-slate-900 mb-4">Landasan Kurikulum</h3>
<h4 class="text-xl font-semibold text-blue-700 mb-4">Kurikulum Merdeka Berbasis Digital</h4>
<p class="text-slate-600 leading-relaxed mb-6 text-justify">
SMP Negeri 1 Cibiuk menerapkan <strong>Kurikulum Merdeka</strong> yang dirancang untuk memberikan fleksibilitas dan pengalaman belajar yang bermakna bagi setiap peserta didik. Pembelajaran berpusat pada siswa <em>(student-centered learning)</em> guna mengembangkan potensi akademik, karakter, serta literasi teknologi secara seimbang.
</p>
</div>
<div class="lg:w-7/12 grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-slate-50 p-6 rounded-2xl border border-slate-100 hover:border-blue-300 transition-colors">
<i class="fa-solid fa-chalkboard-user text-2xl text-indigo-500 mb-3"></i>
<h5 class="font-bold text-slate-800 mb-2">Intrakurikuler (PBL)</h5>
<p class="text-sm text-slate-600">Penguasaan konsep utama dengan pendekatan kontekstual dan berbasis pemecahan masalah.</p>
</div>
<div class="bg-slate-50 p-6 rounded-2xl border border-slate-100 hover:border-blue-300 transition-colors">
<i class="fa-solid fa-users-viewfinder text-2xl text-emerald-500 mb-3"></i>
<h5 class="font-bold text-slate-800 mb-2">Projek P5</h5>
<p class="text-sm text-slate-600">Pembelajaran lintas disiplin untuk melatih karakter Profil Pelajar Pancasila secara nyata.</p>
</div>
<div class="bg-slate-50 p-6 rounded-2xl border border-slate-100 hover:border-blue-300 transition-colors md:col-span-2">
<i class="fa-solid fa-laptop-chromebook text-2xl text-blue-500 mb-3"></i>
<h5 class="font-bold text-slate-800 mb-2">Digital Class Integration</h5>
<p class="text-sm text-slate-600">Penggunaan perangkat digital (Chromebook) & E-Learning secara aktif dalam rutinitas KBM.</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide h-auto">
<div class="bg-white rounded-3xl p-8 lg:p-12 shadow-[0_8px_30px_rgb(0,0,0,0.06)] border border-slate-100 h-full">
<div class="text-center mb-10">
<h3 class="font-poppins font-bold text-3xl text-slate-900 mb-3">Struktur Mata Pelajaran Utama</h3>
<p class="text-slate-500">Kelompok mata pelajaran standar Kurikulum Nasional yang diajarkan.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-6">
<!-- List Item Mata Pelajaran -->
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center flex-shrink-0"><i class="fa-solid fa-mosque"></i></div>
<div>
<h5 class="font-bold text-slate-800">Pend. Agama & Budi Pekerti</h5>
<p class="text-xs text-slate-500 mt-1">Pembentukan akhlak mulia.</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-full bg-red-100 text-red-600 flex items-center justify-center flex-shrink-0"><i class="fa-solid fa-flag"></i></div>
<div>
<h5 class="font-bold text-slate-800">Pendidikan Pancasila</h5>
<p class="text-xs text-slate-500 mt-1">Wawasan kebangsaan & kewarganegaraan.</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center flex-shrink-0"><i class="fa-solid fa-book"></i></div>
<div>
<h5 class="font-bold text-slate-800">Bahasa Indonesia</h5>
<p class="text-xs text-slate-500 mt-1">Literasi & komunikasi.</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center flex-shrink-0"><i class="fa-solid fa-calculator"></i></div>
<div>
<h5 class="font-bold text-slate-800">Matematika</h5>
<p class="text-xs text-slate-500 mt-1">Penalaran logis & numerasi.</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-full bg-green-100 text-green-600 flex items-center justify-center flex-shrink-0"><i class="fa-solid fa-leaf"></i></div>
<div>
<h5 class="font-bold text-slate-800">Ilmu Pengetahuan Alam (IPA)</h5>
<p class="text-xs text-slate-500 mt-1">Eksplorasi fenomena alam.</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center flex-shrink-0"><i class="fa-solid fa-earth-asia"></i></div>
<div>
<h5 class="font-bold text-slate-800">Ilmu Pengetahuan Sosial (IPS)</h5>
<p class="text-xs text-slate-500 mt-1">Sejarah & kearifan lokal.</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-full bg-sky-100 text-sky-600 flex items-center justify-center flex-shrink-0"><i class="fa-solid fa-language"></i></div>
<div>
<h5 class="font-bold text-slate-800">Bahasa Inggris</h5>
<p class="text-xs text-slate-500 mt-1">Komunikasi global.</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center flex-shrink-0"><i class="fa-solid fa-code"></i></div>
<div>
<h5 class="font-bold text-slate-800">Informatika</h5>
<p class="text-xs text-slate-500 mt-1">Literasi digital & komputasi.</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-full bg-orange-100 text-orange-600 flex items-center justify-center flex-shrink-0"><i class="fa-solid fa-running"></i></div>
<div>
<h5 class="font-bold text-slate-800">PJOK</h5>
<p class="text-xs text-slate-500 mt-1">Kebugaran dan kesehatan.</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-full bg-pink-100 text-pink-600 flex items-center justify-center flex-shrink-0"><i class="fa-solid fa-palette"></i></div>
<div>
<h5 class="font-bold text-slate-800">Seni Budaya / Prakarya</h5>
<p class="text-xs text-slate-500 mt-1">Estetika & kreativitas.</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide h-auto">
<div class="bg-white rounded-3xl p-8 lg:p-12 shadow-[0_8px_30px_rgb(0,0,0,0.06)] border border-slate-100 h-full">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<!-- Kiri: Program Unggulan -->
<div>
<h3 class="font-poppins font-bold text-2xl text-slate-900 mb-6 flex items-center gap-3">
<i class="fa-solid fa-star text-amber-500"></i> Program Unggulan
</h3>
<div class="space-y-6">
<div class="relative pl-6 border-l-2 border-blue-500">
<div class="absolute w-3 h-3 bg-blue-500 rounded-full -left-[7px] top-1.5"></div>
<h5 class="font-bold text-slate-800 mb-1">Digital Literacy & Smart Class</h5>
<p class="text-sm text-slate-600">Pemanfaatan alat digital (Google Workspace) untuk tugas, kuis interaktif, dan kolaborasi.</p>
</div>
<div class="relative pl-6 border-l-2 border-indigo-500">
<div class="absolute w-3 h-3 bg-indigo-500 rounded-full -left-[7px] top-1.5"></div>
<h5 class="font-bold text-slate-800 mb-1">Bimbingan Literasi & Numerasi</h5>
<p class="text-sm text-slate-600">Pendampingan khusus untuk meningkatkan kemampuan bernalar logis dan pemahaman bacaan.</p>
</div>
<div class="relative pl-6 border-l-2 border-emerald-500">
<div class="absolute w-3 h-3 bg-emerald-500 rounded-full -left-[7px] top-1.5"></div>
<h5 class="font-bold text-slate-800 mb-1">Klinik Akademik (Remedial)</h5>
<p class="text-sm text-slate-600">Layanan bantuan belajar tambahan bagi siswa yang memerlukan pendampingan materi spesifik.</p>
</div>
</div>
</div>
<!-- Kanan: Digital Lounge -->
<div class="bg-slate-900 rounded-2xl p-8 text-white relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-blue-500 rounded-full filter blur-3xl opacity-30"></div>
<h3 class="font-poppins font-bold text-2xl mb-6 flex items-center gap-3 relative z-10">
<i class="fa-solid fa-satellite-dish text-blue-400"></i> Digital Lounge
</h3>
<div class="space-y-5 relative z-10">
<div class="bg-white/10 rounded-xl p-4 border border-white/10 backdrop-blur-sm">
<h5 class="font-bold text-blue-300 mb-1"><i class="fa-solid fa-cloud-arrow-down mr-2"></i> E-Learning & Storage</h5>
<p class="text-sm text-slate-300">Akses modul, tugas, dan materi guru yang dapat diunduh 24/7.</p>
</div>
<div class="bg-white/10 rounded-xl p-4 border border-white/10 backdrop-blur-sm">
<h5 class="font-bold text-blue-300 mb-1"><i class="fa-solid fa-desktop mr-2"></i> CBT (Computer-Based Test)</h5>
<p class="text-sm text-slate-300">Pelaksanaan asesmen dan ujian digital yang transparan dan akurat.</p>
</div>
<div class="bg-white/10 rounded-xl p-4 border border-white/10 backdrop-blur-sm">
<h5 class="font-bold text-blue-300 mb-1"><i class="fa-solid fa-file-invoice mr-2"></i> Portal E-Rapor</h5>
<p class="text-sm text-slate-300">Laporan hasil belajar siswa yang dapat dipantau oleh orang tua secara online.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide h-auto">
<div class="bg-gradient-to-br from-blue-600 to-indigo-800 rounded-3xl p-8 lg:p-12 shadow-xl border border-blue-400 h-full text-center relative overflow-hidden">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10"></div>
<div class="w-20 h-20 mx-auto bg-white/20 rounded-full flex items-center justify-center text-4xl text-white mb-6 backdrop-blur-md relative z-10">
<i class="fa-solid fa-download animate-bounce"></i>
</div>
<h3 class="font-poppins font-bold text-3xl md:text-4xl text-white mb-4 relative z-10">Layanan Akademik</h3>
<p class="text-blue-100 text-lg mb-10 max-w-2xl mx-auto relative z-10">
Pusat unduhan dokumen resmi. Sediakan akses cepat bagi siswa dan orang tua untuk mengunduh dokumen akademik.
</p>
<div class="flex flex-col gap-4 max-w-2xl mx-auto relative z-10">
<a href="#" class="glass-btn flex items-center justify-between p-5 rounded-2xl hover:bg-white transition-colors group">
<div class="flex items-center gap-4 text-left">
<div class="text-red-500 text-3xl"><i class="fa-regular fa-file-pdf"></i></div>
<div>
<h5 class="font-bold text-slate-800 group-hover:text-blue-600 transition-colors">Kalender Akademik TA 2026/2027</h5>
<p class="text-sm text-slate-500">Format PDF - 2.4 MB</p>
</div>
</div>
<div class="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center group-hover:bg-blue-600 group-hover:text-white transition-colors">
<i class="fa-solid fa-arrow-down"></i>
</div>
</a>
<a href="#" class="glass-btn flex items-center justify-between p-5 rounded-2xl hover:bg-white transition-colors group">
<div class="flex items-center gap-4 text-left">
<div class="text-red-500 text-3xl"><i class="fa-regular fa-file-pdf"></i></div>
<div>
<h5 class="font-bold text-slate-800 group-hover:text-blue-600 transition-colors">Jadwal KBM Semester Ganjil/Genap</h5>
<p class="text-sm text-slate-500">Format PDF - 1.1 MB</p>
</div>
</div>
<div class="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center group-hover:bg-blue-600 group-hover:text-white transition-colors">
<i class="fa-solid fa-arrow-down"></i>
</div>
</a>
<a href="#" class="glass-btn flex items-center justify-between p-5 rounded-2xl hover:bg-white transition-colors group">
<div class="flex items-center gap-4 text-left">
<div class="text-blue-500 text-3xl"><i class="fa-solid fa-book-bookmark"></i></div>
<div>
<h5 class="font-bold text-slate-800 group-hover:text-blue-600 transition-colors">Panduan Akses E-Learning & Portal</h5>
<p class="text-sm text-slate-500">Digital Guidebook</p>
</div>
</div>
<div class="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center group-hover:bg-blue-600 group-hover:text-white transition-colors">
<i class="fa-solid fa-arrow-right"></i>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- Pagination (Titik) -->
<div class="swiper-pagination !bottom-0"></div>
</div>
<!-- Navigasi Panah (Ditaruh diluar overflow agar tidak terpotong) -->
<div class="swiper-button-prev hidden md:flex !-left-6 lg:!-left-16"></div>
<div class="swiper-button-next hidden md:flex !-right-6 lg:!-right-16"></div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const swiper = new Swiper('.curriculumSwiper', {
// Pengaturan Dasar
slidesPerView: 1,
spaceBetween: 30,
autoHeight: true, // Container akan menyesuaikan tinggi konten di dalam slide
grabCursor: true, // Ubah kursor menjadi bentuk tangan
// Efek transisi (Bisa diubah ke 'fade' jika ingin efek memudar)
effect: 'slide',
// Paginasi Titik-Titik
pagination: {
el: '.swiper-pagination',
clickable: true,
dynamicBullets: true,
},
// Navigasi Panah
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// Autoplay (Opsional: dinonaktifkan agar user bisa membaca dengan tenang,
// tapi jika ingin diaktifkan, hapus komentar di bawah ini)
/*
autoplay: {
delay: 7000, // 7 detik
disableOnInteraction: true,
},
*/
});
});
</script>
</body>
</html>