Home
Alif Bima Pradana
Scholar School - Intelligent Generation with Character

Scholar School - Intelligent Generation with Character

Landing page academic website

This tailwind example is contributed by Alif Bima Pradana, on 10-Mar-2026. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example is Front page

Landing Page

Author Alif Bima Pradana

Fork Fullscreen

<!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>Scholar School - Intelligent Generation with Character</title>
    
    
    <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=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    
    <script src="https://unpkg.com/lucide@latest"></script>

<script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['"Plus Jakarta Sans"', 'sans-serif'],
                    },
                    colors: {
                        primary: {
                            DEFAULT: '#2e0091',
                            light: '#451ab0',
                            dark: '#1f0066',
                        },
                        accent: {
                            DEFAULT: '#0ea5e9', // Sky blue / Teal soft equivalent
                            light: '#e0f2fe',
                        }
                    },
                    animation: {
                        'blob': 'blob 7s infinite',
                        'fade-up': 'fadeUp 0.8s ease-out forwards',
                    },
                    keyframes: {
                        blob: {
                            '0%': { transform: 'translate(0px, 0px) scale(1)' },
                            '33%': { transform: 'translate(30px, -50px) scale(1.1)' },
                            '66%': { transform: 'translate(-20px, 20px) scale(0.9)' },
                            '100%': { transform: 'translate(0px, 0px) scale(1)' },
                        },
                        fadeUp: {
                            '0%': { opacity: '0', transform: 'translateY(20px)' },
                            '100%': { opacity: '1', transform: 'translateY(0)' },
                        }
                    }
                }
            }
        }
    </script>

/* Utility helper for scroll animation */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease-out;
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Glass Effect */
        .glass {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
        }
        .dark .glass {
            background: rgba(17, 24, 39, 0.7);
        }
    </style>
</head>
<body class="bg-slate-50 text-slate-800 dark:bg-slate-900 dark:text-slate-100 transition-colors duration-300 font-sans">

<nav class="fixed w-full z-50 transition-all duration-300 glass border-b border-slate-200 dark:border-slate-800" id="navbar">
        <div class="container mx-auto px-6 py-4 flex justify-between items-center">
            
            <a href="#" class="flex items-center gap-2 group">
                <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center text-white shadow-lg group-hover:rotate-6 transition-transform">
                    <i data-lucide="graduation-cap"></i>
                </div>
                <div>
                    <span class="text-xl font-bold text-primary dark:text-white block leading-none">Cendekia</span>
                    <span class="text-xs text-slate-500 dark:text-slate-400 font-medium tracking-wider">SCHOOL</span>
                </div>
            </a>

<div class="hidden lg:flex items-center gap-8">
                <a href="#home" class="text-sm font-medium hover:text-primary dark:hover:text-accent transition-colors">Beranda</a>
                <a href="#about" class="text-sm font-medium hover:text-primary dark:hover:text-accent transition-colors">Tentang</a>
                <a href="#programs" class="text-sm font-medium hover:text-primary dark:hover:text-accent transition-colors">Program</a>
                <a href="#gallery" class="text-sm font-medium hover:text-primary dark:hover:text-accent transition-colors">Galeri</a>
                <a href="#news" class="text-sm font-medium hover:text-primary dark:hover:text-accent transition-colors">Berita</a>
            </div>

<div class="hidden lg:flex items-center gap-4">
                <button id="theme-toggle" class="p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors text-slate-600 dark:text-slate-300">
                    <i data-lucide="moon" class="w-5 h-5 block dark:hidden"></i>
                    <i data-lucide="sun" class="w-5 h-5 hidden dark:block"></i>
                </button>
                <a href="#contact" class="px-6 py-2.5 bg-primary hover:bg-primary-light text-white text-sm font-semibold rounded-full transition-all shadow-lg hover:shadow-primary/30 transform hover:-translate-y-0.5">
                    Daftar Sekarang
                </a>
            </div>

<button id="mobile-menu-btn" class="lg:hidden p-2 text-slate-600 dark:text-slate-300">
                <i data-lucide="menu" class="w-6 h-6"></i>
            </button>
        </div>
    </nav>

<div id="mobile-sidebar" class="fixed inset-y-0 right-0 w-64 bg-white dark:bg-slate-900 shadow-2xl transform translate-x-full transition-transform duration-300 z-50 p-6 flex flex-col gap-6">
        <div class="flex justify-between items-center mb-4">
            <span class="font-bold text-lg text-primary dark:text-white">Menu</span>
            <button id="close-sidebar" class="text-slate-500 hover:text-primary">
                <i data-lucide="x" class="w-6 h-6"></i>
            </button>
        </div>
        <a href="#home" class="mobile-link text-lg font-medium hover:text-primary">Beranda</a>
        <a href="#about" class="mobile-link text-lg font-medium hover:text-primary">Tentang</a>
        <a href="#programs" class="mobile-link text-lg font-medium hover:text-primary">Program</a>
        <a href="#gallery" class="mobile-link text-lg font-medium hover:text-primary">Galeri</a>
        <a href="#contact" class="mobile-link text-lg font-medium hover:text-primary">Kontak</a>
        <hr class="border-slate-200 dark:border-slate-700">
        <button id="mobile-theme-toggle" class="flex items-center gap-2 text-lg font-medium">
            <span>Mode Gelap</span>
            <i data-lucide="moon" class="w-5 h-5 block dark:hidden"></i>
            <i data-lucide="sun" class="w-5 h-5 hidden dark:block"></i>
        </button>
    </div>

<section id="home" class="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden">
        
        <div class="absolute top-0 -left-4 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob dark:bg-primary dark:opacity-20"></div>
        <div class="absolute top-0 -right-4 w-72 h-72 bg-accent rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-2000 dark:opacity-20"></div>
        <div class="absolute -bottom-8 left-20 w-72 h-72 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-4000 dark:bg-indigo-900 dark:opacity-20"></div>

<div class="container mx-auto px-6 relative z-10">
            <div class="flex flex-col lg:flex-row items-center gap-12 lg:gap-20">
                
                <div class="lg:w-1/2 text-center lg:text-left reveal active">
                    <div class="inline-flex items-center gap-2 px-4 py-2 bg-accent-light dark:bg-slate-800 rounded-full text-primary dark:text-accent text-sm font-semibold mb-6">
                        <span class="relative flex h-3 w-3">
                          <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-accent opacity-75"></span>
                          <span class="relative inline-flex rounded-full h-3 w-3 bg-accent"></span>
                        </span>
                        Penerimaan Siswa Baru 2025 Dibuka
                    </div>
                    <h1 class="text-4xl lg:text-6xl font-bold leading-tight mb-6 text-slate-900 dark:text-white">
                        Mewujudkan Generasi <span class="text-primary dark:text-accent">Cerdas</span>, Berkarakter & Berprestasi
                    </h1>
                    <p class="text-lg text-slate-600 dark:text-slate-300 mb-8 leading-relaxed">
                        Kami berkomitmen menciptakan lingkungan pendidikan inklusif yang mendorong inovasi, kreativitas, dan nilai-nilai luhur untuk masa depan yang gemilang.
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
                        <a href="#contact" class="px-8 py-4 bg-primary hover:bg-primary-light text-white font-semibold rounded-full shadow-lg hover:shadow-primary/40 transition-all transform hover:-translate-y-1 text-center">
                            Daftar Sekarang
                        </a>
                        <a href="#about" class="px-8 py-4 border-2 border-slate-200 dark:border-slate-700 hover:border-primary dark:hover:border-accent text-slate-700 dark:text-slate-200 font-semibold rounded-full transition-all hover:bg-slate-50 dark:hover:bg-slate-800 text-center flex items-center justify-center gap-2">
                            <i data-lucide="play-circle" class="w-5 h-5"></i>
                            Profil Sekolah
                        </a>
                    </div>
                    
                    <div class="mt-12 flex items-center justify-center lg:justify-start gap-8 text-slate-500 dark:text-slate-400">
                        <div class="flex items-center gap-2">
                            <i data-lucide="users" class="w-5 h-5 text-primary"></i>
                            <span class="text-sm font-medium">1000+ Alumni</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <i data-lucide="award" class="w-5 h-5 text-primary"></i>
                            <span class="text-sm font-medium">Akreditasi A</span>
                        </div>
                    </div>
                </div>

<div class="lg:w-1/2 relative reveal delay-200">
                    <div class="relative rounded-3xl overflow-hidden shadow-2xl border-4 border-white dark:border-slate-800">
                        <img src="https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Siswa Belajar" class="w-full object-cover h-[500px] hover:scale-105 transition-transform duration-700">
                        
                        <div class="absolute bottom-6 left-6 bg-white dark:bg-slate-800 p-4 rounded-xl shadow-lg flex items-center gap-4 max-w-xs animate-bounce" style="animation-duration: 3s;">
                            <div class="bg-green-100 dark:bg-green-900 p-3 rounded-full text-green-600 dark:text-green-400">
                                <i data-lucide="trophy" class="w-6 h-6"></i>
                            </div>
                            <div>
                                <p class="text-xs text-slate-500 dark:text-slate-400 font-medium">Prestasi Terbaru</p>
                                <p class="text-sm font-bold text-slate-800 dark:text-white">Juara 1 Olimpiade Sains Nasional</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="absolute -z-10 -bottom-10 -right-10 text-primary opacity-20">
                        <svg width="100" height="100" fill="currentColor" viewBox="0 0 100 100">
                            <pattern id="dots" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
                                <circle cx="2" cy="2" r="2"></circle>
                            </pattern>
                            <rect width="100" height="100" fill="url(#dots)"></rect>
                        </svg>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="about" class="py-20 bg-white dark:bg-slate-900">
        <div class="container mx-auto px-6">
            <div class="flex flex-col md:flex-row items-center gap-16">
                
                <div class="md:w-1/2 grid grid-cols-2 gap-4 reveal">
                    <img src="https://images.unsplash.com/photo-1544531586-fde5298cdd40?auto=format&fit=crop&w=400&q=80" class="rounded-2xl shadow-lg mt-12 w-full h-64 object-cover">
                    <img src="https://images.unsplash.com/photo-1509062522246-3755977927d7?auto=format&fit=crop&w=400&q=80" class="rounded-2xl shadow-lg w-full h-64 object-cover">
                </div>

<div class="md:w-1/2 reveal delay-200">
                    <span class="text-primary font-bold tracking-wider uppercase text-sm">Tentang Kami</span>
                    <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-6 text-slate-900 dark:text-white">Membangun Karakter Sejak Dini</h2>
                    <p class="text-slate-600 dark:text-slate-300 mb-6 leading-relaxed">
                        Berdiri sejak 1995, Sekolah Cendekia telah menjadi pionir dalam pendidikan modern yang memadukan keunggulan akademik dengan nilai-nilai moral. Kami percaya bahwa setiap anak memiliki potensi unik yang perlu diasah.
                    </p>
                    
                    <div class="space-y-4">
                        <div class="flex items-start gap-4">
                            <div class="bg-primary/10 p-2 rounded-lg text-primary mt-1">
                                <i data-lucide="check-circle" class="w-5 h-5"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-slate-800 dark:text-white">Visi</h4>
                                <p class="text-sm text-slate-600 dark:text-slate-400">Menjadi sekolah rujukan yang unggul dalam IPTEK dan IMTAQ.</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-4">
                            <div class="bg-primary/10 p-2 rounded-lg text-primary mt-1">
                                <i data-lucide="target" class="w-5 h-5"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-slate-800 dark:text-white">Misi</h4>
                                <p class="text-sm text-slate-600 dark:text-slate-400">Menyelenggarakan pembelajaran aktif, inovatif, kreatif, dan menyenangkan.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="programs" class="py-20 bg-slate-50 dark:bg-slate-800 relative">
        <div class="container mx-auto px-6">
            <div class="text-center max-w-2xl mx-auto mb-16 reveal">
                <span class="text-accent font-bold tracking-wider uppercase text-sm">Keunggulan</span>
                <h2 class="text-3xl md:text-4xl font-bold mt-2 text-slate-900 dark:text-white">Program & Fasilitas</h2>
                <p class="text-slate-600 dark:text-slate-400 mt-4">Kami menyediakan fasilitas terbaik untuk mendukung proses belajar mengajar yang optimal.</p>
            </div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                
                <div class="bg-white dark:bg-slate-900 p-8 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 group hover:-translate-y-2 border border-slate-100 dark:border-slate-700 reveal">
                    <div class="w-14 h-14 bg-blue-100 dark:bg-blue-900 rounded-xl flex items-center justify-center text-blue-600 dark:text-blue-300 mb-6 group-hover:scale-110 transition-transform">
                        <i data-lucide="book-open" class="w-7 h-7"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-slate-900 dark:text-white">Kurikulum Internasional</h3>
                    <p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">Mengadopsi standar Cambridge untuk mempersiapkan siswa bersaing di kancah global.</p>
                </div>

<div class="bg-white dark:bg-slate-900 p-8 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 group hover:-translate-y-2 border border-slate-100 dark:border-slate-700 reveal delay-100">
                    <div class="w-14 h-14 bg-purple-100 dark:bg-purple-900 rounded-xl flex items-center justify-center text-purple-600 dark:text-purple-300 mb-6 group-hover:scale-110 transition-transform">
                        <i data-lucide="microscope" class="w-7 h-7"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-slate-900 dark:text-white">Lab Sains Modern</h3>
                    <p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">Laboratorium Fisika, Kimia, dan Biologi dengan peralatan terkini dan aman.</p>
                </div>

<div class="bg-white dark:bg-slate-900 p-8 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 group hover:-translate-y-2 border border-slate-100 dark:border-slate-700 reveal delay-200">
                    <div class="w-14 h-14 bg-orange-100 dark:bg-orange-900 rounded-xl flex items-center justify-center text-orange-600 dark:text-orange-300 mb-6 group-hover:scale-110 transition-transform">
                        <i data-lucide="laptop" class="w-7 h-7"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-slate-900 dark:text-white">Kelas Digital</h3>
                    <p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">Setiap kelas dilengkapi Smart Board dan akses internet berkecepatan tinggi.</p>
                </div>

<div class="bg-white dark:bg-slate-900 p-8 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 group hover:-translate-y-2 border border-slate-100 dark:border-slate-700 reveal">
                    <div class="w-14 h-14 bg-green-100 dark:bg-green-900 rounded-xl flex items-center justify-center text-green-600 dark:text-green-300 mb-6 group-hover:scale-110 transition-transform">
                        <i data-lucide="music" class="w-7 h-7"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-slate-900 dark:text-white">Ekstrakurikuler Seni</h3>
                    <p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">Pengembangan bakat seni musik, tari, dan lukis dengan mentor profesional.</p>
                </div>

<div class="bg-white dark:bg-slate-900 p-8 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 group hover:-translate-y-2 border border-slate-100 dark:border-slate-700 reveal delay-100">
                    <div class="w-14 h-14 bg-red-100 dark:bg-red-900 rounded-xl flex items-center justify-center text-red-600 dark:text-red-300 mb-6 group-hover:scale-110 transition-transform">
                        <i data-lucide="library" class="w-7 h-7"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-slate-900 dark:text-white">Perpustakaan E-Library</h3>
                    <p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">Koleksi ribuan buku fisik dan digital yang dapat diakses dari mana saja.</p>
                </div>

<div class="bg-white dark:bg-slate-900 p-8 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 group hover:-translate-y-2 border border-slate-100 dark:border-slate-700 reveal delay-200">
                    <div class="w-14 h-14 bg-teal-100 dark:bg-teal-900 rounded-xl flex items-center justify-center text-teal-600 dark:text-teal-300 mb-6 group-hover:scale-110 transition-transform">
                        <i data-lucide="heart-handshake" class="w-7 h-7"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-slate-900 dark:text-white">Bimbingan Konseling</h3>
                    <p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">Layanan psikologi untuk mendukung kesehatan mental dan pengembangan karakter siswa.</p>
                </div>
            </div>
        </div>
    </section>

<section class="py-20 bg-primary dark:bg-slate-900 text-white relative overflow-hidden">
        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10"></div>
        <div class="container mx-auto px-6 relative z-10">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center divide-x divide-white/20">
                <div class="reveal">
                    <p class="text-4xl lg:text-5xl font-bold mb-2">50+</p>
                    <p class="text-sm lg:text-base opacity-80">Penghargaan Nasional</p>
                </div>
                <div class="reveal delay-100">
                    <p class="text-4xl lg:text-5xl font-bold mb-2">120</p>
                    <p class="text-sm lg:text-base opacity-80">Guru Tersertifikasi</p>
                </div>
                <div class="reveal delay-200">
                    <p class="text-4xl lg:text-5xl font-bold mb-2">98%</p>
                    <p class="text-sm lg:text-base opacity-80">Lulusan ke PTN</p>
                </div>
                <div class="reveal delay-300">
                    <p class="text-4xl lg:text-5xl font-bold mb-2">25</p>
                    <p class="text-sm lg:text-base opacity-80">Ekstrakurikuler</p>
                </div>
            </div>
        </div>
    </section>

<section class="py-20 bg-white dark:bg-slate-900">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16 reveal">
                <h2 class="text-3xl font-bold text-slate-900 dark:text-white">Pendidik Inspiratif</h2>
                <p class="text-slate-600 dark:text-slate-400 mt-2">Dibimbing oleh tenaga pengajar profesional dan berpengalaman.</p>
            </div>

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8">
                
                <div class="text-center group reveal">
                    <div class="relative w-48 h-48 mx-auto mb-4 rounded-full overflow-hidden shadow-lg border-4 border-slate-50 dark:border-slate-800 group-hover:border-primary transition-colors">
                        <img src="https://images.unsplash.com/photo-1544717305-2782549b5136?auto=format&fit=crop&w=300&q=80" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                    </div>
                    <h4 class="text-lg font-bold text-slate-800 dark:text-white">Siti Aminah, M.Pd</h4>
                    <p class="text-sm text-primary dark:text-accent font-medium">Kepala Sekolah</p>
                </div>
                
                
                <div class="text-center group reveal delay-100">
                    <div class="relative w-48 h-48 mx-auto mb-4 rounded-full overflow-hidden shadow-lg border-4 border-slate-50 dark:border-slate-800 group-hover:border-primary transition-colors">
                        <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=300&q=80" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                    </div>
                    <h4 class="text-lg font-bold text-slate-800 dark:text-white">Budi Santoso, S.Si</h4>
                    <p class="text-sm text-primary dark:text-accent font-medium">Koordinator Sains</p>
                </div>

<div class="text-center group reveal delay-200">
                    <div class="relative w-48 h-48 mx-auto mb-4 rounded-full overflow-hidden shadow-lg border-4 border-slate-50 dark:border-slate-800 group-hover:border-primary transition-colors">
                        <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=300&q=80" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                    </div>
                    <h4 class="text-lg font-bold text-slate-800 dark:text-white">Ratna Dewi, S.Pd</h4>
                    <p class="text-sm text-primary dark:text-accent font-medium">Guru Bahasa Inggris</p>
                </div>

<div class="text-center group reveal delay-300">
                    <div class="relative w-48 h-48 mx-auto mb-4 rounded-full overflow-hidden shadow-lg border-4 border-slate-50 dark:border-slate-800 group-hover:border-primary transition-colors">
                        <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=300&q=80" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                    </div>
                    <h4 class="text-lg font-bold text-slate-800 dark:text-white">Ahmad Fauzi, M.Kom</h4>
                    <p class="text-sm text-primary dark:text-accent font-medium">Guru TIK</p>
                </div>
            </div>
        </div>
    </section>

<section id="gallery" class="py-20 bg-slate-50 dark:bg-slate-800">
        <div class="container mx-auto px-6">
            <div class="flex flex-col md:flex-row justify-between items-end mb-12 reveal">
                <div>
                    <span class="text-accent font-bold tracking-wider uppercase text-sm">Dokumentasi</span>
                    <h2 class="text-3xl font-bold mt-2 text-slate-900 dark:text-white">Galeri Kegiatan</h2>
                </div>
                <a href="#" class="text-primary dark:text-accent font-semibold hover:underline mt-4 md:mt-0">Lihat Semua Galeri &rarr;</a>
            </div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-6 auto-rows-[200px]">
                
                <div class="md:col-span-2 md:row-span-2 rounded-2xl overflow-hidden shadow-lg relative group reveal">
                    <img src="https://images.unsplash.com/photo-1564981797816-1043664bf78d?auto=format&fit=crop&w=800&q=80" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-6">
                        <p class="text-white font-medium">Kegiatan Upacara Bendera</p>
                    </div>
                </div>
                
                <div class="rounded-2xl overflow-hidden shadow-lg relative group reveal delay-100">
                    <img src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&w=400&q=80" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-6">
                        <p class="text-white font-medium">Praktikum Kimia</p>
                    </div>
                </div>
                <div class="rounded-2xl overflow-hidden shadow-lg relative group reveal delay-200">
                    <img src="https://images.unsplash.com/photo-1509062522246-3755977927d7?auto=format&fit=crop&w=400&q=80" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-6">
                        <p class="text-white font-medium">Diskusi Kelompok</p>
                    </div>
                </div>
                
                <div class="md:col-span-2 rounded-2xl overflow-hidden shadow-lg relative group reveal delay-300">
                    <img src="https://images.unsplash.com/photo-1511632765486-a01980e01a18?auto=format&fit=crop&w=800&q=80" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-6">
                        <p class="text-white font-medium">Pentas Seni Sekolah</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="news" class="py-20 bg-white dark:bg-slate-900">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold text-center mb-12 text-slate-900 dark:text-white reveal">Berita & Pengumuman</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                
                <article class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-700 overflow-hidden hover:shadow-xl transition-all reveal">
                    <img src="https://images.unsplash.com/photo-1427504746696-ea5abd71a32f?auto=format&fit=crop&w=500&q=80" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <span class="text-xs font-bold text-primary dark:text-accent bg-primary/10 px-2 py-1 rounded">Akademik</span>
                        <div class="text-slate-400 text-xs mt-3 flex items-center gap-1">
                            <i data-lucide="calendar" class="w-3 h-3"></i> 12 Des 2024
                        </div>
                        <h3 class="text-lg font-bold mt-2 text-slate-900 dark:text-white hover:text-primary transition-colors cursor-pointer">Jadwal Ujian Akhir Semester Ganjil</h3>
                        <p class="text-slate-600 dark:text-slate-400 text-sm mt-2 line-clamp-2">Informasi lengkap mengenai jadwal dan tata tertib pelaksanaan UAS...</p>
                        <a href="#" class="inline-block mt-4 text-sm font-semibold text-primary dark:text-accent hover:underline">Baca Selengkapnya</a>
                    </div>
                </article>

<article class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-700 overflow-hidden hover:shadow-xl transition-all reveal delay-100">
                    <img src="https://images.unsplash.com/photo-1546410531-bb4caa6b424d?auto=format&fit=crop&w=500&q=80" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <span class="text-xs font-bold text-green-600 bg-green-100 px-2 py-1 rounded">Prestasi</span>
                        <div class="text-slate-400 text-xs mt-3 flex items-center gap-1">
                            <i data-lucide="calendar" class="w-3 h-3"></i> 10 Des 2024
                        </div>
                        <h3 class="text-lg font-bold mt-2 text-slate-900 dark:text-white hover:text-primary transition-colors cursor-pointer">Tim Basket Raih Juara 1 Tingkat Kota</h3>
                        <p class="text-slate-600 dark:text-slate-400 text-sm mt-2 line-clamp-2">Selamat kepada tim basket putra yang telah mengharumkan nama sekolah...</p>
                        <a href="#" class="inline-block mt-4 text-sm font-semibold text-primary dark:text-accent hover:underline">Baca Selengkapnya</a>
                    </div>
                </article>

<article class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-700 overflow-hidden hover:shadow-xl transition-all reveal delay-200">
                    <img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=500&q=80" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <span class="text-xs font-bold text-orange-600 bg-orange-100 px-2 py-1 rounded">Event</span>
                        <div class="text-slate-400 text-xs mt-3 flex items-center gap-1">
                            <i data-lucide="calendar" class="w-3 h-3"></i> 05 Des 2024
                        </div>
                        <h3 class="text-lg font-bold mt-2 text-slate-900 dark:text-white hover:text-primary transition-colors cursor-pointer">Penerimaan Peserta Didik Baru (PPDB)</h3>
                        <p class="text-slate-600 dark:text-slate-400 text-sm mt-2 line-clamp-2">Segera daftarkan putra-putri Anda. Kuota terbatas untuk tahun ajaran baru...</p>
                        <a href="#" class="inline-block mt-4 text-sm font-semibold text-primary dark:text-accent hover:underline">Baca Selengkapnya</a>
                    </div>
                </article>
            </div>
        </div>
    </section>

<section id="contact" class="py-20 bg-slate-50 dark:bg-slate-800">
        <div class="container mx-auto px-6">
            <div class="flex flex-col lg:flex-row gap-12 bg-white dark:bg-slate-900 rounded-3xl shadow-xl overflow-hidden reveal">
                
                <div class="lg:w-2/5 bg-primary p-12 text-white relative overflow-hidden">
                    <div class="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-2xl transform translate-x-10 -translate-y-10"></div>
                    <h3 class="text-2xl font-bold mb-6">Hubungi Kami</h3>
                    <p class="text-blue-100 mb-10 leading-relaxed">Punya pertanyaan seputar pendaftaran atau program sekolah? Jangan ragu untuk menghubungi kami.</p>
                    
                    <div class="space-y-6">
                        <div class="flex items-start gap-4">
                            <i data-lucide="map-pin" class="w-6 h-6 shrink-0 text-accent"></i>
                            <p class="text-sm">Jl. Pendidikan No. 123, Kota Cerdas, Indonesia 10110</p>
                        </div>
                        <div class="flex items-center gap-4">
                            <i data-lucide="phone" class="w-6 h-6 shrink-0 text-accent"></i>
                            <p class="text-sm">(021) 1234-5678</p>
                        </div>
                        <div class="flex items-center gap-4">
                            <i data-lucide="mail" class="w-6 h-6 shrink-0 text-accent"></i>
                            <p class="text-sm">info@sekolahcendekia.sch.id</p>
                        </div>
                        <div class="flex items-center gap-4">
                            <i data-lucide="clock" class="w-6 h-6 shrink-0 text-accent"></i>
                            <p class="text-sm">Senin - Jumat: 07:00 - 16:00</p>
                        </div>
                    </div>

<div class="lg:w-3/5 p-8 lg:p-12">
                    <form onsubmit="event.preventDefault(); alert('Pesan terkirim!');">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Nama Lengkap</label>
                                <input type="text" class="w-full px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-primary dark:text-white" placeholder="Masukkan nama">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Email</label>
                                <input type="email" class="w-full px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-primary dark:text-white" placeholder="alamat@email.com">
                            </div>
                        </div>
                        <div class="mb-6">
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Subjek</label>
                            <select class="w-full px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-primary dark:text-white">
                                <option>Informasi Pendaftaran (PPDB)</option>
                                <option>Pertanyaan Umum</option>
                                <option>Kerjasama</option>
                            </select>
                        </div>
                        <div class="mb-8">
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Pesan</label>
                            <textarea rows="4" class="w-full px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-primary dark:text-white" placeholder="Tulis pesan Anda disini..."></textarea>
                        </div>
                        <button type="submit" class="w-full px-8 py-4 bg-primary hover:bg-primary-light text-white font-bold rounded-lg shadow-lg hover:shadow-primary/40 transition-all transform active:scale-95">
                            Kirim Pesan
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<footer class="bg-slate-900 text-slate-300 py-12 border-t border-slate-800">
        <div class="container mx-auto px-6">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
                
                <div class="col-span-1 md:col-span-1">
                    <div class="flex items-center gap-2 mb-4">
                        <div class="w-8 h-8 bg-primary rounded flex items-center justify-center text-white">
                            <i data-lucide="graduation-cap" class="w-5 h-5"></i>
                        </div>
                        <span class="text-xl font-bold text-white">Cendekia</span>
                    </div>
                    <p class="text-sm leading-relaxed mb-6">
                        Membentuk generasi masa depan yang cerdas, berkarakter mulia, dan siap menghadapi tantangan global.
                    </p>
                </div>

<div>
                    <h4 class="text-white font-bold mb-4">Jelajahi</h4>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#about" class="hover:text-primary transition-colors">Tentang Kami</a></li>
                        <li><a href="#programs" class="hover:text-primary transition-colors">Program Unggulan</a></li>
                        <li><a href="#teachers" class="hover:text-primary transition-colors">Guru & Staf</a></li>
                        <li><a href="#news" class="hover:text-primary transition-colors">Berita Sekolah</a></li>
                        <li><a href="#" class="hover:text-primary transition-colors">Karir</a></li>
                    </ul>
                </div>

<div>
                    <h4 class="text-white font-bold mb-4">Akademik</h4>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#" class="hover:text-primary transition-colors">Kalender Akademik</a></li>
                        <li><a href="#" class="hover:text-primary transition-colors">E-Learning</a></li>
                        <li><a href="#" class="hover:text-primary transition-colors">Perpustakaan</a></li>
                        <li><a href="#" class="hover:text-primary transition-colors">Alumni</a></li>
                    </ul>
                </div>

<div>
                    <h4 class="text-white font-bold mb-4">Berlangganan</h4>
                    <p class="text-sm mb-4">Dapatkan info terbaru seputar sekolah.</p>
                    <div class="flex gap-2">
                        <input type="email" placeholder="Email Anda" class="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded text-sm focus:outline-none focus:border-primary text-white">
                        <button class="bg-primary hover:bg-primary-light px-3 py-2 rounded text-white transition-colors">
                            <i data-lucide="send" class="w-4 h-4"></i>
                        </button>
                    </div>
                </div>
            </div>

<div class="border-t border-slate-800 pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-sm">
                <p>&copy; 2025 Sekolah Cendekia. All rights reserved.</p>
                <div class="flex gap-6">
                    <a href="#" class="hover:text-white">Privacy Policy</a>
                    <a href="#" class="hover:text-white">Terms of Service</a>
                </div>
            </div>
        </div>
    </footer>

<script>
        // Initialize Icons
        lucide.createIcons();

// Mobile Menu Logic
        const mobileBtn = document.getElementById('mobile-menu-btn');
        const sidebar = document.getElementById('mobile-sidebar');
        const closeSidebar = document.getElementById('close-sidebar');
        const overlay = document.createElement('div');
        
        overlay.className = 'fixed inset-0 bg-black/50 z-40 hidden transition-opacity duration-300 opacity-0';
        document.body.appendChild(overlay);

mobileBtn.addEventListener('click', toggleMenu);
        closeSidebar.addEventListener('click', toggleMenu);
        overlay.addEventListener('click', toggleMenu);

// Close sidebar on link click
        document.querySelectorAll('.mobile-link').forEach(link => {
            link.addEventListener('click', toggleMenu);
        });

// Dark Mode Logic
        const themeToggle = document.getElementById('theme-toggle');
        const mobileThemeToggle = document.getElementById('mobile-theme-toggle');
        const html = document.documentElement;

// Check local storage or system preference
        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            html.classList.add('dark');
        } else {
            html.classList.remove('dark');
        }

themeToggle.addEventListener('click', toggleTheme);
        mobileThemeToggle.addEventListener('click', toggleTheme);

// Navbar Scroll Effect
        const navbar = document.getElementById('navbar');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                navbar.classList.add('shadow-md');
                navbar.classList.replace('py-4', 'py-2');
            } else {
                navbar.classList.remove('shadow-md');
                navbar.classList.replace('py-2', 'py-4');
            }
        });

// Scroll Animation (Fade Up)
        const observerOptions = {
            threshold: 0.1,
            rootMargin: "0px 0px -50px 0px"
        };

document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

</script>
</body>
</html>

Related Examples

HostelLandingPage

Author:
Ramesh Kumar Sah

5 months ago

741
EduChina
EduChina

Author:
Tanvir Hasan Bappy (Tanvir)

7 months ago

637
Hero_Page
#heropage #landingpage

Author:
Rupesh

8 months ago

708
hero template

Author:
Raul antonio de la cruz hernandez

2 months ago

91
gallary
html , css

Author:
Hacker Development

10 months ago

664
Instagram clone
clone a site that kind off instagram

Author:
Tofayel Islam

2 months ago

480
Landing page
g2.5, neomorphism

Author:
Akram Khan

8 months ago

1.2k
Our Services Section – Animated & Responsive
A modern and dynamic “Services” section built with Tailwind CSS and Alpine.js, designed to showcase your company’s main offerings with clean visuals and engaging animations. This component uses smooth fade and slide animations to reveal each service card as it comes into view. Each card highlights a core business area — Web Development, Mobile Apps, and Cloud Solutions — with beautiful hover effects, icons, and descriptive lists. Perfect for SaaS websites, agencies, and startups looking to present their services in a visually appealing, professional, and responsive layout. Key Features Smooth scroll-triggered animations with Alpine.js Responsive grid layout (mobile → desktop ready) Built with Tailwind CSS for fast customization Dark mode support included Interactive hover effects for each service card Ideal for corporate, SaaS, or portfolio websites 💡 Services Included 🌐 Web Development (Responsive, SEO-friendly, Optimized) 📱 Mobile Apps (Cross-platform, iOS & Android) ☁️ Cloud Solutions (AWS, Azure, Auto-scaling, Security)

Author:
wavy kits

4 months ago

738
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Author:
Sahil Sasapara

1 year ago

5k
EduConnect
EduConnect

Author:
Tanvir Hasan Bappy (Tanvir)

7 months ago

525
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Author:
Coastal UI

1 year ago

2.1k
Product Landing Page

Author:
Noob

3 years ago

12.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components