LayananPaketPortofolioMarketplaceCara KerjaFAQ
Mulai project →Akun0813 4079 780
Landing Page

Barbershop

Landing barbershop: putar dial sisir, pilih barber dan jam, pesan siap kirim ke WhatsApp

Versi 1.0.0Diperbarui 5 Oktober 202616 screenshot

Hero tiket dan tiangFoto barber dipotong tiang barber, tiket antrean NB-0413 di atas foto, ubin porselen.1 / 16
Hero tiket dan tiang1 / 16
Barbershop — Hero tiket dan tiang

Foto barber dipotong tiang barber, tiket antrean NB-0413 di atas foto, ubin porselen.

Ringkasan

Landing page barbershop dengan dial sisir 1 sampai 12 mm yang menampilkan nama gaya dan menyaring layanan, pilihan barber, jam 30 menit WIB, ringkasan nomor yang ikut berubah, dan pesan WhatsApp siap kirim. Dilengkapi papan harga, paket member 5+1, kalkulator hemat setahun, FAQ, dan lokasi. Tanpa server, tanpa biaya bulanan.

Masalah yang diselesaikan

Admin barbershop membalas pertanyaan yang sama di WhatsApp: jam berapa kosong, siapa yang bisa, harga potong berapa. Pelanggan yang tidak mendapat jawaban cepat pergi ke tempat lain. Situs biasa hanya memajang foto dan tombol hubungi kami, jadi pesannya masuk setengah jadi.

Cocok untuk
  • Pemilik barbershop
  • Jaringan cukur rambut kecil
  • Agensi yang membuat situs untuk barbershop
Hasil yang kamu dapat
  • Pelanggan memilih gaya, layanan, barber, dan jam sebelum chat admin
  • Pesan WhatsApp masuk lengkap: layanan, barber, hari, jam WIB, catatan
  • Paket 5+1 dan kalkulator hemat setahun mendorong pelanggan berulang
  • Hero terang dengan tiket antrean nyata, tiket cetak setelah booking, foto dan video ilustrasi AI yang mudah diganti
  • Ganti isi cukup di satu berkas data, tanpa backend
Bahasa desain
Righteous + Saira · ubin porselen terang, tiang barber merah-putih, tiket antrean kertas

Fitur

Booking

  • Dial sisir 1 sampai 12 mm dengan bilah gauge dan nama gaya
  • Layanan yang tidak masuk akal dikaburkan, layanan terbaik dipilih otomatis
  • Tiga barber dengan foto, 7 hari mulai hari ini, Senin dan hari libur nasional tanggal tetap otomatis tutup (hari raya bergerak ditambahkan pemilik)
  • Slot 30 menit WIB; jam yang sudah lewat tidak ditawarkan, hari ini tutup setelah slot terakhir; sebagian slot bergaris putus-putus sebagai contoh jam penuh
  • Ringkasan nomor sticky yang ikut berubah
  • Validasi nomor WA 08/62/+62, pesan galat berbahasa Indonesia
  • Tiket antrean tercetak setelah pesan tersusun: nomor, nama, layanan, barber, jadwal, kode batang, sobekan terlepas
  • Pesan tersusun lengkap, tombol wa.me; tidak ada data tersimpan

Isi halaman

  • Papan harga dengan tombol Pesan per baris
  • Paket member 5+1 dengan kartu punch dan hitungan hemat
  • Kalkulator hemat setahun
  • Ulasan (berlabel contoh), FAQ, lokasi dan jam buka, halaman privasi dan 404

Gerak dan media

  • Hero terang: foto barber dipotong tiang barber berputar, tiket antrean bergerigi menimpa foto
  • Tim barber dengan potret 3:4 penuh dan tombol Pilih
  • Dua video kecil di bingkai (proses dan close-up clipper), diam saat gerak dikurangi
  • Teks masuk bertahap, bagian masuk saat gulir, footer berlapis dengan paralaks
  • Foto dan video ilustrasi AI (FlatKey); ganti dengan foto usaha Anda

Kualitas

  • Target sentuh minimal 44 px, fokus keyboard terlihat, kontras AA
  • Diuji di 320, 390, 768, 1440 px; 60 fps di ponsel dengan CPU 4x lebih lambat

Animasi 3D

Konsep

Tanpa 3D dekoratif. Keputusan 5 Okt 2026: kepala dan clipper three.js dibuang karena tampak kasar; diganti foto dan video realistis serta gauge sisir interaktif yang merupakan bagian alat.

Tanpa WebGL / gerak dikurangi

Tidak ada WebGL. Gerak dikurangi: semua statis, video hanya poster.

Screenshot

  1. 01Hero tiket dan tiangFoto barber dipotong tiang barber, tiket antrean NB-0413 di atas foto, ubin porselen.desktop
  2. 02Dial sisir dan gayaDial 1 sampai 12 mm menggerakkan bilah gauge, nama gaya, dan menyaring layanan yang masuk akal.desktop
  3. 03Barber, hari, jamPilih barber dan jam 30 menit WIB; kartu ringkasan nomor menempel di samping dan ikut berubah.desktop
  4. 04Di kursiDua video kecil dalam bingkai: pangkas sisi dan close-up clipper.desktop
  5. 05Papan hargaHarga tetap, durasi, tombol Pesan per baris, dan foto perlengkapan.desktop
  6. 06Tim barberPotret 3:4 penuh dengan strip tiang barber, label gaya, dan tombol Pilih.desktop
  7. 07Paket member 5+1Kartu punch terisi satu per satu, hitungan hemat jelas.desktop
  8. 08Kalkulator hemat setahunGeser kunjungan per bulan, lihat biaya biasa, biaya paket, dan hemat setahun.desktop
  9. 09Tanya jawabPertanyaan yang sering ditanya di meja kasir.desktop
  10. 10Lokasi dan jam bukaDenah sederhana, jam buka WIB, dan foto ilustrasi hasil skin fade.desktop
  11. 11Footer berlapisKartu footer di atas adegan foto yang bergerak lebih lambat saat gulir.desktop
  12. 12Tiket tercetakSetelah pesan tersusun, tiket antrean tercetak lengkap dan sobekannya terlepas.desktop
  13. 13Hero di ponselJudul, tombol 44 px, chip, dan tiket di atas foto.mobile
  14. 14Dial di ponselDial dan gauge di layar 390 px.mobile
  15. 15Pilih jam di ponselPita hari dan slot 30 menit yang mudah diketuk.mobile
  16. 16Tiket di ponselTiket tercetak dan pesan siap kirim ke WhatsApp.mobile

Cara Pasang

  1. Ekstrak dan pasang

    Ekstrak zip, buka terminal di foldernya.

    npm install

  2. Isi data barbershop

    Ganti nama, alamat, nomor WA, layanan, barber, dan harga di src/data/barbershop.ts. Ganti foto di public/.

    npm run dev

  3. Bangun dan unggah

    Unggah isi dist/ ke hosting. Panduan di docs/INSTALL.md.

    npm run build

Isi Paket

  • src/: halaman, logika dial, slot, paket, kalkulator
  • src/data/: seluruh isi barbershop
  • index.html, privasi.html, 404.html
  • public/: foto dan video ilustrasi AI
  • docs/: INSTALL, CUSTOMIZE, CARA-KERJA
  • tests/: uji unit, e2e Playwright, skrip tangkapan layar
  • design/: sistem desain, riset, catatan iterasi
  • LICENSE.txt, NOTICE.md, CHANGELOG.md

Kustomisasi

  • Nama, alamat, nomor WA
  • Layanan, harga, rentang sisir
  • Barber dan foto
  • Jam buka dan hari libur (daftar bawaan hanya libur nasional tanggal tetap; tambahkan Idul Fitri, Idul Adha, cuti bersama tiap tahun)
  • Paket member, ulasan, FAQ
  • Warna lewat token CSS
  • Foto dan video hero

FAQ

Apakah perlu server atau database?

Tidak. Hasil build berupa file statis; formulir hanya menyusun pesan WhatsApp.

Apakah foto dan video asli barbershop?

Bukan. Semuanya ilustrasi buatan AI (FlatKey) dengan tokoh fiktif. Ganti dengan foto usaha Anda; caranya di `docs/CUSTOMIZE.md`.

Bisakah dipakai untuk satu barber saja?

Bisa. Hapus barber lain di `src/data/barbershop.ts`.

Apakah ada pembayaran online?

Tidak. Pembayaran di tempat; situs hanya mengatur jadwal.

Bagaimana cara mengganti nomor WA?

Di `.env` (`VITE_WA_ADMIN_NUMBER`) atau `src/data/barbershop.ts`, dan tautan wa.me di `index.html`.

Changelog

  1. v1.0.0
    5 Oktober 2026
    • Rilis pertama
    • Hero terang: tiang barber memotong foto, tiket antrean nyata
    • Tiket tercetak setelah booking, potret barber 3:4, dua video kecil
    • Dial sisir dengan gauge, kalkulator hemat, footer berlapis
    • Foto dan video ilustrasi AI, tanpa three.js
Barbershop
Rp 349.000
Demo ↗