Selamat datang di repositori resmi Landing Page Kantor Kementerian Agama Kota Depok. Website ini dirancang sebagai portal informasi publik yang responsif, modern, dan mudah diakses untuk memberikan pelayanan terbaik bagi masyarakat Kota Depok.
Kunjungi website secara langsung melalui tautan berikut: 👉 https://kemenagdepok.github.io/landing/
- Fitur Utama
- Struktur Halaman
- Teknologi yang Digunakan
- Cara Instalasi & Penggunaan
- Struktur Folder
- Kontributor
- Desain Responsif: Tampilan optimal di semua perangkat (Desktop, Tablet, Mobile).
- Navigasi Interaktif: Menu dropdown yang rapi dan mobile-friendly dengan tombol hamburger.
- Informasi Lengkap: Menyajikan profil, sejarah, struktur organisasi, dan data keagamaan terkini.
- Akses Layanan: Tautan langsung ke layanan publik seperti Haji, KUA, dan Pendidikan Islam.
- Statistik Visual: Data keagamaan ditampilkan dalam bentuk kartu statistik yang menarik.
- Kontak Terpadu: Formulir pengiriman pesan dan peta lokasi yang terintegrasi.
Website ini terdiri dari beberapa halaman statis yang saling terhubung:
- Beranda (
index.html): Halaman utama dengan Hero Section foto Kepala Kantor dan akses cepat ke layanan. - Profil:
- Tentang Kami (
profil.html): Penjelasan singkat mengenai tugas dan fungsi kantor. - Visi & Misi (
visi-misi.html): Arah dan tujuan strategis instansi. - Sejarah & Dasar Hukum (
sejarah.html): Jejak rekam perjalanan dan landasan hukum operasional. - Struktur Organisasi (
struktur.html): Bagan organisasi dan daftar pejabat struktural. - Tugas & Fungsi (
tupoksi.html): Rincian tugas pokok dan fungsi berdasarkan PMA. - Makna Lambang (
lambang.html): Filosofi logo Kemenag beserta link unduhan aset (PNG/CDR/EPS). - Data Keagamaan (
data-keagamaan.html): Statistik jumlah pemeluk agama dan rumah ibadah (Tahun 2024).
- Tentang Kami (
- Layanan (
layanan.html): Daftar lengkap layanan publik (Haji, Bimas Islam, Kristen, Katolik, Pendidikan). - Berita (
berita.html): Portal pengalihan ke situs berita resmi Kemenag Jabar. - Kontak (
kontak.html): Informasi alamat, telepon, email, dan formulir kontak.
- HTML5: Struktur semantik halaman web.
- CSS3: Styling kustom (
style.css) dengan pendekatan Clean & Flat Design. - JavaScript (Vanilla): Logika sederhana untuk load komponen Header/Footer (
main.js). - Font Awesome: Ikon vektor untuk mempercantik antarmuka.
- Google Fonts: Tipografi menggunakan font Poppins.
Karena website ini bersifat statis (HTML/CSS/JS), Anda tidak memerlukan instalasi backend atau database khusus.
- Browser modern (Chrome, Firefox, Edge, Safari).
- Koneksi internet (untuk memuat font dan ikon dari CDN).
- Live Server (Disarankan untuk pengembangan lokal agar fitur
fetchHeader/Footer berjalan).
- Clone Repositori:
git clone [https://github.com/kemenagdepok/landing.git](https://github.com/kemenagdepok/landing.git)
- Buka Folder: Masuk ke direktori proyek.
- Jalankan Server Lokal:
- Jika menggunakan VS Code, klik kanan pada
index.htmllalu pilih "Open with Live Server". - Atau buka file
index.htmlmelalui browser (namun Header/Footer mungkin tidak muncul karena kebijakan CORS browser pada protokolfile://).
- Jika menggunakan VS Code, klik kanan pada
landing/
├── gambar/ # Aset gambar (foto pejabat, bagan, dll)
├── unduh/ # File unduhan (logo vector)
├── index.html # Halaman Utama
├── style.css # Stylesheet Global
├── main.js # Script Global (Header/Footer Loader)
├── header.html # Komponen Header (Navbar)
├── footer.html # Komponen Footer
├── profil.html # Halaman Profil
├── layanan.html # Halaman Layanan
├── ... (file html lainnya)
├── favicon.ico # Ikon Website
└── README.md # Dokumentasi Proyek