System Requirements Document for rumah

1. Introduction

rumah adalah website profesional untuk perusahaan jasa Bangun Rumah Baru dan Renovasi Rumah di Indonesia (Jakarta, Surabaya, Bandung, Bekasi), dengan desain modern, premium, terpercaya, dan berorientasi pada konversi pelanggan (lead generation). Kualitas pengalaman pengguna harus setara perusahaan konstruksi dan interior premium, terinspirasi dari Dekoruma, namun memiliki identitas sendiri yang lebih fokus pada jasa pembangunan dan renovasi rumah, dan terasa lebih premium daripada Dekoruma — cocok untuk perusahaan kontraktor kelas menengah hingga premium.

Tujuan utama produk: mendapatkan calon pelanggan sebanyak mungkin melalui formulir estimasi biaya dan konsultasi gratis. Mekanik inti produk adalah kalkulator estimasi biaya yang mengubah ketidakpastian yang menakutkan menjadi sebuah angka dalam sepuluh detik, terlihat langsung pada hero tanpa perlu scroll.

Audiens: pemilik rumah dan keluarga kelas menengah hingga premium yang berencana membangun rumah baru atau merenovasi rumah, serta tim internal perusahaan kontraktor yang menerima dan menindaklanjuti lead.

2. System Overview

Website ini adalah aplikasi web publik berbasis HTML5, CSS3, dan JavaScript di sisi frontend, dengan backend PHP 8+ dan MySQL, serta pengiriman email melalui SMTP. Pengunjung dapat menghitung estimasi biaya proyek secara anonim langsung dari hero Beranda, lalu mengirimkan data sebagai lead; sistem menyimpan lead ke database, mengirim email otomatis ke perusahaan, mengirim email konfirmasi ke calon pelanggan, dan menampilkan Halaman Terima Kasih.

Aktor manusia aktif (katalog tertutup):

• Calon Pelanggan (Prospective Client) — pengunjung yang berencana membangun atau merenovasi rumah dan ingin mengetahui perkiraan biaya sebelum menghubungi kontraktor.
• Tim Perusahaan Kontraktor (Penerima Lead) — pihak internal perusahaan yang menerima lead dan menindaklanjuti calon pelanggan untuk konsultasi gratis serta survey lokasi.

Aktor non-persona: layanan SMTP (pengirim email keluar), Google Analytics (pengukuran), Google Maps (peta lokasi di footer), WhatsApp (kanal kontak keluar), dan backend PHP/MySQL (proses sistem).

Perilaku yang diterima: kalkulator estimasi biaya dengan tarif per m² per jenis proyek dan kualitas, penyimpanan lead, dua email otomatis, halaman terima kasih, trust section dengan counter animation, katalog layanan, portofolio before/after dengan filter kategori, proses kerja 8 tahap, slider testimoni, accordion FAQ, CTA akhir, footer lengkap, serta fitur responsive design, SEO friendly, Google Analytics ready, schema markup, lazy load images, form validation, WhatsApp floating button, dan fast loading.

Pengecualian sempit: tidak ada akun pengguna, login, dashboard admin, atau panel manajemen konten yang diminta; tidak ada pembayaran online; tidak ada penjadwalan otomatis survey; tidak ada fitur di luar daftar layanan, halaman, dan fitur yang disebutkan secara eksplisit.

2a. Product Interpretation and Delivery Boundary

Seluruh halaman produk dimiliki dan dioperasikan oleh aplikasi first-party rumah dan dapat diakses secara publik tanpa akun. Kalkulator estimasi biaya harus tersedia secara anonim pada Beranda sebelum pengguna mengirim lead — tidak ada gerbang identitas sebelum estimasi. Identitas pengguna tidak diperlukan untuk menggunakan kalkulator; data kontak (nama, WhatsApp, email, kota) dikumpulkan sebagai bagian dari formulir lead, bukan sebagai akun.

Backend PHP 8+ dan MySQL menyimpan data lead secara durable. SMTP mengirimkan email ke perusahaan dan email konfirmasi ke calon pelanggan. Halaman Terima Kasih adalah konfirmasi setelah lead tersimpan dan email estimasi diproses. Google Analytics, schema markup, dan Google Maps adalah integrasi eksternal yang dimiliki oleh penyedianya masing-masing; website hanya menyediakan titik integrasi (Google Analytics Ready, schema markup, embed peta).

Semua konten saat ini bersifat current. Tidak ada horizon masa depan yang dinyatakan dalam sumber.

2b. Source Content Inventory

Tidak ada reference directive dengan uses: content_source; bagian ini tidak berlaku.

2c. Page Content and Component Coverage

Beranda

• Informasi/state: hero split-screen dengan eyebrow "KONTRAKTOR BANGUN & RENOVASI", headline "Wujudkan Rumah Impian Anda Bersama Kontraktor Profesional", subheadline "Jasa Bangun Rumah Baru dan Renovasi Rumah dengan Harga Transparan, Kualitas Terjamin, dan Garansi Pekerjaan.", dua tombol utama, kartu kalkulator estimasi biaya, trust strip, trust section statistik, layanan kami, portofolio ringkas, proses kerja, testimoni, FAQ, CTA akhir, footer.
• Aksi utama: memilih jenis proyek (Bangun Rumah Baru / Renovasi Rumah) dari tombol hero atau toggle kalkulator; mengisi field kalkulator; menekan "Dapatkan Estimasi Harga"; melihat hasil estimasi instan; mengirim lead; menavigasi ke halaman lain.
• Aksi pendukung: membuka accordion FAQ, menggeser slider testimoni, memfilter portofolio, membuka WhatsApp floating button, mengklik CTA "Konsultasi Gratis".
• Entitas domain: Lead (nama, WhatsApp, email, kota, jenis proyek, luas, kualitas, estimasi biaya), Tarif estimasi (jenis proyek × kualitas), Statistik trust, Layanan, Proyek portofolio, Testimoni, FAQ.
• Komponen:
  • Sticky Header — logo, menu (Beranda, Bangun Rumah, Renovasi Rumah, Portofolio, Layanan, Testimoni, Artikel, Tentang Kami, Kontak), tombol CTA "Konsultasi Gratis".
  • Hero split-screen — kolom kiri: eyebrow, headline Archivo 800, subheadline, dua tombol "Bangun Rumah Baru" (solid navy) dan "Renovasi Rumah" (outline navy), trust strip "500+ Proyek · 10+ Tahun · Garansi Pekerjaan"; kolom kanan: panel navy dengan kartu glassmorphism kalkulator.
  • Kartu Kalkulator Estimasi Biaya — judul "Hitung Estimasi Biaya Proyek Anda" dengan marker mono "01"; field Nama Lengkap, Nomor WhatsApp, Email, Kota / Lokasi Proyek; toggle dua segmen jenis proyek (Bangun Rumah Baru / Renovasi Rumah) dengan segmen aktif amber; field luas yang berubah label antara "Luas Bangunan (m²)" dan "Luas Area Renovasi (m²)"; pilihan kualitas Standard / Premium / Luxury; tombol CTA full-width amber "Dapatkan Estimasi Harga".
  • Panel Hasil Estimasi — panel navy sharp-cornered dengan 1px amber top rule; total dalam JetBrains Mono 40px yang count-up; baris label/value (Jenis Proyek / Luas / Kualitas / Tarif per m²) dengan 2px navy left-rule; disclaimer 12px.
  • Trust Section — empat statistik dengan counter animation: 500+ Proyek Selesai, 10+ Tahun Pengalaman, 100+ Tukang Profesional, 100% Garansi Pekerjaan.
  • Layanan Kami — grid 4×2 card: Bangun Rumah Baru, Renovasi Rumah, Renovasi Dapur, Renovasi Kamar Mandi, Interior Rumah, Desain Arsitektur, Pembangunan Ruko, Pembangunan Kantor.
  • Portofolio ringkas — pasangan before/after dengan divider amber draggable dan metadata monospace.
  • Proses Kerja — rail 8 langkah bernomor pada band navy: Konsultasi, Survey Lokasi, Penawaran Harga, Desain, Persetujuan, Pengerjaan, Quality Control, Serah Terima.
  • Testimoni — slider dengan foto klien, nama, lokasi, rating bintang, ulasan.
  • FAQ — accordion modern.
  • CTA Akhir — headline "Siap Mewujudkan Rumah Impian Anda?" dengan tombol "Konsultasi Gratis" dan "Hitung Estimasi Biaya".
  • Footer — logo, alamat, email, WhatsApp, social media, Google Maps, menu navigasi.
  • WhatsApp Floating Button — tombol bulat 999px radius.
• State: loading (kalkulator menghitung), empty (field belum diisi), success (hasil estimasi tampil + lead terkirim), error (validasi gagal, pengiriman gagal), recovery (pesan error + retry).

Bangun Rumah

• Informasi/state: destinasi layanan pembangunan rumah baru; konten layanan, keunggulan, CTA konsultasi dan estimasi.
• Aksi utama: membaca informasi layanan; menavigasi ke kalkulator (Beranda) atau Kontak; mengklik "Konsultasi Gratis".
• Aksi pendukung: melihat portofolio terkait, membuka WhatsApp.
• Entitas domain: Layanan Bangun Rumah Baru, Proyek portofolio terkait.
• Komponen: hero layanan, deskripsi layanan, keunggulan, CTA, footer.
• State: loading, empty (jika konten belum tersedia), success, error.

Renovasi Rumah

• Informasi/state: destinasi layanan renovasi rumah; konten layanan renovasi, keunggulan, CTA konsultasi dan estimasi.
• Aksi utama: membaca informasi layanan; menavigasi ke kalkulator (Beranda) atau Kontak; mengklik "Konsultasi Gratis".
• Aksi pendukung: melihat portofolio terkait, membuka WhatsApp.
• Entitas domain: Layanan Renovasi Rumah, Proyek portofolio terkait.
• Komponen: hero layanan, deskripsi layanan, keunggulan, CTA, footer.
• State: loading, empty, success, error.

Portofolio

• Informasi/state: daftar proyek yang pernah dikerjakan; setiap proyek menampilkan Foto Before, Foto After, Luas Bangunan, Lokasi, Durasi Proyek, Nilai Proyek; filter kategori.
• Aksi utama: memfilter berdasarkan kategori; melihat pasangan before/after dengan divider draggable; membaca metadata proyek.
• Aksi pendukung: menavigasi ke layanan terkait, membuka WhatsApp.
• Entitas domain: Proyek (foto before, foto after, luas bangunan, lokasi, durasi, nilai proyek, kategori).
• Komponen: filter kategori, grid proyek, komponen before/after draggable, tabel metadata monospace, footer.
• State: loading, empty (tidak ada proyek pada filter), success, error.

Layanan

• Informasi/state: katalog layanan: Bangun Rumah Baru, Renovasi Rumah, Renovasi Dapur, Renovasi Kamar Mandi, Interior Rumah, Desain Arsitektur, Pembangunan Ruko, Pembangunan Kantor.
• Aksi utama: membaca card layanan; menavigasi ke halaman layanan terkait; mengklik CTA konsultasi.
• Aksi pendukung: membuka WhatsApp.
• Entitas domain: Layanan (nama, deskripsi, spesifikasi teknis).
• Komponen: grid 4×2 card layanan dengan spec line yang muncul saat hover, CTA, footer.
• State: loading, empty, success, error.

Testimoni

• Informasi/state: slider testimoni profesional dengan Foto Klien, Nama, Lokasi, Rating Bintang, Ulasan.
• Aksi utama: menggeser slider; membaca testimoni.
• Aksi pendukung: menavigasi ke portofolio, membuka WhatsApp.
• Entitas domain: Testimoni (foto klien, nama, lokasi, rating, ulasan).
• Komponen: slider dua kolom quote/photo, rating bintang, footer.
• State: loading, empty, success, error.

Artikel

• Informasi/state: destinasi artikel untuk konten informasional dan dukungan SEO perusahaan.
• Aksi utama: membaca daftar artikel; membuka artikel.
• Aksi pendukung: menavigasi ke layanan, membuka WhatsApp.
• Entitas domain: Artikel (judul, konten, tanggal).
• Komponen: daftar artikel, footer.
• State: loading, empty, success, error.

Tentang Kami

• Informasi/state: informasi perusahaan, pengalaman, kredibilitas, dan statistik kepercayaan (500+ Proyek Selesai, 10+ Tahun Pengalaman, 100+ Tukang Profesional, 100% Garansi Pekerjaan).
• Aksi utama: membaca profil perusahaan; mengklik CTA konsultasi.
• Aksi pendukung: membuka WhatsApp.
• Entitas domain: Profil perusahaan, Statistik trust.
• Komponen: hero profil, statistik dengan counter animation, CTA, footer.
• State: loading, empty, success, error.

Kontak

• Informasi/state: halaman kontak dan tujuan konsultasi gratis dari CTA utama; alamat, email, WhatsApp, social media, Google Maps.
• Aksi utama: menghubungi perusahaan melalui WhatsApp, email, atau formulir kontak; melihat peta lokasi.
• Aksi pendukung: menavigasi ke kalkulator (Beranda).
• Entitas domain: Kontak perusahaan, Lokasi (Google Maps).
• Komponen: informasi kontak, embed Google Maps, tombol WhatsApp, CTA konsultasi, footer.
• State: loading, empty, success, error.

Halaman Terima Kasih

• Informasi/state: konfirmasi setelah lead tersimpan dan email estimasi diproses; pesan terima kasih dan pernyataan bahwa perusahaan akan segera menghubungi untuk konsultasi gratis dan survey lokasi.
• Aksi utama: membaca konfirmasi; menavigasi kembali ke Beranda atau halaman lain.
• Aksi pendukung: membuka WhatsApp.
• Entitas domain: Lead (status terkirim).
• Komponen: pesan konfirmasi, ringkasan estimasi, CTA kembali, footer.
• State: success (lead tersimpan dan email diproses), error (jika pengiriman gagal, tampilkan pesan dan opsi retry).

3. Functional Requirements

FR-01 — Website profesional perusahaan jasa bangun dan renovasi rumah (explicit) As a Calon Pelanggan, I should melihat website profesional perusahaan jasa Bangun Rumah Baru dan Renovasi Rumah dengan desain modern, premium, terpercaya, dan berorientasi konversi, sehingga saya dapat menilai kredibilitas perusahaan.

• Trigger: membuka website.
• Observable result: halaman Beranda tampil dengan hero split-screen, kalkulator, trust section, layanan, portofolio, proses kerja, testimoni, FAQ, CTA akhir, dan footer.
• Access: publik, tanpa akun.
• Failure/recovery: jika konten gagal dimuat, tampilkan state error dengan opsi muat ulang.
• Continuation: navigasi ke halaman lain melalui sticky header.

FR-02 — Lead generation melalui formulir estimasi biaya dan konsultasi gratis (explicit) As a Calon Pelanggan, I should mengirimkan data saya melalui formulir estimasi biaya dan konsultasi gratis, sehingga perusahaan dapat menghubungi saya.

• Trigger: menekan "Dapatkan Estimasi Harga" atau CTA "Konsultasi Gratis".
• Observable result: lead tersimpan, email terkirim, Halaman Terima Kasih tampil.
• Access: publik, tanpa akun.
• Failure/recovery: jika validasi gagal, tampilkan pesan error per field; jika pengiriman gagal, tampilkan pesan error dan opsi retry.
• Continuation: diarahkan ke Halaman Terima Kasih.

FR-03 — Konsep desain modern, premium, minimalis, clean layout, responsive mobile first, fast loading, SEO friendly (explicit) As a Calon Pelanggan, I should mengalami desain modern, premium, minimalis, clean layout, responsive mobile first, fast loading, dan SEO friendly, sehingga saya dapat menggunakan website dengan nyaman di perangkat apa pun.

• Trigger: membuka website di berbagai viewport.
• Observable result: layout menyesuaikan pada 375px, 768px, dan 1280px; halaman memuat cepat; struktur SEO terbaca.
• Access: publik.
• Failure/recovery: jika aset gagal dimuat, tampilkan fallback.
• Continuation: tetap dapat menavigasi.

FR-04 — Palet warna putih, abu-abu muda, biru profesional, oranye/emas untuk CTA (explicit) As a Calon Pelanggan, I should melihat palet warna putih sebagai warna utama, abu-abu muda untuk background section, biru profesional untuk elemen utama, dan oranye atau emas untuk tombol CTA, sehingga antarmuka terasa premium dan CTA menonjol.

• Trigger: membuka website.
• Observable result: warna diterapkan konsisten sesuai peran.
• Access: publik.
• Failure/recovery: tidak berlaku.
• Continuation: tidak berlaku.

FR-05 — Animasi halus, scroll effect modern, card design premium, rounded corner modern, shadow elegan, layout rapi (explicit) As a Calon Pelanggan, I should melihat animasi halus, scroll effect modern, card design premium, rounded corner modern, shadow elegan, dan layout rapi dan profesional, sehingga pengalaman terasa premium.

• Trigger: menggulir dan berinteraksi.
• Observable result: animasi dan efek scroll berjalan halus; card tampil premium.
• Access: publik.
• Failure/recovery: dengan prefers-reduced-motion, animasi berhenti dan konten tampil utuh.
• Continuation: tidak berlaku.

FR-06 — Sticky header dengan menu dan CTA "Konsultasi Gratis" (explicit) As a Calon Pelanggan, I should menggunakan sticky header dengan menu Beranda, Bangun Rumah, Renovasi Rumah, Portofolio, Layanan, Testimoni, Artikel, Tentang Kami, Kontak, serta tombol CTA "Konsultasi Gratis", sehingga saya dapat menavigasi dengan cepat.

• Trigger: menggulir halaman.
• Observable result: header tetap terlihat; menu dan CTA dapat diklik.
• Access: publik.
• Failure/recovery: jika menu gagal dimuat, tampilkan fallback navigasi.
• Continuation: navigasi ke halaman tujuan.

FR-07 — Hero section fokus konversi dengan background foto/video dan overlay gelap (explicit) As a Calon Pelanggan, I should melihat hero section dengan background foto atau video rumah modern premium dan overlay gelap agar teks mudah dibaca, headline "Wujudkan Rumah Impian Anda Bersama Kontraktor Profesional", dan subheadline "Jasa Bangun Rumah Baru dan Renovasi Rumah dengan Harga Transparan, Kualitas Terjamin, dan Garansi Pekerjaan.", sehingga saya memahami proposisi nilai.

• Trigger: membuka Beranda.
• Observable result: hero tampil dengan teks terbaca di atas overlay gelap.
• Access: publik.
• Failure/recovery: jika media gagal dimuat, tampilkan fallback warna/gambar.
• Continuation: membaca subheadline dan memilih tombol utama.

FR-08 — Dua tombol utama hero yang menyesuaikan kalkulator (explicit) As a Calon Pelanggan, I should menekan tombol "Bangun Rumah Baru" atau "Renovasi Rumah" di hero, sehingga kalkulator estimasi menyesuaikan jenis proyek yang dipilih.

• Trigger: menekan salah satu tombol utama.
• Observable result: toggle segmen kalkulator berubah; label field luas berubah antara "Luas Bangunan (m²)" dan "Luas Area Renovasi (m²)"; border card berdenyut amber 300ms.
• Access: publik.
• Failure/recovery: jika kalkulator gagal dimuat, tampilkan pesan error.
• Continuation: mengisi field kalkulator.

FR-09 — Layout hero split-screen dengan kalkulator glassmorphism terlihat tanpa scroll (explicit) As a Calon Pelanggan, I should melihat layout hero split-screen: kiri headline, deskripsi, dan 2 tombol utama; kanan kartu kalkulator estimasi biaya dengan efek glassmorphism modern, sehingga kalkulator langsung terlihat tanpa perlu scroll.

• Trigger: membuka Beranda pada 1280×800.
• Observable result: kalkulator sepenuhnya terlihat dalam viewport pertama.
• Access: publik.
• Failure/recovery: pada 375px, kedua bagian bertumpuk dengan kalkulator tetap di atas fold sebagai satu unit.
• Continuation: menggunakan kalkulator.

FR-10 — Kalkulator estimasi biaya pada hero dengan judul "Hitung Estimasi Biaya Proyek Anda" (explicit) As a Calon Pelanggan, I should melihat kalkulator estimasi biaya ditempatkan langsung pada Hero Section dalam bentuk card premium dengan judul "Hitung Estimasi Biaya Proyek Anda", sehingga saya dapat langsung menghitung estimasi.

• Trigger: membuka Beranda.
• Observable result: card kalkulator tampil dengan judul yang ditentukan.
• Access: publik.
• Failure/recovery: jika card gagal dimuat, tampilkan pesan error.
• Continuation: mengisi field.

FR-11 — Field kalkulator: Nama Lengkap, Nomor WhatsApp, Email, Kota / Lokasi Proyek (explicit) As a Calon Pelanggan, I should mengisi field Nama Lengkap, Nomor WhatsApp, Email, dan Kota / Lokasi Proyek, sehingga data saya tercatat untuk estimasi dan tindak lanjut.

• Trigger: mengisi field.
• Observable result: nilai tersimpan di form.
• Access: publik.
• Failure/recovery: validasi menampilkan pesan error jika field tidak valid.
• Continuation: memilih jenis proyek.

FR-12 — Pilihan jenis proyek: Bangun Rumah Baru atau Renovasi Rumah (explicit) As a Calon Pelanggan, I should memilih jenis proyek Bangun Rumah Baru atau Renovasi Rumah, sehingga kalkulator menghitung dengan tarif yang sesuai.

• Trigger: memilih toggle jenis proyek.
• Observable result: segmen aktif berubah; field luas menyesuaikan.
• Access: publik.
• Failure/recovery: jika tidak dipilih, tampilkan pesan validasi.
• Continuation: mengisi luas.

FR-13 — Input luas kondisional (explicit) As a Calon Pelanggan, I should mengisi Luas Bangunan (m²) jika memilih Bangun Rumah Baru, atau Luas Area Renovasi (m²) jika memilih Renovasi Rumah, sehingga estimasi dihitung berdasarkan luas yang benar.

• Trigger: memilih jenis proyek.
• Observable result: label field berubah sesuai jenis proyek.
• Access: publik.
• Failure/recovery: validasi menampilkan pesan error jika luas tidak valid.
• Continuation: memilih kualitas.

FR-14 — Pilihan kualitas: Standard, Premium, Luxury (explicit) As a Calon Pelanggan, I should memilih kualitas Standard, Premium, atau Luxury, sehingga tarif per m² yang sesuai diterapkan.

• Trigger: memilih kualitas.
• Observable result: pilihan kualitas tersimpan.
• Access: publik.
• Failure/recovery: jika tidak dipilih, tampilkan pesan validasi.
• Continuation: menekan "Dapatkan Estimasi Harga".

FR-15 — Tombol CTA kalkulator "Dapatkan Estimasi Harga" (explicit) As a Calon Pelanggan, I should menekan tombol "Dapatkan Estimasi Harga", sehingga estimasi ditampilkan dan lead diproses.

• Trigger: menekan tombol.
• Observable result: hasil estimasi tampil; lead diproses.
• Access: publik.
• Failure/recovery: jika validasi gagal, tampilkan pesan error; jika pengiriman gagal, tampilkan pesan error dan opsi retry.
• Continuation: melihat hasil estimasi.

FR-16 — Hasil estimasi instan (explicit) As a Calon Pelanggan, I should melihat hasil estimasi secara instan setelah tombol ditekan, sehingga saya mengetahui perkiraan biaya.

• Trigger: menekan "Dapatkan Estimasi Harga".
• Observable result: panel hasil estimasi tampil dengan total dan rincian.
• Access: publik.
• Failure/recovery: jika perhitungan gagal, tampilkan pesan error.
• Continuation: membaca disclaimer.

FR-17 — Tarif estimasi Bangun Rumah (explicit) As a Calon Pelanggan, I should melihat tarif Bangun Rumah Standard Rp 4.500.000/m², Premium Rp 6.000.000/m², Luxury Rp 8.000.000/m², sehingga estimasi sesuai kualitas yang dipilih.

• Trigger: memilih Bangun Rumah Baru dan kualitas.
• Observable result: tarif per m² ditampilkan pada baris label/value.
• Access: publik.
• Failure/recovery: tidak berlaku.
• Continuation: melihat total.

FR-18 — Tarif estimasi Renovasi (explicit) As a Calon Pelanggan, I should melihat tarif Renovasi Standard Rp 1.500.000/m², Premium Rp 3.000.000/m², Luxury Rp 5.000.000/m², sehingga estimasi sesuai kualitas yang dipilih.

• Trigger: memilih Renovasi Rumah dan kualitas.
• Observable result: tarif per m² ditampilkan pada baris label/value.
• Access: publik.
• Failure/recovery: tidak berlaku.
• Continuation: melihat total.

FR-19 — Hitung total biaya berdasarkan luas bangunan (explicit) As a Calon Pelanggan, I should melihat total biaya dihitung berdasarkan luas bangunan, sehingga saya mendapatkan angka total estimasi.

• Trigger: menekan "Dapatkan Estimasi Harga".
• Observable result: total dalam JetBrains Mono 40px count-up; baris Jenis Proyek / Luas / Kualitas / Tarif per m² tampil.
• Access: publik.
• Failure/recovery: jika luas tidak valid, tampilkan pesan error.
• Continuation: membaca disclaimer.

FR-20 — Disclaimer hasil estimasi (explicit) As a Calon Pelanggan, I should melihat disclaimer "Hasil ini merupakan estimasi awal. Survey lokasi diperlukan untuk mendapatkan penawaran resmi.", sehingga saya memahami batas estimasi.

• Trigger: hasil estimasi tampil.
• Observable result: disclaimer 12px tampil di bawah panel hasil.
• Access: publik.
• Failure/recovery: tidak berlaku.
• Continuation: mengirim lead.

FR-21 — Sistem lead generation saat "Dapatkan Estimasi Harga" ditekan (explicit) As a Calon Pelanggan, I should memicu sistem untuk menyimpan data ke database, mengirim email otomatis ke perusahaan, mengirim email konfirmasi ke calon pelanggan, dan menampilkan halaman terima kasih, sehingga lead saya tercatat dan saya mendapat konfirmasi.

• Trigger: menekan "Dapatkan Estimasi Harga".
• Observable result: lead tersimpan; dua email terkirim; Halaman Terima Kasih tampil.
• Access: publik.
• Failure/recovery: jika penyimpanan atau pengiriman email gagal, tampilkan pesan error dan opsi retry.
• Continuation: diarahkan ke Halaman Terima Kasih.

FR-22 — Email ke perusahaan (explicit) As a Tim Perusahaan Kontraktor (Penerima Lead), I should menerima email dengan subject "Lead Baru Website Bangun & Renovasi Rumah" berisi Nama, Nomor Telepon, Email, Kota, Jenis Proyek, Luas Bangunan, Kualitas, Estimasi Biaya, sehingga saya dapat menindaklanjuti lead.

• Trigger: lead dikirim.
• Observable result: email diterima di inbox perusahaan.
• Access: email perusahaan (SMTP).
• Failure/recovery: jika pengiriman gagal, sistem mencatat kegagalan dan menampilkan pesan error ke pengguna.
• Continuation: menindaklanjuti calon pelanggan.

FR-23 — Email ke pelanggan (explicit) As a Calon Pelanggan, I should menerima email dengan subject "Estimasi Biaya Proyek Anda" berisi ucapan terima kasih, estimasi biaya proyek, dan pernyataan bahwa perusahaan akan segera menghubungi untuk konsultasi gratis dan survey lokasi, sehingga saya mendapat konfirmasi.

• Trigger: lead dikirim.
• Observable result: email diterima di inbox calon pelanggan.
• Access: email calon pelanggan (SMTP).
• Failure/recovery: jika pengiriman gagal, sistem mencatat kegagalan dan menampilkan pesan error ke pengguna.
• Continuation: menunggu kontak perusahaan.

FR-24 — Trust section dengan counter animation (explicit) As a Calon Pelanggan, I should melihat trust section dengan statistik 500+ Proyek Selesai, 10+ Tahun Pengalaman, 100+ Tukang Profesional, 100% Garansi Pekerjaan menggunakan counter animation, sehingga saya percaya pada kredibilitas perusahaan.

• Trigger: menggulir ke trust section.
• Observable result: angka beranimasi count-up.
• Access: publik.
• Failure/recovery: dengan prefers-reduced-motion, angka tampil statis.
• Continuation: menggulir ke layanan.

FR-25 — Layanan Kami berupa card layanan (explicit) As a Calon Pelanggan, I should melihat card layanan Bangun Rumah Baru, Renovasi Rumah, Renovasi Dapur, Renovasi Kamar Mandi, Interior Rumah, Desain Arsitektur, Pembangunan Ruko, Pembangunan Kantor, sehingga saya mengetahui layanan yang tersedia.

• Trigger: menggulir ke Layanan Kami.
• Observable result: grid 4×2 card tampil; hover menampilkan spec line.
• Access: publik.
• Failure/recovery: jika konten gagal dimuat, tampilkan state error.
• Continuation: menavigasi ke halaman layanan.

FR-26 — Portofolio dengan before/after dan filter kategori (explicit) As a Calon Pelanggan, I should melihat proyek yang pernah dikerjakan dengan Foto Before, Foto After, Luas Bangunan, Lokasi, Durasi Proyek, Nilai Proyek, dan filter kategori, sehingga saya dapat menilai kualitas pekerjaan.

• Trigger: membuka Portofolio atau menggulir ke section portofolio.
• Observable result: pasangan before/after dengan divider amber draggable; metadata monospace; filter kategori berfungsi.
• Access: publik.
• Failure/recovery: jika tidak ada proyek pada filter, tampilkan state empty.
• Continuation: menavigasi ke layanan terkait.

FR-27 — Proses Kerja 8 tahap (explicit) As a Calon Pelanggan, I should melihat Proses Kerja 8 tahap: Konsultasi, Survey Lokasi, Penawaran Harga, Desain, Persetujuan, Pengerjaan, Quality Control, Serah Terima, sehingga saya memahami alur kerja perusahaan.

• Trigger: menggulir ke Proses Kerja.
• Observable result: rail 8 langkah bernomor pada band navy; numeral aktif terisi amber saat rail digulir.
• Access: publik.
• Failure/recovery: dengan prefers-reduced-motion, rail tampil statis.
• Continuation: menggulir ke testimoni.

FR-28 — Testimoni slider profesional (explicit) As a Calon Pelanggan, I should melihat slider testimonial profesional dengan Foto Klien, Nama, Lokasi, Rating Bintang, Ulasan, sehingga saya mendapat bukti sosial.

• Trigger: menggulir ke Testimoni atau membuka halaman Testimoni.
• Observable result: slider menampilkan testimoni; navigasi slider berfungsi.
• Access: publik.
• Failure/recovery: jika tidak ada testimoni, tampilkan state empty.
• Continuation: menggulir ke FAQ.

FR-29 — FAQ accordion modern (explicit) As a Calon Pelanggan, I should membuka accordion FAQ modern, sehingga saya mendapat jawaban atas pertanyaan umum.

• Trigger: menekan item FAQ.
• Observable result: item terbuka/menutup.
• Access: publik.
• Failure/recovery: jika konten gagal dimuat, tampilkan state error.
• Continuation: menggulir ke CTA akhir.

FR-30 — CTA akhir (explicit) As a Calon Pelanggan, I should melihat section besar dengan headline "Siap Mewujudkan Rumah Impian Anda?" dan tombol "Konsultasi Gratis" serta "Hitung Estimasi Biaya", sehingga saya terdorong untuk menghubungi perusahaan.

• Trigger: menggulir ke CTA akhir.
• Observable result: section tampil dengan dua tombol.
• Access: publik.
• Failure/recovery: jika tombol gagal, tampilkan fallback.
• Continuation: menekan tombol untuk konsultasi atau estimasi.

FR-31 — Footer lengkap (explicit) As a Calon Pelanggan, I should melihat footer berisi Logo, Alamat, Email, WhatsApp, Social Media, Google Maps, dan Menu Navigasi, sehingga saya dapat menemukan informasi kontak dan navigasi.

• Trigger: menggulir ke footer.
• Observable result: footer tampil dengan semua elemen.
• Access: publik.
• Failure/recovery: jika Google Maps gagal dimuat, tampilkan fallback alamat.
• Continuation: menghubungi perusahaan.

FR-32 — Teknologi frontend HTML5, CSS3, JavaScript (explicit) As a Calon Pelanggan, I should menggunakan website yang dibangun dengan HTML5, CSS3, dan JavaScript, sehingga website berjalan di browser modern.

• Trigger: membuka website.
• Observable result: halaman berfungsi di browser modern.
• Access: publik.
• Failure/recovery: jika JavaScript gagal, tampilkan fallback konten statis.
• Continuation: tidak berlaku.

FR-33 — Backend PHP 8+ dan MySQL (explicit) As a Tim Perusahaan Kontraktor (Penerima Lead), I should memiliki backend PHP 8+ dan MySQL yang menyimpan data lead secara durable, sehingga lead tidak hilang.

• Trigger: lead dikirim.
• Observable result: data lead tersimpan di database.
• Access: sistem internal.
• Failure/recovery: jika penyimpanan gagal, tampilkan pesan error dan opsi retry.
• Continuation: lead tersedia untuk ditindaklanjuti.

FR-34 — SMTP Email (explicit) As a Tim Perusahaan Kontraktor (Penerima Lead), I should menggunakan SMTP Email untuk pengiriman email, sehingga email ke perusahaan dan konfirmasi ke calon pelanggan terkirim.

• Trigger: lead dikirim.
• Observable result: email terkirim melalui SMTP.
• Access: konfigurasi SMTP.
• Failure/recovery: jika SMTP gagal, catat kegagalan dan tampilkan pesan error.
• Continuation: email diterima penerima.

FR-35 — Responsive Design (explicit) As a Calon Pelanggan, I should menggunakan website dengan responsive design, sehingga nyaman di perangkat mobile, tablet, dan desktop.

• Trigger: membuka website di berbagai viewport.
• Observable result: layout menyesuaikan pada 375px, 768px, dan 1280px.
• Access: publik.
• Failure/recovery: jika layout gagal, tampilkan fallback.
• Continuation: tidak berlaku.

FR-36 — SEO Friendly (explicit) As a Calon Pelanggan, I should menemukan website melalui pencarian karena SEO friendly, sehingga saya dapat menemukan perusahaan.

• Trigger: pencarian mesin pencari.
• Observable result: halaman terindeks dengan struktur SEO yang benar.
• Access: publik.
• Failure/recovery: tidak berlaku.
• Continuation: mengunjungi website.

FR-37 — Google Analytics Ready (explicit) As a Tim Perusahaan Kontraktor (Penerima Lead), I should memiliki website yang Google Analytics Ready, sehingga saya dapat mengukur trafik dan konversi.

• Trigger: kunjungan pengguna.
• Observable result: data analitik tercatat.
• Access: akun Google Analytics perusahaan.
• Failure/recovery: jika script gagal, website tetap berfungsi.
• Continuation: analisis data.

FR-38 — Schema Markup (explicit) As a Calon Pelanggan, I should melihat schema markup pada halaman, sehingga mesin pencari memahami konten.

• Trigger: crawl mesin pencari.
• Observable result: schema markup valid.
• Access: publik.
• Failure/recovery: tidak berlaku.
• Continuation: tidak berlaku.

FR-39 — Lazy Load Images (explicit) As a Calon Pelanggan, I should mengalami lazy load images, sehingga halaman memuat cepat.

• Trigger: menggulir halaman.
• Observable result: gambar dimuat saat mendekati viewport.
• Access: publik.
• Failure/recovery: jika gambar gagal dimuat, tampilkan fallback.
• Continuation: tidak berlaku.

FR-40 — Form Validation (explicit) As a Calon Pelanggan, I should mengalami form validation, sehingga saya mendapat umpan balik jika data tidak valid.

• Trigger: mengisi dan mengirim form.
• Observable result: pesan error per field jika tidak valid; form berhasil jika valid.
• Access: publik.
• Failure/recovery: pengguna memperbaiki field dan mengirim ulang.
• Continuation: estimasi dihitung dan lead diproses.

FR-41 — WhatsApp Floating Button (explicit) As a Calon Pelanggan, I should menggunakan WhatsApp floating button, sehingga saya dapat menghubungi perusahaan dengan cepat.

• Trigger: menekan tombol WhatsApp.
• Observable result: membuka WhatsApp dengan nomor perusahaan.
• Access: publik.
• Failure/recovery: jika WhatsApp tidak tersedia, tampilkan nomor telepon.
• Continuation: mengirim pesan.

FR-42 — Fast Loading (explicit) As a Calon Pelanggan, I should mengalami fast loading, sehingga saya tidak menunggu lama.

• Trigger: membuka website.
• Observable result: halaman memuat cepat.
• Access: publik.
• Failure/recovery: jika aset gagal dimuat, tampilkan fallback.
• Continuation: tidak berlaku.

FR-43 — Kalkulator tersedia anonim sebelum pengiriman lead (required_inference) As a Calon Pelanggan, I should menggunakan kalkulator secara anonim pada Beranda sebelum mengirim lead, sehingga saya dapat menghitung estimasi tanpa hambatan.

• Trigger: membuka Beranda.
• Observable result: kalkulator dapat digunakan tanpa akun.
• Access: publik, tanpa akun.
• Failure/recovery: jika kalkulator gagal dimuat, tampilkan pesan error.
• Continuation: mengisi field dan menghitung.

FR-44 — Validasi formulir sebelum kalkulasi dan penyimpanan lead (required_inference) As a Calon Pelanggan, I should melewati validasi formulir sebelum kalkulasi dan penyimpanan lead, sehingga data yang tersimpan valid.

• Trigger: menekan "Dapatkan Estimasi Harga".
• Observable result: kalkulasi dan penyimpanan hanya terjadi jika validasi berhasil.
• Access: publik.
• Failure/recovery: pesan error per field; pengguna memperbaiki dan mengirim ulang.
• Continuation: estimasi dihitung dan lead disimpan.

FR-45 — Penyimpanan lead durable di MySQL (required_inference) As a Tim Perusahaan Kontraktor (Penerima Lead), I should memiliki data lead tersimpan durable di MySQL, sehingga lead dapat ditindaklanjuti.

• Trigger: lead dikirim.
• Observable result: record lead tersimpan di database.
• Access: sistem internal.
• Failure/recovery: jika penyimpanan gagal, tampilkan pesan error dan opsi retry.
• Continuation: lead tersedia untuk ditindaklanjuti.

FR-46 — Konfigurasi SMTP untuk dua email (required_inference) As a Tim Perusahaan Kontraktor (Penerima Lead), I should memiliki SMTP yang dikonfigurasi untuk mengirim email ke perusahaan dan konfirmasi kepada calon pelanggan, sehingga kedua email terkirim.

• Trigger: lead dikirim.
• Observable result: dua email terkirim melalui SMTP.
• Access: konfigurasi SMTP.
• Failure/recovery: jika SMTP gagal, catat kegagalan dan tampilkan pesan error.
• Continuation: email diterima penerima.

FR-47 — Pengarahan ke Halaman Terima Kasih setelah pengiriman berhasil (required_inference) As a Calon Pelanggan, I should diarahkan ke Halaman Terima Kasih setelah pengiriman lead berhasil, sehingga saya mendapat konfirmasi.

• Trigger: pengiriman lead berhasil.
• Observable result: Halaman Terima Kasih tampil.
• Access: publik.
• Failure/recovery: jika pengiriman gagal, tetap di form dengan pesan error dan opsi retry.
• Continuation: menavigasi kembali ke Beranda atau halaman lain.

4. User Personas

Calon Pelanggan (Prospective Client)

Konteks produk: Pengunjung yang berencana membangun rumah baru atau merenovasi rumah dan ingin mengetahui perkiraan biaya sebelum menghubungi kontraktor. Ia datang dengan ketidakpastian besar — berapa biaya sebenarnya, apakah kontraktornya terpercaya, apakah harganya transparan. Ia sering membuka website dari ponsel, di sela waktu, dan memutuskan dalam hitungan detik apakah akan mengisi formulir atau pergi.

Tujuan utama: menerima estimasi biaya awal yang jelas dan email konfirmasi, serta dihubungi perusahaan untuk konsultasi gratis dan survey lokasi.

Tanggung jawab yang diterima:

• Memilih jenis proyek (Bangun Rumah Baru atau Renovasi Rumah) melalui tombol hero atau toggle kalkulator.
• Mengisi data diri: Nama Lengkap, Nomor WhatsApp, Email, Kota / Lokasi Proyek.
• Mengisi Luas Bangunan (m²) atau Luas Area Renovasi (m²) sesuai jenis proyek.
• Memilih kualitas Standard, Premium, atau Luxury.
• Menekan "Dapatkan Estimasi Harga" untuk melihat hasil estimasi instan beserta disclaimer.
• Membaca disclaimer bahwa hasil adalah estimasi awal dan survey lokasi diperlukan untuk penawaran resmi.
• Menerima email konfirmasi dan menunggu kontak perusahaan.

Input dan keputusan: jenis proyek, luas area, kualitas, data kontak; keputusan utama adalah apakah estimasi cukup meyakinkan untuk melanjutkan ke konsultasi.

Interaksi dengan peserta lain: berinteraksi dengan Tim Perusahaan Kontraktor (Penerima Lead) melalui email konfirmasi dan tindak lanjut konsultasi; berinteraksi dengan sistem melalui kalkulator dan formulir.

Keberhasilan yang dapat diamati: hasil estimasi tampil instan dengan total dan rincian; email konfirmasi diterima; Halaman Terima Kasih tampil; perusahaan menghubungi untuk konsultasi gratis dan survey lokasi.

Tim Perusahaan Kontraktor (Penerima Lead)

Konteks produk: Pihak internal perusahaan jasa bangun dan renovasi rumah yang menerima lead dari website. Mereka bekerja dengan volume lead yang harus ditindaklanjuti cepat; setiap lead berisi data kontak dan estimasi yang sudah dihitung, sehingga mereka dapat memprioritaskan dan menghubungi calon pelanggan.

Tujuan utama: lead tersimpan di database dan diterima via email sehingga dapat ditindaklanjuti menjadi pelanggan.

Tanggung jawab yang diterima:

• Menerima email otomatis dengan subject "Lead Baru Website Bangun & Renovasi Rumah" berisi Nama, Nomor Telepon, Email, Kota, Jenis Proyek, Luas Bangunan, Kualitas, Estimasi Biaya.
• Menindaklanjuti calon pelanggan untuk konsultasi gratis serta survey lokasi.
• Memastikan lead tersimpan durable di database MySQL.

Input dan keputusan: data lead dari email dan database; keputusan utama adalah prioritas dan jadwal tindak lanjut.

Interaksi dengan peserta lain: berinteraksi dengan Calon Pelanggan melalui email konfirmasi dan kontak tindak lanjut; berinteraksi dengan sistem melalui email otomatis dan database.

Keberhasilan yang dapat diamati: email lead diterima; data lead tersedia di database; calon pelanggan dihubungi untuk konsultasi gratis dan survey lokasi.

5. Core User Flows

Flow 1 — Calon Pelanggan menghitung estimasi biaya dan mengirim lead

1. Calon Pelanggan membuka Beranda rumah dari ponsel atau desktop.
2. Ia melihat hero split-screen: di kiri headline "Wujudkan Rumah Impian Anda Bersama Kontraktor Profesional" dan subheadline "Jasa Bangun Rumah Baru dan Renovasi Rumah dengan Harga Transparan, Kualitas Terjamin, dan Garansi Pekerjaan."; di kanan kartu kalkulator glassmorphism dengan judul "Hitung Estimasi Biaya Proyek Anda" — terlihat tanpa perlu scroll.
3. Ia menekan tombol "Bangun Rumah Baru" (atau "Renovasi Rumah") di hero. Kalkulator menyesuaikan: toggle segmen berpindah, label field luas berubah menjadi "Luas Bangunan (m²)" (atau "Luas Area Renovasi (m²)"), dan border card berdenyut amber 300ms.
4. Ia mengisi Nama Lengkap, Nomor WhatsApp, Email, dan Kota / Lokasi Proyek.
5. Ia mengisi luas bangunan atau luas area renovasi.
6. Ia memilih kualitas Standard, Premium, atau Luxury.
7. Ia menekan "Dapatkan Estimasi Harga".
8. Sistem memvalidasi formulir. Jika ada field tidak valid, sistem menampilkan pesan error per field dan Calon Pelanggan memperbaiki lalu mengirim ulang.
9. Jika validasi berhasil, sistem menghitung total biaya berdasarkan luas dan tarif per m² sesuai jenis proyek dan kualitas, lalu menampilkan hasil estimasi secara instan: panel navy sharp-cornered dengan 1px amber top rule, total dalam JetBrains Mono 40px yang count-up, baris label/value (Jenis Proyek / Luas / Kualitas / Tarif per m²) dengan 2px navy left-rule, dan disclaimer "Hasil ini merupakan estimasi awal. Survey lokasi diperlukan untuk mendapatkan penawaran resmi."
10. Sistem menyimpan data lead ke database MySQL.
11. Sistem mengirim email otomatis ke perusahaan dengan subject "Lead Baru Website Bangun & Renovasi Rumah" berisi Nama, Nomor Telepon, Email, Kota, Jenis Proyek, Luas Bangunan, Kualitas, Estimasi Biaya.
12. Sistem mengirim email konfirmasi ke Calon Pelanggan dengan subject "Estimasi Biaya Proyek Anda" berisi ucapan terima kasih, estimasi biaya proyek, dan pernyataan bahwa perusahaan akan segera menghubungi untuk konsultasi gratis dan survey lokasi.
13. Sistem menampilkan Halaman Terima Kasih.
14. Jika penyimpanan atau pengiriman email gagal, sistem menampilkan pesan error dan opsi retry; Calon Pelanggan dapat mencoba lagi.
15. Calon Pelanggan menavigasi kembali ke Beranda atau halaman lain melalui header atau footer.

Flow 2 — Calon Pelanggan menelusuri portofolio dan memfilter kategori

1. Calon Pelanggan membuka Portofolio dari sticky header.
2. Ia melihat daftar proyek dengan pasangan Foto Before dan Foto After, serta metadata Luas Bangunan, Lokasi, Durasi Proyek, dan Nilai Proyek dalam tabel monospace.
3. Ia menggeser divider amber draggable pada pasangan before/after untuk membandingkan; frame "before" terdesaturasi 20%, frame "after" full colour.
4. Ia memilih filter kategori untuk mempersempit daftar.
5. Jika tidak ada proyek pada filter, sistem menampilkan state empty.
6. Ia menavigasi ke halaman layanan terkait atau kembali ke Beranda untuk menghitung estimasi.

Flow 3 — Calon Pelanggan membaca testimoni dan FAQ

1. Calon Pelanggan menggulir ke Testimoni atau membuka halaman Testimoni.
2. Ia melihat slider testimonial dengan Foto Klien, Nama, Lokasi, Rating Bintang, dan Ulasan; ia menggeser slider untuk membaca testimoni lain.
3. Ia menggulir ke FAQ dan membuka accordion untuk membaca jawaban.
4. Ia menekan CTA "Konsultasi Gratis" atau "Hitung Estimasi Biaya" pada CTA akhir.

Flow 4 — Calon Pelanggan menghubungi perusahaan melalui Kontak

1. Calon Pelanggan membuka Kontak dari sticky header atau CTA "Konsultasi Gratis".
2. Ia melihat alamat, email, WhatsApp, social media, dan Google Maps.
3. Ia memilih kanal: menekan WhatsApp floating button, mengirim email, atau menggunakan formulir kontak.
4. Jika WhatsApp tidak tersedia, ia menggunakan nomor telepon yang ditampilkan.
5. Ia dapat menavigasi ke kalkulator di Beranda untuk menghitung estimasi.

Flow 5 — Tim Perusahaan Kontraktor menerima dan menindaklanjuti lead

1. Tim Perusahaan Kontraktor menerima email dengan subject "Lead Baru Website Bangun & Renovasi Rumah" berisi Nama, Nomor Telepon, Email, Kota, Jenis Proyek, Luas Bangunan, Kualitas, Estimasi Biaya.
2. Ia memverifikasi bahwa data lead tersimpan di database MySQL.
3. Ia menghubungi Calon Pelanggan melalui Nomor Telepon atau Email untuk konsultasi gratis.
4. Ia menjadwalkan survey lokasi sebagai langkah menuju penawaran resmi.
5. Jika email tidak diterima, ia memeriksa database untuk memastikan lead tersimpan dan menindaklanjuti dari sana.

6. Visuals Colors and Theme

Muse: Adham Dannaway — dual-nature craft: the plan on the left, the price on the right. Dua bagian dalam dialog: permintaan (headline, subheadline, dua tombol) di kiri, instrumen (kalkulator glassmorphism) di kanan. Situs menjadi instrumen design-and-build, dengan estimasi diperlakukan sebagai output yang direkayasa (tabular numerals, ruled rows, labelled values), bukan formulir marketing.

Headline direction: "Wujudkan Rumah Impian Anda Bersama Kontraktor Profesional" — poster half di kiri, instrument half di kanan.

Palet (light mode)

Rasio: ~62% white/light ground, ~30% navy (header, result panel, footer, process rail), ~8% amber. Amber hanya diletakkan di atas navy atau putih dengan label navy di dalamnya; tidak pernah sebagai amber text on white pada ukuran body.

Tipografi

• Headings: Archivo 700–800, tight tracking (-0.02em hingga -0.035em), sentence case, tanpa all-caps headlines. Display sizes genuinely large dan left-flush.
• Section labels: Archivo 600 uppercase 12px, +0.14em tracking.
• Numerals (kalkulator dan stats): JetBrains Mono 500 dengan tabular figures, sehingga rupiah amounts align in ruled columns.
• Body: Inter Tight.
• Scale: 1.333 modular — display clamp(40px, 7.2vw, 84px); h2 clamp(28px, 4vw, 48px); h3 24px; body 17px/1.65; small 14px; micro-label 12px. Mobile display floor 40px, desktop ceiling 84px.

Shape language

Sharp craft: 2px radius pada cards dan inputs; 0px pada dividers dan estimate result panel; 999px hanya pada WhatsApp float dan star row. Hairline 1px borders #E4E7EC di mana-mana; 2px navy left-rule pada labelled value rows; satu deliberate dark insert (estimate result block) dengan 1px amber top edge sebagai penanda "output" half dari dialog.

Layout

Split-screen hero pada 12-column grid: kolom 1–6 = promise half (eyebrow, oversized headline, subheadline, dua project-type buttons, trust strip); kolom 7–12 = instrument half (calculator card, sticky within viewport, fully visible at 1280×800). Di bawah fold, setiap section bergantian halves: services pada 4×2 ruled grid; portfolio sebagai mirrored before/after pairs dengan metadata monospace table; process sebagai numbered 8-step rail dengan navy vertical rule; testimonials sebagai two-column quote/photo split. 768px stacks to single column dengan calculator pindah langsung di bawah dua hero buttons; 375px keeps calculator first-screen dengan trust strip collapsed.

Imagery

Documentary architectural photography, bukan stock: rumah Indonesia nyata (tropical roof overhangs, terracotta atau grey tile, carport, garden wall) dalam flat daylight, plus macro craft details — trowel smoothing render, rebar tied in a grid, tile spacer, spirit level on a wall. Portfolio before/after pairs adalah same camera position, same lens, same time of day; frame "before" desaturated 20%, "after" full colour, dipisah draggable vertical rule. Diagrams over decoration: floor-plan line drawings, section cut through a wall, cost-breakdown bar. Tanpa 3D blobs, illustrated mascots, atau warm-tinted lifestyle stock.

7. Signature Design Concept

Split-screen hero sebagai instrumen design-and-build. Hero adalah satu komposisi 50/50 pada ground #F4F5F7, tanpa full-bleed photo di belakang type.

Kiri (kolom 1–6, white ground): eyebrow 12px uppercase navy "KONTRAKTOR BANGUN & RENOVASI", lalu headline "Wujudkan Rumah Impian Anda Bersama Kontraktor Profesional" dalam Archivo 800 clamp(40px, 7.2vw, 84px), tight leading, left-flush dan dibiarkan mencapai tepi kolom sehingga terbaca sebagai poster. Di bawahnya subheadline 17px #475467. Lalu dua tombol full-width-on-mobile yang ditumpuk sebagai pasangan — "Bangun Rumah Baru" solid #0B2A4A dengan teks putih, "Renovasi Rumah" putih dengan border navy 1.5px — keduanya 56px tall, sharp 2px radius, dipisah hairline. Di bawahnya thin ruled trust strip: "500+ Proyek · 10+ Tahun · Garansi Pekerjaan".

Kanan (kolom 7–12): kalkulator sebagai glassmorphism card di atas navy panel — panel adalah solid #0B2A4A rectangle yang bleed ke kanan dan bawah viewport edges; card mengambang di atasnya dengan rgba(255,255,255,0.09) fill, 1px rgba(255,255,255,0.22) border, 20px backdrop-blur, 2px radius, sepenuhnya di dalam viewport pertama pada 1280×800 tanpa scrolling. Card header "Hitung Estimasi Biaya Proyek Anda" dalam white Archivo 700 20px dengan mono "01" marker; fields 44px tall dengan translucent fills dan white labels; project-type choice adalah two-segment toggle dengan amber #E8871E pada segmen aktif; CTA adalah full-width amber button dengan navy label "Dapatkan Estimasi Harga".

On submit: lower third card menjadi solid #0B2A4A result panel dengan 1px amber top rule, total dalam JetBrains Mono 40px counting up, per-m² rate dan area dalam ruled label/value rows, dan disclaimer 12px rgba(255,255,255,0.7).

375px: kedua halves stack — headline, subheadline, dua tombol, lalu calculator card pada navy panel — masih above the fold sebagai satu unit, dengan trust strip dipindah ke bawah.

Signature moves:

• Split-screen hero: left half adalah poster left-flush Archivo 800 hingga 84px pada light ground; right half adalah solid navy panel yang bleed off right dan bottom edges, membawa floating glass calculator card — dua halves terlihat dalam dialog, dipisah single 1px rule yang berjalan sepanjang viewport height.
• Dua project-type buttons ("Bangun Rumah Baru" / "Renovasi Rumah") terhubung ke calculator: menekan salah satunya membalik segment toggle calculator, menukar label area field antara "Luas Bangunan (m²)" dan "Luas Area Renovasi (m²)", dan mem pulse card border amber 300ms — hero buttons adalah kontrol calculator, bukan link.
• Estimate output sebagai engineered document: result muncul di sharp-cornered navy panel dengan 1px amber top rule, total dalam tabular JetBrains Mono counting up over 400ms, lalu ruled label/value rows (Jenis Proyek / Luas / Kualitas / Tarif per m²) dengan 2px navy left-rules, dan disclaimer kecil di bawah hairline.
• Portfolio before/after sebagai draggable split dengan cursor-following amber divider handle; frame "before" desaturated, "after" full colour, dengan project metadata (luas, lokasi, durasi, nilai proyek) dirender sebagai monospace table di kolom sebelahnya sehingga setiap proyek terbaca sebagai spec sheet, bukan card.
• Process section sebagai 8-step numbered rail pada navy band: vertical rule dengan mono numerals 01–08, step names dalam Archivo 600, one-line descriptions dalam Inter Tight, dan numeral step aktif terisi amber saat rail di-scroll — wayfinding, bukan carousel of icons.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

Focal subject: split-screen hero — poster half (headline Archivo 800 left-flush) dan instrument half (glassmorphism calculator card di atas navy panel yang bleed off right dan bottom edges).

Input → transformation → outcome thesis: saat halaman dimuat, headline lines rise 12px, lalu dua project-type buttons, lalu calculator card fades up 16px sebagai beat terakhir — pengunjung melihat janji dan instrumen dalam satu frame. Saat pengunjung menekan "Bangun Rumah Baru" atau "Renovasi Rumah", segment toggle calculator flip, label area field swap, dan card border pulse amber 300ms — hero buttons adalah kontrol calculator. Saat "Dapatkan Estimasi Harga" ditekan, lower third card menjadi navy result panel dengan 1px amber top rule yang draw left-to-right, total dalam JetBrains Mono 40px count-up over 400ms, dan ruled label/value rows muncul berurutan.

Motion vocabulary: 180–260ms ease-out pada semua state changes; hero 240ms staggered reveal; estimate total count-up 400ms; amber top edge draw left-to-right; no bounce, no blobs, no gradient drift.

Composed first frame: ground #F4F5F7; kiri white ground dengan eyebrow navy, headline Archivo 800 besar left-flush, subheadline #475467, dua tombol 56px (solid navy + outline navy), trust strip ruled; kanan solid #0B2A4A panel bleeding off right dan bottom edges dengan glassmorphism calculator card mengambang, header putih dengan mono "01", fields 44px translucent, two-segment toggle dengan amber active, CTA amber full-width dengan navy label.

Reduced-motion state: dengan prefers-reduced-motion, staggered reveal, count-up, dan amber draw berhenti; semua konten tampil utuh dan statis; calculator card tetap terlihat penuh dalam viewport pertama; portfolio before/after divider tetap dapat digeser tanpa animasi cursor-following; process rail tampil statis dengan semua numeral terlihat.

9. Non-Functional Requirements

NFR-01 — Responsive mobile first (explicit) Website harus responsive mobile first, nyaman pada 375px, 768px, dan 1280px. Rationale: mayoritas pengunjung membuka dari ponsel; kalkulator harus tetap above the fold sebagai satu unit pada 375px.

NFR-02 — Fast loading (explicit) Website harus memuat cepat. Rationale: konversi lead bergantung pada kecepatan; kalkulator harus terlihat tanpa scroll.

NFR-03 — SEO friendly (explicit) Website harus SEO friendly dengan struktur heading, meta, dan konten yang dapat diindeks. Rationale: akuisisi calon pelanggan melalui pencarian.

NFR-04 — Google Analytics Ready (explicit) Website harus siap untuk Google Analytics. Rationale: pengukuran trafik dan konversi.

NFR-05 — Schema Markup (explicit) Website harus menyertakan schema markup. Rationale: mesin pencari memahami konten perusahaan jasa konstruksi.

NFR-06 — Lazy Load Images (explicit) Gambar harus dimuat secara lazy. Rationale: fast loading dan pengalaman pengguna.

NFR-07 — Form Validation (explicit) Formulir harus memiliki validasi. Rationale: data lead yang tersimpan valid dan dapat ditindaklanjuti.

NFR-08 — WhatsApp Floating Button (explicit) Website harus menyediakan WhatsApp floating button. Rationale: kanal kontak cepat untuk calon pelanggan.

NFR-09 — Kalkulator terlihat tanpa scroll pada hero (explicit) Kalkulator estimasi biaya harus langsung terlihat pada hero tanpa perlu scroll. Rationale: fokus utama website adalah konversi melalui kalkulator.

NFR-10 — Hero split-screen dengan glassmorphism (explicit) Hero harus menggunakan layout split-screen: kiri headline, deskripsi, dan 2 tombol utama; kanan kartu kalkulator dengan efek glassmorphism modern. Rationale: diferensiasi premium dan fokus konversi.

NFR-11 — Background hero foto/video dengan overlay gelap (explicit) Background hero harus berupa foto atau video rumah modern premium dengan overlay gelap agar teks mudah dibaca. Rationale: keterbacaan dan kesan premium.

NFR-12 — Disclaimer wajib (explicit) Website wajib menyertakan disclaimer "Hasil ini merupakan estimasi awal. Survey lokasi diperlukan untuk mendapatkan penawaran resmi." Rationale: ekspektasi yang benar dan perlindungan dari kesalahpahaman harga.

NFR-13 — Kualitas desain lebih premium daripada Dekoruma (explicit) Desain harus terasa lebih premium daripada Dekoruma dan cocok untuk perusahaan kontraktor kelas menengah hingga premium. Rationale: positioning pasar.

NFR-14 — Readable text and controls stay whole (required_inference) Headlines, wordmarks, labels, numbers, cards' text dan controls harus tetap seluruhnya di dalam viewport dan container pada 375px, 768px, dan 1280px, wrapping atau scaling (misalnya font-size: clamp(...) dengan mobile size) agar muat; tidak ada elemen lain yang menutupi bagian mana pun. Rationale: keterbacaan dan aksesibilitas kontrol di semua viewport.

NFR-15 — Reduced motion (required_inference) Dengan prefers-reduced-motion, animasi berhenti dan konten tampil utuh; item yang bergerak wrap into rows atau sit in a horizontally scrollable row (overflow-x: auto). Rationale: aksesibilitas.

10. Tech Stack

Frontend (explicit)

• HTML5
• CSS3
• JavaScript

Backend (explicit)

• PHP 8+
• MySQL

Email (explicit)

• SMTP Email

Fitur (explicit)

• Responsive Design
• SEO Friendly
• Google Analytics Ready
• Schema Markup
• Lazy Load Images
• Form Validation
• WhatsApp Floating Button
• Fast Loading

Tipografi (dari creative direction)

• Archivo (headings, 700–800)
• Inter Tight (body)
• JetBrains Mono (numerals, 500, tabular figures)

11. Assumptions and Constraints

Constraints (explicit):

• Frontend harus menggunakan HTML5, CSS3, dan JavaScript.
• Backend harus menggunakan PHP 8+ dan MySQL.
• Email harus menggunakan SMTP Email.
• Kalkulator estimasi biaya harus langsung terlihat pada hero tanpa perlu scroll.
• Hero harus menggunakan layout split-screen: kiri headline, deskripsi, dan 2 tombol utama; kanan kartu kalkulator dengan efek glassmorphism modern.
• Background hero harus berupa foto atau video rumah modern premium dengan overlay gelap agar teks mudah dibaca.
• Desain harus responsive mobile first, fast loading, dan SEO friendly.
• Wajib menyertakan disclaimer: "Hasil ini merupakan estimasi awal. Survey lokasi diperlukan untuk mendapatkan penawaran resmi."
• Desain harus terasa lebih premium daripada Dekoruma dan cocok untuk perusahaan kontraktor kelas menengah hingga premium.
• Palet warna: putih sebagai warna utama, abu-abu muda untuk background section, biru profesional untuk elemen utama, oranye atau emas untuk tombol CTA.
• Sticky header dengan menu Beranda, Bangun Rumah, Renovasi Rumah, Portofolio, Layanan, Testimoni, Artikel, Tentang Kami, Kontak, serta tombol CTA "Konsultasi Gratis".

Assumptions (narrow, labeled):

• [Default — not specified by user] Alamat, email, nomor WhatsApp, social media, dan koordinat Google Maps perusahaan diisi oleh pemilik website saat deployment.
• [Default — not specified by user] Kredensial SMTP dan alamat email perusahaan diisi melalui konfigurasi deployment.
• [Default — not specified by user] ID Google Analytics diisi melalui konfigurasi deployment.
• [Default — not specified by user] Konten artikel, portofolio, testimoni, dan FAQ diisi oleh pemilik website; struktur halaman dan komponen sudah disediakan.
• [Default — not specified by user] Tidak ada akun pengguna, login, dashboard admin, atau panel manajemen konten; data lead diakses langsung dari database MySQL dan email.
• [Default — not specified by user] Tidak ada pembayaran online atau penjadwalan otomatis survey.
• [Default — not specified by user] Bahasa antarmuka adalah Bahasa Indonesia sesuai sumber.

12. Glossary

Bangun Rumah Baru — Layanan pembangunan rumah baru; tarif estimasi Standard Rp 4.500.000/m², Premium Rp 6.000.000/m², Luxury Rp 8.000.000/m².

Renovasi Rumah — Layanan renovasi rumah; tarif estimasi Standard Rp 1.500.000/m², Premium Rp 3.000.000/m², Luxury Rp 5.000.000/m².

Kalkulator Estimasi Biaya — Card premium pada hero Beranda berjudul "Hitung Estimasi Biaya Proyek Anda" yang menghitung total biaya berdasarkan jenis proyek, luas, dan kualitas.

Lead — Data calon pelanggan yang dikirim melalui formulir estimasi biaya: Nama, Nomor Telepon, Email, Kota, Jenis Proyek, Luas Bangunan, Kualitas, Estimasi Biaya.

Glassmorphism — Efek visual kartu kalkulator: fill rgba(255,255,255,0.09), border 1px rgba(255,255,255,0.22), backdrop-blur 20px, radius 2px, di atas panel navy solid.

Split-screen hero — Layout hero 50/50: kiri headline, deskripsi, dan dua tombol utama; kanan kartu kalkulator glassmorphism.

Before/After — Pasangan foto proyek portofolio dengan posisi kamera, lensa, dan waktu yang sama; frame "before" desaturasi 20%, frame "after" full colour, dipisah divider amber draggable.

Counter animation — Animasi count-up pada trust section untuk statistik 500+ Proyek Selesai, 10+ Tahun Pengalaman, 100+ Tukang Profesional, 100% Garansi Pekerjaan.

SMTP — Protokol pengiriman email yang digunakan untuk email ke perusahaan dan email konfirmasi ke calon pelanggan.

Schema Markup — Penanda terstruktur pada halaman untuk membantu mesin pencari memahami konten.

Lazy Load Images — Teknik memuat gambar saat mendekati viewport untuk mempercepat loading.

WhatsApp Floating Button — Tombol bulat 999px radius yang membuka WhatsApp perusahaan dari halaman mana pun.

Halaman Terima Kasih — Halaman konfirmasi setelah lead tersimpan dan email estimasi diproses.