Percetakan Undangan
Landing percetakan undangan: harga per pcs langsung kelihatan, proof yang bisa dibuka, dan hitungan kapan harus pesan
Versi 1.0.0Diperbarui 5 Oktober 202614 screenshot
Ringkasan
Landing page untuk percetakan undangan pernikahan, khitanan, aqiqah, dan kartu. Calon pemesan memilih jenis, jumlah, kertas, ukuran, dan finishing, lalu harga per pcs dan total muncul seketika. Proof undangan di sebelahnya ikut berubah: nama, tanggal, tempat, tiga gaya, dan kata-kata undangan dari lima acara dan tiga nada bahasa. Penghitung jadwal mundur dari hari-H menjawab kapan paling lambat memesan. Hasilnya satu pesan WhatsApp yang lengkap. Tanpa server, tanpa biaya bulanan.
Admin percetakan menjawab dua pertanyaan yang sama puluhan kali sehari: berapa harga undangan segini, dan kapan jadinya. Calon pemesan yang tidak mendapat jawaban cepat pindah ke percetakan lain. Situs percetakan biasanya hanya memajang katalog dan tombol hubungi kami, jadi hitungan harga, kebingungan memilih kertas, dan perkiraan jadwal semuanya masuk ke WhatsApp dalam keadaan setengah jadi.
- Percetakan undangan dan kartu
- Digital printing yang melayani undangan pernikahan
- Percetakan buku yasin dan souvenir
- Agensi yang membuat situs untuk percetakan
- Harga per pcs dan total muncul seketika dan turun per tangga jumlah, tanpa menunggu balasan admin
- Proof undangan hidup: nama, tanggal Indonesia, tempat, tiga gaya, foil menyepuh, sampul berayun terbuka ke halaman dalam
- Penghitung kapan harus pesan: mundur dari hari-H dengan target sampai ke tamu H-14, hari kerja WIB
- Kata-kata undangan siap pakai: pernikahan, lamaran, khitanan, aqiqah, syukuran; nada umum, Islami, atau Jawa
- Pesan WhatsApp masuk lengkap: produk, jumlah, harga, nama, tanggal, tempat, gaya, jadwal, kata-kata, catatan
- Ganti isi cukup di satu berkas data, tanpa backend
Fitur
Kalkulator job ticket
- Empat jenis: undangan lipat, hardcover, softcover, softfile (flat)
- Jumlah cepat 50/100/200/300+ atau angka bebas dengan tangga harga per pcs
- Kertas (art carton, ivory, linen), ukuran (A6, A5, A4), finishing boleh digabung (hot print, emboss, gold foil, sudut bulat)
- Desain custom sebagai tambahan, nomor tiket dan tanggal WIB di kartu
- Rentang harga dua ujung dalam Rupiah, ringkas untuk jutaan
- Validasi nama, tanggal, dan jumlah dengan pesan galat berbahasa Indonesia
Proof undangan
- Tiga gaya digambar kode: klasik emas, minimalis, melati
- Sampul berayun terbuka dari engsel kiri ke halaman dalam (CSS 3D, 0,9 detik)
- Kata-kata undangan dari 5 acara x 3 nada bahasa, mudah diganti pemilik
- Gold foil menyepuh ornamen dan tanggal; kertas dan jilid mengubah tampilan
- Nama panjang otomatis mengecil agar tidak terpotong
- Miniatur melayang di ponsel yang mengantar ke proof
Jadwal dan keputusan
- Hitungan mundur dari hari-H dengan status aman, mepet, atau tidak sempat
- Garis waktu tujuh titik: hari ini, desain, cetak, tiba, tenggat pesan, target sebar, hari-H
- Hari kerja Senin–Jumat menurut WIB, bukan zona peramban
- Tangga harga bergambar batang dan empat kartu pilihan jenis yang mengatur kalkulator
- Panel bahan berfoto: membuka laci mengganti foto dan keterangan
- Kit contoh kertas ke WhatsApp
Tampilan dan kualitas
- Hero video berulang dengan poster, navigasi dan kartu kaca cair, judul kabur-naik per kata
- Sepuluh foto dan dua video ilustrasi (AI), dikompres: foto <= 300 KB, video <= 2 MB
- Footer berlapis dengan segel lilin, galeri, ulasan contoh, FAQ, halaman privasi (UU PDP), halaman 404
- prefers-reduced-motion: poster diam, tanpa animasi masuk
- Target sentuh minimal 44 px, fokus keyboard terlihat, kontras AA diukur termasuk di atas video
- Diuji di 320, 390, 768, 1440 px; gulir 45 fps atau lebih di ponsel dengan CPU 4x lebih lambat
Animasi 3D
Tidak ada adegan 3D dekoratif. Versi awal memakai scene three.js (undangan polos di atas meja) dan dihapus karena tampak seperti mainan dan tidak dibutuhkan alat. Yang tersisa fungsional: pratinjau undangan di kanvas 2D dan sampul yang berayun terbuka dari engsel kiri (CSS 3D) saat pengunjung membuka halaman dalam. Suasana percetakan datang dari foto dan video ilustrasi.
Tanpa gerak (prefers-reduced-motion) video tidak dimuat dan poster diam tampil; sampul membuka tanpa transisi. Tidak ada WebGL yang perlu didukung.
Screenshot
- 01Hero bervideoVideo 8 detik berulang di belakang lapisan ivory: tangan menyentuh undangan berhias emas. Navigasi, chip, dan strip meta memakai kaca cair; judul muncul kabur-naik per kata.desktop
- 02Kalkulator dan proofJob ticket di kiri, proof yang lengket di kanan. Gold foil dan sudut bulat dipilih, nama pasangan diketik, tanggal menjadi Sabtu, 26 Desember 2026.desktop
- 03Halaman dalam dan kata-kataGaya melati, kata-kata Islami untuk khitanan. Sampul sudah berayun terbuka dan halaman dalam memuat kata-kata yang sama dengan pratinjau di kiri.desktop
- 04Kapan harus pesanAcara 26 Desember: status aman, tenggat terakhir memesan Rabu, 2 Des, garis waktu dari hari ini sampai hari-H, dan foto workshop.desktop
- 05Tangga harga dan pilihan jenisEmpat tangga dengan batang menurun; tangga 300+ menyala. Di bawahnya empat jenis dengan kesan, kegunaan, dan harga mulai.desktop
- 06Bahan dan finishing berfotoMembuka laci Gold foil mengganti foto di kanan dengan close-up cetak panas emas. Swatch emas, relief, dan kertas digambar CSS.desktop
- 07Alur empat langkahEmpat foto, angka foil, satu kalimat per langkah. Langkah tiga memutar video mesin cetak saat terlihat.desktop
- 08Kit contoh kertasFormulir kecil: nama, kota, kertas yang ingin dicoba. Tombol membuka WhatsApp dengan pesan siap kirim.desktop
- 09Galeri dan ulasanDua foto hasil cetak dan tiga ulasan berlabel contoh. Foto dan video ilustrasi dibuat dengan AI, bukan foto usaha nyata.desktop
- 10Footer berlapisKartu foto di kiri, kartu tautan di kanan dengan segel lilin yang mencuat, dan tulisan merek raksasa yang memudar.desktop
- 11Hero di ponselDi ponsel video tampil jelas di blok sendiri, teks di atas kertas di bawahnya.mobile
- 12Kalkulator di ponselGaya, kata-kata undangan, catatan, harga per pcs dan total, lalu tombol WhatsApp. Miniatur proof melayang di sudut.mobile
- 13Proof di ponselProof gaya melati dengan tab Sampul dan Halaman dalam.mobile
- 14Jadwal di ponselStatus aman dan garis waktu memanjang ke bawah dalam satu kolom.mobile
Cara Pasang
Ekstrak dan pasang
Ekstrak zip, buka terminal di foldernya.
npm installIsi data percetakan
Ganti nama, nomor WA, harga, bahan, jadwal produksi, dan kata-kata undangan di
src/data/percetakan.ts. Ganti foto dan video dipublic/imgdanpublic/video.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, kalkulator, penggambar proof (3 gaya), logika jadwal dan pesan WA
- src/data/percetakan.ts: semua isi percetakan dalam satu berkas
- index.html, privasi.html, 404.html
- public/img dan public/video: 10 foto dan 2 video ilustrasi AI (ganti dengan foto Anda)
- docs/: INSTALL, CUSTOMIZE, CARA-KERJA bergambar
- tests/: uji unit (35), e2e Playwright, skrip tangkapan layar
- design/: sistem desain, riset Mobbin, catatan iterasi, prompt FlatKey
- LICENSE.txt, NOTICE.md, CHANGELOG.md
Kustomisasi
- Nama, alamat, jam buka, dan nomor WhatsApp
- Produk, tangga harga per pcs, kertas, ukuran, dan finishing beserta tambahan harganya
- Jadwal produksi (hari kerja desain, cetak, kirim) dan target sebar H-14
- Kata-kata undangan per acara dan nada bahasa; gaya proof
- Foto dan video, ulasan, FAQ, kit contoh
- Warna merek lewat token CSS
FAQ
Apakah perlu server atau database?
Tidak. Hasil build berupa file statis. Formulir hanya menyusun pesan WhatsApp; data pemesan tidak disimpan di situs.
Apakah foto dan video di demo bisa dipakai langsung?
Sebaiknya tidak. Semuanya ilustrasi buatan AI (FlatKey), bukan foto usaha nyata. Ganti dengan foto usaha Anda sebelum tayang; ukuran dan nama berkas ada di docs/CUSTOMIZE.md.
Apakah harga di kalkulator harga final?
Itu estimasi dari tangga harga yang Anda isi di src/data/percetakan.ts. Harga final tetap dikonfirmasi admin lewat WhatsApp; situs memberi tahu pemesan hal itu.
Bagaimana hitungan kapan harus pesan?
Mundur dari hari-H: target undangan sampai ke tamu H-14, dikurangi pengiriman, cetak, dan desain dalam hari kerja Senin–Jumat WIB. Semua angka ada di jadwalProduksi dan bisa diubah. Hari libur nasional tidak dihitung otomatis.
Bisakah dipakai untuk percetakan selain undangan?
Bisa. Ganti produk, tangga harga, kertas, dan finishing di satu berkas data; kata-kata undangan dan gaya proof dapat dihapus atau diganti dengan desain kartu nama, brosur, atau souvenir.
Berapa ukuran halaman dan videonya?
Kode halaman sekitar 13 kB gzip ditambah fonta. Foto masing-masing 300 KB atau kurang, dan dua video 8 detik masing-masing di bawah 2 MB; video baru dimuat setelah halaman siap dan tidak dimuat bila pengunjung memilih kurangi gerakan.
Changelog
- v1.0.0
5 Oktober 2026- Rilis pertama
- Kalkulator tangga harga, proof tiga gaya yang bisa dibuka, kata-kata undangan, penghitung kapan harus pesan, panel bahan berfoto, kit contoh, galeri
- Hero video, kaca cair, gerak masuk kabur-naik, footer berlapis
- Foto dan video ilustrasi AI (FlatKey); three.js dekoratif dihapus