Halaman landing satu-page (single-page) bergaya editorial-modern yang berfungsi sebagai gerbang persiapan sebelum calon murid menuju portal pendaftaran resmi di halaman khusus. Halaman ini tidak menangani pendaftaran—fungsinya adalah memastikan calon murid dan orang tua memahami persyaratan, menyiapkan dokumen yang benar, dan memilih jalur yang tepat sebelum mengisi formulir online.
Filosofi Desain
Estetika "Editorial Akademik Modern" — perpaduan antara kesan resmi-institusional (cocok untuk lembaga pendidikan negeri) dengan tampilan kontemporer yang tidak terkesan birokratis.
Palet warna:
Ink (#0a1628) — biru tua nyaris hitam, memberikan kesan otoritas
Paper (#f5f1e8) — krem hangat seperti kertas berkualitas, jauh dari rasa "website pemerintah generik"
Gold (#c9a449) — emas tua sebagai aksen, simbol prestise akademik
Crimson (#8b2635) — merah tua untuk peringatan penting (Notice Luwuk)
Tipografi tiga lapis:
Fraunces (serif) — untuk judul, memberikan bobot dan karakter
Inter Tight (sans-serif) — untuk body text, optimal untuk keterbacaan
JetBrains Mono (monospace) — untuk label kecil dan eyebrow, kesan teknis-modern
Struktur & Konten (8 Bagian)
1. Header Sticky
Logo bulat dengan inisial "L", nama sekolah, dan navigasi cepat ke 4 bagian. Tetap menempel di atas saat di-scroll dengan efek blur backdrop.
2. Hero Section
Judul besar "Selamat datang, calon murid baru." dengan kata "datang" dalam italic emas
Stempel sirkular berputar di sisi kanan menampilkan "Anno MMXXVI · 04 Jalur Pendaftaran"
Teks SVG melingkar yang berputar 360° setiap 40 detik
Tombol CTA utama "Siap Mendaftar" dengan shadow emas yang bergerak saat hover
3. Penting Diperhatikan (latar gelap)
Grid 6 kartu informatif di latar biru tua:
WA Aktif (Orang Tua)
Unduh SPTJM (Word + PDF)
Nilai TKA
Pengganti Ijazah
Aturan 1 Jalur
Bantuan
Background memiliki teks raksasa "PERHATIAN" miring sebagai dekorasi subtil
4. Notice Khusus Luwuk
Banner crimson yang mencolok mengingatkan calon murid berdomisili di kecamatan Luwuk untuk tidak memilih Jalur Mutasi, dengan opsi alternatif yang jelas.
5. Penjelasan Jalur (Interaktif)
Sistem tab switcher untuk 4 jalur:
Domisili — dilengkapi blok Cakupan Wilayah dengan 42 kelurahan/desa dari 4 kecamatan dalam format pill/badge
Afirmasi — keluarga ekonomi tidak mampu + disabilitas
Prestasi — akademik & non-akademik
Mutasi — pindah tugas ortu + anak guru
Tab aktif mendapat latar gelap dengan animasi fade-in saat berpindah.
6. Persyaratan Umum
Dua kolom: Persyaratan dasar usia & ijazah, plus pengecualian (disabilitas, daerah 3T, dsb.).
7. Layanan Informasi
Badge "Jam Layanan · Senin–Jum'at · 08.00–15.00 WITA"
3 kartu kontak WhatsApp dengan efek hover (mengangkat + bayangan emas)
Tautan langsung ke wa.me yang membuka WhatsApp di perangkat
8. Final CTA + Footer
Section gelap dengan tombol emas raksasa "SIAP MENDAFTAR" sebagai konversi utama
Footer dengan kredit IT Admin
Fitur Teknis
Interaktivitas
Tab switcher untuk 4 jalur (vanilla JavaScript, tanpa library)
Smooth scroll untuk navigasi anchor
IntersectionObserver untuk reveal-on-scroll
Animasi rotasi stempel menggunakan CSS keyframes
Responsif Mobile
Breakpoint pada 900px (hero grid jadi 1 kolom)
Breakpoint pada 700px (tab jalur jadi 2 kolom, cakupan jadi 1 kolom)
Breakpoint pada 600px (padding berkurang, badge jam jadi vertikal)
Pertahanan overflow horizontal global: html { overflow-x: hidden }, body { max-width: 100vw }
Aksesibilitas
Semantic HTML — <header>, <section>, <nav>, <footer> yang benar
Contrast ratio memenuhi WCAG AA pada semua kombinasi teks/latar
Focus states pada tombol dan link
Tautan eksternal menggunakan target="_blank" rel="noopener"
Bahasa dokumen ditandai <html lang="id">
Performa
File tunggal — semua CSS dan JS inline dalam satu HTML
Tanpa framework — tidak butuh React, Vue, atau library JS
Tanpa gambar — semua visual menggunakan CSS dan SVG inline
Font dari Google Fonts dengan preconnect untuk loading cepat
Ukuran file ±42 KB (sangat ringan)
Tidak butuh backend — bisa di-host di mana saja (cukup folder statis), di Blogger (Blogspot) juga bisa
Detail Visual yang Membedakan
Tekstur kertas dari repeating-linear-gradient halus
Radial gradient ambient di sudut-sudut halaman
Pseudo-element raksasa sebagai dekorasi background (PERHATIAN, tanda seru)
Shadow ofset emas pada CTA — bukan shadow soft generik, melainkan kotak emas tegas yang bergerak
Pill bertanda KEL/DESA untuk membedakan jenis wilayah administratif
Keunggulan Utama
Self-explanatory — calon murid dan orang tua dapat memahami seluruh proses persiapan tanpa harus bertanya, mengurangi beban kerja staf admin.
Mengurangi kesalahan pendaftaran — peringatan eksplisit tentang TKA = 0, pengganti ijazah, dan larangan memilih Jalur Mutasi untuk warga Luwuk.
Mudah dipindai (scannable) — pengguna dapat menemukan informasi spesifik dalam <10 detik berkat hierarki visual yang jelas (eyebrow, heading, body, callout).
Tampil profesional — tidak terlihat seperti website pemerintah generik bertabur tabel HTML mentah. Memberi kesan sekolah Anda sebagai institusi modern dan terorganisir.
Mudah dipelihara — semua konten dalam HTML murni. IT admin dapat memperbarui nama kontak, jam layanan, atau menambah wilayah dengan editor teks biasa, tanpa CMS atau build tools.
Mobile-first ready — Halaman ini diuji responsif penuh tanpa scroll horizontal.
Konversi terfokus — satu tujuan utama (klik "Siap Mendaftar") dengan dua titik CTA strategis (atas hero & akhir halaman), tanpa distraksi.
Tahan revisi — struktur modular dengan komentar <!-- BAGIAN --> memudahkan pencarian dan penggantian konten di masa depan.
Kebutuhan Hosting
Web server statis apa pun: GitHub Pages, Cloudflare Pages, Netlify, Vercel (gratis), hosting cPanel sekolah, atau Blogger
Hanya 1 file HTML + 2 file SPTJM (.docx & .pdf bisa Anda unggah di Google Drive)
HTTPS wajib (semua platform yang disebut di atas memberikan gratis)
Yang Perlu Anda Konfirmasi / Siapkan
File SPTJM harus benar-benar di-upload
Format nomor WA sudah saya konversi ke 62... — silakan tes klik untuk pastikan terbuka
Logo "L" dalam crest saat ini hanya huruf — bisa diganti dengan logo asli sebagai SVG inline
Tanggal jadwal SPMB belum dicantumkan (kapan buka, kapan tutup) — bisa ditambah jika sudah ditetapkan
Verifikasi daftar wilayah — pastikan kelurahan/desa sudah lengkap dan ejaan benar
Demo: https://spmb.smansaluwuk.sch.id/
Itu saja, semoga bermanfaat!
