Latar Belakang
KindboLab adalah ruang eksplorasi dan kreativitas anak yang menghadirkan kegiatan tematik seperti seni, eksperimen, dan eksplorasi untuk menumbuhkan rasa ingin tahu, kreativitas, dan kepercayaan diri anak.
Klien membutuhkan website yang tidak hanya tampil menarik dan profesional, tetapi juga mudah diperbarui sendiri oleh tim non-teknis mereka — mulai dari informasi kelas, jadwal events, hingga testimoni dari orang tua.
Tantangan Utama
- Konten yang sering berubah — jadwal kelas, acara, dan testimoni perlu diperbarui secara rutin tanpa harus menyentuh kode
- Audiens yang beragam — website harus meyakinkan dua persona: anak-anak yang tertarik secara visual, dan orang tua yang membutuhkan informasi jelas dan kepercayaan
- Formulir pendaftaran yang aman — perlu proteksi dari spam dan bot tanpa mengorbankan kemudahan pengguna
- Performa & responsivitas — harus cepat di semua perangkat, termasuk mobile yang digunakan orang tua di mana saja
Solusi yang Dibangun
🎨 Desain Visual yang Menarik & Terarah
- Landing page dengan hero banner interaktif yang kuat secara visual
- Section About yang memperkenalkan filosofi KindboLab secara hangat dan personal
- Carousel kelas dengan Swiper.js untuk navigasi yang smooth dan intuitif
- Vertical Stepper interaktif untuk menampilkan alur layanan tematik secara terstruktur
📅 Sistem Events Terpisah
- Halaman
/eventskhusus yang terpisah dari landing page untuk menampilkan seluruh agenda acara - Preview events terbaru langsung di homepage via komponen
HomeEvents - Kondisi empty state yang elegan saat belum ada event aktif
📝 CMS Headless dengan Contentful
- Seluruh konten (kelas, events, testimoni) dikelola melalui dashboard Contentful — tanpa perlu coding
- Tim KindboLab bisa menambah, mengedit, atau hapus konten kapan saja secara mandiri
- Konten terambil secara dinamis saat build menggunakan Contentful Delivery API
🔒 Formulir Pendaftaran Terlindungi
- Integrasi hCaptcha untuk memproteksi form kontak dan pendaftaran dari bot dan spam
- Validasi input yang ramah pengguna dengan pesan error yang jelas
⚡ Performa & UX
- Preloader halaman yang smooth untuk pengalaman loading yang mulus
- Tombol Back to Top yang muncul saat scroll panjang
- Smooth scroll dengan offset navigasi yang presisi untuk setiap anchor link
- Sidebar mobile-friendly
Hasil & Dampak
| Metrik | Hasil |
|---|---|
| Update konten oleh tim sendiri | Tanpa perlu developer |
| Proteksi form dari spam | hCaptcha aktif |
| Responsivitas | Desktop, tablet & mobile |
| Navigasi antar section | Smooth scroll, offset presisi |
| Halaman events terpisah | Fully dynamic dari Contentful |
Teknologi yang Digunakan
| Kategori | Teknologi |
|---|---|
| Framework | React 19 + Vite |
| Routing | React Router DOM v7 |
| CMS | Contentful (Headless CMS) |
| Carousel/Slider | Swiper.js v12 |
| Proteksi Form | hCaptcha (react-hcaptcha) |
| Deployment | Vercel |
| Styling | CSS kustom + Bootstrap (vendor) |
Kutipan Klien
“Tim InvictusWave benar-benar mengerti kebutuhan kami. Website-nya tidak hanya cantik — kami bisa update sendiri jadwal kelas dan events tanpa repot minta bantuan developer setiap saat.”
— Tim KindboLab