Landing Page

Klinik Estetik

Landing klinik kulit: kuis perawatan yang langsung menjawab harga dan lama merahnya

Versi 1.0.0Diperbarui 27 September 202613 screenshot

Klinik Estetik — Kuis dan panel hasil — Kuis dan panel hasilTiga jawaban masuk, kartu kanan sudah menunjukkan perawatan, harga promo, dan bilah pemulihan. Lapisan serum di belakang kedua kartu cekung mengikuti kursor. Render kualitas penuh (GPU); di perangkat lemah resolusi shader turun otomatis.1 / 13

Ringkasan

Landing page klinik kulit dan kecantikan dengan kuis lima pertanyaan yang langsung menampilkan perawatan, rentang harga, dan lama pemulihan. Pengunjung memilih cabang, dokter, tanggal, dan jam, lalu pesan tersusun rapi ke WhatsApp admin. Tanpa server, tanpa biaya bulanan.

Masalah yang diselesaikan

Admin klinik menjawab pertanyaan yang sama puluhan kali sehari di DM: perawatan apa untuk jerawat saya, berapa harganya, merahnya berapa hari, bisa hari Sabtu jam berapa. Calon pasien yang tidak dapat jawaban cepat pindah ke klinik lain. Situs klinik biasanya hanya memajang foto dan tombol "hubungi kami", jadi pertanyaannya tetap masuk ke WhatsApp dalam keadaan setengah jadi.

Cocok untuk

Klinik kulit dan kecantikan
Dokter estetika praktik mandiri
Klinik dengan beberapa cabang
Agensi yang membuat situs untuk klinik

Hasil yang kamu dapat

Calon pasien tahu perawatan, harga, dan lama merah sebelum chat admin
Pesan WhatsApp masuk lengkap: cabang, dokter, tanggal, jam WIB, catatan
Hamil atau menyusui otomatis menyaring perawatan yang biasanya ditunda
Contoh sebelum/sesudah tanpa foto pasien, aman dari masalah izin
Ganti isi klinik cukup di dua file data, tanpa backend

Bahasa desain

Fraunces + Inter · klinis sejuk seperti porselen, lembut, jujur soal harga

Fitur

Kuis perawatan

5 pertanyaan: keluhan, jenis kulit, toleransi pemulihan, anggaran, hamil/menyusui
Kartu hasil berubah setiap jawaban, dengan harga promo, bilah pemulihan 0 sampai 7 hari, jadwal sesi
Dua pilihan alternatif dan tombol melonggarkan syarat bila tidak ada yang cocok
Chip jawaban untuk mengubah jawaban kapan saja
Cuplikan hasil di ponsel
Lingkaran pilihan dengan centang, jawaban terpilih tidak bergantung warna saja

Jadwal ke WhatsApp

Pita 14 hari mulai besok (WIB), hari tutup cabang otomatis nonaktif
Slot per jam dikelompokkan pagi, siang, sore dengan jumlah jam kosong; jam penuh bergaris putus-putus
Validasi nomor WA 08/62/+62 dan pesan galat berbahasa Indonesia
Pesan tersusun lengkap, tombol wa.me ke nomor cabang yang dipilih
Tidak menyimpan data pasien di situs

Isi halaman

Sebelum/sesudah yang digeser gulir, lalu bisa digeser manual
Tabel harga promo dengan saringan kategori dan paket 3 sesi
Direktori dokter dengan saringan per cabang dan jadwal praktik
Daftar cabang + peta Jawa dengan pin, jam buka, parkir, Google Maps
Bagian izin klinik dan aturan produk BPOM
Ulasan (berlabel contoh), FAQ, halaman privasi UU PDP, halaman 404

3D dan kualitas

Lapisan serum 3D selebar layar di belakang kuis: bereaksi pada kursor, gulir, dan setiap jawaban
Poster statis tanpa WebGL, bingkai diam untuk gerak dikurangi
Target sentuh minimal 44 px, fokus keyboard terlihat, kontras AA
Diuji di 320, 390, 768, 1440 px; 60 fps di ponsel dengan CPU 4x lebih lambat

Animasi 3D

Konsep

Satu shader lapisan serum bening di atas permukaan kulit porselen, selebar pita hero di belakang kuis dan kartu hasil. Kursor menekan lapisan, setiap jawaban kuis menjatuhkan satu tetes yang menyebar sebagai cincin dari pilihan yang diketuk, dan gulir membuat gelombang. Gambaran yang dikenal setiap pasien klinik kulit: serum di kulit yang sedang dirawat, bukan hiasan abstrak.

Tanpa WebGL / gerak dikurangi

Tanpa WebGL tampil poster JPEG dari render yang sama; kuis dan semua tombol tetap berfungsi. Dengan prefers-reduced-motion shader menggambar satu bingkai diam dan transisi dimatikan. Tangkapan layar dirender pada kualitas penuh (GPU); di perangkat tanpa GPU resolusi shader turun otomatis agar tetap lancar.

Screenshot

01Kuis dan panel hasilTiga jawaban masuk, kartu kanan sudah menunjukkan perawatan, harga promo, dan bilah pemulihan. Lapisan serum di belakang kedua kartu cekung mengikuti kursor. Render kualitas penuh (GPU); di perangkat lemah resolusi shader turun otomatis.desktop
02Hasil setelah 5 jawabanRekomendasi utama dengan alasan, label perawatan setelahnya, tombol pesan, dan dua pilihan lain. Jawaban bisa diubah lewat chip.desktop
03Sebelum dan sesudah digeser gulirMenggulir bagian ini menyapu dari sebelum ke sesudah. Label garis waktu (Minggu 0, Minggu 6) mengikuti kasus yang dipilih. Ilustrasi kulit berlabel contoh, bukan foto pasien.desktop
04Tabel harga promoHarga normal dicoret, harga promo, persen hemat, paket 3 sesi, dan lama pemulihan. Saring per kategori, tombol Pesan per baris.desktop
05Direktori dokter per cabangDirektori dokter, bukan rel geser: saring per cabang, bandingkan fokus, cara kerja, dan jadwal praktik baris per baris. Tombol memilih dokter di formulir.desktop
06Cabang dan peta JawaPilih cabang di daftar atau pin peta: alamat, jam buka WIB, parkir, dokter, dan tautan Google Maps.desktop
07Jadwal ke WhatsAppTanggal, jam kosong, nama, nomor WA tervalidasi. Pesan tersusun lengkap dengan tombol kirim ke WhatsApp cabang.desktop
08Izin dan produkData izin klinik dengan kolom isian pemilik bergaris putus-putus, aturan krim dan serum, tautan cek BPOM.desktop
09Tanya jawabPertanyaan yang benar-benar ditanyakan pasien: hamil, BPJS, lama merah, pasien di bawah 18 tahun.desktop
10Hero di ponselJudul di tengah, lalu kuis di atas lapisan serum dengan opsi besar yang mudah diketuk. Render kualitas penuh (GPU).mobile
11Hasil di ponselKartu hasil lengkap di ponsel. Kuis juga menampilkan cuplikan hasil yang bisa diketuk.mobile
12Sebelum dan sesudah di ponselSapuan yang sama digerakkan jempol saat menggulir, atau digeser langsung. Label garis waktu per kasus.mobile
13Pilih jam di ponselPita tanggal horizontal, jam dikelompokkan pagi, siang, sore dengan jumlah jam kosong. Chip jam 48 px; jam penuh bergaris putus-putus.mobile

Cara Pasang

1
Ekstrak dan pasang
Ekstrak zip, buka terminal di foldernya.
```
npm install
```
2
Isi data klinik
Ganti nama, cabang, nomor WA, dokter, dan harga di src/data/klinik.ts. Izin, FAQ, dan ulasan di src/data/konten.ts.
```
npm run dev
```
3
Bangun dan unggah
Unggah isi folder dist/ ke hosting. Panduan Vercel, Netlify, cPanel, dan nginx ada di docs/INSTALL.md.
```
npm run build
```

Isi Paket

src/: halaman, logika kuis dan jadwal, shader lapisan serum, ilustrasi sebelum/sesudah
src/data/: semua isi klinik dalam dua file
index.html, privasi.html, 404.html
docs/: INSTALL, CUSTOMIZE, CARA-KERJA bergambar
tests/: uji unit, e2e Playwright, skrip tangkapan layar
design/: sistem desain, riset, catatan iterasi
LICENSE.txt, NOTICE.md, CHANGELOG.md

Kustomisasi

Nama klinik, promo, dan biaya konsultasi
Cabang, jam buka per hari, nomor WA, titik peta
Daftar perawatan, harga normal/promo, lama pemulihan, skor kuis
Dokter dan jadwal praktik
Warna merek lewat token CSS
Pertanyaan kuis, FAQ, dan kolom izin

FAQ

Apakah perlu server atau database?

Tidak. Hasil build berupa file statis. Formulir hanya menyusun pesan WhatsApp; data pasien tidak disimpan di situs.

Bisakah dipakai untuk klinik dengan satu cabang saja?

Bisa. Hapus cabang lain di `src/data/klinik.ts`; daftar, peta, dan formulir menyesuaikan sendiri.

Apakah rekomendasi kuis memakai AI?

Tidak. Aturannya tetap dan bisa dibaca di `src/logic.ts`, dengan skor per perawatan yang Anda atur. Dokter penanggung jawab sebaiknya memeriksa kolom aman hamil dan lama pemulihan.

Bolehkah memasang foto sebelum/sesudah pasien asli?

Boleh dengan persetujuan tertulis pasien. Ganti dua kanvas ilustrasi dengan gambar; caranya ada di `docs/CUSTOMIZE.md`.

Cabang saya di luar Jawa, bagaimana dengan peta?

Peta bawaan menggambar Jawa dan Madura. Tambahkan garis pantai pulau lain di `src/main.ts`, atau ganti peta dengan tautan Google Maps saja.

Changelog

v1.0.0
27 September 2026
- Rilis pertama
- Palet klinis sejuk (porselen, plum, mawar dingin), lapisan serum selebar hero, CTA pil
- Direktori dokter per cabang menggantikan rel geser; jam dikelompokkan per bagian hari; label garis waktu sebelum/sesudah