Landing Page

Villa Bali

Landing vila & homestay: harga musiman terhitung, pesanan masuk ke WhatsApp Anda

Versi 1.0.0Diperbarui 27 September 202612 screenshot

Villa Bali — Tiba saat subuh — Tiba saat subuhLembar pembuka dengan form cepat check-in, lama menginap, dan tamu. Adegan vila 3D dalam cahaya subuh.1 / 12

Ringkasan

Template landing page untuk vila dan homestay. Tamu memilih unit, tanggal, dan jumlah tamu, melihat harga per malam sesuai musim, lalu mengirim permintaan pesan ke WhatsApp dengan pesan yang sudah terisi. Di belakangnya, adegan vila 3D berjalan dari subuh sampai malam mengikuti gulir.

Masalah yang diselesaikan

Tamu bertanya lewat WhatsApp satu per satu: "Tanggal 14 kosong? Berapa kalau berempat? Sudah termasuk pajak?" Anda menghitung manual, salah hitung saat malam Sabtu atau musim liburan, dan membalas terlambat karena sedang melayani tamu lain. Sementara itu tamu yang sama memesan lewat aplikasi OTA dan Anda kehilangan 15 sampai 20 persen. Halaman ini menjawab pertanyaan itu sebelum ditanyakan: kalender menunjukkan tanggal kosong, kalkulator menghitung harga lengkap sampai uang muka, dan pesan yang masuk ke WhatsApp sudah rapi berisi unit, tanggal, jumlah tamu, dan total.

Cocok untuk

Pemilik vila & homestay di Bali, Lombok, Labuan Bajo, Jogja
Pengelola beberapa unit dalam satu pekarangan
Agensi web yang membuat situs penginapan untuk klien
Pemilik guest house yang ingin mengurangi komisi OTA

Hasil yang kamu dapat

Harga dihitung per malam: musim, malam Jumat-Sabtu, tamu tambahan, anak, pajak, uang muka
Permintaan pesan masuk ke WhatsApp dalam format rapi, tanpa server dan tanpa biaya bulanan
Adegan vila 3D: gulir halaman, hari berjalan dari subuh ke malam
Klik nama unit, kamera terbang ke bangunannya lalu detail kamar terbuka
Dwibahasa Indonesia/Inggris untuk tamu domestik dan mancanegara
Aturan rumah khas Bali siap pakai: Nyepi, canang, pendaftaran tamu ke banjar

Bahasa desain

Cormorant Garamond + Nunito Sans · resor tenang, sawah, satu hari menginap

Fitur

Unit & kamar

Indeks 4 unit dengan tarif mulai dan kapasitas
Lembar detail: luas, tempat tidur, kolam, fitur
Denah ringkas SVG dari data
Tombol langsung ke kalender unit itu

Tanggal & harga

Kalender 2 bulan (1 bulan di ponsel) dengan tanggal terisi dan musim puncak
Harga per malam tercetak di tiap tanggal
Tarif 4 musim + kenaikan akhir pekan
Biaya tamu tambahan, anak separuh, bayi gratis
Potongan menginap 7 malam, layanan 5%, PBJT 10%, uang muka 30%
Minimal menginap 2 malam, 3 malam di musim puncak
Tabel tarif dasar semua unit

Informasi tamu

Fasilitas dalam tiga kelompok
Peta ilustrasi dengan jarak, waktu tempuh, tips, tautan Google Maps
Aturan rumah bernomor
Contoh ulasan berlabel jelas
Tanya jawab: uang muka, pembatalan, jemputan bandara, sarapan halal, musim hujan

Pemesanan

Ringkasan pesanan terbawa ke formulir
Validasi nama, nomor 08xx/+62xx/kode negara, email
Membuka WhatsApp dengan pesan terisi + salinan di halaman
Halaman privasi sesuai UU PDP

3D & aksesibilitas

Siklus subuh-siang-senja-malam 1:1 dengan gulir, jam di rail selalu sama dengan cap waktu bab
Lampu taman dan jendela menyala saat malam
Gambar diam otomatis bila WebGL tidak ada
Satu bingkai diam untuk pengguna yang memilih gerak dikurangi
Navigasi keyboard penuh, fokus terlihat, target sentuh 44 px

Animasi 3D

Konsep

Vila low-poly dengan kolam, joglo, lumbung, candi bentar, dan sawah terasering. Posisi gulir adalah jam: subuh pastel, siang terang, senja jingga, malam biru dengan lampu taman menyala. Klik unit menerbangkan kamera ke bangunannya, jadi tamu 'melihat' kamar sebelum membaca detailnya.

Tanpa WebGL / gerak dikurangi

Tanpa WebGL tampil gambar diam siang hari yang dirender dari adegan yang sama. Dengan pengaturan gerak dikurangi, adegan berhenti di satu bingkai dan lembar detail langsung terbuka tanpa kamera terbang.

Screenshot

01Tiba saat subuhLembar pembuka dengan form cepat check-in, lama menginap, dan tamu. Adegan vila 3D dalam cahaya subuh.desktop
02Empat unitIndeks tipografis unit dengan tarif mulai, kamera memandang seluruh pekarangan.desktop
03Detail Vila KelapaKamera terbang ke Vila Kelapa, lalu lembar detail dengan denah ringkas terbuka.desktop
04Kalender & kalkulatorTanggal terisi diarsir, harga per malam di tiap tanggal, rincian sampai uang muka 30%.desktop
05Peta sekitarPeta ilustrasi dengan jarak, waktu tempuh, tips lokal, dan tautan Google Maps.desktop
06Aturan rumah saat senjaJam rail berubah jingga, aturan Nyepi, canang, dan jam hening.desktop
07Kirim ke WhatsAppFormulir tervalidasi dan isi pesan WhatsApp yang dikirim, dengan adegan malam.desktop
08Versi bahasa InggrisSeluruh teks berganti ke bahasa Inggris. Ulasan diberi label contoh.desktop
09Beranda ponselBilah atas dengan jam adegan dan dok bawah lima tujuan.mobile
10Harga di ponselKalender satu bulan, stepper tamu 44 px, total dan uang muka.mobile
11Detail unit di ponselLembar bawah menyisakan adegan 3D di atasnya setelah kamera terbang ke Rumah Joglo.mobile
12Aturan di ponselKutipan pemilik di lempeng gelap dan aturan bernomor saat senja.mobile

Cara Pasang

1
Ekstrak & pasang
Ekstrak zip, buka folder di terminal.
```
npm install
```
2
Ganti nomor WhatsApp & harga
Buka src/config.ts, isi waNumber, tarif musim, pajak, uang muka. Unit dan teks ada di src/data/villa.ts.
```
npm run dev
```
3
Build & unggah
Unggah isi folder dist/ ke hosting. Panduan Vercel, Netlify, cPanel, dan nginx ada di docs/INSTALL.md.
```
npm run build
```

Isi Paket

src/: halaman, logika harga, data unit, kamus ID/EN, adegan 3D
index.html, privasi.html, 404.html
public/: poster cadangan 3D, favicon
tests/: uji logika (vitest), uji e2e, skrip screenshot dan poster
docs/: INSTALL, CUSTOMIZE, CARA-KERJA
design/: sistem desain, riset, catatan iterasi
README.md, CHANGELOG.md, LICENSE.txt, NOTICE.md

Kustomisasi

Nomor WhatsApp, nama, alamat, jam check-in
Tarif dasar per unit dan pengali tiap musim
Pajak, layanan, uang muka, minimal menginap, potongan menginap lama
Daftar unit, fasilitas, tempat sekitar, aturan rumah, FAQ (dua bahasa)
Warna dan huruf lewat token CSS
Warna langit dan kolam tiap waktu di adegan 3D

FAQ

Apakah pembayaran otomatis?

Tidak. Halaman mengirim permintaan pesan lewat WhatsApp; Anda cek tanggal lalu menagih uang muka lewat transfer. Cocok untuk vila yang ingin tetap memegang konfirmasi sendiri.

Bagaimana ketersediaan tanggal diperbarui?

Versi ini memakai pola contoh. Ganti fungsi `isBooked()` dengan daftar tanggal terisi Anda atau data iCal dari OTA; langkahnya ada di docs/CUSTOMIZE.md.

Bisa untuk lebih atau kurang dari 4 unit?

Bisa. Tambah atau hapus unit di `src/data/villa.ts`. Bila jumlahnya berubah, sesuaikan juga bangunan dan titik kamera di adegan 3D.

Apakah berat di ponsel?

Adegan 3D dimuat setelah konten tampil (132 KB gzip), resolusi dibatasi, bayangan dimatikan di ponsel. Diuji tetap 60 fps dengan CPU diperlambat 4x pada lebar 390 px.

Ulasannya asli?

Bukan. Ulasan diberi label contoh dan wajib diganti dengan ulasan tamu Anda sendiri sebelum situs tayang.

Butuh server atau database?

Tidak. Hasil build adalah file statis; bisa diunggah ke hosting murah atau gratis.

Changelog

v1.0.0
26 September 2026
- Rilis pertama