Master Prompt: Pembuatan Landing Page Portal Lowongan Kerja "RuangKarir" (Double Track)
Bertindaklah sebagai Senior Full-Stack Web Developer, UI/UX Designer, dan SEO Specialist tingkat dunia. Saya ingin Anda membuat satu file tunggal index.html yang berisi kode lengkap (HTML5, CSS modern berbasis variabel & metodologi BEM, serta JavaScript Vanilla) untuk sebuah Landing Page Portal Lowongan Kerja bernama RuangKarir yang terintegrasi dengan nuansa program vokasi Double Track (SMA Double Track Jawa Timur).
Terapkan standar kualitas tertinggi, pastikan kodenya bersih, modular, terdokumentasi dengan baik, dan 100% responsif di seluruh perangkat.
1. SPESIFIKASI VISUAL & DESAIN (UI/UX)
Tema Warna (Brand Identity): Menggunakan palet dinamis yang terinspirasi dari logo Double Track Jatim:
Utama: Deep Navy (
#1e3a8a) untuk teks & struktur formal.Aksen Biru: (
#2563eb) untuk CTA & fokus elemen.Aksen Teal: (
#0d9488) untuk nuansa teknologi modern.Aksen Pink/Magenta: (
#db2777) & Violet (#7c3aed) untuk gradasi dinamis.Aksen Kuning Emas: (
#f59e0b) untuk penanda badge/highlight penting.
Tipografi: Gunakan Google Font 'Plus Jakarta Sans' dengan ketebalan yang bervariasi (light, regular, medium, semi-bold, bold, extra-bold).
Efek & Transisi: Gunakan bezier transition halus (
cubic-bezier(0.16, 1, 0.3, 1)) pada semua efek hover (tombol, navbar, kartu lowongan).Aset Gambar: Gunakan placeholder gambar berkualitas tinggi dari Unsplash yang relevan dengan tema tim profesional, kolaborasi, dan kelulusan vokasi.
2. STRUKTUR SEMANTIK HTML & DASHBOARD SECTIONS
Halaman harus menggunakan markup HTML5 semantik lengkap dengan tag SEO dasar (meta description, keywords, Open Graph, Twitter Cards) di bagian <head>. Urutan seksi wajib meliputi:
Header (Navbar): - Logo khusus "RuangKarir DT" berupa SVG pita berputar abstrak dengan warna gradasi.
Menu navigasi: Home, About, Services, Jobs, Skills, Testimonials, Contact.
Tombol CTA ganda: "Masuk" (outline) & "Daftar" (solid primary).
Behavior: Sticky navbar yang memicu background blur/solid putih halus saat di-scroll dan menyorot tautan menu aktif secara otomatis.
Home (Hero Section):
Sisi kiri: Headline provokatif, sub-headline informatif, badge "Baru: Terintegrasi dengan Program Double Track Vokasi".
Widget Pencarian Interaktif: Input kata kunci, dropdown kategori (Teknologi, Kreatif, Bisnis, Vokasional), dropdown lokasi (Surabaya, Jakarta, Malang, Remote), dan tombol "Cari".
Sisi kanan: Kolase gambar utama dikelilingi oleh elemen lencana mengambang (floating badges) interaktif (e.g. "98% Tersalurkan", "AI Smart Match") yang bergerak perlahan menggunakan keyframes CSS.
About:
Grid layout yang memperlihatkan kolase 3 foto tumpang tindih.
Teks komitmen RuangKarir, daftar keunggulan menggunakan ikon centang SVG, serta counter statistik numerik (12k+ Lowongan Aktif, 850+ Mitra Korporat, 45k+ Lulusan Sukses).
Services:
Bagian penjelasan 3 layanan utama: Rekomendasi AI Cerdas, CV Maker Standar ATS, dan Pelatihan Vokasi DT.
Terapkan hover-scale 3D transform ringan pada setiap kartu layanan.
Work (Job Listings Grid):
Tombol filter kategori interaktif (Semua, Teknologi, Kreatif, Vokasional).
Grid kartu lowongan kerja (Job Cards) dinamis. Setiap kartu berisi logo placeholder perusahaan, badge jenis kerja (Full-time, Remote, Internship), judul posisi, lokasi, tanggal posting, gaji perkiraan, dan tombol CTA "Lamar".
Skills Section:
Visualisasi tingkat kebutuhan industri saat ini menggunakan diagram batang progres (Skill Progress Bar).
Batang progres harus teranimasi melebar dari 0% menuju target nilai asli (cth: 92%, 87%, dst.) hanya saat pengguna men-scroll ke section tersebut (on-viewport reveal).
Testimonials Slider:
Slider ulasan alumni/rekruter berbentuk carousel horizontal.
Wajib dibangun menggunakan CSS translateX murni yang dikontrol oleh JavaScript untuk transisi otomatis (auto-play) maupun manual (tombol navigasi panah kiri/kanan & indikator titik dots di bawahnya).
Contact & Footer:
Sisi kiri: Info detail kontak (alamat fisik, email, telepon, media sosial).
Sisi kanan: Formulir kontak interaktif (Nama, Email, Subjek, Pesan).
Footer: Deskripsi singkat platform, daftar menu navigasi cepat, bantuan legalitas, dan formulir pendaftaran newsletter surat kabar mingguan.
3. LOGIKA JAVASCRIPT & EVENT HANDLERS (BUKAN ALERT)
Tulis JavaScript vanilla yang dioptimasi tanpa pustaka eksternal pihak ketiga (seperti jQuery):
Sistem Filter & Cari Kerja: Pastikan form pencarian di Hero Section dan tombol filter kategori di bagian Jobs berfungsi langsung menyaring kartu lowongan kerja (mengubah display card) dengan efek transisi memudar (fade-out/fade-in).
Intersection Observer API: Gunakan API ini untuk mengaktifkan kelas
.activepada elemen bersangkutan (scroll reveal) dan menstimulasi animasi pengisian grafik batang (Skills Progress) saat masuk ke dalam layar.Sistem Modul Pendaftaran (Modal): Ketika tombol "Lamar" atau "Daftar" diklik, buka jendela pop-up modal interaktif yang meminta input pelamar secara elegan (dilengkapi tombol Close & penutupan otomatis saat mengeklik area luar modal).
Custom Toast Notification: JANGAN gunakan perintah
alert()bawaan browser. Buatlah banner toast kustom yang meluncur masuk dari kanan bawah layar dengan ikon emoji dinamis (cth: ✨, ✉️, 🎉) untuk memunculkan pesan sukses setelah formulir kontak, lamaran, atau newsletter dikirimkan.Hamburger Menu Mobile: Buat menu navigasi di mobile menyamping (slide-out drawer) secara interaktif dengan animasi hamburger button yang berubah menjadi silang 'X'.
4. PENATAAN CSS & METODOLOGI BEM
Struktur penamaan class harus mengikuti metodologi BEM (Block-Element-Modifier) secara ketat (contoh:
.navbar,.navbar__menu,.navbar__link--active,.job-card,.job-card__header).Terapkan CSS Variables di level
:rootuntuk memudahkan kustomisasi warna, font, bayangan (box-shadow), dan radius sudut (border-radius).Desain harus berfokus pada pendekatan responsif penuh (fluid grid dan flexbox) yang lancar dari ukuran layar ponsel minimal 320px hingga
