Landing page suplemen kesehatan Jepang
AFC Landing Page
Landing page distributor resmi untuk suplemen kesehatan Jepang AFC Life Science Indonesia—desain mengutamakan kepercayaan, hidrasi React dari PHP, dan alur konversi khusus WhatsApp.
- Peran
- Full-stack developer
- Tahun
- 2026
- Stack
- ReactTailwind CSSPHPViteVitest
01 · Masalahnya
Mulai dari sumber masalahnya, bukan daftar fitur.
Pembeli suplemen di Indonesia skeptis: produk palsu beredar, klaim berlebihan, dan rantai reseller membuat status resmi jadi kabur. Distributor resmi membutuhkan halaman publik yang membangun kepercayaan lebih dulu—sekaligus berjalan di hosting PHP native cPanel dan kontennya dapat diperbarui tim non-developer tanpa rebuild.
02 · Pendekatannya
Mengubah observasi menjadi keputusan yang matang.
- 01
Mengeksplorasi lebih dari enam arah desain sebelum menetapkan design system bergaya Jepang 'paper & forest', terdokumentasi sebagai token, ramp tipografi, dan spesifikasi komponen.
- 02
Men-bootstrap SPA React 19 dari PHP 8 melalui hidrasi __LANDING_STATE__ di sisi server, menggerakkan visibilitas per section dan konten yang dikelola database tanpa rebuild.
- 03
Membangun alur konversi WhatsApp-first—formulir tervalidasi yang menyusun pesan deep-link, CTA spesifik produk, dan tombol chat mengambang—tanpa menyimpan data di server.
03 · Tantangan
Kendala yang membuat solusi semakin kuat.
- Memenangkan audiens yang skeptis: status distributor resmi, data bahan terverifikasi, dan penghargaan harus tampil lebih dulu sebelum copy penjualan.
- Menjembatani backend PHP 8 native cPanel dengan SPA React modern—dua runtime, satu halaman, tanpa siklus rebuild.
- Mempertahankan WCAG AA sambil memadukan copy Jepang dan Indonesia: string CJK ditandai lang="ja", font fallback yang tepat, dan animasi yang aman untuk reduced motion.
04 · Hasil
Apa yang berubah—dan apa yang akan saya perbaiki berikutnya.
- Merilis landing page produksi di afcsurabaya.id sebagai wajah publik dari ekosistem AI omnichannel enterprise.
- Mengubah perubahan konten menjadi sekadar edit database—section dan copy diperbarui tanpa deploy ulang.
- Menguji section, integritas konten, dan komponen dengan delapan suite RTL/Vitest di samping aksesibilitas WCAG AA.