LayananPaketPortofolioMarketplaceCara KerjaFAQ
Mulai project →Akun0813 4079 780
Landing Page

Kelas Online

Landing kelas berangkatan dengan silabus kartu 3D, cicilan, dan daftar lewat WhatsApp

Versi 1.0.0Diperbarui 27 September 202614 screenshot

Hero dan kipas modulJudul kelas, jadwal, dan kartu modul 3D yang mulai mengipas.1 / 14
Hero dan kipas modul1 / 14
Kelas Online — Hero dan kipas modul

Judul kelas, jadwal, dan kartu modul 3D yang mulai mengipas.

Ringkasan

Template landing page untuk kursus online yang dibuka per angkatan. Silabusnya berupa kartu modul 3D yang mengipas saat digulir, calon peserta bisa melihat kapan tiap pelajaran terbuka, menghitung cicilan, melihat sertifikat bernama mereka sendiri, lalu memesan kursi langsung ke WhatsApp admin.

Masalah yang diselesaikan

Kelas sudah siap, materinya bagus, tapi halaman pendaftarannya cuma poster di Instagram dan satu tautan Linktree. Calon peserta bertanya hal yang sama berulang-ulang di WhatsApp: materinya apa saja, mulai kapan, live-nya jam berapa, bisa dicicil atau tidak, dapat sertifikat atau tidak. Admin kewalahan membalas, dan yang ragu akhirnya bilang "nanti dulu" lalu tidak kembali. Template ini menjawab semua pertanyaan itu di satu halaman, dan yang sudah yakin langsung mengirim pesanan lengkap ke WhatsApp admin.

Cocok untuk
  • Pengajar dan kreator yang membuka kelas online per angkatan
  • Bimbel, sekolah keterampilan, dan komunitas belajar
  • Agensi yang membuatkan halaman kelas untuk klien
  • Pemilik UMKM yang menjual kelas atau workshop berbayar
Hasil yang kamu dapat
  • Silabus jadi daya tarik utama: enam kartu modul 3D mengipas saat digulir dan bisa dibalik
  • Calon peserta melihat tanggal buka tiap pelajaran dengan menyeretnya ke kalender angkatan
  • Simulasi bayar penuh, cicil 3x, dan cicil 6x dalam rupiah
  • Pratinjau sertifikat memakai nama pengunjung
  • Pesanan masuk ke WhatsApp admin lengkap dengan paket dan cara bayar
  • Semua isi di satu berkas data, tanpa server dan tanpa kunci API
Bahasa desain
Newsreader + Work Sans · buku pelajaran, pena merah editor

Fitur

Silabus

  • Kartu modul 3D (three.js) yang mengipas terikat gulir dan bisa diseret
  • Klik kartu untuk membaliknya: daftar pelajaran tampil di sisi belakang sebagai teks tajam
  • Daftar modul yang bisa dibuka, sinkron dengan kartu 3D, juga jadi versi tanpa WebGL
  • Hasil yang dibawa pulang per modul

Jadwal

  • Kalender angkatan 6 minggu: seret pelajaran (mouse atau sentuh) atau tekan "Kapan buka?"
  • Hitung mundur ke pembukaan angkatan dalam WIB
  • Daftar tanggal: tutup pendaftaran, pembukaan, 6 sesi live
  • Semua tanggal dihitung otomatis dari satu tanggal mulai

Isi kelas

  • Pratinjau pelajaran yang bisa diputar: bab, kecepatan, teks narasi
  • Cerita pengajar dengan linimasa tahun
  • Contoh karya sebelum/sesudah dan testimoni berlabel contoh
  • FAQ yang menjawab jadwal, cicilan, sertifikat, refund

Biaya dan pendaftaran

  • Dua paket asimetris dengan daftar termasuk dan tidak termasuk
  • Simulasi cicilan dibulatkan ke ribuan, total selalu sama dengan harga
  • Pratinjau sertifikat bernama pengunjung dengan nomor contoh
  • Formulir tervalidasi (nama, nomor 08/62/+62, email, paket, cara bayar, persetujuan) dengan pesan bahasa Indonesia
  • Pesan WhatsApp terisi otomatis, atau tautan pembayaran sendiri

Teknis

  • Vite + TypeScript tanpa framework, build statis
  • 3D dimuat belakangan (133 KB gzip), poster SVG saat tanpa WebGL, diam saat gerak dikurangi
  • Kebijakan privasi (UU PDP) dan halaman 404
  • Uji logika vitest dan uji browser Playwright ikut disertakan

Animasi 3D

Konsep

Enam kartu modul tipis bertumpuk seperti kartu remi di tangan. Saat halaman digulir, kartu mengipas terbuka dari kiri ke kanan dan nomor tiap modul muncul di pojoknya; klik satu kartu dan kartu itu terangkat lalu dibalik, sisi belakangnya berisi daftar pelajaran. Silabus, bagian yang paling ingin dilihat calon peserta, jadi pengalaman utama halaman.

Tanpa WebGL / gerak dikurangi

Tanpa WebGL tampil poster SVG kipas kartu dan daftar modul tetap lengkap; dengan prefers-reduced-motion kartu tampil diam di posisi kipas penuh.

Screenshot

  1. 01Hero dan kipas modulJudul kelas, jadwal, dan kartu modul 3D yang mulai mengipas.desktop
  2. 02Kartu modul dibalikModul 2 dibuka: kartunya terangkat dan menampilkan daftar pelajaran di sisi belakang.desktop
  3. 03Kalender angkatanPelajaran 3.3 ditaruh di kalender: terbuka Rabu, 18 November 2026, 06.00 WIB.desktop
  4. 04Pratinjau pelajaranPemutar pelajaran 2.1 dengan bab, kecepatan, dan teks narasi.desktop
  5. 05Cerita pengajarLinimasa perjalanan pengajar dan kutipan.desktop
  6. 06Biaya dan cicilanPaket angkatan dengan cicilan 3x: Rp 430.000 per bulan.desktop
  7. 07Pratinjau sertifikatNama yang diketik langsung tercetak di sertifikat.desktop
  8. 08Contoh karyaTulisan sebelum dan sesudah kelas, berlabel contoh.desktop
  9. 09Pesan kursiValidasi bahasa Indonesia dan struk ringkasan sebelum dikirim ke WhatsApp.desktop
  10. 10Hero di ponselJudul, fakta angkatan, dan tombol pesan kursi.mobile
  11. 11Kipas modul di ponselEnam kartu modul dengan nomor di pojok, terbaca walau bertumpuk.mobile
  12. 12Silabus dan kalender di ponselTombol "Kapan buka?" dan kalender ringkas yang menempel di bawah layar.mobile
  13. 13Cicilan di ponselPilihan bayar penuh, cicil 3x, cicil 6x dengan rincian per bulan.mobile
  14. 14Sertifikat di ponselPratinjau sertifikat dengan nama pengunjung.mobile

Cara Pasang

  1. Ekstrak dan pasang

    Ekstrak zip, buka folder di terminal.

    npm install

  2. Ganti isi kelas

    Ubah nama kelas, modul, harga, tanggal angkatan, dan nomor WhatsApp di src/data/course.ts. Lihat hasilnya langsung.

    npm run dev

  3. Build dan unggah

    Unggah isi folder dist/ ke hosting. Panduan Vercel, Netlify, cPanel, dan nginx ada di docs/INSTALL.md.

    npm run build

Isi Paket

  • index.html, privasi.html, 404.html: halaman
  • src/data/course.ts: semua isi kelas (modul, harga, tanggal, WA)
  • src/main.ts, src/style.css: interaksi dan tampilan
  • src/three/deck.ts: scene kartu modul 3D
  • src/lib/logic.ts: format rupiah/tanggal WIB, cicilan, jadwal buka, validasi
  • tests/: uji logika, uji browser, skrip tangkapan layar
  • docs/: INSTALL, CUSTOMIZE, CARA-KERJA
  • design/: sistem desain, riset, catatan iterasi

Kustomisasi

  • Nama merek, nama kelas, angkatan, dan nomor WhatsApp dalam satu berkas
  • Tanggal mulai: hitung mundur, daftar tanggal, dan kalender ikut berubah
  • Modul, pelajaran, dan hasil tiap modul (kartu 3D menyesuaikan jumlah modul)
  • Harga paket dan pilihan cicilan
  • Tautan pembayaran sendiri sebagai ganti WhatsApp
  • Warna dan huruf lewat variabel CSS

FAQ

Apakah saya harus bisa coding?

Untuk mengganti isi kelas cukup mengubah teks di satu berkas `src/data/course.ts`, lalu build. Panduannya langkah demi langkah di docs/CUSTOMIZE.md.

Pembayaran lewat apa?

Bawaan: pesanan dikirim ke WhatsApp admin, lalu admin mengirim tautan pembayaran. Jika sudah punya tautan pembayaran (Midtrans, Xendit, atau lainnya), isi `paymentLink` dan tombol kirim langsung membukanya.

Kelas saya bukan kelas menulis. Bisa dipakai?

Bisa. Kelas menulis hanya contoh isi. Modul, pelajaran, jadwal live, harga, pengajar, dan FAQ semuanya diganti dari berkas data.

Bagaimana di HP yang lambat atau browser lama?

Teks dan formulir tampil dulu tanpa menunggu 3D. Kartu 3D dimuat belakangan dan hanya bergerak saat digulir. Jika WebGL tidak ada, yang tampil poster statis dan silabus tetap lengkap.

Testimoni dan contoh karyanya asli?

Tidak. Semuanya contoh fiktif dan diberi label "contoh" di layar. Ganti dengan milik peserta Anda setelah mendapat izin mereka.

Bisa dipasang di hosting cPanel biasa?

Bisa. Hasil build berupa HTML, CSS, dan JS statis. Unggah isi folder dist/ ke public_html.

Changelog

  1. v1.0.0
    26 September 2026
    • Rilis pertama
    • Silabus kartu 3D, kalender angkatan, pratinjau pelajaran, cicilan, sertifikat, formulir WhatsApp
    • Kebijakan privasi, 404, uji logika dan uji browser
Kelas Online
Rp 289.000
Demo ↗