PlatterTea — Food & Tea Ordering Website

PlatterTea adalah brand Food & Tea asal Purwokerto yang menyajikan perpaduan Mix Platter dan tea dalam satu paket praktis — Mix, Sip, Enjoy! Untuk kebutuhan promosi dan pemesanan online-nya, saya membangun website production-ready yang menjadi etalase digital brand: dari landing page yang memperkenalkan identitas brand, katalog menu interaktif, hingga alur pemesanan lengkap yang berujung di WhatsApp admin — tanpa aplikasi tambahan, tanpa antre.

Fitur Utama

• Website multi-halaman: beranda (hero, keunggulan, cara pesan, testimoni), halaman Menu, halaman Promo Market Days, halaman Tentang Kami lengkap dengan galeri foto & maskot brand, halaman FAQ, dan halaman Kontak — dengan navigasi konsisten di desktop maupun mobile.
• Katalog menu interaktif: kartu produk dengan foto, deskripsi, harga, dan badge FAVORIT — terfilter per kategori (Platter, Tea, Combo) plus koleksi Tea Collection.
• Keranjang pesanan: atur jumlah per item, isi nama & catatan pesanan, lihat ringkasan, kosongkan keranjang — isinya tersimpan di browser sehingga tidak hilang saat halaman di-refresh.
• Checkout via WhatsApp: teks pesanan tersusun otomatis (paket, varian tea, jumlah, nama, catatan) dan siap dikirim ke admin dalam sekali klik.
• Promo & Open PO: banner promo Market Days (diskon Rp2.000 semua produk), timeline Open PO mulai H-7 hingga pengambilan di booth, plus tombol salin format pesanan.
• Command palette (Ctrl+K) & pencarian produk: navigasi cepat untuk melompat ke menu atau section mana pun tanpa scroll panjang.
• Testimoni interaktif: carousel testimoni pelanggan dengan form untuk menulis testimoni baru langsung dari website.

Desain & Pengalaman Pengguna

Desain mengusung identitas brand yang ceria dan menggugah selera — palet warna hangat khas produk F&B, tipografi ramah, visual produk yang konsisten, serta animasi halus di setiap section. Seluruh halaman dirancang mobile-first karena mayoritas pengunjung brand F&B datang dari share link WhatsApp dan Instagram. Aksesibilitas juga diperhatikan: struktur heading semantik, label ARIA pada seluruh kontrol (tombol keranjang, tab kategori, dialog), serta navigasi skip-link.

Teknologi

Dibangun dengan Next.js dan TypeScript, styling dengan Tailwind CSS, lalu di-deploy di Vercel. Struktur komponen yang modular menjaga halaman tetap ringan dimuat meski kaya konten visual — code splitting per section dan aset teroptimasi menjaga performa di jaringan mobile.

Melalui proyek ini saya berlatih menerjemahkan kebutuhan bisnis nyata — branding, promosi event kampus, dan alur pemesanan praktis — menjadi pengalaman digital utuh dari halaman publikasi sampai konversi pesanan. Kunjungi versi live melalui tautan demo di bawah untuk merasakan langsung alur memilih menu hingga checkout via WhatsApp.