Stunting Care adalah platform web modern yang didedikasikan untuk edukasi, pencegahan, dan deteksi dini stunting pada anak. Website ini dirancang dengan pendekatan "Solutif, Edukatif, dan Terpercaya", membantu orang tua memantau tumbuh kembang buah hati mereka.
Website ini dilengkapi dengan berbagai fitur interaktif dan konten mendalam:
- Tema Medis Modern: Menggunakan dominasi warna Putih (
#ffffff) dan Biru Medis (#00bcd4) yang bersih, profesional, dan menenangkan. - High Contrast: Teks utama menggunakan warna Hitam Absolut (
#000000) dan Deep Slate (#0f172a) untuk keterbacaan maksimal di semua perangkat. - Hero Carousel: Slider gambar otomatis di halaman utama dengan dark overlay untuk memastikan headline selalu terbaca jelas (Pop-up).
Halaman artikel statis yang terpisah untuk pembahasan mendalam:
- Anak Pendek vs Stunting
- Pentingnya Protein Hewani
- Mitos/Fakta Susu Formula vs ASI Semua artikel didesain dengan readability tinggi (teks gelap di atas putih).
Fitur unggulan yang memungkinkan orang tua melakukan skrining awal status gizi anak.
- Input: Nama, Jenis Kelamin, Usia (Bulan), Tinggi Badan (cm).
- Output: Analisis otomatis (Normal/Berisiko/Stunting) berdasarkan simulasi standar pertumbuhan.
- Smart CTA: Tombol darurat "Konsultasi Dokter" muncul otomatis jika hasil menunjukkan risiko.
- Timeline 1000 HPK: Visualisasi masa emas kehidupan (Kehamilan s/d 2 Tahun) yang interaktif.
- Panduan MPASI: Rekomendasi menu makanan pendamping ASI berdasarkan kelompok usia (6-8 bln, 9-11 bln, 12-23 bln).
- Jadwal Imunisasi: Tabel referensi lengkap untuk jadwal imunisasi dasar (0-9 bulan).
- Typing Effect: Animasi teks pada Hero Section.
- Floating WhatsApp: Tombol chat dokter yang selalu melayang di pojok kanan.
- Scroll Animations: Elemen muncul secara halus saat digulir.
Project ini dibangun dengan Native Web Technologies untuk performa maksimal dan kemudahan "Plug & Play".
- HTML5: Struktur semantik mutakhir.
- CSS3:
- Modern Reset: Box-sizing border-box, smooth scrolling.
- Variables:
:rootuntuk warna tema konsisten (Primary, Secondary, Text-Dark). - Responsive: Layout Flexbox & Grid yang adaptif untuk Mobile & Desktop.
- JavaScript (Vanilla ES6+):
- Slider Logic: Carousel manual tanpa plugin berat.
- DOM Manipulation: Untuk kalkulator dan interaksi navbar.
- Icons: Feather Icons.
- Fonts: 'Poppins' (Google Fonts).
/
├── index.html # Halaman Utama
├── artikel/ # Halaman Artikel (Statis)
│ ├── anak-pendek-vs-stunting.html
│ ├── ...
├── css/
│ └── style.css # Styling Utama (Clean White Theme)
├── js/
│ └── script.js # Logika Carousel, Kalkulator, dll
├── img/ # Aset Gambar
└── README.md # Dokumentasi Project
Karena project ini murni Static Web, Anda tidak memerlukan server backend atau instalasi npm yang rumit.
- Download atau Clone repositori ini.
- Buka folder project.
- Klik ganda pada file
index.html. - Website akan langsung berjalan di browser default Anda!
Dibuat dengan ❤️ oleh Tim UNITY (Unipro Team 3). Kami berkomitmen untuk mendukung program pemerintah dalam menekan angka stunting di Indonesia.
© 2025 Klinik Smartone - Stunting Care. All Rights Reserved.