Project Overview
Website corporate untuk sales BYD Arista Kalimalang yang dirancang sebagai katalog produk dan kanal lead — tujuan utamanya memudahkan calon pembeli mengontak sales langsung dan menampilkan spesifikasi produk secara detil.
Dampak & Skala Implementasi:
Implementasi meliputi katalog produk dengan filter/spec sheet, modul review/customer testimonial, video player teroptimasi (deferred load + play-on-click), animasi halus menggunakan Framer Motion untuk micro-interactions, serta integrasi quick-contact (WhatsApp/API telepon) pada tombol CTA. Fokus teknis: pengurangan payload awal lewat lazy-loading media, responsive images (srcset), accessibility untuk tombol kontak, dan state management ringan untuk menyimpan product favorites sementara (localStorage).
Problem
Sales membutuhkan sarana digital untuk menampilkan produk dan menerima lead langsung dari calon pembeli; konten multimedia berat (video) berpotensi memperlambat halaman jika tidak dioptimalkan.
Goal
Menyajikan katalog produk yang informatif dan konversif: pengunjung mudah melihat spesifikasi, membaca review, dan langsung menghubungi sales lewat CTA yang jelas.
Solution
Membangun UI modular untuk katalog & product detail, mengimplementasikan video play-on-click (deferred load), tombol kontak cepat (WhatsApp / tel), dan optimasi performa untuk menjaga pengalaman mobile-first.
Tech Stack
- Next.js 14 — routing & optimisasi
- Framer Motion — micro-interactions
- Lazy-loaded video player — deferred media
- Responsive srcset images
Key Features
- Product catalog with spec sheets
- Video product demo (play-on-demand)
- Quick-contact CTA (WhatsApp / Call)
- Customer reviews & rating display
Implementation Notes
Prioritaskan lazy-loading media, accessibility for contact buttons, dan budgeted animations agar TTI tetap rendah pada mobile.