WarungSehat — Katering Sehat
Landing langganan katering sehat berfoto: lihat isi kotak per sasaran, susun paket, harga sebulan langsung keluar, kirim ke WhatsApp
Versi 1.0.0Diperbarui 5 Oktober 202619 screenshot
Ringkasan
Landing page langganan katering sehat harian dan mingguan, dipimpin foto kotak makan lima sekat. Pilih sasaran (jaga berat, turun BB, bangun otot, keto, bebas gula) dan lihat sekat mana yang ditambah, dikurangi, atau diganti lengkap dengan kalori, protein, karbo, lemak. Penyusun paket menghitung per kotak, per hari, per minggu, dan per bulan di docket, membandingkannya dengan pesan lewat aplikasi dan katering biasa, lalu pesan WhatsApp terisi otomatis dengan tanggal mulai WIB (Minggu dan libur nasional diganti). Tanpa server dan tanpa biaya bulanan.
Admin katering menjawab pertanyaan yang sama tiap hari di WhatsApp: per kotak berapa, minimal berapa hari, bisa pilih menu tidak, diantar kapan, ongkirnya berapa. Calon pelanggan yang tidak bisa menghitung sendiri biasanya pergi. Situs katering umumnya cuma memajang menu dan tombol "hubungi kami", jadi chat masuk setengah jadi dan admin harus tanya balik satu per satu. Langganan yang mestinya otomatis malah jadi pekerjaan tanya-jawab manual.
- Usaha katering harian/mingguan dan meal-prep sehat
- Katering diet (turun BB, keto, bebas gula)
- Jasa antar makanan sehat ke kantor atau rumah
- Agensi yang membuat situs untuk bisnis makanan lokal
- Foto kotak makan lima sekat yang berubah mengikuti sasaran: sekat ditambah, dikurangi, atau diganti, plus makro gizi
- Calon pelanggan menyusun paket sendiri dan melihat harga per minggu + per bulan sebelum chat
- Kartu pembanding bertumpuk: pesan lewat aplikasi vs katering biasa vs langganan Anda, dihitung dari paket yang sedang disusun
- Pesan WhatsApp masuk lengkap: paket, waktu makan, porsi, hari, zona, tanggal mulai WIB, alamat, estimasi total
- Tanggal libur nasional dan Minggu otomatis dilewati dan ditandai "diganti"
- Ganti isi usaha cukup di satu file data, tanpa backend
Fitur
Foto isi kotak
- Foto kotak lima sekat dengan label per sekat; klik sekat atau baris untuk menyorot
- Sasaran mengubah status sekat (standar, ditambah, dikurangi, diganti) dan nama isinya
- Makro per kotak makan siang: kkal, protein, karbo, lemak dengan batang proporsional
- Tab sasaran di bagian isi kotak tersinkron dua arah dengan penyusun paket dan docket
Penyusun paket + docket
- Sasaran: jaga berat, turun BB, bangun otot, keto, bebas gula dengan tambahan harga per kotak
- Waktu makan sarapan/siang/malam dengan harga per kotak, hari per minggu 3-6, porsi 1-4
- Zona antar 3 tingkat (pusat gratis, lingkar Rp 25.000, tepi Rp 45.000 per minggu)
- Mode langganan sekali/mingguan (-5%)/bulanan (-10%) dengan hemat yang terlihat
- Docket per kotak, per hari, per minggu, ongkir, hemat, per bulan; kartu pembanding harga bertumpuk
Tanggal mulai ke WhatsApp
- Pita tanggal 14 hari mulai besok (WIB), Minggu dan libur nasional SKB otomatis dilewati
- Tanggal libur ditandai "diganti" ke hari kerja berikutnya
- Validasi nama, nomor WA 08/62/+62, dan alamat dengan pesan galat berbahasa Indonesia
- Pesan tersusun lengkap dengan tombol wa.me ke nomor usaha
- Tidak menyimpan data pelanggan di situs
Isi halaman
- Rotasi menu minggu berupa kartu per hari dengan batang kalori
- Tabel harga per kotak per sasaran + kartu pembanding bulanan
- Seksi standar dapur (jam masak, alergen, gula) siap diganti data usaha
- Cara pesan empat langkah dan cakupan tiga zona pengiriman
- Ulasan (berlabel contoh), FAQ, halaman privasi UU PDP, halaman 404
- Waktu konsisten WIB sesuai kota contoh (Jakarta Selatan)
Gerak, kualitas, dan akses
- Judul hero masuk kata demi kata, foto bergerak halus saat gulir, kartu kaca (liquid glass) di nav, fakta, dan CTA
- Gerak dikurangi (prefers-reduced-motion): semua animasi mati, teks langsung terlihat
- Target sentuh minimal 44 px, fokus keyboard terlihat, kontras AA diukur di halaman
- Diuji di 320, 390, 768, 1440 px; gulir minimal 30 fps di ponsel dengan CPU 4x lebih lambat
Animasi 3D
Tidak ada 3D dekoratif. Kotak makan 3D versi awal terlihat seperti mainan, jadi diganti foto kotak makan fotorealistik yang menjadi pusat halaman. Interaksi penyusun ulang isi kotak per sasaran dibangun di atas foto itu: lima sekat bisa diklik, ditandai standar/ditambah/dikurangi/diganti, dan dilengkapi makro gizi.
Foto statis dengan teks alternatif; semua interaksi (sasaran, sekat, penyusun paket, formulir) berjalan tanpa WebGL. Dengan prefers-reduced-motion semua animasi mati.
Screenshot
- 01Hero berfotoFoto kotak makan lima sekat di kanan, judul masuk bertahap, kartu kaca untuk harga mulai dan jam pesan.desktop
- 02Isi kotak sasaran ketoSekat nasi dan buah diganti alpukat + kembang kol dan almond; daftar sekat dan makro ikut berubah.desktop
- 03Penyusun paketSasaran keto, 2 porsi, zona lingkar, langganan bulanan: tiga kolom kontrol di atas, baki hari di bawahnya.desktop
- 04Baki hari horizontalEnam sekat hari dengan kompartemen sarapan/siang/malam yang terisi sesuai pilihan, docket menempel di dasar baki.desktop
- 05Tanggal mulai dan formulirPita tanggal 14 hari (WIB), langkah setelah pesan terkirim, dan formulir penerima ke WhatsApp.desktop
- 06Rotasi menu mingguKartu per hari dengan waktu makan, hidangan, dan batang kalori perkiraan.desktop
- 07Harga dan pembandingTabel harga per sasaran dan tiga kartu bertumpuk: aplikasi, katering biasa, langganan Anda.desktop
- 08Standar dapurEmpat angka kepercayaan (jam masak, waktu antar, alergen, gula) siap diganti data usaha.desktop
- 09Cara pesan empat langkahSusun paket, pilih zona, tentukan tanggal mulai, kirim lewat WhatsApp.desktop
- 10Ulasan contohCatatan berlabel "contoh" dengan inisial dan kota fiktif, siap diganti.desktop
- 11Tanya jawabFAQ akordeon: skip hari, libur, porsi, alergi, bayar, pause.desktop
- 12Jangkauan pengirimanTiga zona radial dari dapur pusat dengan daftar kecamatan dan batas pesan 18.00 WIB.desktop
- 13Ajakan akhir dan footerPita ajakan dengan video kurir sebagai latar gelap, kartu kaca, dan footer berlapis dengan nama merek besar.desktop
- 14Hero di ponselFoto di atas judul, CTA besar mudah diketuk, fakta ringkas satu baris.mobile
- 15Isi kotak di ponselFoto dengan sekat bernomor, tab sasaran besar, status sekat ditandai bingkai kunyit.mobile
- 16Penyusun paket di ponselChip sasaran dan waktu makan berukuran jempol; nampan hari menggeser di kontainernya.mobile
- 17Baki hari di ponselKartu hari digeser horizontal; kompartemen terisi dan docket di bawahnya.mobile
- 18Tanggal dan formulir di ponselPita tanggal digeser horizontal, formulir besar untuk jempol.mobile
- 19Harga di ponselTabel harga dan kartu pembanding bertumpuk rapi di layar sempit.mobile
Cara Pasang
Ekstrak dan pasang
Ekstrak zip, buka terminal di foldernya.
npm installIsi data usaha
Ganti nama, nomor WA, kota, zona, menu, dan harga di
src/data.ts.npm run devBangun dan unggah
Unggah isi folder
dist/ke hosting. Panduan Vercel, Netlify, cPanel, dan nginx ada didocs/INSTALL.md.npm run build
Isi Paket
- src/: halaman, logika penyusun paket dan pembanding, semua data usaha dalam satu file
- src/data.ts: semua isi usaha dalam satu file
- public/img/ dan public/video/: 8 foto dan 2 video latar ilustrasi AI (ganti dengan foto usaha Anda)
- index.html, privasi.html, 404.html
- docs/: INSTALL, CUSTOMIZE, CARA-KERJA bergambar
- tests/: uji unit, e2e Playwright, skrip tangkapan layar
- design/: sistem desain, riset, catatan iterasi
- LICENSE.txt, NOTICE.md, CHANGELOG.md
Kustomisasi
- Nama usaha, kota, jam operasional, dan nomor WhatsApp (file data tunggal `src/data.ts`)
- Waktu makan dan harga per kotak, tambahan harga per sasaran
- Jumlah hari per minggu dan mode diskon langganan
- Zona antar, jarak, ongkir, dan daftar kecamatan
- Rotasi menu minggu, ulasan, FAQ, dan teks cara kerja
- Warna merek lewat token CSS dan logo SVG
- Zona waktu WIB/WITA/WIT dan daftar hari libur SKB
FAQ
Apakah perlu server atau database?
Tidak. Hasil build berupa file statis. Formulir hanya menyusun pesan WhatsApp; data pelanggan tidak disimpan di situs.
Bisakah dipakai untuk katering di luar Jakarta Selatan?
Bisa. Ganti kota, zona, dan daftar kecamatan di `src/data.ts`, sesuaikan zona waktu di `src/logic.ts` kalau bukan WIB, lalu sesuaikan daftar hari libur SKB di `src/data.ts`.
Bagaimana cara kerjanya menghitung harga?
Per kotak = harga waktu makan + tambahan sasaran. Per hari = jumlah kotak terpilih x porsi. Per minggu = per hari x hari terpilih, dipotong diskon mode langganan. Per bulan = (per minggu x 4) + ongkir x 4. Logika ini diuji di `tests/unit/logic.test.ts`.
Bisakah menambah sasaran atau waktu makan baru?
Bisa, cukup tambahkan objek di `SASARAN` atau `MAKAN` pada `src/data.ts`. Docket, nampan hari, dan pembanding harga menyesuaikan; tambahkan juga isinya di `ISI_SASARAN`; tambahkan uji untuk harga barunya.
Apakah ulasannya asli?
Tidak. Ulasan bawaan berlabel "contoh" dengan inisial fiktif. Ganti dengan ulasan asli pelanggan Anda (dengan izin) sebelum situs tayang.
Apakah halaman memakai AI?
Tidak. Penyusun paket adalah aturan tetap yang bisa dibaca dan diubah pemilik usaha. Satu-satunya AI di produk ini adalah foto contoh yang dibuat saat build (FlatKey), bukan foto usaha nyata, dan harus diganti dengan foto Anda sebelum dipakai.
Foto di demo bukan foto usaha nyata?
Benar. Foto dan angka di demo adalah ilustrasi. Semua foto dan video dibuat dengan AI; ganti `public/img/hero-bento.jpg` dengan foto kotak makan Anda (rasio persegi) dan atur posisi lima sekat di `KOMPARTEMEN` pada `src/data.ts`.
Changelog
- v1.0.0
5 Oktober 2026- Rilis pertama
- Foto kotak makan lima sekat sebagai pusat halaman; isi per sasaran, makro gizi, kartu pembanding harga bertumpuk
- Penyusun paket dengan docket per kotak/hari/minggu/bulan, pita tanggal 14 hari WIB (Minggu + libur diganti), formulir ke pesan WhatsApp otomatis
- Seksi menu, harga, standar dapur, cara pesan, ulasan, FAQ, jangkauan; kaca cair dan gerak bertahap