LayananPaketPortofolioMarketplaceCara KerjaFAQ
Mulai project →Akun0813 4079 780
Landing Page

Festival Tiket

Landing tiket festival: peta zona berkuota, jadwal anti-bentrok, pesanan rapi ke WhatsApp

Versi 1.0.0Diperbarui 27 September 202615 screenshot

Sampul dan panggung 3DNama festival, tanggal, venue, harga termurah, jam gerbang, aturan KTP. Di kanan panggung three.js: empat sorot, kabut, penonton, dinding LED berisi lineup.1 / 15
Sampul dan panggung 3D1 / 15
Festival Tiket — Sampul dan panggung 3D

Nama festival, tanggal, venue, harga termurah, jam gerbang, aturan KTP. Di kanan panggung three.js: empat sorot, kabut, penonton, dinding LED berisi lineup.

Ringkasan

Landing page untuk festival dan konser yang menjual tiket sendiri. Pengunjung memilih zona langsung di peta dengan harga dan sisa kuota, dapat diskon terusan dan rombongan otomatis, lalu pesanan lengkap dengan NIK tersamar masuk ke WhatsApp admin atau langsung ke tautan pembayaran. Ada lineup bergaya poster, penyusun jadwal pribadi, dan panggung 3D yang lampunya bergerak mengikuti gulir.

Masalah yang diselesaikan

Tiket festival lokal biasanya dijual lewat DM dan formulir Google: calon penonton bertanya harga tiap zona, sisa kuota, bisa diskon kalau beli berempat atau tidak, jam main band favoritnya, dan boleh refund atau tidak. Admin menjawab pertanyaan yang sama ratusan kali, salah hitung diskon, dan calo membeli banyak tiket atas nama orang lain. Platform tiket besar memotong persentase dan tidak memberi halaman yang terasa seperti festivalnya sendiri.

Cocok untuk
  • Promotor dan EO festival musik lokal
  • Panitia konser kampus dan pensi sekolah
  • Gig organizer dan kolektif musik
  • Agensi yang membuat situs acara musik
Hasil yang kamu dapat
  • Pengunjung melihat harga dan sisa kuota tiap zona langsung di peta, bukan lewat DM
  • Diskon terusan 2 hari dan rombongan 4+ tiket dihitung otomatis, tidak ada salah hitung admin
  • Pesanan masuk WhatsApp lengkap: kode, zona, jumlah, total, nama KTP, NIK tersamar
  • Nama KTP + NIK 16 angka di checkout untuk menekan calo
  • Penyusun jadwal menandai set bentrok dan membuat kartu jadwal siap dibagikan
  • Tanpa server dan biaya bulanan; isi festival cukup diganti di satu berkas
Bahasa desain
Bebas Neue + Barlow · poster gig, majalah musik, lampu marquee

Fitur

Zona dan tiket

  • Peta zona SVG: klik atau keyboard, zona terpilih berwarna, zona habis bergaris miring
  • Sisa kuota per hari di peta, tabel, dan lencana pemilih
  • Tiket harian atau terusan 2 hari (hemat 15%)
  • Paket rombongan 4+ tiket (hemat 10%) dengan tawaran "tambah 1 tiket"
  • Batas 6 tiket per KTP dan batas sisa kuota
  • Tabel harga lengkap dengan tombol Pilih

Checkout

  • Nama sesuai KTP, NIK 16 angka, email, WhatsApp 08/62/+62, persetujuan refund
  • Pesan galat berbahasa Indonesia, aria-invalid, fokus ke kolom salah
  • Kode pesanan, potongan tiket, tombol tautan pembayaran (Midtrans / Xendit / Duitku)
  • Ringkasan pesanan ke WhatsApp admin dengan NIK tersamar
  • Halaman bayar contoh dengan keadaan galat

Lineup dan jadwal

  • Lineup poster per hari, ukuran nama mengikuti urutan tampil
  • Saring per panggung, ketuk nama untuk memasukkan ke jadwal
  • Papan waktu tiga panggung 14.00 sampai 23.30 WIB
  • Seret set ke pita Jadwalku atau ketuk; tersimpan di peramban
  • Deteksi bentrok dan pindah panggung kurang dari 10 menit
  • Kartu jadwal PNG 1080×1350, unduh atau bagikan, atau kirim sebagai teks ke WA

Isi halaman

  • Panduan venue: jam penting, cara datang, parkir, boleh dan tidak boleh dibawa, fasilitas
  • Tabel refund per kejadian
  • FAQ khusus festival
  • Ulasan berlabel contoh
  • Halaman privasi dan syarat tiket (UU 27/2022), halaman 404

3D dan kualitas

  • Panggung three.js: sorot, kabut, penonton, dinding LED berisi lineup
  • Sorot dan kabut mengikuti gulir, dinding LED mengikuti hari yang dipilih
  • Poster statis tanpa WebGL, bingkai diam untuk gerak dikurangi
  • Target sentuh minimal 44 px, fokus keyboard terlihat, kontras AA
  • Diuji di 320, 390, 768, 1440 px

Animasi 3D

Konsep

Panggung Samudra dari kode: empat sorot aditif, kabut partikel, penonton, dan dinding LED yang menampilkan lineup hari terpilih. Sorot bergeser dari kipas ke silang dan memerah saat halaman digulir, jadi rasa berada di depan panggung ikut naik saat pengunjung mendekati bagian tiket.

Tanpa WebGL / gerak dikurangi

Tanpa WebGL tampil poster JPEG dari render yang sama; dengan pengaturan kurangi gerakan, panggung satu bingkai diam dan kedip lineup mati.

Screenshot

  1. 01Sampul dan panggung 3DNama festival, tanggal, venue, harga termurah, jam gerbang, aturan KTP. Di kanan panggung three.js: empat sorot, kabut, penonton, dinding LED berisi lineup.desktop
  2. 02Sorot mengikuti gulirDigulir sedikit, sorot mulai menyilang dan memerah. Dinding LED sudah menampilkan lineup Minggu karena tab Minggu dipilih di lineup.desktop
  3. 03Lineup sebagai posterNama ditumpuk tiga ukuran seperti poster gig. Nama bergaris bawah merah sudah masuk jadwal pribadi; umpan balik muncul di bawah poster.desktop
  4. 04Peta zona dan diskonZona Festival dipilih di peta. Terusan 2 hari × 4 tiket: potongan terusan 15% dan paket rombongan 10% dihitung otomatis, total Rp 4.008.000, dengan total hemat dan harga normal dicoret di bawahnya. Zona yang tinggal di bawah 12% kuota ditulis "tinggal" dengan bilah merah.desktop
  5. 05Pesanan siap bayarPotongan tiket dengan kode pesanan, tombol ke tautan pembayaran dan tombol kirim ringkasan ke WhatsApp admin.desktop
  6. 06Tabel harga dan kuotaHarga harian, terusan, dan sisa kuota per hari untuk semua zona. Tribun Timur Sabtu habis; sisa di bawah 12% kuota ditandai "hampir habis".desktop
  7. 07Jadwalku dengan bentrokPapan waktu per panggung. Set bentrok bergaris miring, pita Jadwalku menempel di bawah layar dan menulis bentrok serta pindah panggung yang mepet.desktop
  8. 08Kartu jadwal PNGKartu 1080×1350 bergaya poster dibuat dari pilihan pengunjung, siap diunduh atau dibagikan ke Instagram dan WhatsApp. Setelah diunduh, dialog menyebut nama berkas yang tersimpan.desktop
  9. 09Panduan venueJam penting hari itu, cara datang, parkir, barang boleh dan tidak boleh dibawa.desktop
  10. 10Refund dan FAQKebijakan refund sebagai tabel kejadian, lalu FAQ: anak, nama beda KTP, beli di lokasi, hujan, terusan dua orang.desktop
  11. 11Sampul di ponselMasthead, panggung 3D, lalu paragraf pembuka dan dua tombol.mobile
  12. 12Lineup di ponselPoster tetap terbaca di 390 px; nama besar mudah diketuk.mobile
  13. 13Peta zona di ponselPeta menampilkan nama dan bilah kuota; harga dan rincian ada di panel di bawahnya.mobile
  14. 14Validasi pembeliTiap kolom diperiksa saat ditinggalkan: yang benar diberi tanda centang, NIK kurang angka, email tanpa domain, dan nomor bukan WhatsApp ditolak dengan pesan Indonesia yang jelas.mobile
  15. 15Jadwal di ponselPapan waktu digeser di wadahnya sendiri, pita Jadwalku padat dengan tiga tombol.mobile

Contoh hasil

  • Kartu jadwalku — Kartu PNG 1080×1350 yang dibuat pengunjung dari set pilihannya, termasuk tanda bentrok.
    Kartu jadwalkuKartu PNG 1080×1350 yang dibuat pengunjung dari set pilihannya, termasuk tanda bentrok.

Cara Pasang

  1. Ekstrak dan pasang

    Ekstrak zip, buka folder di terminal.

    npm install

  2. Isi data festival

    Ubah nama, tanggal, zona, harga, kuota, lineup, nomor WA, dan tautan bayar di src/data.ts.

    npm run dev

  3. Build dan unggah

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

    npm run build

Isi Paket

  • src/: halaman, data festival, logika harga dan jadwal, kartu PNG, panggung 3D
  • index.html, privasi.html, bayar.html, 404.html
  • tests/: uji logika (vitest), uji peramban (Playwright), skrip tangkapan layar
  • docs/: INSTALL, CUSTOMIZE, CARA-KERJA bergambar
  • design/: sistem desain, riset, catatan iterasi
  • LICENSE.txt, NOTICE.md, CHANGELOG.md

Kustomisasi

  • Nama festival, tanggal, venue, nomor WA di satu objek
  • Zona, harga, kuota, persentase diskon, biaya layanan, batas per KTP
  • Lineup, jam, panggung (poster, papan waktu, dinding LED ikut berubah)
  • Tautan pembayaran Midtrans / Xendit / Duitku
  • Warna lewat 5 token CSS
  • Bentuk zona di peta (path SVG)

FAQ

Apakah pembayaran otomatis terverifikasi?

Tidak di template statis ini. Tombol bayar mengarah ke tautan pembayaran penyedia pilihanmu, dan admin mencocokkan pembayaran dengan kode pesanan dari WhatsApp lalu mengirim e-tiket. Untuk verifikasi otomatis kamu butuh server kecil yang menerima webhook penyedia; cara menyambungkannya dijelaskan di CUSTOMIZE.

Sisa kuota diperbarui sendiri?

Angka sisa ada di `src/data.ts` dan diberi label data contoh. Perbarui manual setiap rekap penjualan, atau ambil dari API sistem tiketmu dengan satu `fetch`.

Venue saya bentuknya lain, peta bisa diganti?

Bisa. Setiap zona adalah satu path SVG di kanvas 600×520 dengan titik label; nama, harga, dan bilah kuota mengikuti otomatis.

Data NIK pembeli disimpan di mana?

Tidak di situs. Data hanya disusun jadi pesan WhatsApp yang dikirim pembeli sendiri, dengan NIK tersamar 4 angka awal dan akhir.

Bisa untuk acara satu hari atau tiga panggung lebih?

Bisa. Hari dan panggung diatur di data; untuk satu hari, sisakan satu entri di `days` dan pakai tiket harian saja.

HP penonton kentang, 3D-nya berat?

Panggung dimuat belakangan setelah konten siap, jumlah partikel dikurangi di ponsel, dan render diperlambat otomatis bila GPU lemah. Tanpa WebGL tampil poster statis.

Changelog

  1. v1.0.0
    26 September 2026
    • Rilis pertama
Festival Tiket
Rp 399.000
Demo ↗