Bengkel Andalan Motor
Landing bengkel motor & mobil: pengunjung memilih gejala, langsung lihat rentang biaya, lalu pesan jadwal ke WhatsApp
Versi 1.0.0Diperbarui 5 Oktober 202615 screenshot
Ringkasan
Landing page bengkel motor dan mobil yang menjawab pertanyaan paling tidak disukai pemilik kendaraan: berapa biayanya? Pengunjung memilih gejala (bunyi klik, tetes oli, rem nyerit…), lembar kerja langsung menampilkan rentang suku cadang + jasa dengan disklaimer jujur, papan harga terbuka, lalu memesan hari dan jam ke WhatsApp. Hero video bengkel sinematik, cara kerja empat langkah, dan kartu janji yang menumpuk membuatnya terasa seperti situs penuh, bukan satu layar. Tanpa server, tanpa biaya bulanan.
Pemilik kendaraan Indonesia tidak percaya harga servis yang baru muncul di nota. Pertanyaan pertama selalu "berapa biayanya?" dan bengkel menjawab satu per satu di DM dengan data yang setengah jadi. Situs bengkel kebanyakan hanya foto dan tombol hubungi kami — calon pelanggan tetap datang tanpa tahu perkiraan, lalu kaget di kasir.
- Bengkel motor dan mobil
- Mekanik yang membuka servis sendiri
- Bengkel yang ingin mengurangi tanya-tanya harga di WhatsApp
- Agensi yang membuat situs untuk bengkel
- Estimator biaya dari gejala: pilih gejala, lihat rentang suku cadang + jasa sebelum datang
- Disklaimer jujur: estimasi bukan penawaran final, bagian tak disetujui tidak digarap
- Pesan WhatsApp masuk lengkap: nama, nomor, servis, hari, jam WIB, estimasi awal
- Papan harga terbuka dengan saringan dan tombol Pesan per baris
- Hero video sinematik berkaca cair; cara kerja berfoto, kartu janji menumpuk, CTA berlapis, perbandingan suku cadang asli vs alternatif; ganti isi cukup satu file data
Fitur
Estimator dari gejala
- Pilih Motor atau Mobil, ketuk satu atau beberapa gejala dalam bahasa pemilik kendaraan
- Lembar kerja berklip yang terisi baris demi baris, cap DIPERIKSA, rentang suku cadang + jasa + total dalam Rupiah
- Sakelar suku cadang alternatif (hemat 30–45%) dengan penjelasan kualitas
- Total berputar seperti odometer; nomor work order AM-xxxx; tanggal WIB
- Kartu perbandingan: total dengan suku cadang asli, alternatif, dan selisih yang bisa dihemat
Booking ke WhatsApp
- Pita 14 hari mulai besok (WIB), Minggu otomatis tutup, slot penuh bergaris
- Validasi nomor WA 08/62/+62 dan pesan galat berbahasa Indonesia
- Pesan tersusun lengkap dengan tombol wa.me ke nomor bengkel
- Tidak menyimpan data pelanggan di situs
Isi halaman
- Cara kerja empat langkah bernumeral besar dan tiga kartu janji menumpuk dengan foto
- Papan harga servis dengan saringan Semua/Motor/Mobil/Rem/Mesin/Kelistrikan
- Testimoni berlabel contoh, FAQ, lokasi & jam dengan denah SVG dan foto bay
- Kebijakan privasi UU PDP, halaman 404
- Jam operasional konsisten WIB, Minggu tutup
Gerak dan kualitas
- Hero video fade-loop dengan poster diam untuk gerak dikurangi; reveal bertahap, kartu menumpuk, kaca cair
- Foto bengkel realistis dibuat dengan AI (ganti dengan foto Anda)
- Target sentuh minimal 44 px, fokus keyboard terlihat, kontras AA
- Diuji di 320, 390, 768, 1440 px
Animasi 3D
Tanpa three.js: hero memakai video bengkel realistis (848×480, tanpa suara, fade-loop) di belakang overlay putty, dengan navigasi dan kartu berkaca cair. Mesin 3D dari versi awal terlalu kasar dibanding foto, jadi diganti media realistis. Gerak lain — reveal bertahap, foto cara kerja yang berganti, kartu janji menumpuk, paralaks CTA, tombol magnet — ditulis sendiri di src/fx.ts dan src/main.ts tanpa pustaka. Blueprint mesin terurai kini berupa SVG ringan (src/fx.ts initExploded) yang menyatu mengikuti gulir, bukan three.js.
Dengan prefers-reduced-motion video diganti poster diam dan seluruh animasi mati; konten tetap tampil penuh. Tanpa dukungan video, poster tampil.
Screenshot
- 01Hero video bengkelVideo bengkel di sisi kanan, judul condensed besar, CTA, dan kartu fakta berkaca cair.desktop
- 02Mesin teruraiDiagram SVG mesin tiga silinder dengan enam bagian terpisah; rail penunjuk dan label ikut bergeser.desktop
- 03Mesin menyatu saat gulirBagian mendarat satu per satu dengan sentakan kecil; bagian yang baru mendarat menyala olive dan baris daftarnya ikut tersorot.desktop
- 04Papan gejalaDinding kode gejala gelap berlubang: pilih Motor atau Mobil lalu ketuk gejala yang terasa.desktop
- 05Lembar kerja berklipBaris pekerjaan terisi satu per satu, cap DIPERIKSA jatuh, total berputar seperti odometer, lalu perbandingan suku cadang asli vs alternatif.desktop
- 06Cara kerja empat langkahNumeral 01–04 dengan foto lengket yang berganti mengikuti langkah yang dibaca.desktop
- 07Kartu janji menumpukTiga janji dengan foto; kartu menumpuk dan mengecil saat kartu berikutnya menutupinya.desktop
- 08Papan harga servisBaris menu gelap dengan saringan Semua/Motor/Mobil/Rem/Mesin/Kelistrikan dan tombol Pesan per baris.desktop
- 09Booking ke WhatsAppPita 14 hari WIB, Minggu tutup, slot penuh bergaris, jam buka dan janji di samping.desktop
- 10Testimoni contohEnam ulasan ilustrasi berlabel contoh.desktop
- 11Lokasi dan jamAlamat, jam buka, denah SVG, dan foto bay kerja.desktop
- 12CTA berlapis dan footerKartu kaca di atas foto bengkel saat senja yang bergeser pelan, lalu footer.desktop
- 13Ponsel: heroDi ponsel video berada di atas dan teks di atas kertas polos agar selalu terbaca.mobile
- 14Ponsel: lembar kerjaLembar kerja berklip tampil penuh dengan target sentuh 44 px.mobile
- 15Ponsel: bookingPita hari 3 kolom, jam, dan formulir.mobile
Cara Pasang
Ekstrak dan pasang
Ekstrak zip, buka terminal di foldernya.
npm installIsi data bengkel
Ganti nama, alamat, jam, nomor WA, harga, dan FAQ di
src/data/bengkel.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 estimator dan jadwal, mesin gerak (fx)
- src/data/: semua isi bengkel dalam satu file
- 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 bengkel
- Daftar gejala, layanan, harga suku cadang dan jasa
- Testimoni (ganti dengan ulasan asli berizin) dan FAQ
- Warna merek lewat token CSS
- Teks halaman: judul, hero, janji, kebijakan privasi
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 bengkel menggantinya di `src/data/bengkel.ts`. Di situs yang sudah diisi, estimasi tetap perkiraan yang dikonfirmasi teknisi — itu memang bagian dari desain (disklaimer jujur).
Bisa dipakai bengkel mobil saja atau motor saja?
Bisa. Hapus gejala/layanan jenis yang tidak dipakai di `src/data/bengkel.ts`; tombol Motor/Mobil menyesuaikan sendiri.
Apakah estimasi memakai AI?
Tidak. Estimasi adalah aturan tetap yang bisa dibaca dan diubah di `src/data/bengkel.ts` — tidak ada kunci AI, tidak ada biaya per pemakaian.
Bagaimana cara mengubah nomor WhatsApp?
Cukup ubah `wa` di `src/data/bengkel.ts` (format internasional tanpa + dan tanpa 0 di depan) dan tautan WA yang tertulis di `index.html`. Panduan lengkap di `docs/CUSTOMIZE.md`.
Changelog
- v1.0.0
5 Oktober 2026- Hero video bengkel sinematik dengan navigasi dan kartu fakta berkaca cair; poster diam untuk gerak dikurangi
- Estimator dari gejala, lembar kerja berklip, perbandingan suku cadang asli vs alternatif, total odometer
- Cara kerja empat langkah dengan foto lengket berganti, kartu janji menumpuk, CTA berlapis berparalaks
- Papan harga, booking ke WhatsApp, testimoni contoh, FAQ, lokasi, privasi UU PDP, 404
- 10 foto + 1 video ilustrasi AI (FlatKey), tanpa three.js