Laundry Kilat & Satuan
Landing laundry kiloan dan satuan: hitung harga, cek noda, lacak cucian, jadwal jemput ke WhatsApp
Versi 1.0.0Diperbarui 5 Oktober 202621 screenshot
Ringkasan
Landing page laundry kiloan dan satuan yang menjawab pertanyaan berulang pelanggan sebelum mereka chat: kalkulator harga per kg atau per barang dengan nota hidup, langganan mingguan dengan perbandingan biaya sebulan, cek noda (noda x kain), pelacak cucian dengan kode nota, pemilih kecamatan dengan tarif antar-jemput, pita tanggal 14 hari dan jendela jam WIB, lalu pesan WhatsApp tersusun rapi ke admin. Hero video mesin cuci dalam orb kaca, nav kaca cair, kartu bercahaya, enam foto realistis dan footer berlapis. Tanpa server, tanpa biaya bulanan.
Admin laundry menjawab pertanyaan yang sama berulang kali di WhatsApp: berapa per kg, minimal berapa, jas berapa, bisa dijemput kapan, apakah gratis ongkir. Calon pelanggan yang tidak mendapat jawaban cepat pindah ke laundry sebelah. Situs laundry biasanya cuma memajang harga dan tombol "hubungi kami", jadi chat masuk setengah jadi dan admin harus tanya balik satu per satu.
- Pemilik laundry kiloan dan satuan
- Layanan laundry antar-jemput rumahan
- Laundry di kompleks, kost, atau perkantoran
- Agensi yang membuat situs untuk jasa lokal
- Calon pelanggan hitung sendiri biayanya sebelum chat admin, termasuk langganan sebulan
- Pesan WhatsApp masuk lengkap: layanan, kg, tanggal, jam WIB, alamat, estimasi total
- Cek noda memberi peluang hilang, biaya tambahan, dan langkah di rumah; kurangi chat "ini bisa hilang?"
- Pelacak cucian dengan kode nota, siap disambungkan ke sistem kasir
- Ganti isi toko cukup di satu file data, tanpa backend
Fitur
Kalkulator harga + nota
- Mode kiloan: berat 1-20 kg, tiga layanan (cuci kering lipat, kilat 6 jam, setrika saja)
- Mode satuan: jas, gaun, sepatu, tas, bed cover, gorden, boneka, hijab dengan rentang harga
- Nota cuci yang men-stamp setiap baris baru dan total berputar seperti counter
- Nota berlabel "bukan tagihan": harga final ditimbang ulang saat kurir tiba
- Antar-jemput per zona kecamatan (gratis/lingkar/tepi) dengan ambang gratis Rp 50.000
Langganan, cek noda, lacak
- Langganan mingguan: slider 6-30 kg dengan diskon bertingkat 5/10/15 persen dan antar gratis mulai 10 kg
- Perbandingan tiga batang: langganan, kiloan biasa, cuci sendiri; lencana "termurah" jujur, jam kerja yang dihemat ditulis
- Cek noda: 7 noda x 4 kain, cincin peluang hilang, cuci tangan atau mesin, biaya tambahan, langkah di rumah
- Hasil di bawah 65 persen otomatis berkata "kami hubungi dulu sebelum mencuci"
- Lacak cucian: kode nota (huruf kecil dan spasi diterima), lima tahap, tiga contoh pesanan, pesan galat Indonesia
- Gerai dengan status buka/tutup WIB dan tautan peta
Jadwal ke WhatsApp
- Pita tanggal 14 hari mulai besok (WIB), hari libur resmi otomatis nonaktif
- Empat jendela jam WIB: pagi, siang, sore, malam
- Validasi nomor WA 08/62/+62 dan pesan galat berbahasa Indonesia
- Pesan tersusun lengkap dengan tombol wa.me ke nomor toko; ringkasan pesanan hidup di samping formulir
- Tidak menyimpan data pelanggan di situs
Isi halaman
- Tiga janji bercahaya, tabel tarif kiloan dan satuan, cara kerja empat tahap, dari pintu ke pintu
- Cakupan tiga zona kecamatan, ulasan (berlabel contoh), FAQ, halaman privasi UU PDP, halaman 404
- Footer berlapis dengan kata merek kaca raksasa
- Tabel tarif dan pelacak berubah menjadi baris/garis waktu vertikal di ponsel
- Waktu konsisten WIB sesuai kota contoh (Depok)
Gerak, media, kualitas
- Hero orb video fade-loop (kecepatan ikut berat cucian), poster diam untuk gerak dikurangi
- Nav pil kaca cair yang berganti nada gelap/terang, reveal bertahap, kartu bercahaya, tanpa pustaka animasi
- Satu video dan enam foto realistis dibuat dengan AI (ganti dengan foto Anda); semua ≤ 300 KB, alt Indonesia
- 52 uji unit dan e2e Playwright 137 pemeriksaan (320 sampai 1440 px, target sentuh 44 px, kontras AA)
Animasi 3D
Tanpa three.js: drum 3D versi 4 Okt dihapus karena dekoratif dan terlihat seperti mainan. Hero memakai video mesin cuci realistis (848x480, tanpa suara, fade-loop) di dalam orb bergaya pintu mesin; kecepatan video mengikuti berat cucian di kalkulator. Semua alat (kalkulator, jadwal, langganan, cek noda, pelacak) murni DOM, jadi tidak ada fitur yang bergantung pada 3D.
Dengan prefers-reduced-motion video diganti poster diam dan semua animasi mati; konten tampil penuh.
Screenshot
- 01Hero orb videoVideo mesin cuci dalam orb pintu mesin, nav pil kaca, lencana rating contoh, kartu nota hidup dari kalkulator.desktop
- 02Kalkulator dan nota cuciLayanan kilat 6 jam dipilih, 9 kg. Nota men-stamp baris baru dan total berputar; catatan zona di bawahnya.desktop
- 03Tiga janji bercahayaKartu bertepi gradien dengan cahaya blur di latar gelap, plus foto toko; nav berganti kaca gelap.desktop
- 04Tarif terbukaTarif kiloan dan rentang satuan di atas tenun kain halus, plus daftar yang sudah termasuk di tiap kiloan.desktop
- 05Langganan mingguanSlider kg dengan label diskon, tiga batang perbandingan biaya sebulan, dan kartu hasil dengan angka hemat.desktop
- 06Cara kerja empat tahapEmpat muatan di jalur dengan ikon: timbang, satu mesin, kabar WhatsApp, diantar terlipat.desktop
- 07Dari pintu ke pintuFoto kurir menyerahkan cucian dan tiga statistik kaca.desktop
- 08Cek nodaMinyak pada satin: peluang 70 persen, cuci tangan, biaya tambahan Rp 15.000, dan langkah di rumah.desktop
- 09Lacak cucianKode LK-0398: tiga tahap selesai, tahap keempat berjalan, perkiraan antar.desktop
- 10Jadwal penjemputanTanggal dan jam WIB terpilih, formulir terisi, foto dan ringkasan pesanan di samping.desktop
- 11Pesan WhatsApp tersusunPesan lengkap dengan estimasi total dan tombol kirim ke WhatsApp.desktop
- 12Cakupan dan geraiTiga zona Depok dengan biaya, kartu gerai dengan status buka WIB dan tautan peta.desktop
- 13Ulasan contohUlasan berlabel contoh dengan inisial dan kota fiktif, siap diganti.desktop
- 14Tanya jawabFAQ dengan judul menempel di kiri: kerusakan, pakaian dalam, batas kilat, minimal, titip.desktop
- 15Footer berlapisKartu berlapis dengan kolom tautan dan kata merek kaca raksasa.desktop
- 16Hero di ponselJudul, CTA, dan orb video di bawahnya; tombol pesan mengambang.mobile
- 17Kalkulator satuan di ponselMode satuan dengan barang terpilih; semua target sentuh minimal 44 px.mobile
- 18Langganan di ponselPilihan layanan, slider dengan label diskon, dan zona bertumpuk satu kolom.mobile
- 19Cek noda di ponselChip noda dan kain membungkus rapi, hasil dengan cincin peluang di bawahnya.mobile
- 20Lacak cucian di ponselGaris waktu vertikal lima tahap dengan tahap berjalan berdenyut.mobile
- 21Pilih tanggal dan jam di ponselPita tanggal digeser horizontal, jendela jam WIB besar untuk jempol.mobile
Cara Pasang
Ekstrak dan pasang
Ekstrak zip, buka terminal di foldernya.
npm installIsi data toko
Ganti nama, nomor WA, kota, kecamatan, dan harga di
src/data.ts.npm run devBangun dan unggah
Unggah isi folder
dist/ke hosting. Panduan Vercel, Netlify, cPanel, dan nginx ada didocs/INSTALL.md.npm run build
Isi Paket
- src/: halaman, logika kalkulator dan jadwal (logic.ts), langganan/cek noda/lacak (extra.ts), render bagian (sections.ts), mesin gerak (fx), semua data toko dalam satu file (data.ts)
- index.html, privasi.html, 404.html
- public/: video hero, poster, enam foto, tenun kain
- docs/: INSTALL, CUSTOMIZE, CARA-KERJA bergambar
- tests/: 52 uji unit, e2e Playwright, skrip tangkapan layar dan sampul
- design/: sistem desain, riset (Mobbin + awansite), catatan iterasi, prompt aset
- LICENSE.txt, NOTICE.md, CHANGELOG.md
Kustomisasi
- Nama toko, kota, jam operasional, dan nomor WhatsApp (file data tunggal `src/data.ts`)
- Layanan kiloan, tarif per kg, dan cut-off kilat
- Barang satuan dan rentang harganya
- Aturan langganan: diskon bertingkat, ambang antar gratis, asumsi cuci sendiri
- Daftar noda dan kain beserta peluang dan biaya tambahan
- Kecamatan dan biaya antar-jemput per zona
- Jendela jam penjemputan dan daftar hari libur SKB
- Ulasan, FAQ, gerai, dan teks cara kerja
- Warna merek lewat token CSS
- Zona waktu WIB/WITA/WIT, foto, dan video hero
FAQ
Apakah perlu server atau database?
Tidak. Hasil build berupa file statis. Formulir hanya menyusun pesan WhatsApp; data pelanggan tidak disimpan di situs.
Bisakah dipakai untuk laundry di luar Depok?
Bisa. Ganti kecamatan di `src/data.ts` (Tier) dengan kecamatan kota Anda, sesuaikan zona waktu di `src/logic.ts` kalau bukan WIB, lalu sesuaikan daftar hari libur SKB.
Bagaimana menghitung ongkir antar-jemput?
Daftar kecamatan dikelompokkan ke tiga zona dengan biaya tetap (gratis, Rp 10.000, Rp 20.000). Zona pusat gratis untuk belanja Rp 50.000 ke atas. Ambang gratis bisa diubah di `src/logic.ts`.
Bisakah menambah layanan atau barang satuan baru?
Bisa, cukup tambahkan objek di `LAYANAN` atau `SATUAN` pada `src/data.ts`. Kalkulator, nota, dan tabel tarif menyesuaikan sendiri.
Bagaimana menyambungkan pelacak ke sistem kasir saya?
Ganti fungsi `lacak(kode)` di `src/extra.ts` dengan panggilan ke API kasir Anda; hasilnya cukup berbentuk `StatusPesanan`. Tiga pesanan bawaan fiktif dan hanya untuk contoh.
Apakah ulasannya asli?
Tidak. Ulasan bawaan berlabel "contoh" dengan inisial fiktif. Ganti dengan ulasan asli pelanggan Anda (dengan izin) sebelum situs tayang.
Apakah halaman memakai AI?
Tidak. Kalkulator, langganan, cek noda, dan pelacak adalah aturan tetap yang bisa dibaca dan diubah pemilik toko. AI hanya dipakai membuat foto dan video ilustrasi saat produk dibangun; ganti dengan foto usaha Anda.
Changelog
- v1.0.0
5 Oktober 2026- Rilis pertama
- Kalkulator kiloan + satuan, antar-jemput per zona, jadwal 14 hari + jendela jam WIB, pesan WhatsApp otomatis
- Langganan mingguan, cek noda, lacak cucian, gerai dengan status buka
- Hero orb video, nav kaca cair, kartu bercahaya, footer berlapis, enam foto realistis