Landing Page

Bimbel UTBK-SNBT

Landing bimbel dengan hero video, kalkulator skor subtes, dan kuis tryout yang mengubah skor jadi band kampus

Versi 1.0.0Diperbarui 5 Oktober 202614 screenshot

Bimbel UTBK-SNBT — Hero video dan kartu skor — Hero video dan kartu skorHero video kelas penuh lebar dengan navigasi kaca, judul bersinar, dua CTA, chip keunggulan, dan kartu contoh skor 687 dengan tangga skor 7 anak tangga.1 / 14

Ringkasan

Landing page bimbel UTBK-SNBT yang membuat calon siswa dan orang tua tahu posisi mereka sebelum chat admin: hero video kelas yang hidup, masukkan 4 skor subtes lalu dapatkan estimasi total skala 1000 dan band passing-grade contoh, atau jawab kuis tryout 8 soal dengan radar subtes. Program, jadwal batch, dan pendaftaran ke WhatsApp tersusun otomatis. Tanpa server, tanpa biaya bulanan. Foto dan video ilustrasi dibuat dengan AI; ganti dengan foto bimbel Anda sebelum dipakai.

Masalah yang diselesaikan

Setiap hari admin bimbel menjawab pertanyaan yang sama lewat DM: anak saya dapat 600 di tryout, kira-kira tembus kampus mana? Program mana yang pas? Kapan batch berikutnya? Tanpa jawaban cepat, orang tua berpindah ke bimbel lain. Situs bimbel kebanyakan hanya memajang foto kelas dan tombol "hubungi kami", sehingga pertanyaan masuk WhatsApp dalam keadaan belum tersusun — dan admin harus mengulang nanya skor, program, dan jadwal satu per satu.

Cocok untuk

Bimbel UTBK-SNBT dan lembaga kursus
Sekolah yang menyiapkan siswa kelas 12
Tutor privat yang ingin halaman pendaftaran
Agensi yang membuat situs untuk bimbel

Hasil yang kamu dapat

Hero video kelas dengan judul bersinar, kartu kaca, dan tangga skor yang terisi anak tangga demi anak tangga
Kalkulator skor mengubah 4 skor subtes menjadi estimasi total 1000 dan band passing-grade
Kuis tryout 8 soal dengan radar 7 subtes dan rekomendasi program yang tersorot
Pesan WhatsApp otomatis lengkap: skor, band, paket, batch, jadwal WIB
Ganti nama, harga, paket, foto, dan nomor WA cukup di satu file data, tanpa backend

Bahasa desain

Plus Jakarta Sans + Inter · pagi-belajar biru-studi di atas foto kelas hangat, pensil-kuning sebagai satu warna fun, jujur soal skor

Fitur

Kalkulator skor

4 slider subtes skala 200–800 (format yang sama dengan laporan tryout)
Estimasi total skala 1000 + rincian 7 subtes; 3 subtes lain ditandai estimasi
4 band passing-grade contoh yang menyala per langkah beserta nama kampus fiktif
Disclaimer tegas: estimasi, bukan skor resmi; ambang berubah tiap tahun
Baris paket yang paling cocok tersorot mengikuti band

Kuis tryout contoh

8 soal bergaya TPS/literasi (ditulis sendiri, bukan soal resmi) dengan pembahasan
Umpan balik benar/salah langsung, tidak bergantung warna saja
Radar 7 subtes yang terisi seiring jawaban, minimal 3 subtes terukur
Estimasi skor kuis, band, dan kartu rekomendasi program saat 8/8 terjawab
Tangga skor 7 anak tangga menyala sesuai estimasi, satu penanda puncak kuning

Program & pendaftaran

3 baris ledger program: Tryout Mandiri, Reguler, Intensif dengan harga lengkap
Jadwal 4 batch + countdown ke tanggal UTBK (WIB, tanggal tetap untuk diperbarui)
Formulir validasi bahasa Indonesia (nama wajib, nomor 08/62, persetujuan)
Tiket ringkasan otomatis ke WhatsApp admin — tidak ada data yang disimpan
Profil tutor fiktif, testimoni berlabel contoh dengan lonjakan skor realistis, FAQ

Visual dan kualitas

Hero video 8 detik (H.264, 0,7 MB) dengan poster, diam otomatis untuk prefers-reduced-motion dan saat di luar layar
Liquid-glass pada navigasi, chip, dan kartu skor; judul bersinar; masuk bertahap saat digulir
Foto pengajar dan alumni, foto kelas, semuanya ilustrasi AI dengan alt Indonesia dan lazy load
Target sentuh minimal 44 px, fokus keyboard terlihat, kontras AA
Diuji di 320, 390, 768, 1440 px; di atas 45 fps di ponsel dengan CPU 4x lebih lambat, diam dan digulir

Animasi 3D

Konsep

Tidak memakai 3D. Tangga blok-buku 3D versi awal diganti video kelas realistis, karena hero yang mengandalkan orang belajar lebih meyakinkan orang tua daripada balok. Rasa 'naik tangga' tetap ada sebagai tangga skor 7 anak tangga (satu per subtes UTBK) di kartu hero, kartu hasil kalkulator, dan kartu kuis; yang menyala mengikuti estimasi skor sungguhan, bukan hiasan.

Tanpa WebGL / gerak dikurangi

Video diam dan hanya poster JPEG yang tampil untuk prefers-reduced-motion; video juga berhenti saat di luar layar. Kalkulator, kuis, dan semua tombol berfungsi penuh tanpa JavaScript animasi.

Screenshot

01Hero video dan kartu skorHero video kelas penuh lebar dengan navigasi kaca, judul bersinar, dua CTA, chip keunggulan, dan kartu contoh skor 687 dengan tangga skor 7 anak tangga.desktop
02Kalkulator skor dan bandEmpat skor subtes 200–800 masuk; kartu gelap sticky menampilkan estimasi total 1000, tangga skor, tangga band contoh yang tersinggung, rincian 7 subtes (3 ditandai estimasi), dan tombol WhatsApp.desktop
03Kuis tryout dan radar subtesDelapan soal terjawab bertahap; radar 7 subtes terisi per jawaban (titik kuning = subtes terjawab), skor naik dari dasar 300 ke 850, dan tangga 7 blok dipanjat penanda hingga puncak. Program Intensif tersorot.desktop
04Program dan hargaFoto kelas di samping judul, lalu tiga baris ledger program: Tryout Mandiri Rp150.000, Reguler Rp2.400.000, Intensif Rp4.800.000 dengan tombol tekan dan CTA WhatsApp per baris.desktop
05Jadwal batch dan tiketLatar video kelas di balik empat batch dengan sisa kursi dan formulir valid yang telah berubah menjadi tiket ringkasan siap kirim ke WhatsApp.desktop
06Profil pengajarTiga tutor tetap (fiktif) dengan foto bulat, gelar, chip fokus subtes, kutipan, dan jadwal WIB.desktop
07Cerita alumni contohTiga testimoni berlabel contoh dengan foto alumni dan lonjakan skor realistis (512→687, 445→633, 588→761) beserta badge paket.desktop
08FAQ dan footerTujuh pertanyaan yang benar-benar ditanyakan orang tua (skor resmi, ambang, online/offline), lalu footer kontak, jam layanan WIB, legal fiktif, dan wordmark besar.desktop
09Kuis: dua jawaban benarBaru dua jawaban benar: radar sudah menggambar dua subtes, skor 438 (naik dari dasar 300), dan penanda bendera berada di blok kedua dari tangga 7 blok.desktop
10Hero di ponselHero video di ponsel: judul, dua CTA besar untuk jempol, dan kartu skor menumpuk tanpa menimpa tombol.mobile
11Kalkulator di ponselSlider subtes dan kartu hasil menumpuk rapi; angka memakai tabular-nums agar tidak goyang.mobile
12Kuis di ponselKartu radar dan tangga skor di atas, lalu soal dengan opsi 48 px; pilihan tidak bergantung warna saja.mobile
13Paket di ponselBaris ledger menumpuk dengan tombol selebar kartu; badge paling diambil tampil jelas.mobile
14Jadwal di ponselBatch menumpuk satu kolom dengan sisa kurs, lalu formulir pendaftaran WIB.mobile

Cara Pasang

1
Ekstrak dan pasang
Ekstrak zip, buka terminal di foldernya.
```
npm install
```
2
Isi data bimbel
Ganti nama, kota, nomor WA, paket, harga, batch, tutor, dan tanggal UTBK di src/data/bimbel.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 kalkulator dan kuis, tangga skor, radar SVG
src/data/: semua isi bimbel dalam satu file + kalender libur
public/: hero.mp4 + jadwal.mp4 + poster, foto kelas, foto pengajar dan alumni (ilustrasi AI, ganti dengan foto Anda)
index.html, privasi.html, 404.html
docs/: INSTALL, CUSTOMIZE, CARA-KERJA bergambar
tests/: uji unit, e2e Playwright, ukur fps, skrip tangkapan layar & sampul
design/: sistem desain, riset (rujukan Mobbin), prompt aset AI, catatan iterasi
LICENSE.txt, NOTICE.md, CHANGELOG.md

Kustomisasi

Nama bimbel, kota, zona waktu, alamat, nomor WhatsApp, email
Warna merek lewat token CSS (study-blue + pensil-kuning)
Program, harga, durasi, dan daftar isi paket
Band passing-grade contoh dan rekomendasi paket
Soal kuis, tutor, testimoni, FAQ, batch kelas
Tanggal UTBK dan daftar libur nasional (perbarui tiap tahun)
Foto dan video: ganti berkas di public/ dengan foto bimbel Anda (nama sama, ukuran serupa)

FAQ

Apakah perlu server atau database?

Tidak. Hasil build berupa file statis. Formulir hanya menyusun pesan WhatsApp; data siswa tidak disimpan di situs (lihat kebijakan privasi di halaman).

Apakah angka di kalkulator adalah skor UTBK resmi?

Bukan. Kalkulator memakai pendekatan perkiraan berbasis bobot yang biasa dipakai lembaga bimbel. Skor resmi memakai penskalaan IRT yang hanya panitia yang tahu. Halaman menampilkan disclaimer ini di bagian kalkulator dan FAQ.

Bisakah ambang passing-grade diganti dengan kampus saya?

Bisa, di `src/data/bimbel.ts` bagian BANDS. Template ini sengaja memakai nama "Contoh PTN…" supaya pembeli tidak menulis angka ambang asli tanpa verifikasi.

Bagaimana cara mengganti nomor WhatsApp admin?

Satu tempat: kunci `wa` di `src/data/bimbel.ts`, format 62… tanpa spasi. Semua tombol di halaman memakai nomor ini.

Kuisnya memakai AI?

Tidak. Delapan soal contoh ditulis statis dan bisa Anda ganti sendiri di `src/data/bimbel.ts`. Aturan kalkulator dan rekomendasi paket juga statis dan bisa dibaca di `src/logic.ts`.

Apakah tanggal UTBK dihitung otomatis?

Countdown memakai tanggal tetap yang Anda isi di `src/data/bimbel.ts` (`utbkTanggal`). Perbarui setiap tahun saat panitia mengumumkan jadwal resmi; panduannya di `docs/INSTALL.md`.

Foto dan videonya foto bimbel asli?

Bukan. Foto dan video ilustrasi dibuat dengan AI (FlatKey), tidak menampilkan orang atau usaha nyata. Ganti dengan foto bimbel Anda sebelum dipakai; nama berkas dan ukuran yang dianjurkan ada di docs/CUSTOMIZE.md.

Changelog

v1.0.0
5 Oktober 2026
- Rilis pertama
- Hero video kelas, navigasi dan kartu liquid-glass, judul bersinar, animasi masuk saat digulir
- Kalkulator skor subtes → estimasi 1000 + band contoh, kuis tryout 8 soal dengan radar 7 subtes, tangga skor 7 anak tangga
- Foto pengajar dan alumni, foto kelas (ilustrasi AI); tanpa 3D, bundel JS turun dari 530 KB ke 26 KB