Cleaning Service
Landing jasa kebersihan: harga langsung kelihatan sebelum tim datang
Versi 1.0.0Diperbarui 5 Oktober 202615 screenshot
Ringkasan
Landing page jasa kebersihan rumah, apartemen, dan kantor dengan kalkulator harga instan, langganan, dan pembanding pasar. Pengunjung melihat rentang harga, durasi, dan jumlah kru, memilih hari di pita jadwal berkapasitas, lalu pesan lengkap tersusun ke WhatsApp. Tanpa server, tanpa biaya bulanan.
Calon pelanggan jasa kebersihan menanyakan hal yang sama berulang: berapa harganya untuk 60 meter, berapa orang yang datang, bisa hari Sabtu? Admin menjawab satu per satu di WhatsApp, dan pelanggan yang menunggu sebentar pindah ke tempat lain. Situs biasanya hanya memajang foto dan nomor telepon, jadi harga tetap jadi misteri sampai ada percakapan panjang.
- Usaha jasa kebersihan rumah dan apartemen
- Cleaning service kantor dan ruko
- Jasa kebersihan pasca-renovasi dan pindahan
- Agensi yang membuat situs untuk usaha jasa
- Calon pelanggan melihat rentang harga, durasi, dan jumlah kru sebelum menghubungi admin
- Pesan WhatsApp masuk lengkap: properti, luas, kamar, add-on, hari, jam, catatan
- Langganan mingguan dan 2x sebulan dihitung langsung, lengkap dengan total per bulan
- Pengali momen libur x1,25 tertulis jelas di kutipan dan pita jadwal, bukan biaya siluman
- Ganti tarif, add-on, area, dan jam cukup di satu berkas data, tanpa backend
Fitur
Kalkulator kutipan
- Tipe properti, luas (15 sampai 400 m2), kamar tidur dan mandi, Reguler atau Deep clean
- Lima add-on per unit dengan tombol jumlah 44 px
- Durasi dibulatkan 0,5 jam dan jumlah kru dari luas dan add-on
- Langganan 2x sebulan (hemat 8%) dan mingguan (hemat 15%), khusus Reguler
- Pembanding harga agen besar dan tukang lepas dari kutipan yang sama
- Hasil menunggang garis seka di tengah halaman (desktop), turun di bawah pilihan di ponsel
Jadwal ke WhatsApp
- Pita 14 hari mulai besok (WIB) dengan sisa slot per hari
- Hari momen libur bertanda x1,25 dan kutipan ikut berubah
- Jam penuh bergaris putus-putus dan tidak bisa dipilih
- Validasi nomor WA 08/62/+62 dan pesan galat berbahasa Indonesia
- Pesan tersusun lengkap, tombol wa.me ke nomor usaha
- Tidak menyimpan data pelanggan di situs
Isi halaman
- Hero foto sebelum/sesudah dengan garis seka mengikuti gulir
- Papan tarif per m2 untuk Reguler dan Deep clean
- Isi pekerjaan per area (dapur, kamar mandi, kamar tidur, ruang tamu) dengan penanda butir Deep clean
- Pita area layanan yang berjalan dan berhenti saat disorot
- Kru dan peralatan, testimoni (berlabel contoh), FAQ, lokasi
- Halaman privasi (UU PDP) dan halaman 404
Media dan kualitas
- Foto dan video realistis buatan AI, JPEG di bawah 300 KB dan video di bawah 2 MB tanpa suara
- Gerak dikurangi: video berhenti di poster dan konten langsung terlihat
- Target sentuh minimal 44 px, fokus keyboard terlihat, kontras AA
- Diuji di 320, 390, 768, 1440 px; fps di atas 45 pada ponsel dengan CPU 4x lebih lambat
Animasi 3D
Tanpa 3D. Adegan three.js awal (lantai shader grime dan gundukan debu) dibuang karena terbaca seperti mainan dibanding foto. Gantinya dua foto realistis sebelum/sesudah yang diseka garis vertikal mengikuti gulir, kartu hero berpita, dan gerak masuk CSS. Tidak ada fitur alat yang bergantung pada 3D.
Tidak berlaku: hero adalah foto biasa. Dengan prefers-reduced-motion semua animasi mati, video berhenti di poster, dan konten langsung terlihat.
Screenshot
- 01Hero sebelum dan sesudahFoto sesudah (kiri) dan sebelum (kanan) dipisah garis seka yang bergerak mengikuti gulir. Pill kutipan menempel di garis dan selalu menampilkan hasil kalkulator. Dok kaca di dasar membawa ke kalkulator, jadwal, dan WhatsApp. Foto ilustrasi AI.desktop
- 02Kalkulator dibelah garis sekaPilihan di sisi berdebu (kiri), hasil di sisi bersih (kanan) yang menunggang garis lemon dan disapu setiap angka berubah.desktop
- 03Pembanding hargaTiga kartu dari kutipan yang sama: agen besar, tukang lepas, dan usaha Anda. Faktornya diatur di satu berkas data dan diberi catatan bahwa ini perkiraan.desktop
- 04Papan tarif jujurTarif per m² untuk Reguler dan Deep clean per tipe properti, lalu harga add-on per unit. Semua tertulis, tanpa harga misterius.desktop
- 05Isi pekerjaan per areaPilih area dan paket. Butir yang hanya masuk Deep clean ditandai, dan hitungannya berubah (6 dari 6 butir dapur di Deep clean, 3 di Reguler).desktop
- 06Hasil kerja sebelum dan sesudahKamar mandi dan sofa, dua pekerjaan add-on yang paling sering dipesan, sebelum (kiri) dan sesudah (kanan). Foto ilustrasi AI.desktop
- 07Cara kerja tiga langkahTiga langkah dari kalkulator sampai tim tiba, dengan video latar tanpa suara yang berhenti di poster saat gerak dikurangi.desktop
- 08Kru dan peralatanFoto kru berseragam dan petugas membersihkan jendela (ilustrasi AI) serta tiga janji: bahan aman, alat sendiri, foto sebelum dan sesudah.desktop
- 09Jadwal dengan momen liburPita 14 hari dengan sisa slot per hari. Tanggal Natal bertanda ×1,25 dan kutipan di atas formulir ikut berubah. Jam penuh bergaris putus-putus.desktop
- 10Lokasi dan jamAlamat, kartu jam buka WIB, dan tombol Google Maps.desktop
- 11Hero di ponselKartu hero berpita di 390 px: garis seka, pill kutipan, judul, dan CTA besar.mobile
- 12Kalkulator di ponselSegmen menjadi grid, langganan tiga kolom, chip add-on dengan tombol 44 px yang tetap terbaca saat terpilih.mobile
- 13Hasil kutipan di ponselRincian, rentang harga bertumpuk agar tidak terputus, durasi, kru, dan tombol lanjut ke jadwal.mobile
- 14Isi pekerjaan di ponselTab area dan paket sebagai grid, butir Deep clean redup dan dicoret saat Reguler.mobile
- 15Pilih jam di ponselPita hari tiga kolom, jam tiga kolom, jam penuh bergaris putus-putus, isian dengan target 44 px.mobile
Cara Pasang
Ekstrak dan pasang
Ekstrak zip, buka terminal di foldernya.
npm installIsi data usaha
Ganti nama, nomor WA, tarif, add-on, area, dan jam di
src/data/bersih.ts. Ganti foto dipublic/.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 kutipan, langganan, pembanding, jadwal, dan gerak
- src/data/bersih.ts: semua isi usaha dalam satu berkas
- public/: foto, video, dan poster contoh (ganti dengan milik Anda)
- index.html, privasi.html, 404.html
- docs/: INSTALL, CUSTOMIZE, CARA-KERJA bergambar
- tests/: uji unit, e2e Playwright, skrip tangkapan layar
- design/: sistem desain, riset, catatan iterasi
- LICENSE.txt, NOTICE.md, CHANGELOG.md
Kustomisasi
- Nama usaha, alamat, nomor WA, dan jam buka
- Tarif per m2, tarif kamar, dan add-on
- Langganan dan faktor pembanding
- Isi pekerjaan per area dan daftar area layanan
- Hari libur berpengali
- Warna merek lewat token CSS
- Foto dan video di public/
FAQ
Apakah perlu server atau database?
Tidak. Hasil build berupa file statis. Formulir hanya menyusun pesan WhatsApp; data pelanggan tidak disimpan di situs.
Apakah harga di kalkulator harus saya pakai apa adanya?
Tidak. Semua tarif adalah data contoh di src/data/bersih.ts. Ganti dengan tarif usaha Anda; kutipan, papan tarif, pembanding, dan pesan WA mengikuti.
Bagaimana pengali momen libur bekerja?
Tanggal di daftar MOMEN_LIBUR mengalikan seluruh rentang kutipan dengan faktornya (bawaan 1,25). Tanggal itu bertanda di pita jadwal dan tertulis di kutipan. Perbarui daftarnya tiap tahun.
Apakah sisa slot di pita jadwal nyata?
Di demo, sisa slot dibuat tetap dari tanggal. Bila Anda punya sistem antrean, ganti daftarHari() dan slotPenuh() di src/logic.ts dengan data dari API Anda.
Boleh memakai foto bawaan?
Foto dan video bawaan adalah ilustrasi buatan AI, bukan foto usaha nyata. Ganti dengan foto usaha Anda sebelum dipakai; caranya ada di docs/CUSTOMIZE.md.
Changelog
- v1.0.0
5 Oktober 2026- Rilis pertama
- Hero kartu berpita dengan foto sebelum/sesudah dan garis seka, dok kaca, pita area layanan
- Kalkulator dengan langganan, pembanding harga, dan isi pekerjaan per area
- Foto dan video realistis buatan AI menggantikan adegan 3D awal