Latar Belakang
Butik gaun biasanya memamerkan koleksi lewat Instagram atau WhatsApp. Pelanggan harus menggulir ratusan foto dan bertanya satu per satu: "Ada ukuran L?", "Yang warna sage ada?", "Budget 1 juta dapat apa?". Proses ini melelahkan, baik untuk pelanggan maupun admin toko.
Solusi
Website katalog tanpa keranjang belanja atau checkout. Fokusnya membantu pelanggan menemukan gaun yang cocok secepat mungkin, lalu mengarahkan mereka ke WhatsApp untuk bertransaksi, sesuai kebiasaan belanja butik di Indonesia.
Fitur Utama
Filter bertumpuk. Pelanggan bisa memilih beberapa kriteria sekaligus, misalnya Ball Gown atau Mermaid, ukuran XL, warna putih, harga di bawah 4 juta.
Jumlah hasil di setiap pilihan filter. Pilihan yang tidak menghasilkan apa pun otomatis diredupkan, jadi pelanggan tidak pernah berakhir di halaman kosong.
Slider rentang harga, pencarian nama, dan pengurutan (terbaru, termurah, termahal).
Label filter aktif yang bisa dihapus satu per satu.
Popup detail produk. Berisi foto besar, deskripsi, ukuran yang tersedia, dan tombol WhatsApp dengan pesan yang sudah terisi otomatis sesuai gaun yang dipilih.
Navigasi antar produk di dalam popup, dengan dukungan geser di HP.
Desain & Pengalaman Pengguna
Gaya editorial ala majalah fashion. Huruf serif besar, warna krem hangat, dan aksen maroon-emas untuk kesan butik premium.
Mobile-first. Di HP, filter muncul sebagai panel dari bawah layar yang mudah dijangkau jempol, dan galeri tampil dua kolom.
Animasi yang terasa mewah tanpa mengganggu:
layar pembuka dengan huruf logo yang muncul bergantian
judul yang naik perlahan dan foto berbingkai lengkung yang bergerak mengikuti kursor
kartu produk yang bergeser mulus ke posisi baru saat filter diubah
efek miring 3D dan kilau saat kursor diarahkan ke foto
Aksesibilitas: mendukung navigasi keyboard, dan animasi otomatis dikurangi untuk pengguna yang mengaktifkan pengaturan "kurangi gerakan" di perangkatnya.
Teknologi
HTML, CSS, dan JavaScript murni, tanpa framework. Ringan, cepat dimuat, dan mudah dirawat.
Data produk dipisahkan dalam satu file, sehingga menambah atau mengubah gaun tidak perlu menyentuh kode tampilan.
Deploy di Vercel dengan domain kustom dan HTTPS.
htmlcssvercel