Studio Arunika Foto
Landing fotografer pernikahan: pengunjung menyusun paket sendiri, lihat harga Rupiah langsung, cek tanggal, lalu kirim pemesanan ke WhatsApp
Versi 1.0.0Diperbarui 5 Oktober 202619 screenshot
Ringkasan
Landing page studio fotografi pernikahan yang menjawab dua pertanyaan pertama calon pengantin: berapa harganya dan tanggalnya tersedia tidak. Pengunjung memilih acara yang ingin diliput dan mendapat saran jam, memakai paket cepat atau menyusun paket sendiri (jam liputan 6–12, fotografer tambahan, prewedding, drone, album cetak), langsung melihat total Rupiah dengan pengali musim yang jujur (akhir pekan ×1,1, bulan puncak ×1,2, digabung ×1,3), mengecek tanggal di kalender contoh, melihat rencana pembayaran (DP 30% + pelunasan) dan jadwal bertanggal sampai album jadi, lalu mengirim pemesanan lengkap ke WhatsApp. Tampilan: hero foto sinematik dengan navigasi kaca, album contoh yang dibuka lembar demi lembar, footer dua kartu. Tanpa server, tanpa biaya bulanan. Foto adalah ilustrasi AI; ganti dengan foto studio Anda.
Calon pengantin di Indonesia membandingkan jasa foto pernikahan lewat chat: tanya harga, tanya tanggal, tunggu balasan admin, lalu tanya lagi. Situs fotografer kebanyakan hanya galeri dan tombol kontak, sehingga pertanyaan yang sama diulang berkali-kali dan harga tidak pernah terlihat sebelum DP dibayar. Pemilik studio menghabiskan waktu menjawab pertanyaan yang sebenarnya bisa dijawab situsnya sendiri.
- Fotografer pernikahan dan studio foto wedding
- Videografer wedding yang membuka jasa liputan
- Agensi kreatif yang membuat situs untuk fotografer
- Pemilik venue/wedding organizer yang menjual paket foto
- Langkah 0: pilih acara (siraman, akad, resepsi, ngunduh mantu, sesi malam) dan dapat saran jam liputan
- Konfigurator paket dengan harga Rupiah langsung, plus tiga paket cepat (Intimate, Klasik, Sehari penuh)
- Pengali musim yang jujur dan tertulis: akhir pekan ×1,1, bulan puncak ×1,2, digabung maksimal ×1,3
- Cek tanggal Tersedia / Perlu konfirmasi / Terisi; tanggal pilihan mengubah alur dan jadwal menjadi tanggal sungguhan
- Rencana pembayaran DP 30% + pelunasan 70% dan jadwal konsultasi, preview galeri, album
- Pemesanan ke WhatsApp dengan pesan tersusun lengkap, tanpa menyimpan data
Fitur
Susun paket
- Pilih acara yang diliput; situs menjumlahkan jam, menambah penyangga perpindahan, dan menyarankan paket terdekat
- Paket cepat Intimate, Klasik, Sehari penuh menyalakan seluruh konfigurasi sekaligus
- Slider jam liputan 6–12 (mulai Rp 6,5 jt untuk 8 jam), sakelar fotografer tambahan, prewedding, drone, album 30×40
- Strip frame di slip bertambah sesuai jam; total dan DP 30% dihitung ulang hidup
- Papan tarif dasar baris-per-baris dengan tombol Pakai
Cek tanggal & pengali musim
- Kalender 3 bulan ke depan, mulai Senin, hari lalu tidak bisa dipilih
- Status tanggal deterministik: Terisi, Perlu konfirmasi (emas putus-putus), Tersedia
- Tanggal akhir pekan atau bulan puncak memunculkan chip pengali dan menghangatkan foil emas slip
- Kalender contoh fiktif yang konsisten di setiap kunjungan, tanpa backend
Rencana pembayaran & jadwal
- DP 30% saat tanggal dikunci dan pelunasan 70% paling lambat 7 hari setelah liputan; jumlahnya selalu pas dengan total
- Jadwal bertanggal dari tanggal pilihan: konsultasi H-30, hari H, batas pelunasan, preview H+14, album H+90
- Alur enam langkah di halaman berubah menjadi tanggal sungguhan
Pemesanan ke WhatsApp
- Pesan lengkap: tanggal WIB, jam liputan, penambah, harga dasar, pengali, total, DP 30%
- Validasi nama, nama pasangan, nomor WhatsApp berbahasa Indonesia
- Tombol wa.me ke nomor studio; form sapa di footer; tidak ada data yang disimpan
Tampilan & isi halaman
- Hero foto penuh layar bergerak pelan, navigasi kaca, judul masuk kata demi kata, chip fakta kaca
- Album contoh: penampil lembar dua halaman dengan tombol dan panah keyboard
- Testimoni bertanda contoh, tim fiktif, FAQ khusus studio foto, lokasi dengan denah SVG, kebijakan privasi UU PDP, 404
- Footer dua kartu dengan watermark merek
Kualitas
- Kontras AA, termasuk teks di atas foto hero (diukur dari piksel yang dirender)
- Target sentuh minimal 44 px, fokus keyboard terlihat, gerak dikurangi menampilkan semua konten diam
- Diuji di 320, 390, 768, 1440 px; fps ≥ 45 di ponsel dengan CPU 4× lebih lambat; JS 10 kB gzip, tanpa WebGL
Animasi 3D
Tidak memakai 3D. Versi pertama punya orbit polaroid three.js; dinilai dekoratif dan terbaca seperti mainan, jadi dibuang bersama dependensinya. Gantinya foto realistis (ilustrasi AI), hero Ken Burns CSS, dan gerak masuk CSS. Tidak ada fitur alat yang hilang.
Tidak ada WebGL sama sekali. Dengan prefers-reduced-motion semua animasi mati dan seluruh konten langsung terlihat.
Screenshot
- 01Hero foto penuh layarFoto resepsi senja bergerak pelan di belakang judul, navigasi kaca, dan tiga chip fakta paket. Teks diuji kontras AA di atas piksel foto yang sebenarnya.desktop
- 02Pilih acara, dapat saran jamCentang akad, resepsi, sesi malam: situs menyarankan 8 jam. Di kanan tiga paket cepat dengan harga langsung.desktop
- 03Konfigurator, kalender, slipTiga bingkai kontak cetak. Tanggal akhir pekan di bulan puncak memunculkan pengali ×1,3 dan menghangatkan foil slip.desktop
- 04Kirim ke WhatsAppFormulir ber-validasi bahasa Indonesia; rincian paket, tanggal, total, dan DP ikut tersusun dalam pesan wa.me.desktop
- 05Rencana pembayaran dan jadwalDP 30% dan pelunasan 70% dengan bilah proporsi, lalu lima tonggak bertanggal dari tanggal pilihan.desktop
- 06Album contoh, lembar 1Penampil dua halaman: foto kiri, teks kanan. Foto berkembang dari terang ke gambar penuh saat lembar dibuka. Ilustrasi AI.desktop
- 07Album contoh, lembar 2Kutipan pasangan (contoh) bersebrangan dengan potret. Tombol Sebelumnya/Berikutnya dan panah keyboard.desktop
- 08Alur enam langkah bertanggalSetelah tanggal dipilih, langkah konsultasi, hari H, preview, dan album berubah menjadi tanggal sungguhan.desktop
- 09Tarif dasarBaris per baris: 4 tarif jam dan 4 penambah, tombol Pakai menggeser konfigurator.desktop
- 10Testimoni (contoh)Tiga kartu ulasan yang jelas ditandai contoh, bukan ulasan asli.desktop
- 11Tim (fiktif)Tiga anggota tim contoh dengan potret ilustrasi AI dan chip fokus kerja.desktop
- 12Tanya jawabPertanyaan yang selalu muncul: DP, tanggal terisi, pengali musim, lama album, transportasi.desktop
- 13Lokasi dan kontakAlamat, jam WIB, tautan Google Maps tanpa kunci, dan denah SVG.desktop
- 14Footer dua kartuKartu foto dengan tagline dan tombol WhatsApp, kartu terang dengan kolom navigasi, kontak, form sapa, dan watermark merek.desktop
- 15Hero di ponselJudul, dua tombol, dan tiga chip fakta dalam satu layar 390 px. Menu penuh layar.mobile
- 16Paket cepat di ponselTiga paket cepat setinggi lebih dari 44 px, paket terpilih bergaris burgundy.mobile
- 17Slip pemesanan di ponselSlip gelap utuh dengan pengali musim, total, DP, lalu formulir kirim satu kolom.mobile
- 18Album di ponselDua halaman bertumpuk dengan penghitung lembar dan tombol lebar.mobile
- 19Alur di ponselAlur menjadi garis vertikal bernomor.mobile
Cara Pasang
Ekstrak dan pasang
Ekstrak zip, buka terminal di foldernya.
npm installIsi data studio
Ganti nama, alamat, nomor WA, tarif, ulasan, tim, dan FAQ di
src/data/studio.tsdansrc/data/isi.ts.npm run devBangun dan unggah
Unggah isi folder
dist/ke hosting. Panduan Vercel, Netlify, cPanel, dan nginx ada didocs/INSTALL.md.npm run build
Isi Paket
- src/: halaman dan logika konfigurator, kalender, rencana pembayaran, jadwal
- src/data/: identitas, tarif, acara, paket cepat, album, alur, testimoni, tim, FAQ dalam dua berkas
- public/media/: foto ilustrasi AI (ganti dengan foto studio Anda)
- index.html, privasi.html, 404.html
- docs/: INSTALL, CUSTOMIZE, CARA-KERJA bergambar
- tests/: uji unit, e2e Playwright, skrip tangkapan layar
- design/: sistem desain, riset Mobbin, catatan iterasi, prompt foto
- LICENSE.txt, NOTICE.md, CHANGELOG.md
Kustomisasi
- Nama, alamat, jam, email, dan nomor WhatsApp studio
- Tarif dasar per jam dan harga penambah (album, prewedding, drone, fotografer tambahan)
- Acara, paket cepat, tenggat (preview, pelunasan, album), bulan puncak, dan persentase DP
- Album, alur, testimoni (ganti dengan ulasan asli berizin), tim, FAQ
- Foto di public/media (ganti dengan foto studio sendiri)
- Warna merek lewat token CSS
- Teks halaman: judul, hero, catatan, kebijakan privasi
FAQ
Apakah perlu server atau database?
Tidak. Hasil build berupa file statis. Formulir hanya menyusun pesan WhatsApp; data pelanggan tidak disimpan di situs.
Kalender tanggalnya nyata atau contoh?
Contoh. Status tanggal dihasilkan deterministik dari tanggal sehingga konsisten, lalu diganti dengan kueri kalender sungguhan saat studio memetakannya ke backend (lihat docs/CARA-KERJA.md).
Bisakah memakai WITA/WIT?
Bisa. Ubah `zona` di `src/data/studio.ts` dan label jam; pastikan sesuai lokasi sungguhan (aturan data-realisme produk ini).
Apakah harga memakai AI?
Tidak. Harga dihitung dari aturan tetap di `src/data/studio.ts` (tarif jam + penambah + pengali musim). Tidak ada kunci AI, tidak ada biaya per pemakaian.
Bagaimana cara mengubah nomor WhatsApp?
Cukup ubah `wa` di `src/data/studio.ts` (format internasional tanpa + dan tanpa 0 di depan). Tautan lain mengikuti nilai itu.
Foto-fotonya foto asli?
Bukan. Foto adalah ilustrasi buatan AI (FlatKey), bukan foto usaha nyata. Ganti dengan foto studio Anda sebelum dipakai; langkahnya ada di docs/CUSTOMIZE.md dan prompt pembuat ulang di design/prompts.md.
Changelog
- v1.0.0
5 Oktober 2026- Rilis pertama (dibangun ulang 5 Okt 2026)
- Hero foto sinematik, navigasi kaca, judul masuk kata demi kata, footer dua kartu
- Langkah 0 acara + saran jam, paket cepat, konfigurator dengan harga Rupiah dan pengali musim yang jujur
- Kalender cek tanggal, slip pemesanan, rencana pembayaran, jadwal bertanggal, pemesanan ke WhatsApp
- Album contoh sebagai penampil lembar, alur enam langkah bertanggal, tarif dasar, testimoni contoh, tim fiktif, FAQ, lokasi, privasi UU PDP, 404
- Orbit polaroid three.js dibuang