POSTER
Buatkan infografis. Gunakan logo file terupload. PLUSK (Pusat Layanan Usaha dan Kerja) adalah layanan dari Program Double Track untuk pengembangan alumni peserta pelatihan. Layanan ini berfungsi sebagai fasilitas pendamping dan inkubator bisnis bagi pelaku Koperasi dan UMKM. Layanan ini bertujuan membantu usaha agar lebih modern, berdaya saing tinggi, dan mandiri.Layanan utama yang bisa diakses secara gratis di kantor PLUT daerah meliputi:Konsultasi Bisnis: Bimbingan dan mentoring strategi pengembangan usaha.Perizinan & Legalitas: Pengurusan NIB, sertifikasi halal, dan merek.Pengembangan Produk: Pelatihan pengemasan dan kurasi produk.Pemasaran & Promosi: Akses ke informasi pasar dan perluasan jaringan.Akses Pembiayaan: Konsultasi terkait bantuan modal dan perbankan. Alur Pusat Layanan Usaha dan Kerja (PLUSK) Double Track adalah tahapan terstruktur bagi kelompok usaha siswa dan alumni pelatihan untuk mendapatkan pendampingan bisnis gratis, mulai dari konsultasi awal, kurasi kebutuhan, bimbingan teknis, hingga evaluasi agar usaha "naik kelas". Berikut adalah tahapan baku dalam alur layanan PLUSK: 1. Konsultasi Awal (Registrasi)Pelaku usaha mendaftar dan menyampaikan keluhan atau profil usahanya.Pendaftaran bisa dilakukan langsung ke sekolah tempat PLUSK berada atau melalui sistem pendaftaran online. 2. Analisis Kebutuhan & Kurasi (Assessment)Konsultan PLUSK melakukan asesmen atau wawancara mendalam untuk menganalisis kendala dan potensi usaha.Usaha akan diklasifikasikan berdasarkan kebutuhannya, misalnya terkait perizinan, pemasaran digital, atau modal. 3. Pendampingan & Aksi (Action Plan)Pendampingan diberikan dalam 5 bidang utama oleh konsultan ahli:Kelembagaan: Pembentukan badan hukum (CV, PT) dan manajemen koperasi.Legalitas & Perizinan: Bantuan pembuatan NIB (Nomor Induk Berusaha) melalui Sistem OSS, sertifikasi halal, dan PIRT.Produksi: Standarisasi mutu, pengembangan kemasan (packaging), hingga kurasi produk.Pemasaran: Pelatihan digital marketing, foto produk, dan perluasan pangsa pasar.Pembiayaan: Penyusunan laporan keuangan dan akses permodalan ke perbankan. 4. Pelatihan & Mentoring LanjutanPelaku usaha diikutsertakan dalam kelas rutin, lokakarya, atau pameran produk unggulan yang diadakan oleh PLUSK. 5. Evaluasi & KemandirianEvaluasi berkala untuk mengukur perkembangan omzet, legalitas, dan kapasitas produksi Kelompok Usaha Siswa agar menjadi usaha yang mandiri dan berdaya saing. Alamat web : https://www.plusk.online/
WEB
PROMPT SPESIFIKASI PENGEMBANGAN APLIKASI LANDING PAGE PLUSK
Buatkan sebuah aplikasi single-page (landing page) interaktif, modern, dan sepenuhnya responsif untuk PLUSK (Pusat Layanan Usaha dan Kerja) Double Track. Aplikasi ini ditujukan sebagai fasilitas pendamping dan inkubator bisnis gratis bagi alumni pelatihan dan kelompok usaha siswa koperasi/UMKM SMA Double Track Jawa Timur bekerja sama dengan ITS Surabaya.
Aplikasi harus dibangun dalam satu file HTML mandiri yang menggabungkan struktur HTML, gaya Tailwind CSS (melalui CDN), ikon FontAwesome, dan logika interaktivitas JavaScript vanilla.
1. PANDUAN DESAIN VISUAL & BRANDING
Tipografi: Gunakan font Google "Plus Jakarta Sans" sebagai font utama untuk memberikan kesan modern, dengan alternatif "Inter" untuk pembacaan teks yang bersih.
Tema Warna (Tailwind Custom Colors):
dtblue-800(#1e3a8a- Biru Navy utama)dtteal(#0d9488- Hijau Teal ikonik)dtyellow(#f59e0b- Kuning Aksen)dtorange(#f97316- Oranye Hangat)dtpink(#db2777- Merah Muda)Gunakan warna latar belakang ultra-bersih seperti
slate-50untuk bodi utama danwhiteuntuk kartu-kartu konten.
Gaya Komponen: Gunakan sudut melengkung besar (
rounded-2xlataurounded-3xl), bayangan halus (shadow-xl,shadow-2xldengan opasitas rendah), serta transisi efek melayang (hover transitions) yang mulus pada semua elemen interaktif.Logo & Gambar:
Logo utama menggunakan file lokal
logodt.png(sediakan fallback gambar jika tidak ditemukan).Gunakan gambar beresolusi tinggi bertema profesionalisme anak muda dari Unsplash untuk Hero Section, Tentang Kami, dan testimonial.
2. STRUKTUR DAN TATA LETAK HALAMAN
Aplikasi harus terdiri dari seksi-seksi berikut secara berurutan:
Announcement Bar (Bagian Paling Atas): Banner tipis dengan latar belakang gradien biru-teal yang mengumumkan akses gratis layanan dengan tombol CTA kecil menuju seksi pendaftaran.
Navbar: * Sticky header dengan efek buram di latar belakang (backdrop-blur).
Sisi kiri: Logo PLUSK Double Track.
Tengah: Menu Navigasi Desktop (Tentang, Layanan, Alur, Kisah Sukses, FAQ).
Sisi kanan: Tombol CTA "Konsultasi Gratis".
Responsif: Sediakan tombol hamburger menu dan menu overlay/drawer khusus untuk tampilan mobile.
Hero Section: * Gaya split layout (2 kolom pada layar besar).
Kolom Kiri: Judul utama yang tebal dan persuasif, subjudul deskriptif, dua tombol CTA utama, dan baris pengesahan program (Dinas Pendidikan Provinsi Jawa Timur & ITS Surabaya).
Kolom Kanan: Frame gambar utama yang elegan disertai kartu metrik mengapung (floating cards) yang menampilkan statistik kemajuan usaha.
Seksi Tentang (Tentang PLUSK): * Penjelasan mendalam mengenai visi PLUSK sebagai jembatan kemandirian finansial alumni.
Layout visual menarik yang memadukan kartu ringkasan program dan foto dokumentasi kegiatan kurasi produk.
Seksi Layanan Utama: * Grid 3 kolom yang berisi 5 Pilar Layanan Utama Gratis: 1. Konsultasi Bisnis 2. Perizinan & Legalitas 3. Pengembangan Produk 4. Pemasaran & Promosi 5. Akses Pembiayaan
Tiap kartu layanan dilengkapi dengan ikon khusus, deskripsi ringkas, penanda pilar, dan link CTA internal.
Kartu ke-6 dibuat sebagai Banner CTA bermotif gradien biru-teal dengan tajuk informasi bahwa semua layanan gratis.
Seksi Alur Pelayanan (Interactive Infographics): * Sistem Interactive Stepper 2 kolom.
Kiri: 5 tombol langkah alur (Konsultasi Awal, Analisis Kebutuhan, Pendampingan & Rencana Aksi, Mentoring Lanjutan, Evaluasi).
Kanan: Kotak detail dinamis yang menampilkan judul langkah, ikon, deskripsi, dan daftar detail kegiatan yang berubah sesuai langkah yang aktif dipilih, lengkap dengan tombol navigasi "Sebelumnya" & "Selanjutnya".
Seksi Simulasi Asesmen Mandiri (Interactive App):
Kiri: Kolom informasi mengenai pentingnya diagnosis usaha dan alamat portal resmi
https://www.plusk.online/.Kanan: Aplikasi wizard kustom multi-langkah:
Langkah 1: Input data nama pelaku usaha, asal sekolah, dan kategori bisnis.
Langkah 2: Pilihan kendala operasional (Legalitas, Kemasan, Pemasaran, Modal) dengan checkbox bergaya kartu modern.
Langkah 3: Laporan rekomendasi "Rencana Aksi PLUSK" yang dihasilkan secara dinamis berdasarkan kendala yang dicentang pengguna. Laporan dilengkapi fitur tombol untuk "Salin Rencana Aksi" ke papan klip (clipboard) dan tombol "Reset/Asesmen Baru".
Seksi Kisah Sukses Alumni: Grid testimonial berisi kutipan pengalaman sukses alumni (seperti peningkatan omzet dan standarisasi kemasan) lengkap dengan foto profil, nama alumni, dan asal sekolah SMA Double Track.
Seksi FAQ: Akordion tanya jawab interaktif yang dapat diperluas (expandable) dengan transisi rotasi ikon panah yang halus.
Footer: Informasi hak cipta, legalitas program kolaborasi Dinas Pendidikan Jawa Timur & ITS Surabaya, peta navigasi cepat, dan tautan sosial media.
3. LOGIKA INTERAKTIVITAS JAVASCRIPT
Pastikan fungsionalitas berikut diimplementasikan dengan JavaScript murni (vanilla JS) yang bebas eror:
Toggle Menu Mobile: Membuka dan menutup navigasi mobile saat tombol menu hamburger ditekan.
Interactive Stepper (Alur Layanan):
Kelola state langkah aktif (1-5).
Perbarui gaya tombol navigasi kiri agar mencerminkan langkah aktif (gunakan class
.step-active).Render ulang detail konten di panel kanan berdasarkan objek data yang telah didefinisikan sebelumnya.
Wizard Asesmen Mandiri:
Validasi input wajib di Langkah 1 sebelum lanjut ke Langkah 2.
Akumulasi data masalah/kendala yang dipilih di Langkah 2.
Logika generator laporan: Tampilkan rekomendasi aksi yang sesuai secara dinamis di Langkah 3.
Fitur salin teks laporan ke papan klip secara aman dan berikan umpan balik instan melalui sistem notifikasi.
Custom Toast Notification:
Buat fungsi
showToast(message, type)untuk menampilkan notifikasi mengambang yang elegan di sudut kanan bawah layar sebagai pengganti fungsialert().Notifikasi harus hilang otomatis setelah beberapa detik dengan animasi fade-out.
FAQ Accordion: Terapkan logika buka-tutup pada setiap item FAQ secara eksklusif (jika satu dibuka, yang lain tertutup) disertai rotasi ikon panah penunjuk.
Tolong buat kode yang bersih, terdokumentasi dengan baik menggunakan komentar bahasa Indonesia, serta optimalkan responsivitas layout agar terlihat menakjubkan di semua ukuran layar (ponsel pintar, tablet, hingga monitor desktop lebar).
