KOPRI PC PMII Mamuju - Landing Page

React Vite TypeScript TailwindCSS

Website landing page informasi dan advokasi untuk Korps PMII Putri (KOPRI) Cabang Mamuju yang berfokus pada perlindungan perempuan dan anak. Website ini mencerminkan keberanian, keamanan, dan profesionalisme sebagai ruang aman bagi para korban.

🌟 Slogan Utama

"LAWAN, SUARAKAN, PULIHKAN!"

✨ Fitur Utama

Emergency Hub: Akses cepat untuk pengaduan aman (Hotline WhatsApp, Email kopripmiiberjaya@gmail.com).
Pendampingan Holistik: Informasi detail tentang pendampingan hukum, psikologis, dan penyediaan shelter.
Edukasi & Berita: Katalog artikel dan berita terbaru dari KOPRI PC PMII Mamuju.
Galeri Anggota: Menampilkan struktur anggota pengurus.
Privasi Terjaga: Sistem yang didesain menghargai privasi dan menjamin kerahasiaan korban, tanpa tracker yang melacak pengguna secara invasif.

🛠️ Teknologi yang Digunakan

Proyek ini dibangun menggunakan modern web technologies untuk memastikan performa yang cepat dan pengalaman pengguna yang luar biasa:

Framework: React 18+ + Vite
Bahasa: TypeScript
Styling: Tailwind CSS (dengan warna primer #1d376a dan sekunder #eecf1f)
Animasi: Framer Motion
Ikon: Lucide React

🚀 Panduan Instalasi dan Menjalankan Proyek

Ikuti langkah-langkah di bawah ini untuk menjalankan proyek secara lokal.

Persyaratan Sistem

Node.js (versi 18 ke atas direkomendasikan)
npm / yarn / pnpm

Langkah-langkah

Clone repository ini:
```
git clone <url-repository>
```
Masuk ke direktori proyek:
```
cd pmii-mamuju
```

Install dependensi:

npm install
# atau menggunakan pnpm:
pnpm install

Jalankan development server:

npm run dev
# atau menggunakan pnpm:
pnpm run dev

Buka browser dan akses alamat http://localhost:5173/.

📦 Build untuk Produksi

Untuk menghasilkan build produksi yang telah dioptimalkan:

npm run build
# atau menggunakan pnpm:
pnpm run build

File build akan tersedia di folder dist/ dan siap di-deploy ke Vercel, Netlify, atau layanan hosting lainnya.

🎨 Design System

Proyek ini menggunakan panduan warna yang telah ditetapkan untuk mencerminkan identitas KOPRI PMII:

Primary Color: #1d376a (Deep Blue) - Digunakan untuk Navbar, Footer, dan Text Heading.
Secondary Color: #eecf1f (Golden Yellow) - Digunakan untuk Call-to-Action (CTA), Tombol Hotline, dan aksen penting.

🛡️ Standar Kualitas

Performa Tinggi: Target Lighthouse Score > 95.
Responsif: Mobile-first design, memastikan akses mudah di smartphone dalam kondisi darurat.
Optimasi Aset: Format gambar menggunakan webp/avif, dan sistem lazy-loading untuk galeri.

Dibangun dengan ❤️ untuk KOPRI PC PMII Mamuju.

KOPRI PC PMII Mamuju | Landing Page

Kategori

Dipublikasikan

Teknologi