Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
```html
<!DOCTYPE html>
<html lang="id" data-theme="light" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO Meta Tags -->
<title>Website Resmi RW 006 Kecamatan Gunung Sindur - Kabupaten Bogor</title>
<meta name="description" content="Portal pelayanan digital resmi RW 006 Gunung Sindur, Bogor. Informasi administrasi, kegiatan warga, berita terbaru, transparansi publik, dan layanan surat pengantar online.">
<meta name="keywords" content="RW 006, Gunung Sindur, Bogor, Website RW, Layanan Digital, Jawa Barat, Portal Warga">
<meta name="author" content="Pemerintah RW 006 Gunung Sindur">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://rw006-gunungsindur.id/">
<meta property="og:title" content="Website Resmi RW 006 Kecamatan Gunung Sindur">
<meta property="og:description" content="Sistem pelayanan digital dan informasi terpadu warga RW 006 Kecamatan Gunung Sindur, Kabupaten Bogor.">
<meta property="og:image" content="https://images.unsplash.com/photo-1570129477492-45c003edd2be?auto=format&fit=crop&w=1200&q=80">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://rw006-gunungsindur.id/">
<meta property="twitter:title" content="Website Resmi RW 006 Kecamatan Gunung Sindur">
<meta property="twitter:description" content="Sistem pelayanan digital dan informasi terpadu warga RW 006 Kecamatan Gunung Sindur, Kabupaten Bogor.">
<meta property="twitter:image" content="https://images.unsplash.com/photo-1570129477492-45c003edd2be?auto=format&fit=crop&w=1200&q=80">
<!-- Canonical -->
<link rel="canonical" href="https://rw006-gunungsindur.id/">
<!-- Google Fonts: Poppins -->
<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=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<!-- Tailwind CSS v4 & DaisyUI via CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
<!-- Tailwind Config Customizations for Government Theme -->
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Poppins', 'sans-serif'],
},
colors: {
primary: '#0EA5E9', // Sky Blue
secondary: '#2563EB', // Blue
accent: '#10B981', // Emerald
'slate-900': '#0f172a',
'slate-700': '#334155',
}
}
},
darkMode: 'class'
}
</script>
<!-- Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<!-- Motion One (for Premium Micro-interactions) -->
<script src="https://cdn.jsdelivr.net/npm/@motionone/dom@10.16.2/dist/motion-one.min.js"></script>
<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest"></script>
<!-- Custom Glassmorphism, Utilities, & Keyframes -->
<style>
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f5f9;
}
.dark ::-webkit-scrollbar-track {
background: #0f172a;
}
::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
.dark ::-webkit-scrollbar-thumb {
background: #334155;
}
::-webkit-scrollbar-thumb:hover {
background: #0ea5e9;
}
/* Glassmorphism Styles */
.glass-nav {
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.dark .glass-nav {
background: rgba(15, 23, 42, 0.8);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.glass-card {
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
}
.dark .glass-card {
background: rgba(30, 41, 59, 0.4);
border: 1px solid rgba(255, 255, 255, 0.03);
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
}
/* Glow Hover Effect */
.hover-glow:hover {
box-shadow: 0 10px 30px -5px rgba(14, 165, 233, 0.3);
transform: translateY(-4px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Floating Abstract Blobs Animation */
@keyframes float-blob {
0%, 100% { transform: translate(0px, 0px) scale(1); }
33% { transform: translate(30px, -50px) scale(1.1); }
66% { transform: translate(-20px, 20px) scale(0.95); }
}
.animate-blob {
animation: float-blob 10s infinite ease-in-out;
}
.animation-delay-2000 {
animation-delay: 2s;
}
.animation-delay-4000 {
animation-delay: 4s;
}
/* Line Clamp utility fallback */
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
<!-- Structured Data / JSON-LD for SEO -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "GovernmentOrganization",
"name": "Rukun Warga 006 Kecamatan Gunung Sindur",
"alternateName": "RW 006 Gunung Sindur",
"description": "Website pelayanan masyarakat dan administrasi resmi Rukun Warga 006, Kecamatan Gunung Sindur, Kabupaten Bogor.",
"url": "https://rw006-gunungsindur.id/",
"address": {
"@type": "PostalAddress",
"addressLocality": "Gunung Sindur",
"addressRegion": "Jawa Barat",
"addressCountry": "ID"
},
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+62-812-3456-7890",
"contactType": "Warga Service"
}
}
</script>
</head>
<body class="bg-slate-50 dark:bg-slate-950 text-slate-700 dark:text-slate-300 antialiased overflow-x-hidden">
<!-- Scroll Progress Bar -->
<div id="scroll-progress" class="fixed top-0 left-0 h-1 bg-gradient-to-r from-primary to-secondary z-[100] w-0 transition-all duration-100"></div>
<!-- Ambient Animated Background Blobs -->
<div class="absolute top-0 left-1/4 w-96 h-96 bg-primary/10 rounded-full blur-3xl animate-blob -z-10 pointer-events-none"></div>
<div class="absolute top-1/3 right-1/4 w-96 h-96 bg-secondary/10 rounded-full blur-3xl animate-blob animation-delay-2000 -z-10 pointer-events-none"></div>
<div class="absolute bottom-1/4 left-10 w-96 h-96 bg-accent/10 rounded-full blur-3xl animate-blob animation-delay-4000 -z-10 pointer-events-none"></div>
<!-- Loading Screen Animation -->
<div id="loader" class="fixed inset-0 bg-white dark:bg-slate-950 z-[999] flex flex-col justify-center items-center transition-opacity duration-500">
<div class="flex flex-col items-center">
<!-- Logo RW with Glow -->
<div class="w-20 h-20 bg-gradient-to-tr from-primary to-secondary rounded-2xl flex items-center justify-center text-white text-3xl font-bold shadow-xl animate-pulse mb-4">
06
</div>
<h2 class="text-xl font-bold text-slate-900 dark:text-white tracking-wider animate__animated animate__fadeInUp">RW 006 GUNUNG SINDUR</h2>
<p class="text-xs text-slate-400 dark:text-slate-500 mt-1 uppercase tracking-widest">Portal Digital Terpadu</p>
<span class="loading loading-ring loading-md text-primary mt-6"></span>
</div>
</div>
<!-- 1. Sticky Navbar -->
<header class="fixed top-0 left-0 w-full z-50 transition-all duration-300">
<nav class="glass-nav mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-4 my-2 rounded-2xl transition-all duration-300 shadow-sm flex items-center justify-between">
<!-- Logo Section -->
<a href="#beranda" class="flex items-center gap-3 group transition-transform duration-300 active:scale-95" aria-label="Beranda RW 006">
<div class="w-11 h-11 bg-gradient-to-tr from-primary to-secondary text-white font-extrabold text-lg flex items-center justify-center rounded-xl shadow-lg shadow-blue-500/20 transform group-hover:rotate-6 transition-all duration-300">
06
</div>
<div class="flex flex-col leading-none">
<span class="font-extrabold text-lg tracking-tight bg-gradient-to-r from-slate-900 to-slate-700 dark:from-white dark:to-slate-300 bg-clip-text text-transparent">RW 006</span>
<span class="text-[10px] font-semibold text-slate-500 dark:text-slate-400 tracking-wider">GUNUNG SINDUR</span>
</div>
</a>
<!-- Desktop Navigation Menu -->
<div class="hidden lg:flex items-center gap-1">
<a href="#beranda" class="btn btn-ghost btn-sm rounded-xl text-slate-700 dark:text-slate-200 hover:text-primary transition-all duration-200">Beranda</a>
<a href="#tentang" class="btn btn-ghost btn-sm rounded-xl text-slate-700 dark:text-slate-200 hover:text-primary transition-all duration-200">Tentang</a>
<a href="#layanan" class="btn btn-ghost btn-sm rounded-xl text-slate-700 dark:text-slate-200 hover:text-primary transition-all duration-200">Layanan</a>
<a href="#berita" class="btn btn-ghost btn-sm rounded-xl text-slate-700 dark:text-slate-200 hover:text-primary transition-all duration-200">Berita</a>
<a href="#galeri" class="btn btn-ghost btn-sm rounded-xl text-slate-700 dark:text-slate-200 hover:text-primary transition-all duration-200">Galeri</a>
<a href="#pengurus" class="btn btn-ghost btn-sm rounded-xl text-slate-700 dark:text-slate-200 hover:text-primary transition-all duration-200">Pengurus</a>
<a href="#kontak" class="btn btn-ghost btn-sm rounded-xl text-slate-700 dark:text-slate-200 hover:text-primary transition-all duration-200">Kontak</a>
</div>
<!-- Action Button Group (Dark mode & Login) -->
<div class="flex items-center gap-3">
<!-- Dark Mode Toggle Button -->
<button id="theme-toggle" class="btn btn-circle btn-ghost btn-sm text-slate-700 dark:text-slate-200" aria-label="Toggle Tema Dark Mode">
<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>
<!-- Dashboard Button -->
<a href="#dashboard-modal" class="btn btn-primary btn-sm rounded-xl text-white px-5 shadow-lg shadow-sky-500/25 hidden sm:flex border-none bg-gradient-to-r from-primary to-secondary hover:opacity-90 hover:scale-105 active:scale-95 transition-all">
Masuk Dashboard
</a>
<!-- Mobile Navigation Menu Toggle -->
<div class="dropdown dropdown-end lg:hidden">
<label tabindex="0" class="btn btn-ghost btn-circle btn-sm text-slate-900 dark:text-white" aria-label="Buka Menu Mobile">
<i data-lucide="menu" class="w-6 h-6"></i>
</label>
<ul tabindex="0" class="dropdown-content mt-3 z-[1] p-3 shadow-2xl bg-white dark:bg-slate-900 rounded-2xl w-56 border border-slate-100 dark:border-slate-800 gap-1 flex flex-col">
<li><a href="#beranda" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm font-medium hover:bg-slate-100 dark:hover:bg-slate-800"><i data-lucide="house" class="w-4 h-4"></i> Beranda</a></li>
<li><a href="#tentang" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm font-medium hover:bg-slate-100 dark:hover:bg-slate-800"><i data-lucide="users" class="w-4 h-4"></i> Tentang</a></li>
<li><a href="#layanan" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm font-medium hover:bg-slate-100 dark:hover:bg-slate-800"><i data-lucide="shield" class="w-4 h-4"></i> Layanan</a></li>
<li><a href="#berita" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm font-medium hover:bg-slate-100 dark:hover:bg-slate-800"><i data-lucide="megaphone" class="w-4 h-4"></i> Berita</a></li>
<li><a href="#galeri" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm font-medium hover:bg-slate-100 dark:hover:bg-slate-800"><i data-lucide="camera" class="w-4 h-4"></i> Galeri</a></li>
<li><a href="#pengurus" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm font-medium hover:bg-slate-100 dark:hover:bg-slate-800"><i data-lucide="building" class="w-4 h-4"></i> Pengurus</a></li>
<li><a href="#kontak" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm font-medium hover:bg-slate-100 dark:hover:bg-slate-800"><i data-lucide="phone" class="w-4 h-4"></i> Kontak</a></li>
<div class="divider my-1"></div>
<li><a href="#dashboard-modal" class="btn btn-primary btn-sm rounded-xl text-white w-full">Dashboard</a></li>
</ul>
</div>
</div>
</nav>
</header>
<!-- 2. Hero Section -->
<section id="beranda" class="relative min-h-screen pt-28 pb-16 flex items-center justify-center overflow-hidden">
<!-- Abstract Tech Pattern Background Overlay -->
<div class="absolute inset-0 bg-[radial-gradient(#e2e8f0_1px,transparent_1px)] dark:bg-[radial-gradient(#1e293b_1px,transparent_1px)] [background-size:16px_16px] opacity-60"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 w-full">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
<!-- Text Content Column -->
<div class="lg:col-span-7 flex flex-col items-center lg:items-start text-center lg:text-left">
<!-- Modern Gov Badge -->
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-card border border-primary/20 text-xs font-semibold text-primary mb-6 animate__animated animate__fadeInDown">
<span class="flex h-2 w-2 relative">
<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-2 w-2 bg-accent"></span>
</span>
E-GOVERNMENT PORTAL RESMI
</div>
<!-- Dynamic Title with Gradient Text & Animated Underline -->
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-slate-900 dark:text-white leading-tight animate__animated animate__fadeInLeft">
Selamat Datang di Website Resmi <br class="hidden sm:inline">
<span class="relative inline-block mt-2">
<span class="bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent">RW 006 Gunung Sindur</span>
<span class="absolute left-0 bottom-1 w-full h-[6px] bg-gradient-to-r from-primary to-accent rounded-full opacity-60"></span>
</span>
</h1>
<p class="mt-6 text-base sm:text-lg text-slate-600 dark:text-slate-400 max-w-xl leading-relaxed animate__animated animate__fadeInLeft animation-delay-500">
Website digital resmi RW 006 Kecamatan Gunung Sindur Kabupaten Bogor sebagai pusat informasi, pelayanan masyarakat, administrasi, kegiatan warga, dan transparansi publik.
</p>
<!-- Buttons Group with Premium Ripple Transition -->
<div class="mt-8 flex flex-col sm:flex-row gap-4 w-full sm:w-auto animate__animated animate__fadeInUp animation-delay-1000">
<a href="#layanan" class="btn btn-primary rounded-xl text-white px-8 h-12 shadow-xl shadow-primary/30 border-none bg-gradient-to-r from-primary to-secondary hover:opacity-95 hover:scale-[1.03] transition-all flex items-center justify-center gap-2 group">
Lihat Layanan
<i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
</a>
<a href="#kontak" class="btn btn-outline rounded-xl px-8 h-12 border-slate-300 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-300 transition-all flex items-center justify-center gap-2">
<i data-lucide="phone" class="w-4 h-4"></i>
Hubungi Kami
</a>
</div>
</div>
<!-- Illustration Column -->
<div class="lg:col-span-5 flex justify-center items-center relative animate__animated animate__zoomIn">
<!-- Ambient Light Blur behind representation -->
<div class="absolute w-72 h-72 bg-gradient-to-tr from-primary/30 to-secondary/30 rounded-full blur-3xl opacity-70"></div>
<!-- Mockup / Illustration of Civic Digital Portal -->
<div class="relative glass-card p-6 rounded-3xl shadow-2xl max-w-md w-full border border-white/20 transform hover:rotate-2 transition-transform duration-500">
<!-- Screen Top Bar decoration -->
<div class="flex items-center justify-between mb-4 pb-3 border-b border-slate-200/50 dark:border-slate-800/50">
<div class="flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-red-400 block"></span>
<span class="w-3 h-3 rounded-full bg-yellow-400 block"></span>
<span class="w-3 h-3 rounded-full bg-green-400 block"></span>
</div>
<span class="text-xs font-semibold tracking-wider text-slate-400 dark:text-slate-500">E-CITIZEN APP</span>
</div>
<div class="space-y-4">
<!-- Mockup Citizen Identity -->
<div class="flex items-center gap-4 bg-slate-100/50 dark:bg-slate-900/50 p-4 rounded-2xl border border-slate-200/20">
<div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center text-primary">
<i data-lucide="users" class="w-6 h-6"></i>
</div>
<div class="flex-1">
<p class="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-widest">Warga Terdaftar</p>
<p class="text-lg font-bold text-slate-900 dark:text-white leading-none mt-1">Layanan Mandiri Warga</p>
</div>
<span class="badge badge-success text-white badge-xs">Aktif</span>
</div>
<!-- Quick Action Card Simulator -->
<div class="bg-gradient-to-r from-secondary to-primary text-white p-5 rounded-2xl shadow-lg relative overflow-hidden">
<div class="absolute -right-6 -bottom-6 w-24 h-24 bg-white/10 rounded-full blur-xl"></div>
<div class="flex justify-between items-start">
<div>
<h3 class="font-bold text-lg">E-Surat Pengantar</h3>
<p class="text-xs opacity-90 mt-1">Pengajuan mandiri online 24/7</p>
</div>
<div class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
<i data-lucide="file-text" class="w-5 h-5"></i>
</div>
</div>
<div class="mt-4 flex items-center justify-between bg-white/15 p-2 rounded-xl text-xs">
<span>Proses Otomatis</span>
<span class="font-bold">Mulai Sekarang</span>
</div>
</div>
<!-- Integration Security Badge -->
<div class="flex items-center justify-center gap-2 text-xs font-medium text-slate-500 dark:text-slate-400">
<i data-lucide="shield" class="w-4 h-4 text-accent"></i>
Koneksi Aman & Terenkripsi SSL Pemerintah
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 3. Statistik Section -->
<section class="py-12 bg-white/60 dark:bg-slate-900/40 relative z-20 border-y border-slate-200/50 dark:border-slate-800/50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Stat Card 1 -->
<div class="glass-card hover-glow p-6 rounded-2xl flex flex-col sm:flex-row items-center gap-4 text-center sm:text-left transition-all duration-300">
<div class="w-14 h-14 rounded-2xl bg-primary/10 text-primary flex items-center justify-center shadow-inner">
<i data-lucide="users" class="w-7 h-7"></i>
</div>
<div>
<p class="text-xs font-semibold uppercase tracking-wider text-slate-400 dark:text-slate-500">Jumlah Penduduk</p>
<div class="flex items-center justify-center sm:justify-start gap-1 mt-1">
<span class="counter text-3xl font-extrabold text-slate-900 dark:text-white" data-target="1452">0</span>
<span class="text-primary font-bold text-lg">+</span>
</div>
<p class="text-[10px] text-slate-400 mt-0.5">Jiwa Terintegrasi</p>
</div>
</div>
<!-- Stat Card 2 -->
<div class="glass-card hover-glow p-6 rounded-2xl flex flex-col sm:flex-row items-center gap-4 text-center sm:text-left transition-all duration-300">
<div class="w-14 h-14 rounded-2xl bg-secondary/10 text-secondary flex items-center justify-center shadow-inner">
<i data-lucide="home" class="w-7 h-7"></i>
</div>
<div>
<p class="text-xs font-semibold uppercase tracking-wider text-slate-400 dark:text-slate-500">Jumlah KK</p>
<div class="flex items-center justify-center sm:justify-start gap-1 mt-1">
<span class="counter text-3xl font-extrabold text-slate-900 dark:text-white" data-target="418">0</span>
<span class="text-secondary font-bold text-lg">+</span>
</div>
<p class="text-[10px] text-slate-400 mt-0.5">Kepala Keluarga</p>
</div>
</div>
<!-- Stat Card 3 -->
<div class="glass-card hover-glow p-6 rounded-2xl flex flex-col sm:flex-row items-center gap-4 text-center sm:text-left transition-all duration-300">
<div class="w-14 h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center shadow-inner">
<i data-lucide="map-pinned" class="w-7 h-7"></i>
</div>
<div>
<p class="text-xs font-semibold uppercase tracking-wider text-slate-400 dark:text-slate-500">RT Aktif</p>
<div class="flex items-center justify-center sm:justify-start gap-1 mt-1">
<span class="counter text-3xl font-extrabold text-slate-900 dark:text-white" data-target="8">0</span>
<span class="text-accent font-bold text-lg">Unit</span>
</div>
<p class="text-[10px] text-slate-400 mt-0.5">Rukun Tetangga</p>
</div>
</div>
<!-- Stat Card 4 -->
<div class="glass-card hover-glow p-6 rounded-2xl flex flex-col sm:flex-row items-center gap-4 text-center sm:text-left transition-all duration-300">
<div class="w-14 h-14 rounded-2xl bg-amber-500/10 text-amber-500 flex items-center justify-center shadow-inner">
<i data-lucide="calendar" class="w-7 h-7"></i>
</div>
<div>
<p class="text-xs font-semibold uppercase tracking-wider text-slate-400 dark:text-slate-500">Kegiatan Tahun Ini</p>
<div class="flex items-center justify-center sm:justify-start gap-1 mt-1">
<span class="counter text-3xl font-extrabold text-slate-900 dark:text-white" data-target="32">0</span>
<span class="text-amber-500 font-bold text-lg">+</span>
</div>
<p class="text-[10px] text-slate-400 mt-0.5">Sosial & Keagamaan</p>
</div>
</div>
</div>
</div>
</section>
<!-- 4. Tentang RW Section -->
<section id="tentang" class="py-24 relative overflow-hidden">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
<!-- Left Column: Premium Photo Presentation -->
<div class="lg:col-span-5 relative group animate-reveal">
<div class="absolute -top-4 -left-4 w-72 h-72 bg-gradient-to-tr from-primary/20 to-accent/20 rounded-3xl blur-2xl -z-10"></div>
<div class="relative rounded-3xl overflow-hidden shadow-2xl border-4 border-white dark:border-slate-900 transition-transform duration-500 group-hover:scale-[1.02]">
<!-- Kantor RW Representation Image -->
<img loading="lazy" src="https://images.unsplash.com/photo-1577495508048-b635879837f1?auto=format&fit=crop&w=800&q=80" alt="Lingkungan Kantor RW 006 Gunung Sindur" class="w-full h-[400px] object-cover filter brightness-95">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent flex flex-col justify-end p-6">
<span class="badge badge-primary text-white font-semibold mb-2">Gunung Sindur, Bogor</span>
<h4 class="text-white text-lg font-bold">Kawasan Harmoni, Asri & Digital</h4>
<p class="text-white/70 text-xs mt-1">Representasi tata kelola lingkungan modern RW 006.</p>
</div>
</div>
</div>
<!-- Right Column: Visi Misi & Accordion -->
<div class="lg:col-span-7 flex flex-col items-start animate-reveal">
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-slate-100 dark:bg-slate-900 text-slate-600 dark:text-slate-400 text-xs font-semibold mb-4">
<i data-lucide="building" class="w-4 h-4 text-primary"></i>
PROFIL WILAYAH
</div>
<h2 class="text-3xl sm:text-4xl font-extrabold text-slate-900 dark:text-white leading-tight">
Membangun Lingkungan Yang <span class="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Mandiri, Aman, & Sejahtera</span>
</h2>
<p class="mt-4 text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
Rukun Warga (RW) 006 Kecamatan Gunung Sindur senantiasa berkomitmen menghadirkan tata kelola administrasi publik yang profesional, cepat, transparan, serta mengedepankan aspek kebersamaan, toleransi, dan digitalisasi layanan warga.
</p>
<!-- Accordion Visi Misi Tujuan (DaisyUI) -->
<div class="w-full mt-8 join join-vertical border border-slate-200/50 dark:border-slate-800/50 rounded-2xl bg-white dark:bg-slate-900/50">
<!-- Visi -->
<div class="collapse collapse-arrow join-item border-b border-slate-200/50 dark:border-slate-800/50">
<input type="radio" name="tentang-accordion" checked="checked" />
<div class="collapse-title text-base font-bold text-slate-900 dark:text-white flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-primary/10 text-primary flex items-center justify-center">
<i data-lucide="eye" class="w-4 h-4"></i>
</div>
Visi RW 006
</div>
<div class="collapse-content text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
<p>Terwujudnya lingkungan RW 006 Kecamatan Gunung Sindur yang unggul, agamis, harmonis, berbasis digital, mandiri secara sosial-ekonomi, serta terdepan dalam pelayanan publik yang modern dan transparan.</p>
</div>
</div>
<!-- Misi -->
<div class="collapse collapse-arrow join-item border-b border-slate-200/50 dark:border-slate-800/50">
<input type="radio" name="tentang-accordion" />
<div class="collapse-title text-base font-bold text-slate-900 dark:text-white flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-secondary/10 text-secondary flex items-center justify-center">
<i data-lucide="shield" class="w-4 h-4"></i>
</div>
Misi RW 006
</div>
<div class="collapse-content text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
<ul class="list-decimal list-inside space-y-2">
<li>Meningkatkan kualitas pelayanan administrasi warga berbasis sistem digital modern.</li>
<li>Mewujudkan sistem keamanan terpadu lingkungan 24 jam dengan partisipasi aktif warga.</li>
<li>Menggagas kegiatan sosial, keagamaan, dan kepemudaan secara inklusif dan harmonis.</li>
<li>Meningkatkan kepedulian lingkungan melalui program pengelolaan sampah mandiri dan penghijauan.</li>
</ul>
</div>
</div>
<!-- Tujuan -->
<div class="collapse collapse-arrow join-item">
<input type="radio" name="tentang-accordion" />
<div class="collapse-title text-base font-bold text-slate-900 dark:text-white flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-accent/10 text-accent flex items-center justify-center">
<i data-lucide="target" class="w-4 h-4"></i>
</div>
Tujuan Strategis
</div>
<div class="collapse-content text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
<p>Menciptakan keselarasan hidup bermasyarakat, mengoptimalkan pembangunan infrastruktur tingkat lokal secara gotong-royong, serta membuka ruang partisipasi demokrasi warga yang sehat dan konstruktif.</p>
</div>
</div>
</div>
<a href="#layanan" class="btn btn-primary btn-sm rounded-xl text-white mt-8 px-6 bg-gradient-to-r from-primary to-secondary border-none hover:scale-105 transition-all">Selengkapnya</a>
</div>
</div>
</div>
</section>
<!-- 5. Layanan Section (Grid 6 Cards) -->
<section id="layanan" class="py-24 bg-slate-100/50 dark:bg-slate-900/20 relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="text-center max-w-3xl mx-auto mb-16 animate-reveal">
<span class="badge badge-primary text-white font-semibold mb-3 px-4 py-2 text-xs">PORTAL LAYANAN MODERN</span>
<h2 class="text-3xl sm:text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight">
Layanan Digital Terpadu Warga
</h2>
<p class="mt-4 text-slate-600 dark:text-slate-400 text-sm sm:text-base">
Layanan administrasi dan kedaruratan yang dapat Anda akses secara cepat dari mana saja dan kapan saja.
</p>
</div>
<!-- Grid 6 Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Card 1: Surat Pengantar -->
<div class="glass-card p-8 rounded-3xl hover-glow transition-all duration-300 relative group overflow-hidden animate-reveal">
<div class="absolute -right-6 -bottom-6 w-20 h-20 bg-primary/5 rounded-full group-hover:scale-150 transition-all duration-500"></div>
<div class="w-14 h-14 rounded-2xl bg-primary/10 text-primary flex items-center justify-center mb-6">
<i data-lucide="file-text" class="w-7 h-7"></i>
</div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">Surat Pengantar</h3>
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-6">
Pengajuan pembuatan surat pengantar RT/RW secara mandiri untuk kebutuhan dokumen kependudukan.
</p>
<button onclick="openLayananModal('Surat Pengantar')" class="btn btn-ghost btn-sm rounded-xl text-primary hover:bg-primary hover:text-white px-4 transition-all flex items-center gap-2 group/btn">
Mulai Pengajuan
<i data-lucide="arrow-right" class="w-4 h-4 group-hover/btn:translate-x-1 transition-transform"></i>
</button>
</div>
<!-- Card 2: Administrasi Penduduk -->
<div class="glass-card p-8 rounded-3xl hover-glow transition-all duration-300 relative group overflow-hidden animate-reveal">
<div class="absolute -right-6 -bottom-6 w-20 h-20 bg-secondary/5 rounded-full group-hover:scale-150 transition-all duration-500"></div>
<div class="w-14 h-14 rounded-2xl bg-secondary/10 text-secondary flex items-center justify-center mb-6">
<i data-lucide="users" class="w-7 h-7"></i>
</div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">Administrasi Penduduk</h3>
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-6">
Perubahan data KK, laporan kepindahan warga masuk/keluar, dan pendaftaran anggota keluarga baru.
</p>
<button onclick="openLayananModal('Administrasi Penduduk')" class="btn btn-ghost btn-sm rounded-xl text-secondary hover:bg-secondary hover:text-white px-4 transition-all flex items-center gap-2 group/btn">
Urus Data
<i data-lucide="arrow-right" class="w-4 h-4 group-hover/btn:translate-x-1 transition-transform"></i>
</button>
</div>
<!-- Card 3: Pengaduan Warga -->
<div class="glass-card p-8 rounded-3xl hover-glow transition-all duration-300 relative group overflow-hidden animate-reveal">
<div class="absolute -right-6 -bottom-6 w-20 h-20 bg-red-500/5 rounded-full group-hover:scale-150 transition-all duration-500"></div>
<div class="w-14 h-14 rounded-2xl bg-red-500/10 text-red-500 flex items-center justify-center mb-6">
<i data-lucide="megaphone" class="w-7 h-7"></i>
</div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">Pengaduan Warga</h3>
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-6">
Sistem pengaduan masalah kebersihan, ketertiban umum, kerusakan fasilitas sosial, dan pelayanan.
</p>
<button onclick="openLayananModal('Pengaduan Warga')" class="btn btn-ghost btn-sm rounded-xl text-red-500 hover:bg-red-500 hover:text-white px-4 transition-all flex items-center gap-2 group/btn">
Laporkan Masalah
<i data-lucide="arrow-right" class="w-4 h-4 group-hover/btn:translate-x-1 transition-transform"></i>
</button>
</div>
<!-- Card 4: Informasi Bantuan -->
<div class="glass-card p-8 rounded-3xl hover-glow transition-all duration-300 relative group overflow-hidden animate-reveal">
<div class="absolute -right-6 -bottom-6 w-20 h-20 bg-accent/5 rounded-full group-hover:scale-150 transition-all duration-500"></div>
<div class="w-14 h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center mb-6">
<i data-lucide="shield" class="w-7 h-7"></i>
</div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">Informasi Bansos</h3>
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-6">
Transparansi dan verifikasi data calon penerima bantuan sosial pemerintah daerah maupun nasional.
</p>
<button onclick="openLayananModal('Informasi Bantuan')" class="btn btn-ghost btn-sm rounded-xl text-accent hover:bg-accent hover:text-white px-4 transition-all flex items-center gap-2 group/btn">
Cek Penerima
<i data-lucide="arrow-right" class="w-4 h-4 group-hover/btn:translate-x-1 transition-transform"></i>
</button>
</div>
<!-- Card 5: Kegiatan RW -->
<div class="glass-card p-8 rounded-3xl hover-glow transition-all duration-300 relative group overflow-hidden animate-reveal">
<div class="absolute -right-6 -bottom-6 w-20 h-20 bg-amber-500/5 rounded-full group-hover:scale-150 transition-all duration-500"></div>
<div class="w-14 h-14 rounded-2xl bg-amber-500/10 text-amber-500 flex items-center justify-center mb-6">
<i data-lucide="calendar" class="w-7 h-7"></i>
</div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">Kegiatan RW</h3>
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-6">
Informasi partisipasi gotong royong, posyandu bulanan, senam bersama, dan acara kepemudaan Karang Taruna.
</p>
<button onclick="openLayananModal('Kegiatan RW')" class="btn btn-ghost btn-sm rounded-xl text-amber-500 hover:bg-amber-500 hover:text-white px-4 transition-all flex items-center gap-2 group/btn">
Lihat Jadwal
<i data-lucide="arrow-right" class="w-4 h-4 group-hover/btn:translate-x-1 transition-transform"></i>
</button>
</div>
<!-- Card 6: Keamanan Lingkungan -->
<div class="glass-card p-8 rounded-3xl hover-glow transition-all duration-300 relative group overflow-hidden animate-reveal">
<div class="absolute -right-6 -bottom-6 w-20 h-20 bg-indigo-500/5 rounded-full group-hover:scale-150 transition-all duration-500"></div>
<div class="w-14 h-14 rounded-2xl bg-indigo-500/10 text-indigo-500 flex items-center justify-center mb-6">
<i data-lucide="map-pinned" class="w-7 h-7"></i>
</div>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">Keamanan Terpadu</h3>
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-6">
Layanan posko keamanan darurat 24 jam, koordinasi babinsa, serta siskamling lingkungan teratur.
</p>
<button onclick="openLayananModal('Keamanan Lingkungan')" class="btn btn-ghost btn-sm rounded-xl text-indigo-500 hover:bg-indigo-500 hover:text-white px-4 transition-all flex items-center gap-2 group/btn">
Hubungi Posko
<i data-lucide="arrow-right" class="w-4 h-4 group-hover/btn:translate-x-1 transition-transform"></i>
</button>
</div>
</div>
</div>
</section>
<!-- 6. Berita Terbaru Section -->
<section id="berita" class="py-24 relative overflow-hidden">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="flex flex-col sm:flex-row sm:items-end justify-between mb-16 animate-reveal">
<div class="max-w-2xl">
<span class="badge badge-accent text-white font-semibold mb-3 px-4 py-2 text-xs">PAPAN INFORMASI</span>
<h2 class="text-3xl sm:text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight">
Berita & Pengumuman Terbaru
</h2>
<p class="mt-4 text-slate-600 dark:text-slate-400 text-sm sm:text-base">
Pantau perkembangan terkini, kebijakan pemerintah desa, dan kesepakatan mufakat warga RW 006.
</p>
</div>
<a href="#seluruh-berita" class="btn btn-outline rounded-xl mt-6 sm:mt-0 border-slate-300 dark:border-slate-700 text-slate-700 dark:text-slate-300">
Lihat Semua Berita
</a>
</div>
<!-- Berita Cards Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Berita Card 1 -->
<article class="glass-card rounded-3xl overflow-hidden hover-glow transition-all duration-300 flex flex-col h-full animate-reveal">
<div class="relative overflow-hidden h-56">
<img loading="lazy" src="https://images.unsplash.com/photo-1541872703-74c5e44368f9?auto=format&fit=crop&w=800&q=80" alt="Kegiatan Kerja Bakti Massal" class="w-full h-full object-cover transform hover:scale-105 transition-transform duration-500">
<span class="absolute top-4 left-4 badge bg-primary text-white font-semibold border-none">Lingkungan</span>
</div>
<div class="p-6 flex flex-col flex-1">
<time class="text-xs text-slate-400 dark:text-slate-500 flex items-center gap-2 mb-3">
<i data-lucide="calendar" class="w-4 h-4"></i>
25 Juni 2026
</time>
<h3 class="text-xl font-bold text-slate-900 dark:text-white leading-snug mb-3">
Kerja Bakti Massal Penyambutan Musim Hujan di Lingkungan RW 006
</h3>
<p class="text-sm text-slate-600 dark:text-slate-400 line-clamp-2 mb-6">
Warga kompak membersihkan seluruh sistem drainase dan normalisasi parit guna mencegah banjir serta genangan nyamuk demam berdarah.
</p>
<div class="mt-auto">
<button onclick="readNews('Kerja Bakti Massal Penyambutan Musim Hujan di Lingkungan RW 006', 'Warga kompak membersihkan seluruh sistem drainase dan normalisasi parit guna mencegah banjir serta genangan nyamuk demam berdarah di lingkungan RW 006. Kerja bakti ini diikuti oleh RT 01 sampai RT 08 dengan antusiasme yang tinggi. Selain menjaga kebersihan, kegiatan ini juga mempererat silaturahmi antar warga.')" class="text-primary font-bold text-sm hover:underline flex items-center gap-2">
Baca Selengkapnya
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</button>
</div>
</div>
</article>
<!-- Berita Card 2 -->
<article class="glass-card rounded-3xl overflow-hidden hover-glow transition-all duration-300 flex flex-col h-full animate-reveal">
<div class="relative overflow-hidden h-56">
<img loading="lazy" src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?auto=format&fit=crop&w=800&q=80" alt="Rapat Musyawarah Rencana Kerja RW" class="w-full h-full object-cover transform hover:scale-105 transition-transform duration-500">
<span class="absolute top-4 left-4 badge bg-secondary text-white font-semibold border-none">Musyawarah</span>
</div>
<div class="p-6 flex flex-col flex-1">
<time class="text-xs text-slate-400 dark:text-slate-500 flex items-center gap-2 mb-3">
<i data-lucide="calendar" class="w-4 h-4"></i>
18 Juni 2026
</time>
<h3 class="text-xl font-bold text-slate-900 dark:text-white leading-snug mb-3">
Penyusunan Rencana Kerja Anggaran RW 006 Untuk Infrastruktur Jalan
</h3>
<p class="text-sm text-slate-600 dark:text-slate-400 line-clamp-2 mb-6">
Pertemuan resmi pengurus RW dengan para ketua RT menghasilkan mufakat perbaikan fasilitas jalan utama menggunakan paving block premium.
</p>
<div class="mt-auto">
<button onclick="readNews('Penyusunan Rencana Kerja Anggaran RW 006 Untuk Infrastruktur Jalan', 'Pertemuan resmi pengurus RW dengan para ketua RT menghasilkan mufakat perbaikan fasilitas jalan utama menggunakan paving block premium. Program ini akan didanai oleh dana alokasi kelurahan dan swadaya masyarakat secara transparan. Rencana pengerjaan akan dimulai pada awal bulan depan.')" class="text-secondary font-bold text-sm hover:underline flex items-center gap-2">
Baca Selengkapnya
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</button>
</div>
</div>
</article>
<!-- Berita Card 3 -->
<article class="glass-card rounded-3xl overflow-hidden hover-glow transition-all duration-300 flex flex-col h-full animate-reveal">
<div class="relative overflow-hidden h-56">
<img loading="lazy" src="https://images.unsplash.com/photo-1505373877841-8d25f7d46678?auto=format&fit=crop&w=800&q=80" alt="Sosialisasi Layanan Digital" class="w-full h-full object-cover transform hover:scale-105 transition-transform duration-500">
<span class="absolute top-4 left-4 badge bg-accent text-white font-semibold border-none">Teknologi</span>
</div>
<div class="p-6 flex flex-col flex-1">
<time class="text-xs text-slate-400 dark:text-slate-500 flex items-center gap-2 mb-3">
<i data-lucide="calendar" class="w-4 h-4"></i>
10 Juni 2026
</time>
<h3 class="text-xl font-bold text-slate-900 dark:text-white leading-snug mb-3">
Launching Portal Website Resmi & Sosialisasi Aplikasi E-Siskamling
</h3>
<p class="text-sm text-slate-600 dark:text-slate-400 line-clamp-2 mb-6">
Guna mempercepat pelayanan warga, RW 006 resmi merilis aplikasi e-citizen untuk transparansi aduan publik di wilayah Gunung Sindur.
</p>
<div class="mt-auto">
<button onclick="readNews('Launching Portal Website Resmi & Sosialisasi Aplikasi E-Siskamling', 'Guna mempercepat pelayanan warga, RW 006 resmi merilis aplikasi e-citizen untuk transparansi aduan publik di wilayah Gunung Sindur. Melalui portal ini, warga dapat membuat pengaduan secara real-time dan memonitor status penyelesaiannya secara langsung.')" class="text-accent font-bold text-sm hover:underline flex items-center gap-2">
Baca Selengkapnya
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</button>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- 7. Agenda Section -->
<section id="agenda" class="py-24 bg-slate-100/50 dark:bg-slate-900/20 relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="text-center max-w-3xl mx-auto mb-16 animate-reveal">
<span class="badge badge-primary text-white font-semibold mb-3 px-4 py-2 text-xs">JADWAL & AGENDA</span>
<h2 class="text-3xl sm:text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight">
Upcoming Events / Agenda RW
</h2>
<p class="mt-4 text-slate-600 dark:text-slate-400 text-sm sm:text-base">
Jangan lewatkan kegiatan sosial, rapat berkala, dan layanan kesehatan berkala di wilayah RW 006.
</p>
</div>
<!-- Modern Timeline Integration -->
<div class="relative border-l border-slate-300 dark:border-slate-800 max-w-4xl mx-auto pl-6 sm:pl-10 space-y-12">
<!-- Timeline Item 1 -->
<div class="relative group animate-reveal">
<div class="absolute -left-[35px] sm:-left-[51px] top-0 w-6 h-6 rounded-full bg-primary border-4 border-white dark:border-slate-950 flex items-center justify-center transition-all duration-300 group-hover:scale-125 shadow-md"></div>
<div class="glass-card p-6 sm:p-8 rounded-3xl hover-glow transition-all">
<span class="badge bg-primary/10 text-primary border-none font-bold text-xs mb-3">05 Juli 2026</span>
<h3 class="text-xl font-bold text-slate-900 dark:text-white">Pos Pelayanan Terpadu (Posyandu) Kenanga 06</h3>
<p class="text-sm text-slate-600 dark:text-slate-400 mt-2 leading-relaxed">
Pemeriksaan imunisasi balita secara gratis, pemberian makanan tambahan penunjang gizi (PMT), serta sosialisasi deteksi stunting oleh dinas puskesmas setempat.
</p>
<div class="flex flex-wrap items-center gap-4 mt-4 text-xs font-semibold text-slate-500">
<span class="flex items-center gap-1.5"><i data-lucide="clock" class="w-4 h-4"></i> 08.00 - 12.00 WIB</span>
<span class="flex items-center gap-1.5"><i data-lucide="map-pinned" class="w-4 h-4"></i> Balai Posyandu RW 006</span>
</div>
</div>
</div>
<!-- Timeline Item 2 -->
<div class="relative group animate-reveal">
<div class="absolute -left-[35px] sm:-left-[51px] top-0 w-6 h-6 rounded-full bg-secondary border-4 border-white dark:border-slate-950 flex items-center justify-center transition-all duration-300 group-hover:scale-125 shadow-md"></div>
<div class="glass-card p-6 sm:p-8 rounded-3xl hover-glow transition-all">
<span class="badge bg-secondary/10 text-secondary border-none font-bold text-xs mb-3">12 Juli 2026</span>
<h3 class="text-xl font-bold text-slate-900 dark:text-white">Pertemuan Rembug Warga Bulanan</h3>
<p class="text-sm text-slate-600 dark:text-slate-400 mt-2 leading-relaxed">
Membahas laporan bulanan keuangan kas, evaluasi efektivitas sistem keamanan pos ronda, serta usulan program pembagian bibit tanaman pangan.
</p>
<div class="flex flex-wrap items-center gap-4 mt-4 text-xs font-semibold text-slate-500">
<span class="flex items-center gap-1.5"><i data-lucide="clock" class="w-4 h-4"></i> 19.30 WIB - Selesai</span>
<span class="flex items-center gap-1.5"><i data-lucide="map-pinned" class="w-4 h-4"></i> Rumah Kepala RW 006</span>
</div>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="relative group animate-reveal">
<div class="absolute -left-[35px] sm:-left-[51px] top-0 w-6 h-6 rounded-full bg-accent border-4 border-white dark:border-slate-950 flex items-center justify-center transition-all duration-300 group-hover:scale-125 shadow-md"></div>
<div class="glass-card p-6 sm:p-8 rounded-3xl hover-glow transition-all">
<span class="badge bg-accent/10 text-accent border-none font-bold text-xs mb-3">17 Agustus 2026</span>
<h3 class="text-xl font-bold text-slate-900 dark:text-white">Peringatan HUT Kemerdekaan Republik Indonesia ke-81</h3>
<p class="text-sm text-slate-600 dark:text-slate-400 mt-2 leading-relaxed">
Penyelenggaraan berbagai lomba khas kemerdekaan untuk anak-anak, ibu-ibu, dan bapak-bapak, dilanjutkan dengan acara panggung hiburan rakyat di malam puncak.
</p>
<div class="flex flex-wrap items-center gap-4 mt-4 text-xs font-semibold text-slate-500">
<span class="flex items-center gap-1.5"><i data-lucide="clock" class="w-4 h-4"></i> Seharian Penuh</span>
<span class="flex items-center gap-1.5"><i data-lucide="map-pinned" class="w-4 h-4"></i> Lapangan Olahraga RW 006</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 8. Galeri Section (Masonry & Lightbox Support) -->
<section id="galeri" class="py-24 relative overflow-hidden">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="text-center max-w-3xl mx-auto mb-16 animate-reveal">
<span class="badge badge-accent text-white font-semibold mb-3 px-4 py-2 text-xs">PORTFOLIO WILAYAH</span>
<h2 class="text-3xl sm:text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight">
Dokumentasi Galeri Warga
</h2>
<p class="mt-4 text-slate-600 dark:text-slate-400 text-sm sm:text-base">
Kilasan aktivitas sosial kemasyarakatan, pembangunan infrastruktur, dan suasana asri wilayah RW 006.
</p>
</div>
<!-- Masonry Grid Layout -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Gallery Item 1 -->
<div onclick="openLightbox('https://images.unsplash.com/photo-1541872703-74c5e44368f9?auto=format&fit=crop&w=1200&q=80', 'Kerja Bakti Lingkungan RW 006')" class="group relative rounded-3xl overflow-hidden cursor-pointer shadow-lg animate-reveal aspect-video sm:aspect-square">
<img loading="lazy" src="https://images.unsplash.com/photo-1541872703-74c5e44368f9?auto=format&fit=crop&w=600&q=80" alt="Kerja Bakti Lingkungan RW 006" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
<span class="text-xs font-bold text-primary uppercase tracking-wider mb-1">Sosial</span>
<h4 class="text-white font-bold text-lg">Kerja Bakti Bersama</h4>
<p class="text-white/70 text-xs mt-1">Saling bergotong royong membersihkan lingkungan.</p>
</div>
</div>
<!-- Gallery Item 2 -->
<div onclick="openLightbox('https://images.unsplash.com/photo-1491438590914-bc09fcaaf77a?auto=format&fit=crop&w=1200&q=80', 'Rapat Pertemuan Warga')" class="group relative rounded-3xl overflow-hidden cursor-pointer shadow-lg animate-reveal aspect-video sm:aspect-square">
<img loading="lazy" src="https://images.unsplash.com/photo-1491438590914-bc09fcaaf77a?auto=format&fit=crop&w=600&q=80" alt="Rapat Pertemuan Warga" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
<span class="text-xs font-bold text-secondary uppercase tracking-wider mb-1">Mufakat</span>
<h4 class="text-white font-bold text-lg">Musyawarah Warga</h4>
<p class="text-white/70 text-xs mt-1">Pengambilan keputusan bersama untuk kemajuan RW.</p>
</div>
</div>
<!-- Gallery Item 3 -->
<div onclick="openLightbox('https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?auto=format&fit=crop&w=1200&q=80', 'Pelatihan Karang Taruna')" class="group relative rounded-3xl overflow-hidden cursor-pointer shadow-lg animate-reveal aspect-video sm:aspect-square">
<img loading="lazy" src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?auto=format&fit=crop&w=600&q=80" alt="Pelatihan Karang Taruna" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
<span class="text-xs font-bold text-accent uppercase tracking-wider mb-1">Kreativitas</span>
<h4 class="text-white font-bold text-lg">Pelatihan Karang Taruna</h4>
<p class="text-white/70 text-xs mt-1">Membina generasi muda kreatif yang mandiri.</p>
</div>
</div>
<!-- Gallery Item 4 -->
<div onclick="openLightbox('https://images.unsplash.com/photo-1529156069898-49953e39b3ac?auto=format&fit=crop&w=1200&q=80', 'Kegiatan Porseni Olahraga')" class="group relative rounded-3xl overflow-hidden cursor-pointer shadow-lg animate-reveal aspect-video sm:aspect-square">
<img loading="lazy" src="https://images.unsplash.com/photo-1529156069898-49953e39b3ac?auto=format&fit=crop&w=600&q=80" alt="Kegiatan Porseni Olahraga" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
<span class="text-xs font-bold text-amber-500 uppercase tracking-wider mb-1">Olahraga</span>
<h4 class="text-white font-bold text-lg">Pertandingan Persahabatan</h4>
<p class="text-white/70 text-xs mt-1">Meningkatkan sportivitas dan kesehatan jasmani.</p>
</div>
</div>
<!-- Gallery Item 5 -->
<div onclick="openLightbox('https://images.unsplash.com/photo-1509099836639-18ba1795216d?auto=format&fit=crop&w=1200&q=80', 'Penyaluran Bantuan Sosial')" class="group relative rounded-3xl overflow-hidden cursor-pointer shadow-lg animate-reveal aspect-video sm:aspect-square">
<img loading="lazy" src="https://images.unsplash.com/photo-1509099836639-18ba1795216d?auto=format&fit=crop&w=600&q=80" alt="Penyaluran Bantuan Sosial" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
<span class="text-xs font-bold text-red-500 uppercase tracking-wider mb-1">Sosial</span>
<h4 class="text-white font-bold text-lg">Penyaluran Bansos Amanah</h4>
<p class="text-white/70 text-xs mt-1">Pendistribusian logistik bantuan sosial warga yang berhak.</p>
</div>
</div>
<!-- Gallery Item 6 -->
<div onclick="openLightbox('https://images.unsplash.com/photo-1511556532299-8f662fc26c06?auto=format&fit=crop&w=1200&q=80', 'Fasilitas Taman Bermain')" class="group relative rounded-3xl overflow-hidden cursor-pointer shadow-lg animate-reveal aspect-video sm:aspect-square">
<img loading="lazy" src="https://images.unsplash.com/photo-1511556532299-8f662fc26c06?auto=format&fit=crop&w=600&q=80" alt="Fasilitas Taman Bermain" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
<span class="text-xs font-bold text-indigo-500 uppercase tracking-wider mb-1">Infrastruktur</span>
<h4 class="text-white font-bold text-lg">Pojok Bermain Warga</h4>
<p class="text-white/70 text-xs mt-1">Area rekreasi hijau yang ramah anak dan asri.</p>
</div>
</div>
</div>
</div>
</section>
<!-- 9. Pengurus RW Section -->
<section id="pengurus" class="py-24 bg-slate-100/50 dark:bg-slate-900/20 relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="text-center max-w-3xl mx-auto mb-16 animate-reveal">
<span class="badge badge-primary text-white font-semibold mb-3 px-4 py-2 text-xs">STRUKTUR ORGANISASI</span>
<h2 class="text-3xl sm:text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight">
Aparatur Pengurus RW 006
</h2>
<p class="mt-4 text-slate-600 dark:text-slate-400 text-sm sm:text-base">
Tim pelaksana amanah masyarakat yang berdedikasi melayani sepenuh hati dengan transparansi kerja.
</p>
</div>
<!-- Pengurus Grid Cards -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Pengurus 1 (Ketua RW) -->
<div class="glass-card rounded-3xl overflow-hidden hover-glow transition-all duration-300 flex flex-col text-center group animate-reveal">
<div class="relative overflow-hidden h-72">
<img loading="lazy" src="https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=400&q=80" alt="H. Ahmad Saefudin - Ketua RW 006" class="w-full h-full object-cover object-top transform group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<a href="https://wa.me/6281234567890" target="_blank" class="btn btn-primary rounded-xl text-white flex items-center gap-2">
<i data-lucide="phone" class="w-4 h-4"></i> WhatsApp
</a>
</div>
</div>
<div class="p-6">
<h3 class="font-extrabold text-lg text-slate-900 dark:text-white">H. Ahmad Saefudin</h3>
<p class="text-xs font-semibold text-primary uppercase tracking-wider mt-1">Ketua RW 006</p>
<p class="text-[11px] text-slate-400 dark:text-slate-500 mt-2">Menjabat periode aktif sejak tahun 2024 - Sekarang.</p>
</div>
</div>
<!-- Pengurus 2 (Sekretaris) -->
<div class="glass-card rounded-3xl overflow-hidden hover-glow transition-all duration-300 flex flex-col text-center group animate-reveal">
<div class="relative overflow-hidden h-72">
<img loading="lazy" src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=400&q=80" alt="Ibu Siti Aminah - Sekretaris RW 006" class="w-full h-full object-cover object-top transform group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<a href="https://wa.me/6281234567891" target="_blank" class="btn btn-primary rounded-xl text-white flex items-center gap-2">
<i data-lucide="phone" class="w-4 h-4"></i> WhatsApp
</a>
</div>
</div>
<div class="p-6">
<h3 class="font-extrabold text-lg text-slate-900 dark:text-white">Ibu Siti Aminah, S.E.</h3>
<p class="text-xs font-semibold text-secondary uppercase tracking-wider mt-1">Sekretaris RW 006</p>
<p class="text-[11px] text-slate-400 dark:text-slate-500 mt-2">Mengatur pengelolaan administrasi, persuratan, dan portal warga.</p>
</div>
</div>
<!-- Pengurus 3 (Bendahara) -->
<div class="glass-card rounded-3xl overflow-hidden hover-glow transition-all duration-300 flex flex-col text-center group animate-reveal">
<div class="relative overflow-hidden h-72">
<img loading="lazy" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=400&q=80" alt="Bapak Budi Santoso - Bendahara RW" class="w-full h-full object-cover object-top transform group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<a href="https://wa.me/6281234567892" target="_blank" class="btn btn-primary rounded-xl text-white flex items-center gap-2">
<i data-lucide="phone" class="w-4 h-4"></i> WhatsApp
</a>
</div>
</div>
<div class="p-6">
<h3 class="font-extrabold text-lg text-slate-900 dark:text-white">Bapak Budi Santoso</h3>
<p class="text-xs font-semibold text-accent uppercase tracking-wider mt-1">Bendahara RW 006</p>
<p class="text-[11px] text-slate-400 dark:text-slate-500 mt-2">Bertanggung jawab atas sirkulasi dana kas, bantuan, dan pembangunan.</p>
</div>
</div>
<!-- Pengurus 4 (Ketua Karang Taruna) -->
<div class="glass-card rounded-3xl overflow-hidden hover-glow transition-all duration-300 flex flex-col text-center group animate-reveal">
<div class="relative overflow-hidden h-72">
<img loading="lazy" src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?auto=format&fit=crop&w=400&q=80" alt="Reza Wijaya - Ketua Karang Taruna" class="w-full h-full object-cover object-top transform group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
<a href="https://wa.me/6281234567893" target="_blank" class="btn btn-primary rounded-xl text-white flex items-center gap-2">
<i data-lucide="phone" class="w-4 h-4"></i> WhatsApp
</a>
</div>
</div>
<div class="p-6">
<h3 class="font-extrabold text-lg text-slate-900 dark:text-white">Reza Wijaya</h3>
<p class="text-xs font-semibold text-amber-500 uppercase tracking-wider mt-1">Ketua Karang Taruna</p>
<p class="text-[11px] text-slate-400 dark:text-slate-500 mt-2">Mengoordinasi aktivitas kreativitas pemuda & kepedulian sosial.</p>
</div>
</div>
</div>
</div>
</section>
<!-- 10. Lokasi & Peta Section -->
<section id="kontak" class="py-24 relative overflow-hidden">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
<!-- Left: Address & Contacts Details -->
<div class="lg:col-span-5 flex flex-col items-start animate-reveal">
<span class="badge badge-accent text-white font-semibold mb-3 px-4 py-2 text-xs">PETA & LOKASI</span>
<h2 class="text-3xl sm:text-4xl font-extrabold text-slate-900 dark:text-white tracking-tight">
Hubungi Kami & Kunjungi Sekretariat
</h2>
<p class="mt-4 text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
Kantor pelayanan sekretariat RW 006 terbuka untuk pengaduan fisik, penyerahan berkas, atau musyawarah langsung. Silakan hubungi kontak resmi kami.
</p>
<div class="mt-8 space-y-6 w-full">
<!-- Item 1 Address -->
<div class="flex gap-4 items-start">
<div class="w-11 h-11 rounded-xl bg-primary/10 text-primary flex items-center justify-center shrink-0 shadow-inner">
<i data-lucide="map-pinned" class="w-5 h-5"></i>
</div>
<div>
<h4 class="font-bold text-slate-900 dark:text-white text-sm">Alamat Kantor Sekretariat</h4>
<p class="text-xs text-slate-600 dark:text-slate-400 mt-1">
Kompleks Perumahan Gunung Sindur Lestari, Blok B6 No. 12, RT 02/RW 006, Kecamatan Gunung Sindur, Kabupaten Bogor, Jawa Barat, 16340.
</p>
</div>
</div>
<!-- Item 2 Phone -->
<div class="flex gap-4 items-start">
<div class="w-11 h-11 rounded-xl bg-secondary/10 text-secondary flex items-center justify-center shrink-0 shadow-inner">
<i data-lucide="phone" class="w-5 h-5"></i>
</div>
<div>
<h4 class="font-bold text-slate-900 dark:text-white text-sm">Telepon & WhatsApp</h4>
<p class="text-xs text-slate-600 dark:text-slate-400 mt-1">
+62 812-3456-7890 (H. Ahmad Saefudin)
</p>
</div>
</div>
<!-- Item 3 Email -->
<div class="flex gap-4 items-start">
<div class="w-11 h-11 rounded-xl bg-accent/10 text-accent flex items-center justify-center shrink-0 shadow-inner">
<i data-lucide="mail" class="w-5 h-5"></i>
</div>
<div>
<h4 class="font-bold text-slate-900 dark:text-white text-sm">Surat Elektronik (Email)</h4>
<p class="text-xs text-slate-600 dark:text-slate-400 mt-1">
sekretariat@rw006-gunungsindur.id
</p>
</div>
</div>
<!-- Item 4 Clock -->
<div class="flex gap-4 items-start">
<div class="w-11 h-11 rounded-xl bg-amber-500/10 text-amber-500 flex items-center justify-center shrink-0 shadow-inner">
<i data-lucide="clock" class="w-5 h-5"></i>
</div>
<div>
<h4 class="font-bold text-slate-900 dark:text-white text-sm">Jam Operasional Pelayanan Fisik</h4>
<p class="text-xs text-slate-600 dark:text-slate-400 mt-1">
Senin - Sabtu: 08.00 - 16.00 WIB (Minggu Libur)
</p>
</div>
</div>
</div>
</div>
<!-- Right: Google Maps Integration (Embed) -->
<div class="lg:col-span-7 animate-reveal">
<div class="w-full rounded-3xl overflow-hidden shadow-2xl border-4 border-white dark:border-slate-900 h-[350px] sm:h-[450px] relative">
<!-- Google Maps Embed untuk Gunung Sindur, Bogor -->
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15860.12341235671!2d106.66699252304689!3d-6.411123456789123!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69e46a788e00ab%3A0xa676b70da4bdcbf8!2sGunung%20Sindur%2C%20Bogor%20Regency%2C%20West%20Java!5e0!3m2!1sid!2sid!4v1700000000000!5m2!1sid!2sid"
class="w-full h-full border-0 absolute inset-0"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
title="Peta Lokasi Gunung Sindur"
aria-label="Peta lokasi Gunung Sindur">
</iframe>
</div>
</div>
</div>
</div>
</section>
<!-- 11. CTA (Call To Action) Section -->
<section class="py-20 relative overflow-hidden">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="bg-gradient-to-r from-secondary via-primary to-accent p-8 sm:p-16 rounded-[40px] shadow-3xl text-center relative overflow-hidden animate-reveal">
<!-- Abstract Circle Overlay Decor -->
<div class="absolute top-0 right-0 w-80 h-80 bg-white/10 rounded-full blur-2xl -z-10"></div>
<div class="absolute bottom-0 left-0 w-60 h-60 bg-black/10 rounded-full blur-2xl -z-10"></div>
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white leading-tight max-w-4xl mx-auto">
Mari Bersama Membangun Lingkungan RW 006 yang Lebih Maju, Aman, dan Digital
</h2>
<p class="text-white/80 mt-6 max-w-2xl mx-auto text-sm sm:text-base leading-relaxed">
Sinergi warga menghasilkan perubahan nyata. Daftarkan diri Anda pada sistem, atau sampaikan saran dan keluhan konstruktif Anda secara online.
</p>
<div class="mt-10 flex flex-wrap gap-4 justify-center">
<a href="#kontak" class="btn btn-white bg-white hover:bg-slate-100 text-secondary font-bold px-8 h-12 rounded-xl shadow-xl transition-all border-none">
Hubungi Pengurus RW
</a>
<button onclick="openLayananModal('Aduan / Saran')" class="btn btn-outline border-white text-white hover:bg-white hover:text-primary font-bold px-8 h-12 rounded-xl transition-all">
Kirim Saran Warga
</button>
</div>
</div>
</div>
</section>
<!-- 12. Footer Section -->
<footer class="bg-slate-900 text-slate-400 py-16 border-t border-slate-800 relative z-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-12">
<!-- Brand Profile -->
<div class="lg:col-span-4 flex flex-col items-start">
<a href="#beranda" class="flex items-center gap-3 mb-6" aria-label="Beranda">
<div class="w-12 h-12 bg-gradient-to-tr from-primary to-secondary text-white font-extrabold text-xl flex items-center justify-center rounded-2xl shadow-lg shadow-blue-500/20">
06
</div>
<div class="flex flex-col leading-none">
<span class="font-extrabold text-xl tracking-tight text-white">RW 006</span>
<span class="text-[10px] font-semibold text-slate-500 tracking-wider">GUNUNG SINDUR</span>
</div>
</a>
<p class="text-sm leading-relaxed mb-6">
Sistem portal pelayanan publik digital resmi rukun warga 006 Kecamatan Gunung Sindur, Kabupaten Bogor, Provinsi Jawa Barat. Berkomitmen mewujudkan wilayah mandiri yang asri, aman, dan transparan.
</p>
<!-- Social Medias -->
<div class="flex gap-4">
<a href="#" class="w-10 h-10 rounded-xl bg-slate-800 text-white flex items-center justify-center hover:bg-primary hover:scale-105 transition-all" aria-label="Facebook">
<i data-lucide="facebook" class="w-5 h-5"></i>
</a>
<a href="#" class="w-10 h-10 rounded-xl bg-slate-800 text-white flex items-center justify-center hover:bg-primary hover:scale-105 transition-all" aria-label="Instagram">
<i data-lucide="instagram" class="w-5 h-5"></i>
</a>
<a href="#" class="w-10 h-10 rounded-xl bg-slate-800 text-white flex items-center justify-center hover:bg-primary hover:scale-105 transition-all" aria-label="Twitter">
<i data-lucide="twitter" class="w-5 h-5"></i>
</a>
<a href="#" class="w-10 h-10 rounded-xl bg-slate-800 text-white flex items-center justify-center hover:bg-primary hover:scale-105 transition-all" aria-label="Youtube">
<i data-lucide="youtube" class="w-5 h-5"></i>
</a>
</div>
</div>
<!-- Quick Links -->
<div class="lg:col-span-2">
<h4 class="text-white font-bold tracking-wider text-sm uppercase mb-6">Navigasi Utama</h4>
<ul class="space-y-3 text-sm">
<li><a href="#beranda" class="hover:text-primary transition-all flex items-center gap-1.5"><i data-lucide="chevron-right" class="w-4 h-4"></i> Beranda</a></li>
<li><a href="#tentang" class="hover:text-primary transition-all flex items-center gap-1.5"><i data-lucide="chevron-right" class="w-4 h-4"></i> Tentang RW</a></li>
<li><a href="#layanan" class="hover:text-primary transition-all flex items-center gap-1.5"><i data-lucide="chevron-right" class="w-4 h-4"></i> Portal Layanan</a></li>
<li><a href="#berita" class="hover:text-primary transition-all flex items-center gap-1.5"><i data-lucide="chevron-right" class="w-4 h-4"></i> Berita Terkini</a></li>
<li><a href="#agenda" class="hover:text-primary transition-all flex items-center gap-1.5"><i data-lucide="chevron-right" class="w-4 h-4"></i> Jadwal Agenda</a></li>
</ul>
</div>
<!-- Quick Links 2 -->
<div class="lg:col-span-2">
<h4 class="text-white font-bold tracking-wider text-sm uppercase mb-6">Tautan Penting</h4>
<ul class="space-y-3 text-sm">
<li><a href="#galeri" class="hover:text-primary transition-all flex items-center gap-1.5"><i data-lucide="chevron-right" class="w-4 h-4"></i> Galeri Dokumentasi</a></li>
<li><a href="#pengurus" class="hover:text-primary transition-all flex items-center gap-1.5"><i data-lucide="chevron-right" class="w-4 h-4"></i> Aparatur Pengurus</a></li>
<li><a href="#kontak" class="hover:text-primary transition-all flex items-center gap-1.5"><i data-lucide="chevron-right" class="w-4 h-4"></i> Kontak Sekretariat</a></li>
<li><a href="#dashboard-modal" class="hover:text-primary transition-all flex items-center gap-1.5"><i data-lucide="chevron-right" class="w-4 h-4"></i> Login Dashboard</a></li>
</ul>
</div>
<!-- Sekretariat Contacts -->
<div class="lg:col-span-4">
<h4 class="text-white font-bold tracking-wider text-sm uppercase mb-6">Sekretariat RW 006</h4>
<p class="text-sm leading-relaxed mb-4">
Perumahan Gunung Sindur Lestari, Blok B6 No. 12, RT 02/RW 006, Gunung Sindur, Kabupaten Bogor, Jawa Barat 16340.
</p>
<ul class="space-y-2 text-sm">
<li class="flex items-center gap-2"><i data-lucide="phone" class="w-4 h-4 text-primary"></i> +62 812-3456-7890</li>
<li class="flex items-center gap-2"><i data-lucide="mail" class="w-4 h-4 text-primary"></i> sekretariat@rw006-gunungsindur.id</li>
<li class="flex items-center gap-2"><i data-lucide="clock" class="w-4 h-4 text-primary"></i> Senin-Sabtu, 08.00-16.00 WIB</li>
</ul>
</div>
</div>
<!-- Copyright Divider -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-12 pt-8 border-t border-slate-800 text-center flex flex-col sm:flex-row justify-between items-center gap-4 text-xs">
<p>© 2026 Pemerintah Rukun Warga 006 Gunung Sindur. All Rights Reserved.</p>
<div class="flex gap-4">
<a href="#" class="hover:underline">Kebijakan Privasi</a>
<a href="#" class="hover:underline">Syarat & Ketentuan</a>
<a href="#" class="hover:underline">Sitemap</a>
</div>
</div>
</footer>
<!-- Extra Floating Widget 1: Back To Top Button -->
<button id="back-to-top" class="fixed bottom-6 right-6 z-40 btn btn-circle btn-primary text-white shadow-2xl opacity-0 translate-y-10 transition-all duration-300 hidden border-none bg-gradient-to-tr from-primary to-secondary" aria-label="Kembali ke atas">
<i data-lucide="arrow-up" class="w-5 h-5"></i>
</button>
<!-- Extra Floating Widget 2: Floating WhatsApp CS -->
<a href="https://wa.me/6281234567890?text=Halo%20Admin%20RW%20006%20Gunung%20Sindur,%20saya%20ingin%20bertanya..." target="_blank" class="fixed bottom-20 right-6 z-40 w-12 h-12 rounded-full bg-emerald-500 text-white flex items-center justify-center shadow-2xl hover:scale-110 active:scale-95 transition-all duration-300" aria-label="Hubungi WhatsApp RW 006">
<i data-lucide="message-circle" class="w-6 h-6"></i>
<span class="absolute right-0 -top-1 flex h-3 w-3">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
</span>
</a>
<!-- MODALS SYSTEM (Using standard DaisyUI modal pattern) -->
<!-- Modal 1: Portal Layanan Form -->
<div id="layanan-modal" class="modal modal-bottom sm:modal-middle" role="dialog">
<div class="modal-box bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 rounded-3xl">
<h3 id="modal-layanan-title" class="font-extrabold text-2xl text-slate-900 dark:text-white">Formulir Pengajuan</h3>
<p class="text-xs text-slate-400 mt-1">Isi formulir berikut dengan data yang valid untuk memulai proses verifikasi.</p>
<form id="layanan-form" onsubmit="submitFormLayanan(event)" class="mt-6 space-y-4">
<!-- Input Jenis Layanan Hidden -->
<input type="hidden" id="input-layanan-jenis">
<div class="form-control">
<label class="label"><span class="label-text font-semibold text-slate-700 dark:text-slate-300">Nama Lengkap Sesuai KTP</span></label>
<input type="text" placeholder="Masukkan nama lengkap Anda" class="input input-bordered w-full rounded-xl" required />
</div>
<div class="form-control">
<label class="label"><span class="label-text font-semibold text-slate-700 dark:text-slate-300">Nomor Induk Kependudukan (NIK)</span></label>
<input type="number" placeholder="16 Digit Nomor NIK" class="input input-bordered w-full rounded-xl" required />
</div>
<div class="form-control">
<label class="label"><span class="label-text font-semibold text-slate-700 dark:text-slate-300">Nomor WhatsApp Aktif</span></label>
<input type="tel" placeholder="Contoh: 08123456789" class="input input-bordered w-full rounded-xl" required />
</div>
<div class="form-control">
<label class="label"><span class="label-text font-semibold text-slate-700 dark:text-slate-300">Detail / Keterangan Keperluan</span></label>
<textarea placeholder="Tulis rincian atau keperluan pengajuan surat secara jelas" class="textarea textarea-bordered h-24 rounded-xl" required></textarea>
</div>
<div class="modal-action gap-3">
<button type="button" onclick="closeLayananModal()" class="btn btn-ghost rounded-xl">Batal</button>
<button type="submit" class="btn btn-primary rounded-xl text-white">Kirim Berkas</button>
</div>
</form>
</div>
<div class="modal-backdrop" onclick="closeLayananModal()">Close</div>
</div>
<!-- Modal 2: News Reader Lightbox Modal -->
<div id="news-modal" class="modal modal-bottom sm:modal-middle" role="dialog">
<div class="modal-box bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 rounded-3xl max-w-2xl">
<h3 id="news-title" class="font-extrabold text-2xl text-slate-900 dark:text-white leading-snug">Berita</h3>
<p class="text-xs text-primary font-bold mt-2">Diterbitkan oleh Admin RW 006</p>
<div class="divider my-4"></div>
<p id="news-content" class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"></p>
<div class="modal-action">
<button onclick="closeNews()" class="btn btn-primary rounded-xl text-white px-6">Tutup Berita</button>
</div>
</div>
<div class="modal-backdrop" onclick="closeNews()">Close</div>
</div>
<!-- Modal 3: Gallery Lightbox Image Viewer -->
<div id="lightbox-modal" class="modal modal-bottom sm:modal-middle" role="dialog">
<div class="modal-box bg-black/90 p-3 max-w-4xl rounded-3xl relative overflow-hidden flex flex-col items-center">
<button onclick="closeLightboxModal()" class="btn btn-circle btn-ghost btn-sm text-white absolute top-4 right-4 z-50 bg-black/50 hover:bg-black">
<i data-lucide="x" class="w-5 h-5"></i>
</button>
<img id="lightbox-image" src="" alt="" class="w-full h-auto max-h-[75vh] object-contain rounded-2xl">
<p id="lightbox-caption" class="text-white font-bold text-center mt-3 text-sm"></p>
</div>
<div class="modal-backdrop bg-black/80" onclick="closeLightboxModal()">Close</div>
</div>
<!-- Modal 4: Dashboard Mockup Gate (Login) -->
<div id="dashboard-modal" class="modal" role="dialog">
<div class="modal-box bg-white dark:bg-slate-900 rounded-3xl max-w-md">
<div class="text-center mb-6">
<div class="w-16 h-16 bg-gradient-to-tr from-primary to-secondary rounded-2xl flex items-center justify-center text-white text-2xl font-bold mx-auto mb-4">
06
</div>
<h3 class="font-extrabold text-2xl text-slate-900 dark:text-white">Portal Dashboard Warga</h3>
<p class="text-xs text-slate-400 mt-1">Akses eksklusif untuk mengecek status administrasi, iuran bulanan, dan jadwal siskamling.</p>
</div>
<form onsubmit="handleLogin(event)" class="space-y-4">
<div class="form-control">
<label class="label"><span class="label-text font-semibold text-slate-700 dark:text-slate-300">Nomor KTP (NIK) / Email</span></label>
<input type="text" placeholder="Masukkan NIK terdaftar" class="input input-bordered rounded-xl" required />
</div>
<div class="form-control">
<label class="label"><span class="label-text font-semibold text-slate-700 dark:text-slate-300">Kata Sandi</span></label>
<input type="password" placeholder="••••••••" class="input input-bordered rounded-xl" required />
</div>
<div class="flex justify-between items-center text-xs mt-2">
<label class="flex items-center gap-1 cursor-pointer">
<input type="checkbox" class="checkbox checkbox-xs checkbox-primary" />
<span>Ingat Saya</span>
</label>
<a href="#" class="text-primary hover:underline">Lupa Kata Sandi?</a>
</div>
<button type="submit" class="btn btn-primary w-full rounded-xl text-white mt-4 bg-gradient-to-r from-primary to-secondary border-none shadow-lg">Masuk Akun</button>
</form>
<div class="divider text-xs text-slate-400">Atau</div>
<button onclick="registerWarga()" class="btn btn-outline w-full rounded-xl text-slate-700 dark:text-slate-200 border-slate-300 dark:border-slate-700">Daftarkan Akun Warga Baru</button>
<div class="modal-action">
<a href="#" class="btn btn-ghost btn-sm rounded-xl">Kembali</a>
</div>
</div>
<div class="modal-backdrop" onclick="window.location.hash = '#'">Close</div>
</div>
<!-- Toast Notification System -->
<div id="toast-container" class="toast toast-end toast-bottom z-[100] hidden">
<div class="alert alert-success text-white rounded-2xl shadow-2xl flex items-center gap-3">
<i data-lucide="circle-check" class="w-5 h-5"></i>
<span id="toast-message">Proses berhasil dilakukan.</span>
</div>
</div>
<!-- Custom Alert System (No Window Alert) -->
<div id="custom-alert" class="modal" role="dialog">
<div class="modal-box bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 rounded-3xl text-center">
<div class="w-14 h-14 bg-emerald-500/10 text-emerald-500 rounded-full flex items-center justify-center mx-auto mb-4">
<i data-lucide="circle-check" class="w-8 h-8"></i>
</div>
<h3 id="alert-title" class="font-bold text-xl text-slate-900 dark:text-white">Notifikasi</h3>
<p id="alert-body" class="text-sm text-slate-600 dark:text-slate-400 mt-2 leading-relaxed">Pesan pemberitahuan sistem.</p>
<div class="modal-action justify-center">
<button onclick="closeAlert()" class="btn btn-primary rounded-xl text-white px-8">Selesai</button>
</div>
</div>
</div>
<!-- Main Application Script (With Motion One & Premium Interaction Logic) -->
<script>
// Initialize Lucide Icons on DOM ready
document.addEventListener("DOMContentLoaded", function() {
lucide.createIcons();
// Hide Loader Screen smoothly after page assets load
setTimeout(() => {
const loader = document.getElementById('loader');
loader.classList.add('opacity-0');
setTimeout(() => {
loader.classList.add('hidden');
}, 500);
}, 1000);
// Scroll Progress Bar Logic
window.addEventListener('scroll', () => {
const winScroll = document.documentElement.scrollTop || document.body.scrollTop;
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrolled = (winScroll / height) * 100;
document.getElementById('scroll-progress').style.width = scrolled + '%';
// Sticky Navbar Blurring Logic & Back to Top Appearance
const navbar = document.querySelector('header');
const backToTopBtn = document.getElementById('back-to-top');
if (winScroll > 50) {
navbar.classList.add('pt-2');
navbar.querySelector('nav').classList.add('shadow-md');
backToTopBtn.classList.remove('hidden', 'opacity-0', 'translate-y-10');
backToTopBtn.classList.add('opacity-100', 'translate-y-0');
} else {
navbar.classList.remove('pt-2');
navbar.querySelector('nav').classList.remove('shadow-md');
backToTopBtn.classList.add('opacity-0', 'translate-y-10');
setTimeout(() => {
if (winScroll <= 50) backToTopBtn.classList.add('hidden');
}, 300);
}
});
// Back to top click handler
document.getElementById('back-to-top').addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// Initialize Theme / Dark Mode toggle
const htmlEl = document.documentElement;
const savedTheme = localStorage.getItem('theme') || 'light';
htmlEl.setAttribute('data-theme', savedTheme);
if (savedTheme === 'dark') {
htmlEl.classList.add('dark');
}
document.getElementById('theme-toggle').addEventListener('click', () => {
const currentTheme = htmlEl.getAttribute('data-theme');
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
htmlEl.setAttribute('data-theme', newTheme);
if (newTheme === 'dark') {
htmlEl.classList.add('dark');
} else {
htmlEl.classList.remove('dark');
}
localStorage.setItem('theme', newTheme);
});
// Number Counter Animation on view (IntersectionObserver)
const stats = document.querySelectorAll('.counter');
const statObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const el = entry.target;
const target = parseInt(el.getAttribute('data-target'));
let count = 0;
const speed = target / 50; // Speed adjustment based on target value
const updateCount = () => {
if (count < target) {
count += Math.ceil(speed);
if (count > target) count = target;
el.innerText = count;
setTimeout(updateCount, 25);
} else {
el.innerText = target;
}
};
updateCount();
observer.unobserve(el);
}
});
}, { threshold: 0.5 });
stats.forEach(stat => statObserver.observe(stat));
// Reveal elements on scroll using Motion One & IntersectionObserver
const revealElements = document.querySelectorAll('.animate-reveal');
const revealObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Apply Motion One animated fadeIn and translateY
motion.animate(
entry.target,
{ opacity: [0, 1], y: [40, 0] },
{ duration: 0.8, easing: "cubic-bezier(0.16, 1, 0.3, 1)" }
);
revealObserver.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
revealElements.forEach(el => {
// Set initial opacity to prevent flash before animation
el.style.opacity = '0';
revealObserver.observe(el);
});
// Micro-interactions with Motion One on interactive Glass Cards
document.querySelectorAll('.glass-card').forEach(card => {
card.addEventListener('mouseenter', () => {
motion.animate(card, { scale: 1.015, rotate: 0.5 }, { duration: 0.3, easing: "ease-out" });
});
card.addEventListener('mouseleave', () => {
motion.animate(card, { scale: 1, rotate: 0 }, { duration: 0.3, easing: "ease-in" });
});
});
});
// Custom Toast Notification trigger
function triggerToast(message) {
const toastContainer = document.getElementById('toast-container');
const toastMessage = document.getElementById('toast-message');
toastMessage.innerText = message;
toastContainer.classList.remove('hidden');
toastContainer.classList.add('flex');
setTimeout(() => {
toastContainer.classList.add('hidden');
toastContainer.classList.remove('flex');
}, 4000);
}
// Custom Alert Modal trigger (replacement for forbidden alerts)
function triggerAlert(title, body) {
document.getElementById('alert-title').innerText = title;
document.getElementById('alert-body').innerText = body;
document.getElementById('custom-alert').classList.add('modal-open');
}
function closeAlert() {
document.getElementById('custom-alert').classList.remove('modal-open');
}
// Layanan Modal Handlers
function openLayananModal(jenisLayanan) {
document.getElementById('modal-layanan-title').innerText = `Pengajuan ${jenisLayanan}`;
document.getElementById('input-layanan-jenis').value = jenisLayanan;
document.getElementById('layanan-modal').classList.add('modal-open');
}
function closeLayananModal() {
document.getElementById('layanan-modal').classList.remove('modal-open');
document.getElementById('layanan-form').reset();
}
function submitFormLayanan(e) {
e.preventDefault();
const jenis = document.getElementById('input-layanan-jenis').value;
closeLayananModal();
triggerAlert(
"Pengajuan Berhasil Terkirim!",
`Data pengajuan ${jenis} Anda telah diterima oleh sistem administrasi RW 006. Kami akan memproses berkas Anda dalam waktu maksimal 1x24 jam dan mengonfirmasikannya melalui kontak WhatsApp Anda.`
);
}
// News Modal Handlers
function readNews(title, text) {
document.getElementById('news-title').innerText = title;
document.getElementById('news-content').innerText = text;
document.getElementById('news-modal').classList.add('modal-open');
}
function closeNews() {
document.getElementById('news-modal').classList.remove('modal-open');
}
// Lightbox Modal Handlers
function openLightbox(imageUrl, title) {
const img = document.getElementById('lightbox-image');
img.src = imageUrl;
document.getElementById('lightbox-caption').innerText = title;
document.getElementById('lightbox-modal').classList.add('modal-open');
}
function closeLightboxModal() {
document.getElementById('lightbox-modal').classList.remove('modal-open');
}
// Dashboard Mockup Handlers
function handleLogin(e) {
e.preventDefault();
// Reset hash close modal
window.location.hash = '#';
triggerAlert(
"Selamat Datang Warga RW 006!",
"Anda berhasil masuk ke portal warga digital terpadu. Selamat menikmati fasilitas iuran online, lapor siskamling, dan akses dokumen eksklusif Anda."
);
}
function registerWarga() {
window.location.hash = '#';
triggerAlert(
"Layanan Pendaftaran",
"Silakan hubungi Sekretaris RW Ibu Siti Aminah, S.E. di kantor sekretariat fisik untuk melakukan verifikasi data NIK primer sebelum Anda dapat mendaftar akun online mandiri."
);
}
</script>
</body>
</html>
```
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
13
Requests
7
Domains
657KB
Transfer Size
4034KB
Content Size
1,602.0ms
Dom Content Loaded
116.0ms
First Paint
1,802.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...