Home
Alif Bima Pradana
Digital Village - Red and White Building the Nation

Digital Village - Red and White Building the Nation

Landing page website village

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>Desa Digital - Merah Putih Membangun Negeri</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://unpkg.com/lucide@latest"></script>
    
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Plus Jakarta Sans', 'sans-serif'],
                    },
                    colors: {
                        primary: '#e80202', // NEW: Red Primary
                        'primary-dark': '#b90000', // Darker Red
                        dark: {
                            base: '#0a0a0a', // Slightly darker base
                            surface: '#171717',
                            border: '#262626'
                        }
                    },
                    boxShadow: {
                        'neon': '0 0 25px rgba(232, 2, 2, 0.4)', // Red Neon
                        'card-hover': '0 20px 40px -15px rgba(0, 0, 0, 0.15)'
                    },
                    animation: {
                        'float': 'float 6s ease-in-out infinite',
                        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-20px)' },
                        }
                    }
                }
            }
        }
    </script>

/* Animation Classes */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

/* Glass Utility */
        .glass {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        .dark .glass {
            background: rgba(23, 23, 23, 0.8);
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }
        
        /* Grid Lines Background Pattern */
        .bg-grid {
            background-size: 50px 50px;
            background-image: 
                linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px);
            mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
            -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
        }
        .dark .bg-grid {
            background-image: 
                linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
        }

/* Custom Toggle Switch */
        .toggle-checkbox:checked {
            right: 0;
            border-color: #e80202;
        }
        .toggle-checkbox:checked + .toggle-label {
            background-color: #e80202;
        }
    </style>
</head>
<body class="bg-white text-gray-900 dark:bg-dark-base dark:text-gray-100 transition-colors duration-300">

<nav class="fixed w-full z-50 transition-all duration-300 glass" id="navbar">
        <div class="container mx-auto px-8 md:px-12 lg:px-24 py-5">
            <div class="flex justify-between items-center">
                
                <a href="#" class="flex items-center gap-3 group relative z-50">
                    <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center text-white shadow-neon group-hover:scale-105 transition-transform rotate-3 group-hover:rotate-0">
                        <i data-lucide="activity" class="w-6 h-6"></i>
                    </div>
                    <span class="text-xl font-bold tracking-tight">Desa<span class="text-primary">Maju</span></span>
                </a>

<div class="hidden md:flex items-center gap-10">
                    <a href="#profil" class="text-sm font-medium hover:text-primary transition-colors">Profil</a>
                    <a href="#layanan" class="text-sm font-medium hover:text-primary transition-colors">Layanan</a>
                    <a href="#berita" class="text-sm font-medium hover:text-primary transition-colors">Berita</a>
                    <a href="#galeri" class="text-sm font-medium hover:text-primary transition-colors">Galeri</a>
                    
                    
                    <div class="relative inline-block w-12 mr-2 align-middle select-none transition duration-200 ease-in">
                        <input type="checkbox" name="toggle" id="toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 border-gray-300 appearance-none cursor-pointer transition-all duration-300 z-10"/>
                        <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer dark:bg-gray-700"></label>
                    </div>

<a href="#kontak" class="bg-primary text-white px-7 py-3 rounded-lg font-medium text-sm hover:shadow-neon hover:bg-primary-dark transition-all duration-300 transform hover:-translate-y-0.5">
                        Akses Warga
                    </a>
                </div>

<button class="md:hidden text-gray-800 dark:text-white relative z-50 hover:text-primary transition-colors p-2" id="mobile-menu-btn">
                    <i data-lucide="menu" class="w-8 h-8"></i>
                </button>
            </div>
        </div>
    </nav>

<div id="sidebar-overlay" class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm hidden transition-opacity duration-300 opacity-0"></div>

<div id="mobile-sidebar" class="fixed top-0 right-0 z-[70] w-[280px] h-full bg-white dark:bg-dark-surface shadow-2xl transform translate-x-full transition-transform duration-300 ease-in-out flex flex-col border-l border-gray-100 dark:border-white/5">
        
        
        <div class="p-6 flex justify-between items-center border-b border-gray-100 dark:border-white/5">
            <span class="text-lg font-bold tracking-tight">Menu <span class="text-primary">Utama</span></span>
            <button id="close-sidebar-btn" class="text-gray-500 hover:text-primary transition-colors p-1 rounded-full hover:bg-gray-100 dark:hover:bg-white/5">
                <i data-lucide="x" class="w-6 h-6"></i>
            </button>
        </div>

<div class="flex-1 overflow-y-auto py-6 px-4">
            <nav class="space-y-2">
                <a href="#profil" class="mobile-link flex items-center gap-4 px-4 py-3 text-gray-700 dark:text-gray-300 hover:bg-red-50 dark:hover:bg-white/5 hover:text-primary rounded-xl transition-all font-medium">
                    <i data-lucide="user" class="w-5 h-5 text-primary/80"></i>
                    Profil Desa
                </a>
                <a href="#layanan" class="mobile-link flex items-center gap-4 px-4 py-3 text-gray-700 dark:text-gray-300 hover:bg-red-50 dark:hover:bg-white/5 hover:text-primary rounded-xl transition-all font-medium">
                    <i data-lucide="briefcase" class="w-5 h-5 text-primary/80"></i>
                    Layanan
                </a>
                <a href="#berita" class="mobile-link flex items-center gap-4 px-4 py-3 text-gray-700 dark:text-gray-300 hover:bg-red-50 dark:hover:bg-white/5 hover:text-primary rounded-xl transition-all font-medium">
                    <i data-lucide="newspaper" class="w-5 h-5 text-primary/80"></i>
                    Berita
                </a>
                <a href="#galeri" class="mobile-link flex items-center gap-4 px-4 py-3 text-gray-700 dark:text-gray-300 hover:bg-red-50 dark:hover:bg-white/5 hover:text-primary rounded-xl transition-all font-medium">
                    <i data-lucide="image" class="w-5 h-5 text-primary/80"></i>
                    Galeri
                </a>
            </nav>

<div class="mt-8 px-4">
                <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-white/5 rounded-xl">
                    <span class="text-sm font-medium flex items-center gap-2">
                        <i data-lucide="moon" class="w-4 h-4"></i> Mode Gelap
                    </span>
                    
                    <div class="relative inline-block w-12 align-middle select-none">
                        <input type="checkbox" id="toggle-mobile" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 border-gray-300 appearance-none cursor-pointer transition-all duration-300 z-10"/>
                        <label for="toggle-mobile" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer dark:bg-gray-700"></label>
                    </div>
                </div>
            </div>
        </div>

<div class="p-6 border-t border-gray-100 dark:border-white/5">
             <a href="#kontak" class="mobile-link block w-full py-3 bg-primary text-white text-center rounded-xl font-bold shadow-neon hover:bg-primary-dark transition-all">
                Masuk / Akses Warga
            </a>
        </div>
    </div>

<section class="relative min-h-screen flex items-center pt-28 pb-20 overflow-hidden">
        
        
        <div class="absolute inset-0 z-0 bg-grid"></div>
        
        
        <div class="absolute top-[-10%] left-[-10%] w-[500px] h-[500px] bg-primary/5 rounded-full blur-[120px]"></div>
        <div class="absolute bottom-0 right-0 w-[600px] h-[600px] bg-red-500/5 rounded-full blur-[100px]"></div>

<div class="container mx-auto px-8 md:px-12 lg:px-24 relative z-10">
            <div class="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
                
                
                <div class="text-left order-2 lg:order-1 reveal">
                    <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold uppercase tracking-widest mb-8">
                        <span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
                        Smart Village System v4.0
                    </div>
                    
                    <h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight leading-[1.1] mb-6">
                        Membangun Desa <br>
                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-orange-600">Lebih Cerdas.</span>
                    </h1>
                    
                    <p class="text-lg text-gray-600 dark:text-gray-400 mb-10 leading-relaxed max-w-lg">
                        Platform digital terintegrasi untuk administrasi, pelayanan publik, dan ekonomi desa. Efisien, transparan, dan akuntabel.
                    </p>
                    
                    <div class="flex flex-col sm:flex-row gap-5">
                        <a href="#layanan" class="group px-8 py-4 bg-primary text-white rounded-lg font-bold shadow-neon transition-all hover:bg-primary-dark hover:scale-[1.02] flex items-center justify-center gap-2">
                            Layanan Warga <i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
                        </a>
                        <a href="#profil" class="px-8 py-4 rounded-lg font-bold border-2 border-gray-200 dark:border-white/10 hover:border-primary hover:text-primary dark:hover:border-primary dark:hover:text-primary transition-all flex items-center justify-center">
                            Lihat Statistik
                        </a>
                    </div>

<div class="mt-12 flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400 font-medium">
                        <div class="flex -space-x-2">
                            <div class="w-8 h-8 rounded-full bg-gray-200 border-2 border-white dark:border-dark-base"></div>
                            <div class="w-8 h-8 rounded-full bg-gray-300 border-2 border-white dark:border-dark-base"></div>
                            <div class="w-8 h-8 rounded-full bg-gray-400 border-2 border-white dark:border-dark-base"></div>
                        </div>
                        <p>Dipercaya oleh <span class="text-primary font-bold">2,500+</span> warga.</p>
                    </div>
                </div>

<div class="order-1 lg:order-2 relative reveal" style="transition-delay: 200ms;">
                    
                    <div class="absolute inset-0 bg-primary/20 blur-[60px] rounded-full scale-90 animate-pulse-slow"></div>
                    
                    
                    <div class="relative rounded-2xl overflow-hidden shadow-2xl border border-gray-200 dark:border-white/10 bg-white dark:bg-dark-surface group perspective-1000">
                        <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=2000" alt="Dashboard Desa" class="w-full h-auto object-cover opacity-95 group-hover:scale-105 transition-transform duration-700">
                        
                        
                        <div class="absolute bottom-6 left-6 right-6 bg-white/90 dark:bg-black/80 backdrop-blur-md p-4 rounded-xl border border-white/20 shadow-lg transform translate-y-2 group-hover:translate-y-0 transition-transform">
                            <div class="flex items-center gap-4">
                                <div class="w-10 h-10 rounded-full bg-green-500/20 text-green-500 flex items-center justify-center">
                                    <i data-lucide="check-circle" class="w-6 h-6"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold text-sm">Surat Keterangan Usaha</h4>
                                    <p class="text-xs text-gray-500 dark:text-gray-400">Status: <span class="text-green-500 font-semibold">Selesai (Baru Saja)</span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="py-20 bg-gray-50 dark:bg-dark-base relative border-y border-gray-100 dark:border-white/5">
        <div class="container mx-auto px-8 md:px-12 lg:px-24">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
                
                <div class="p-8 rounded-xl bg-white dark:bg-dark-surface hover:bg-white dark:hover:bg-dark-surface transition-all duration-300 hover:shadow-card-hover border border-gray-100 dark:border-white/5 hover:border-primary/30 dark:hover:border-primary/30 group reveal">
                    <div class="w-14 h-14 rounded-lg bg-red-50 dark:bg-red-900/10 text-primary flex items-center justify-center mb-6 group-hover:bg-primary group-hover:text-white transition-all">
                        <i data-lucide="wifi" class="w-7 h-7"></i>
                    </div>
                    <h3 class="text-lg font-bold mb-2">Internet Desa</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Hotspot area publik gratis.</p>
                </div>
                
                <div class="p-8 rounded-xl bg-white dark:bg-dark-surface hover:bg-white dark:hover:bg-dark-surface transition-all duration-300 hover:shadow-card-hover border border-gray-100 dark:border-white/5 hover:border-primary/30 dark:hover:border-primary/30 group reveal" style="transition-delay: 100ms;">
                    <div class="w-14 h-14 rounded-lg bg-red-50 dark:bg-red-900/10 text-primary flex items-center justify-center mb-6 group-hover:bg-primary group-hover:text-white transition-all">
                        <i data-lucide="smartphone" class="w-7 h-7"></i>
                    </div>
                    <h3 class="text-lg font-bold mb-2">Aplikasi Mobile</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Layanan dalam genggaman.</p>
                </div>
                
                <div class="p-8 rounded-xl bg-white dark:bg-dark-surface hover:bg-white dark:hover:bg-dark-surface transition-all duration-300 hover:shadow-card-hover border border-gray-100 dark:border-white/5 hover:border-primary/30 dark:hover:border-primary/30 group reveal" style="transition-delay: 200ms;">
                    <div class="w-14 h-14 rounded-lg bg-red-50 dark:bg-red-900/10 text-primary flex items-center justify-center mb-6 group-hover:bg-primary group-hover:text-white transition-all">
                        <i data-lucide="shopping-bag" class="w-7 h-7"></i>
                    </div>
                    <h3 class="text-lg font-bold mb-2">Pasar Digital</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">E-Commerce untuk UMKM.</p>
                </div>
                
                <div class="p-8 rounded-xl bg-white dark:bg-dark-surface hover:bg-white dark:hover:bg-dark-surface transition-all duration-300 hover:shadow-card-hover border border-gray-100 dark:border-white/5 hover:border-primary/30 dark:hover:border-primary/30 group reveal" style="transition-delay: 300ms;">
                    <div class="w-14 h-14 rounded-lg bg-red-50 dark:bg-red-900/10 text-primary flex items-center justify-center mb-6 group-hover:bg-primary group-hover:text-white transition-all">
                        <i data-lucide="shield-check" class="w-7 h-7"></i>
                    </div>
                    <h3 class="text-lg font-bold mb-2">Keamanan</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Sistem pantau 24 jam.</p>
                </div>
            </div>
        </div>
    </section>

<section class="py-24 bg-white dark:bg-dark-base overflow-hidden">
        <div class="container mx-auto px-8 md:px-12 lg:px-24">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24 items-center">
                <div class="relative reveal">
                    <div class="absolute inset-0 bg-primary translate-x-3 translate-y-3 rounded-2xl"></div>
                    <img src="https://images.unsplash.com/photo-1556157382-97eda2d62296?auto=format&fit=crop&q=80&w=800" alt="Kepala Desa" class="relative rounded-2xl shadow-2xl w-full h-[500px] object-cover grayscale hover:grayscale-0 transition-all duration-500 border-4 border-white dark:border-dark-surface">
                    <div class="absolute bottom-8 left-[-20px] bg-white dark:bg-dark-surface shadow-xl p-6 rounded-lg border-l-4 border-primary max-w-xs">
                        <h4 class="text-xl font-bold text-gray-900 dark:text-white">Bpk. Wijaya Kusuma</h4>
                        <p class="text-primary font-medium text-sm">Kepala Desa Periode 2023-2028</p>
                    </div>
                </div>
                <div class="reveal" style="transition-delay: 200ms;">
                    <span class="text-primary font-bold tracking-widest uppercase text-xs mb-3 block">Dari Meja Kepala Desa</span>
                    <h2 class="text-4xl lg:text-5xl font-extrabold mb-8 leading-tight">Gotong Royong di <br>Era <span class="text-primary underline decoration-4 decoration-primary/30 underline-offset-4">Digital</span></h2>
                    <p class="text-gray-600 dark:text-gray-300 mb-8 text-lg leading-relaxed">
                        "Teknologi hanyalah alat. Jiwa dari desa ini tetaplah kebersamaan. Dengan sistem Desa Digital, kita memangkas birokrasi yang berbelit, transparansi anggaran, dan memudahkan warga mengakses hak-haknya tanpa terkecuali."
                    </p>
                    <div class="flex items-center gap-6">
                         <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Signature_sample.svg/1200px-Signature_sample.svg.png" alt="Signature" class="h-12 opacity-40 dark:invert">
                         <div class="h-10 w-px bg-gray-300 dark:bg-gray-700"></div>
                         <a href="#profil" class="text-primary font-bold hover:underline">Baca Profil Lengkap</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="profil" class="py-24 bg-gray-50 dark:bg-dark-surface relative">
        <div class="container mx-auto px-8 md:px-12 lg:px-24">
            <div class="text-center max-w-3xl mx-auto mb-20 reveal">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">Mengenal Lebih Dekat</h2>
                <div class="h-1 w-20 bg-primary mx-auto rounded-full mb-4"></div>
                <p class="text-gray-500 dark:text-gray-400 text-lg">Harmoni antara tradisi leluhur dan kemajuan teknologi.</p>
            </div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-20">
                <div class="bg-white dark:bg-dark-base border border-gray-100 dark:border-white/5 p-10 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 reveal group">
                    <div class="mb-6 inline-flex p-3 rounded-lg bg-red-50 dark:bg-red-900/20 text-primary group-hover:scale-110 transition-transform">
                        <i data-lucide="book-open" class="w-6 h-6"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">Sejarah</h3>
                    <p class="text-gray-600 dark:text-gray-400 leading-relaxed text-sm">
                        Berdiri sejak tahun 1950, desa ini awalnya merupakan lumbung padi. Kini bertransformasi menjadi pusat inovasi agrikultur digital.
                    </p>
                </div>
                <div class="bg-white dark:bg-dark-base border border-gray-100 dark:border-white/5 p-10 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 reveal group" style="transition-delay: 100ms;">
                     <div class="mb-6 inline-flex p-3 rounded-lg bg-red-50 dark:bg-red-900/20 text-primary group-hover:scale-110 transition-transform">
                        <i data-lucide="target" class="w-6 h-6"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">Visi</h3>
                    <p class="text-gray-600 dark:text-gray-400 leading-relaxed text-sm">
                        Terwujudnya Desa Mandiri yang Sejahtera, Cerdas, dan Berbudaya melalui penguatan ekonomi digital.
                    </p>
                </div>
                <div class="bg-white dark:bg-dark-base border border-gray-100 dark:border-white/5 p-10 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 reveal group" style="transition-delay: 200ms;">
                     <div class="mb-6 inline-flex p-3 rounded-lg bg-red-50 dark:bg-red-900/20 text-primary group-hover:scale-110 transition-transform">
                        <i data-lucide="compass" class="w-6 h-6"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">Misi</h3>
                    <ul class="text-gray-600 dark:text-gray-400 space-y-2 list-disc list-inside text-sm">
                        <li>Digitalisasi pelayanan publik.</li>
                        <li>Pemberdayaan UMKM lokal.</li>
                        <li>Peningkatan infrastruktur IT.</li>
                    </ul>
                </div>
            </div>

<div class="grid grid-cols-2 md:grid-cols-4 gap-8 bg-black dark:bg-black rounded-3xl p-12 text-white relative overflow-hidden reveal border border-gray-800">
                <div class="absolute inset-0 bg-primary/10"></div>
                
                <div class="absolute inset-0 bg-grid opacity-20"></div>
                
                <div class="relative text-center z-10">
                    <div class="text-4xl md:text-5xl font-bold mb-2 text-primary">3.5k</div>
                    <div class="text-sm font-medium tracking-wider uppercase text-gray-400">Penduduk</div>
                </div>
                <div class="relative text-center z-10">
                    <div class="text-4xl md:text-5xl font-bold mb-2 text-primary">450</div>
                    <div class="text-sm font-medium tracking-wider uppercase text-gray-400">Kepala Keluarga</div>
                </div>
                <div class="relative text-center z-10">
                    <div class="text-4xl md:text-5xl font-bold mb-2 text-primary">120</div>
                    <div class="text-sm font-medium tracking-wider uppercase text-gray-400">UMKM Aktif</div>
                </div>
                <div class="relative text-center z-10">
                    <div class="text-4xl md:text-5xl font-bold mb-2 text-primary">99%</div>
                    <div class="text-sm font-medium tracking-wider uppercase text-gray-400">Tercover 4G</div>
                </div>
            </div>
        </div>
    </section>

<section id="layanan" class="py-24 bg-white dark:bg-dark-base">
        <div class="container mx-auto px-8 md:px-12 lg:px-24">
            <div class="flex flex-col md:flex-row justify-between items-end mb-16 reveal">
                <div class="max-w-2xl">
                    <span class="text-primary font-bold tracking-widest uppercase text-xs mb-2 block">E-Government</span>
                    <h2 class="text-3xl md:text-4xl font-bold">Layanan Digital Terpadu</h2>
                </div>
                <a href="#" class="hidden md:flex items-center gap-2 text-primary font-bold hover:gap-4 transition-all group">
                    Katalog Layanan <i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
                </a>
            </div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                
                <div class="group bg-gray-50 dark:bg-dark-surface p-8 rounded-2xl border border-transparent hover:border-primary/20 dark:hover:border-primary/20 hover:bg-white dark:hover:bg-black transition-all duration-300 hover:shadow-card-hover reveal">
                    <div class="w-14 h-14 bg-white dark:bg-white/5 text-primary rounded-xl flex items-center justify-center mb-8 shadow-sm group-hover:bg-primary group-hover:text-white transition-colors">
                        <i data-lucide="file-text" class="w-7 h-7"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Administrasi</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-8 leading-relaxed">Pengurusan surat pengantar, KTP, KK secara online tanpa antri.</p>
                    <a href="#" class="inline-flex items-center text-sm font-bold text-gray-900 dark:text-white group-hover:text-primary transition-colors">Akses Layanan <i data-lucide="chevron-right" class="w-4 h-4 ml-1"></i></a>
                </div>

<div class="group bg-gray-50 dark:bg-dark-surface p-8 rounded-2xl border border-transparent hover:border-primary/20 dark:hover:border-primary/20 hover:bg-white dark:hover:bg-black transition-all duration-300 hover:shadow-card-hover reveal" style="transition-delay: 100ms;">
                    <div class="w-14 h-14 bg-white dark:bg-white/5 text-primary rounded-xl flex items-center justify-center mb-8 shadow-sm group-hover:bg-primary group-hover:text-white transition-colors">
                        <i data-lucide="map" class="w-7 h-7"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Peta GIS</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-8 leading-relaxed">Pemetaan lahan, potensi desa, dan lokasi wisata berbasis satelit.</p>
                    <a href="#" class="inline-flex items-center text-sm font-bold text-gray-900 dark:text-white group-hover:text-primary transition-colors">Akses Layanan <i data-lucide="chevron-right" class="w-4 h-4 ml-1"></i></a>
                </div>

<div class="group bg-gray-50 dark:bg-dark-surface p-8 rounded-2xl border border-transparent hover:border-primary/20 dark:hover:border-primary/20 hover:bg-white dark:hover:bg-black transition-all duration-300 hover:shadow-card-hover reveal" style="transition-delay: 200ms;">
                    <div class="w-14 h-14 bg-white dark:bg-white/5 text-primary rounded-xl flex items-center justify-center mb-8 shadow-sm group-hover:bg-primary group-hover:text-white transition-colors">
                        <i data-lucide="bar-chart-2" class="w-7 h-7"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Transparansi</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-8 leading-relaxed">Info APBDes, realisasi anggaran, dan laporan pembangunan realtime.</p>
                    <a href="#" class="inline-flex items-center text-sm font-bold text-gray-900 dark:text-white group-hover:text-primary transition-colors">Akses Layanan <i data-lucide="chevron-right" class="w-4 h-4 ml-1"></i></a>
                </div>

<div class="group bg-gray-50 dark:bg-dark-surface p-8 rounded-2xl border border-transparent hover:border-primary/20 dark:hover:border-primary/20 hover:bg-white dark:hover:bg-black transition-all duration-300 hover:shadow-card-hover reveal" style="transition-delay: 300ms;">
                    <div class="w-14 h-14 bg-white dark:bg-white/5 text-primary rounded-xl flex items-center justify-center mb-8 shadow-sm group-hover:bg-primary group-hover:text-white transition-colors">
                        <i data-lucide="megaphone" class="w-7 h-7"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Lapor Warga</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-8 leading-relaxed">Saluran pengaduan masyarakat dan aspirasi pembangunan desa.</p>
                    <a href="#" class="inline-flex items-center text-sm font-bold text-gray-900 dark:text-white group-hover:text-primary transition-colors">Akses Layanan <i data-lucide="chevron-right" class="w-4 h-4 ml-1"></i></a>
                </div>
            </div>
        </div>
    </section>

<section id="berita" class="py-24 bg-gray-50 dark:bg-dark-surface border-t border-gray-200 dark:border-white/5">
        <div class="container mx-auto px-8 md:px-12 lg:px-24">
            <div class="flex flex-col lg:flex-row gap-16">
                
                <div class="lg:w-3/4">
                    <div class="flex justify-between items-end mb-12 reveal">
                        <h2 class="text-3xl font-bold border-l-4 border-primary pl-4">Kabar Desa Terkini</h2>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                        
                        <article class="group cursor-pointer reveal">
                            <div class="rounded-xl overflow-hidden mb-6 aspect-video relative shadow-md">
                                <img src="https://images.unsplash.com/photo-1532629345422-7515f3d16bb6?auto=format&fit=crop&q=80&w=800" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" alt="News">
                                <div class="absolute top-4 left-4 bg-primary text-white text-[10px] font-bold px-3 py-1.5 rounded uppercase tracking-wider">Pembangunan</div>
                            </div>
                            <div class="flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400 mb-3">
                                <i data-lucide="calendar" class="w-3 h-3"></i> 10 Oktober 2023
                                <span class="w-1 h-1 bg-gray-400 rounded-full"></span>
                                <span>Admin</span>
                            </div>
                            <h3 class="text-xl font-bold leading-snug group-hover:text-primary transition-colors mb-3">Peresmian Jaringan Internet Fiber Optic di RW 05</h3>
                            <p class="text-sm text-gray-500 dark:text-gray-400 line-clamp-2">Peningkatan infrastruktur digital terus dilakukan demi menunjang aktivitas belajar dan ekonomi warga setempat.</p>
                        </article>
                        
                        
                        <article class="group cursor-pointer reveal" style="transition-delay: 100ms;">
                            <div class="rounded-xl overflow-hidden mb-6 aspect-video relative shadow-md">
                                <img src="https://images.unsplash.com/photo-1605281317010-fe5ffe79ba02?auto=format&fit=crop&q=80&w=800" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" alt="News">
                                <div class="absolute top-4 left-4 bg-black text-white text-[10px] font-bold px-3 py-1.5 rounded uppercase tracking-wider">Ekonomi</div>
                            </div>
                            <div class="flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400 mb-3">
                                <i data-lucide="calendar" class="w-3 h-3"></i> 08 Oktober 2023
                                <span class="w-1 h-1 bg-gray-400 rounded-full"></span>
                                <span>Admin</span>
                            </div>
                            <h3 class="text-xl font-bold leading-snug group-hover:text-primary transition-colors mb-3">Pelatihan Digital Marketing untuk UMKM Desa</h3>
                            <p class="text-sm text-gray-500 dark:text-gray-400 line-clamp-2">Membuka wawasan pelaku usaha mikro mengenai potensi pasar online marketplace.</p>
                        </article>
                    </div>
                </div>

<div class="lg:w-1/4">
                    <h2 class="text-2xl font-bold mb-8 reveal border-l-4 border-gray-800 dark:border-white pl-4">Agenda Kegiatan</h2>
                    <div class="space-y-6">
                        
                        <div class="bg-white dark:bg-dark-base border border-gray-200 dark:border-white/10 p-6 rounded-xl hover:border-primary transition-colors reveal relative overflow-hidden group">
                            <div class="absolute top-0 right-0 w-16 h-16 bg-primary/5 rounded-bl-full -mr-8 -mt-8 transition-all group-hover:bg-primary/10"></div>
                            <div class="flex items-center gap-3 text-primary font-bold mb-3 text-xs uppercase tracking-wider">
                                <i data-lucide="clock" class="w-3 h-3"></i> 15 Nov 2023
                            </div>
                            <h4 class="font-bold mb-2 text-lg">Musyawarah Desa</h4>
                            <p class="text-sm text-gray-500 dark:text-gray-400 mb-3">Pembahasan RKPDes 2024</p>
                            <div class="flex items-center gap-2 text-xs text-gray-400 border-t border-gray-100 dark:border-white/5 pt-3">
                                <i data-lucide="user" class="w-3 h-3"></i> Sekdes
                            </div>
                        </div>

<div class="bg-white dark:bg-dark-base border border-gray-200 dark:border-white/10 p-6 rounded-xl hover:border-primary transition-colors reveal relative overflow-hidden group" style="transition-delay: 100ms;">
                             <div class="absolute top-0 right-0 w-16 h-16 bg-primary/5 rounded-bl-full -mr-8 -mt-8 transition-all group-hover:bg-primary/10"></div>
                            <div class="flex items-center gap-3 text-primary font-bold mb-3 text-xs uppercase tracking-wider">
                                <i data-lucide="clock" class="w-3 h-3"></i> 20 Nov 2023
                            </div>
                            <h4 class="font-bold mb-2 text-lg">Vaksinasi Ternak</h4>
                            <p class="text-sm text-gray-500 dark:text-gray-400 mb-3">Lapangan Desa</p>
                            <div class="flex items-center gap-2 text-xs text-gray-400 border-t border-gray-100 dark:border-white/5 pt-3">
                                <i data-lucide="user" class="w-3 h-3"></i> Dinas Peternakan
                            </div>
                        </div>

<div class="bg-primary text-white p-6 rounded-xl reveal shadow-lg relative overflow-hidden group" style="transition-delay: 200ms;">
                            <div class="absolute -right-4 -bottom-4 text-white/10 rotate-12">
                                <i data-lucide="calendar" class="w-24 h-24"></i>
                            </div>
                            <h4 class="font-bold text-xl mb-2 relative z-10">Lihat Semua Agenda</h4>
                            <p class="text-white/80 text-sm mb-4 relative z-10">Jangan lewatkan kegiatan penting desa bulan ini.</p>
                            <a href="#" class="inline-flex items-center text-sm font-bold bg-white text-primary px-4 py-2 rounded-lg relative z-10 hover:bg-gray-100">Buka Kalender</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="galeri" class="py-24 bg-white dark:bg-dark-base">
        <div class="container mx-auto px-8 md:px-12 lg:px-24">
            <div class="text-center mb-16 reveal">
                 <span class="text-primary font-bold tracking-widest uppercase text-xs mb-2 block">Dokumentasi</span>
                <h2 class="text-3xl font-bold">Potret Kehidupan Desa</h2>
            </div>
            
            <div class="columns-1 md:columns-2 lg:columns-3 gap-8 space-y-8 reveal">
                <div class="break-inside-avoid rounded-xl overflow-hidden shadow-lg group relative">
                    <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10 flex items-center justify-center">
                        <i data-lucide="instagram" class="text-white w-8 h-8"></i>
                    </div>
                    <img src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?auto=format&fit=crop&q=80&w=800" class="w-full h-auto group-hover:scale-110 transition-transform duration-700" alt="Galeri">
                </div>
                <div class="break-inside-avoid rounded-xl overflow-hidden shadow-lg group relative">
                    <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10 flex items-center justify-center">
                        <i data-lucide="instagram" class="text-white w-8 h-8"></i>
                    </div>
                    <img src="https://images.unsplash.com/photo-1472653431158-6364773b2a56?auto=format&fit=crop&q=80&w=800" class="w-full h-auto group-hover:scale-110 transition-transform duration-700" alt="Galeri">
                </div>
                <div class="break-inside-avoid rounded-xl overflow-hidden shadow-lg group relative">
                     <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10 flex items-center justify-center">
                        <i data-lucide="instagram" class="text-white w-8 h-8"></i>
                    </div>
                    <img src="https://images.unsplash.com/photo-1590610994380-6b668d27a6f2?auto=format&fit=crop&q=80&w=800" class="w-full h-auto group-hover:scale-110 transition-transform duration-700" alt="Galeri">
                </div>
                <div class="break-inside-avoid rounded-xl overflow-hidden shadow-lg group relative">
                     <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10 flex items-center justify-center">
                        <i data-lucide="instagram" class="text-white w-8 h-8"></i>
                    </div>
                    <img src="https://images.unsplash.com/photo-1625246333195-78d9c38ad449?auto=format&fit=crop&q=80&w=800" class="w-full h-auto group-hover:scale-110 transition-transform duration-700" alt="Galeri">
                </div>
            </div>
        </div>
    </section>

<footer id="kontak" class="bg-black text-white pt-24 pb-12 border-t border-white/10">
        <div class="container mx-auto px-8 md:px-12 lg:px-24">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-20">
                
                <div>
                    <a href="#" class="flex items-center gap-3 mb-8">
                        <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center text-white">
                            <i data-lucide="activity" class="w-6 h-6"></i>
                        </div>
                        <span class="text-2xl font-bold tracking-tight">Desa<span class="text-primary">Maju</span></span>
                    </a>
                    <p class="text-gray-400 mb-8 leading-relaxed text-sm">
                        Mewujudkan tata kelola desa yang transparan, akuntabel, dan partisipatif melalui inovasi teknologi informasi.
                    </p>
                    <div class="flex gap-4">
                        <a href="#" class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-gray-400 hover:bg-primary hover:text-white transition-all">
                            <i data-lucide="facebook" class="w-5 h-5"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-gray-400 hover:bg-primary hover:text-white transition-all">
                            <i data-lucide="instagram" class="w-5 h-5"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-gray-400 hover:bg-primary hover:text-white transition-all">
                            <i data-lucide="twitter" class="w-5 h-5"></i>
                        </a>
                    </div>
                </div>

<div>
                    <h4 class="text-lg font-bold mb-8 text-white">Hubungi Kami</h4>
                    <ul class="space-y-6">
                        <li class="flex items-start gap-4 text-gray-400 text-sm">
                            <div class="w-8 h-8 rounded bg-white/5 flex items-center justify-center shrink-0 text-primary">
                                <i data-lucide="map-pin" class="w-4 h-4"></i>
                            </div>
                            <span>Jl. Merdeka Raya No. 45,<br>Kec. Digital, Kab. Maju Jaya</span>
                        </li>
                        <li class="flex items-center gap-4 text-gray-400 text-sm">
                             <div class="w-8 h-8 rounded bg-white/5 flex items-center justify-center shrink-0 text-primary">
                                <i data-lucide="phone" class="w-4 h-4"></i>
                            </div>
                            <span>(021) 1234-5678</span>
                        </li>
                        <li class="flex items-center gap-4 text-gray-400 text-sm">
                             <div class="w-8 h-8 rounded bg-white/5 flex items-center justify-center shrink-0 text-primary">
                                <i data-lucide="mail" class="w-4 h-4"></i>
                            </div>
                            <span>admin@desamaju.id</span>
                        </li>
                    </ul>
                </div>

<div>
                    <h4 class="text-lg font-bold mb-8 text-white">Menu Utama</h4>
                    <ul class="space-y-4 text-sm">
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors flex items-center gap-2"><i data-lucide="chevron-right" class="w-3 h-3"></i> Profil Desa</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors flex items-center gap-2"><i data-lucide="chevron-right" class="w-3 h-3"></i> Layanan Mandiri</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors flex items-center gap-2"><i data-lucide="chevron-right" class="w-3 h-3"></i> Transparansi APBDes</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors flex items-center gap-2"><i data-lucide="chevron-right" class="w-3 h-3"></i> Peta Wisata</a></li>
                    </ul>
                </div>

<div>
                    <h4 class="text-lg font-bold mb-8 text-white">Langganan Info</h4>
                    <p class="text-gray-400 mb-6 text-sm">Berita desa terbaru langsung ke inbox Anda.</p>
                    <form class="flex flex-col gap-3">
                        <input type="email" placeholder="Email Anda..." class="px-4 py-3 rounded-lg bg-white/5 border border-white/10 focus:outline-none focus:border-primary text-sm text-white transition-colors">
                        <button type="button" class="px-4 py-3 bg-primary text-white rounded-lg font-bold hover:bg-primary-dark transition-colors text-sm shadow-neon">Daftar Sekarang</button>
                    </form>
                </div>
            </div>

<div class="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
                <p class="text-gray-500 text-sm">© 2023 Pemerintah Desa Maju. Hak Cipta Dilindungi.</p>
                <div class="flex gap-8 text-sm text-gray-500">
                    <a href="#" class="hover:text-primary">Privasi</a>
                    <a href="#" class="hover:text-primary">Ketentuan</a>
                    <a href="#" class="hover:text-primary">Sitemap</a>
                </div>
            </div>
        </div>
    </footer>

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

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

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

if(toggle) toggle.addEventListener('change', handleToggle);
        if(toggleMobile) toggleMobile.addEventListener('change', handleToggle);

// --- NEW SIDEBAR LOGIC ---
        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
        const sidebar = document.getElementById('mobile-sidebar');
        const overlay = document.getElementById('sidebar-overlay');
        const closeSidebarBtn = document.getElementById('close-sidebar-btn');
        const mobileLinks = document.querySelectorAll('.mobile-link');

function openSidebar() {
            // Remove translate-x-full (so it slides in to 0)
            sidebar.classList.remove('translate-x-full');
            
            // Show overlay
            overlay.classList.remove('hidden');
            // Small delay to allow display:block to apply before changing opacity for transition
            setTimeout(() => {
                overlay.classList.remove('opacity-0');
            }, 10);
            
            // Prevent body scrolling
            document.body.style.overflow = 'hidden';
        }

function closeSidebar() {
            // Add translate-x-full (slides out)
            sidebar.classList.add('translate-x-full');
            
            // Hide overlay fade out
            overlay.classList.add('opacity-0');
            
            // Wait for transition to finish before hiding element
            setTimeout(() => {
                overlay.classList.add('hidden');
            }, 300);

// Restore body scrolling
            document.body.style.overflow = 'auto';
        }

// Event Listeners
        mobileMenuBtn.addEventListener('click', openSidebar);
        closeSidebarBtn.addEventListener('click', closeSidebar);
        overlay.addEventListener('click', closeSidebar);

// Close sidebar when a link is clicked
        mobileLinks.forEach(link => {
            link.addEventListener('click', closeSidebar);
        });

// Intersection Observer for Scroll Animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: "0px 0px -50px 0px"
        };

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

// Navbar Scroll Effect
        const navbar = document.getElementById('navbar');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                navbar.classList.add('shadow-md');
                // navbar.classList.replace('py-5', 'py-3'); // Optional resize
            } else {
                navbar.classList.remove('shadow-md');
                // navbar.classList.replace('py-3', 'py-5');
            }
        });
    </script>
</body>
</html>

Related Examples

Animated Coming Soon Page 2
Animated Coming soon Page

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

3.9k
django error
django error

Author:
Omer fils ELENGA

2 months ago

44
gallary
html , css

Author:
Hacker Development

10 months ago

664
Animated Coming Soon Page 1
animated coming soon landing page

Author:
Repal co

1 year ago

846
Hero Section
Home hero section search bar

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

7.8k
Complete Profile Form with Avatar Upload & Social Links
A fully responsive profile setup form built with Tailwind CSS and Alpine.js. Users can upload a profile picture, fill in personal and professional details, add social links, and receive real-time validation feedback. Includes a smooth success message animation after submission, with optional navigation to the profile or dashboard. Perfect for onboarding flows or user account management interfaces.

Author:
wavy kits

4 months ago

276
Minimalist Lading page

Author:
Juan D. Cortorreal

3 months ago

392
Chinese

Author:
Tanvir Hasan Bappy (Tanvir)

8 months ago

429
Basic landing page template

Author:
Anonymous

2 years ago

12k
e-commerce website landing page template with Tailwind CSS.
A clean, responsive e-commerce & blog template built with Tailwind CSS. Features light/dark mode, dynamic featured posts, hero, CTA, and SEO-ready sections.

Author:
Homayoun

2 months ago

537
Registration Form with Validation & Success State
A modern and interactive registration form built using Tailwind CSS and Alpine.js, designed for seamless user onboarding with real-time validation and elegant animations. This component includes client-side form validation, dynamic password visibility toggles, and a success confirmation screen with personalized feedback. It’s fully responsive, dark mode–ready, and styled for modern SaaS or startup platforms. ✨ Key Features 🧠 Real-time input validation for required fields (name, email, password, etc.) 🔒 Show/hide password toggle with animated SVG icons ✅ Success message with user details after submission 💨 Animated transitions using Alpine.js 🌙 Dark mode and light mode compatible 📱 Fully responsive across all screen sizes 🧩 Built with pure Tailwind CSS and Alpine.js (no external libraries) 💡 Perfect for: Registration or sign-up pages SaaS onboarding flows Portfolio or agency login systems Form validation demos or UI component libraries

Author:
wavy kits

4 months ago

290
ChinaEdu
ChinaEdu

Author:
Tanvir Hasan Bappy (Tanvir)

7 months ago

492

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components