Template Landing Page SPMB
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 DesainEstetika "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 otoritasPaper (#f5f1e8) — krem hangat seperti kertas berkualitas, jauh dari rasa "website pemerintah generik"Gold (#c9a449) — emas tua sebagai aksen, simbol prestise akademikCrimson (#8b2635) — merah tua untuk peringatan penting (Notice Luwuk)Tipografi tiga lapis:Fraunces (serif) — untuk judul, memberikan bobot dan karakterInter Tight (sans-serif) — untuk body text, optimal untuk keterbacaanJetBrains Mono (monospace) — untuk label kecil dan eyebrow, kesan teknis-modernStruktur & Konten (8 Bagian)1. Header StickyLogo 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 SectionJudul besar "Selamat datang, calon murid baru." dengan kata "datang" dalam italic emasStempel sirkular berputar di sisi kanan menampilkan "Anno MMXXVI · 04 Jalur Pendaftaran"Teks SVG melingkar yang berputar 360° setiap 40 detikTombol CTA utama "Siap Mendaftar" dengan shadow emas yang bergerak saat hover3. Penting Diperhatikan (latar gelap)Grid 6 kartu informatif di latar biru tua:WA Aktif (Orang Tua)Unduh SPTJM (Word + PDF)Nilai TKAPengganti IjazahAturan 1 JalurBantuanBackground memiliki teks raksasa "PERHATIAN" miring sebagai dekorasi subtil4. Notice Khusus LuwukBanner 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/badgeAfirmasi — keluarga ekonomi tidak mampu + disabilitasPrestasi — akademik & non-akademikMutasi — pindah tugas ortu + anak guruTab aktif mendapat latar gelap dengan animasi fade-in saat berpindah.6. Persyaratan UmumDua kolom: Persyaratan dasar usia & ijazah, plus pengecualian (disabilitas, daerah 3T, dsb.).7. Layanan InformasiBadge "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 perangkat8. Final CTA + FooterSection gelap dengan tombol emas raksasa "SIAP MENDAFTAR" sebagai konversi utamaFooter dengan kredit IT AdminFitur TeknisInteraktivitasTab switcher untuk 4 jalur (vanilla JavaScript, tanpa library)Smooth scroll untuk navigasi anchorIntersectionObserver untuk reveal-on-scrollAnimasi rotasi stempel menggunakan CSS keyframesResponsif MobileBreakpoint 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 }AksesibilitasSemantic HTML — <header>, <section>, <nav>, <footer> yang benarContrast ratio memenuhi WCAG AA pada semua kombinasi teks/latarFocus states pada tombol dan linkTautan eksternal menggunakan target="_blank" rel="noopener"Bahasa dokumen ditandai <html lang="id">PerformaFile tunggal — semua CSS dan JS inline dalam satu HTMLTanpa framework — tidak butuh React, Vue, atau library JSTanpa gambar — semua visual menggunakan CSS dan SVG inlineFont dari Google Fonts dengan preconnect untuk loading cepatUkuran file ±42 KB (sangat ringan)Tidak butuh backend — bisa di-host di mana saja (cukup folder statis), di Blogger (Blogspot) juga bisaDetail Visual yang MembedakanTekstur kertas dari repeating-linear-gradient halusRadial gradient ambient di sudut-sudut halamanPseudo-element raksasa sebagai dekorasi background (PERHATIAN, tanda seru)Shadow ofset emas pada CTA — bukan shadow soft generik, melainkan kotak emas tegas yang bergerakPill bertanda KEL/DESA untuk membedakan jenis wilayah administratifKeunggulan UtamaSelf-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 HostingWeb server statis apa pun: GitHub Pages, Cloudflare Pages, Netlify, Vercel (gratis), hosting cPanel sekolah, atau BloggerHanya 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 / SiapkanFile SPTJM harus benar-benar di-uploadFormat nomor WA sudah saya konversi ke 62... — silakan tes klik untuk pastikan terbukaLogo "L" dalam crest saat ini hanya huruf — bisa diganti dengan logo asli sebagai SVG inlineTanggal jadwal SPMB belum dicantumkan (kapan buka, kapan tutup) — bisa ditambah jika sudah ditetapkanVerifikasi daftar wilayah — pastikan kelurahan/desa sudah lengkap dan ejaan benarDemo: https://spmb.smansaluwuk.sch.id/Itu saja, semoga bermanfaat!
