System Requirements Document for smartphone-service-hp

1. Introduction

Acong Cell adalah bisnis smartphone lokal yang bergerak di bidang jual beli HP baru dan bekas serta service/perbaikan smartphone. Dokumen ini menetapkan persyaratan untuk sebuah website modern, profesional, dan responsif yang memperkenalkan Acong Cell, menampilkan produk yang dijual, menjelaskan layanan perbaikan yang tersedia, dan memudahkan pengunjung menghubungi Acong Cell untuk bertransaksi atau menanyakan perbaikan.

Produk ini ditujukan untuk tiga kelompok pengunjung aktif:

• Calon Pembeli HP — pengunjung yang ingin membeli smartphone baru atau bekas.
• Penjual HP Bekas — pemilik HP yang ingin menjual atau menukar perangkatnya ke Acong Cell.
• Pelanggan Service HP — pemilik HP rusak yang membutuhkan perbaikan (ganti LCD/screen, ganti baterai, ganti charging port, troubleshooting software, serta perbaikan hardware dan software secara umum).

Seluruh teks yang terlihat oleh pengunjung wajib dalam Bahasa Indonesia, kecuali istilah teknis umum seperti "WhatsApp", "Android", "iPhone", dan "LCD". Brand yang ditampilkan adalah ACONG CELL dengan tagline utama "Jual Beli & Service HP Terpercaya". Identitas visual harus premium namun ramah, cocok untuk toko HP modern Indonesia.

2. System Overview

Website Acong Cell adalah situs publik berbasis halaman yang menyajikan informasi produk dan layanan serta jalur kontak langsung ke toko. Situs tidak memiliki akun pengguna, tidak memproses pembayaran, dan tidak menyimpan data transaksi; seluruh penyelesaian transaksi jual beli dan service dilakukan melalui percakapan langsung dengan Acong Cell (WhatsApp atau kunjungan ke toko).

Aktor manusia yang diterima: Calon Pembeli HP, Penjual HP Bekas, dan Pelanggan Service HP. Aktor non-manusia: layanan pesan eksternal WhatsApp (tujuan keluar, dimiliki pihak ketiga) dan sistem pemrosesan konten situs (penyajian halaman, penyaringan produk, dan perhitungan estimasi biaya service di sisi klien).

Kemampuan yang diterima saat ini:

• Menampilkan hero brand Acong Cell dengan headline, subheadline, tiga tombol CTA, visual smartphone, dan empat keunggulan utama.
• Menampilkan produk HP baru dan bekas yang dijual Acong Cell beserta informasi dan harga.
• Menjelaskan layanan perbaikan: ganti LCD/screen, ganti baterai, ganti charging port, troubleshooting software, serta perbaikan hardware dan software umum.
• Menyediakan jalur kontak bagi calon pembeli, penjual HP bekas, dan pelanggan service.
• Menyediakan estimasi biaya service berbasis pilihan kategori layanan sebagai alat bantu sebelum menghubungi toko.

Pengecualian yang sempit dan mengikat:

• Tidak boleh menampilkan teks Bahasa Inggris kepada pengunjung, kecuali istilah teknis umum seperti "WhatsApp", "Android", "iPhone", dan "LCD".
• Tidak ada keranjang belanja, checkout, pembayaran daring, atau akun pengguna; transaksi diselesaikan melalui kontak langsung.
• Tidak ada pelacakan status perbaikan daring; status perbaikan dikomunikasikan langsung oleh Acong Cell.

2a. Product Interpretation and Delivery Boundary

Website ini adalah etalase digital dan titik kontak pertama Acong Cell, bukan sistem transaksi. Pengunjung dapat melihat produk, memahami layanan service, menghitung gambaran biaya, dan menghubungi toko; keputusan akhir, penawaran harga, dan penjadwalan perbaikan tetap terjadi dalam percakapan langsung dengan Acong Cell.

Kepemilikan akses: seluruh halaman bersifat publik dan dapat diakses tanpa akun. Tidak ada identitas milik aplikasi yang diperlukan, karena tidak ada state pengguna yang harus disimpan, dilanjutkan, atau diikatkan pada peserta tertentu. Kontak keluar diarahkan ke WhatsApp sebagai kanal milik pihak ketiga; Acong Cell memiliki isi pesan awal dan nomor tujuan, sedangkan pengiriman pesan dimiliki WhatsApp.

Batas horizon saat ini: keempat halaman publik (HOME PAGE, Produk, Layanan Service, Hubungi Kami) beserta seluruh perilaku yang dijelaskan di dokumen ini. Tidak ada halaman atau kemampuan masa depan yang direncanakan dalam lingkup ini.

2b. Source Content Inventory

Tidak ada direktif referensi dengan content_source pada sumber proyek ini, sehingga inventaris konten sumber tidak disertakan.

2c. Page Content and Component Coverage

HOME PAGE

• Informasi/state: hero brand ACONG CELL; headline "Jual Beli & Service HP Terpercaya"; subheadline yang menjelaskan bahwa Acong Cell menyediakan penjualan, pembelian, dan layanan perbaikan smartphone; visual terkait smartphone; empat keunggulan utama; ringkasan layanan service; sorotan produk; ajakan menghubungi toko.
• Aksi utama: tombol "Lihat Produk" (menuju Produk), tombol "Service HP" (menuju Layanan Service), tombol "Hubungi Kami" (menuju Hubungi Kami).
• Aksi pendukung: navigasi utama ke keempat halaman; tautan WhatsApp langsung; pemilih kategori layanan pada strip "Cek Estimasi Biaya Service".
• Entitas domain: Brand (ACONG CELL), Tagline, Keunggulan, Layanan Service, Produk HP, Estimasi Biaya Service.
• Komponen:
  • Panel hero: eyebrow "TOKO HP & SERVICE — SEJAK 2015", headline besar dengan kata "Terpercaya" sebagai satu-satunya kata berwarna tomat, subheadline dua baris, tiga tombol CTA, garis rambut pemisah, dan empat label keunggulan sebaris dipisahkan titik.
  • Panel foto hero: foto hangat proses perbaikan HP yang meluber keluar tepi kanan viewport, dengan stempel bundar tomat "GARANSI" menumpuk di sudutnya; pada mobile panel turun ke bawah teks dengan lebar penuh dan stempel tetap menumpuk di sudut kanan atas.
  • Panel keunggulan: satu band horizontal berisi empat panel bernomor — "Harga Terjangkau", "Pengerjaan Profesional", "Bergaransi", "Pelayanan Terpercaya" — dipisahkan garis rambut tipis.
  • Dinding panel layanan: enam panel modular dengan header berwarna (teal/mustard/sage/ink), pictogram garis tebal, dan deskripsi singkat Bahasa Indonesia untuk Ganti LCD/Screen, Ganti Baterai, Ganti Charging Port, Troubleshooting Software, Jual HP Bekas, dan Beli HP Baru/Bekas.
  • Strip "Cek Estimasi Biaya Service": baris chip kategori layanan yang dapat dipilih (Ganti LCD, Ganti Baterai, Charging Port, Software) yang mengisi kartu estimasi bergaya kertas dengan total berasa tulisan tangan.
  • Sorotan produk: beberapa kartu produk dengan tag harga berbentuk stempel bundar tomat yang menumpuk di sudut kanan atas foto.
  • Pembatas ticker: marquee "JUAL • BELI • SERVICE • BERGARANSI •" dalam huruf kapital Jost yang berhenti saat hover dan berubah menjadi baris statis saat prefers-reduced-motion.
  • Footer: nama brand, tagline, navigasi ringkas, dan tautan WhatsApp.
• State:
  • Loading: panel muncul dengan animasi naik 16px dan fade-in 500ms, bertahap 80ms per baris.
  • Empty: jika sorotan produk belum tersedia, tampilkan pesan Bahasa Indonesia "Produk sedang diperbarui. Hubungi kami untuk ketersediaan terbaru." beserta tombol "Hubungi Kami".
  • Success: seluruh panel tampil; tombol CTA dapat diklik dan mengarah ke halaman yang benar.
  • Error: jika foto hero gagal dimuat, tampilkan blok warna teal solid dengan pictogram smartphone sebagai pengganti, tanpa teks yang terpotong.
  • Recovery: pengunjung selalu dapat melanjutkan melalui tombol "Lihat Produk", "Service HP", atau "Hubungi Kami".

Produk

• Informasi/state: daftar HP baru dan bekas yang dijual Acong Cell; untuk setiap produk: nama perangkat, merek, kondisi (Baru/Bekas), kapasitas/varian bila tersedia, harga dalam Rupiah, dan foto produk.
• Aksi utama: melihat detail informasi produk; menghubungi Acong Cell mengenai produk tertentu.
• Aksi pendukung: menyaring daftar berdasarkan kondisi (Semua/Baru/Bekas) dan merek; menavigasi ke Hubungi Kami.
• Entitas domain: Produk HP, Kondisi HP, Merek, Harga, Foto Produk.
• Komponen:
  • Header halaman: judul Bahasa Indonesia dan pengantar singkat tentang jual beli HP baru dan bekas di Acong Cell.
  • Kontrol penyaringan: chip kategori kondisi (Semua, Baru, Bekas) dan chip merek, memakai warna mustard/sage sebagai chip kategorikal.
  • Grid produk: tile 4-up (3-up pada tablet, 1-up pada 375px) dengan foto produk, tag harga stempel tomat di sudut kanan atas, nama perangkat, chip kondisi, dan tombol "Tanya via WhatsApp".
  • Panel jual HP bekas: panel ajakan bagi Penjual HP Bekas dengan penjelasan singkat dan tombol menuju Hubungi Kami.
  • Footer: sama seperti HOME PAGE.
• State:
  • Loading: tile muncul dengan fade-in bertahap; kontrol penyaringan tetap dapat digunakan.
  • Empty: jika tidak ada produk yang cocok dengan filter, tampilkan "Belum ada produk untuk pilihan ini." beserta tombol "Reset Filter" dan "Hubungi Kami".
  • Success: daftar produk tampil lengkap dengan harga dan tombol kontak per produk.
  • Error: jika foto produk gagal dimuat, tampilkan blok warna cream dengan pictogram smartphone; nama, kondisi, dan harga tetap terbaca utuh.
  • Recovery: pengunjung dapat mereset filter atau langsung menghubungi Acong Cell.

Layanan Service

• Informasi/state: penjelasan setiap layanan perbaikan — Ganti LCD/Screen, Ganti Baterai, Ganti Charging Port, Troubleshooting Software, serta Perbaikan Hardware dan Software Umum; indikasi pengerjaan profesional dan garansi.
• Aksi utama: memilih kategori layanan untuk melihat estimasi biaya; menghubungi Acong Cell untuk perbaikan.
• Aksi pendukung: membaca penjelasan tiap layanan; menavigasi ke Hubungi Kami.
• Entitas domain: Layanan Service, Kategori Layanan, Estimasi Biaya Service, Garansi.
• Komponen:
  • Header halaman: judul Bahasa Indonesia dan pengantar tentang service HP di Acong Cell.
  • Dinding panel layanan: panel modular per layanan dengan header berwarna, pictogram garis tebal (screen, baterai, port, software), dan deskripsi Bahasa Indonesia.
  • Panel garansi: stempel bundar "GARANSI 30 HARI" dengan nuansa cap tangan, disertai penjelasan singkat cakupan garansi.
  • Strip "Cek Estimasi Biaya Service": chip kategori layanan yang dapat dipilih; pilihan mengisi kartu estimasi bergaya kertas dengan rincian dan total berasa tulisan tangan.
  • Panel alur service: langkah ringkas Bahasa Indonesia — hubungi kami, konsultasi dan pengecekan, persetujuan biaya, pengerjaan, pengambilan perangkat bergaransi.
  • Footer: sama seperti HOME PAGE.
• State:
  • Loading: panel muncul dengan fade-in bertahap.
  • Empty: jika belum ada kategori layanan yang dipilih pada kartu estimasi, tampilkan ajakan "Pilih jenis layanan untuk melihat estimasi biaya." tanpa total.
  • Success: kartu estimasi menampilkan rincian kategori terpilih dan total perkiraan, disertai catatan bahwa biaya akhir ditentukan setelah pengecekan perangkat.
  • Error: jika perhitungan estimasi tidak dapat dijalankan, tampilkan pesan "Estimasi tidak tersedia saat ini. Silakan hubungi kami untuk biaya pasti." beserta tombol "Hubungi Kami".
  • Recovery: pengunjung dapat mengubah pilihan kategori atau langsung menghubungi Acong Cell.

Hubungi Kami

• Informasi/state: kanal kontak Acong Cell — WhatsApp, alamat toko, jam operasional, dan penjelasan singkat untuk tiga keperluan: membeli HP, menjual HP bekas, dan service HP.
• Aksi utama: membuka percakapan WhatsApp dengan pesan awal yang sudah terisi sesuai keperluan; melihat alamat dan jam operasional.
• Aksi pendukung: memilih keperluan kontak (Beli HP / Jual HP / Service HP) yang menyesuaikan pesan awal WhatsApp; menyalin alamat.
• Entitas domain: Kanal Kontak, Keperluan Kontak, Jam Operasional, Alamat Toko.
• Komponen:
  • Header halaman: judul Bahasa Indonesia dan pengantar singkat.
  • Pemilih keperluan: tiga chip — "Beli HP", "Jual HP", "Service HP" — yang mengubah pesan awal WhatsApp.
  • Kartu kontak WhatsApp: tombol utama tomat dengan glyph WhatsApp dan label Bahasa Indonesia.
  • Panel informasi toko: alamat, jam operasional, dan catatan bahwa kunjungan langsung diterima pada jam tersebut.
  • Footer: sama seperti HOME PAGE.
• State:
  • Loading: kartu kontak muncul dengan fade-in singkat.
  • Empty: tidak berlaku; kanal kontak selalu tersedia.
  • Success: tombol WhatsApp membuka percakapan dengan pesan awal sesuai keperluan yang dipilih.
  • Error: jika WhatsApp tidak dapat dibuka, tampilkan nomor telepon dan alamat toko sebagai jalur alternatif, dalam Bahasa Indonesia.
  • Recovery: pengunjung dapat menyalin alamat atau memilih keperluan lain lalu mencoba lagi.

3. Functional Requirements

FR-01 — Identitas brand dan tagline As a pengunjung Acong Cell, I should melihat nama brand "ACONG CELL" dan tagline "Jual Beli & Service HP Terpercaya" pada situs, so that saya langsung mengenali toko dan janji layanannya.

• Provenance: explicit
• Actor: Calon Pembeli HP, Penjual HP Bekas, Pelanggan Service HP
• Trigger/input: pengunjung membuka situs
• Observable result: brand dan tagline tampil pada hero HOME PAGE dan footer
• Access state: publik, tanpa akun
• Failure/recovery: jika aset logo gagal dimuat, nama brand tetap tampil sebagai teks
• Continuation: pengunjung dapat melanjutkan ke navigasi atau CTA

FR-02 — Hero HOME PAGE As a pengunjung, I should melihat hero section dengan brand Acong Cell, headline "Jual Beli & Service HP Terpercaya", dan subheadline yang menjelaskan bahwa Acong Cell menyediakan penjualan, pembelian, dan layanan perbaikan smartphone, so that saya memahami bidang usaha Acong Cell dalam sekali lihat.

• Provenance: explicit
• Actor: Calon Pembeli HP, Penjual HP Bekas, Pelanggan Service HP
• Trigger/input: pengunjung membuka HOME PAGE
• Observable result: hero tampil dengan headline, subheadline, dan visual smartphone
• Access state: publik, tanpa akun
• Failure/recovery: jika foto hero gagal dimuat, blok warna teal dengan pictogram smartphone menggantikannya
• Continuation: pengunjung dapat memilih salah satu dari tiga tombol CTA

FR-03 — Tiga tombol CTA pada hero As a pengunjung, I should melihat dan dapat menekan tombol "Lihat Produk", "Service HP", dan "Hubungi Kami" pada hero, so that saya dapat langsung menuju bagian yang saya butuhkan.

• Provenance: explicit
• Actor: Calon Pembeli HP, Penjual HP Bekas, Pelanggan Service HP
• Trigger/input: pengunjung menekan salah satu tombol
• Observable result: "Lihat Produk" membuka halaman Produk; "Service HP" membuka halaman Layanan Service; "Hubungi Kami" membuka halaman Hubungi Kami
• Access state: publik, tanpa akun
• Failure/recovery: jika navigasi gagal, pengunjung dapat memakai menu navigasi utama
• Continuation: pengunjung tiba di halaman tujuan dan dapat melanjutkan tugasnya

FR-04 — Visual terkait smartphone As a pengunjung, I should melihat visual terkait smartphone yang menarik pada situs, so that saya mendapat gambaran nyata tentang produk dan pekerjaan service Acong Cell.

• Provenance: explicit
• Actor: Calon Pembeli HP, Penjual HP Bekas, Pelanggan Service HP
• Trigger/input: pengunjung membuka HOME PAGE, Produk, atau Layanan Service
• Observable result: foto hangat bertema smartphone dan perbaikan tampil pada panel yang ditentukan
• Access state: publik, tanpa akun
• Failure/recovery: jika foto gagal dimuat, blok warna dengan pictogram menggantikannya tanpa menutupi teks
• Continuation: pengunjung tetap dapat membaca konten dan memakai kontrol

FR-05 — Empat keunggulan utama As a pengunjung, I should melihat keunggulan "Harga Terjangkau", "Pengerjaan Profesional", "Bergaransi", dan "Pelayanan Terpercaya", so that saya yakin memilih Acong Cell.

• Provenance: explicit
• Actor: Calon Pembeli HP, Penjual HP Bekas, Pelanggan Service HP
• Trigger/input: pengunjung menggulir HOME PAGE
• Observable result: band keunggulan dengan empat panel bernomor tampil utuh
• Access state: publik, tanpa akun
• Failure/recovery: tidak berlaku; konten statis selalu tampil
• Continuation: pengunjung dapat melanjutkan ke bagian layanan atau produk

FR-06 — Melihat produk HP baru dan bekas As a Calon Pembeli HP, I should melihat daftar HP baru dan bekas yang dijual Acong Cell beserta nama perangkat, kondisi, dan harga, so that saya dapat menilai apakah ada HP yang sesuai kebutuhan dan anggaran saya.

• Provenance: explicit
• Actor: Calon Pembeli HP
• Trigger/input: pengunjung membuka halaman Produk
• Observable result: grid produk tampil dengan foto, nama, chip kondisi, dan tag harga Rupiah
• Access state: publik, tanpa akun
• Failure/recovery: jika tidak ada produk, tampil pesan "Belum ada produk untuk pilihan ini." dengan tombol "Reset Filter" dan "Hubungi Kami"
• Continuation: pengunjung dapat menghubungi Acong Cell mengenai produk tertentu

FR-07 — Menyaring produk As a Calon Pembeli HP, I should menyaring daftar produk berdasarkan kondisi (Semua/Baru/Bekas) dan merek, so that saya hanya melihat HP yang relevan.

• Provenance: required_inference
• Actor: Calon Pembeli HP
• Trigger/input: pengunjung memilih chip kondisi atau merek
• Observable result: grid produk diperbarui sesuai filter; jumlah hasil terlihat
• Access state: publik, tanpa akun
• Failure/recovery: jika filter tidak menghasilkan produk, tampil state kosong dengan tombol "Reset Filter"
• Continuation: pengunjung dapat mereset filter atau menghubungi Acong Cell

FR-08 — Menghubungi Acong Cell mengenai produk As a Calon Pembeli HP, I should menghubungi Acong Cell mengenai produk yang saya minati melalui WhatsApp dengan pesan awal yang menyebut produk tersebut, so that saya dapat menanyakan ketersediaan dan menyelesaikan pembelian.

• Provenance: required_inference
• Actor: Calon Pembeli HP; peserta: Acong Cell sebagai penerima pesan
• Trigger/input: pengunjung menekan tombol "Tanya via WhatsApp" pada kartu produk
• Observable result: percakapan WhatsApp terbuka dengan pesan awal berisi nama produk
• Access state: publik, tanpa akun; pengiriman pesan dimiliki WhatsApp
• Failure/recovery: jika WhatsApp tidak dapat dibuka, tampilkan nomor telepon dan alamat toko sebagai alternatif
• Continuation: Acong Cell membalas dan transaksi dilanjutkan di luar situs

FR-09 — Menjual atau menukar HP bekas As a Penjual HP Bekas, I should memahami bahwa Acong Cell menerima penjualan dan penukaran HP bekas, lalu menghubungi Acong Cell untuk meminta penawaran, so that saya dapat menyelesaikan penjualan perangkat saya.

• Provenance: explicit (layanan jual beli) + required_inference (jalur kontak penawaran)
• Actor: Penjual HP Bekas; peserta: Acong Cell sebagai pemberi penawaran
• Trigger/input: pengunjung membuka panel jual HP bekas di halaman Produk atau halaman Hubungi Kami dan memilih keperluan "Jual HP"
• Observable result: percakapan WhatsApp terbuka dengan pesan awal berisi maksud menjual HP
• Access state: publik, tanpa akun
• Failure/recovery: jika WhatsApp tidak dapat dibuka, alamat dan jam operasional toko ditampilkan agar penjual dapat datang langsung
• Continuation: Acong Cell memeriksa perangkat dan memberikan penawaran; penjual memutuskan menerima atau tidak

FR-10 — Memahami layanan perbaikan As a Pelanggan Service HP, I should melihat penjelasan layanan Ganti LCD/Screen, Ganti Baterai, Ganti Charging Port, Troubleshooting Software, serta Perbaikan Hardware dan Software Umum, so that saya tahu apakah kerusakan HP saya dapat ditangani.

• Provenance: explicit
• Actor: Pelanggan Service HP
• Trigger/input: pengunjung membuka halaman Layanan Service
• Observable result: dinding panel layanan tampil dengan pictogram dan deskripsi Bahasa Indonesia per layanan
• Access state: publik, tanpa akun
• Failure/recovery: tidak berlaku; konten statis selalu tampil
• Continuation: pengunjung dapat memilih kategori layanan untuk estimasi atau langsung menghubungi Acong Cell

FR-11 — Estimasi biaya service As a Pelanggan Service HP, I should memilih kategori layanan (Ganti LCD, Ganti Baterai, Charging Port, Software) dan melihat kartu estimasi berisi rincian serta total perkiraan, so that saya mendapat gambaran biaya sebelum menghubungi toko.

• Provenance: required_inference
• Actor: Pelanggan Service HP
• Trigger/input: pengunjung memilih satu atau lebih chip kategori layanan pada strip "Cek Estimasi Biaya Service"
• Observable result: kartu estimasi terisi rincian kategori dan total perkiraan, disertai catatan bahwa biaya akhir ditentukan setelah pengecekan perangkat
• Access state: publik, tanpa akun; perhitungan berjalan di sisi klien
• Failure/recovery: jika estimasi tidak dapat dihitung, tampil pesan "Estimasi tidak tersedia saat ini. Silakan hubungi kami untuk biaya pasti." dengan tombol "Hubungi Kami"
• Continuation: pengunjung dapat mengubah pilihan atau menghubungi Acong Cell untuk biaya pasti

FR-12 — Menghubungi Acong Cell untuk service As a Pelanggan Service HP, I should menghubungi Acong Cell untuk menjadwalkan atau menanyakan perbaikan, dengan pesan awal yang menyebut jenis layanan yang saya butuhkan, so that perangkat saya dapat segera ditangani.

• Provenance: required_inference
• Actor: Pelanggan Service HP; peserta: Acong Cell sebagai penerima permintaan service
• Trigger/input: pengunjung menekan tombol kontak pada halaman Layanan Service atau memilih keperluan "Service HP" di halaman Hubungi Kami
• Observable result: percakapan WhatsApp terbuka dengan pesan awal berisi jenis layanan
• Access state: publik, tanpa akun
• Failure/recovery: jika WhatsApp tidak dapat dibuka, nomor telepon dan alamat toko ditampilkan sebagai alternatif
• Continuation: Acong Cell mengonfirmasi pengecekan, biaya, dan waktu pengerjaan

FR-13 — Informasi garansi As a Pelanggan Service HP, I should melihat informasi garansi pengerjaan service, so that saya yakin perbaikan saya dilindungi.

• Provenance: explicit ("Bergaransi") + required_inference (penyajian cakupan garansi)
• Actor: Pelanggan Service HP
• Trigger/input: pengunjung membuka halaman Layanan Service
• Observable result: stempel "GARANSI 30 HARI" dan penjelasan singkat cakupan garansi tampil
• Access state: publik, tanpa akun
• Failure/recovery: tidak berlaku; konten statis selalu tampil
• Continuation: pengunjung dapat menghubungi Acong Cell untuk detail garansi

FR-14 — Halaman Hubungi Kami As a pengunjung, I should melihat kanal kontak Acong Cell (WhatsApp, alamat toko, jam operasional) dan memilih keperluan kontak, so that saya dapat menghubungi toko dengan cara yang paling sesuai.

• Provenance: explicit (CTA "Hubungi Kami") + required_inference (kanal dan keperluan kontak)
• Actor: Calon Pembeli HP, Penjual HP Bekas, Pelanggan Service HP; peserta: Acong Cell sebagai penerima kontak
• Trigger/input: pengunjung membuka halaman Hubungi Kami dan memilih chip keperluan "Beli HP", "Jual HP", atau "Service HP"
• Observable result: pesan awal WhatsApp menyesuaikan keperluan yang dipilih; alamat dan jam operasional tampil
• Access state: publik, tanpa akun
• Failure/recovery: jika WhatsApp tidak dapat dibuka, nomor telepon dan alamat toko tetap tampil sebagai jalur alternatif
• Continuation: Acong Cell membalas dan percakapan berlanjut di luar situs

FR-15 — Seluruh teks dalam Bahasa Indonesia As a pengunjung, I should melihat seluruh teks UI, navigasi, heading, tombol, deskripsi produk, dan deskripsi layanan dalam Bahasa Indonesia, so that saya memahami situs tanpa hambatan bahasa.

• Provenance: explicit
• Actor: Calon Pembeli HP, Penjual HP Bekas, Pelanggan Service HP
• Trigger/input: pengunjung membuka halaman mana pun
• Observable result: tidak ada teks Bahasa Inggris yang terlihat, kecuali istilah teknis umum seperti "WhatsApp", "Android", "iPhone", dan "LCD"
• Access state: publik, tanpa akun
• Failure/recovery: tidak berlaku; ini adalah batasan konten
• Continuation: pengunjung dapat menyelesaikan seluruh tugasnya dalam Bahasa Indonesia

FR-16 — Navigasi utama As a pengunjung, I should berpindah antara HOME PAGE, Produk, Layanan Service, dan Hubungi Kami melalui navigasi utama, so that saya dapat menjelajahi situs dengan mudah di perangkat apa pun.

• Provenance: required_inference
• Actor: Calon Pembeli HP, Penjual HP Bekas, Pelanggan Service HP
• Trigger/input: pengunjung memilih item navigasi
• Observable result: halaman tujuan terbuka; item aktif ditandai
• Access state: publik, tanpa akun
• Failure/recovery: jika navigasi gagal, tautan footer menyediakan jalur alternatif
• Continuation: pengunjung melanjutkan tugasnya di halaman tujuan

4. User Personas

Calon Pembeli HP

• Konteks produk: Pengunjung yang sedang mencari smartphone baru atau bekas dan mempertimbangkan Acong Cell sebagai tempat pembelian. Ia biasanya membandingkan harga dan kondisi perangkat sebelum memutuskan.
• Tujuan utama: Menemukan HP yang sesuai kebutuhan dan anggaran, lalu menghubungi Acong Cell untuk menyelesaikan pembelian.
• Tanggung jawab yang diterima: Membuka halaman Produk, menilai informasi produk (nama, kondisi, harga), menyaring daftar sesuai preferensi, dan menghubungi Acong Cell mengenai produk tertentu.
• Input/keputusan: Pilihan kondisi (Baru/Bekas), pilihan merek, dan keputusan produk mana yang akan ditanyakan.
• Interaksi dengan peserta lain: Berkomunikasi dengan Acong Cell melalui WhatsApp untuk menanyakan ketersediaan, kelengkapan, dan kelanjutan pembelian.
• Keberhasilan yang terlihat: Ia menemukan HP yang sesuai dan berhasil membuka percakapan dengan Acong Cell mengenai produk tersebut.

Penjual HP Bekas

• Konteks produk: Pemilik HP yang ingin menjual atau menukar perangkatnya ke Acong Cell. Ia perlu memahami bahwa Acong Cell menerima HP bekas dan bagaimana cara memulai proses penawaran.
• Tujuan utama: Mendapat penawaran atas perangkatnya dan menyelesaikan penjualan atau penukaran.
• Tanggung jawab yang diterima: Membaca informasi jual beli HP bekas, memilih keperluan "Jual HP", dan menghubungi Acong Cell untuk penawaran.
• Input/keputusan: Informasi perangkat yang akan dijual dan keputusan menerima atau menolak penawaran Acong Cell.
• Interaksi dengan peserta lain: Berkomunikasi dengan Acong Cell melalui WhatsApp atau datang ke toko pada jam operasional untuk pemeriksaan perangkat.
• Keberhasilan yang terlihat: Ia berhasil menghubungi Acong Cell dan menyelesaikan penjualan perangkatnya.

Pelanggan Service HP

• Konteks produk: Pemilik HP rusak yang membutuhkan perbaikan, misalnya layar pecah, baterai cepat habis, charging port tidak berfungsi, atau masalah software. Ia ingin tahu apakah kerusakannya dapat ditangani dan berapa perkiraan biayanya.
• Tujuan utama: Mendapat perbaikan yang profesional dan bergaransi atas perangkatnya.
• Tanggung jawab yang diterima: Membaca penjelasan layanan service, memilih kategori layanan untuk melihat estimasi biaya, dan menghubungi Acong Cell untuk menjadwalkan atau menanyakan perbaikan.
• Input/keputusan: Pilihan kategori layanan (Ganti LCD, Ganti Baterai, Charging Port, Software) dan keputusan menyetujui biaya setelah pengecekan.
• Interaksi dengan peserta lain: Berkomunikasi dengan Acong Cell melalui WhatsApp atau datang ke toko untuk menyerahkan perangkat dan mengambilnya kembali setelah selesai.
• Keberhasilan yang terlihat: Perangkatnya diperbaiki dan ia menerima layanan bergaransi.

5. Core User Flows

Alur 1 — Calon Pembeli HP menemukan dan menanyakan produk

1. Calon Pembeli HP membuka HOME PAGE dan melihat hero ACONG CELL dengan headline "Jual Beli & Service HP Terpercaya", subheadline, dan visual smartphone.
2. Ia menekan tombol "Lihat Produk" pada hero.
3. Halaman Produk terbuka dan menampilkan grid HP baru dan bekas dengan foto, nama, chip kondisi, dan tag harga Rupiah.
4. Ia memilih chip kondisi "Bekas" dan satu merek untuk menyaring daftar; grid diperbarui dan jumlah hasil terlihat.
5. Jika tidak ada produk yang cocok, ia melihat pesan "Belum ada produk untuk pilihan ini." dan menekan "Reset Filter" untuk melihat seluruh daftar.
6. Ia menemukan HP yang sesuai dan menekan tombol "Tanya via WhatsApp" pada kartu produk tersebut.
7. Percakapan WhatsApp terbuka dengan pesan awal yang menyebut nama produk; Acong Cell membalas untuk menanyakan ketersediaan dan kelanjutan pembelian.
8. Jika WhatsApp tidak dapat dibuka, ia melihat nomor telepon dan alamat toko sebagai alternatif, lalu menghubungi Acong Cell melalui jalur tersebut.
9. Alur selesai ketika ia berhasil menghubungi Acong Cell mengenai produk yang diminati; transaksi dilanjutkan di luar situs.

Alur 2 — Penjual HP Bekas meminta penawaran

1. Penjual HP Bekas membuka halaman Produk dan membaca panel jual HP bekas, atau langsung membuka halaman Hubungi Kami.
2. Di halaman Hubungi Kami, ia memilih chip keperluan "Jual HP".
3. Pesan awal WhatsApp menyesuaikan keperluan tersebut; ia menekan tombol kontak WhatsApp.
4. Percakapan terbuka dan Acong Cell menerima maksud penjualan perangkat.
5. Jika WhatsApp tidak dapat dibuka, ia melihat alamat dan jam operasional toko dan memutuskan datang langsung.
6. Acong Cell memeriksa perangkat dan memberikan penawaran; Penjual HP Bekas memutuskan menerima atau menolak.
7. Alur selesai ketika penjualan perangkatnya diselesaikan dengan Acong Cell.

Alur 3 — Pelanggan Service HP memahami layanan dan meminta perbaikan

1. Pelanggan Service HP membuka HOME PAGE dan menekan tombol "Service HP" pada hero.
2. Halaman Layanan Service terbuka dan menampilkan dinding panel layanan: Ganti LCD/Screen, Ganti Baterai, Ganti Charging Port, Troubleshooting Software, serta Perbaikan Hardware dan Software Umum, masing-masing dengan pictogram dan deskripsi Bahasa Indonesia.
3. Ia membaca panel garansi dengan stempel "GARANSI 30 HARI" dan penjelasan cakupan garansi.
4. Ia memilih chip kategori layanan pada strip "Cek Estimasi Biaya Service"; kartu estimasi terisi rincian dan total perkiraan, disertai catatan bahwa biaya akhir ditentukan setelah pengecekan perangkat.
5. Jika estimasi tidak dapat dihitung, ia melihat pesan "Estimasi tidak tersedia saat ini. Silakan hubungi kami untuk biaya pasti." dan menekan tombol "Hubungi Kami".
6. Ia menekan tombol kontak untuk service; percakapan WhatsApp terbuka dengan pesan awal berisi jenis layanan yang dipilih.
7. Acong Cell mengonfirmasi pengecekan, biaya, dan waktu pengerjaan; Pelanggan Service HP menyetujui biaya setelah pengecekan.
8. Jika WhatsApp tidak dapat dibuka, ia melihat nomor telepon dan alamat toko sebagai alternatif.
9. Alur selesai ketika perangkatnya diperbaiki dan ia menerima layanan bergaransi.

Alur 4 — Pengunjung menghubungi Acong Cell dari navigasi

1. Pengunjung memilih "Hubungi Kami" pada navigasi utama atau menekan tombol "Hubungi Kami" pada hero.
2. Halaman Hubungi Kami terbuka dan menampilkan kanal kontak WhatsApp, alamat toko, dan jam operasional.
3. Ia memilih chip keperluan yang sesuai — "Beli HP", "Jual HP", atau "Service HP".
4. Pesan awal WhatsApp menyesuaikan keperluan; ia menekan tombol kontak WhatsApp.
5. Jika WhatsApp tidak dapat dibuka, ia menyalin alamat atau mencatat jam operasional untuk datang langsung.
6. Acong Cell membalas dan percakapan berlanjut di luar situs.
7. Alur selesai ketika pengunjung berhasil menghubungi Acong Cell.

6. Visuals Colors and Theme

Arah kreatif proyek ini adalah Warm mid-century modernism untuk toko HP lingkungan yang terpercaya, dengan muse Charles & Ray Eames. Bahasa desainnya adalah warm modernism — material jujur, panel modular, warna yang gembira di dalam keteraturan, dan craft yang dapat dipercaya. Ini memetakan tepat pada toko HP yang menjual, membeli, dan memperbaiki: panel galeri modular menjadi tile produk dan layanan, palet harmoni mid-century memberi identitas yang mudah diingat, dan kehangatan film-like mengubah "service HP" dari pengalaman menakutkan menjadi transaksi yang ramah dan manusiawi.

Palet (light mode)

Proporsi kira-kira 70% krem, 20% teal, 7% ink, 3% tomat — aksen harus terasa earned.

Tipografi

• Headings: Jost — Jost 500–600 untuk headline; geometris, keturunan Futura, optimistis mid-century. Ukuran sangat besar clamp(40px, 8vw, 104px) dengan leading rapat 0.95 dan tracking sedikit negatif -0.02em. Headline memakai sentence case Bahasa Indonesia, tidak pernah all-caps, sehingga "Jual Beli & Service HP Terpercaya" terbaca sebagai janji hangat, bukan teriakan.
• Eyebrow labels ('LAYANAN', 'PRODUK', 'KEUNGGULAN'): Jost 600, 12px, letter-spacing 0.18em, uppercase, warna teal.
• Body: Fraunces — soft serif yang membawa seluruh body copy dan intro editorial pendek untuk memberi kehangatan dan suara manusia.
• Skala: modular 1.333 — Display 104/72/48/32/22/17/15. Body copy 17px/1.7; deskripsi layanan 15px/1.6; label 12px. Mobile display floor 40px, desktop ceiling 104px via clamp().

Shape language

Geometri mid-century organik-modern: kartu persegi lembut dengan radius 14px, tombol kapsul/pill dengan radius 999px, dan motif "panel" yang berulang — blok warna solid dengan garis teal atau ink 2px pada satu tepi, menggemakan panel pameran modular Eames. Batas section melengkung lembut (arc radius 60px) alih-alih potongan lurus. Badge bundar berstempel (misalnya 'GARANSI 30 HARI') dengan nuansa hand-set. Tanpa glass, tanpa blur, tanpa neon glow.

Layout

Urutan galeri panel modular pada grid 12 kolom dengan ritme section 96px dan gutter 24px. Hero asimetris: panel teks menempati kolom 1–7, panel still-life foto smartphone hangat menempati kolom 8–12 dan meluber keluar tepi kanan viewport. Layanan menjadi dinding panel modular 3-across (2-across pada 768px, 1-across pada 375px) di mana setiap panel memiliki header band mustard/sage/teal, ikon, dan deskripsi singkat Bahasa Indonesia. Grid produk memakai tile 4-up dengan tag harga tomat yang terlihat. Blok 'keunggulan' adalah satu band horizontal berisi empat panel bernomor yang dipisahkan garis rambut tipis, bukan empat kartu mengambang.

7. Signature Design Concept

Konsep visual untuk halaman masuk publik (HOME PAGE) adalah "Dinding Pameran Acong Cell" — hero yang dibangun seperti panel pameran Eames: satu headline Jost raksasa yang membentang viewport dengan satu kata berwarna, ditemani panel foto hangat yang meluber keluar tepi kanan.

Elemen yang dapat diimplementasikan:

• Ground krem penuh #F4EDE1 tanpa gradien, sebagai panggung seluruh hero.
• Eyebrow teal 'TOKO HP & SERVICE — SEJAK 2015' dalam Jost 600, 12px, letter-spacing 0.18em, uppercase.
• Headline 'Jual Beli & Service HP Terpercaya' dalam Jost 600 pada clamp(40px, 8vw, 104px), dipecah menjadi tiga baris, dengan kata 'Terpercaya' diset dalam tomat #D9542B sebagai satu-satunya kata berwarna — janji brand secara literal adalah kata berwarna itu.
• Subheadline dua baris dalam Fraunces 17px yang menjelaskan penjualan, pembelian, dan layanan perbaikan smartphone.
• Tiga tombol dalam satu baris: 'Lihat Produk' (teal solid), 'Service HP' (outline ink), 'Hubungi Kami' (tomat solid dengan glyph WhatsApp).
• Garis rambut dan empat label keunggulan sebaris — 'Harga Terjangkau', 'Pengerjaan Profesional', 'Bergaransi', 'Pelayanan Terpercaya' — dipisahkan titik.
• Panel foto kolom 8–12: foto hangat proses perbaikan HP yang meluber keluar tepi kanan viewport, dengan stempel bundar tomat 'GARANSI' menumpuk di sudutnya.
• Pada mobile: panel foto turun ke bawah teks dengan lebar penuh, stempel tetap menumpuk di sudut kanan atas.

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: restrained Hero Dimensionality: layered_2d

Landing Hero Motion Brief

• Focal subject: panel foto hangat proses perbaikan HP di kolom 8–12 yang meluber keluar tepi kanan viewport, dengan stempel bundar tomat 'GARANSI' menumpuk di sudutnya.
• Input → transformation → outcome: saat halaman dimuat, panel teks hero dan panel foto naik 16px dan fade-in selama 500ms dengan ease-out lembut, bertahap 80ms antar elemen; hasilnya adalah hero yang tersusun tenang dan langsung terbaca, dengan kata 'Terpercaya' dalam tomat sebagai titik fokus warna.
• Motion vocabulary: gerakan film-like dan hangat, tidak pernah bouncy. Panel naik 16px dan fade-in 500ms ease-out, stagger 80ms per baris. Hover pada tile produk mengangkatnya 4px dan menukar foto dengan sudut kedua melalui crossfade 300ms. Tombol memiliki transisi warna-fill 150ms (tomat mengisi dari kiri). Satu marquee lambat 'JUAL • BELI • SERVICE • BERGARANSI' dalam Jost caps berjalan di satu pembatas section, berhenti saat hover, dan berubah menjadi baris statis saat prefers-reduced-motion. Tanpa parallax, tanpa 3D, tanpa partikel.
• Composed first frame: ground krem penuh; eyebrow teal kecil di kiri atas; headline Jost besar tiga baris dengan 'Terpercaya' dalam tomat; subheadline Fraunces dua baris; tiga tombol sejajar; garis rambut dan empat label keunggulan; panel foto hangat di kanan yang meluber keluar tepi dengan stempel 'GARANSI' menumpuk di sudutnya.
• Reduced-motion state: seluruh animasi masuk dinonaktifkan dan elemen tampil pada posisi akhirnya; marquee berhenti dan membungkus menjadi baris statis yang menampilkan seluruh item secara utuh; hover lift dan crossfade dinonaktifkan tanpa menghilangkan informasi produk.

9. Non-Functional Requirements

• NFR-01 — Bahasa Indonesia wajib. Seluruh teks yang terlihat oleh pengunjung wajib dalam Bahasa Indonesia; dilarang menampilkan teks Bahasa Inggris kepada pengunjung, kecuali istilah teknis umum seperti "WhatsApp", "Android", "iPhone", dan "LCD". (Provenance: explicit. Rationale: batasan keras pada sumber otoritatif.)
• NFR-02 — Modern, profesional, responsif. Website harus modern, profesional, dan responsif pada 375px, 768px, dan 1280px. (Provenance: explicit.)
• NFR-03 — Identitas visual premium namun ramah. Identitas visual harus premium namun ramah, cocok untuk toko HP modern Indonesia. (Provenance: explicit.)
• NFR-04 — Keterbacaan teks dan kontrol. Headline, wordmark, label, angka, teks kartu, dan kontrol harus tetap utuh di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px, membungkus atau menskalakan (misalnya font-size: clamp(...) dengan ukuran mobile-nya) agar muat; tidak ada elemen lain yang menutupi bagian mana pun darinya. (Provenance: explicit pada arah kreatif.)
• NFR-05 — Aksesibilitas gerakan. Animasi masuk, marquee, dan hover lift harus dinonaktifkan atau diubah menjadi state statis di bawah prefers-reduced-motion, dengan seluruh item tetap terbaca utuh. (Provenance: explicit pada arah kreatif.)
• NFR-06 — Tanpa akun dan tanpa data transaksi. Situs bersifat publik tanpa akun pengguna dan tidak menyimpan data transaksi atau data pribadi pengunjung. (Provenance: required_inference. Rationale: tidak ada state pengguna yang harus dilanjutkan atau diikatkan pada peserta tertentu; transaksi diselesaikan melalui kontak langsung.)
• NFR-07 — Kinerja pemuatan. Halaman publik harus memuat konten utamanya dengan cepat pada koneksi seluler Indonesia; gambar produk dan hero dioptimalkan dan memiliki fallback blok warna dengan pictogram bila gagal dimuat. (Provenance: required_inference. Rationale: audiens adalah pengunjung seluler sehari-hari.)
• NFR-08 — Ketahanan kanal kontak. Bila WhatsApp tidak dapat dibuka, nomor telepon dan alamat toko harus tetap tersedia sebagai jalur alternatif pada halaman yang relevan. (Provenance: required_inference. Rationale: kontak adalah satu-satunya jalur penyelesaian transaksi.)

10. Tech Stack

• Frontend: React (web) dengan routing halaman untuk HOME PAGE, Produk, Layanan Service, dan Hubungi Kami. [Default — not specified by user]
• Styling: CSS dengan custom properties untuk token palet dan tipografi; font Jost dan Fraunces dimuat sebagai webfont. [Default — not specified by user]
• Backend: Python/FastAPI untuk menyajikan data produk dan konten layanan. [Default — not specified by user]
• Storage: basis data relasional sederhana untuk data produk HP (nama, merek, kondisi, harga, foto). [Default — not specified by user]
• Kontak: tautan keluar ke WhatsApp dengan pesan awal yang dibentuk di sisi klien; tidak ada integrasi API pesan. [Default — not specified by user]
• Deployment: Docker/docker-compose untuk menjalankan frontend dan backend. Kubernetes tidak diperlukan untuk skala situs ini. [Default — not specified by user]

11. Assumptions and Constraints

• A-01: Seluruh halaman bersifat publik dan dapat diakses tanpa akun; tidak ada identitas milik aplikasi yang diperlukan. (Konsisten dengan NFR-06 dan kontrak akses none pada keempat halaman.)
• A-02: Data produk HP (nama, merek, kondisi, harga, foto) disediakan oleh Acong Cell dan diperbarui secara berkala; situs menampilkan data yang tersedia saat itu.
• A-03: Estimasi biaya service bersifat perkiraan dan bukan penawaran mengikat; biaya akhir ditentukan setelah pengecekan perangkat oleh Acong Cell. (Konsisten dengan FR-11.)
• A-04: Garansi pengerjaan service ditampilkan sebagai "GARANSI 30 HARI"; cakupan rinci garansi dijelaskan langsung oleh Acong Cell. (Konsisten dengan FR-13.)
• A-05: Penyelesaian transaksi jual beli dan service terjadi di luar situs, melalui WhatsApp atau kunjungan ke toko; situs tidak memproses pembayaran.
• A-06: Jam operasional dan alamat toko disediakan oleh Acong Cell dan ditampilkan pada halaman Hubungi Kami.
• A-07: Tidak ada keranjang belanja, checkout, akun pengguna, atau pelacakan status perbaikan daring dalam lingkup saat ini.

12. Glossary

• Acong Cell: Nama brand toko HP lokal yang menjadi subjek situs ini; ditampilkan sebagai "ACONG CELL".
• HP: Singkatan umum Bahasa Indonesia untuk handphone/smartphone.
• Jual Beli: Layanan pembelian dan penjualan smartphone baru maupun bekas oleh Acong Cell.
• Service HP: Layanan perbaikan smartphone, mencakup perbaikan hardware dan software.
• Ganti LCD/Screen: Layanan penggantian layar smartphone yang rusak atau pecah.
• Ganti Baterai: Layanan penggantian baterai smartphone.
• Ganti Charging Port: Layanan penggantian port pengisian daya smartphone.
• Troubleshooting Software: Layanan penanganan masalah perangkat lunak smartphone.
• Bergaransi: Jaminan atas pengerjaan service; ditampilkan sebagai "GARANSI 30 HARI".
• Estimasi Biaya Service: Perkiraan biaya perbaikan berdasarkan kategori layanan yang dipilih pengunjung; bukan penawaran mengikat.
• WhatsApp: Layanan pesan pihak ketiga yang menjadi kanal kontak keluar Acong Cell.
• Keunggulan: Empat nilai utama Acong Cell — "Harga Terjangkau", "Pengerjaan Profesional", "Bergaransi", "Pelayanan Terpercaya".