Landing Page

Kemitraan Kopi

Landing waralaba kopi: booth 3D terakit saat digulir, simulator BEP, ajukan via WhatsApp.

Versi 1.0.0Diperbarui 27 September 202614 screenshot

Kemitraan Kopi — Hero dan booth terurai — Hero dan booth teruraiBooth 3D tampil terurai dengan nomor bagian 1 sampai 6, kartu hitung balik modal sudah siap di kanan.1 / 14

Ringkasan

Halaman penawaran kemitraan untuk merek kopi dan F&B. Calon mitra melihat isi paket Booth, Kios, dan Kafe terakit bagian demi bagian, menghitung balik modal dengan harga sewa dan harga jual di kotanya, lalu mengirim pengajuan ke WhatsApp admin. Statis, tanpa server, tanpa kunci API.

Masalah yang diselesaikan

Calon mitra selalu bertanya hal yang sama di WhatsApp: modalnya berapa, dapat apa saja, kapan balik modal, sudah ada STPW belum. Brosur PDF tidak menjawab "kalau di kota saya sewanya Rp 2 juta, bagaimana?", dan admin menghabiskan jam kerja menghitung ulang BEP satu per satu. Sementara halaman kemitraan yang ada kebanyakan hanya tiga kartu harga dan tombol WA, tanpa rincian isi paket, tanpa penjelasan legal, jadi yang datang banyak yang tidak serius.

Cocok untuk

Pemilik merek kopi, minuman, atau camilan yang membuka kemitraan
Agensi dan freelancer yang membuat halaman waralaba untuk klien F&B
Konsultan waralaba yang butuh simulasi BEP untuk calon mitra

Hasil yang kamu dapat

Booth 3D terakit bagian demi bagian saat digulir, sesuai paket yang dipilih
Kalkulator balik modal ikut sepanjang halaman: investasi, gelas/hari, harga, HPP, sewa, royalti
Peringatan tertulis saat angka rugi atau balik modal lebih dari 3 tahun
Pengajuan masuk ke WhatsApp sudah lengkap dengan paket, modal, lokasi, dan hasil simulasi
FAQ legal waralaba: STPW, prospektus 2 minggu, royalti, zona, cara berhenti
Semua isi di satu berkas data: ganti merek, paket, dan outlet dalam hitungan menit

Bahasa desain

Aleo + Karla · bengkel rakit, kopi sangrai, papan nama

Fitur

Rakitan 3D

Tiga model low-poly berbeda: Booth, Kios, Kafe
Enam langkah (rangka, mesin, kanopi & papan nama, dinding & kursi, bahan baku, pelatihan & kasir)
Nomor bagian 1 sampai 6 dengan garis penunjuk, langkah aktif berwarna oranye
Ganti paket: model terurai lalu merakit ulang
Poster statis bila WebGL tidak ada; satu bingkai diam bila gerak dikurangi
three.js dimuat belakangan (±130 KB gzip), merender hanya saat ada perubahan

Simulator balik modal

Slider investasi, gelas per hari, harga jual, HPP per gelas
Biaya bulanan (sewa, gaji, listrik) dan royalti % omzet
Rincian ala struk: omzet, HPP + royalti, biaya bulanan, laba bersih, titik impas, balik modal
Kurva saldo kas 24 bulan dengan penanda bulan balik modal
Lembar bawah di ponsel, bisa ditutup dengan Escape

Isi halaman

Lembar spesifikasi tiga paket (tab per paket di ponsel)
Peta outlet SVG tanpa Google Maps + saring per kota
Cek kota: sudah ada outlet atau belum, dan aturan zona
Jadwal onboarding 8 minggu model gantt
Catatan mitra dengan cap Contoh (ganti dengan kutipan asli)
Halaman kebijakan privasi (UU PDP) dan halaman 404

Pengajuan ke WhatsApp

Validasi bahasa Indonesia: nama, nomor 08…/+62…, kota, paket, modal, status lokasi
Pratinjau pesan diperbarui saat mengetik
Nomor HP dinormalkan ke +62 di pesan
Paket di formulir dan kalkulator selalu sama
Tidak ada data yang disimpan di server

Animasi 3D

Konsep

Booth kopi low-poly yang terakit bagian demi bagian mengikuti gulir: rangka, mesin, kanopi dan papan nama, dinding dan kursi, bahan baku, kasir. Calon mitra melihat persis apa yang dibeli di paket pilihannya, dan model berganti saat paket di kalkulator diganti.

Tanpa WebGL / gerak dikurangi

Tanpa WebGL tampil poster booth terakit beserta keterangan; dengan prefers-reduced-motion model digambar satu bingkai diam per perubahan. Kalkulator dan semua isi lain tetap jalan.

Screenshot

01Hero dan booth teruraiBooth 3D tampil terurai dengan nomor bagian 1 sampai 6, kartu hitung balik modal sudah siap di kanan.desktop
02Rakit langkah demi langkahLangkah 3: kanopi dan papan nama mendarat, nama bagian ditempel di model dan pita kemajuan 6 langkah di bawah panggung. Tiap langkah membandingkan isi Booth, Kios, dan Kafe.desktop
03Booth terakit + simulatorBooth selesai terakit. Gelas per hari digeser ke 55: rincian ala struk (omzet, HPP + royalti, biaya bulanan, laba bersih) dan balik modal langsung berubah.desktop
04Paket KafeMemilih Kafe mengganti model 3D. Biaya bulanan dinaikkan: peringatan balik modal lebih dari 3 tahun menggantikan kurva kas.desktop
05Lembar spesifikasiInvestasi, luas, tim, menu, royalti, contoh balik modal, dan isi tiap bagian untuk tiga paket.desktop
06Peta outletPeta skematis dengan pin per kota. Yogyakarta dipilih: daftar menyaring ke dua outlet.desktop
07Jadwal 8 mingguDari survei lokasi, prospektus 2 minggu, tanda tangan, pelatihan, pemasangan, sampai buka.desktop
08Formulir ke WhatsAppFormulir terisi dengan pratinjau pesan WA, termasuk ringkasan simulasi paket Kios.desktop
09FAQ legalTiga dokumen yang wajib diterima sebelum tanda tangan, dan FAQ STPW serta beda waralaba dengan kemitraan.desktop
10Hero di ponselJudul dan dua ajakan, panggung 3D mulai terlihat di bawah.mobile
11Rakitan di ponselPanggung 3D menempel di atas langkah yang bergulir, bilah balik modal di bawah.mobile
12Kalkulator di ponselLembar bawah dengan slider selebar layar dan target sentuh 44px.mobile
13Validasi formulirKirim tanpa isian: setiap kolom memberi pesan jelas dalam bahasa Indonesia.mobile
14Spesifikasi di ponselSatu paket per tab supaya tabel tetap terbaca di layar 390px.mobile

Cara Pasang

1
Ekstrak & pasang
Ekstrak zip, buka terminal di foldernya.
```
npm install
```
2
Isi nomor WA
Salin .env.example menjadi .env lalu isi VITE_WA_NUMBER (format 628…).
```
cp .env.example .env
```
3
Jalankan
Buka http://localhost:4409.
```
npm run dev
```
4
Build & unggah
Unggah isi folder dist/ ke hosting Anda. Panduan Vercel, Netlify, cPanel, dan nginx ada di docs/INSTALL.md.
```
npm run build
```

Isi Paket

src/: halaman, kalkulator, peta, formulir, model 3D (three.js)
src/data.ts: merek, paket, isi per langkah, outlet, jadwal dalam satu berkas
index.html, privasi.html, 404.html
tests/: uji logika (vitest), uji browser dan tangkapan layar (Playwright)
docs/: INSTALL, CUSTOMIZE, CARA-KERJA
design/: sistem desain, riset, catatan iterasi

Kustomisasi

Nama merek, nomor WA, nomor STPW di `src/data.ts`
Harga, HPP, sewa, royalti, dan rentang slider tiap paket
Isi paket per langkah (atau "Tidak termasuk")
Daftar outlet dengan koordinat: pin peta menyesuaikan sendiri
Warna di token CSS dan warna model 3D
Menambah bagian 3D baru dengan satu baris `add(...)`

FAQ

Apakah angka balik modalnya bisa diganti dengan angka usaha saya?

Bisa. Investasi, gelas per hari, harga, HPP, biaya bulanan, dan royalti tiap paket ada di `src/data.ts`. Rumusnya terpisah di `src/roi.ts` dan sudah diuji.

Pengajuan calon mitra disimpan di mana?

Tidak disimpan di server. Tombol kirim membuka WhatsApp dengan pesan terisi ke nomor admin Anda. Kalau ingin juga masuk ke Google Sheet atau CRM, tambahkan pemanggilan webhook di fungsi submit formulir.

Apakah perlu Google Maps API?

Tidak. Peta outlet adalah SVG di dalam kode, jadi tidak ada kunci API, biaya, atau permintaan ke layanan luar.

Merek saya kemitraan, bukan waralaba resmi. Apakah FAQ legal tetap cocok?

FAQ sudah membedakan waralaba dan kemitraan biasa. Sesuaikan jawabannya dengan perjanjian Anda dan periksa dengan notaris atau konsultan hukum sebelum tayang.

Bisa dipakai untuk minuman lain, misalnya teh atau roti?

Bisa. Ganti teks dan angka di `src/data.ts`; model 3D memakai meja bar, kanopi, dan papan nama yang cocok untuk gerobak minuman dan camilan. Bagian model bisa ditambah atau dihapus di `src/three/scene.ts`.

Apakah model 3D membuat halaman berat di HP murah?

Teks dan kalkulator tampil lebih dulu. three.js dimuat setelahnya (±130 KB gzip), hanya merender saat ada perubahan, dan berhenti saat keluar layar. Uji otomatis mensyaratkan minimal 45 fps di layar 390px dengan CPU diperlambat 4x.

Changelog

v1.0.0
26 September 2026
- Rilis pertama