Ruang Seduh

Website Company Profile Coffee Shop html · css · vercel

Latar Belakang Banyak coffee shop hanya mengandalkan Instagram untuk tampil online. Calon pelanggan sulit menemukan informasi dasar seperti menu, harga, jam buka, dan lokasi di satu tempat. Padahal untuk coffee shop specialty, cerita di balik kopinya (asal biji, proses sangrai, cara penyeduhan) justru menjadi nilai jual utama.

Detail

(01)

Solusi Website company profile yang tidak hanya menyajikan informasi, tetapi juga membangun suasana. Pengunjung diajak "masuk" ke kafe lewat pengalaman scroll yang bercerita: dari suasana bar, cerita brand, menu andalan, proses kopi, sampai ajakan untuk datang langsung.

Fitur Utama

Hero imersif. Foto bar kopi dimulai sebagai bingkai kecil, lalu membesar memenuhi layar saat di-scroll, diikuti teks perkenalan dan tombol menu. Menu signature horizontal. Di desktop, scroll ke bawah menggerakkan deretan menu ke samping, lengkap dengan indikator progres. Di HP berubah menjadi galeri yang tinggal digeser. Menu lengkap dengan tab. Kategori Kopi, Non-Kopi, dan Makanan dengan harga, deskripsi singkat, serta label "Favorit" dan "Baru". Cerita proses. Empat tahap dari kebun ke cangkir. Foto di samping berganti otomatis mengikuti bagian yang sedang dibaca. Galeri dan testimoni. Galeri dengan efek kedalaman saat di-scroll, dan ulasan pelanggan yang berjalan dua arah. Status buka/tutup otomatis. Dihitung dari jam WIB secara real-time, dan hari ini ditandai di tabel jam operasional. Reservasi via WhatsApp. Pesan sudah terisi otomatis. Ada juga tombol langsung ke Google Maps.

Desain & Pengalaman Pengguna

Identitas visual hangat. Palet cokelat espresso, krem, dan aksen oranye terakota, terinspirasi warna kopi dan suasana kafe di sore hari. Tipografi kontras. Huruf grotesk tebal dipadu serif miring untuk kesan modern sekaligus artisan. Ritme halaman. Pergantian bagian gelap dan terang membuat halaman panjang tetap nyaman dibaca. Animasi detail: layar pembuka berupa cangkir yang terisi kopi dengan uap mengepul judul yang muncul kata demi kata foto yang tersingkap perlahan kursor khusus dan tombol yang mengikuti gerakan mouse Mobile-first. Menu navigasi HP terbuka melingkar penuh layar, dan semua bagian disusun ulang supaya nyaman dibuka dengan satu tangan. Aksesibilitas. Animasi otomatis dikurangi untuk pengguna yang mengaktifkan pengaturan "kurangi gerakan" di perangkatnya.

Teknologi

(02)
  • 01 html
  • 02 css
  • 03 vercel

Butuh sistem seperti Ruang Seduh?

Ceritakan kebutuhan bisnis Anda — Odoo ERP, aplikasi web, atau mobile.