ASINANQUEEN adalah brand F&B multi-outlet (asinan, rujak, salad buah, dessert) dengan 146K+ pengikut Instagram tapi belum punya website sendiri. Proyek ini membangun rumah digital brand tersebut: satu tempat untuk memesan, membaca ceritanya, dan menemukan cabang terdekat.
Semua konten di sini masih data contoh untuk keperluan demo. Tidak ada transaksi yang benar-benar diproses.
Penjelasan lengkapnya ada di PDF
12 bagian dalam Bahasa Indonesia: latar brand, tujuan, struktur situs, alur pemesanan, design system lengkap dengan palet warna, aturan konten, teknologi, sampai rincian timeline 4 minggu.
Tujuan
- •Mendorong pesanan lewat kanal yang sudah dipakai brand (WhatsApp, Instagram, marketplace)
- •Menceritakan brand story: dari craving pribadi jadi bisnis multi-cabang
- •Membantu pelanggan menemukan outlet terdekat di Malang, Surabaya, dan Jakarta
- •Jadi "rumah" resmi brand yang bisa ditemukan lewat pencarian, bukan cuma Instagram
Yang dibangun
- Home
- Hero mascot, menu unggulan, value proposition, teaser lokasi, social proof
- Menu
- Dikelompokkan per kategori, harga, foto, filter per kota
- Lokasi
- Outlet per kota lengkap dengan alamat, jam buka, peta, dan kontak
- Cerita Kami
- Founder story, positioning fresh & sehat, milestone brand
- Pesan
- Rute ke WhatsApp / Instagram / marketplace — tanpa checkout sendiri
- Kontak
- Jalur terpisah untuk franchise, partnership, dan press
Pemesanan sengaja tidak punya cart/checkout sendiri — setiap CTA “Pesan” berujung ke WhatsApp, Instagram, atau link marketplace milik outlet yang bersangkutan.
Timeline — 4 minggu
Minggu 1 — Discovery & fondasi
PRD, design system (palet, tipografi, komponen), arsitektur teknis, dan rules konten disepakati lebih dulu — supaya keputusan desain tidak diulang tiap halaman.
Minggu 2 — Kerangka & halaman utama
Setup Next.js + Tailwind dengan design token, layout global (header, footer, navigasi mobile), komponen shared, dan halaman Home.
Minggu 3 — Menu, Lokasi & konten
Menu berkategori dengan filter kota, direktori outlet per kota, halaman Cerita Kami, Pesan, dan Kontak — plus struktur data yang bisa ditambah cabang baru tanpa ubah kode.
Minggu 4 — Polish, QA & launch
SEO per kota, aksesibilitas (tap target 44px, kontras, keyboard), optimasi gambar dan performa mobile, review preview, lalu deploy produksi.
Teknologi
- Next.js (App Router)
- Static/ISR untuk loading cepat di mobile dan SEO lokal
- Tailwind CSS
- Design token dari design system langsung jadi utilitas
- next/font (Fredoka + Poppins)
- Font self-hosted, tidak memblokir render
- Next.js Image
- Gambar responsif & lazy-load — situs ini berat foto
- Google Maps embed
- Rute "get directions" per outlet
- Vercel
- Auto-deploy plus preview per perubahan untuk review brand
