Petshop Kumbang & Kucing
Landing petshop & grooming: hitung harga grooming dari jenis-ukuran-bulu, penitipan dengan kalender kandang, jadwal vaksin, sebelum-sesudah geser, lalu pesan ke WhatsApp
Versi 1.0.0Diperbarui 5 Oktober 202614 screenshot
Ringkasan
Landing page untuk petshop dan grooming Indonesia yang menjawab pertanyaan paling tidak disukai pemilik hewan: berapa biayanya? Kartu vet berlipat di hero menghitung harga grooming langsung dari jenis (kucing/anjing), ukuran, dan kondisi bulu, termasuk biaya tambahan jujur untuk bulu kusut; foto hewan di sebelahnya ikut berganti dari rapi ke kusut. Kalkulator penitipan menghitung tarif harian, diskon 10% untuk 7 hari ke atas, dan menandai hari "kandang penuh" (momen Lebaran) yang benar-benar tidak bisa dipilih. Bagian sebelum-sesudah bisa digeser, dan perencana jadwal vaksin menyusun garis waktu dari tanggal lahir sampai booster tahunan lengkap dengan perkiraan biaya. Semua berakhir dengan pesan WhatsApp yang sudah tersusun. Foto dan video latar dibuat dengan AI (FlatKey) sebagai ilustrasi; ganti dengan foto usaha Anda sebelum dipakai. Tanpa server, tanpa biaya bulanan.
Pemilik hewan Indonesia sering baru tahu harga grooming setelah antre, dan penitipan saat mudik jadi drama karena kandang penuh tanpa pemberitahuan. Situs petshop kebanyakan hanya foto dan tombol "hubungi kami" — calon pelanggan tetap datang tanpa tahu perkiraan biaya, lalu kaget di kasir atau kecewa karena kandang penuh saat Lebaran.
- Pemilik petshop dan jasa grooming
- Groomer yang punya klinik/toko sendiri
- Petshop yang ingin mengurangi tanya-tanya harga di DM
- Agensi yang membuat situs untuk usaha perawatan hewan
- Estimator grooming di hero: pilih jenis, ukuran, kondisi bulu, tambahan; total berubah hidup di kartu groom
- Interaksi khas: memilih bulu kusut mengganti foto hewan ke versi gimbal dan baris "Matting + Rp 50.000" berjalan masuk ke kartu
- Kalkulator penitipan: tarif per hari, diskon 10% (≥ 7 hari), kalender multi-hari dengan hari kandang penuh
- Sebelum/sesudah: garis geser yang terbuka mengikuti gulir, lalu bisa diseret atau digeser dengan keyboard
- Jadwal vaksin dari tanggal lahir: seri anak hewan, grooming pertama, booster tahunan, dengan status terlewat/sekarang/nanti dan total biaya
- Pesan WhatsApp siap kirim untuk grooming, penitipan, dan jadwal vaksin; nomor ternormalisasi dari env VITE_WA_ADMIN_NUMBER
- Foto realistis dan dua video latar loop ringan (di bawah 300 KB per foto, 2 MB per video), poster saat gerak dikurangi
Fitur
Estimator grooming (kartu groom)
- Pilih Kucing/Anjing; foto hewan berganti dan kartu penitipan ikut menyesuaikan
- Ukuran Kecil/Sedang/Besar dengan acuan berat; kondisi bulu Pendek/Sedang/Panjang/Kusut
- Tambahan: potong kuku, cek kesehatan, vaksin inti, vaksin lengkap
- Total berubah hidup (wobble-count); baris matting dan biaya bulu transparan
- Preferensi hari (14 hari WIB) dengan hari kuota penuh dicoret
Penitipan (laci kandang)
- Tarif per hari kucing/anjing, subtotal, diskon 10% otomatis bila ≥ 7 hari, total
- Kalender multi-hari: hari kandang penuh tidak bisa dipilih
- Hari libur dari src/data/holidays.json (rentang Lebaran = penuh); rentang yang menabrak hari penuh ditolak dengan nama tanggal
- Peringatan high-season saat rentang melewati hari libur ramai
Isi halaman
- Papan harga "tag cakar" dengan saringan Grooming/Perawatan/Penitipan dan tombol Hitung
- Tiga langkah proses grooming dengan foto, testimoni polaroid berlabel contoh, FAQ
- Lokasi & jam WIB dengan denah SVG
- Kebijakan privasi UU PDP, halaman 404
- Semua data petshop dalam satu berkas src/data/petshop.ts
Sebelum-sesudah, jadwal vaksin, media dan kualitas
- Slider sebelum/sesudah dengan empat foto (kucing dan anjing), scroll-linked lalu manual; input range sehingga bisa lewat keyboard
- Perencana jadwal vaksin: cek kesehatan, vaksin inti dosis 1-2, vaksin lengkap + rabies, grooming pertama, booster tahunan; tanggal ideal dihitung dari tanggal lahir
- Video latar hero dan footer: H.264 tanpa audio, autoplay muted loop, berhenti saat di luar layar, hanya poster saat prefers-reduced-motion
- Target sentuh minimal 44 px, fokus keyboard terlihat, kontras AA; diuji di 320, 390, 768, 1440 px; fps ≥ 45 di ponsel dengan CPU 4× lebih lambat
Animasi 3D
Tidak memakai 3D. Keputusan 5 Okt 2026: kepala hewan low-poly buatan three.js terbaca seperti mainan dan tidak menolong pemilik hewan memutuskan, jadi diganti foto realistis dan video latar. Kartu groom tetap menjadi 'mesin' halaman: memilih jenis dan kondisi bulu mengganti foto hewan (rapi atau gimbal) dan menambahkan baris biaya.
Tanpa JavaScript media tetap tampil sebagai gambar; video berhenti dan hanya poster tampil bila prefers-reduced-motion, dan video di luar layar dijeda. Tidak ada kebutuhan WebGL.
Screenshot
- 01Estimasi grooming: foto hewan + kartu groomHero: video latar lembut, foto kucing di bingkai, dan kartu vet berlipat di kanan (tab, tag leher, dua panel) dengan pilihan jenis, ukuran, kondisi bulu, dan tambahan.desktop
- 02Anjing besar, bulu kusut: matting masuk kartuFoto berganti ke anjing gimbal; baris Matting +Rp 50.000, cek kesehatan, kuku, dan total perkiraan Rp 500.000 terisi di kartu.desktop
- 03Penitipan dengan diskon 7 hariKalender multi-hari dengan hari penuh dicoret, stepper lama titip, diskon 10% (−Rp 77.000), total Rp 693.000, dan foto kandang.desktop
- 04Sebelum dan sesudah, geser sendiriGaris geser membuka foto hasil grooming; pilihan Kucing/Anjing mengganti pasangan foto.desktop
- 05Jadwal vaksin dari tanggal lahirGaris waktu kartu jatuh tempo: yang sedang waktunya ditandai, sisanya menunggu, lengkap dengan harga dan total sisa jadwal.desktop
- 06Papan harga tag cakarBaris harga grooming per jenis dan ukuran, biaya kondisi bulu, tombol Hitung yang mengisi kartu groom.desktop
- 07Testimoni polaroidUlasan bertanda contoh ditempel seperti polaroid di papan peniti.desktop
- 08Tanya jawabPertanyaan yang benar-benar ditanyakan di kasir: harga final, bulu kusut, kandang penuh, diskon, data pribadi.desktop
- 09Lokasi, jam WIB, dan denahAlamat Malang, jam buka tiap hari, denah SVG tanpa teks bertabrakan, dan ilustrasi alat grooming.desktop
- 10Estimasi di ponselFoto hewan sebagai pita atas, kartu groom di bawahnya, menu ponsel.mobile
- 11Kartu groom di ponselBulu kusut: matting masuk kartu, total, dan preferensi hari dengan hari penuh dicoret.mobile
- 12Sebelum/sesudah di ponselSlider selebar layar, bisa diseret dengan jari.mobile
- 13Jadwal vaksin di ponselKartu jatuh tempo bertumpuk, tanggal dan harga di bawah judul.mobile
- 14Penitipan di ponselKalender tiga kolom, tarif, diskon 10%, dan tanda kandang penuh.mobile
Cara Pasang
Ekstrak dan pasang
Ekstrak zip, buka terminal di foldernya.
npm installIsi data petshop
Ganti nama, alamat, jam, nomor WA (buat .env: VITE_WA_ADMIN_NUMBER), harga, dan FAQ di
src/data/.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 estimator/penitipan, slider sebelum-sesudah, perencana jadwal vaksin
- public/: foto dan video ilustrasi AI (FlatKey) yang sudah dikompres + poster; ganti dengan foto usaha Anda
- src/data/: semua isi petshop (petshop.ts + holidays.json)
- 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, alamat, jam, dan nomor WhatsApp petshop (nomor via env VITE_WA_ADMIN_NUMBER)
- Daftar harga grooming, kondisi bulu, tambahan, tarif penitipan
- Hari libur / kandang penuh lewat src/data/holidays.json
- Testimoni (ganti dengan ulasan asli berizin) dan FAQ
- Warna merek lewat token CSS
- Teks halaman: judul, hero, kebijakan privasi
- Foto dan video di public/ (ganti berkas dengan nama sama; ukuran foto ≤ 300 KB, video ≤ 2 MB)
FAQ
Apakah perlu server atau database?
Tidak. Hasil build berupa file statis. Formulir hanya menyusun pesan WhatsApp; data pelanggan tidak disimpan di situs.
Harga di situs ini harga final?
Harga adalah data contoh untuk ilustrasi; pemilik petshop menggantinya di `src/data/petshop.ts`. Di situs yang sudah diisi, estimasi tetap perkiraan yang dikonfirmasi saat hewan tiba — itu memang bagian dari desain.
Bagaimana cara mengubah nomor WhatsApp?
Buat berkas `.env` dengan `VITE_WA_ADMIN_NUMBER=08xx...` lalu `npm run build` — semua tombol WhatsApp (topbar, grooming, penitipan, FAQ, 404) memakai nomor itu. Tanpa .env, dipakai nomor contoh.
Apakah estimasi memakai AI?
Tidak. Estimasi adalah aturan tetap yang bisa dibaca dan diubah di `src/data/petshop.ts` — tidak ada kunci AI, tidak ada biaya per pemakaian.
Hari libur / kandang penuh diisi di mana?
Di `src/data/holidays.json`. Contohnya sudah berisi rentang Lebaran dengan `penuh: true`. Situs juga menandai 1–2 hari deterministik sebagai terisi supaya kondisi 'kandang penuh' terlihat di demo.
Foto dan videonya foto usaha asli?
Bukan. Foto dan video ilustrasi dibuat dengan AI (FlatKey), bukan foto usaha nyata. Ganti dengan foto usaha Anda sebelum dipakai; berkasnya ada di public/ dan semua alt-text berbahasa Indonesia.
Apakah jadwal vaksinnya saran medis?
Tidak. Jadwal adalah pola umum anak hewan yang bisa diubah di src/logic.ts dan src/data/petshop.ts; kalimat di halaman menyarankan konfirmasi ke dokter hewan.
Changelog
- v1.0.0
5 Oktober 2026- Rilis pertama
- Kartu groom (estimator) di hero dengan foto hewan yang berganti rapi/kusut dan video latar loop
- Penitipan 'laci kandang' dengan diskon ≥ 7 hari dan kalender kandang penuh (Libur Lebaran)
- Slider sebelum/sesudah dan perencana jadwal vaksin dari tanggal lahir
- Pesan WhatsApp siap kirim, papan harga tag cakar, testimoni polaroid, FAQ, lokasi, privasi UU PDP, 404
- Foto dan video ilustrasi dibuat dengan AI (FlatKey), bukan foto usaha nyata; ganti sebelum dipakai