Website resmi Desa Curah Dringu — sebuah desa pesisir di tepi Selat Madura, Kecamatan Tongas, Kabupaten Probolinggo, Jawa Timur.

Tujuan utama website ini adalah melayani dan memberikan informasi yang akurat kepada masyarakat dengan tampilan yang modern, ramah, dan mudah diakses dari perangkat apa pun (mobile-friendly).

Identitas visual mengangkat tema pesisir — perpaduan warna teal laut dan amber senja — agar berbeda dari website desa pada umumnya.

• Fitur Utama
• Teknologi
• Memulai (Getting Started)
• Struktur Proyek
• Halaman & Rute
• Mengelola Konten
• Sistem Desain
• Komponen Penting
• Deploy
• Kontak

• Beranda informatif — hero pesisir, pintasan layanan, statistik desa (angka beranimasi), berita terbaru, potensi desa, agenda kegiatan, ajakan pengaduan, dan peta lokasi.
• Layanan administrasi — daftar layanan surat-menyurat beserta persyaratan dan alur pengurusan yang jelas.
• Profil desa — sejarah, visi & misi, serta struktur perangkat desa.
• Berita & pengumuman — kanal informasi terkini untuk warga.
• Potensi desa — etalase wisata pesisir, UMKM, dan hasil pertanian.
• Kontak & pengaduan — formulir aspirasi/pengaduan dengan validasi dan notifikasi (toast).
• Mobile-friendly — navigasi drawer di perangkat kecil, tata letak responsif di seluruh halaman.
• SEO & berbagi — meta tag, Open Graph, dan Twitter Card di setiap halaman.

• Node.js v18 atau lebih baru (diuji pada v22)
• Yarn atau npm

# 1. Instal dependency
yarn install        # atau: npm install

# 2. Jalankan mode pengembangan
yarn dev            # atau: npm run dev
# Buka http://localhost:3000

# 3. Build untuk produksi
yarn build          # atau: npm run build

# 4. Jalankan hasil build
yarn start          # atau: npm run start

curahdringu/
├── public/                     # Aset statis (logo, favicon, gambar konten)
│   ├── logo.png
│   ├── favicon.ico
│   └── content.jpeg
├── src/
│   ├── data/
│   │   └── site.ts             # ⭐ Pusat semua data konten (lihat di bawah)
│   ├── theme/
│   │   └── index.ts            # Tema Chakra: warna, font, gaya komponen
│   ├── components/
│   │   ├── Layout/             # Pembungkus halaman (Head + Navbar + Footer)
│   │   ├── Head/               # Meta tag & SEO
│   │   ├── Navbar/             # Navigasi sticky + drawer mobile
│   │   ├── Footer/             # Footer multi-kolom
│   │   ├── ui/                 # Komponen UI reusable
│   │   │   ├── Reveal.tsx          # Animasi muncul saat di-scroll
│   │   │   ├── CountUp.tsx         # Angka beranimasi (statistik)
│   │   │   ├── SectionHeading.tsx  # Judul section konsisten
│   │   │   ├── PageHero.tsx        # Header untuk halaman dalam
│   │   │   └── NewsCard.tsx        # Kartu berita
│   │   └── views/              # Komposisi tiap halaman
│   │       ├── Home/
│   │       │   ├── index.tsx
│   │       │   └── Fragments/      # Section-section beranda
│   │       │       ├── Hero.tsx
│   │       │       ├── Stats.tsx
│   │       │       ├── ServicesPreview.tsx
│   │       │       ├── NewsSection.tsx
│   │       │       ├── PotensiSection.tsx
│   │       │       ├── AgendaSection.tsx
│   │       │       ├── CtaSection.tsx
│   │       │       └── Maps.tsx
│   │       ├── Profil/
│   │       ├── Layanan/
│   │       ├── Berita/
│   │       ├── Potensi/
│   │       └── Kontak/
│   ├── pages/                  # Rute (Next.js Pages Router)
│   │   ├── _app.tsx                # Bungkus ChakraProvider + tema
│   │   ├── _document.tsx           # HTML dasar + pemuatan font
│   │   ├── index.tsx               # /         → Beranda
│   │   ├── profil.tsx              # /profil
│   │   ├── layanan.tsx             # /layanan
│   │   ├── berita.tsx              # /berita
│   │   ├── potensi.tsx             # /potensi
│   │   ├── kontak.tsx              # /kontak
│   │   ├── about.tsx               # /about    → redirect ke /profil
│   │   └── api/hello.ts            # Contoh API route bawaan
│   └── styles/
│       └── globals.css
├── next.config.js
├── tsconfig.json
└── package.json

Pola arsitektur: file di pages/ sengaja dibuat tipis — hanya merender komponen View terkait dari components/views/. Seluruh logika tampilan ada di views, sehingga rute mudah dibaca dan tampilan mudah dirawat.

Semua konten website terpusat di satu file: src/data/site.ts. Untuk memperbarui informasi desa, cukup ubah file ini — tidak perlu menyentuh kode tampilan.

export const OFFICERS: Officer[] = [
  { name: "Tiyayah", role: "Kepala Desa" },
  { name: "Siti Maesaroh", role: "Sekretaris Desa" },
  // ...tambah/ubah sesuai data asli
];

export const VILLAGE = {
  name: "Desa Curah Dringu",
  phone: "(0335) 123-456",   // ← ganti dengan nomor asli
  email: "halo@curahdringu.site",
  // ...
};

Catatan: sebagian data saat ini masih berupa contoh/placeholder (statistik, berita, agenda). Ganti dengan data sebenarnya sebelum publikasi.

Tema Chakra kustom mendefinisikan identitas visual desa:

• brand (teal laut) — warna utama: tombol, aksen, tautan aktif.
• sand (amber senja) — warna sekunder: CTA & sorotan.
• ink (abu kebiruan) — teks & latar netral.
• Font: Plus Jakarta Sans (dimuat via _document.tsx).
• Default komponen: tombol membulat penuh (borderRadius: full), warna bawaan brand.

Untuk mengganti warna utama, cukup sunting palet brand/sand di src/theme/index.ts.

• Layout — membungkus setiap halaman dengan Head (SEO), Navbar, dan Footer. Menerima prop title & description untuk SEO per halaman.
• Reveal — animasi fade-up halus saat elemen masuk ke layar (Framer Motion + IntersectionObserver).
• CountUp — menganimasikan angka statistik saat terlihat di layar.
• PageHero — header standar untuk halaman dalam (judul + breadcrumb).
• NewsCard — kartu berita yang dipakai ulang di beranda & halaman berita.

Cara termudah men-deploy adalah lewat Vercel (pembuat Next.js):

1. Hubungkan repository GitHub ini ke Vercel.
2. Vercel mendeteksi Next.js otomatis — tanpa konfigurasi tambahan.
3. Setiap push ke branch main akan ter-deploy otomatis.

Lihat dokumentasi deployment Next.js untuk opsi lain (Netlify, server sendiri, dll).

Ingin ikut memperbarui konten atau mengembangkan website? Baca CONTRIBUTING.md — tersedia panduan untuk pengelola desa (update konten tanpa coding) maupun pengembang (alur cabang, konvensi commit, gaya kode, menambah halaman).

Untuk diskusi lebih lanjut dengan pemilik repository ini, hubungi via WhatsApp.

Dibuat dengan 💙 untuk warga Desa Curah Dringu