System Requirements Document for sam-coffee

1. Introduction

SAM Coffee adalah brand kopi keliling (mobile coffee) berkarakter anak muda, santai, berani, dan dekat dengan pelanggan. Dokumen ini menetapkan persyaratan untuk sebuah website modern yang memperkenalkan SAM Coffee, menampilkan menu dan harga, menjelaskan cara pesan, menunjukkan area operasional, menampilkan promo dan konten sosial, serta mengarahkan pelanggan untuk memesan dan menemukan SAM Coffee di jalan.

Produk ini melayani dua audiens aktif:

• Pelanggan SAM Coffee — pengunjung mobile-first yang ingin menemukan SAM Coffee dan memesan kopi tanpa ribet.
• Pengelola Konten & Promo SAM Coffee — anggota tim SAM Coffee yang menjaga situs tetap hidup dan relevan bagi pelanggan muda.

Tujuan produk: warna biru #1234BD harus langsung terasa sebagai identitas visual utama SAM Coffee saat website pertama kali dibuka, dengan pengalaman yang modern, clean, youthful, energetic, premium tetapi tetap dekat dan santai — bukan tampilan website korporat yang formal.

2. System Overview

Website SAM Coffee adalah situs publik mobile-first dengan satu halaman pembuka anonim (Landing) yang menyatukan hero, menu, tentang, cara pesan, lokasi, promo, sosial media, CTA, dan footer. Di belakangnya, tim SAM Coffee memakai ruang kerja terproteksi untuk menjaga kartu promo, preview konten Instagram/TikTok, area operasional, dan jam operasional tetap akurat, sehingga pelanggan selalu melihat informasi terbaru tanpa perlu bantuan developer.

Aktor dan kepemilikan:

• Pelanggan SAM Coffee berinteraksi secara anonim di Landing: melihat menu dan harga, menekan "Pesan Sekarang" atau "Lihat Menu", menghubungi SAM Coffee via WhatsApp/Instagram/TikTok, mengecek lokasi operasional lewat "Cari SAM Coffee", serta melihat promo dan konten sosial.
• Pengelola Konten & Promo SAM Coffee masuk melalui Login (verifikasi berulang) dan bekerja di Promo, Social Content, dan Locations.
• WhatsApp, Instagram, dan TikTok adalah kanal eksternal milik pihak ketiga; website mengarahkan pelanggan ke kanal tersebut, bukan menggantikan fungsinya.

Batasan sempit yang berlaku saat ini: tidak ada katalog produk yang dapat dikelola dari dalam situs, tidak ada keranjang belanja atau checkout di dalam website, tidak ada akun pelanggan, dan tidak ada pelacakan posisi real-time kendaraan. Pemesanan terjadi melalui kanal kontak eksternal sesuai alur "Cara Pesan".

2a. Product Interpretation and Delivery Boundary

Kepemilikan delivery. Seluruh pengalaman pelanggan disajikan sebagai halaman web milik SAM Coffee sendiri (first-party), dioptimalkan untuk layar ponsel dan tetap rapi di tablet dan desktop. Navigasi bersifat sticky di bagian atas, scroll terasa halus, dan animasi ringan mengiringi pergerakan halaman.

Kepemilikan akses. Landing bersifat publik dan anonim — pelanggan tidak perlu membuat akun untuk melihat menu, promo, lokasi, atau konten sosial. Identitas milik aplikasi hanya diperlukan untuk tim internal: Pengelola Konten & Promo SAM Coffee menerima undangan atau provisioning, lalu melakukan verifikasi berulang melalui Login untuk membuka ruang kerja pengelolaan. Ruang kerja Promo, Social Content, dan Locations bersifat terbatas untuk peran pengelola; tidak ada peran lain yang ditetapkan oleh sumber.

Batas current vs future. Semua perilaku yang dijelaskan pada dokumen ini adalah lingkup saat ini. Tidak ada kebutuhan masa depan yang diterima dari sumber; karena itu tidak ada bagian future yang dijanjikan.

Kanal eksternal. Instagram, TikTok, dan WhatsApp tetap dimiliki dan dioperasikan oleh penyedianya. Website hanya menampilkan tautan, tombol, dan preview konten; percakapan pemesanan dan interaksi sosial terjadi di kanal tersebut.

2b. Source Content Inventory

Tidak ada direktif referensi dengan content_source pada proyek ini, sehingga tidak ada Source Content Inventory yang disertakan.

2c. Page Content and Component Coverage

Landing

Halaman pembuka anonim yang menyatukan seluruh pengalaman pelanggan SAM Coffee dalam satu alur scroll.

• Informasi/state: headline hero "KOPI ENAK, KETEMU DI JALAN.", subheadline "SAM Coffee hadir buat nemenin perjalanan, kerja, nongkrong, dan hari-hari lu.", daftar produk beserta harga, narasi tentang SAM Coffee, empat langkah cara pesan, area operasional dan jam operasional, kartu promo aktif, preview konten Instagram/TikTok, CTA penutup, dan informasi footer.
• Aksi utama: "Lihat Menu" (menuju section menu), "Temukan SAM Coffee" (menuju section lokasi), "Pesan Sekarang" pada setiap kartu produk dan pada CTA penutup (mengarahkan ke kanal kontak SAM Coffee), "Cari SAM Coffee" (menampilkan area operasional), tombol Instagram dan TikTok, serta tautan WhatsApp, lokasi, dan jam operasional di footer.
• Aksi pendukung: navigasi sticky untuk berpindah antar section, hover animation pada button dan product card, smooth scrolling.
• Domain entities: Produk (foto, nama, deskripsi singkat, harga), Kartu Promo (judul, isi, masa berlaku), Konten Sosial (platform, preview), Area Operasional (nama area, jam operasional), Kanal Kontak (WhatsApp, Instagram, TikTok).
• Tanggung jawab komponen:
  • Hero — headline, subheadline, dua tombol, visual kopi dan kendaraan kopi keliling, elemen dekorasi biru #1234BD (shape, garis, bubble, pattern).
  • Menu — kartu produk putih dengan border atau shadow halus dan aksen biru #1234BD; setiap kartu memuat foto produk, nama produk, deskripsi singkat, harga, dan tombol "Pesan Sekarang".
  • Tentang SAM Coffee — storytelling "BUKAN CUMA KOPI, KAMI DATANG NYARI LU." beserta penjelasan kopi keliling yang lebih dekat ke pelanggan, dengan foto tim atau kendaraan SAM Coffee.
  • Cara Pesan — empat langkah bernomor (1 Pilih menu, 2 Hubungi SAM Coffee, 3 Kami datang, 4 Nikmati kopi lu) dengan icon sederhana bergaya modern.
  • Lokasi — section "SAM Coffee Lagi Dimana?" dengan desain map/location card untuk area operasional dan tombol "Cari SAM Coffee".
  • Promo — section dengan desain lebih mencolok namun tetap biru #1234BD dan putih, headline "LAGI ADA PROMO NIH\x20\xf0\x9f\x91\x80", dan kartu promo yang dapat diperbarui dengan mudah.
  • Social Media — section "FOLLOW PERJALANAN SAM COFFEE" dengan grid preview konten Instagram/TikTok dan tombol Instagram serta TikTok.
  • CTA — section besar sebelum footer dengan headline "SEKALI COBA, BAKAL TAHU BEDANYA.", subheadline "Jangan cuma lihat dari jauh. Cari SAM Coffee dan cobain sendiri.", dan button "Pesan Sekarang".
  • Footer — logo SAM Coffee, Instagram, TikTok, WhatsApp, Lokasi, Jam operasional, dan Copyright SAM Coffee.
  • Loading animation — animasi sederhana memakai elemen brand SAM Coffee saat halaman dimuat.
• State:
  • Loading: loading animation sederhana dengan elemen brand SAM Coffee.
  • Empty: bila belum ada kartu promo aktif, section promo menampilkan headline "LAGI ADA PROMO NIH\x20\xf0\x9f\x91\x80" tanpa kartu; bila belum ada konten sosial, grid menampilkan placeholder dan tombol Instagram/TikTok tetap tersedia; bila area operasional belum diisi, section lokasi menampilkan ajakan menghubungi SAM Coffee lewat kanal kontak.
  • Success: seluruh section tampil dengan data terbaru dari ruang kerja pengelola; tombol "Pesan Sekarang" membuka kanal kontak SAM Coffee.
  • Error: bila data promo, sosial, atau lokasi gagal dimuat, section terkait menampilkan pesan singkat dan tombol kanal kontak tetap berfungsi.
  • Recovery: pengunjung dapat memuat ulang halaman atau langsung memakai tombol WhatsApp/Instagram/TikTok di footer.

Login

Halaman verifikasi untuk Pengelola Konten & Promo SAM Coffee.

• Informasi/state: form verifikasi identitas pengelola, pesan status, dan konteks bahwa halaman ini khusus tim SAM Coffee.
• Aksi utama: mengirim kredensial untuk verifikasi; setelah berhasil, pengelola diarahkan ke ruang kerja pengelolaan.
• Aksi pendukung: menerima dan menyelesaikan undangan atau provisioning yang diberikan kepada pengelola.
• Domain entities: Identitas Pengelola (kredensial, status undangan/provisioning).
• Tanggung jawab komponen: form verifikasi, penanganan status undangan/provisioning, dan pengalihan ke ruang kerja setelah verifikasi berhasil.
• State:
  • Loading: indikator proses saat verifikasi dikirim.
  • Empty: halaman verifikasi tanpa data tambahan.
  • Success: verifikasi berhasil dan pengelola masuk ke ruang kerja pengelolaan.
  • Error: kredensial tidak valid atau undangan/provisioning belum aktif; pengelola dapat mencoba lagi.
  • Recovery: pengelola dapat mengulang verifikasi atau meminta undangan/provisioning baru dari tim SAM Coffee.

Promo

Ruang kerja terproteksi untuk mengelola kartu promo yang ditampilkan pada Landing.

• Informasi/state: daftar kartu promo beserta judul, isi, dan status tayang.
• Aksi utama: membuat, memperbarui, dan menghapus kartu promo dengan mudah.
• Aksi pendukung: menandai kartu promo yang aktif tampil di Landing.
• Domain entities: Kartu Promo (judul, isi, masa berlaku, status tayang).
• Tanggung jawab komponen: daftar kartu promo, editor kartu, dan kontrol publikasi ke Landing.
• State:
  • Loading: indikator saat daftar kartu promo dimuat.
  • Empty: belum ada kartu promo; pengelola diarahkan membuat kartu pertama.
  • Success: perubahan tersimpan sebagai state durable dan tampil konsisten pada Landing.
  • Error: penyimpanan gagal; perubahan tidak diterapkan dan pengelola dapat mencoba lagi.
  • Recovery: pengelola dapat mengulang penyimpanan atau membatalkan perubahan.

Social Content

Ruang kerja terproteksi untuk memperbarui preview konten Instagram dan TikTok.

• Informasi/state: daftar item konten sosial beserta platform dan preview.
• Aksi utama: menambah, memperbarui, dan menghapus item preview konten Instagram/TikTok.
• Aksi pendukung: mengatur urutan tampil item pada grid Landing.
• Domain entities: Konten Sosial (platform, preview, urutan).
• Tanggung jawab komponen: daftar item konten, editor preview, dan kontrol urutan grid.
• State:
  • Loading: indikator saat daftar konten dimuat.
  • Empty: belum ada item konten; pengelola diarahkan menambah item pertama.
  • Success: perubahan tersimpan sebagai state durable dan grid Landing menampilkan konten terbaru.
  • Error: penyimpanan gagal; perubahan tidak diterapkan dan pengelola dapat mencoba lagi.
  • Recovery: pengelola dapat mengulang penyimpanan atau membatalkan perubahan.

Locations

Ruang kerja terproteksi untuk menjaga area operasional dan jam operasional tetap akurat.

• Informasi/state: daftar area operasional beserta jam operasional masing-masing.
• Aksi utama: menambah, memperbarui, dan menghapus area operasional serta jam operasionalnya.
• Aksi pendukung: menandai area yang sedang aktif ditampilkan pada Landing.
• Domain entities: Area Operasional (nama area, jam operasional, status aktif).
• Tanggung jawab komponen: daftar area operasional, editor area dan jam, serta kontrol publikasi ke Landing.
• State:
  • Loading: indikator saat daftar area dimuat.
  • Empty: belum ada area operasional; pengelola diarahkan menambah area pertama.
  • Success: perubahan tersimpan sebagai state durable dan section lokasi Landing menampilkan area serta jam terbaru.
  • Error: penyimpanan gagal; perubahan tidak diterapkan dan pengelola dapat mencoba lagi.
  • Recovery: pengelola dapat mengulang penyimpanan atau membatalkan perubahan.

3. Functional Requirements

FR-01 — Identitas brand SAM Coffee As a Pelanggan SAM Coffee, I should melihat nama brand SAM Coffee, konsep Mobile Coffee / Kopi Keliling, warna utama #1234BD, dan warna pendukung putih #FFFFFF secara konsisten di seluruh halaman so that saya langsung mengenali SAM Coffee saat website terbuka.

• Provenance: explicit
• Lifecycle: dipicu saat halaman dimuat; hasil yang dapat diamati adalah seluruh permukaan memakai biru #1234BD sebagai warna branding utama dengan dominasi biru dan putih serta sedikit warna netral; kegagalan pemuatan aset brand ditangani dengan memuat ulang halaman; lanjutan adalah menjelajah section berikutnya.

FR-02 — Gaya visual dan tipografi As a Pelanggan SAM Coffee, I should merasakan gaya visual modern, clean, youthful, energetic, premium tetapi tetap dekat dan santai, dengan typography bold, modern, dan mudah dibaca so that situs terasa seperti brand kopi jalanan anak muda, bukan website korporat formal.

• Provenance: explicit
• Lifecycle: berlaku sepanjang kunjungan; hasil yang dapat diamati adalah tipografi bold yang mudah dibaca dan tata visual yang tidak formal; lanjutan adalah membaca konten tanpa hambatan.

FR-03 — Hero section As a Pelanggan SAM Coffee, I should melihat halaman pembuka dengan headline "KOPI ENAK, KETEMU DI JALAN." dan subheadline "SAM Coffee hadir buat nemenin perjalanan, kerja, nongkrong, dan hari-hari lu." so that saya langsung tertarik pada SAM Coffee.

• Provenance: explicit
• Lifecycle: dipicu saat Landing dibuka; hasil yang dapat diamati adalah headline dan subheadline tampil menonjol di area pembuka; lanjutan adalah menekan salah satu tombol hero.

FR-04 — Tombol hero As a Pelanggan SAM Coffee, I should menekan tombol "Lihat Menu" dan "Temukan SAM Coffee" pada hero so that saya dapat langsung menuju menu atau informasi lokasi.

• Provenance: explicit
• Lifecycle: dipicu oleh ketukan pada tombol; hasil yang dapat diamati adalah halaman bergulir halus ke section menu atau section lokasi; kegagalan navigasi ditangani dengan menggulir manual; lanjutan adalah melihat menu atau area operasional.

FR-05 — Visual dan dekorasi hero As a Pelanggan SAM Coffee, I should melihat foto/ilustrasi kopi dan kendaraan kopi keliling sebagai visual utama hero, ditambah elemen dekorasi biru #1234BD berupa shape, garis, bubble, atau pattern yang terinspirasi brand SAM Coffee so that hero terasa hidup dan khas SAM Coffee.

• Provenance: explicit
• Lifecycle: dipicu saat hero dirender; hasil yang dapat diamati adalah visual kopi dan kendaraan kopi keliling beserta elemen dekorasi biru; kegagalan pemuatan visual ditangani dengan memuat ulang halaman; lanjutan adalah menjelajah section berikutnya.

FR-06 — Section menu produk As a Pelanggan SAM Coffee, I should melihat section menu yang menampilkan produk SAM Coffee dalam bentuk kartu modern, mencakup Kopi Susu, Kopi Sanger, Matcha, Matcha Strawberry, Americano, Chocolate, dan minuman lainnya so that saya tahu apa yang bisa saya pesan.

• Provenance: explicit
• Lifecycle: dipicu saat saya mencapai section menu; hasil yang dapat diamati adalah daftar kartu produk yang dapat dibaca; lanjutan adalah memilih produk untuk dipesan.

FR-07 — Detail setiap produk As a Pelanggan SAM Coffee, I should melihat foto produk, nama produk, deskripsi singkat, harga, dan tombol "Pesan Sekarang" pada setiap kartu produk so that saya dapat memutuskan pesanan dengan informasi lengkap.

• Provenance: explicit
• Lifecycle: dipicu saat kartu produk dirender; hasil yang dapat diamati adalah kelima elemen tampil pada setiap kartu; kegagalan pemuatan foto produk ditangani dengan menampilkan kartu tanpa foto namun nama, deskripsi, harga, dan tombol tetap terbaca; lanjutan adalah menekan "Pesan Sekarang".

FR-08 — Gaya kartu produk As a Pelanggan SAM Coffee, I should melihat kartu produk berwarna putih dengan border atau shadow yang halus dan aksen biru #1234BD so that menu terasa clean dan tetap konsisten dengan identitas brand.

• Provenance: explicit
• Lifecycle: berlaku saat kartu produk dirender; hasil yang dapat diamati adalah kartu putih dengan aksen biru; lanjutan adalah membaca detail produk.

FR-09 — Section tentang SAM Coffee As a Pelanggan SAM Coffee, I should membaca storytelling "BUKAN CUMA KOPI, KAMI DATANG NYARI LU." yang menjelaskan bahwa SAM Coffee adalah kopi keliling yang hadir lebih dekat dengan pelanggan dan ingin membuat pengalaman minum kopi menjadi lebih mudah, santai, dan menyenangkan, disertai foto tim atau kendaraan SAM Coffee so that saya mengenal SAM Coffee sebagai brand yang dekat dan santai.

• Provenance: explicit
• Lifecycle: dipicu saat saya mencapai section tentang; hasil yang dapat diamati adalah narasi dan foto tim atau kendaraan; lanjutan adalah membaca cara pesan.

FR-10 — Alur cara pesan As a Pelanggan SAM Coffee, I should melihat alur sederhana cara pesan: 1) Pilih menu, 2) Hubungi SAM Coffee, 3) Kami datang, 4) Nikmati kopi lu, dengan icon sederhana bergaya modern so that saya tahu langkah yang harus saya lakukan untuk memesan.

• Provenance: explicit
• Lifecycle: dipicu saat saya mencapai section cara pesan; hasil yang dapat diamati adalah empat langkah bernomor dengan icon modern; lanjutan adalah mengikuti langkah pertama dengan memilih menu.

FR-11 — Section lokasi As a Pelanggan SAM Coffee, I should melihat section "SAM Coffee Lagi Dimana?" yang menampilkan area operasional SAM Coffee dengan desain seperti map/location card dan tombol "Cari SAM Coffee" so that saya tahu di mana bisa menemukan SAM Coffee.

• Provenance: explicit
• Lifecycle: dipicu saat saya mencapai section lokasi; hasil yang dapat diamati adalah area operasional dalam tampilan map/location card dan tombol "Cari SAM Coffee"; bila area operasional belum tersedia, section menampilkan ajakan menghubungi SAM Coffee lewat kanal kontak; lanjutan adalah menekan "Cari SAM Coffee" atau menghubungi SAM Coffee.

FR-12 — Section promo As a Pelanggan SAM Coffee, I should melihat section promo dengan desain lebih mencolok namun tetap memakai identitas biru #1234BD dan putih, dengan headline "LAGI ADA PROMO NIH\x20\xf0\x9f\x91\x80" dan kartu promo yang dapat diperbarui dengan mudah so that saya selalu tahu promo yang sedang berjalan.

• Provenance: explicit
• Lifecycle: dipicu saat saya mencapai section promo; hasil yang dapat diamati adalah headline promo dan kartu promo terbaru; bila belum ada kartu promo aktif, headline tetap tampil tanpa kartu; lanjutan adalah memanfaatkan promo saat memesan.

FR-13 — Section social media As a Pelanggan SAM Coffee, I should melihat section "FOLLOW PERJALANAN SAM COFFEE" yang menampilkan preview konten Instagram/TikTok dalam bentuk grid, dengan tombol Instagram dan TikTok so that saya dapat mengikuti perjalanan SAM Coffee.

• Provenance: explicit
• Lifecycle: dipicu saat saya mencapai section sosial; hasil yang dapat diamati adalah grid preview konten dan dua tombol platform; bila belum ada konten, grid menampilkan placeholder dan tombol tetap tersedia; lanjutan adalah membuka Instagram atau TikTok SAM Coffee.

FR-14 — Section CTA As a Pelanggan SAM Coffee, I should melihat section besar sebelum footer dengan headline "SEKALI COBA, BAKAL TAHU BEDANYA.", subheadline "Jangan cuma lihat dari jauh. Cari SAM Coffee dan cobain sendiri.", dan button "Pesan Sekarang" so that saya terdorong untuk mencoba SAM Coffee.

• Provenance: explicit
• Lifecycle: dipicu saat saya mencapai section CTA; hasil yang dapat diamati adalah headline, subheadline, dan button "Pesan Sekarang"; lanjutan adalah menekan "Pesan Sekarang" dan melanjutkan ke kanal kontak SAM Coffee.

FR-15 — Footer As a Pelanggan SAM Coffee, I should melihat footer minimalis berisi logo SAM Coffee, Instagram, TikTok, WhatsApp, Lokasi, Jam operasional, dan Copyright SAM Coffee so that saya dapat menghubungi atau menemukan SAM Coffee kapan saja.

• Provenance: explicit
• Lifecycle: dipicu saat saya mencapai footer; hasil yang dapat diamati adalah ketujuh elemen footer; lanjutan adalah membuka kanal kontak atau kembali menjelajah halaman.

FR-16 — Responsive mobile, tablet, desktop As a Pelanggan SAM Coffee, I should mendapatkan tampilan yang rapi dan nyaman di mobile, tablet, dan desktop, dengan prioritas tampilan mobile karena pelanggan banyak mengakses lewat smartphone so that saya dapat memakai situs dengan nyaman dari perangkat apa pun.

• Provenance: explicit
• Lifecycle: dipicu saat halaman dibuka pada ukuran layar tertentu; hasil yang dapat diamati adalah tata letak yang menyesuaikan diri dan tetap terbaca; lanjutan adalah menjelajah seluruh section.

FR-17 — Navigasi sticky As a Pelanggan SAM Coffee, I should melihat navigasi sticky di bagian atas so that saya dapat berpindah section tanpa harus menggulir kembali ke atas.

• Provenance: explicit
• Lifecycle: dipicu saat saya menggulir halaman; hasil yang dapat diamati adalah navigasi tetap terlihat di bagian atas; lanjutan adalah memilih section tujuan.

FR-18 — Animasi ringan saat scrolling As a Pelanggan SAM Coffee, I should melihat animasi ringan ketika scrolling so that pengalaman menjelajah terasa hidup namun tidak mengganggu.

• Provenance: explicit
• Lifecycle: dipicu oleh pergerakan scroll; hasil yang dapat diamati adalah animasi ringan yang mengiringi konten; lanjutan adalah melanjutkan scroll ke section berikutnya.

FR-19 — Hover animation As a Pelanggan SAM Coffee, I should melihat hover animation pada button dan product card so that saya mendapat umpan balik visual saat berinteraksi.

• Provenance: explicit
• Lifecycle: dipicu oleh hover pada button atau product card; hasil yang dapat diamati adalah perubahan visual pada elemen tersebut; lanjutan adalah menekan elemen yang di-hover.

FR-20 — Smooth scrolling As a Pelanggan SAM Coffee, I should mengalami smooth scrolling saat berpindah section so that perpindahan terasa halus dan nyaman.

• Provenance: explicit
• Lifecycle: dipicu oleh navigasi antar section; hasil yang dapat diamati adalah perpindahan yang halus; lanjutan adalah membaca section tujuan.

FR-21 — Loading animation As a Pelanggan SAM Coffee, I should melihat loading animation sederhana menggunakan elemen brand SAM Coffee so that masa tunggu tetap terasa bagian dari pengalaman brand.

• Provenance: explicit
• Lifecycle: dipicu saat halaman dimuat; hasil yang dapat diamati adalah animasi sederhana dengan elemen brand SAM Coffee; bila pemuatan gagal, halaman dapat dimuat ulang; lanjutan adalah melihat hero.

FR-22 — Rounded corners dan whitespace As a Pelanggan SAM Coffee, I should melihat rounded corners yang modern namun tidak berlebihan serta whitespace yang cukup so that situs terasa premium tetapi tidak kaku.

• Provenance: explicit
• Lifecycle: berlaku sepanjang kunjungan; hasil yang dapat diamati adalah sudut membulat yang wajar dan jarak antar elemen yang lega; lanjutan adalah membaca konten dengan nyaman.

FR-23 — Identitas biru #1234BD sebagai kesan pertama As a Pelanggan SAM Coffee, I should langsung merasakan warna #1234BD sebagai identitas visual utama SAM Coffee ketika pertama kali membuka website so that brand SAM Coffee langsung melekat.

• Provenance: explicit
• Lifecycle: dipicu pada pembukaan pertama; hasil yang dapat diamati adalah dominasi biru #1234BD dan putih pada tampilan awal; lanjutan adalah menjelajah halaman.

FR-24 — Pemesanan melalui kanal kontak SAM Coffee As a Pelanggan SAM Coffee, I should menekan "Pesan Sekarang" pada kartu produk atau CTA dan diarahkan untuk menghubungi SAM Coffee melalui WhatsApp, Instagram, atau TikTok so that pesanan saya sampai ke SAM Coffee dan kopi bisa disiapkan.

• Provenance: explicit
• Lifecycle: dipicu oleh ketukan pada "Pesan Sekarang"; hasil yang dapat diamati adalah saya berpindah ke kanal kontak SAM Coffee; bila kanal tidak dapat dibuka, saya dapat memakai tautan kanal lain di footer; lanjutan adalah SAM Coffee menerima pesanan dan datang ke lokasi saya.

FR-25 — Menemukan SAM Coffee di jalan As a Pelanggan SAM Coffee, I should menekan "Cari SAM Coffee" atau "Temukan SAM Coffee" dan melihat area operasional SAM Coffee so that saya dapat mendatangi lokasi SAM Coffee berada.

• Provenance: explicit
• Lifecycle: dipicu oleh ketukan pada tombol lokasi; hasil yang dapat diamati adalah area operasional dan jam operasional yang berlaku; bila area belum tersedia, saya dapat menghubungi SAM Coffee lewat kanal kontak; lanjutan adalah mendatangi lokasi dan menikmati kopi.

FR-26 — Undangan atau provisioning pengelola As a Pengelola Konten & Promo SAM Coffee, I should menerima undangan atau provisioning sebelum mengakses ruang kerja pengelolaan so that hanya anggota tim SAM Coffee yang dapat mengubah konten situs.

• Provenance: required_inference
• Lifecycle: dipicu saat pengelola baru ditambahkan ke tim; hasil yang dapat diamati adalah akses ruang kerja terbuka setelah undangan atau provisioning diterima; bila undangan belum aktif, pengelola tidak dapat masuk dan dapat meminta undangan baru; lanjutan adalah melakukan verifikasi melalui Login.

FR-27 — Verifikasi berulang pengelola As a Pengelola Konten & Promo SAM Coffee, I should melakukan verifikasi berulang melalui Login so that saya dapat kembali mengelola konten kapan pun dibutuhkan.

• Provenance: required_inference
• Lifecycle: dipicu saat pengelola membuka Login; hasil yang dapat diamati adalah pengelola masuk ke ruang kerja pengelolaan setelah verifikasi berhasil; bila kredensial tidak valid, pengelola dapat mencoba lagi; lanjutan adalah membuka Promo, Social Content, atau Locations.

FR-28 — Mengelola kartu promo As a Pengelola Konten & Promo SAM Coffee, I should membuat, memperbarui, dan menghapus kartu promo dengan mudah so that pelanggan selalu melihat promo terbaru pada Landing.

• Provenance: required_inference
• Lifecycle: dipicu saat pengelola membuka Promo; hasil yang dapat diamati adalah kartu promo tersimpan sebagai state durable dan tampil konsisten pada Landing; bila penyimpanan gagal, perubahan tidak diterapkan dan pengelola dapat mencoba lagi; lanjutan adalah memverifikasi tampilan promo pada Landing.

FR-29 — Memperbarui preview konten sosial As a Pengelola Konten & Promo SAM Coffee, I should memperbarui preview konten Instagram/TikTok so that grid "FOLLOW PERJALANAN SAM COFFEE" menampilkan konten terbaru.

• Provenance: required_inference
• Lifecycle: dipicu saat pengelola membuka Social Content; hasil yang dapat diamati adalah item preview tersimpan sebagai state durable dan tampil konsisten pada Landing; bila penyimpanan gagal, perubahan tidak diterapkan dan pengelola dapat mencoba lagi; lanjutan adalah memverifikasi grid pada Landing.

FR-30 — Menjaga area operasional dan jam operasional As a Pengelola Konten & Promo SAM Coffee, I should menjaga informasi lokasi operasional dan jam operasional tetap akurat so that pelanggan tidak salah mencari SAM Coffee.

• Provenance: required_inference
• Lifecycle: dipicu saat pengelola membuka Locations; hasil yang dapat diamati adalah area operasional dan jam operasional tersimpan sebagai state durable dan tampil konsisten pada Landing; bila penyimpanan gagal, perubahan tidak diterapkan dan pengelola dapat mencoba lagi; lanjutan adalah memverifikasi section lokasi pada Landing.

4. User Personas

Pelanggan SAM Coffee

Konteks produk. Pengunjung mobile-first yang menemukan SAM Coffee dari jalan, media sosial, atau rekomendasi teman. Ia membuka website dari ponsel, sering sambil berjalan, menunggu, atau di sela aktivitas, dan ingin jawaban cepat: menu apa yang ada, harganya berapa, sedang di mana SAM Coffee, dan bagaimana cara memesan.

Tujuan utama. Menemukan SAM Coffee dan memesan kopi tanpa ribet, lalu menikmati kopinya di lokasi SAM Coffee berada.

Tanggung jawab yang diterima. Melihat menu dan harga; menekan "Pesan Sekarang" atau "Lihat Menu"; menghubungi SAM Coffee via WhatsApp/Instagram/TikTok; mengecek lokasi operasional lewat "Cari SAM Coffee"; serta melihat promo dan konten sosial.

Input dan keputusan. Ia memutuskan produk berdasarkan foto, nama, deskripsi singkat, dan harga; memutuskan untuk memesan setelah membaca alur cara pesan; dan memutuskan untuk mendatangi lokasi setelah melihat area operasional dan jam operasional.

Interaksi dengan peserta lain. Ia berinteraksi dengan SAM Coffee sebagai pihak yang menerima pesanan dan datang ke lokasinya, serta dengan kanal eksternal WhatsApp, Instagram, dan TikTok sebagai sarana kontak dan pemesanan.

Keberhasilan yang dapat diamati. Pesanan terkirim ke SAM Coffee dan kopi dinikmati di lokasi SAM Coffee berada.

Yang membedakan perannya. Ia tidak pernah masuk ke ruang kerja pengelolaan dan tidak mengubah isi situs; seluruh nilainya terletak pada menemukan, memutuskan, dan memesan dengan cepat dari ponsel.

Pengelola Konten & Promo SAM Coffee

Konteks produk. Anggota tim SAM Coffee yang menjaga situs tetap hidup dan relevan bagi pelanggan muda. Ia bekerja dari ruang kerja terproteksi setelah menerima undangan atau provisioning dan melakukan verifikasi berulang melalui Login.

Tujuan utama. Memastikan pelanggan selalu melihat promo, konten, dan lokasi terbaru tanpa perlu bantuan developer.

Tanggung jawab yang diterima. Memperbarui kartu promo dengan mudah; memperbarui preview konten Instagram/TikTok; serta menjaga informasi lokasi operasional dan jam operasional tetap akurat.

Input dan keputusan. Ia memasukkan judul dan isi kartu promo, item preview konten sosial beserta platformnya, serta nama area operasional dan jam operasionalnya; ia memutuskan kapan sebuah kartu promo atau area operasional aktif tampil di Landing.

Interaksi dengan peserta lain. Ia bekerja untuk Pelanggan SAM Coffee: setiap perubahan yang ia simpan adalah informasi yang pelanggan lihat pada Landing. Ia juga bergantung pada kanal Instagram dan TikTok sebagai sumber konten yang dipreview.

Keberhasilan yang dapat diamati. Perubahan promo, konten sosial, lokasi, dan jam operasional tersimpan sebagai state durable dan tampil konsisten pada Landing.

Yang membedakan perannya. Ia adalah satu-satunya peran yang mengubah isi situs; pekerjaannya adalah pemeliharaan konten berulang, bukan pemesanan atau pembelian.

5. Core User Flows

Flow 1 — Pelanggan menemukan SAM Coffee dan memesan kopi

1. Konteks awal: Pelanggan SAM Coffee membuka website SAM Coffee dari ponselnya. Landing tampil anonim tanpa perlu akun, dengan loading animation sederhana memakai elemen brand SAM Coffee.
2. Aksi: Ia melihat hero dengan headline "KOPI ENAK, KETEMU DI JALAN.", subheadline "SAM Coffee hadir buat nemenin perjalanan, kerja, nongkrong, dan hari-hari lu.", visual kopi dan kendaraan kopi keliling, serta elemen dekorasi biru #1234BD.
3. Keputusan: Ia memilih menekan "Lihat Menu". Halaman bergulir halus ke section menu.
4. Aksi: Ia membaca kartu produk — Kopi Susu, Kopi Sanger, Matcha, Matcha Strawberry, Americano, Chocolate, dan minuman lainnya — masing-masing dengan foto produk, nama produk, deskripsi singkat, harga, dan tombol "Pesan Sekarang".
5. Keputusan: Ia memilih satu produk dan menekan "Pesan Sekarang" pada kartu produk tersebut.
6. Handoff: Ia diarahkan ke kanal kontak SAM Coffee (WhatsApp, Instagram, atau TikTok) untuk mengirim pesan pesanan.
7. Hasil yang dapat diamati: Pesan pesanan berisi produk pilihannya terkirim ke SAM Coffee.
8. Lanjutan: SAM Coffee menerima pesanan dan datang ke lokasi pelanggan; pelanggan menikmati kopinya.

Flow 2 — Pelanggan mencari lokasi SAM Coffee

1. Konteks awal: Pelanggan SAM Coffee sudah tahu ingin membeli kopi dan membuka Landing dari ponselnya.
2. Aksi: Ia menekan "Temukan SAM Coffee" pada hero atau "Cari SAM Coffee" pada section lokasi.
3. Hasil yang dapat diamati: Section "SAM Coffee Lagi Dimana?" menampilkan area operasional SAM Coffee dalam desain map/location card beserta jam operasionalnya.
4. Keputusan: Ia memilih area operasional yang paling dekat atau paling sesuai dengan waktunya.
5. Lanjutan: Ia mendatangi lokasi tersebut dan memesan langsung di tempat, atau menghubungi SAM Coffee lewat kanal kontak bila area yang ia cari belum tampil.
6. Pemulihan: Bila area operasional belum tersedia, section menampilkan ajakan menghubungi SAM Coffee lewat WhatsApp, Instagram, atau TikTok di footer.

Flow 3 — Pelanggan melihat promo dan mengikuti konten sosial

1. Konteks awal: Pelanggan SAM Coffee menggulir Landing setelah melihat menu.
2. Aksi: Ia mencapai section promo dengan headline "LAGI ADA PROMO NIH\x20\xf0\x9f\x91\x80" dan membaca kartu promo yang sedang aktif.
3. Hasil yang dapat diamati: Ia mengetahui promo yang sedang berjalan dan memanfaatkannya saat memesan.
4. Aksi: Ia melanjutkan ke section "FOLLOW PERJALANAN SAM COFFEE" dan melihat grid preview konten Instagram/TikTok.
5. Keputusan: Ia menekan tombol Instagram atau TikTok.
6. Handoff: Ia berpindah ke kanal Instagram atau TikTok milik SAM Coffee.
7. Lanjutan: Ia mengikuti perjalanan SAM Coffee dan kembali ke website saat ingin memesan lagi.

Flow 4 — Pelanggan memakai CTA penutup

1. Konteks awal: Pelanggan SAM Coffee sudah membaca seluruh halaman dan mencapai section CTA sebelum footer.
2. Aksi: Ia membaca headline "SEKALI COBA, BAKAL TAHU BEDANYA." dan subheadline "Jangan cuma lihat dari jauh. Cari SAM Coffee dan cobain sendiri."
3. Keputusan: Ia menekan button "Pesan Sekarang".
4. Handoff: Ia diarahkan ke kanal kontak SAM Coffee untuk mengirim pesanan.
5. Hasil yang dapat diamati: Pesan pesanan terkirim ke SAM Coffee.
6. Lanjutan: Bila ia belum siap memesan, ia dapat memakai tautan WhatsApp, Instagram, TikTok, Lokasi, atau Jam operasional di footer.

Flow 5 — Pengelola masuk dan memperbarui kartu promo

1. Konteks awal: Pengelola Konten & Promo SAM Coffee telah menerima undangan atau provisioning untuk ruang kerja pengelolaan.
2. Aksi: Ia membuka Login dan melakukan verifikasi berulang.
3. Hasil yang dapat diamati: Verifikasi berhasil dan ia masuk ke ruang kerja pengelolaan.
4. Aksi: Ia membuka Promo dan membuat atau memperbarui kartu promo — judul, isi, dan status tayang.
5. Hasil yang dapat diamati: Perubahan tersimpan sebagai state durable dan kartu promo tampil konsisten pada section promo Landing.
6. Pemulihan: Bila penyimpanan gagal, perubahan tidak diterapkan dan ia dapat mencoba lagi atau membatalkan perubahan.
7. Lanjutan: Ia memverifikasi tampilan promo pada Landing, lalu melanjutkan ke pembaruan berikutnya.

Flow 6 — Pengelola memperbarui preview konten sosial

1. Konteks awal: Pengelola Konten & Promo SAM Coffee sudah masuk ke ruang kerja pengelolaan.
2. Aksi: Ia membuka Social Content dan menambah atau memperbarui item preview konten Instagram/TikTok beserta urutannya.
3. Hasil yang dapat diamati: Item preview tersimpan sebagai state durable dan grid "FOLLOW PERJALANAN SAM COFFEE" pada Landing menampilkan konten terbaru.
4. Pemulihan: Bila penyimpanan gagal, perubahan tidak diterapkan dan ia dapat mencoba lagi atau membatalkan perubahan.
5. Lanjutan: Ia memverifikasi grid pada Landing dan kembali bekerja kapan pun konten baru tersedia.

Flow 7 — Pengelola menjaga area operasional dan jam operasional

1. Konteks awal: Pengelola Konten & Promo SAM Coffee sudah masuk ke ruang kerja pengelolaan.
2. Aksi: Ia membuka Locations dan menambah atau memperbarui area operasional beserta jam operasionalnya, serta menandai area yang aktif tampil.
3. Hasil yang dapat diamati: Area operasional dan jam operasional tersimpan sebagai state durable dan section "SAM Coffee Lagi Dimana?" pada Landing menampilkan informasi terbaru.
4. Pemulihan: Bila penyimpanan gagal, perubahan tidak diterapkan dan ia dapat mencoba lagi atau membatalkan perubahan.
5. Lanjutan: Ia memverifikasi section lokasi pada Landing sehingga pelanggan tidak salah mencari SAM Coffee.

6. Visuals Colors and Theme

Muse dan headline arah kreatif: Haraldur Thorleifsson — Big-hearted boldness on a saturated blue field: street coffee with a grin. Biru #1234BD diperlakukan sebagai bidang warna penuh (banner cart yang dicat, bukan tombol di atas putih), dengan permukaan krem dan pasir hangat sebagai pendukung.

Mode: light mode.

Token warna (peran):

Proporsi: ~60% bidang biru, ~30% permukaan putih, ~8% netral pasir, ~2% aksen amber. Tidak ada merah, hijau, atau hue saturasi kedua di mana pun.

Tipografi:

• Heading: Sora 800, all-caps untuk pernyataan besar, tracking -0.02em; baris slang Indonesia diset sentence case 700 agar terasa diucapkan.
• Body: Outfit 400/500, 17–18px, line-height 1.65, selalu di dalam kartu putih atau margin biru yang lebar.
• Skala 1.333 modular: display 44px mobile / 88px tablet / 132px desktop; h2 32/52/72; h3 22/28/34; body 17/18/18; label 13px uppercase +0.14em tracking; harga 26/32/38 Sora 800. clamp() pada setiap ukuran display.

Shape language: geometri membulat ala coffee cart — radius 20–28px pada kartu, tombol pill 999px, motif "cup lid" (setengah lingkaran di atas persegi panjang) sebagai divider section dan bingkai ilustrasi cart. Badge bulat seperti stiker (rotasi 8–12°) untuk harga dan tag promo, dengan outline ink 2px dan hard offset shadow 4px #0B1440 tanpa blur. Tanpa bevel, tanpa glass.

Layout: mobile-first satu kolom yang melebar ke grid 12 kolom pada 768px dan 1280px. Hero full-bleed biru dengan tipe bertumpuk di kiri dan ilustrasi cart keluar dari tepi kanan. Menu 2-up di mobile, 3-up di tablet, 4-up di desktop, setiap kartu putih dengan band atas berwarna. "Cara Pesan" menjadi rail horizontal 4 langkah di desktop dan tumpukan bernomor vertikal di mobile, dihubungkan garis putus-putus biru. Lokasi memakai split panel: kartu biru bergaya map di satu sisi, daftar area operasional di sisi lain, menumpuk di mobile. Promo adalah band biru full-bleed dengan kartu stiker amber berotasi yang menimpa tepi section. Footer grid 3 kolom yang menciut jadi satu kolom.

Imagery: illustration-led, bukan fotografi stok — cart kopi flat-vector dengan awning bergaris, roda besar, dan panel SAM berhuruf tangan, plus karakter cup dengan wajah sederhana dan outline ink tebal. Foto produk adalah potret cup ilustratif di atas ground lingkaran berwarna, setiap minuman punya bentuk cup dan warna lid sendiri. Tekstur pendukung: halftone dot field, garis 3px, dan squiggle uap kopi. Foto nyata (tim, cart di jalan) berkontras tinggi, bertone hangat, dan dipotong ke bingkai stiker membulat.

Batasan yang dipertahankan: biru #1234BD konsisten sebagai warna branding utama; dominasi biru dan putih dengan sedikit netral; tanpa merah, hijau, atau warna mencolok lain; rounded corners modern namun tidak berlebihan; whitespace cukup; terasa premium tetapi tidak kaku; hindari tampilan website korporat yang formal.

7. Signature Design Concept

"Painted Cart Banner" — Landing dibuka sebagai satu banner cart yang dicat: bidang #1234BD memenuhi layar pertama tanpa latar putih di mana pun. Headline "KOPI ENAK, KETEMU DI JALAN." diset Sora 800 all-caps pada clamp(44px, 9vw, 132px), ditumpuk tiga baris rata kiri yang membentang sekitar 70% lebar viewport, dengan baris terakhir "DI JALAN." berwarna amber #F4A63A sebagai punchline. Di kanan dan bawah, ilustrasi cart kopi keliling keluar dari tepi kanan dan bawah pada 1.4× tinggi headline, awning-nya menimpa baris headline terakhir tanpa menutupi satu huruf pun. Subheadline "SAM Coffee hadir buat nemenin perjalanan, kerja, nongkrong, dan hari-hari lu." duduk di panel putih radius 24px di bawah blok tipe. Dua tombol — "Lihat Menu" sebagai pill putih solid berteks ink dan "Temukan SAM Coffee" sebagai ghost pill ber-outline amber — berada satu baris di desktop dan menumpuk full-width pada 375px. Dekorasi biru-on-biru: halftone dot field di sudut kiri atas, tiga garis kecepatan putih tipis di belakang cart, dan badge stiker bulat "KOPI KELILING" berotasi di kiri bawah. Di mobile, cart berpindah ke bawah tombol dan dipotong ke bagian depannya, sehingga headline dan kontrol tetap utuh di dalam viewport.

Konsep ini hanya menyusun ulang konten, state, dan kontrol yang sudah diterima — tidak menambah perilaku, halaman, atau tujuan baru.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: layered_2d

Landing Hero Motion Brief

• Focal subject: ilustrasi cart kopi keliling SAM Coffee dengan awning bergaris, roda besar, dan panel SAM berhuruf tangan, ditemani karakter cup berwajah sederhana.
• Input → transformation → outcome: saat Landing dimuat, loading animation sederhana menggambar mark cup-lid SAM Coffee dan menyapu wordmark dari kiri; setelah selesai, hero fade-and-rise 24px dengan ease-out 420ms, cart masuk dengan rotasi kecil 2°, dan baris headline muncul berurutan dengan stagger 60ms. Hasilnya adalah layar pertama yang sudah terasa seperti banner cart yang dicat, dengan biru #1234BD dan punchline amber "DI JALAN." langsung terbaca.
• Motion vocabulary: fade-and-rise 24px pada scroll dengan ease-out 420ms dan stagger 60ms antar kartu; kartu menu naik 6px saat hover dengan offset shadow ink tumbuh dari 4px ke 8px dan stiker harga berotasi tambahan 3°; tombol menekan ke skala 0.97 dengan snap 120ms; strip marquee amber tipis menjalankan ticker "SAM COFFEE • KOPI KELILING •" di antara hero dan menu; rail "Cara Pesan" menggambar garis putus-putusnya dari kiri ke kanan di desktop dan dari atas ke bawah di mobile, dengan setiap nomor dalam Sora 800 amber.
• Composed first frame: bidang biru penuh, headline tiga baris rata kiri dengan baris terakhir amber, panel putih subheadline, dua tombol pill, cart yang keluar dari tepi kanan, halftone dot field di kiri atas, tiga garis kecepatan putih, dan badge stiker "KOPI KELILING" berotasi di kiri bawah.
• Reduced-motion state: dengan prefers-reduced-motion, marquee berhenti dan membungkus itemnya ke baris berikutnya atau menempatkannya dalam baris yang dapat digulir horizontal (overflow-x: auto) sehingga setiap item terbaca utuh; animasi scroll, rotasi cart, dan rotasi stiker dinonaktifkan; seluruh konten tampil dalam keadaan akhir yang utuh.

9. Non-Functional Requirements

NFR-01 — Prioritas mobile-first (explicit). Tampilan dioptimalkan lebih dulu untuk smartphone karena pelanggan banyak mengakses melalui smartphone, lalu menyesuaikan diri untuk tablet dan desktop. Rasional: mayoritas kunjungan datang dari perangkat mobile di jalan.

NFR-02 — Responsivitas 375px / 768px / 1280px (explicit). Headline, wordmark, label, angka, teks kartu, dan kontrol tetap utuh di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px, membungkus atau menskalakan diri (misalnya font-size: clamp(...) dengan ukuran mobile-nya) agar muat; tidak ada elemen lain yang menutupi bagian mana pun dari teks atau kontrol yang dapat dibaca. Rasional: keterbacaan dan kontrol yang utuh adalah syarat pengalaman mobile.

NFR-03 — Palet terbatas (explicit). Hanya biru #1234BD, putih #FFFFFF, dan sedikit warna netral yang dipakai; merah, hijau, dan warna mencolok lain tidak digunakan. Rasional: konsistensi identitas visual SAM Coffee.

NFR-04 — Konsistensi biru #1234BD (explicit). Biru #1234BD dipakai konsisten sebagai warna branding utama dan langsung terasa saat website pertama kali dibuka. Rasional: brand harus melekat dalam kesan pertama.

NFR-05 — Keterbacaan tipografi (explicit). Typography bersifat bold, modern, dan mudah dibaca pada semua ukuran layar. Rasional: pelanggan membaca sambil bergerak dan sering satu tangan.

NFR-06 — Performa animasi ringan (explicit). Animasi scroll, hover, dan loading bersifat ringan sehingga tidak menghambat penjelajahan; dengan prefers-reduced-motion, gerakan berhenti dan konten bergerak tampil utuh. Rasional: pengalaman premium tetapi tidak kaku, tetap nyaman bagi pengguna yang membatasi gerakan.

NFR-07 — Aksesibilitas kontras dan fokus (required_inference). Teks di atas bidang biru dan di atas kartu putih memakai pasangan warna yang kontras, dan kontrol interaktif memiliki focus ring yang terlihat memakai aksen amber #F4A63A. Rasional: diperlukan agar kontrol dan teks tetap dapat dibaca dan dioperasikan pada semua permukaan warna yang diterima.

NFR-08 — Durabilitas state konten (required_inference). Perubahan promo, konten sosial, lokasi, dan jam operasional tersimpan sebagai state durable sehingga tampil konsisten pada Landing setiap kali halaman dibuka. Rasional: pelanggan harus selalu melihat informasi terbaru tanpa bergantung pada sesi tertentu.

NFR-09 — Akses ruang kerja terbatas (required_inference). Ruang kerja Promo, Social Content, dan Locations hanya dapat diakses oleh Pengelola Konten & Promo SAM Coffee yang telah menerima undangan atau provisioning dan berhasil melakukan verifikasi melalui Login. Rasional: hanya anggota tim yang boleh mengubah isi situs.

10. Tech Stack

• Frontend: React untuk antarmuka Landing dan ruang kerja pengelolaan, dengan styling yang mengimplementasikan token warna, tipografi Sora/Outfit, shape language, dan motion direction pada dokumen ini.
• Backend: Python/FastAPI untuk melayani data Landing (produk, promo, konten sosial, area operasional dan jam operasional), verifikasi pengelola, serta penyimpanan perubahan dari ruang kerja.
• Storage: penyimpanan persisten untuk Produk, Kartu Promo, Konten Sosial, Area Operasional, dan Identitas Pengelola, agar perubahan bertahan sebagai state durable.
• Kontainerisasi: Docker dan docker-compose untuk menjalankan frontend dan backend secara konsisten di lingkungan pengembangan dan produksi.

Tidak ada pilihan teknologi lain yang ditetapkan oleh sumber; Kubernetes tidak diperlukan untuk lingkup deployment saat ini.

11. Assumptions and Constraints

Constraints (dari sumber, mengikat):

• Warna merah, hijau, dan warna mencolok lainnya tidak digunakan; palet dibatasi biru #1234BD, putih #FFFFFF, dan sedikit warna netral.
• Biru #1234BD dipakai konsisten sebagai warna branding utama dan harus langsung terasa saat website pertama kali dibuka.
• Tampilan mobile diprioritaskan karena pelanggan banyak mengakses melalui smartphone.
• Tampilan website korporat yang terlalu formal dihindari.
• Rounded corners modern tetapi tidak berlebihan; whitespace cukup.
• Kartu promo harus dapat diperbarui dengan mudah.
• Pemesanan dilakukan melalui kanal kontak eksternal (WhatsApp, Instagram, TikTok); website tidak menyediakan keranjang belanja atau checkout di dalam situs.
• Instagram, TikTok, dan WhatsApp tetap dimiliki dan dioperasikan oleh penyedianya; website hanya menautkan dan menampilkan preview.

Assumptions (sempit dan berlabel):

• [Default — not specified by user] Daftar produk pada section menu bersifat contoh dari sumber; produk "minuman lainnya" ditampilkan sebagai bagian dari daftar yang sama tanpa menambah kategori baru.
• [Default — not specified by user] Harga produk, isi kartu promo, item konten sosial, area operasional, dan jam operasional diisi oleh Pengelola Konten & Promo SAM Coffee melalui ruang kerja; tidak ada nilai yang dikarang di dokumen ini.
• [Default — not specified by user] Undangan atau provisioning pengelola dilakukan di luar website (misalnya oleh tim SAM Coffee) dan hanya statusnya yang tercermin pada Login.
• [Default — not specified by user] Tidak ada peran pengguna lain selain Pelanggan SAM Coffee dan Pengelola Konten & Promo SAM Coffee; karena itu tidak ada kontrol izin tambahan yang ditetapkan.

12. Glossary

• SAM Coffee — brand kopi keliling (mobile coffee) berkarakter anak muda, santai, berani, dan dekat dengan pelanggan.
• Kopi Keliling / Mobile Coffee — konsep bisnis kopi yang hadir berpindah mendekati pelanggan, bukan menetap di satu kedai.
• Landing — halaman pembuka anonim yang menyatukan hero, menu, tentang, cara pesan, lokasi, promo, sosial media, CTA, dan footer.
• Hero — area pembuka Landing dengan headline, subheadline, dua tombol, visual kopi dan kendaraan kopi keliling, serta elemen dekorasi biru.
• Cara Pesan — alur empat langkah: pilih menu, hubungi SAM Coffee, kami datang, nikmati kopi lu.
• Kartu Promo — kartu berisi promo yang ditampilkan pada section promo Landing dan dapat diperbarui dengan mudah oleh pengelola.
• Konten Sosial — item preview konten Instagram/TikTok yang ditampilkan dalam grid pada section "FOLLOW PERJALANAN SAM COFFEE".
• Area Operasional — lokasi tempat SAM Coffee beroperasi, ditampilkan pada section "SAM Coffee Lagi Dimana?" beserta jam operasionalnya.
• Pengelola Konten & Promo SAM Coffee — anggota tim SAM Coffee yang mengelola kartu promo, konten sosial, area operasional, dan jam operasional.
• Login — halaman verifikasi berulang bagi Pengelola Konten & Promo SAM Coffee sebelum mengakses ruang kerja pengelolaan.
• State durable — data yang tersimpan secara persisten sehingga perubahan tampil konsisten pada Landing setiap kali halaman dibuka.