| Server IP : 43.129.54.214 / Your IP : 216.73.216.51 Web Server : nginx/1.24.0 System : Linux VM-4-108-ubuntu 6.8.0-134-generic #134-Ubuntu SMP PREEMPT_DYNAMIC Fri Jun 26 18:43:11 UTC 2026 x86_64 User : root ( 0) PHP Version : 8.3.6 Disable Function : exec,passthru,shell_exec,system,proc_open,popen,pcntl_exec MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : OFF Directory : /var/www/sekolahsemestakreatifbangsa.sch.id/homepage/ |
Upload File : |
<!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>Sekolah Semesta Kreatif Bangsa (SSKB)</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap" rel="stylesheet">
<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- AOS Animation CSS -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brandOrange: '#F57C00', /* Dari Brandbook */
brandNavy: '#0F243F', /* Biru Navy Gelap / Midnight Blue */
brandLight: '#FFFFFF', /* Putih bersih sesuai panduan */
},
fontFamily: {
sans: ['Nunito', 'sans-serif'],
heading: ['Fredoka', 'sans-serif'],
cursive: ['Caveat', 'cursive'],
},
boxShadow: {
'soft': '0 10px 40px -10px rgba(0,0,0,0.05)',
'floating': '0 20px 40px -10px rgba(15, 36, 63, 0.15)',
'colored-orange': '0 20px 40px -10px rgba(245, 124, 0, 0.3)',
'colored-navy': '0 20px 40px -10px rgba(15, 36, 63, 0.3)',
'solid-navy': '4px 4px 0px 0px rgba(15, 36, 63, 1)',
'solid-orange': '4px 4px 0px 0px rgba(245, 124, 0, 1)',
}
}
}
}
</script>
<style>
/* CSS Animations & Custom Styling */
body { background-color: #FAFAFA; overflow-x: hidden; }
/* Marquee Animation (Elegant, Flat, & Pro Version) */
.marquee-container {
overflow: hidden;
white-space: nowrap;
width: 100%;
background: #0F243F; /* Warna biru solid gelap */
color: #FFFFFF; /* Warna putih */
padding: 14px 0;
display: flex;
z-index: 20;
position: relative;
box-shadow: 0 10px 20px rgba(15, 36, 63, 0.2);
border-top: 3px solid #F57C00;
border-bottom: 3px solid #F57C00;
}
.marquee-content {
display: inline-flex;
align-items: center;
animation: marquee 35s linear infinite reverse; /* reverse: bergerak ke kanan */
}
.marquee-content span {
font-family: 'Fredoka', sans-serif;
font-size: 1.15rem;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.marquee-star {
color: #F57C00; /* Bintang warna oranye brand */
font-size: 0.9rem;
margin: 0 2rem;
}
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
/* Floating & Wiggle Animations */
.animate-float-slow { animation: float 6s ease-in-out infinite; }
.animate-float-fast { animation: float 4s ease-in-out infinite; }
.animate-wiggle { animation: wiggle 3s ease-in-out infinite; }
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-12px) rotate(2deg); }
}
@keyframes wiggle {
0%, 100% { transform: rotate(-3deg); }
50% { transform: rotate(3deg); }
}
/* SVG Background Patterns */
.bg-dots {
background-image: radial-gradient(#0F243F 2px, transparent 2px);
background-size: 32px 32px;
opacity: 0.03;
}
/* Hover Cards */
.card-hover { transition: all 0.3s ease; }
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.08); }
/* Hide Scrollbar for Slider */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
</style>
</head>
<body class="text-gray-800 antialiased font-sans flex flex-col min-h-screen">
<!-- Navigation -->
<nav class="fixed w-full z-50 bg-white/95 backdrop-blur-lg border-b border-gray-100 transition-all duration-300 py-2" id="navbar">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16 md:h-20 items-center">
<!-- Logo Brandbook (Hanya Gambar Sesuai Permintaan) -->
<div class="flex-shrink-0 flex items-center cursor-pointer group" onclick="window.scrollTo(0,0)">
<!-- Ganti src dengan link gambar logo panjang Anda. Fitur max-h dan max-w memastikan ukuran tidak akan pecah/kebesaran -->
<img src="https://ik.imagekit.io/bscjaya/Sekolah%20Semesta%20Kreatif%20Bangsa%20Banjarnegara/Logo%20Sekolah%20Semesta%20Kreatif%20Bangsa%20SSKB.png" alt="Logo Sekolah Semesta Kreatif Bangsa" class="h-auto max-h-10 md:max-h-14 w-auto max-w-[200px] md:max-w-[260px] object-contain transform group-hover:scale-105 transition-transform duration-300">
</div>
<!-- Desktop Menu -->
<div class="hidden lg:flex space-x-8 items-center bg-gray-50/80 px-8 py-2.5 rounded-full border border-gray-100/50 shadow-sm">
<a href="#solusi" class="text-gray-600 hover:text-brandNavy font-semibold text-sm transition-colors">Masalah & Solusi</a>
<a href="#keunggulan" class="text-gray-600 hover:text-brandOrange font-semibold text-sm transition-colors">Keunggulan</a>
<a href="#program" class="text-gray-600 hover:text-brandNavy font-semibold text-sm transition-colors">Program</a>
<a href="#lokasi" class="text-gray-600 hover:text-brandOrange font-semibold text-sm transition-colors">Lokasi</a>
</div>
<div class="hidden lg:flex">
<a href="https://wa.me/6285700119951" target="_blank" class="bg-brandOrange hover:bg-orange-600 text-white px-7 py-2.5 rounded-full font-bold shadow-solid-orange hover:translate-y-1 hover:shadow-none transition-all duration-200">
Daftar Sekarang
</a>
</div>
<!-- Mobile menu button -->
<div class="lg:hidden flex items-center">
<button id="mobile-menu-btn" class="text-brandNavy hover:text-brandOrange focus:outline-none p-2 bg-blue-50/50 rounded-xl transition-colors">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden lg:hidden bg-white border-t border-gray-100 absolute w-full shadow-2xl">
<div class="px-6 pt-4 pb-8 space-y-2">
<a href="#solusi" class="block py-3 text-lg font-heading font-bold text-gray-700 hover:text-brandNavy border-b border-gray-50">Solusi Kami</a>
<a href="#keunggulan" class="block py-3 text-lg font-heading font-bold text-gray-700 hover:text-brandOrange border-b border-gray-50">Keunggulan</a>
<a href="#program" class="block py-3 text-lg font-heading font-bold text-gray-700 hover:text-brandNavy border-b border-gray-50">Program Belajar</a>
<a href="#lokasi" class="block py-3 text-lg font-heading font-bold text-gray-700 hover:text-brandOrange border-b border-gray-50">Lokasi Hub</a>
<a href="https://wa.me/6285700119951" target="_blank" class="block px-4 py-4 mt-6 text-center text-lg font-bold bg-brandOrange text-white rounded-xl shadow-colored-orange">Hubungi Kami</a>
</div>
</div>
</nav>
<!-- Hero Section (Full-Width Image) -->
<section class="relative pt-32 pb-16 lg:pt-0 lg:pb-0 min-h-[650px] lg:min-h-[750px] flex items-center overflow-hidden bg-gray-100">
<!-- Background Image -->
<div class="absolute inset-0 z-0">
<!-- Gambar Suasana Belajar/Mentor & Murid -->
<img src="https://images.unsplash.com/photo-1577896851231-70ef18881754?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80" alt="Suasana Belajar SSKB" class="w-full h-full object-cover object-top">
<!-- Gradient Overlay for text readability -->
<div class="absolute inset-0 bg-gradient-to-b md:bg-gradient-to-r from-white/95 via-white/90 to-transparent"></div>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 w-full pt-12">
<div class="max-w-2xl" data-aos="fade-right" data-aos-duration="1000">
<!-- Tagline Kecil -->
<div class="inline-flex items-center gap-2 px-5 py-2 rounded-full bg-blue-50/90 text-brandNavy font-bold text-sm mb-6 border border-blue-100 shadow-sm">
<i class="fas fa-rocket text-brandOrange"></i> Alternative school for creative future
</div>
<!-- Headline -->
<h1 class="font-heading text-4xl md:text-5xl lg:text-[4rem] font-bold text-brandNavy leading-[1.15] mb-6 tracking-tight">
Lulus Bawa <span class="text-brandOrange">Ijazah Nasional</span>,<br>
Kerja Bawa <span class="text-brandNavy underline decoration-brandOrange decoration-4 underline-offset-8">Portofolio!</span>
</h1>
<!-- Subheadline -->
<p class="text-lg md:text-xl text-gray-700 mb-8 max-w-[90%] leading-relaxed font-sans font-medium">
Menjangkau lebih luas pendidikan berkualitas. <b class="text-brandNavy">SSKB</b> menawarkan solusi Hybrid-Creative, memadukan ijazah resmi negara dengan penguasaan <i>high-value skills</i> di bidang Desain & Bisnis Digital.
</p>
<!-- Buttons -->
<div class="flex flex-col sm:flex-row items-center gap-4">
<a href="https://wa.me/6285700119951" target="_blank" class="w-full sm:w-auto bg-brandOrange text-white px-10 py-4 rounded-full font-heading font-bold text-xl shadow-lg transition-all transform hover:-translate-y-1 hover:bg-orange-600 text-center">
Daftar Sekarang
</a>
<a href="#solusi" class="w-full sm:w-auto bg-white border-2 border-brandNavy text-brandNavy hover:bg-blue-50 px-10 py-4 rounded-full font-heading font-bold text-xl transition-all text-center shadow-sm">
Pelajari Solusinya
</a>
</div>
</div>
</div>
</section>
<!-- Marquee Banner (Visi Sekolah) - Flat & Elegant Version -->
<div class="marquee-container">
<div class="marquee-content flex items-center">
<!-- Set 1 -->
<span>KREATIF BERDAYA</span> <i class="fas fa-star marquee-star"></i>
<span>TUNTAS KARYA</span> <i class="fas fa-star marquee-star"></i>
<span>CERDAS MEDIA</span> <i class="fas fa-star marquee-star"></i>
<span>PENUH INTEGRITAS MULIA</span> <i class="fas fa-star marquee-star"></i>
<!-- Set 2 -->
<span>KREATIF BERDAYA</span> <i class="fas fa-star marquee-star"></i>
<span>TUNTAS KARYA</span> <i class="fas fa-star marquee-star"></i>
<span>CERDAS MEDIA</span> <i class="fas fa-star marquee-star"></i>
<span>PENUH INTEGRITAS MULIA</span> <i class="fas fa-star marquee-star"></i>
<!-- Set 3 -->
<span>KREATIF BERDAYA</span> <i class="fas fa-star marquee-star"></i>
<span>TUNTAS KARYA</span> <i class="fas fa-star marquee-star"></i>
<span>CERDAS MEDIA</span> <i class="fas fa-star marquee-star"></i>
<span>PENUH INTEGRITAS MULIA</span> <i class="fas fa-star marquee-star"></i>
</div>
</div>
<!-- Masalah & Solusi Section -->
<section id="solusi" class="py-24 lg:py-32 bg-[#FAFAFA] relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="text-center max-w-3xl mx-auto mb-16" data-aos="fade-up">
<div class="inline-block px-4 py-1.5 rounded-full bg-orange-100/80 text-brandOrange font-bold text-sm mb-4">
Mengapa Kami Hadir?
</div>
<h2 class="font-heading text-3xl md:text-4xl lg:text-[2.75rem] font-bold text-brandNavy mb-6 tracking-tight leading-tight">Menjawab Tantangan Pendidikan di Era Digital</h2>
<p class="text-gray-600 text-lg">Sistem sekolah formal tradisional seringkali kaku. SSKB merancang solusi khusus untuk memfasilitasi anak muda dengan profil berikut:</p>
</div>
<!-- Problem Cards -->
<div class="grid md:grid-cols-3 gap-8 mb-24 items-stretch">
<!-- Card 1 -->
<div class="bg-white p-8 rounded-[2rem] border border-blue-50 shadow-soft card-hover relative overflow-hidden flex flex-col h-full" data-aos="fade-up" data-aos-delay="100">
<div class="absolute -right-6 -top-6 w-24 h-24 bg-blue-50/50 rounded-full z-0"></div>
<div class="relative z-10 flex-grow">
<div class="w-14 h-14 bg-brandNavy text-white rounded-2xl flex items-center justify-center text-2xl mb-6 shadow-colored-navy transform -rotate-3">
<i class="fas fa-user-tie"></i>
</div>
<h3 class="font-heading font-bold text-2xl text-brandNavy mb-3">Gen Z & Milenial</h3>
<p class="text-gray-600 leading-relaxed">Bagi mereka yang ingin cepat bekerja, berbisnis, atau menjadi <i>freelancer</i> namun terkendala syarat kepemilikan ijazah sekolah formal.</p>
</div>
</div>
<!-- Card 2 -->
<div class="bg-white p-8 rounded-[2rem] border border-orange-50 shadow-soft card-hover relative overflow-hidden flex flex-col h-full" data-aos="fade-up" data-aos-delay="200">
<div class="absolute -right-6 -top-6 w-24 h-24 bg-orange-50/50 rounded-full z-0"></div>
<div class="relative z-10 flex-grow">
<div class="w-14 h-14 bg-brandOrange text-white rounded-2xl flex items-center justify-center text-2xl mb-6 shadow-colored-orange transform rotate-3">
<i class="fas fa-running"></i>
</div>
<h3 class="font-heading font-bold text-2xl text-brandNavy mb-3">Atlet, Artist, Tahfidz</h3>
<p class="text-gray-600 leading-relaxed">Anak-anak berbakat yang butuh waktu belajar super fleksibel agar tetap bisa fokus mengejar prestasi pada bakat dan minat khususnya.</p>
</div>
</div>
<!-- Card 3 -->
<div class="bg-white p-8 rounded-[2rem] border border-blue-50 shadow-soft card-hover relative overflow-hidden flex flex-col h-full" data-aos="fade-up" data-aos-delay="300">
<div class="absolute -right-6 -top-6 w-24 h-24 bg-blue-50/50 rounded-full z-0"></div>
<div class="relative z-10 flex-grow">
<div class="w-14 h-14 bg-brandNavy text-white rounded-2xl flex items-center justify-center text-2xl mb-6 shadow-soft transform -rotate-3">
<i class="fas fa-home"></i>
</div>
<h3 class="font-heading font-bold text-2xl text-brandNavy mb-3">Keluarga Homeschooling</h3>
<p class="text-gray-600 leading-relaxed">Kelas menengah yang mencari alternatif kurikulum yang lebih modern, tidak kaku, dan langsung berorientasi pada <i>skill</i> dunia nyata.</p>
</div>
</div>
</div>
<!-- Solution Banner -->
<div class="bg-brandNavy rounded-[2.5rem] md:rounded-[3rem] p-8 md:p-14 text-white shadow-colored-navy relative overflow-hidden" data-aos="zoom-in">
<!-- Abstract Waves in background -->
<svg class="absolute bottom-0 left-0 w-full h-auto opacity-10 pointer-events-none" viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" fill-opacity="1" d="M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,218.7C672,235,768,245,864,229.3C960,213,1056,171,1152,149.3C1248,128,1344,128,1392,128L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
<div class="relative z-10 flex flex-col md:flex-row items-center gap-10 lg:gap-14">
<div class="md:w-1/3 flex justify-center">
<div class="w-32 h-32 md:w-40 md:h-40 bg-white/10 rounded-full flex items-center justify-center backdrop-blur-sm border border-white/20">
<i class="fas fa-lightbulb text-6xl md:text-7xl text-brandOrange animate-wiggle"></i>
</div>
</div>
<div class="md:w-2/3 text-center md:text-left">
<h3 class="font-heading text-3xl md:text-4xl font-bold mb-4 tracking-tight">Solusi Kesenjangan Pendidikan</h3>
<p class="text-blue-50 text-lg leading-relaxed">
Kami menjawab keresahan orang tua dengan <b>ekosistem belajar fleksibel berbasis G-Suite</b>. Siswa tidak hanya mengejar nilai akademik, tetapi mentransformasi diri dari sekadar penghafal teori menjadi <b>kreator digital yang kompeten</b> melalui <i>Project-Based Learning</i>.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- 3 Keunggulan Utama (USPs) -->
<section id="keunggulan" class="py-24 lg:py-32 bg-white relative overflow-hidden border-t border-gray-100">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-24" data-aos="fade-up">
<span class="text-brandOrange font-bold tracking-widest uppercase text-xs mb-3 block">Mengapa Memilih SSKB?</span>
<h2 class="font-heading text-3xl md:text-[2.75rem] font-bold text-brandNavy mb-5 tracking-tight">3 Keunggulan Utama Kami</h2>
<div class="w-20 h-1.5 bg-brandOrange mx-auto rounded-full"></div>
</div>
<div class="space-y-24 lg:space-y-32">
<!-- USP 1 -->
<div class="flex flex-col md:flex-row items-center gap-12 lg:gap-20">
<div class="md:w-1/2 relative" data-aos="fade-right">
<div class="absolute inset-0 bg-brandOrange rounded-[2.5rem] transform rotate-2 scale-[0.98] translate-x-3 translate-y-3"></div>
<img src="https://ik.imagekit.io/bscjaya/Sekolah%20Semesta%20Kreatif%20Bangsa%20Banjarnegara/Sekolah%20Semesta%20Kreatif%20Bangsa.webp?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Ijazah dan Portofolio" class="relative z-10 w-full rounded-[2.5rem] shadow-lg aspect-square object-cover border-4 border-white">
<div class="absolute top-8 -left-4 z-20 bg-white w-16 h-16 rounded-full shadow-solid-orange flex items-center justify-center text-3xl font-heading font-bold text-brandOrange border-2 border-brandNavy">1</div>
</div>
<div class="md:w-1/2" data-aos="fade-left">
<h3 class="font-heading text-3xl md:text-4xl font-bold text-brandNavy mb-5 leading-tight tracking-tight">Dual-Path Success:<br><span class="text-brandOrange">Ijazah Negara + Portofolio Industri</span></h3>
<p class="text-gray-600 text-lg mb-8 leading-relaxed">
Bukan sekadar memberikan ijazah untuk syarat kelulusan formal. SSKB memastikan setiap siswa memiliki Portofolio Digital yang nyata dan berbobot.
</p>
<div class="bg-orange-50/80 p-6 rounded-2xl border-l-[3px] border-brandOrange">
<p class="text-gray-800 font-medium text-sm leading-relaxed">✨ <span class="font-bold text-brandOrange">Saat Lulus:</span> Siswa tidak hanya membawa lembar ijazah, tapi juga katalog karya desain visual dan rekam jejak pengelolaan toko di marketplace yang siap untuk bekerja, <i>freelancing</i>, atau lanjut kuliah!</p>
</div>
</div>
</div>
<!-- USP 2 -->
<div class="flex flex-col md:flex-row-reverse items-center gap-12 lg:gap-20">
<div class="md:w-1/2 relative" data-aos="fade-left">
<div class="absolute inset-0 bg-brandNavy rounded-[2.5rem] transform -rotate-2 scale-[0.98] -translate-x-3 translate-y-3"></div>
<img src="https://images.unsplash.com/photo-1501504905252-473c47e087f8?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Belajar Digital Google Suite" class="relative z-10 w-full rounded-[2.5rem] shadow-lg aspect-square object-cover border-4 border-white">
<div class="absolute top-8 -right-4 z-20 bg-white w-16 h-16 rounded-full shadow-solid-navy flex items-center justify-center text-3xl font-heading font-bold text-brandNavy border-2 border-brandNavy">2</div>
</div>
<div class="md:w-1/2" data-aos="fade-right">
<h3 class="font-heading text-3xl md:text-4xl font-bold text-brandNavy mb-5 leading-tight tracking-tight">Digital-First Learning<br>dengan <span class="text-brandOrange">G-Suite Excellence</span></h3>
<p class="text-gray-600 text-lg mb-8 leading-relaxed">
Kami membawa standar manajemen kelas Nasional ke wilayah Anda melalui ekosistem Google Workspace for Education yang rapi dan terpusat.
</p>
<div class="bg-blue-50/80 p-6 rounded-2xl border-l-[3px] border-brandNavy">
<p class="text-gray-800 font-medium text-sm leading-relaxed">🔍 <span class="font-bold text-brandNavy">Transparan & Profesional:</span> Orang tua bisa memantau tugas di Google Classroom secara real-time. Siswa dibiasakan menggunakan <i>tools</i> dunia kerja global (Docs, Slides, Sheets, Drive).</p>
</div>
</div>
</div>
<!-- USP 3 -->
<div class="flex flex-col md:flex-row items-center gap-12 lg:gap-20">
<div class="md:w-1/2 relative" data-aos="fade-right">
<div class="absolute inset-0 bg-brandOrange rounded-[2.5rem] transform rotate-2 scale-[0.98] translate-x-3 translate-y-3"></div>
<img src="https://ik.imagekit.io/bscjaya/Sekolah%20Semesta%20Kreatif%20Bangsa%20Banjarnegara/Kurikulum%20Adaptif%20Berbasis%20Industri%20Kreatif.webp?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Kurikulum Kreatif" class="relative z-10 w-full rounded-[2.5rem] shadow-lg aspect-square object-cover border-4 border-white">
<div class="absolute top-8 -left-4 z-20 bg-white w-16 h-16 rounded-full shadow-solid-orange flex items-center justify-center text-3xl font-heading font-bold text-brandOrange border-2 border-brandNavy">3</div>
</div>
<div class="md:w-1/2" data-aos="fade-left">
<h3 class="font-heading text-3xl md:text-4xl font-bold text-brandNavy mb-5 leading-tight tracking-tight">Kurikulum Adaptif<br>Berbasis <span class="text-brandOrange">Industri Kreatif</span></h3>
<p class="text-gray-600 text-lg mb-8 leading-relaxed">
Memangkas teori usang yang tidak relevan dan menggantinya dengan keterampilan paling dicari saat ini: Desain Visual dan E-commerce Management.
</p>
<div class="bg-orange-50/80 p-6 rounded-2xl border-l-[3px] border-brandOrange">
<p class="text-gray-800 font-medium text-sm leading-relaxed">🚀 <span class="font-bold text-brandOrange">Kemandirian Finansial:</span> Kurikulum ini membangun <i>entrepreneurial mindset</i> sejak usia sekolah, menghasilkan produk kreatif bernilai jual tanpa terbebani jadwal kaku.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Program Section -->
<section id="program" class="py-24 lg:py-32 bg-brandNavy relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-full bg-dots opacity-[0.15]"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="text-center mb-16" data-aos="fade-up">
<span class="inline-block px-4 py-1.5 rounded-full bg-white/10 text-brandOrange font-bold text-sm mb-5 backdrop-blur-sm border border-white/20 uppercase tracking-wider">Informasi Program</span>
<h2 class="font-heading text-3xl md:text-[2.75rem] font-bold text-white mb-5 tracking-tight">Sistem Belajar Komprehensif</h2>
<p class="text-blue-100 text-lg max-w-2xl mx-auto leading-relaxed">Kami memadukan kemudahan <i>Online</i> untuk teori & <i>hard skills</i>, dengan intensitas <i>Offline</i> untuk praktik & kolaborasi nyata.</p>
</div>
<div class="grid lg:grid-cols-2 gap-8 lg:gap-12 items-stretch">
<!-- Program Daring -->
<div class="bg-white rounded-[2.5rem] p-8 md:p-12 shadow-xl border-4 border-transparent hover:border-blue-200 transition-colors group flex flex-col h-full" data-aos="fade-right">
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-5 mb-8 pb-8 border-b border-gray-100">
<div class="w-16 h-16 bg-blue-50/80 rounded-2xl flex items-center justify-center text-3xl text-brandNavy transform group-hover:scale-110 transition-transform duration-300"><i class="fas fa-laptop-house"></i></div>
<div>
<h3 class="font-heading text-2xl md:text-3xl font-bold text-brandNavy">Program Daring (Online)</h3>
<p class="text-xs text-gray-500 font-bold tracking-widest uppercase mt-2">The "Hard Skills" & Productivity</p>
</div>
</div>
<ul class="space-y-6 flex-grow">
<li class="flex items-start gap-4">
<i class="fas fa-check-circle text-brandOrange mt-1 text-lg"></i>
<div>
<h4 class="font-bold text-gray-800 text-[15px]">Creative Tools Mastery</h4>
<p class="text-sm text-gray-600 mt-1.5 leading-relaxed">Desain Visual via Canva Pro & Adobe. Video Editing konten pendek (Reels/TikTok) untuk media promosi.</p>
</div>
</li>
<li class="flex items-start gap-4">
<i class="fas fa-check-circle text-brandOrange mt-1 text-lg"></i>
<div>
<h4 class="font-bold text-gray-800 text-[15px]">Digital Business & Marketplace</h4>
<p class="text-sm text-gray-600 mt-1.5 leading-relaxed">E-commerce Management: Riset produk, Upload SEO-friendly, dan teknik Copywriting yang menjual.</p>
</div>
</li>
<li class="flex items-start gap-4">
<i class="fas fa-check-circle text-brandOrange mt-1 text-lg"></i>
<div>
<h4 class="font-bold text-gray-800 text-[15px]">Akademik Nasional</h4>
<p class="text-sm text-gray-600 mt-1.5 leading-relaxed">Materi wajib dirangkum secara interaktif di Google Classroom + evaluasi Kuis Google Forms otomatis.</p>
</div>
</li>
<li class="flex items-start gap-4">
<i class="fas fa-check-circle text-brandOrange mt-1 text-lg"></i>
<div>
<h4 class="font-bold text-gray-800 text-[15px]">Self-Management</h4>
<p class="text-sm text-gray-600 mt-1.5 leading-relaxed">Belajar mengelola Google Calendar secara mandiri & sistem pengarsipan karya terstruktur di Google Drive.</p>
</div>
</li>
</ul>
</div>
<!-- Program Luring -->
<div class="bg-brandOrange rounded-[2.5rem] p-8 md:p-12 shadow-xl border-4 border-transparent hover:border-white/50 transition-colors group flex flex-col h-full mt-8 lg:mt-0" data-aos="fade-left">
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-5 mb-8 pb-8 border-b border-white/20">
<div class="w-16 h-16 bg-white/20 backdrop-blur rounded-2xl flex items-center justify-center text-3xl text-white transform group-hover:scale-110 transition-transform duration-300"><i class="fas fa-users"></i></div>
<div>
<h3 class="font-heading text-2xl md:text-3xl font-bold text-white">Program Luring (Offline)</h3>
<p class="text-xs text-orange-100 font-bold tracking-widest uppercase mt-2">Praktik, Evaluasi & Relasi</p>
</div>
</div>
<ul class="space-y-6 flex-grow text-white">
<li class="flex items-start gap-4">
<i class="fas fa-star text-white mt-1 text-lg"></i>
<div>
<h4 class="font-bold text-white text-[15px]">Creative Studio Session</h4>
<p class="text-sm text-orange-50 mt-1.5 leading-relaxed">Praktik bimbingan tutor (misal: fotografi produk di studio mini) & sesi kritik bedah karya secara tatap muka.</p>
</div>
</li>
<li class="flex items-start gap-4">
<i class="fas fa-star text-white mt-1 text-lg"></i>
<div>
<h4 class="font-bold text-white text-[15px]">Entrepreneurship Talk</h4>
<p class="text-sm text-orange-50 mt-1.5 leading-relaxed">Sesi inspirasi langsung dengan mengundang praktisi marketplace, pakar SEO, atau desainer sukses.</p>
</div>
</li>
<li class="flex items-start gap-4">
<i class="fas fa-star text-white mt-1 text-lg"></i>
<div>
<h4 class="font-bold text-white text-[15px]">Project Pitching</h4>
<p class="text-sm text-orange-50 mt-1.5 leading-relaxed">Siswa mempresentasikan rencana toko online di depan tutor/teman untuk melatih keberanian Public Speaking.</p>
</div>
</li>
<li class="flex items-start gap-4">
<i class="fas fa-star text-white mt-1 text-lg"></i>
<div>
<h4 class="font-bold text-white text-[15px]">Community Building</h4>
<p class="text-sm text-orange-50 mt-1.5 leading-relaxed">Kegiatan sosial/networking luring agar siswa merasa memiliki komunitas dan pertemanan sekolah yang nyata.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Lokasi Hub Section (Style Ticket/Map) -->
<section id="lokasi" class="py-24 lg:py-32 bg-[#FAFAFA] relative border-b border-gray-100">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16" data-aos="fade-up">
<span class="text-brandOrange font-bold tracking-widest uppercase text-xs mb-3 block">Fasilitas Offline</span>
<h2 class="font-heading text-3xl md:text-[2.75rem] font-bold text-brandNavy mb-5 tracking-tight">Kunjungi Creative Hub Kami</h2>
<p class="text-gray-600 text-lg">Sentra kolaborasi dan praktik pendukung untuk siswa wilayah Jawa Tengah.</p>
</div>
<!-- Ticket Style Card -->
<div class="bg-white rounded-[2rem] shadow-soft flex flex-col md:flex-row overflow-hidden border border-gray-100" data-aos="zoom-in">
<!-- Image Side -->
<div class="md:w-5/12 relative">
<img src="https://ik.imagekit.io/bscjaya/Sekolah%20Semesta%20Kreatif%20Bangsa%20Banjarnegara/Sekolah%20Semesta%20Kreatif%20Bangsa%20Banjarnegara.webp?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Gedung SSKB Banjarnegara" class="w-full h-full object-cover min-h-[250px] md:min-h-full">
<div class="absolute inset-0 bg-gradient-to-t from-brandNavy/90 via-brandNavy/30 to-transparent flex items-end p-8">
<div class="text-white">
<span class="bg-brandOrange px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider mb-3 inline-block">Jawa Tengah</span>
<h3 class="font-heading text-3xl font-bold tracking-tight">Hub Banjarnegara</h3>
</div>
</div>
</div>
<!-- Info Side -->
<div class="md:w-7/12 p-8 md:p-12 relative flex flex-col justify-center">
<!-- Dashed line separator for desktop -->
<div class="hidden md:block absolute top-0 left-0 w-px h-full border-l-2 border-dashed border-gray-200"></div>
<!-- Semicircle cutouts for ticket effect -->
<div class="hidden md:block absolute -top-4 -left-4 w-8 h-8 bg-[#FAFAFA] rounded-full border-b-2 border-r-2 border-dashed border-gray-200 transform rotate-45"></div>
<div class="hidden md:block absolute -bottom-4 -left-4 w-8 h-8 bg-[#FAFAFA] rounded-full border-t-2 border-r-2 border-dashed border-gray-200 transform -rotate-45"></div>
<div class="flex items-start gap-5 mb-10">
<div class="w-12 h-12 bg-blue-50 text-brandNavy rounded-full flex items-center justify-center text-xl flex-shrink-0">
<i class="fas fa-map-marker-alt"></i>
</div>
<div>
<h4 class="font-bold text-gray-800 text-lg mb-2">Alamat Lengkap</h4>
<p class="text-gray-600 leading-relaxed text-sm">
Jl. Garuda No. 10, RT 02 / RW 05<br>
Kelurahan Parakancanggah,<br>
Kab. Banjarnegara, Jawa Tengah
</p>
</div>
</div>
<div class="grid grid-cols-2 gap-y-5 gap-x-4 mb-10">
<div class="flex items-center gap-3 text-gray-700 font-medium text-sm">
<div class="w-8 h-8 rounded-lg bg-orange-50 flex items-center justify-center text-brandOrange"><i class="fas fa-camera"></i></div> Studio Mini
</div>
<div class="flex items-center gap-3 text-gray-700 font-medium text-sm">
<div class="w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center text-brandNavy"><i class="fas fa-wifi"></i></div> Free Wi-Fi
</div>
<div class="flex items-center gap-3 text-gray-700 font-medium text-sm">
<div class="w-8 h-8 rounded-lg bg-orange-50 flex items-center justify-center text-brandOrange"><i class="fas fa-chalkboard"></i></div> Ruang Kolaborasi
</div>
<div class="flex items-center gap-3 text-gray-700 font-medium text-sm">
<div class="w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center text-brandNavy"><i class="fas fa-users"></i></div> Area Diskusi
</div>
</div>
<a href="https://maps.google.com/?q=-7.400497,109.717249" target="_blank" class="inline-flex items-center justify-center bg-white border-2 border-gray-200 text-brandNavy hover:border-brandNavy hover:bg-brandNavy hover:text-white font-bold px-8 py-3.5 rounded-full transition-all duration-300 gap-2 w-full sm:w-auto self-start">
<i class="fas fa-location-arrow"></i> Buka di Google Maps
</a>
</div>
</div>
</div>
</section>
<!-- Testimoni / Kata Mereka Section (SMM Style Slider) -->
<section id="testimoni" class="py-24 bg-white relative overflow-hidden">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="text-center mb-16" data-aos="fade-up">
<h2 class="font-cursive text-4xl md:text-[2.75rem] text-brandOrange mb-2 tracking-wide">Kata Orang Tua dan Kawan Murid</h2>
<h3 class="font-heading text-2xl md:text-3xl lg:text-4xl font-bold text-brandNavy">Tentang Sekolah Semesta Kreatif Bangsa</h3>
</div>
<!-- Slider Container -->
<div class="relative max-w-6xl mx-auto group">
<!-- Navigation Buttons (Hidden on mobile, visible on desktop hover) -->
<button id="prevBtn" class="hidden md:flex absolute -left-6 top-1/2 transform -translate-y-1/2 z-20 w-12 h-12 bg-brandOrange text-white rounded-full items-center justify-center shadow-lg hover:bg-orange-600 transition-all focus:outline-none opacity-0 group-hover:opacity-100 hover:scale-110">
<i class="fas fa-chevron-left text-lg"></i>
</button>
<button id="nextBtn" class="hidden md:flex absolute -right-6 top-1/2 transform -translate-y-1/2 z-20 w-12 h-12 bg-brandOrange text-white rounded-full items-center justify-center shadow-lg hover:bg-orange-600 transition-all focus:outline-none opacity-0 group-hover:opacity-100 hover:scale-110">
<i class="fas fa-chevron-right text-lg"></i>
</button>
<!-- Cards Wrapper -->
<div id="testimonialSlider" class="flex gap-6 overflow-x-auto snap-x snap-mandatory scrollbar-hide pt-16 pb-12 px-4 md:px-6">
<!-- Card 1 -->
<div class="testi-card flex-none w-[300px] md:w-[340px] snap-center relative pt-12">
<div class="bg-white rounded-[2rem] border-2 border-brandNavy p-8 pt-16 h-full shadow-soft flex flex-col hover:-translate-y-1 transition-transform duration-300 relative">
<!-- Avatar (Clean, Circular, Perfectly Aligned) -->
<div class="absolute -top-12 left-1/2 transform -translate-x-1/2">
<div class="w-24 h-24 rounded-full border-[6px] border-white shadow-lg bg-white overflow-hidden">
<img src="https://ik.imagekit.io/bscjaya/Sekolah%20Semesta%20Kreatif%20Bangsa%20Banjarnegara/Ibu%20Anisa%20SSKB.jpg?auto=format&fit=crop&w=200&q=80" alt="Ibu Anisa" class="w-full h-full object-cover">
</div>
</div>
<!-- Content -->
<h4 class="font-heading font-bold text-2xl text-center text-brandNavy mb-1">Ibu Anisa</h4>
<p class="text-center text-brandOrange font-medium text-sm mb-6">Orang Tua Murid (Homeschooling)</p>
<div class="flex-grow flex gap-3 items-start">
<i class="fas fa-quote-left text-brandNavy text-xl mt-1"></i>
<p class="text-gray-600 text-[15px] leading-relaxed font-medium">"Saya mencari sekolah yang tidak hanya mengejar nilai ulangan. Di SSKB, anak saya belajar mendesain dan malah sudah bisa buka jasa <i>design</i> kecil-kecilan. Modul <i>online</i>-nya juga sangat mudah dipantau."</p>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="testi-card flex-none w-[300px] md:w-[340px] snap-center relative pt-12">
<div class="bg-white rounded-[2rem] border-2 border-brandNavy p-8 pt-16 h-full shadow-soft flex flex-col hover:-translate-y-1 transition-transform duration-300 relative">
<!-- Avatar -->
<div class="absolute -top-12 left-1/2 transform -translate-x-1/2">
<div class="w-24 h-24 rounded-full border-[6px] border-white shadow-lg bg-white overflow-hidden">
<img src="https://ik.imagekit.io/bscjaya/Sekolah%20Semesta%20Kreatif%20Bangsa%20Banjarnegara/Bima%20Setiawan%20SSKB.jpg?auto=format&fit=crop&w=200&q=80" alt="Bima Setiawan" class="w-full h-full object-cover">
</div>
</div>
<h4 class="font-heading font-bold text-2xl text-center text-brandNavy mb-1">Bima Setiawan</h4>
<p class="text-center text-brandOrange font-medium text-sm mb-6">Murid SSKB (Atlet Futsal)</p>
<div class="flex-grow flex gap-3 items-start">
<i class="fas fa-quote-left text-brandNavy text-xl mt-1"></i>
<p class="text-gray-600 text-[15px] leading-relaxed font-medium">"Dulu saya sering bolos karena jadwal latihan tabrakan sama jam sekolah. Sejak pindah ke sini, saya bisa ngerjain tugas malem hari. Tetap bisa kejar prestasi tanpa ngorbanin ijazah."</p>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="testi-card flex-none w-[300px] md:w-[340px] snap-center relative pt-12">
<div class="bg-white rounded-[2rem] border-2 border-brandNavy p-8 pt-16 h-full shadow-soft flex flex-col hover:-translate-y-1 transition-transform duration-300 relative">
<!-- Avatar -->
<div class="absolute -top-12 left-1/2 transform -translate-x-1/2">
<div class="w-24 h-24 rounded-full border-[6px] border-white shadow-lg bg-white overflow-hidden">
<img src="https://ik.imagekit.io/bscjaya/Sekolah%20Semesta%20Kreatif%20Bangsa%20Banjarnegara/Rara%20Kirana%20SSKB.png?auto=format&fit=crop&w=200&q=80" alt="Rara Kirana" class="w-full h-full object-cover">
</div>
</div>
<h4 class="font-heading font-bold text-2xl text-center text-brandNavy mb-1">Rara Kirana</h4>
<p class="text-center text-brandOrange font-medium text-sm mb-6">Murid SSKB (Kreator Digital)</p>
<div class="flex-grow flex gap-3 items-start">
<i class="fas fa-quote-left text-brandNavy text-xl mt-1"></i>
<p class="text-gray-600 text-[15px] leading-relaxed font-medium">"Sesi Luring di Studio Banjarnegara seru banget! Mentornya asik, ngajarin <i>product shoot</i> langsung praktek. Portofolio tugas saya sekarang udah saya masukin ke profil kerja <i>freelancer</i>."</p>
</div>
</div>
</div>
<!-- Card 4 -->
<div class="testi-card flex-none w-[300px] md:w-[340px] snap-center relative pt-12">
<div class="bg-white rounded-[2rem] border-2 border-brandNavy p-8 pt-16 h-full shadow-soft flex flex-col hover:-translate-y-1 transition-transform duration-300 relative">
<!-- Avatar -->
<div class="absolute -top-12 left-1/2 transform -translate-x-1/2">
<div class="w-24 h-24 rounded-full border-[6px] border-white shadow-lg bg-white overflow-hidden">
<img src="https://ik.imagekit.io/bscjaya/Sekolah%20Semesta%20Kreatif%20Bangsa%20Banjarnegara/Danish%20Fikri%20Alumni%20SSKB.png?auto=format&fit=crop&w=200&q=80" alt="Danish Fikri" class="w-full h-full object-cover">
</div>
</div>
<h4 class="font-heading font-bold text-2xl text-center text-brandNavy mb-1">Danish Fikri</h4>
<p class="text-center text-brandOrange font-medium text-sm mb-6">Alumni SSKB - Bisnis Digital</p>
<div class="flex-grow flex gap-3 items-start">
<i class="fas fa-quote-left text-brandNavy text-xl mt-1"></i>
<p class="text-gray-600 text-[15px] leading-relaxed font-medium">"SSKB punya sistem belajar yang sangat efektif dan fleksibel. Proyek dari guru jadi lebih mudah dikerjakan, dan jam belajarnya memberi saya cukup waktu untuk fokus merintis toko online saya."</p>
</div>
</div>
</div>
<!-- Card 5 -->
<div class="testi-card flex-none w-[300px] md:w-[340px] snap-center relative pt-12">
<div class="bg-white rounded-[2rem] border-2 border-brandNavy p-8 pt-16 h-full shadow-soft flex flex-col hover:-translate-y-1 transition-transform duration-300 relative">
<!-- Avatar -->
<div class="absolute -top-12 left-1/2 transform -translate-x-1/2">
<div class="w-24 h-24 rounded-full border-[6px] border-white shadow-lg bg-white overflow-hidden">
<img src="https://ik.imagekit.io/bscjaya/Sekolah%20Semesta%20Kreatif%20Bangsa%20Banjarnegara/Kurikulum%20Adaptif%20Berbasis%20Industri%20Kreatif.jpeg?auto=format&fit=crop&w=200&q=80" alt="Naura Alzahrifa" class="w-full h-full object-cover">
</div>
</div>
<h4 class="font-heading font-bold text-2xl text-center text-brandNavy mb-1">Naura Alzahrifa</h4>
<p class="text-center text-brandOrange font-medium text-sm mb-6">Alumni SSKB - DKV IKJ</p>
<div class="flex-grow flex gap-3 items-start">
<i class="fas fa-quote-left text-brandNavy text-xl mt-1"></i>
<p class="text-gray-600 text-[15px] leading-relaxed font-medium">"Menjadi pilihan dan keputusan terbaik bisa belajar di SSKB. Fleksibilitas kelas online memberikan kesempatan untuk saya bisa terus mengasah kemampuan dan keterampilan desain."</p>
</div>
</div>
</div>
<!-- Card 6 -->
<div class="testi-card flex-none w-[300px] md:w-[340px] snap-center relative pt-12">
<div class="bg-white rounded-[2rem] border-2 border-brandNavy p-8 pt-16 h-full shadow-soft flex flex-col hover:-translate-y-1 transition-transform duration-300 relative">
<!-- Avatar -->
<div class="absolute -top-12 left-1/2 transform -translate-x-1/2">
<div class="w-24 h-24 rounded-full border-[6px] border-white shadow-lg bg-white overflow-hidden">
<img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=200&q=80" alt="Jesslyn Graciella" class="w-full h-full object-cover">
</div>
</div>
<h4 class="font-heading font-bold text-2xl text-center text-brandNavy mb-1">Jesslyn Graciella</h4>
<p class="text-center text-brandOrange font-medium text-sm mb-6">Murid SSKB</p>
<div class="flex-grow flex gap-3 items-start">
<i class="fas fa-quote-left text-brandNavy text-xl mt-1"></i>
<p class="text-gray-600 text-[15px] leading-relaxed font-medium">"SSKB memberi ruang bagi murid untuk berkembang mandiri dengan kebebasan terarah. Pendekatan fleksibelnya memastikan kenyamanan belajar tanpa mengurangi kualitas."</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Call to Action Banner -->
<section class="py-20 lg:py-28 bg-white relative">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="bg-gradient-to-r from-brandOrange to-orange-400 rounded-[3rem] p-12 md:p-16 text-center text-white shadow-colored-orange relative overflow-hidden" data-aos="zoom-in">
<!-- BG Patterns -->
<div class="absolute inset-0 bg-dots opacity-20 mix-blend-overlay"></div>
<div class="absolute -top-20 -right-20 w-80 h-80 bg-white/20 rounded-full mix-blend-overlay blur-3xl"></div>
<h2 class="relative z-10 font-heading text-3xl md:text-[2.75rem] font-bold mb-6 tracking-tight leading-tight">Siap Menjadi Kreator Masa Depan?</h2>
<p class="relative z-10 text-lg mb-10 max-w-2xl mx-auto font-medium text-orange-50 leading-relaxed">Pendaftaran siswa baru telah dibuka. Hubungi tim admin kami untuk berkonsultasi mengenai program dan jadwal yang tepat untuk anak Anda.</p>
<a href="https://wa.me/6285700119951" target="_blank" class="relative z-10 inline-flex items-center justify-center bg-white text-brandOrange font-bold text-lg px-10 py-5 rounded-full shadow-lg hover:shadow-2xl transform hover:-translate-y-1.5 transition-all duration-300">
<i class="fab fa-whatsapp mr-3 text-3xl text-green-500"></i> Konsultasi via WhatsApp
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer id="kontak" class="bg-brandNavy text-white pt-20 pb-8 border-t-[8px] border-brandOrange relative overflow-hidden mt-auto">
<!-- Floating abstract shapes in footer -->
<div class="absolute top-10 right-10 w-40 h-40 bg-white/5 rounded-full pointer-events-none"></div>
<div class="absolute bottom-0 left-0 w-96 h-96 bg-brandOrange/10 rounded-tr-full filter blur-3xl pointer-events-none"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-12 mb-16">
<!-- Brand Info (Col span 5) -->
<div class="lg:col-span-5 space-y-6">
<div class="mb-4 bg-white p-3 md:p-4 rounded-2xl inline-flex border border-gray-100 shadow-sm">
<!-- Ganti src dengan link gambar logo Anda. Tetap serasi untuk ukuran file besar -->
<img src="https://ik.imagekit.io/bscjaya/Sekolah%20Semesta%20Kreatif%20Bangsa%20Banjarnegara/Logo%20Sekolah%20Semesta%20Kreatif%20Bangsa%20SSKB.png" alt="Logo Sekolah Semesta Kreatif Bangsa" class="h-auto max-h-12 md:max-h-16 w-auto max-w-[220px] md:max-w-[280px] object-contain">
</div>
<p class="text-blue-100 text-base leading-relaxed font-semibold italic">
"Kreatif Berdaya, Tuntas Karya, Cerdas Media, Penuh Integritas Mulia."
</p>
<p class="text-blue-200/80 text-sm leading-relaxed max-w-sm">
Lembaga pendidikan formal tersertifikasi penyedia ijazah nasional yang berfokus menjembatani kesenjangan antara pendidikan dan dunia kerja nyata melalui industri digital kreatif.
</p>
</div>
<!-- Location (Col span 4) -->
<div class="lg:col-span-4">
<h4 class="font-heading font-bold text-xl mb-6 flex items-center gap-2 text-white tracking-wide">
<i class="fas fa-map-marker-alt text-brandOrange"></i> Lokasi Hub
</h4>
<p class="text-blue-100/90 text-sm leading-relaxed mb-5">
Jl. Garuda No. 10, RT 02 / RW 05<br>
Kelurahan Parakancanggah,<br>
Kab. Banjarnegara, Jawa Tengah
</p>
<a href="https://maps.google.com/?q=-7.400497,109.717249" target="_blank" class="text-xs bg-white/10 hover:bg-brandOrange text-white px-5 py-2.5 rounded-full font-semibold transition-colors inline-flex items-center gap-2 border border-white/20 tracking-wide uppercase">
Buka Google Maps <i class="fas fa-external-link-alt"></i>
</a>
</div>
<!-- Contact & Social (Col span 3) -->
<div class="lg:col-span-3">
<h4 class="font-heading font-bold text-xl mb-6 flex items-center gap-2 text-white tracking-wide">
<i class="fas fa-envelope text-brandOrange"></i> Kontak Resmi
</h4>
<a href="mailto:pkbmsemestakreatif1@gmail.com" class="text-blue-100/90 hover:text-white transition-colors flex items-center gap-2 mb-8 text-sm break-all font-medium">
pkbmsemestakreatif1@gmail.com
</a>
<h4 class="font-heading font-bold text-xs text-blue-300 uppercase tracking-widest mb-4">Sosial Media</h4>
<div class="flex space-x-3">
<a href="https://www.instagram.com/sekolahsemestakreatifbangsa" target="_blank" class="w-11 h-11 rounded-full bg-white/10 flex items-center justify-center hover:bg-brandOrange text-white transition-all transform hover:-translate-y-1 border border-white/20">
<i class="fab fa-instagram text-lg"></i>
</a>
<!-- Active Facebook Link -->
<a href="https://facebook.com" target="_blank" class="w-11 h-11 rounded-full bg-white/10 flex items-center justify-center hover:bg-brandOrange text-white transition-all transform hover:-translate-y-1 border border-white/20">
<i class="fab fa-facebook-f text-lg"></i>
</a>
<!-- Active TikTok Link -->
<a href="https://tiktok.com" target="_blank" class="w-11 h-11 rounded-full bg-white/10 flex items-center justify-center hover:bg-brandOrange text-white transition-all transform hover:-translate-y-1 border border-white/20">
<i class="fab fa-tiktok text-lg"></i>
</a>
</div>
</div>
</div>
<div class="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-blue-300 text-sm">
<p>© 2024 Sekolah Semesta Kreatif Bangsa (SSKB). All rights reserved.</p>
<div class="flex gap-4">
<span class="text-blue-400 font-medium">Pendidikan Berbasis Portofolio Pertama di Banjarnegara</span>
</div>
</div>
</div>
</footer>
<!-- Floating WhatsApp Button -->
<a href="https://wa.me/6285700119951" target="_blank" class="fixed bottom-6 right-6 bg-[#25D366] text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg hover:-translate-y-1 hover:shadow-xl transition-all duration-300 z-50 group border border-green-400">
<i class="fab fa-whatsapp text-3xl group-hover:scale-110 transition-transform"></i>
</a>
<!-- Scripts -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
// Initialize AOS animations
AOS.init({
once: true,
offset: 60,
duration: 800,
easing: 'ease-out-cubic',
});
// Sticky Navbar effect
window.addEventListener('scroll', () => {
const navbar = document.getElementById('navbar');
if (window.scrollY > 10) {
navbar.classList.add('shadow-sm');
navbar.classList.replace('bg-white/95', 'bg-white/95');
navbar.classList.replace('py-2', 'py-1');
} else {
navbar.classList.remove('shadow-sm');
navbar.classList.replace('bg-white/95', 'bg-white/95');
navbar.classList.replace('py-1', 'py-2');
}
});
// Mobile menu toggle
const btn = document.getElementById('mobile-menu-btn');
const menu = document.getElementById('mobile-menu');
btn.addEventListener('click', () => {
menu.classList.toggle('hidden');
});
// Close mobile menu on link click
document.querySelectorAll('#mobile-menu a').forEach(link => {
link.addEventListener('click', () => {
menu.classList.add('hidden');
});
});
// Testimonial Slider / Carousel Functionality
const slider = document.getElementById('testimonialSlider');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
if (slider && prevBtn && nextBtn) {
prevBtn.addEventListener('click', () => {
const cardWidth = slider.querySelector('.testi-card').offsetWidth + 24; // Width + gap
slider.scrollBy({ left: -cardWidth, behavior: 'smooth' });
});
nextBtn.addEventListener('click', () => {
const cardWidth = slider.querySelector('.testi-card').offsetWidth + 24;
slider.scrollBy({ left: cardWidth, behavior: 'smooth' });
});
}
</script>
</body>
</html>