<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sistem Buku Induk Sekolah</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        :root {
            --primary-color: #3b5998;
            --secondary-color: #8b9dc3;
            --accent-color: #dfe3ee;
            --dark-color: #343a40;
            --light-color: #f8f9fa;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #333;
        }
        
        .navbar {
            background-color: var(--primary-color);
        }
        
        .hero-section {
            background: linear-gradient(rgba(59, 89, 152, 0.8), rgba(59, 89, 152, 0.9)), url('https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80');
            background-size: cover;
            background-position: center;
            color: white;
            padding: 100px 0;
        }
        
        .feature-card {
            transition: transform 0.3s;
            border: none;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            height: 100%;
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
        }
        
        .feature-icon {
            font-size: 3rem;
            color: var(--primary-color);
            margin-bottom: 20px;
        }
        
        .stats-section {
            background-color: var(--accent-color);
            padding: 60px 0;
        }
        
        .stat-number {
            font-size: 2.5rem;
            font-weight: bold;
            color: var(--primary-color);
        }
        
        footer {
            background-color: var(--dark-color);
            color: white;
            padding: 40px 0 20px;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .btn-primary:hover {
            background-color: #2d4373;
            border-color: #2d4373;
        }
        
        .btn-outline-light:hover {
            color: var(--primary-color);
        }
    </style>
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="bi bi-journal-bookmark-fill me-2"></i>
                BUKU INDUK SEKOLAH
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Beranda</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#fitur">Fitur</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#tentang">Tentang</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="login.php" class="btn btn-outline-light ms-2">Login</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero-section text-center">
        <div class="container">
            <h1 class="display-4 fw-bold mb-4">Sistem Buku Induk Sekolah Digital</h1>
            <p class="lead mb-5">Kelola data siswa, guru, dan administrasi sekolah dengan mudah dan efisien</p>
            <a href="login.php" class="btn btn-light btn-lg me-2">Login Sekarang</a>
            <a href="#fitur" class="btn btn-outline-light btn-lg">Pelajari Lebih Lanjut</a>
        </div>
    </section>

    <!-- Features Section -->
    <section id="fitur" class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold">Fitur Utama Sistem</h2>
                <p class="lead text-muted">Berbagai modul yang membantu administrasi sekolah</p>
            </div>
            
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="feature-card card p-4 text-center">
                        <div class="feature-icon">
                            <i class="bi bi-people-fill"></i>
                        </div>
                        <h3>Manajemen Siswa</h3>
                        <p>Kelola data siswa secara lengkap mulai dari data pribadi, akademik, hingga perkembangan</p>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="feature-card card p-4 text-center">
                        <div class="feature-icon">
                            <i class="bi bi-person-badge-fill"></i>
                        </div>
                        <h3>Data GTK</h3>
                        <p>Kelola data Guru dan Tenaga Kependidikan dengan informasi lengkap dan terupdate</p>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="feature-card card p-4 text-center">
                        <div class="feature-icon">
                            <i class="bi bi-calendar-event-fill"></i>
                        </div>
                        <h3>Tahun Ajaran</h3>
                        <p>Atur tahun akademik dan kelola data berdasarkan periode pendidikan</p>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="feature-card card p-4 text-center">
                        <div class="feature-icon">
                            <i class="bi bi-award-fill"></i>
                        </div>
                        <h3>Prestasi Siswa</h3>
                        <p>Catat dan pantau prestasi akademik dan non-akademik siswa</p>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="feature-card card p-4 text-center">
                        <div class="feature-icon">
                            <i class="bi bi-journal-bookmark"></i>
                        </div>
                        <h3>Data Pendidikan</h3>
                        <p>Simpan riwayat pendidikan siswa dan data sekolah sebelumnya</p>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="feature-card card p-4 text-center">
                        <div class="feature-icon">
                            <i class="bi bi-graph-up-arrow"></i>
                        </div>
                        <h3>Perkembangan Siswa</h3>
                        <p>Pantau perkembangan siswa selama masa pendidikan di sekolah</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="stats-section">
        <div class="container">
            <div class="row text-center">
                <div class="col-md-3 mb-4 mb-md-0">
                    <div class="stat-number" data-count="1000">0</div>
                    <div class="stat-label">Siswa Terdaftar</div>
                </div>
                <div class="col-md-3 mb-4 mb-md-0">
                    <div class="stat-number" data-count="50">0</div>
                    <div class="stat-label">Tenaga Pendidik</div>
                </div>
                <div class="col-md-3 mb-4 mb-md-0">
                    <div class="stat-number" data-count="15">0</div>
                    <div class="stat-label">Tahun Berpengalaman</div>
                </div>
                <div class="col-md-3">
                    <div class="stat-number" data-count="99">0</div>
                    <div class="stat-label">% Kepuasan Pengguna</div>
                </div>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section id="tentang" class="py-5 bg-light">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <h2 class="fw-bold mb-4">Tentang Sistem Buku Induk Sekolah</h2>
                    <p class="lead">Sistem Buku Induk Sekolah adalah solusi digital terintegrasi untuk mengelola data kependidikan secara efisien dan terorganisir.</p>
                    <p>Dikembangkan dengan teknologi terkini, sistem ini membantu sekolah dalam mengelola data siswa, guru, dan administrasi akademik dengan lebih mudah, cepat, dan akurat.</p>
                    <p>Dengan antarmuka yang user-friendly, sistem ini dapat dioperasikan oleh staf administrasi dengan berbagai tingkat kemampuan teknis.</p>
                </div>
                <div class="col-lg-6">
                    <img src="https://images.unsplash.com/photo-1580582932707-520aed937b7b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Sistem Administrasi Sekolah" class="img-fluid rounded shadow">
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-5" style="background-color: var(--primary-color); color: white;">
        <div class="container text-center">
            <h2 class="fw-bold mb-4">Siap Mengoptimalkan Administrasi Sekolah Anda?</h2>
            <p class="lead mb-4">Mulai gunakan Sistem Buku Induk Sekolah sekarang dan rasakan kemudahannya</p>
            <a href="login.php" class="btn btn-light btn-lg">Login ke Sistem</a>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-4 mb-md-0">
                    <h5 class="fw-bold">BUKU INDUK SEKOLAH</h5>
                    <p>Sistem pengelolaan data induk siswa dan guru terintegrasi untuk sekolah modern.</p>
                </div>
                <div class="col-md-4 mb-4 mb-md-0">
                    <h5 class="fw-bold">Tautan Cepat</h5>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-white text-decoration-none">Beranda</a></li>
                        <li><a href="#fitur" class="text-white text-decoration-none">Fitur</a></li>
                        <li><a href="#tentang" class="text-white text-decoration-none">Tentang</a></li>
                        <li><a href="login.php" class="text-white text-decoration-none">Login</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h5 class="fw-bold">Kontak</h5>
                    <ul class="list-unstyled">
                        <li><i class="bi bi-geo-alt-fill me-2"></i> Jl. Pendidikan No. 123, Kota Pendidikan</li>
                        <li><i class="bi bi-envelope-fill me-2"></i> info@bukuinduksekolah.sch.id</li>
                        <li><i class="bi bi-telephone-fill me-2"></i> (021) 1234-5678</li>
                    </ul>
                </div>
            </div>
            <hr class="my-4 bg-light">
            <div class="text-center">
                <p>&copy; 2023 Sistem Buku Induk Sekolah. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Animasi counter untuk stats section
        document.addEventListener('DOMContentLoaded', function() {
            const counters = document.querySelectorAll('.stat-number');
            const speed = 200;
            
            counters.forEach(counter => {
                const target = parseInt(counter.getAttribute('data-count'));
                let count = 0;
                const increment = Math.ceil(target / speed);
                
                const updateCount = () => {
                    if (count < target) {
                        count += increment;
                        if (count > target) count = target;
                        counter.innerText = count;
                        setTimeout(updateCount, 1);
                    }
                };
                
                // Trigger counter when element is in viewport
                const observer = new IntersectionObserver((entries) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            updateCount();
                            observer.unobserve(entry.target);
                        }
                    });
                }, { threshold: 0.5 });
                
                observer.observe(counter);
            });
        });
    </script>
</body>
</html>