LayananPaketPortofolioMarketplaceCara KerjaFAQ
Mulai project →Akun0813 4079 780
Landing Page

Open Trip Bajo

Landing open trip Labuan Bajo: tamu susun rute per hari, total dan DP langsung terhitung

Versi 1.0.0Diperbarui 26 September 202613 screenshot

Peta rute 3DKartu judul dengan dua paket di atas peta kepulauan. Rute tergambar sampai akhir hari 2; nomor pin di peta sama dengan nomor titik di bab hari.1 / 13
Peta rute 3D1 / 13
Open Trip Bajo — Peta rute 3D

Kartu judul dengan dua paket di atas peta kepulauan. Rute tergambar sampai akhir hari 2; nomor pin di peta sama dengan nomor titik di bab hari.

Ringkasan

Landing page untuk operator open trip Labuan Bajo. Calon tamu menggeser bab hari 3H2M atau 4H3M di atas peta 3D, mencentang add-on, melihat sisa kursi tiap tanggal, memilih kabin, lalu mengirim ringkasan lengkap berisi rute, DP, dan jatuh tempo ke WhatsApp admin. File statis, tanpa server dan tanpa biaya bulanan.

Masalah yang diselesaikan

Admin open trip menjawab pertanyaan yang sama berulang di DM: masih ada kursi tanggal 12, kabin privat berapa, DP-nya berapa, lunasnya kapan, kalau ombak besar bagaimana. Poster itinerary di Instagram tidak bisa menjawab itu, jadi calon tamu menunggu balasan dan pindah ke operator lain. Pesan yang akhirnya masuk pun setengah jadi, dan admin masih harus menghitung ulang harga dengan add-on satu per satu.

Cocok untuk
  • Operator open trip dan private trip Labuan Bajo
  • Pemilik kapal phinisi dan kapal kayu wisata
  • Agen wisata bahari (Raja Ampat, Karimunjawa, Wakatobi bisa diadaptasi)
  • Agensi dan freelancer yang membuat situs untuk operator trip
Hasil yang kamu dapat
  • Tamu melihat rute hari per hari di peta 3D sebelum chat admin
  • Total dan DP berubah saat add-on dicentang, tanpa pindah halaman
  • Sisa kursi tiap tanggal terlihat sebagai kotak, tanggal penuh langsung ke daftar tunggu WA
  • Pesan WA masuk lengkap: rute per hari, kabin, jumlah tamu, DP, tanggal pelunasan
  • Kebijakan cuaca dan izin berlayar ditulis jelas, mengurangi pertanyaan soal pembatalan
  • Semua isi di satu file data, tanpa backend
Bahasa desain
Archivo Black + Work Sans · poster ekspedisi di atas peta laut

Fitur

Penyusun rute

  • Paket 3H2M dan 4H3M, masing-masing dengan bab hari yang digeser ke samping
  • Jam kunjungan dalam WITA, catatan tiap titik, nama pulau
  • Add-on per hari, dihitung per orang atau per grup
  • Tombol panah, tab hari, dan tombol panah keyboard untuk pindah bab
  • Garis rute 2D dengan jejak kapal yang tergambar mengikuti geseran

Peta 3D

  • Kepulauan low-poly dengan air bershader (gelombang, fresnel, kilau matahari)
  • Rute tergambar sampai akhir hari yang sedang dibuka, kapal bergerak di ujungnya
  • Pin bernomor yang cocok dengan urutan titik di bab hari
  • Poster statis tanpa WebGL, satu bingkai diam untuk gerak dikurangi
  • Dimuat terpisah setelah konten tampil, 140 KB gzip

Jadwal dan kapal

  • Keberangkatan mingguan otomatis dari hari yang Anda tentukan
  • Kotak sisa kursi, saringan paket dan bulan, sembunyikan yang penuh
  • Tautan daftar tunggu WA untuk tanggal penuh
  • Dua kapal dengan denah samping yang bisa disorot per kabin
  • Tabel harga per orang per kabin per paket

Pesan dan DP

  • Penghitung total dan DP menempel di pojok (bilah bawah di ponsel), dengan tombol jumlah tamu
  • DP 30%, 50%, atau lunas; pelunasan H-14; wajib lunas bila berangkat kurang dari 14 hari
  • Validasi berbahasa Indonesia: nomor WA 08/62/+62, sisa kursi, aturan kabin privat
  • Pratinjau pesan sebelum dikirim ke wa.me
  • Tidak menyimpan data tamu di situs

Isi halaman

  • Termasuk, tidak termasuk, dan daftar bawaan
  • Aturan kapten, izin berlayar, prakiraan BMKG, panduan musim 12 bulan
  • Galeri kartu pos dengan tampilan besar (ganti dengan foto Anda)
  • Buku tamu dengan ulasan berlabel contoh
  • Tanya jawab khusus open trip, halaman privasi & ketentuan, 404

Animasi 3D

Konsep

Peta kepulauan Komodo low-poly: bukit savana, pantai pasir, air bershader yang bergelombang. Garis rute navy tergambar dari Labuan Bajo sampai akhir hari yang sedang dibuka tamu, dengan kapal kecil berlayar oranye di ujungnya. Yang dijual open trip adalah rutenya, jadi peta ini menjawab pertanyaan pertama tamu: hari ini ke mana saja.

Tanpa WebGL / gerak dikurangi

Tanpa WebGL tampil poster JPEG dari render yang sama (rute lengkap) dengan keterangan; penyusun rute, jadwal, dan pesan tetap berfungsi. Dengan prefers-reduced-motion peta menggambar satu bingkai diam dan rute langsung di posisi akhir.

Screenshot

  1. 01Peta rute 3DKartu judul dengan dua paket di atas peta kepulauan. Rute tergambar sampai akhir hari 2; nomor pin di peta sama dengan nomor titik di bab hari.desktop
  2. 02Bab hari 4H3MHari 3 ke Siaba Besar dengan add-on pemandu biota laut tercentang. Penghitung pojok merinci 2 x harga kabin + add-on, lalu total dan DP 30%.desktop
  3. 03Jadwal dan sisa kursiPapan keberangkatan: satu kotak satu kursi, tanggal penuh diberi stempel dan tautan daftar tunggu, tanggal terpilih ditandai.desktop
  4. 04Kapal dan kabinDenah samping phinisi dengan kabin berbagi disorot, spesifikasi kapal, dan keterangan tiap kabin.desktop
  5. 05Tabel hargaHarga per orang untuk 3H2M dan 4H3M per jenis kabin. Kabin privat baru saja dipilih dan masuk ke formulir.desktop
  6. 06Cuaca dan keselamatanLima aturan kapten dan panduan musim. Januari dipilih: berombak, rute sering disesuaikan.desktop
  7. 07GaleriKartu pos ilustrasi pengganti dengan ukuran beragam; ketuk untuk tampilan besar.desktop
  8. 08Formulir dan DPTiap pilihan DP menulis jumlah yang dibayar sekarang. DP 50% dipilih; ringkasan menampilkan total, sisa, dan tanggal pelunasan H-14.desktop
  9. 09Pesan siap dikirimPratinjau pesan WhatsApp dengan rute per hari, kabin, DP, dan catatan, lalu tombol kirim ke admin.desktop
  10. 10Peta di ponselPilihan paket di atas, peta kepulauan dengan pin bernomor, garis rute 2D di bawahnya.mobile
  11. 11Add-on di ponselSet snorkel pribadi dicentang, bilah bawah langsung menunjukkan total dan DP baru.mobile
  12. 12Jadwal di ponselBaris tanggal disusun ulang untuk layar sempit, tombol selebar layar.mobile
  13. 13Kirim ke WhatsApp di ponselPesan lengkap siap dikirim, tombol besar untuk ibu jari.mobile

Cara Pasang

  1. Ekstrak dan pasang

    Ekstrak zip, buka terminal di foldernya.

    npm install

  2. Isi data trip

    Ganti nama operator, rute, add-on, kapal, kabin, dan harga di src/data.ts. Hari keberangkatan mingguan di src/logic.ts (SCHEDULE).

    npm run dev

  3. Nomor WA admin

    Buat file .env berisi nomor format internasional tanpa +.

    VITE_WA_NUMBER=6281234567890

  4. Build dan unggah

    Unggah isi folder dist/ ke hosting. Langkah Vercel, Netlify, cPanel, dan nginx ada di docs/INSTALL.md.

    npm run build

Isi Paket

  • src/: halaman, logika harga/DP/jadwal/pesan WA, peta 3D, ilustrasi denah dan galeri
  • src/data.ts: semua isi trip dalam satu file
  • index.html, privasi.html, 404.html
  • docs/: INSTALL, CUSTOMIZE, CARA-KERJA bergambar
  • tests/: uji unit, e2e Playwright, skrip tangkapan layar dan sampul
  • design/: sistem desain, riset, catatan iterasi
  • LICENSE.txt, NOTICE.md, CHANGELOG.md

Kustomisasi

  • Nama operator, titik kumpul, dan nomor WA
  • Rute tiap hari, jam, catatan, dan add-on beserta harganya
  • Pulau di peta 3D (posisi, ukuran, tinggi) untuk destinasi lain
  • Kapal, kabin, dan harga per orang
  • Hari keberangkatan mingguan dan sisa kursi
  • Besar DP dan batas pelunasan
  • Warna, huruf, dan foto galeri

FAQ

Apakah perlu server atau database?

Tidak. Hasil build berupa file statis. Pesan dikirim tamu sendiri lewat WhatsApp, jadi tidak ada data yang disimpan di situs.

Bagaimana memperbarui sisa kursi?

Di demo, sisa kursi adalah contoh yang stabil per tanggal. Ganti fungsi `departures()` di `src/logic.ts` dengan daftar asli (tanggal, paket, kapal, kapasitas, sisa kursi), misalnya dari ekspor Google Sheet, lalu build ulang. Caranya dijelaskan di docs/CUSTOMIZE.md.

Bisa untuk destinasi selain Labuan Bajo?

Bisa. Pulau di peta 3D, rute, dan zona waktu diatur di `src/data.ts`. Ganti posisi pulau dan titik kunjungan, peta menyesuaikan sendiri.

Apakah ada pembayaran online?

Tidak di versi ini. Tamu mengirim ringkasan ke WA, admin membalas dengan nomor rekening. Ini disengaja supaya tanpa biaya payment gateway dan tanpa server.

Foto galeri dan ulasan bagaimana?

Galeri berisi ilustrasi pengganti dan ulasan diberi label contoh. Ganti dengan foto dan ulasan asli tamu Anda; langkahnya di docs/CUSTOMIZE.md.

Apakah peta 3D berat di ponsel?

Peta dimuat setelah konten tampil (140 KB gzip), resolusi turun otomatis di ponsel lambat, dan berhenti menggambar saat tidak terlihat. Di ponsel tanpa WebGL tampil gambar statis.

Changelog

  1. v1.0.0
    26 September 2026
    • Rilis pertama
Open Trip Bajo
Rp 399.000
Demo ↗