LayananPaketPortofolioMarketplaceCara KerjaFAQ
Mulai project →Akun0813 4079 780
Landing Page

Studio Besi Kelapa

Landing gym & fitness: video latar nyata, kalkulator membership yang jujur (per bulan + total + hemat), bandingkan dengan drop-in, cek BMI & kalori, lalu daftar ke WhatsApp

Versi 1.0.0Diperbarui 5 Oktober 202616 screenshot

Hero: video latar dan penghitung repetisiVideo gym berulang di belakang headline bertingkat; penghitung raksasa mulai dari 00 di panel kanan bersama tiga angka kunci.1 / 16
Hero: video latar dan penghitung repetisi1 / 16
Studio Besi Kelapa — Hero: video latar dan penghitung repetisi

Video gym berulang di belakang headline bertingkat; penghitung raksasa mulai dari 00 di panel kanan bersama tiga angka kunci.

Ringkasan

Landing page gym dan fitness studio yang menjawab pertanyaan paling tidak disukai calon member: berapa sebenarnya biayanya? Hero sinematik dengan video latar dan penghitung repetisi raksasa yang bergerak saat digulir; di bawahnya kalkulator membership — pilih akses (All-Access / Off-Peak), durasi 1/3/6/12 bulan, tambahkan personal trainer, paket yoga, atau kartu member; per bulan, total, dan chip "hemat X%" dihitung jujur. Geser "berapa kali datang seminggu" dan lihat mana yang lebih murah: bayar harian, beli sebulan-sebulan, atau paket Anda — termasuk saat drop-in justru lebih murah. Lengkap dengan BMI + target kalori (dial sudut, matematika murni), jadwal kelas chalk-timeboard WIB, papan harga terbuka, galeri pelatih dan lantai latihan, FAQ, dan pendaftaran via WhatsApp dengan pesan siap kirim. Tanpa server, tanpa biaya bulanan. Foto dan video ilustrasi dibuat dengan AI — ganti dengan foto studio Anda.

Masalah yang diselesaikan

Harga gym di Indonesia sering tidak jelas sampai member mendaftar: "nanti dikabari", "ada biaya administrasi", atau paket yang muncul menyusul. Calon member enggan mendaftar karena takut biaya tersembunyi, dan admin studio menghabiskan waktu membalas pertanyaan harga yang sama berulang-ulang di WhatsApp. Situs gym kebanyakan hanya foto fasilitas dan tombol hubungi kami.

Cocok untuk
  • Pemilik gym & fitness studio
  • Pelatih yang membuka studio sendiri
  • Studio yang ingin mengurangi tanya-tanya harga di DM
  • Agensi yang membuat situs untuk studio olahraga
Hasil yang kamu dapat
  • Hero video latar + headline bertingkat + penghitung repetisi yang bergerak saat gulir; stempel SESI SELESAI di repetisi ke-12
  • Kalkulator membership: akses, durasi, tambahan → per bulan + total + chip hemat yang dihitung jujur
  • Bandingkan dengan drop-in: geser kunjungan per minggu, lihat mana yang lebih murah (jujur bila drop-in menang)
  • BMI + target kalori (Mifflin-St Jeor) di dial sudut, jadwal kelas WIB, papan harga, galeri pelatih
  • Daftar via WhatsApp: pesan lengkap siap kirim, nomor admin dari env VITE_WA_ADMIN_NUMBER
Bahasa desain
Archivo Expanded 800 + Barlow Semi Condensed · rubber-mat hitam + kapur volt, besi jujur, atletis

Fitur

Kalkulator membership

  • Pilih akses = piringan (All-Access / Off-Peak 07–17) dan durasi = kolar (1/3/6/12 bulan)
  • Tumpukan piringan menampilkan jumlah bulan — makin panjang, makin hemat
  • Tambahan: personal trainer 0–12 sesi (paket 8 sesi otomatis), paket yoga 8 kelas, kartu member
  • Per bulan plan + total dalam Rupiah; chip "hemat X%" dibandingkan dengan acuan beli bulanan
  • Baris selesai menyala kapur-putih satu kali (gerak Lockout)
  • Bandingkan dengan drop-in: slider 1–7 kunjungan per minggu → drop-in sebulan vs All-Access sebulan-sebulan vs paket Anda, kalimat jujur bila bayar harian lebih murah

BMI & target kalori

  • Input usia, tinggi, berat, tingkat aktivitas; BMI tampil di dial dengan kategori
  • Kalori pemeliharaan (TDEE) rumus Mifflin-St Jeor + target defisit ±0,5 kg/minggu
  • Semua dihitung di perangkat pengunjung, tanpa API; ditandai sebagai panduan bukan nasihat medis

Jadwal & isi halaman

  • Chalk-timeboard WIB: baris jam × kolom hari Senin–Minggu, sel kosong = tutup
  • Papan harga baris-per-baris, testimoni nameplate loker bertanda contoh, FAQ, lokasi & jam
  • Kebijakan privasi UU PDP, halaman 404
  • Data realistis WIB + Jakarta, nama studio fiktif

Media nyata dan kualitas

  • Video hero berulang (muted, loop, playsinline) dengan poster; berhenti dan menampilkan poster saat gerak dikurangi
  • 5 foto ilustrasi AI (lantai besi, deadlift, yoga, dua pelatih) dengan teks alternatif Indonesia, malas-muat di bawah lipatan
  • Nav kaca cair, headline masuk berurutan, kartu fasilitas berlapis kaca di atas foto — CSS murni, tanpa pustaka animasi
  • Tanpa 3D dekoratif: bundel JS hanya ~20 kB (sebelumnya +526 kB three.js)
  • Target sentuh minimal 44 px, fokus keyboard terlihat, kontras AA terukur, tanpa geser samping di 320–1440 px

Animasi 3D

Konsep

Tidak ada 3D dekoratif. Adegan hero adalah video nyata (lantai gym berkabut kapur, kettlebell dan piringan) di belakang lapisan gradien; nilai interaktifnya ada di penghitung repetisi DOM yang dikendalikan gulir dan stempel SESI SELESAI. Kettlebell three.js versi sebelumnya dibuang karena terlihat seperti mainan dan menambah 526 kB tanpa fungsi.

Tanpa WebGL / gerak dikurangi

Dengan prefers-reduced-motion video berhenti dan poster JPEG tampil, headline tanpa animasi, hitungan akhir 12 langsung terlihat. Tanpa JavaScript video tetap tampil lewat atribut autoplay; semua kalkulator butuh JavaScript.

Screenshot

  1. 01Hero: video latar dan penghitung repetisiVideo gym berulang di belakang headline bertingkat; penghitung raksasa mulai dari 00 di panel kanan bersama tiga angka kunci.desktop
  2. 02Repetisi ke-12Menggulir hero menaikkan hitungan 00 → 12; di repetisi terakhir stempel SESI SELESAI terbuka pada kartu member.desktop
  3. 03Kalkulator + bandingkan drop-inOff-Peak 12 bulan + PT 8 sesi + yoga + kartu: baris per baris, per bulan, total, chip hemat. Di kiri, slider kunjungan membandingkan drop-in, sebulan-sebulan, dan paket Anda.desktop
  4. 04Papan harga jujurSemua harga tertulis baris-per-baris termasuk drop-in harian, PT, paket yoga, dan kartu member.desktop
  5. 05Dial BMI dan target kaloriBMI 23,5 di dial kategori Normal; kalori pemeliharaan dan target defisit dihitung Mifflin-St Jeor.desktop
  6. 06Chalk-timeboard jadwal kelasGrid WIB baris jam × kolom hari; kelas ditandai kapur volt atau abu; sel kosong = tutup.desktop
  7. 07Pelatih dan lantai latihanFoto ilustrasi AI: deadlift berkapur, dua pelatih bernama fiktif dengan kartu loker.desktop
  8. 08Fasilitas di atas fotoRak dumbbell dan kettlebell sebagai latar, tiga fasilitas di panel kaca.desktop
  9. 09Testimoni nameplate lokerUlasan contoh digambar sebagai plat loker, bertanda contoh.desktop
  10. 10Tanya jawabFAQ buka-tutup dengan tautan WhatsApp ke admin studio.desktop
  11. 11Lokasi, jam, dan footerAlamat, jam operasional WIB, tombol Google Maps, dan footer berfoto.desktop
  12. 12Hero di ponselHeadline bertingkat dan CTA dalam satu kolom; menu ponsel tersedia.mobile
  13. 13Kalkulator di ponselDurasi 12 bulan + paket yoga terpilih; semua tombol ≥ 44 px.mobile
  14. 14Bandingkan drop-in di ponselSlider kunjungan dan tiga kartu perbandingan menumpuk satu kolom.mobile
  15. 15Dial BMI di ponselInput dan dial menumpuk; kategori BMI dan target kalori terbaca.mobile
  16. 16Jadwal kelas di ponselChalk-timeboard bisa digeser ke samping di dalam bingkai, tanpa menggeser halaman.mobile

Cara Pasang

  1. Ekstrak dan pasang

    Ekstrak zip, buka terminal di foldernya.

    npm install

  2. Isi data studio

    Ganti nama, alamat, jam, harga, kelas, dan FAQ di src/data/studio.ts; nomor WA di .env (VITE_WA_ADMIN_NUMBER).

    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 kalkulator + banding + BMI, gerak masuk/video
  • src/data/: semua isi studio dalam satu file
  • public/: 5 foto + 1 video latar ilustrasi AI (ganti dengan media 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
  • LICENSE.txt, NOTICE.md, CHANGELOG.md

Kustomisasi

  • Nama, alamat, jam, dan nomor WhatsApp studio (env VITE_WA_ADMIN_NUMBER)
  • Harga paket per akses per durasi, harga PT/yoga/kartu
  • Daftar kelas dan jadwal mingguan WIB
  • Testimoni (ganti dengan ulasan asli berizin) dan FAQ
  • Warna merek lewat token CSS
  • Teks halaman: judul, hero, kebijakan privasi
  • Foto dan video: ganti berkas di `public/` (foto-*.jpg, pelatih-*.jpg, vid-gym.mp4 + poster) dengan media studio Anda

FAQ

Apakah perlu server atau database?

Tidak. Hasil build berupa file statis. Kalkulator membership, BMI, dan kalori berjalan di peramban; formulir hanya menyusun pesan WhatsApp. Data pengunjung tidak disimpan di situs.

Harga di situs ini harga final?

Harga adalah data contoh untuk ilustrasi; pemilik studio menggantinya di `src/data/studio.ts`. Di situs yang sudah diisi, kalkulator menghitung dari tabel harga yang sama dengan yang diberlakukan di kasir — chip hemat dihitung dari acuan bulanan, bukan angka karangan.

Kenapa ada durasi 6 bulan padahal seed cuma 1/3/12?

Kalkulator menawarkan 1/3/6/12 bulan. Harga 6 bulan diisi jujur sebagai tangga menurun di antara 3 dan 12 bulan (All-Access Rp 2.250.000, Off-Peak Rp 1.590.000) — ganti dengan harga studio Anda di `src/data/studio.ts`.

Apakah BMI dan target kalori memakai AI?

Tidak. BMI dan kalori adalah matematika murni (rumus BMI dan Mifflin-St Jeor) yang dihitung di perangkat pengunjung. Tidak ada kunci AI, tidak ada biaya per pemakaian.

Bagaimana cara mengubah nomor WhatsApp?

Buat file `.env` dengan `VITE_WA_ADMIN_NUMBER=08xx…` lalu bangun ulang (formula 08→62 otomatis). Tanpa `.env`, dipakai nomor contoh — ganti sebelum tayang. Panduan di `docs/CUSTOMIZE.md`.

Dari mana foto dan video di demo?

Foto dan video dibuat dengan AI (FlatKey) sebagai ilustrasi — bukan foto usaha nyata dan tidak menampilkan orang sungguhan. Ganti dengan foto studio Anda sebelum tayang; berkasnya ada di `public/` dan dirinci di `docs/CUSTOMIZE.md` serta `NOTICE.md`.

Kenapa kalkulator "bandingkan" kadang menyuruh bayar harian?

Karena itu jujur: bila Anda datang 1x seminggu, paket 3 bulan lebih mahal daripada drop-in Rp 90.000. Situs menampilkan fakta itu; calon member lebih percaya pada studio yang tidak memaksa.

Changelog

  1. v1.0.0
    5 Oktober 2026
    • Rilis pertama
    • Hero video latar + headline bertingkat + penghitung repetisi gulir (stempel SESI SELESAI)
    • Kalkulator membership + bandingkan dengan drop-in (slider kunjungan/minggu)
    • Foto dan video ilustrasi AI; tanpa 3D dekoratif
    • Papan harga, BMI + target kalori dial, jadwal chalk-timeboard, pelatih, testimoni nameplate, FAQ, privasi UU PDP, 404
Studio Besi Kelapa
Rp 349.000
Demo ↗