Sekolah Kemudi Andalan
Landing sekolah mengemudi: kalkulator paket manual/matic yang menghitung total langsung, papan tarif jujur, dan kunci blok 2 jam di 7 hari ke depan lewat WhatsApp
Versi 1.0.0Diperbarui 5 Oktober 202611 screenshot
Ringkasan
Landing page sekolah mengemudi yang menjawab pertanyaan calon murid sebelum mereka datang: berapa biaya latihan, paket mana yang cocok, dan kapan slotnya kosong. Pengunjung memilih transmisi (manual Rp85rb/jam, matic Rp100rb/jam), mengatur paket (per jam, 10 jam, 20 jam + pengurusan SIM C), mencentang tambahan (malam, jalan tol, jemput, pengurusan SIM), dan total langsung terlihat di dasbor yang berputar seperti odometer. Papan tarif menulis biaya pengurusan SIM secara jujur ("tergantung polres"). Hero memakai video latar dan foto ilustrasi AI. Lalu kalender 7 hari × blok 2 jam WIB menampilkan sisa kursi per blok; memilih blok memutar roda kemudi ke arah hari itu dan menyusun pesan WhatsApp lengkap. Tanpa server, tanpa biaya bulanan.
Calon murid sekolah mengemudi selalu bertanya harga per jam, beda manual vs matic, paket mana yang termasuk pengurusan SIM, dan jam berapa instruktur kosong. Situs sekolah kebanyakan hanya foto mobil dan tombol hubungi kami — pertanyaan dijawab satu per satu di DM, slot dikonfirmasi bolak-balik, dan biaya pengurusan SIM baru muncul belakangan sehingga murid merasa ditipu.
- Sekolah mengemudi manual dan matic
- Instruktur yang membuka kursus sendiri
- Usaha yang ingin menjawab "berapa biaya?" sebelum calon murid datang
- Agensi yang membuat situs untuk sekolah mengemudi
- Kalkulator paket hidup: transmisi, paket per jam / 10 jam / 20 jam + SIM C, tambahan malam, jalan tol, jemput, pengurusan SIM — total langsung di dasbor
- Kejujuran tarif: biaya pengurusan SIM ditulis "tergantung polres", tidak ada janji angka atau jaminan waktu
- Kalender 7 hari × blok 2 jam WIB dengan sisa kursi per blok (kapasitas = jumlah instruktur)
- Memilih blok memutar roda kemudi SVG dan menghitung ulang total dengan jemput-area
- Pesan WhatsApp tersusun lengkap; nomor admin dari satu variabel env
Fitur
Kalkulator paket
- Transmisi manual (Rp85rb/jam) atau matic (Rp100rb/jam) dengan tarif dihitung dari data sekolah
- Paket per jam (stepper 1–40), Paket 10 jam (10 × tarif), Paket 20 jam + pengurusan SIM C (harga tetap)
- Tambahan: latihan malam, latihan jalan tol, jemput di rumah, pengurusan SIM A/C
- Dasbor ringkasan: rincian per baris, total berputar seperti odometer, nomor pendaftaran contoh
Kunci slot ke WhatsApp
- Kalender 7 hari (Senin–Minggu) mulai besok, WIB; blok 2 jam 07.00–19.00
- Sisa kursi per blok ditampilkan; blok penuh bergaris dan tidak bisa dipilih
- Hari libur nasional ditandai "libur · lebih ramai" — bukan tutup
- Memilih blok memutar roda kemudi SVG ke hari itu dan memperbarui total (jemput)
- Validasi nama & nomor WA Indonesia, pesan WhatsApp siap kirim, tanpa menyimpan data
Isi halaman
- Papan tarif jujur baris-per-baris di panel gelap, termasuk catatan polres
- Kartu instruktur berfoto, kurikulum 4 tahap, ulasan bertanda contoh, FAQ
- Lokasi & jam WIB dengan foto rute, kebijakan privasi UU PDP, halaman 404
- Data sekolah, tarif, dan FAQ dalam satu berkas `src/data/sekolah.ts`
Visual dan kualitas
- Hero video latar berputar + foto realistis (AI), teks langsung di atas video jalan, judul berundak GAS./REM./KENDALI PENUH.
- Pita jalan 2D berkelok digambar otomatis; panel rambu ayun masuk, rambu samping di layar lebar
- Gerak dikurangi atau ponsel: video berhenti di poster; tanpa WebGL dan tanpa pustaka animasi
- Target sentuh >=44 px, fokus keyboard terlihat, kontras AA, diuji 320-1440 px, fps >=45 di ponsel 4x
Animasi 3D
Tidak ada 3D dekoratif. Adegan three.js lama (pita jalan datar + mobil kotak) terbaca seperti mainan, jadi diganti foto dan video realistis buatan AI. Satu-satunya elemen yang berputar adalah roda kemudi SVG di ringkasan pesanan: sudutnya dihitung dari hari slot terpilih (Senin kiri, Kamis lurus, Minggu kanan) sehingga mengonfirmasi pilihan, bukan hiasan.
Tanpa WebGL apa pun. Dengan prefers-reduced-motion atau di ponsel, video berhenti di poster JPEG dan transisi roda dimatikan; semua fitur tetap berfungsi.
Screenshot
- 01Hero video + fotoVideo jalan berputar di belakang teks: judul berundak GAS./REM./KENDALI PENUH., CTA, tiga langkah, foto murid dan instruktur, chip harga.desktop
- 02Kalkulator paket + dasborTransmisi matic, paket 20 jam + SIM C, tambahan tol dan jemput; rincian dan total di dasbor, rambu catatan tarif di samping.desktop
- 03Papan tarif jujurPanel gelap dengan foto tuas persneling dan tarif baris per baris; pengurusan SIM ditulis tergantung polres.desktop
- 04Kalender slot 7 hari7 hari x 6 blok 2 jam WIB dengan sisa kursi, roda kemudi SVG berputar ke hari terpilih, ringkasan pesanan dan legenda.desktop
- 05Instruktur berfotoTiga instruktur contoh dengan spesialisasi manual, matic, jalan tol dan malam.desktop
- 06Kurikulum empat tahapDari lapangan kosong ke jalan raya, kartu tahap dan rambu catatan.desktop
- 07Ulasan contohUlasan bertanda contoh; ganti dengan ulasan asli berizin.desktop
- 08Lokasi dan jamAlamat Bekasi Timur, jam latihan WIB, dan foto ilustrasi rute perumahan.desktop
- 09Hero di ponselFoto di atas, rambu harga kuning, judul dan CTA langsung di atas poster jalan; video diganti poster demi baterai.mobile
- 10Dasbor di ponselKalkulator satu kolom dengan dasbor ringkasan paket 20 jam + SIM C.mobile
- 11Slot di ponselKalender 2 kolom, blok terpilih, ringkasan pesanan dan tombol ke WhatsApp.mobile
Cara Pasang
Ekstrak dan pasang
Ekstrak zip, buka terminal di foldernya.
npm installIsi data sekolah
Ganti tarif, paket, tambahan, instruktur, FAQ, dan alamat di
src/data/sekolah.ts; set nomor WA lewat.env(VITE_WA_ADMIN_NUMBER).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 & slot, pita jalan SVG
- src/data/: semua isi sekolah 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 Mobbin, catatan iterasi
- LICENSE.txt, NOTICE.md, CHANGELOG.md
Kustomisasi
- Nama, alamat, jam, dan nomor WhatsApp sekolah
- Tarif per jam, paket, dan tambahan (malam, tol, jemput, pengurusan SIM)
- Instruktur (ganti dengan data asli) dan FAQ
- Warna merek lewat token CSS
- Teks halaman: judul, hero, papan tarif, kebijakan privasi
FAQ
Apakah perlu server atau database?
Tidak. Hasil build berupa file statis. Formulir hanya menyusun pesan WhatsApp; data calon murid tidak disimpan di situs.
Tarif di situs ini harga final?
Harga adalah data contoh untuk ilustrasi; pemilik sekolah menggantinya di `src/data/sekolah.ts`. Kecuali pengurusan SIM yang memang bergantung polres — situs menulis perkiraan dan mengonfirmasi dulu, bukan menjanjikan angka.
Apakah kalender slot terhubung ke sistem antrean?
Tidak. Sisa kursi per blok adalah contoh deterministik yang bisa diatur (kapasitas = jumlah instruktur). Slot dikunci lewat pesan WhatsApp dan dikonfirmasi admin secara manual — tanpa biaya bulanan.
Bagaimana cara mengubah nomor WhatsApp?
Cukup buat `.env` berisi `VITE_WA_ADMIN_NUMBER=081234567890` lalu bangun ulang. Nomor dinormalisasi otomatis (08… → 62…). Tanpa `.env`, ubah cadangan di `src/data/sekolah.ts`.
Apakah memakai AI?
Tidak. Kalkulator adalah aturan tetap yang bisa dibaca dan diubah di `src/data/sekolah.ts`. Tidak ada kunci AI saat runtime; foto dan video ilustrasi dibuat dengan AI sekali saat pembuatan produk dan bisa Anda ganti.
Changelog
- v1.0.0
5 Oktober 2026- Rilis pertama
- Hero video latar + foto realistis, rambu harga kuning, pita jalan 2D
- Kalkulator paket manual/matic + tambahan, dasbor total odometer
- Papan tarif jujur, kalender slot 7 hari x 2 jam dengan roda kemudi SVG, WhatsApp siap kirim
- Instruktur berfoto, kurikulum, ulasan contoh, FAQ, lokasi WIB, privasi UU PDP, 404