System Requirements Document for shiny-blommies

1. Introduction

shiny-blommies adalah proyek situs web digital untuk Blommies Store, sebuah toko jasa digital yang dijalankan oleh satu orang pemilik (Nyonya Pmrt, Indonesia). Situs ini berfungsi sebagai tempat berdagang jasa digital dengan tiga lini layanan yang sudah ditetapkan:

1. Jasa editing moodboard/loveboard
2. Jasa joki tugas sekolah
3. Jasa promosikan jualan

Situs harus menyediakan banyak fitur pesan otomatis dan pembayaran otomatis, serta mencantumkan kanal kontak email, Instagram, dan nomor WhatsApp. Sesuai permintaan eksplisit pemilik, situs dibangun dalam kondisi kosongan — kerangka dasar tanpa dekorasi final — agar pemilik dapat menambahkan dekorasi/hiasan sendiri di kemudian hari.

Audiens: pembeli jasa digital di Indonesia (Gen-Z dan milenial muda) yang menemukan toko melalui Instagram dan WhatsApp, serta pemilik toko yang mengelola layanan, pesanan, dan status pembayaran.

2. System Overview

Blommies Store adalah toko jasa digital satu orang. Situs menyajikan tiga layanan yang dapat ditinjau dan dipilih pembeli, memungkinkan pembeli membuat dan menyimpan pesanan, menyelesaikan pembayaran otomatis, dan berkomunikasi melalui pesan otomatis. Pemilik mengelola katalog layanan dan meninjau pesanan masuk beserta status pembayarannya. Kanal kontak email, Instagram, dan WhatsApp ditampilkan agar pembeli dapat menghubungi penjual secara langsung bila diperlukan.

Aktor:

• Pembeli Jasa Digital — pengunjung yang memesan jasa, mengirim pesanan, dan menyelesaikan pembayaran.
• Pemilik Toko Blommies Store — pemilik yang mengelola layanan, pesanan, dan status pembayaran.

Penyesuaian akses: identitas milik aplikasi diperlukan agar pembeli dapat menyimpan dan melanjutkan pesanan serta pembayaran, dan agar pemilik dapat mengelola toko. Halaman Landing, Sign Up, Login, Services, dan Contact dapat diakses tanpa login; Orders dan Messages memerlukan login; Checkout, Service Management, dan Order Management dibatasi peran.

Pengecualian sempit: situs tidak menyediakan dekorasi final — area dekorasi dibiarkan sebagai slot kosong yang dapat diganti pemilik. Tidak ada fotografi stok atau hero fotografi.

2a. Product Interpretation and Delivery Boundary

Blommies Store adalah toko jasa digital yang dijalankan satu orang, dijual melalui Instagram dan WhatsApp kepada pembeli Gen-Z dan milenial muda Indonesia. Situs ini adalah etalase dan mesin transaksi: menampilkan tiga layanan, menerima pesanan, memproses pembayaran otomatis, dan menjalankan pesan otomatis — sehingga pemilik tidak perlu menangani setiap percakapan secara manual.

Kepemilikan pengiriman dan akses: antarmuka kustom milik aplikasi (first-party) untuk semua halaman. Identitas milik aplikasi diperlukan untuk menyimpan pesanan, melanjutkan pembayaran, dan mengelola toko; halaman Landing, Sign Up, Login, Services, dan Contact bersifat anonim, sedangkan Orders dan Messages memerlukan login dan Checkout, Service Management, serta Order Management dibatasi peran. Pembayaran otomatis dan pesan otomatis dijalankan oleh backend aplikasi yang mempertahankan status transaksi, pesanan, pemicu, pengiriman, dan riwayat pesan.

Batas saat ini vs masa depan: semua perilaku yang dijelaskan di dokumen ini adalah lingkup saat ini. Dekorasi/hiasan final adalah pekerjaan masa depan yang dilakukan pemilik sendiri; situs saat ini hanya menyediakan slot dekorasi kosong.

2b. Source Content Inventory

Tidak ada direktif referensi dengan content_source yang diberikan, sehingga tidak ada inventaris konten sumber yang disertakan.

2c. Page Content and Component Coverage

Landing

• Informasi/status: nama "Blommies Store", tiga lini layanan (jasa editing moodboard/loveboard, jasa joki tugas sekolah, jasa promosikan jualan) beserta harga awal, jalur pemesanan, dan kanal kontak.
• Aksi utama: "Pesan Sekarang" (menuju Services/Orders), "Lihat Layanan" (menuju Services).
• Aksi pendukung: chip kontak email, Instagram, WhatsApp.
• Entitas domain: Layanan, Kanal Kontak.
• Tanggung jawab komponen: hero asimetris (headline besar di kolom 1–7, tiga kartu stiker layanan miring di kolom 8–12), baris chip kontak, slot dekorasi kosong berlabel.
• Status: loading (kerangka hero), empty (slot dekorasi kosong berlabel "slot dekorasi — ganti sesukamu"), success (hero + tiga kartu layanan tampil), error (gagal memuat layanan → tampilkan pesan dan tautan ke Contact), recovery (coba lagi memuat layanan).

Sign Up

• Informasi/status: formulir pendaftaran identitas aplikasi (email, kata sandi), penjelasan manfaat menyimpan pesanan dan melanjutkan pembayaran.
• Aksi utama: buat akun.
• Aksi pendukung: tautan ke Login.
• Entitas domain: Akun.
• Tanggung jawab komponen: formulir, validasi inline, tombol pill pink.
• Status: loading (tombol memproses), empty (formulir kosong), success (akun dibuat → arahkan ke Services/Orders), error (email sudah terdaftar / kata sandi lemah → pesan inline), recovery (perbaiki input dan kirim ulang).

Login

• Informasi/status: formulir verifikasi kembali (email, kata sandi).
• Aksi utama: masuk.
• Aksi pendukung: tautan ke Sign Up.
• Entitas domain: Akun.
• Tanggung jawab komponen: formulir, validasi inline, tombol pill pink.
• Status: loading (tombol memproses), empty (formulir kosong), success (masuk → arahkan ke Orders/Service Management sesuai peran), error (kredensial salah → pesan inline), recovery (coba lagi).

Services

• Informasi/status: daftar tiga layanan — jasa editing moodboard/loveboard, jasa joki tugas sekolah, jasa promosikan jualan — masing-masing dengan ikon, judul, deskripsi satu baris, dan pill harga.
• Aksi utama: "Pesan" pada tiap kartu layanan.
• Aksi pendukung: filter/kategori bila tersedia.
• Entitas domain: Layanan.
• Tanggung jawab komponen: grid kartu 1-up/2-up/3-up, kartu stiker dengan outline ink dan offset shadow, slot dekorasi kosong.
• Status: loading (kerangka kartu), empty (belum ada layanan → pesan dan tautan ke Contact), success (tiga kartu layanan tampil), error (gagal memuat → pesan dan coba lagi), recovery (muat ulang).

Contact

• Informasi/status: email, Instagram, dan nomor WhatsApp Blommies Store.
• Aksi utama: buka tautan email/Instagram/WhatsApp.
• Aksi pendukung: salin alamat kontak.
• Entitas domain: Kanal Kontak.
• Tanggung jawab komponen: tiga pill kontak berikon, slot dekorasi kosong.
• Status: loading (kerangka pill), empty (kanal belum diisi → placeholder), success (tiga kanal tampil dan dapat diklik), error (tautan gagal → tampilkan teks alamat), recovery (salin manual).

Orders

• Informasi/status: daftar pesanan pembeli yang tersimpan beserta statusnya (mis. "Diproses", "Selesai") dan status pembayaran.
• Aksi utama: buat pesanan baru, lanjutkan pesanan yang belum selesai.
• Aksi pendukung: buka detail pesanan, lanjut ke Checkout.
• Entitas domain: Pesanan, Layanan, Status Pembayaran.
• Tanggung jawab komponen: daftar kartu pesanan, chip status sunflower, tombol lanjutkan.
• Status: loading (kerangka daftar), empty (belum ada pesanan → ajakan ke Services), success (daftar pesanan tampil), error (gagal memuat → pesan dan coba lagi), recovery (muat ulang).

Checkout

• Informasi/status: ringkasan pesanan (layanan, harga), langkah pembayaran otomatis bernomor, status transaksi.
• Aksi utama: selesaikan pembayaran otomatis.
• Aksi pendukung: kembali ke Orders, hubungi penjual via Contact.
• Entitas domain: Pesanan, Transaksi, Status Pembayaran.
• Tanggung jawab komponen: ukuran sempit 640px, langkah sebagai lingkaran pink besar dengan garis putus-putus yang terisi sunflower saat selesai, kartu ringkasan pesanan ber-outline.
• Status: loading (memproses pembayaran), empty (tidak ada pesanan untuk dibayar → arahkan ke Orders), success (pembayaran selesai → status pesanan diperbarui), error (pembayaran gagal → pesan dan opsi coba lagi), recovery (ulangi pembayaran atau hubungi penjual).

Messages

• Informasi/status: percakapan pesan otomatis terkait pertanyaan dan pesanan, riwayat pesan.
• Aksi utama: kirim pesan.
• Aksi pendukung: buka pesanan terkait.
• Entitas domain: Pesan, Pesanan.
• Tanggung jawab komponen: balon percakapan dengan ekor, animasi masuk 60ms stagger, indikator mengetik tiga titik.
• Status: loading (kerangka percakapan), empty (belum ada pesan → pesan sambutan otomatis), success (pesan terkirim dan tampil), error (gagal kirim → tandai pesan dan opsi kirim ulang), recovery (kirim ulang).

Service Management

• Informasi/status: daftar tiga layanan digital yang ditawarkan toko beserta detail dan harganya.
• Aksi utama: tambah, ubah, hapus layanan.
• Aksi pendukung: atur harga dan deskripsi.
• Entitas domain: Layanan.
• Tanggung jawab komponen: daftar/editor layanan, validasi, slot dekorasi kosong.
• Status: loading (kerangka daftar), empty (belum ada layanan → ajakan tambah), success (perubahan tersimpan), error (gagal simpan → pesan inline), recovery (perbaiki dan simpan ulang).

Order Management

• Informasi/status: daftar pesanan masuk beserta status pembayaran otomatisnya.
• Aksi utama: tinjau pesanan, perbarui status pesanan.
• Aksi pendukung: buka detail pesanan, hubungi pembeli.
• Entitas domain: Pesanan, Status Pembayaran.
• Tanggung jawab komponen: tabel/daftar pesanan, chip status, filter status.
• Status: loading (kerangka daftar), empty (belum ada pesanan masuk), success (daftar pesanan tampil), error (gagal memuat → pesan dan coba lagi), recovery (muat ulang).

3. Functional Requirements

FR-01 — Toko jasa digital (explicit) As a Pemilik Toko Blommies Store, I should menampilkan Blommies Store sebagai tempat berdagang jasa digital, sehingga pengunjung mengenali toko dan layanannya.

• Trigger/input: pengunjung membuka Landing.
• Hasil teramati: nama toko dan tiga lini layanan tampil.
• Akses: anonim. Kegagalan: layanan gagal dimuat → pesan dan tautan ke Contact. Kelanjutan: pengunjung menuju Services.

FR-02 — Jasa editing moodboard/loveboard (explicit) As a Pemilik Toko Blommies Store, I should menawarkan jasa editing moodboard/loveboard sebagai salah satu layanan, sehingga pembeli dapat memesannya.

• Trigger/input: layanan ditampilkan di Services.
• Hasil teramati: kartu layanan dengan judul, deskripsi, dan harga tampil.
• Akses: anonim. Kegagalan: layanan tidak tampil → pesan dan coba lagi. Kelanjutan: pembeli menekan "Pesan".

FR-03 — Jasa joki tugas sekolah (explicit) As a Pemilik Toko Blommies Store, I should menawarkan jasa joki tugas sekolah sebagai salah satu layanan, sehingga pembeli dapat memesannya.

• Trigger/input: layanan ditampilkan di Services.
• Hasil teramati: kartu layanan dengan judul, deskripsi, dan harga tampil.
• Akses: anonim. Kegagalan: layanan tidak tampil → pesan dan coba lagi. Kelanjutan: pembeli menekan "Pesan".

FR-04 — Jasa promosikan jualan (explicit) As a Pemilik Toko Blommies Store, I should menawarkan jasa promosikan jualan sebagai salah satu layanan, sehingga pembeli dapat memesannya.

• Trigger/input: layanan ditampilkan di Services.
• Hasil teramati: kartu layanan dengan judul, deskripsi, dan harga tampil.
• Akses: anonim. Kegagalan: layanan tidak tampil → pesan dan coba lagi. Kelanjutan: pembeli menekan "Pesan".

FR-05 — Fitur pesan otomatis (explicit) As a Pembeli Jasa Digital, I should menerima dan mengirim pesan otomatis terkait pertanyaan dan pesanan, sehingga komunikasi berjalan tanpa menunggu balasan manual.

• Trigger/input: pembeli membuka Messages atau memicu pesan otomatis.
• Hasil teramati: pesan otomatis tampil sebagai balon percakapan; riwayat tersimpan.
• Akses: login. Kegagalan: pesan gagal terkirim → tandai dan opsi kirim ulang. Kelanjutan: pembeli membalas atau membuka pesanan terkait.

FR-06 — Pembayaran otomatis (explicit) As a Pembeli Jasa Digital, I should menyelesaikan pembayaran secara otomatis atas pesanan jasa, sehingga pesanan terbayar tanpa menunggu konfirmasi manual.

• Trigger/input: pembeli menekan selesaikan pembayaran di Checkout.
• Hasil teramati: status transaksi dan status pembayaran pesanan diperbarui.
• Akses: dibatasi peran. Kegagalan: pembayaran gagal → pesan dan opsi coba lagi. Kelanjutan: pembeli melihat status pesanan di Orders atau menghubungi penjual.

FR-07 — Kontak email (explicit) As a Pemilik Toko Blommies Store, I should mencantumkan alamat email toko, sehingga pembeli dapat menghubungi penjual.

• Trigger/input: pengunjung membuka Contact atau chip kontak.
• Hasil teramati: alamat email tampil dan dapat diklik.
• Akses: anonim. Kegagalan: tautan gagal → tampilkan teks alamat. Kelanjutan: pengunjung mengirim email.

FR-08 — Kontak Instagram (explicit) As a Pemilik Toko Blommies Store, I should mencantumkan akun Instagram toko, sehingga pembeli dapat menghubungi penjual.

• Trigger/input: pengunjung membuka Contact atau chip kontak.
• Hasil teramati: akun Instagram tampil dan dapat diklik.
• Akses: anonim. Kegagalan: tautan gagal → tampilkan teks akun. Kelanjutan: pengunjung membuka Instagram.

FR-09 — Kontak WhatsApp (explicit) As a Pemilik Toko Blommies Store, I should mencantumkan nomor WhatsApp toko, sehingga pembeli dapat menghubungi penjual.

• Trigger/input: pengunjung membuka Contact atau chip kontak.
• Hasil teramati: nomor WhatsApp tampil dan dapat diklik.
• Akses: anonim. Kegagalan: tautan gagal → tampilkan teks nomor. Kelanjutan: pengunjung membuka WhatsApp.

FR-10 — Situs kosongan siap dekorasi (explicit) As a Pemilik Toko Blommies Store, I should menerima situs dasar tanpa dekorasi final, sehingga saya dapat menambahkan dekorasi sendiri nanti.

• Trigger/input: pemilik membuka situs.
• Hasil teramati: slot dekorasi kosong berlabel tampil; tidak ada dekorasi final.
• Akses: anonim. Kegagalan: slot tidak tampil → periksa build mode. Kelanjutan: pemilik mengganti slot dengan dekorasinya sendiri.

FR-11 — Identitas aplikasi pembeli (required_inference) As a Pembeli Jasa Digital, I should membuat identitas aplikasi sebelum menyimpan atau melanjutkan pesanan dan pembayaran, sehingga pesanan saya terikat pada saya.

• Trigger/input: pembeli memulai pesanan atau membuka Orders tanpa identitas.
• Hasil teramati: akun dibuat; pesanan tersimpan pada akun tersebut.
• Akses: anonim (Sign Up). Kegagalan: email sudah terdaftar / kata sandi lemah → pesan inline. Kelanjutan: pembeli melanjutkan pesanan.

FR-12 — Verifikasi kembali identitas (required_inference) As a Pembeli Jasa Digital dan Pemilik Toko Blommies Store, I should memverifikasi kembali identitas untuk melanjutkan aktivitas masing-masing, sehingga pesanan dan pengelolaan toko dapat dilanjutkan.

• Trigger/input: pengguna membuka Login.
• Hasil teramati: sesi aktif; pengguna diarahkan ke Orders atau Service Management sesuai peran.
• Akses: anonim (Login). Kegagalan: kredensial salah → pesan inline. Kelanjutan: pengguna melanjutkan aktivitas.

FR-13 — Peran terotorisasi pemilik (required_inference) As a Pemilik Toko Blommies Store, I should memiliki peran terotorisasi untuk mengelola layanan serta pesanan dan status pembayaran, sehingga hanya pemilik yang mengubah katalog dan status pesanan.

• Trigger/input: pemilik membuka Service Management atau Order Management.
• Hasil teramati: perubahan layanan dan status pesanan tersimpan.
• Akses: dibatasi peran. Kegagalan: gagal simpan → pesan inline. Kelanjutan: pemilik meninjau perubahan.

FR-14 — Backend status transaksi dan pesanan (required_inference) As a Sistem, I should mempertahankan status transaksi dan pesanan untuk pemrosesan pembayaran otomatis, sehingga status pembayaran konsisten bagi pembeli dan pemilik.

• Trigger/input: pembayaran otomatis dijalankan.
• Hasil teramati: status transaksi dan pesanan tersimpan dan tampil di Orders dan Order Management.
• Akses: sistem. Kegagalan: transaksi gagal → status gagal tercatat. Kelanjutan: pembeli mencoba lagi atau menghubungi penjual.

FR-15 — Backend pemicu, pengiriman, dan riwayat pesan (required_inference) As a Sistem, I should menyimpan pemicu, pengiriman, dan riwayat pesan otomatis, sehingga pesan otomatis konsisten dan dapat ditinjau.

• Trigger/input: pemicu pesan otomatis terpenuhi.
• Hasil teramati: pesan terkirim dan riwayat tersimpan di Messages.
• Akses: sistem. Kegagalan: pengiriman gagal → catat dan coba ulang. Kelanjutan: pembeli melihat riwayat pesan.

4. User Personas

Pemilik Toko Blommies Store

Konteks produk: Pemilik menjalankan Blommies Store sebagai toko jasa digital satu orang. Ia menampilkan dan mengelola tiga layanan — jasa editing moodboard/loveboard, jasa joki tugas sekolah, dan jasa promosikan jualan — serta menyediakan kanal kontak email, Instagram, dan nomor WhatsApp.

Tujuan utama: menerima pesanan dan pembayaran otomatis tanpa harus menangani setiap percakapan secara manual, dan tetap bisa menambahkan dekorasi sendiri di kemudian hari.

Tanggung jawab yang diterima: mengelola katalog tiga layanan (Service Management), meninjau pesanan masuk dan status pembayaran otomatisnya (Order Management), serta memastikan kanal kontak tampil.

Input/keputusan: menambah, mengubah, atau menghapus layanan; menetapkan harga dan deskripsi; memperbarui status pesanan; memutuskan kapan menghubungi pembeli.

Interaksi dengan peserta lain: pemilik menerima pesanan dari Pembeli Jasa Digital dan meninjau status pembayaran yang dihasilkan sistem pembayaran otomatis; pemilik dapat menghubungi pembeli melalui pesan atau kanal kontak.

Keberhasilan teramati: pesanan dan pembayaran masuk tanpa penanganan manual setiap percakapan; katalog layanan dan status pesanan akurat; slot dekorasi tersedia untuk dihias sendiri.

Pembeli Jasa Digital

Konteks produk: Pengunjung yang datang untuk memesan salah satu jasa digital Blommies Store, biasanya menemukan toko melalui Instagram atau WhatsApp.

Tujuan utama: melihat daftar jasa, memilih jasa, mengirim pesanan melalui fitur pesan otomatis, dan menyelesaikan pembayaran secara otomatis.

Tanggung jawab yang diterima: membuat identitas aplikasi untuk menyimpan pesanan, memilih layanan, mengirim pesanan, menyelesaikan pembayaran, dan meninjau pesan otomatis.

Input/keputusan: memilih layanan dan harga, memutuskan untuk menyimpan pesanan, memutuskan menyelesaikan pembayaran, memutuskan menghubungi penjual lewat email, Instagram, atau WhatsApp bila diperlukan.

Interaksi dengan peserta lain: pembeli berinteraksi dengan pemilik melalui pesan otomatis dan kanal kontak; pembeli menerima pembaruan status pesanan dan pembayaran.

Keberhasilan teramati: pesanan terkirim dan pembayaran selesai tanpa menunggu balasan manual; pembeli dapat menghubungi penjual bila diperlukan.

5. Core User Flows

Alur 1 — Pembeli menemukan toko dan meninjau layanan

1. Pembeli membuka Landing (anonim) dan melihat nama "Blommies Store", tiga lini layanan, dan chip kontak.
2. Pembeli menekan "Lihat Layanan" dan tiba di Services.
3. Pembeli meninjau tiga kartu layanan (jasa editing moodboard/loveboard, jasa joki tugas sekolah, jasa promosikan jualan) beserta harga.
4. Jika layanan gagal dimuat, pembeli melihat pesan dan dapat mencoba lagi.
5. Kelanjutan: pembeli menekan "Pesan" pada layanan yang dipilih.

Alur 2 — Pembeli membuat identitas dan menyimpan pesanan

1. Pembeli menekan "Pesan" pada Services tanpa identitas aktif.
2. Pembeli diarahkan ke Sign Up (anonim) dan mengisi email serta kata sandi.
3. Jika email sudah terdaftar atau kata sandi lemah, pembeli melihat pesan inline dan memperbaiki input.
4. Setelah akun dibuat, pembeli diarahkan ke Orders dan pesanan tersimpan pada akunnya.
5. Kelanjutan: pembeli melanjutkan ke Checkout.

Alur 3 — Pembeli menyelesaikan pembayaran otomatis

1. Pembeli membuka Checkout (dibatasi peran) dari Orders.
2. Pembeli melihat ringkasan pesanan dan langkah pembayaran otomatis bernomor; langkah terisi sunflower saat selesai.
3. Pembeli menekan selesaikan pembayaran.
4. Sistem memproses pembayaran otomatis dan memperbarui status transaksi serta status pembayaran pesanan.
5. Jika pembayaran gagal, pembeli melihat pesan dan dapat mencoba lagi atau menghubungi penjual.
6. Keberhasilan: pembeli melihat status pesanan diperbarui di Orders.

Alur 4 — Pembeli berkomunikasi melalui pesan otomatis

1. Pembeli membuka Messages (login) dan melihat balon percakapan serta riwayat pesan.
2. Pesan otomatis masuk dengan animasi stagger 60ms dan indikator mengetik tiga titik.
3. Pembeli mengirim pesan; jika gagal, pesan ditandai dan dapat dikirim ulang.
4. Pembeli dapat membuka pesanan terkait dari percakapan.
5. Kelanjutan: pembeli menunggu balasan otomatis atau menghubungi penjual lewat kanal kontak.

Alur 5 — Pembeli menghubungi penjual lewat kanal kontak

1. Pembeli membuka Contact (anonim) atau chip kontak di Landing.
2. Pembeli melihat email, Instagram, dan nomor WhatsApp toko.
3. Pembeli menekan salah satu kanal; jika tautan gagal, pembeli menyalin teks alamat secara manual.
4. Kelanjutan: pembeli menghubungi penjual melalui kanal yang dipilih.

Alur 6 — Pemilik mengelola layanan

1. Pemilik membuka Login (anonim) dan memverifikasi identitas.
2. Pemilik diarahkan ke Service Management (dibatasi peran).
3. Pemilik menambah, mengubah, atau menghapus salah satu dari tiga layanan beserta harga dan deskripsinya.
4. Jika gagal simpan, pemilik melihat pesan inline dan memperbaiki input.
5. Keberhasilan: perubahan tersimpan dan tampil di Services.

Alur 7 — Pemilik meninjau pesanan dan status pembayaran

1. Pemilik membuka Order Management (dibatasi peran).
2. Pemilik melihat daftar pesanan masuk beserta status pembayaran otomatisnya.
3. Pemilik memperbarui status pesanan (mis. "Diproses", "Selesai").
4. Jika daftar gagal dimuat, pemilik melihat pesan dan dapat mencoba lagi.
5. Kelanjutan: pemilik menghubungi pembeli melalui pesan atau kanal kontak bila diperlukan.

Alur 8 — Pemilik menyiapkan dekorasi sendiri

1. Pemilik membuka situs dan melihat slot dekorasi kosong berlabel "slot dekorasi — ganti sesukamu".
2. Pemilik mengganti slot dengan dekorasinya sendiri tanpa mengubah tata letak dasar.
3. Keberhasilan: dekorasi pemilik tampil; slot kosong tidak lagi terlihat di tampilan publik.

6. Visuals Colors and Theme

Muse: Pablo Stanley. Headline: Warm modular storefront — toko jasa digital satu orang yang ramah, murah hati, dan kompeten.

Palet (light mode):

• Background: #FFF7EE (cream, ~70% setiap layar)
• Surface: #FFFFFF (kartu putih dengan outline ink 2px dan hard offset shadow)
• Text: #241C33 (ink; ~13:1 di cream, ~14:1 di putih)
• Primary: #FF5A8A (bubblegum pink — pill CTA, nav aktif, price tag, tombol WhatsApp)
• Accent: #FFC93C (sunflower — chip status "Diproses"/"Selesai", underline highlight, penanda langkah pembayaran otomatis)
• Muted: #8A7F96
• Support: #C9B6FF (lilac lembut — hanya untuk isian ilustrasi dan bentuk empty-state)

Catatan aksesibilitas: teks putih di atas #FF5A8A hanya ~3.4:1, sehingga tombol pink selalu memakai label semibold 18px+; teks pink berukuran kecil diganti dengan ink.

Tipografi:

• Headings: Baloo 2 700–800, tracking -0.01em, sentence case (tidak pernah all-caps). Hero clamp(44px, 9vw, 112px); judul seksi clamp(30px, 4.4vw, 56px); judul kartu layanan clamp(24px, 3vw, 34px). Harga memakai Baloo 2 800.
• Body: Nunito 400–600, 17px/1.65; label 13px Nunito 700 dengan tracking 0.06em.
• Skala modular 1.333: 12 / 16 / 21 / 28 / 38 / 50 / 67 / 89 / 112.

Shape language: radius besar — 28px pada kartu, 999px pada setiap tombol, chip, dan input. Kartu putih dengan border ink #241C33 2px dan hard offset shadow 6px 6px 0 dalam warna aksen kartu (tanpa blur, tanpa drop shadow abu-abu lembut). Bentuk blob dan stiker (path SVG organik lilac dan sunflower) disediakan sebagai slot dekorasi kosong yang dapat diganti pemilik. Batas seksi kadang melengkung dengan satu gelombang dangkal, tidak pernah potongan diagonal.

Layout: mobile-first satu kolom yang menjadi grid 12 kolom pada 1280px. Landing membuka dengan hero asimetris: headline besar di kolom 1–7, tiga kartu stiker layanan miring di kolom 8–12. Daftar layanan adalah grid kartu 1-up/2-up/3-up dengan gutter 24–32px. Checkout dan Messages sengaja tenang: satu ukuran sempit 640px, langkah bernomor sebagai lingkaran pink besar dengan garis putus-putus, ringkasan pesanan di kartu putih ber-outline. Navigasi adalah top bar lengket dengan pill CTA pink di desktop dan bottom tab bar (Beranda / Layanan / Pesan / Pesanan / Akun) di mobile. Setiap area dekorasi adalah slot kosong bernama dengan outline putus-putus di build mode pemilik.

Imagery: sengaja jarang dan dapat diganti — ilustrasi vektor datar dalam bahasa muse (tangan memegang moodboard, tumpukan kertas, megafon, tas belanja) sebagai bentuk bulat sederhana dalam pink/sunflower/lilac di atas cream. Tanpa fotografi stok dan tanpa hero fotografi. Setiap ilustrasi berada di slot rasio tetap (1:1 atau 4:3) dengan outline placeholder putus-putus.

Avoid: primer biru–indigo atau tombol keluarga #2563EB/#6366F1 di atas putih; Inter, Roboto, Poppins, Montserrat, atau system-ui untuk heading atau body; hero gradient-blob, panel glassmorphism, drop shadow blur; grid kartu hover-lift identik tanpa rotasi, outline, atau offset shadow; fotografi stok; klise trust-signal korporat (ikon shield, "enterprise-grade", dashboard abu-abu); mengisi slot dekorasi dengan artwork final — slot harus dikirim kosong dan dapat diganti; sudut 0px tajam, border abu-abu 1px, atau heading all-caps.

7. Signature Design Concept

Hero Landing — "Sticker Shop Window". Bukan hero SaaS terpusat. Sebuah bidang cream full-bleed di mana "Blommies Store" disusun dalam Baloo 2 pada clamp(44px, 9vw, 112px), rata kiri, bertumpuk dalam tiga baris ("Jasa digital", "yang bikin harimu", "lebih rapi\x20\xe2\x9c\xbf"), dengan garis bawah pink bergaya gambar tangan menyapu di bawah baris kedua. Di sebelah kanan, tiga kartu stiker putih diputar -6°, +3°, dan -2°, saling menumpuk dan sedikit melewati tepi kanan, masing-masing berlabel satu layanan dan harga awalnya dalam pill sunflower. Di bawah headline terdapat satu pill CTA #FF5A8A ("Pesan Sekarang") plus pill outlined sekunder ("Lihat Layanan"), dan baris tipis tiga chip kontak — email, Instagram, WhatsApp — sebagai kapsul outlined kecil. Seluruh komposisi datar 2D tanpa gradient blob; satu-satunya kedalaman adalah hard offset shadow pada stiker. Slot dekorasi kosong berlabel "slot dekorasi — ganti sesukamu" terlihat di build mode pemilik dan hilang sepenuhnya di tampilan publik.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief:

• Focal subject: headline "Blommies Store" dan tiga kartu stiker layanan yang miring.
• Input → transformation → outcome: saat halaman dimuat, headline naik 16px dan memudar masuk; tiga kartu stiker masuk dengan stagger 60ms dan sedikit berputar ke posisi istirahatnya; saat kursor/hover, kartu meluruskan ke 0° dengan spring bounce dan offset shadow tumbuh dari 6px ke 10px. Outcome: komposisi hero yang hidup namun tetap datar 2D.
• Motion vocabulary: springy 220–320ms cubic-bezier(0.34, 1.56, 0.64, 1); tombol squash ke 0.96 dan pop kembali; kartu terangkat 4px; scroll reveal satu kali per seksi berupa rise 16px plus fade.
• Composed first frame: headline rata kiri di kolom 1–7, tiga kartu stiker miring di kolom 8–12, pill CTA pink dan pill outlined di bawah headline, baris chip kontak di bawahnya.
• Reduced-motion state: semua transform dan stagger runtuh menjadi perubahan state instan tanpa transform; kartu stiker tetap pada rotasi istirahatnya dan tetap dapat dibaca.

Signature moves yang diterapkan:

• Sticker-card service grid: setiap layanan adalah kartu putih dengan outline ink 2px, hard offset shadow 6px dalam warna aksennya sendiri, diputar antara -3° dan +3° saat istirahat, meluruskan ke 0° saat hover dengan spring bounce.
• Contact chips sebagai rail "call the shop": email, Instagram, dan WhatsApp sebagai tiga pill outlined dengan ikon gambar tangan kecil, dipin di bawah headline hero dan diulang sebagai cluster mengambang tetap di kanan bawah pada desktop serta di dalam area bottom tab bar pada mobile.
• Numbered auto-payment steps: lingkaran pink besar yang disatukan garis putus-putus gambar tangan yang terisi sunflower secara progresif saat setiap langkah selesai — identitas visual utama Checkout.
• Auto-message bubbles: balon percakapan dengan ekor yang disengaja, masuk dengan stagger 60ms dan indikator mengetik tiga titik yang memantul, sehingga otomatisasi terasa seperti manusia yang mengobrol, bukan log bot.
• Decoration slots: setiap slot dekorasi adalah placeholder outline putus-putus yang terlihat dengan label "slot dekorasi — ganti sesukamu" di build mode pemilik, dan hilang sepenuhnya di tampilan publik — kerangka kosong adalah fitur yang dirancang, bukan ketiadaan.

9. Non-Functional Requirements

• NFR-01 — Kondisi kosongan (explicit): situs harus dikirim dalam kondisi kosongan; pemilik menambahkan dekorasi/hiasan sendiri, sehingga pembuat hanya menyediakan website dasar tanpa dekorasi. Rasional: batasan keras eksplisit dari sumber.
• NFR-02 — Aksesibilitas warna (required_inference): teks putih di atas #FF5A8A hanya ~3.4:1, sehingga tombol pink memakai label semibold 18px+ dan teks pink kecil diganti ink. Rasional: menjaga keterbacaan sesuai arah kreatif.
• NFR-03 — Teks dan kontrol tetap utuh (required_inference): headline, wordmark, label, angka, teks kartu, dan kontrol tetap sepenuhnya di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px, membungkus atau menskalakan (mis. font-size: clamp(...)) agar muat; tidak ada elemen lain yang menutupi bagian mana pun. Rasional: keterbacaan di semua viewport.
• NFR-04 — Reduced motion (required_inference): di bawah prefers-reduced-motion, semua animasi runtuh menjadi perubahan state instan tanpa transform, dan konten yang bergulir/bergerak menyediakan susunan statis yang dapat digunakan. Rasional: aksesibilitas gerak.
• NFR-05 — Backend transaksi dan pesan (required_inference): backend diperlukan untuk mempertahankan status transaksi dan pesanan serta pemicu, pengiriman, dan riwayat pesan otomatis. Rasional: membuat alur pembayaran otomatis dan pesan otomatis dapat dijalankan.

10. Tech Stack

• Frontend: React (web) — antarmuka kustom first-party untuk semua halaman.
• Backend: Python/FastAPI — melayani pemrosesan pembayaran otomatis, status transaksi dan pesanan, serta pemicu, pengiriman, dan riwayat pesan otomatis.
• Storage: basis data untuk menyimpan akun, layanan, pesanan, transaksi, dan pesan.
• Containerization: Docker/docker-compose untuk menjalankan frontend, backend, dan storage secara lokal.
• Kubernetes: hanya jika kebutuhan deployment menuntut orkestrasi; tidak diwajibkan oleh sumber.

11. Assumptions and Constraints

• Batasan keras: situs dikirim kosongan tanpa dekorasi final; pemilik menambahkan dekorasi sendiri (eksplisit).
• Asumsi identitas: identitas milik aplikasi diperlukan agar pembeli dapat menyimpan dan melanjutkan pesanan serta pembayaran, dan agar pemilik dapat mengelola toko; ini adalah required_inference, bukan permintaan eksplisit.
• Asumsi peran: peran terotorisasi pemilik untuk mengelola layanan serta pesanan dan status pembayaran adalah required_inference untuk menjaga kepemilikan perubahan katalog dan status.
• Asumsi backend: pemrosesan pembayaran otomatis dan pesan otomatis memerlukan backend untuk mempertahankan status dan riwayat; ini adalah required_inference.
• Batas masa depan: dekorasi/hiasan final adalah pekerjaan masa depan pemilik; tidak termasuk lingkup saat ini.
• Default presentasi: palet, tipografi, bentuk, layout, dan gerak mengikuti arah kreatif Pablo Stanley; detail yang tidak ditentukan sumber diisi oleh arah kreatif, bukan perilaku produk baru.

12. Glossary

• Blommies Store: nama toko jasa digital yang dijalankan pemilik; situs proyek bernama shiny-blommies.
• Jasa editing moodboard/loveboard: layanan menyunting papan suasana (moodboard) atau papan kenangan (loveboard).
• Jasa joki tugas sekolah: layanan mengerjakan tugas sekolah atas nama pembeli.
• Jasa promosikan jualan: layanan mempromosikan jualan/dagangan pembeli.
• Pesan otomatis: pesan yang dikirim sistem berdasarkan pemicu, tanpa balasan manual.
• Pembayaran otomatis: pemrosesan pembayaran yang memperbarui status transaksi dan pesanan tanpa konfirmasi manual.
• Slot dekorasi: area kosong berlabel yang disediakan untuk diisi dekorasi oleh pemilik.
• Kanal kontak: email, Instagram, dan nomor WhatsApp toko.