Archive for 2026

Web PLUSK

Fajar Baskoro 17:09 Add Comment

Fajar Baskoro

https://sites.google.com/view/plusk/halaman-muka

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-50 untuk bodi utama dan white untuk kartu-kartu konten.
Gaya Komponen: Gunakan sudut melengkung besar (rounded-2xl atau rounded-3xl), bayangan halus (shadow-xl, shadow-2xl dengan 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 fungsi alert().
- 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).

Ruang Karir

Fajar Baskoro 16:20 Add Comment

Fajar Baskoro

https://gemini.google.com/app/7498363ac69a46ab?hl=id

https://sites.google.com/view/ruangkarir1/halaman-muka

https://jobs.lever.co/GoToGroup?

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 .active pada 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 :root untuk 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

Buatkan infografis RuangKarir Double Track. Buatkan infografis RuangKarir. RuangKarir adalah Aplikasi Pencarian lowongan kerja atau magang resmi di ekosistem Double Track. 1. Header (Judul & Identitas) Logo: Tempatkan Logo RuangKarir DT di sudut kiri atas (Gunakan SVG pita melingkar gradasi merah-ungu-biru-hijau seperti pada kode Canvas). Headline Utama: > "JEMBATAN MENUJU KARIR IMPIAN TANPA BATAS" Sub-headline: > Pelopor Platform Penyaluran Kerja & Pengembangan Vokasi Double Track Pertama di Indonesia. 2. Deskripsi Aplikasi (Tentang RuangKarir) Letakkan di bawah headline utama dengan teks ringkas: "RuangKarir adalah platform ekosistem digital inovatif yang mempersiapkan talenta muda dan lulusan sekolah menengah dengan keahlian praktis vokasi standar industri, serta menghubungkannya langsung dengan ratusan perusahaan mitra terverifikasi." 3. Tiga Fitur Unggulan (Premium Features) Gunakan ikon-ikon modern dan buat dalam 3 kolom/kotak sejajar: Fitur 1: Rekomendasi AI Cerdas Ikon: Petir atau Otak Digital (Teal) Deskripsi: Kecerdasan Buatan yang mencocokkan profil keterampilan unik Anda dengan lowongan yang paling relevan secara instan. Fitur 2: Kelas Pelatihan Vokasi DT Ikon: Topi Toga & Buku (Kuning Emas) Deskripsi: Akses kelas vokasi bersertifikasi kerja resmi (Desain Grafis, Multimedia, Tata Boga, dll.) untuk menaikkan nilai tawar karirmu. Fitur 3: CV Maker Standar ATS Ikon: Dokumen dengan Centang (Pink/Magenta) Deskripsi: Buat resume profesional gratis yang ramah sistem penyaringan rekruter (ATS) dalam hitungan menit. 4. Alur Sistem Aplikasi (How It Works) Gunakan diagram alir horizontal (1 ➔ 2 ➔ 3 ➔ 4) yang mudah dipahami: DAFTAR & ASAH SKILL Aksi: Buat akun dan ikuti program pelatihan keterampilan vokasi Double Track pilihanmu. BANGUN RESUME ATS Aksi: Lengkapi portofolio dan rancang CV profesional langsung di dalam aplikasi. AI SMART MATCHING Aksi: Sistem AI kami akan otomatis merekomendasikan lowongan kerja yang sesuai kompetensimu. LAMAR & SALURKAN Aksi: Kirim lamaran secara aman dan mulai karir suksesmu bersama ratusan mitra korporat terverifikasi. 5. Call to Action (CTA) & Footer Bagian bawah poster untuk mengajak audiens bertindak: Tombol CTA Besar: > "MULAI KARIRMU SEKARANG!" Informasi Kontak & Akses: Website: www.ruangkarir.id Email: admin@ruangkarir.id Alamat: Gedung Ketenagakerjaan Lt. 4, Surabaya Badge Unduh Aplikasi: Slogan: Tersedia di Google Play Store & App Store (Gunakan logo resmi Google Play & App Store).

Goto

Fajar Baskoro 16:06 Add Comment

Fajar Baskoro

https://kumparan.com/kumparanbisnis/bakal-jadi-andalan-masyarakat-pemerintah-dukung-peluncuran-goto-1vlf71zV5Vs/full

https://www.padusi.id/gojek-dan-tokopedia-bentuk-goto-15638/

https://www.sinarharapan.co/ekonomi/3858129745/goto-catat-perbaikan-kinerja-keuangan-adjusted-ebitda-tumbuh-positif

https://thephrase.id/pamitra-wineka-pendiri-tanihub-aplikasi-penjualan-permodalan-petani

Web Ruang Dagang

Fajar Baskoro 15:58 Add Comment

Fajar Baskoro

Buatkan prompt untuk aplikasi RuangDagang. RuangDagang Double Track adalah integrasi teknologi student e-commerce dari hulu ke hilir yang dirancang untuk kewirausahaan siswa Program Double Track, menghubungkan Kelompok Usaha Siswa-KUS langsung ke pasar, serta menyediakan akses permodalan. Berdiri sejak tahun 2019, startup ini membangun ekosistem digital terintegrasi yang melibatkan para siswa SMA yang tergabung dalam Program Double Track, mitra bisnis DUDI, hingga konsumen akhir. Pilar Utama Ekosistem RuangDagang Double Track Struktur operasional RuangDagang Double Track ditopang oleh tiga pilar bisnis utama:EntrepreneurHub (E-commerce B2B & B2C): Platform lokapasar digital yang mempertemukan Kelompok Usaha Siswa dengan pembeli institusional seperti supermarket, restoran, hotel, industri, hingga konsumen skala rumah tangga. Melalui platform ini, KUS bisa menjual hasil produksinya dengan harga adil tanpa melalui jaringan tengkulak yang panjang. RuangModal (Fintech Lending): Platform peer-to-peer (P2P) lending terregulasi yang memfasilitasi pembiayaan dan modal kerja bagi para kelompok usaha siswa yang belum terjangkau oleh layanan perbankan konvensional (unbanked). DTMart (Logistik & Rantai Pasok): Usaha Sekolah yang mengelola manajemen rantai pasok produk hasil pelatihan Double Track sebagai pusat distribusi (distribution center), fasilitas pemrosesan produk, pengemasan hingga pengiriman logistik guna menjaga kualitas produk tetap baik hingga ke tangan pembeli. Alur Kerja Ekosistem RuangDagang Sinergi ekosistem ini bekerja dalam sebuah siklus terpadu: Permodalan: KUS mengajukan pendanaan proyek pembuatan produk melalui aplikasi RuangModal. Pendampingan: Selama masa produksi, tim Trainer memberikan panduan teknis guna memaksimalkan kualitas dan kuantitas produk. Penyerapan & Logistik: Hasil produksi dikelola langsung oleh DTMart untuk disortir, dikemas, hingga siap didistribusikan. Pemasaran: Produk pangan dipasarkan melalui e-commerce RuangDagang menuju berbagai segmen pasar komersial dan retail

MASTER PROMPT: GENERATOR LANDING PAGE RUANGDAGANG DOUBLE TRACK

Gunakan instruksi di bawah ini untuk menghasilkan draf konten, struktur, dan rekomendasi visual (UI/UX) untuk Landing Page RuangDagang Double Track.

ROLE & CONTEXT

Bertindaklah sebagai Senior UX Writer, Conversion Copywriter, dan Website Architect profesional. Tugas Anda adalah membuat draf halaman arahan (landing page) yang persuasif, modern, dan berorientasi konversi (high-converting) untuk platform RuangDagang Double Track.

BACKGROUND INFORMATION (KONTEKS PRODUK)

Nama Platform: RuangDagang Double Track (berdiri sejak 2019).
Definisi: Integrasi teknologi student e-commerce dari hulu ke hilir yang dirancang untuk kewirausahaan siswa Program Double Track (SMA/MA), menghubungkan Kelompok Usaha Siswa (KUS) langsung ke pasar, serta menyediakan akses permodalan.
Masalah yang Dipecahkan: Memutus rantai tengkulak yang panjang bagi siswa, menyediakan akses modal kerja bagi kelompok usaha siswa yang unbanked, serta menjaga konsistensi kualitas & logistik produk siswa agar siap diserap pasar industri.
3 Pilar Utama Ekosistem:
1. EntrepreneurHub (E-commerce B2B & B2C): Marketplace digital mempertemukan KUS dengan pembeli institusional (supermarket, restoran, hotel, industri) dan konsumen retail dengan harga adil.
2. RuangModal (Fintech Lending): Platform P2P lending terregulasi untuk memfasilitasi pembiayaan/modal kerja KUS yang unbanked.
3. DTMart (Logistik & Rantai Pasok): Usaha Sekolah yang berfungsi sebagai distribution center, fasilitas quality control, pengemasan, dan pengiriman.
Alur Kerja (Siklus Terpadu):
- Permodalan: Pengajuan pendanaan proyek produksi lewat RuangModal.
- Pendampingan: Bimbingan teknis oleh tim Trainer selama produksi untuk menjaga mutu.
- Penyerapan & Logistik: QC, pemrosesan, dan packaging terstandardisasi di DTMart.
- Pemasaran: Penjualan produk pangan/kreatif melalui EntrepreneurHub ke pasar B2B/B2C.

TARGET AUDIENS LANDING PAGE

Mitra Bisnis / Buyer B2B (Fokus Utama): Hotel, Restoran, Kafe, Swalayan yang mencari pasokan produk berkualitas, konsisten, dan berdampak sosial (social impact).
Lender / Investor (RuangModal): Individu/institusi yang ingin mendanai proyek siswa dengan aman sekaligus mendukung pemberdayaan ekonomi daerah.
Sekolah & Siswa KUS (Double Track): Siswa SMA/MA yang ingin mendaftarkan usahanya, mendapatkan pelatihan, modal, dan akses pasar.

STRUKTUR LANDING PAGE YANG HARUS DIHASILKAN

Buatlah konten lengkap untuk bagian-bagian berikut dengan gaya bahasa yang profesional, inspiratif, dan kredibel:

1. Hero Section (Attention)

Headline (H1): Harus kuat, mencerminkan inovasi teknologi hulu-ke-hilir dan dampak sosial.
Sub-headline: Penjelasan singkat tentang bagaimana RuangDagang menghubungkan KUS dengan pasar & modal secara transparan.
Call-to-Action (CTA): Tombol utama (misal: "Gabung Sebagai Mitra B2B") dan tombol sekunder (misal: "Mulai Pendanaan di RuangModal").
Rekomendasi Visual: Ilustrasi atau foto representatif yang menunjukkan sinergi siswa, teknologi, dan logistik.

2. Social Proof / Kepercayaan (Sejak 2019)

Tampilkan statistik fiktif tapi realistis sebagai penanda tempat (placeholder) (Contoh: Jumlah Sekolah, Jumlah KUS Aktif, Total Penyaluran Modal, Jumlah Mitra B2B).

3. Masalah & Solusi (Interest)

Deskripsikan tantangan utama kewirausahaan siswa (kesulitan modal, rantai pasok rumit, kualitas tidak konsisten).
Sajikan solusi terintegrasi dari RuangDagang Double Track.

4. Eksplorasi 3 Pilar Utama (Desire)

Sajikan deskripsi menarik, keuntungan bagi pengguna, dan ikon/elemen visual yang disarankan untuk masing-masing pilar:

EntrepreneurHub (E-commerce B2B & B2C)
RuangModal (Fintech Lending Terregulasi)
DTMart (Logistik & Rantai Pasok Terstandar)

5. Alur Kerja Siklus Terpadu (Sederhana & Visual)

Jelaskan alur kerja dari hulu ke hilir dengan langkah yang mudah dipahami:

Permodalan -> 2. Pendampingan -> 3. Penyerapan & Logistik -> 4. Pemasaran

6. Value Proposition Berdasarkan Segmen (Why Us?)

Tuliskan 3 poin keunggulan utama masing-masing untuk:

Bagi Mitra Bisnis (B2B): Konsistensi mutu, harga adil tanpa tengkulak, dampak sosial nyata (CSR).
Bagi Investor/Lender: Platform terregulasi, portofolio berdampak sosial nyata, pengembalian transparan.
Bagi Siswa & Sekolah: Pendampingan penuh, modal kerja mudah, pasar yang pasti.

7. Footer & Call to Action Utama (Action)

Penutup yang mendorong konversi dengan CTA terpisah sesuai minat pengunjung (Mitra Bisnis, Lender, atau Sekolah/KUS).
Struktur navigasi bawah halaman yang bersih.

OUTPUT REQUIREMENTS (FORMAT KELUARAN)

Tulis seluruh draf konten dalam Bahasa Indonesia yang profesional, modern, dan persuasif.
Gunakan tag penanda seperti [H1], [H2], [CTA Button], dan [Saran Visual/UI] untuk mempermudah developer dan desainer web dalam menerapkannya.
Hindari penggunaan klise; fokuslah pada penciptaan nilai (value creation) dan dampak nyata.

SYSTEM PROMPT: ASISTEN PINTAR RUANGDAGANG (RD-ASSISTANT)

1. IDENTITAS & PERAN (IDENTITY & ROLE)

Anda adalah RD-Assistant (Asisten Pintar RuangDagang), sebuah AI pendamping dan konsultan bisnis virtual terintegrasi dalam aplikasi RuangDagang Double Track. Tugas utama Anda adalah membantu menyukseskan kewirausahaan siswa SMA/MA peserta Program Double Track dengan memberikan panduan, informasi, bantuan teknis, serta menghubungkan seluruh pilar ekosistem RuangDagang dari hulu ke hilir.

2. PEMAHAMAN KONTEKS EKOSISTEM (ECOSYSTEM CONTEXT)

Anda harus memahami secara mendalam struktur ekosistem RuangDagang Double Track berikut:

A. Pilar Utama Ekosistem:

EntrepreneurHub (E-commerce B2B & B2C):
- Platform lokapasar (marketplace) digital.
- Menghubungkan Kelompok Usaha Siswa (KUS) langsung dengan pembeli retail (rumah tangga) maupun institusional/komersial (supermarket, restoran, hotel, industri).
- Value Proposition: Harga adil bagi siswa, memotong rantai tengkulak.
RuangModal (Fintech Lending):
- Platform Peer-to-Peer (P2P) lending yang terregulasi.
- Menyediakan pembiayaan modal kerja bagi KUS yang berstatus unbanked (belum terjangkau perbankan konvensional).
DTMart (Logistik & Rantai Pasok):
- Usaha sekolah yang berfungsi sebagai pusat distribusi (distribution center).
- Mengelola pemrosesan produk, pengemasan (packaging), kontrol kualitas (QC), hingga logistik pengiriman.

B. Alur Kerja Hulu-ke-Hilir:

Permodalan: KUS mengajukan pendanaan proyek produksi melalui RuangModal.
Pendampingan: Selama produksi, KUS dibimbing oleh Trainer untuk menjaga kualitas/kuantitas.
Penyerapan & Logistik: Produk yang selesai diproduksi diserahkan ke DTMart untuk standardisasi (sortir, kemas) dan pengiriman.
Pemasaran: Produk dipasarkan di EntrepreneurHub (e-commerce RuangDagang) ke segmen retail dan komersial.

3. AUDIENS SASARAN & PERSONA RESPONS (TARGET AUDIENCES)

Anda akan berinteraksi dengan 4 tipe pengguna utama. Sesuaikan gaya bahasa dan fokus solusi Anda berdasarkan siapa yang bertanya:

A. Siswa / Kelompok Usaha Siswa (KUS)

Gaya Bahasa: Edukatif, ramah, memotivasi, mudah dipahami (hindari jargon finansial/teknis yang terlalu rumit tanpa penjelasan).
Fokus Bantuan: Cara mengajukan modal di RuangModal, tips produksi dari Trainer, cara mengirim barang ke DTMart, cara mengoptimalkan toko/produk di EntrepreneurHub.

B. Trainer / Guru Pendamping

Gaya Bahasa: Profesional, kolaboratif, dan taktis.
Fokus Bantuan: Memantau perkembangan proyek KUS bimbingannya, mengunggah laporan kualitas, dan mengoordinasikan logistik dengan DTMart.

C. Mitra Bisnis / Pembeli (B2B & B2C)

Gaya Bahasa: Profesional, formal, berorientasi pada bisnis, responsif, dan meyakinkan.
Fokus Bantuan: Cara kerja pemesanan skala besar di EntrepreneurHub, kepastian standardisasi kualitas produk oleh DTMart, dan proses transaksi/faktur.

D. Investor / Pemberi Dana (Lender di RuangModal)

Gaya Bahasa: Profesional, kredibel, analitis, dan transparan.
Fokus Bantuan: Cara menyalurkan pendanaan ke proyek KUS, analisis risiko proyek, pelaporan performa pengembalian modal.

4. PEDOMAN RESPONS & INSTRUKSI KERJA (OPERATIONAL INSTRUCTIONS)

Gunakan Pendekatan Solutif 4-Pilar: Ketika pengguna menghadapi masalah, hubungkan solusi dengan pilar yang tepat.
- Contoh: Jika KUS kehabisan modal saat pesanan melonjak, arahkan mereka ke langkah-langkah pengajuan pendanaan cepat di RuangModal.
Edukasi Kewirausahaan: Jangan hanya memberikan jawaban teknis, selipkan tips bisnis singkat yang relevan agar siswa belajar proses wirausaha yang benar (misal: pentingnya kemasan yang rapi di DTMart untuk daya tarik pasar).
Integritas Informasi: Jelaskan bahwa RuangModal adalah platform yang terregulasi demi keamanan investasi. Tekankan pula peran DTMart dalam menjaga kualitas produk demi kepuasan pembeli B2B.
Alur Eskalasi: Jika pengguna menanyakan masalah teknis yang membutuhkan intervensi sistem (seperti dana belum cair, barang rusak saat pengiriman, atau akun terkunci), berikan panduan langkah awal lalu arahkan untuk menghubungi tim admin/layanan pelanggan resmi RuangDagang.

5. CONTOH SKENARIO & CARA MERESPONS (INTERACTION EXAMPLES)

Skenario 1: Siswa KUS bertanya tentang modal usaha

Pengguna (KUS): "Kak, KUS kami dapat pesanan 100 boks kue kering dari hotel, tapi kami kekurangan modal untuk beli bahan baku. Gimana ya?"
Respons RD-Assistant (Kategori: KUS):
"Wah, selamat ya untuk KUS kalian! Mendapat pesanan 100 boks dari hotel adalah pencapaian luar biasa. Jangan khawatir soal modal, ekosistem RuangDagang punya solusinya melalui RuangModal.
Berikut langkah mudah yang bisa kalian lakukan:
1. Ajukan Pendanaan: Masuk ke menu RuangModal di aplikasi ini, lalu ajukan pendanaan proyek pembuatan kue kering tersebut dengan melampirkan bukti pesanan (Purchase Order) dari pihak hotel.
2. Konsultasi dengan Trainer: Diskusikan kebutuhan modal ini dengan Trainer pendamping kalian agar rincian biaya bahan baku yang diajukan sudah tepat dan efisien.
3. Penyaluran Modal: Setelah disetujui, modal kerja akan segera disalurkan agar kalian bisa langsung mulai berproduksi.
Setelah produksi selesai, jangan lupa koordinasikan dengan DTMart untuk proses pengemasan standar hotel dan pengiriman tepat waktu, ya. Tetap semangat berwirausaha!"

Skenario 2: Mitra Bisnis (B2B) bertanya tentang jaminan kualitas

Pengguna (Restoran): "Saya ingin memesan bahan pangan dari KUS RuangDagang secara berkala, tapi bagaimana jaminan kualitas dan kontinuitas pengirimannya?"
Respons RD-Assistant (Kategori: Mitra Bisnis):
"Terima kasih atas minat Bapak/Ibu untuk bermitra dengan Kelompok Usaha Siswa (KUS) kami. Di RuangDagang Double Track, kami menjamin kualitas dan kelancaran pasokan melalui pilar DTMart (Logistik & Rantai Pasok).
Berikut komitmen layanan kami:
1. Standardisasi Mutu: Setiap produk KUS tidak langsung dikirim ke pembeli, melainkan masuk ke pusat distribusi DTMart terlebih dahulu untuk melewati proses kontrol kualitas (Quality Control), pemrosesan, dan pengemasan standar industri.
2. Pendampingan Ahli: Selama proses produksi di hulu, para siswa didampingi oleh Trainer profesional untuk memastikan konsistensi rasa, ukuran, dan higienitas produk.
3. Logistik Terintegrasi: DTMart mengelola rantai pasok secara terpusat untuk memastikan pengiriman ke restoran Bapak/Ibu tepat waktu dan dalam kondisi prima.
Bapak/Ibu dapat melakukan transaksi dengan aman dan transparan melalui platform B2B EntrepreneurHub kami. Apakah ada produk spesifik yang sedang Bapak/Ibu butuhkan saat ini?"

6. BATASAN AI (LIMITATIONS)

Jangan memberikan komitmen persetujuan pendanaan secara sepihak. Katakan bahwa keputusan akhir berada pada proses verifikasi dokumen di sistem RuangModal.
Jika ditanya mengenai transaksi di luar sistem RuangDagang, ingatkan pengguna untuk selalu bertransaksi di dalam ekosistem demi keamanan, keadilan harga, dan pencatatan performa bisnis KUS yang akurat.
Selalu gunakan Bahasa Indonesia yang baik, sopan, dan santun. Gunakan sapaan yang sesuai (seperti "Adik-adik KUS" atau "Teman-teman KUS" untuk siswa, "Bapak/Ibu" untuk Trainer/Mitra/Investor).

Digital Skills

Fajar Baskoro 15:54 Add Comment

Fajar Baskoro

Buatkan infografis. DigitalSkill by Double Track merupakan pilar utama dari kategori layanan Lifelong Learning (pembelajaran sepanjang hayat) dalam ekosistem produk Double Track. DigitalSkill dirancang khusus sebagai platform pelatihan daring dan luring bersertifikat untuk meningkatkan kompetensi profesional, siswa SMA, pencari kerja, maupun pelaku usaha. Berikut adalah rincian komponen utama yang membentuk ekosistem aplikasi DigitalSkill : 1. Kategori Pelatihan & Pengembangan Skill Materi pembelajaran di dalam aplikasi dikelompokkan ke dalam berbagai industri yang relevan dengan kebutuhan pasar kerja modern:Teknologi & Data: Mencakup kelas coding, pemrograman Python, penguasaan kecerdasan buatan (AI), hingga Data Analytics.Bisnis & Pemasaran: Pelatihan strategis seperti Digital Marketing, Copywriting, manajemen SEO, hingga cara berjualan di marketplace.Pengembangan Diri & Karir: Kelas persiapan kerja, pembuatan CV, teknik wawancara, hingga penguasaan kemampuan soft skills.Kewirausahaan: Panduan langkah demi langkah untuk memulai, mengelola, dan menaikkan pendapatan dari usaha mandiri. 2. Jalur Pembelajaran & Metode Program Ekosistem ini menyediakan fleksibilitas metode belajar demi efektivitas penyerapan materi:Self-Paced Learning (SPL): Pembelajaran mandiri menggunakan video animasi berkualitas tinggi, materi bacaan, dan latihan soal yang dapat diakses kapan saja. Live Webinar & Bootcamp: Kelas interaktif terjadwal bersama instruktur serta program bootcamp intensif (seperti AI Bootcamp) selama beberapa bulan.Kelas Luring (Tatap Muka): Pelatihan fisik secara langsung di berbagai lokasi pelatihan sekolah-sekolah di Jawa Timur. 3. Sistem Sertifikasi & Penilaian Setiap kelas dilengkapi dengan standar kelulusan yang ketat untuk menjaga kualitas:Progress Tracking: Menampilkan persentase kemajuan belajar hingga mencapai 100%.Ujian & Tugas Mandiri: Evaluasi berupa kuis, ujian akhir, maupun tugas praktik mandiri yang diperiksa oleh tim penilai.Sertifikat Elektronik: Penerbitan sertifikat resmi yang diakui secara luas sebagai referensi valid saat melamar pekerjaan. 4. Jaringan Trainer Expert Kurikulum yang diajarkan dirancang langsung oleh para praktisi dan Traineri yang berpengalaman. Hal ini memastikan portofolio dan proyek yang dikerjakan siswa berbasis kebutuhan industri nyata (hands-on project).

Ruang Dagang

Fajar Baskoro 15:24 Add Comment

Fajar Baskoro

Buatkan Infografis. RuangDagang Double Track adalah integrasi teknologi student e-commerce dari hulu ke hilir yang dirancang untuk kewirausahaan siswa Program Double Track, menghubungkan Kelompok Usaha Siswa-KUS langsung ke pasar, serta menyediakan akses permodalan. Berdiri sejak tahun 2019, startup ini membangun ekosistem digital terintegrasi yang melibatkan para siswa SMA yang tergabung dalam Program Double Track, mitra bisnis DUDI, hingga konsumen akhir. Pilar Utama Ekosistem RuangDagang Double Track Struktur operasional RuangDagang Double Track ditopang oleh tiga pilar bisnis utama:EntrepreneurHub (E-commerce B2B & B2C): Platform lokapasar digital yang mempertemukan Kelompok Usaha Siswa dengan pembeli institusional seperti supermarket, restoran, hotel, industri, hingga konsumen skala rumah tangga. Melalui platform ini, KUS bisa menjual hasil produksinya dengan harga adil tanpa melalui jaringan tengkulak yang panjang. RuangModal (Fintech Lending): Platform peer-to-peer (P2P) lending terregulasi yang memfasilitasi pembiayaan dan modal kerja bagi para kelompok usaha siswa yang belum terjangkau oleh layanan perbankan konvensional (unbanked). DTMart (Logistik & Rantai Pasok): Usaha Sekolah yang mengelola manajemen rantai pasok produk hasil pelatihan Double Track sebagai pusat distribusi (distribution center), fasilitas pemrosesan produk, pengemasan hingga pengiriman logistik guna menjaga kualitas produk tetap baik hingga ke tangan pembeli. Alur Kerja Ekosistem RuangDagang Sinergi ekosistem ini bekerja dalam sebuah siklus terpadu: Permodalan: KUS mengajukan pendanaan proyek pembuatan produk melalui aplikasi RuangModal. Pendampingan: Selama masa produksi, tim Trainer memberikan panduan teknis guna memaksimalkan kualitas dan kuantitas produk. Penyerapan & Logistik: Hasil produksi dikelola langsung oleh DTMart untuk disortir, dikemas, hingga siap didistribusikan. Pemasaran: Produk pangan dipasarkan melalui e-commerce RuangDagang menuju berbagai segmen pasar komersial dan retail

https://www.padusi.id/gojek-dan-tokopedia-bentuk-goto-15638/

https://www.padusi.id/wayahe-kopi-134621/

Magang DT 1

Fajar Baskoro 03:09 Add Comment

Fajar Baskoro

https://www.youtube.com/watch?v=NfWg75AAKlA

https://dindik.jatimprov.go.id/news-detail/1136/keberhasilan-program-double-track-dampingi-sekolah-hingga-peroleh-legalitas-produk

Panduan Deploy

Panduan Deployment: Landing Page Magang DT

Double Track Internship Program — Dinas Pendidikan Provinsi Jawa Timur & ITS Surabaya

Dokumen ini berisi panduan langkah-demi-langkah untuk melakukan kompilasi (build) dan penyebaran (deployment) berkas single-file React App.jsx ke berbagai platform cloud hosting modern secara gratis dan efisien.

🛠️ Prasyarat Teknis (Prerequisites)

Sebelum memulai, pastikan Anda telah menginstal beberapa alat pendukung berikut di komputer lokal Anda:

Node.js (Versi minimal 18.x LTS) & npm (atau yarn / pnpm).
Git (untuk version control dan integrasi CI/CD).
Akun di salah satu platform hosting (Vercel, Netlify, atau GitHub).

💻 Langkah 1: Setup Proyek Lokal (Vite + Tailwind)

Sistem landing page ini menggunakan React 18+, Tailwind CSS, dan Lucide Icons. Ikuti langkah berikut untuk membuat repositori lokal:

Inisialisasi Proyek React dengan Vite:

npm create vite@latest magang-dt -- --template react
cd magang-dt

Instalasi Dependencies Utama:

npm install lucide-react
npm install -D tailwindcss postcss autoprefixer

Inisialisasi Konfigurasi Tailwind:
```
npx tailwindcss init -p
```

Konfigurasi Tailwind CSS (tailwind.config.js): Sesuaikan bagian content agar dapat membaca kelas Tailwind di berkas React:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      animation: {
        'spin-slow': 'spin 12s linear infinite',
        'marquee': 'marquee 25s linear infinite',
      },
      keyframes: {
        marquee: {
          '0%': { transform: 'translateX(0%)' },
          '100%': { transform: 'translateX(-50%)' },
        }
      }
    },
  },
  plugins: [],
}

Hubungkan Tailwind ke CSS Utama (src/index.css): Ganti seluruh isi berkas src/index.css dengan baris berikut:

@tailwindcss base;
@tailwindcss components;
@tailwindcss utilities;

html {
  scroll-behavior: smooth;
}

/* Custom Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

Salin Kode Utama: Ganti isi berkas src/App.jsx dengan seluruh kode React yang telah diperbarui sebelumnya.
Uji Coba di Server Lokal:
```
npm run dev
```
Buka http://localhost:5173 di browser Anda untuk memastikan landing page berjalan dengan sempurna.

🚀 Langkah 2: Opsi Deployment

Opsi A: Deploy ke Vercel (Tercepat & Sangat Direkomendasikan)

Vercel adalah platform terbaik untuk aplikasi berbasis Vite karena prosesnya yang instan dan memiliki sistem optimasi CDN otomatis.

Hubungkan proyek lokal Anda ke repositori GitHub, GitLab, atau Bitbucket.
Masuk ke Vercel Dashboard.
Klik tombol "Add New" > "Project".
Impor repositori GitHub proyek magang-dt Anda.
Pada bagian Framework Preset, pilih Vite.
Klik "Deploy". Proyek Anda akan aktif dalam waktu kurang dari 1 menit!

Opsi B: Deploy ke Netlify

Netlify sangat andal untuk mendistribusikan situs web statis (Single Page Application) dengan konfigurasi minimal.

Pastikan proyek Anda telah diunggah ke GitHub.
Masuk ke Netlify Dashboard.
Klik "Add new site" > "Import an existing project".
Pilih penyedia Git Anda (misal: GitHub) dan pilih repositori magang-dt.
Atur parameter build berikut:
- Build command: npm run build
- Publish directory: dist
Klik "Deploy site".

⚠️ Catatan Penting untuk React Router (jika digunakan nanti): Agar rute URL tidak menghasilkan error 404 saat halaman di-refresh, buat berkas bernama _redirects di dalam folder public/ dengan isi:
/* /index.html   200

Opsi C: Deploy ke GitHub Pages

Jika Anda ingin memanfaatkan hosting gratis langsung dari repositori GitHub organisasi Anda:

Instal package GitHub Pages di proyek Anda:
```
npm install gh-pages --save-dev
```
Tambahkan properti homepage di berkas package.json:
```
"homepage": "https://username_github.github.io/nama-repositori",
```
(Ganti username_github dan nama-repositori sesuai akun & repositori Anda).

Tambahkan skrip build & deploy pada bagian scripts di package.json:

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d dist",
  ...
}

Jalankan perintah deploy:
```
npm run deploy
```

🌐 Langkah 3: Integrasi Domain Custom (`plusk.online`)

Jika Anda ingin mengarahkan landing page ini ke subdomain atau domain utama seperti https://plusk.online/ atau https://magang.plusk.online/:

Melalui Vercel / Netlify (Sangat Mudah):

Masuk ke pengaturan proyek di dashboard Vercel/Netlify Anda.
Pilih menu "Domains" / "Domain Management".
Masukkan domain/subdomain baru Anda (misal: magang.plusk.online).
Sistem akan meminta Anda untuk menambahkan konfigurasi DNS pada DNS Zone provider domain Anda:
- Untuk Subdomain: Buat record CNAME baru yang mengarah ke alamat host server hosting (contoh CNAME target Vercel: cname.vercel-dns.com).
- Untuk Domain Utama: Tambahkan record A yang mengarah ke IP Server Vercel/Netlify.

Melalui Server Mandiri (cPanel / VPS):

Jika Anda ingin melakukan build mandiri dan meletakkannya di hosting konvensional:

Jalankan proses kompilasi lokal:
```
npm run build
```
Perintah di atas akan menghasilkan folder bernama /dist yang berisi kode HTML, CSS, dan JS yang telah dikompresi secara maksimal (production-ready).
Kompres seluruh file di dalam folder /dist tersebut menjadi format .zip.
Unggah berkas .zip tersebut ke File Manager cPanel Anda pada direktori target (biasanya public_html atau direktori subdomain terkait).
Ekstrak berkas tersebut dan pastikan berkas index.html berada tepat di root direktori domain Anda.

🔒 Langkah 4: SSL & Security Checklist

HTTPS (SSL): Pastikan sertifikat SSL (Let's Encrypt / Cloudflare SSL) dalam kondisi aktif demi keamanan pertukaran data siswa. Jika menggunakan Vercel atau Netlify, SSL sudah terpasang secara otomatis dan gratis.
API Endpoint Security: Jika sistem ini nantinya dikoneksikan ke basis data eksternal (API SIAPkerja / Double Track), simpan seluruh kredensial API Key di dalam berkas .env dan jangan pernah mengunggah berkas .env tersebut ke repositori publik GitHub.

Kode

import React, { useState, useEffect } from 'react';

import {

Briefcase,

Users,

Building,

Award,

CheckCircle,

ChevronRight,

ChevronDown,

ChevronUp,

Shield,

BookOpen,

Compass,

Target,

MessageSquare,

ArrowRight,

Smartphone,

Search,

ClipboardList,

Tv,

TrendingUp,

FileCheck,

ChevronLeft,

UserCheck,

Globe,

MapPin,

ExternalLink,

Zap,

Star,

Sparkles,

Info,

Layers,

GraduationCap

} from 'lucide-react';

// HIGH FIDELITY INLINE SVG LOGO SMA DOUBLE TRACK

function DoubleTrackLogo({ className = "w-10 h-10" }) {

return (

{/* Blue main crescent wave */}

<path

d="M12 42 C 16 75, 48 83, 85 62 C 54 78, 22 68, 17 47 Z"

fill="#005BFF"

{/* Yellow support crescent wave */}

<path

d="M11 48 C 11 84, 38 94, 65 92 C 38 88, 22 78, 17 58 Z"

fill="#FFC928"

{/* Colorful sun/burst petals representing diverse skills */}

{/* 1. Purple Petal */}

{/* 2. Teal/Cyan Petal */}

{/* 3. Pink/Red Petal */}

{/* 4. Orange Petal */}

{/* 5. Green Petal */}

</svg>

);

}

// INLINE SVG LOGO DINAS PENDIDIKAN JAWA TIMUR

function LogoDispendikJatim({ className = "w-8 h-8" }) {

return (

</svg>

);

}

// INLINE SVG LOGO ITS

function LogoITS({ className = "w-8 h-8" }) {

return (

{/* Gear teeth */}

{[0, 45, 90, 135, 180, 225, 270, 315].map((angle, i) => (

<rect

key={i}

x="45"

y="2"

width="10"

height="12"

fill="#00C2FF"

transform={`rotate(${angle} 50 50)`}

rx="2"

))}

{/* Stylized flame / flower petals */}

</svg>

);

}

export default function App() {

const [activeTab, setActiveTab] = useState('beranda');

const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

const [activeStep, setActiveStep] = useState(0);

const [counts, setCounts] = useState({ participants: 0, partners: 0, satisfaction: 0, provinces: 0 });

const [faqOpen, setFaqOpen] = useState({});

const [currentTestimonial, setCurrentTestimonial] = useState(0);

const [simulatedFilter, setSimulatedFilter] = useState('Semua');

const [searchQuery, setSearchQuery] = useState('');

// Counter stats animation

useEffect(() => {

const duration = 2000;

const steps = 50;

const stepTime = duration / steps;

let step = 0;

const timer = setInterval(() => {

step++;

setCounts({

participants: Math.min(Math.floor((5000 / steps) * step), 5000),

partners: Math.min(Math.floor((1000 / steps) * step), 1000),

satisfaction: Math.min(Math.floor((95 / steps) * step), 95),

provinces: Math.min(Math.floor((34 / steps) * step), 34)

});

if (step >= steps) {

clearInterval(timer);

}

}, stepTime);

return () => clearInterval(timer);

}, []);

const toggleFaq = (index) => {

setFaqOpen(prev => ({ ...prev, [index]: !prev[index] }));

};

const stepsData = [

{

title: "Pendaftaran SIAPkerja",

desc: "Lakukan registrasi profil lengkap di ekosistem platform resmi Kementerian Ketenagakerjaan.",

icon: <UserCheck className="w-6 h-6" />,

detail: "Pastikan kelengkapan berkas CV, sertifikat kompetensi Double Track Jawa Timur, serta data portofolio terunggah dengan sempurna."

{

title: "Cari & Pilih Lowongan",

desc: "Temukan ratusan opsi posisi magang terbaik yang sesuai dengan spesialisasi keahlianmu.",

icon: <Search className="w-6 h-6" />,

detail: "Sistem filter pintar kami membantu mencocokkan minatmu dengan kebutuhan industri digital masa kini secara presisi."

{

title: "Seleksi & Interview",

desc: "Ikuti proses assessment kompetensi dasar serta wawancara langsung bersama tim HR mitra.",

icon: <ClipboardList className="w-6 h-6" />,

detail: "Dapatkan tips persiapan wawancara eksklusif dari mentor internal Magang DT agar kamu lebih percaya diri."

{

title: "Pelaksanaan Magang",

desc: "Mulai petualangan karir nyatamu di industri dengan pendampingan mentor profesional harian.",

icon: <Tv className="w-6 h-6" />,

detail: "Kerjakan proyek nyata yang berdampak langsung pada operasional perusahaan mitra selama durasi pemagangan."

{

title: "Evaluasi & Sertifikasi",

desc: "Penilaian kinerja berkala serta penerimaan Sertifikat Resmi kompetensi Double Track.",

icon: <Award className="w-6 h-6" />,

detail: "Sertifikat digital terverifikasi Dinas Pendidikan & ITS yang siap mendongkrak reputasi profesionalmu di pasar kerja global."

{

title: "Karir & Pengembangan",

desc: "Peluang rekrutmen langsung (pensiun magang) atau penyaluran ke jaringan korporasi utama.",

icon: <TrendingUp className="w-6 h-6" />,

detail: "Alumni Magang DT mendapatkan prioritas utama dalam bursa kerja ekosistem mitra nasional kami."

}

];

const lowonganMock = [

{ id: 1, title: 'Frontend Developer Intern', comp: 'BUMN Tech Division', category: 'IT & Software', loc: 'Surabaya (Hybrid)', logo: '⚡' },

{ id: 2, title: 'Digital Marketing Specialist', comp: 'Astra Digital Network', category: 'Marketing', loc: 'Malang (On-site)', logo: '🚗' },

{ id: 3, title: 'UI/UX Product Designer', comp: 'Telkom Indonesia', category: 'Design', loc: 'Bandung (Remote)', logo: '📞' },

{ id: 4, title: 'Data Analytics Associate', comp: 'Bank Mandiri Tech', category: 'Data Science', loc: 'Jakarta (On-site)', logo: '🏦' },

{ id: 5, title: 'Cyber Security Analyst', comp: 'Pertamina Digital', category: 'IT & Software', loc: 'Gresik (Hybrid)', logo: '🔥' },

{ id: 6, title: 'Content Creator Strategist', comp: 'Indosat Ooredoo Hutchison', category: 'Marketing', loc: 'Remote', logo: '📱' },

];

const testimonials = [

{

quote: "Magang DT mengubah cara pandang saya tentang dunia kerja. Berbekal keterampilan praktis dari SMA Double Track, saya langsung dihadapkan pada project scale-up nyata bersama senior developer yang sangat suportif.",

role: "Alumni Double Track & Now Fullstack Dev di Telkom",

avatar: "👨‍💻",

rating: 5,

badge: "Alumni Sukses"

{

quote: "Kualitas lulusan SMA Double Track di program Magang DT sangat memuaskan. Mereka memiliki kesiapan kerja yang matang, bermental tangguh, dan menguasai hard-skill digital mumpuni.",

role: "VP of People & Talent di Astra Digital Network",

avatar: "👩‍💼",

rating: 5,

badge: "HR Recruiter"

{

quote: "Kerja sama Dinas Pendidikan Jatim dan ITS menghasilkan modul magang yang sangat presisi. Peserta dibekali keahlian adaptif yang langsung siap pakai di industri modern.",

role: "Tenaga Ahli ITS & Supervisor Akademik Magang DT",

avatar: "👨‍🏫",

rating: 5,

badge: "Mentor Akademis"

}

];

const filteredJobs = lowonganMock.filter(job => {

const matchesFilter = simulatedFilter === 'Semua' || job.category === simulatedFilter;

const matchesSearch = job.title.toLowerCase().includes(searchQuery.toLowerCase()) || job.comp.toLowerCase().includes(searchQuery.toLowerCase());

return matchesFilter && matchesSearch;

});

return (

// BRANDING COLOR REWRITE: Using elegant modern light backdrop with clean corporate styling and rich shadows

{/* SOFT COMPLEMENTARY PASTEL BACKGROUND GLOWS FOR BRIGHT THEME */}

{/* Soft Modern Grid Pattern for Light Mode */}

</div>

{/* FLOATING LIGHT GLASSMORPHISM NAVBAR */}

{/* Logo Section - High Fidelity Integration */}

<div>

<div className="text-[10px] font-black tracking-widest text-[#FF8A00]">SMA DOUBLE TRACK</div>

MAGANG DT <span className="text-[9px] bg-[#005BFF]/10 text-[#005BFF] px-1.5 py-0.2 rounded-full border border-[#005BFF]/20">JATIM</span>

</div>

{/* Desktop Navigation - Darker Slate for High Contrast on Light Background */}

<a href="#beranda" className="text-slate-600 hover:text-[#005BFF] font-bold text-sm transition-colors duration-200">Beranda</a>

<a href="#tentang" className="text-slate-600 hover:text-[#005BFF] font-bold text-sm transition-colors duration-200">Tentang</a>

<a href="#keunggulan" className="text-slate-600 hover:text-[#005BFF] font-bold text-sm transition-colors duration-200">Keunggulan</a>

<a href="#alur" className="text-slate-600 hover:text-[#005BFF] font-bold text-sm transition-colors duration-200">Alur Magang</a>

<a href="#mitra" className="text-slate-600 hover:text-[#005BFF] font-bold text-sm transition-colors duration-200">Mitra</a>

</div>

{/* Action Buttons & Partner Logos */}

<span className="text-[9px] uppercase tracking-wider text-slate-500 font-bold block text-right">Diselenggarakan<br/>Oleh Jatim & ITS</span>

</div>

href="https://www.plusk.online/"

target="_blank"

rel="noopener noreferrer"

className="px-5 py-2.5 rounded-xl bg-gradient-to-r from-[#005BFF] to-[#00C2FF] text-white font-bold text-sm shadow-[0_4px_20px_rgba(0,91,255,0.25)] hover:shadow-[0_4px_25px_rgba(0,194,255,0.4)] hover:-translate-y-0.5 transition-all duration-200"

DAFTAR SEKARANG

</a>

</div>

{/* Mobile Menu Button */}

<button

onClick={() => setMobileMenuOpen(!mobileMenuOpen)}

className="lg:hidden p-2 text-slate-600 hover:text-slate-900 transition-colors duration-200"

aria-label="Toggle Menu"

</div>

</button>

</nav>

{/* Mobile Dropdown Menu */}

{mobileMenuOpen && (

<a onClick={() => setMobileMenuOpen(false)} href="#beranda" className="text-slate-700 hover:text-[#005BFF] py-2 border-b border-slate-100 font-bold text-base">Beranda</a>

<a onClick={() => setMobileMenuOpen(false)} href="#tentang" className="text-slate-700 hover:text-[#005BFF] py-2 border-b border-slate-100 font-bold text-base">Tentang</a>

<a onClick={() => setMobileMenuOpen(false)} href="#keunggulan" className="text-slate-700 hover:text-[#005BFF] py-2 border-b border-slate-100 font-bold text-base">Keunggulan</a>

<a onClick={() => setMobileMenuOpen(false)} href="#alur" className="text-slate-700 hover:text-[#005BFF] py-2 border-b border-slate-100 font-bold text-base">Alur Magang</a>

<a onClick={() => setMobileMenuOpen(false)} href="#mitra" className="text-slate-700 hover:text-[#005BFF] py-2 border-b border-slate-100 font-bold text-base">Mitra</a>

<a onClick={() => setMobileMenuOpen(false)} href="#faq" className="text-slate-700 hover:text-[#005BFF] py-2 border-b border-slate-100 font-bold text-base">FAQ</a>

<span>Diselenggarakan oleh:</span>

</div>

href="https://www.plusk.online/"

target="_blank"

rel="noopener noreferrer"

className="w-full text-center py-3 rounded-xl bg-gradient-to-r from-[#005BFF] to-[#00C2FF] text-white font-bold text-sm shadow-lg hover:shadow-cyan-500/30"

DAFTAR SEKARANG

</a>

</div>

)}

</header>

{/* HERO SECTION */}

{/* Hero Left Content */}

{/* Organized by Badges - Showcasing official authority with the logo colors */}

<span>Dispendik Jatim</span>

</div>

<span>ITS Surabaya</span>

</div>

<span>Official Program</span>

</div>

MAGANG <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#005BFF] via-[#00C2FF] to-[#FF8A00] drop-shadow-[0_2px_15px_rgba(0,194,255,0.15)]">DT</span>

</h1>

</div>

Program Pemagangan Nasional Berbasis Keterampilan Digital SMA Double Track

</h2>

“Dari Pendidikan → Pengalaman Nyata → Karir Gemilang”

</p>

Menghubungkan siswa dan alumni SMA Double Track dengan dunia industri secara nyata. Dapatkan pelatihan keterampilan mutakhir, pendampingan mentor andal, serta sertifikasi resmi dari Dinas Pendidikan Jatim & ITS.

</p>

</div>

{/* CTA Buttons */}

href="https://www.plusk.online/"

target="_blank"

rel="noopener noreferrer"

className="w-full sm:w-auto px-8 py-4 rounded-xl bg-gradient-to-r from-[#005BFF] to-[#00C2FF] text-white font-black text-sm tracking-wide shadow-[0_6px_25px_rgba(0,91,255,0.25)] hover:shadow-[0_6px_30px_rgba(0,194,255,0.45)] hover:-translate-y-0.5 transition-all duration-200 flex items-center justify-center gap-2 group"

<span>DAFTAR SEKARANG</span>

</a>

href="#dashboard"

className="w-full sm:w-auto px-8 py-4 rounded-xl bg-white hover:bg-slate-50 border border-slate-200 text-slate-700 font-bold text-sm tracking-wide transition-all duration-200 flex items-center justify-center gap-2 shadow-sm"

<span>LIHAT LOWONGAN</span>

</a>

</div>

{/* Statistics Dashboard - Clean Bright Styled Counter */}

<div className="text-2xl sm:text-3xl font-black text-slate-900">{counts.participants.toLocaleString()}+</div>

<div className="text-xs text-slate-500 font-bold uppercase tracking-wide">Peserta Aktif</div>

</div>

<div className="text-2xl sm:text-3xl font-black text-[#005BFF]">{counts.partners.toLocaleString()}+</div>

<div className="text-xs text-slate-500 font-bold uppercase tracking-wide">Mitra Bisnis</div>

</div>

<div className="text-2xl sm:text-3xl font-black text-[#8BC34A]">{counts.satisfaction}%</div>

<div className="text-xs text-slate-500 font-bold uppercase tracking-wide">Puas Karir</div>

</div>

<div className="text-2xl sm:text-3xl font-black text-[#FF8A00]">{counts.provinces}</div>

<div className="text-xs text-slate-500 font-bold uppercase tracking-wide">Provinsi</div>

</div>

{/* Hero Right Content (Futuristic Light Dashboard Mockup) */}

{/* Fake Browser Chrome Top Bar */}

</div>

portal.magangdt.siapkerja.go.id

</div>

</div>

{/* Simulated Live Portal Content */}

{/* Search Bar Simulation */}

<span className="text-xs font-bold uppercase tracking-wider text-slate-700">Pusat Lowongan Magang DT</span>

Live Database

</span>

</div>

<input

type="text"

value={searchQuery}

onChange={(e) => setSearchQuery(e.target.value)}

placeholder="Cari lowongan magang..."

className="w-full text-xs bg-slate-50 border border-slate-200 rounded-lg pl-10 pr-4 py-3 text-slate-800 placeholder-slate-450 focus:outline-none focus:border-[#005BFF] transition-colors"

</div>

{/* Categories */}

{['Semua', 'IT & Software', 'Marketing', 'Design', 'Data Science'].map((cat) => (

<button

key={cat}

onClick={() => setSimulatedFilter(cat)}

className={`px-3 py-1.5 rounded-lg text-xs font-bold transition-all duration-200 ${

simulatedFilter === cat

? 'bg-[#005BFF] text-white shadow-[0_4px_12px_rgba(0,91,255,0.25)]'

: 'bg-slate-100 text-slate-600 hover:text-slate-900 hover:bg-slate-200/60'

}`}

{cat}

</button>

))}

</div>

{/* Simulated Job Cards list - Light Mode styling */}

{filteredJobs.length > 0 ? (

filteredJobs.map((job) => (

<div>

<h4 className="text-xs font-black text-slate-800 group-hover:text-[#005BFF] transition-colors">{job.title}</h4>

<span className="text-[9px] bg-[#005BFF]/10 text-[#005BFF] px-1.5 py-0.5 rounded font-semibold">{job.category}</span>

</div>

href="https://www.plusk.online/"

target="_blank"

rel="noopener noreferrer"

className="px-3 py-1.5 bg-[#005BFF]/10 text-[#005BFF] text-[10px] font-bold rounded hover:bg-[#005BFF] hover:text-white transition-colors flex items-center gap-1 shadow-sm"

Lamar <ExternalLink className="w-3 h-3" />

</a>

</div>

))

) : (

Tidak menemukan lowongan yang cocok dengan kata kunci.

</div>

)}

</div>

{/* Floating Micro UI Widgets - Bright & Colored */}

<div className="text-xs font-black text-[#005BFF]">⚡ Skill Meningkat</div>

<div className="text-[9px] text-slate-500 font-semibold">Modul Praktis ITS</div>

</div>

<div className="text-xs font-black text-purple-700">💼 Pengalaman Nyata</div>

<div className="text-[9px] text-slate-500 font-semibold">Proyek Mitra Industri</div>

</div>

<div className="text-xs font-black text-[#FF8A00]">🚀 Karir Cemerlang</div>

<div className="text-[9px] text-slate-500 font-semibold">Sertifikasi & Kerja</div>

</div>

</section>

{/* SECTION APA ITU MAGANG DT */}

<h2 className="text-xs font-bold tracking-widest text-[#005BFF] uppercase">KOLABORASI DIGITAL JAWA TIMUR</h2>

<h3 className="text-3xl sm:text-4xl font-black text-slate-900">Apa Itu MAGANG DT?</h3>

MAGANG DT adalah program pemagangan nasional berbasis keterampilan digital yang dikembangkan secara integratif oleh tim ahli SMA Double Track Jawa Timur bekerja sama dengan platform SIAPkerja dan ITS Surabaya.

</p>

</div>

{/* Card 1 */}

</div>

<h4 className="text-lg font-bold text-slate-900 mb-2">Platform Resmi Pemagangan</h4>

Diintegrasikan langsung dengan SIAPkerja untuk menjamin kredibilitas hukum, kemudahan administrasi, serta ketaatan regulasi.

</p>

</div>

{/* Card 2 */}

</div>

<h4 className="text-lg font-bold text-slate-900 mb-2">Pusat Lowongan Terpadu</h4>

Akses satu pintu menuju ratusan lowongan kerja magang berkualitas tinggi dari korporasi terkemuka dan startup nasional.

</p>

</div>

{/* Card 3 */}

</div>

<h4 className="text-lg font-bold text-slate-900 mb-2">Kurikulum Terapan</h4>

Pembekalan kompetensi intensif dirancang langsung oleh akademisi ITS guna menyelaraskan keterampilan siswa dengan kebutuhan riil industri.

</p>

</div>

{/* Card 4 */}

</div>

<h4 className="text-lg font-bold text-slate-900 mb-2">Ekosistem Karir Berkelanjutan</h4>

Membantu penyusunan portofolio, prioritas bursa kerja khusus, hingga peluang rekrutmen langsung pasca program selesai.

</p>

</div>

{/* Semi isometric design infographic preview with light branding colors */}

<h4 className="text-2xl font-black text-slate-900">Hub Utama Transformasi Pendidikan Ke Karir Nyata</h4>

Siswa dan alumni SMA Double Track tidak lagi kesulitan beradaptasi dengan dunia industri asli. Melalui program kolaboratif ini, seluruh proses peningkatan kapasitas keterampilan, seleksi kualifikasi, penugasan proyek, hingga kepatuhan hukum ditangani dalam ekosistem digital yang andal dan transparan.

</p>

<span>Sistem monitoring tugas (task tracker) terintegrasi untuk memantau kemajuan magang siswa secara real-time.</span>

</div>

<span>Sistem penilaian berskala industri (KPI based evaluation) yang divalidasi oleh ITS.</span>

</div>

{/* Visual hologram infographic container - REPLACED WITH HIGH-FIDELITY USER IMAGE */}

{/* Decorative subtle glows around image */}

{/* Frame Browser UI Bar */}

</div>

<span className="text-[10px] font-black text-slate-400 tracking-wider uppercase">Magang DT Engine</span>

</div>

{/* Core Engine Screenshot Loader */}

<img

src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNMrL1pOOqyPk1PNN4dYudEPStb5VMnegVmA6voXKxBZiCBffWy7aCv8YHdjxOKfYBOutkRw3Wjzg8xoiumVlvuwEVSqGrqtXOA7-jCJSHQOpxgR5UeZjHsX-OkqoI7-_DleedDPGKO0mFQgFzknAEHwlsowmw6lwMvsKnbfG-HxlMnl43XqWkhlB3LV82/s642/Screenshot_409.png"

alt="Magang DT Core Engine"

className="w-full h-auto object-cover rounded-2xl group-hover:scale-[1.015] transition-transform duration-500 ease-out"

onError={(e) => {

// Fallback visual standard if remote hotlinking has blocks

e.target.onerror = null;

e.target.src = "https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=500&q=80";

}}

{/* Glassmorphic Overlay Panel at the bottom of Image */}

<div>

<p className="text-xs font-black text-slate-800 leading-none">Core Engine DT</p>

<p className="text-[9px] text-slate-500 font-bold mt-1">Terintegrasi SIAPkerja & ITS</p>

</div>

AKTIF

</span>

</div>

</section>

{/* SECTION TUJUAN MAGANG DT */}

{/* Quote & Description Column */}

<span className="text-xs font-bold text-[#FF8A00] uppercase tracking-widest block">TUJUAN UTAMA</span>

“Butuh pengalaman untuk kerja, tapi butuh kerja untuk mendapatkan pengalaman.”

</blockquote>

Sebuah tantangan transisi karir bagi pemuda Indonesia yang kini diselesaikan secara revolusioner oleh Magang DT. Kami bertekad menyajikan jalur persiapan karir tercepat melalui kualifikasi kurikulum berorientasi masa depan yang didukung penuh oleh Dinas Pendidikan Jawa Timur.

</p>

INFORMASI KREDIBILITAS

</div>

Setiap materi kurikulum diselaraskan langsung dengan SKKNI (Standar Kompetensi Kerja Nasional Indonesia) dan kebutuhan khusus dari mitra industri strategis SMA Double Track.

</p>

</div>

{/* Benefits Grid Column */}

<h4 className="text-base font-bold text-slate-900">Pengalaman Industri Nyata</h4>

<p className="text-xs text-slate-500 leading-relaxed font-medium">Melibatkan diri langsung dalam rantai operasional industri sesungguhnya untuk membangun cara kerja profesional yang taktis.</p>

</div>

<h4 className="text-base font-bold text-slate-900">Pelatihan Kompetensi Terarah</h4>

<p className="text-xs text-slate-500 leading-relaxed font-medium">Peningkatan kecakapan operasional berbasis modul praktis terkini di bidang IT, media, administrasi, kreatif, dan teknologi.</p>

</div>

<h4 className="text-base font-bold text-slate-900">Mentoring Profesional</h4>

<p className="text-xs text-slate-500 leading-relaxed font-medium">Sesi review tatap muka berkala dengan praktisi berpengalaman untuk mengasah kemampuan pemecahan masalah secara terukur.</p>

</div>

<h4 className="text-base font-bold text-slate-900">Sertifikat Resmi Double Track</h4>

<p className="text-xs text-slate-500 leading-relaxed font-medium">Sertifikat resmi dari Dinas Pendidikan Jatim dan ITS yang bernilai tinggi dan diakui luas oleh ratusan korporasi mitra.</p>

</div>

</section>

{/* SECTION 5 KEUNGGULAN MAGANG DT */}

<span className="text-xs font-bold text-[#FF8A00] tracking-widest uppercase block">MENGAPA KAMI BERBEDA?</span>

<h3 className="text-3xl sm:text-4xl font-black text-slate-900">5 Keunggulan MAGANG DT</h3>

Menghadirkan perlindungan hukum, standardisasi akademis ITS, serta percepatan masa depan karir secara lebih baik dibandingkan program pemagangan konvensional lainnya.

</p>

</div>

{/* Keunggulan 1 */}

</div>

<div>

<h4 className="text-lg font-black text-slate-900 group-hover:text-[#005BFF] transition-colors">1. LEGAL DAN DILINDUNGI REKOR RESMI KEMNAKER</h4>

Setiap keikutsertaan peserta dijamin penuh oleh regulasi hukum pemagangan ketenagakerjaan nasional. Proses yang aman, transparan, dan terstruktur bagi keselamatan serta kenyamanan belajar peserta.

</p>

</div>

<span className="text-xs font-bold px-3 py-1 rounded-full bg-blue-500/10 text-[#005BFF] shrink-0 border border-blue-500/20">Terlindungi</span>

</div>

{/* Keunggulan 2 */}

</div>

<div>

<h4 className="text-lg font-black text-slate-900 group-hover:text-cyan-600 transition-colors">2. KURIKULUM BERBASIS KOMPETENSI RIIL & DIUJI ITS</h4>

Materi dan program pembelajaran dirancang oleh pakar teknologi startup bersama akademisi Institut Teknologi Sepuluh Nopember (ITS) untuk memastikan keselarasan penuh dengan kebutuhan industri masa kini.

</p>

</div>

<span className="text-xs font-bold px-3 py-1 rounded-full bg-cyan-500/10 text-cyan-700 shrink-0 border border-cyan-500/20">Tervalidasi</span>

</div>

{/* Keunggulan 3 */}

</div>

<div>

<h4 className="text-lg font-black text-slate-900 group-hover:text-[#FF8A00] transition-colors">3. AKSES PERUSAHAAN BESAR & MITRA BUMN</h4>

Akses jalur khusus tanpa hambatan birokrasi berbelit untuk melamar kerja magang pada jajaran institusi BUMN, korporasi terkemuka, dan agensi kreatif di seluruh Indonesia.

</p>

</div>

<span className="text-xs font-bold px-3 py-1 rounded-full bg-[#FFC928]/10 text-amber-700 shrink-0 border border-[#FFC928]/30">Prioritas</span>

</div>

{/* Keunggulan 4 */}

</div>

<div>

<h4 className="text-lg font-black text-slate-900 group-hover:text-purple-600 transition-colors">4. MENTORSHIP PROFESIONAL DAN BERKALA</h4>

Setiap peserta mendapatkan arahan langsung melalui sesi bimbingan mingguan (coaching) guna memantau perkembangan, memperbaiki kendala kerja, dan melesatkan kapasitas profesional.

</p>

</div>

<span className="text-xs font-bold px-3 py-1 rounded-full bg-purple-500/10 text-purple-700 shrink-0 border border-purple-500/20">Terbimbing</span>

</div>

{/* Keunggulan 5 */}

</div>

<div>

<h4 className="text-lg font-black text-slate-900 group-hover:text-[#8BC34A] transition-colors">5. SERTIFIKAT RESMI DINAS PENDIDIKAN JATIM & ITS</h4>

Sertifikat resmi kelulusan bertanda tangan pimpinan lembaga pendidikan tinggi dan daerah, menjamin portofolio digital yang valid di tingkat nasional maupun global.

</p>

</div>

<span className="text-xs font-bold px-3 py-1 rounded-full bg-emerald-500/10 text-[#8BC34A] shrink-0 border border-emerald-500/20">Kredibel</span>

</div>

</section>

{/* SECTION ALUR EKOSISTEM MAGANG DT */}

<span className="text-xs font-bold text-[#FF8A00] tracking-widest uppercase block">ALUR PEMAGANGAN DIGITAL</span>

<h3 className="text-3xl sm:text-4xl font-black text-slate-900">Alur Ekosistem MAGANG DT</h3>

Peta jalan transisi karir yang dirancang secara transparan dan sistematis untuk mengantarkan siswa SMA Double Track menuju industri kerja nyata.

</p>

</div>

{/* Interactive Steps Display */}

{/* Step Selector List */}

{stepsData.map((step, idx) => (

<button

key={idx}

onClick={() => setActiveStep(idx)}

className={`w-full text-left p-4 rounded-xl border transition-all duration-200 flex items-center gap-4 ${

activeStep === idx

? 'bg-gradient-to-r from-[#005BFF]/5 to-cyan-500/5 border-[#00C2FF] text-[#005BFF] shadow-lg'

: 'bg-white border-slate-200 text-slate-500 hover:text-slate-800 hover:border-slate-350'

}`}

<div className={`p-2.5 rounded-lg border transition-colors ${

activeStep === idx

? 'bg-[#005BFF] text-white border-[#005BFF]'

: 'bg-slate-50 text-slate-400 border-slate-200'

}`}>

{step.icon}

</div>

<span className="text-[10px] uppercase font-bold text-slate-400 block">Langkah 0{idx + 1}</span>

<span className="text-sm font-bold block text-slate-800">{step.title}</span>

</div>

</button>

))}

</div>

{/* Active Step Details Panel */}

Fase Aktif Seleksi

</span>

<span className="text-xs text-slate-500 font-bold">Langkah ke-{activeStep + 1} dari 6</span>

</div>

<h4 className="text-3xl font-black text-slate-900">{stepsData[activeStep].title}</h4>

{stepsData[activeStep].desc}

</p>

</div>

Detail Pelaksanaan & Output

</h5>

{stepsData[activeStep].detail}

</p>

</div>

{/* Ecosystem circular visualization */}

<div className="text-[10px] uppercase tracking-wider text-slate-400 font-bold">Ekosistem Berkelanjutan</div>

<div className="text-xs text-[#005BFF] font-bold italic">“Pengalaman → Karir → Berbagi → Tumbuh Bersama”</div>

</div>

href="https://www.plusk.online/"

target="_blank"

rel="noopener noreferrer"

className="px-5 py-2.5 bg-gradient-to-r from-[#005BFF] to-[#00C2FF] hover:from-cyan-500 hover:to-blue-600 text-white font-bold text-xs rounded-xl shadow-md transition-all"

Daftar Magang Sekarang

</a>

</div>

</section>

{/* SECTION SIAPA YANG BISA MENGIKUTI & PERSYARATAN */}

{/* Row: Target Audience Cards */}

<span className="text-xs font-bold text-[#005BFF] uppercase tracking-widest block">SIAPA YANG BISA MENGIKUTI?</span>

<h3 className="text-3xl sm:text-4xl font-black text-slate-900">Target Peserta Magang DT</h3>

Program ini didesain inklusif untuk membuka peluang seluas-luasnya bagi siswa dan alumni berbakat dari berbagai daerah.

</p>

</div>

{/* Fresh Graduate Card */}

<h4 className="text-base font-black text-slate-900 group-hover:text-[#005BFF] transition-colors">Fresh Graduate</h4>

Lulusan baru SMA/SMK/MA sederajat, khususnya alumni program Double Track Jatim yang ingin melangkah ke dunia industri.

</p>

</div>

{/* Mahasiswa Card */}

<h4 className="text-base font-black text-slate-900 group-hover:text-[#005BFF] transition-colors">Mahasiswa</h4>

Siswa didik aktif tingkat akhir yang memerlukan konversi mata pelajaran wajib berbasis magang kerja nyata bersertifikat.

</p>

</div>

{/* Career Switcher Card */}

<h4 className="text-base font-black text-slate-900 group-hover:text-amber-600 transition-colors">Career Switcher</h4>

Alumni yang ingin beralih arah dan meningkatkan keahlian baru di bidang startup digital, kreatif, maupun teknologi modern.

</p>

</div>

{/* Pencari Kerja Umum Card */}

<h4 className="text-base font-black text-slate-900 group-hover:text-purple-600 transition-colors">Pencari Kerja Umum</h4>

Pemuda berkewarganegaraan Indonesia yang membutuhkan portofolio solid untuk meningkatkan daya saing di bursa karir nasional.

</p>

</div>

{/* Row: Requirements Checklist & Steps */}

{/* Checklist Requirements */}

<span className="text-xs font-bold text-[#005BFF] uppercase tracking-widest block">PERSYARATAN UMUM</span>

<h4 className="text-2xl sm:text-3xl font-black text-slate-900">Apakah Anda Memenuhi Syarat?</h4>

Kualifikasi dirancang sederhana guna membuka akses selebar mungkin bagi kemajuan keterampilan talenta muda.

</p>

<span className="text-sm font-bold text-slate-700">Warga Negara Indonesia (WNI)</span>

</div>

<span className="text-sm font-bold text-slate-700">Berusia minimal 16 tahun pada saat mendaftar</span>

</div>

<span className="text-sm font-bold text-slate-700">Memiliki akun resmi di platform SIAPkerja Kemnaker</span>

</div>

<span className="text-sm font-bold text-slate-700">Sehat jasmani dan rohani demi kelancaran program</span>

</div>

<span className="text-sm font-bold text-slate-700">Berkomitmen menyelesaikan seluruh rangkaian program magang</span>

</div>

{/* Quick Registration Steps */}

<span className="text-xs font-bold text-[#FF8A00] uppercase tracking-widest block">CARA MENDAFTAR</span>

<h4 className="text-2xl sm:text-3xl font-black text-slate-900">3 Langkah Mudah Bergabung</h4>

Proses registrasi dilakukan sepenuhnya secara online secara cepat, efisien, dan otomatis.

</p>

</div>

<div>

<h5 className="text-base font-bold text-slate-900">Buat Akun SIAPkerja</h5>

Registrasikan data identitas pribadimu di siapkerja.kemnaker.go.id lalu pastikan verifikasi email profil berhasil tuntas.

</p>

</div>

</div>

<div>

<h5 className="text-base font-bold text-slate-900">Cari Lowongan Magang DT</h5>

Masuk ke halaman direktori pencarian lowongan, filter kategori magang digital Double Track yang kamu gemari.

</p>

</div>

</div>

<div>

<h5 className="text-base font-bold text-slate-900">Lamar & Pantau Posisi</h5>

Klik tombol lamar pada posisi pilihanmu lalu pantau dashboard secara berkala untuk panggilan tes wawancara.

</p>

</div>

</section>

{/* SECTION MANFAAT MENGIKUTI */}

<span className="text-xs font-bold text-[#FF8A00] tracking-widest uppercase block">APA YANG ANDA DAPATKAN?</span>

<h3 className="text-3xl sm:text-4xl font-black text-slate-900">Manfaat Mengikuti Magang DT</h3>

Setiap partisipan mendapatkan hak istimewa yang berfokus pada percepatan kompetensi dan peningkatan nilai tawar karir profesional.

</p>

</div>

<h4 className="text-base font-bold text-slate-900">Pengalaman Kerja Profesional</h4>

Rasakan atmosfer sesungguhnya bekerja di korporasi nasional, pahami etos kerja profesional secara komprehensif.

</p>

</div>

<h4 className="text-base font-bold text-slate-900">Peningkatan Keterampilan Industri</h4>

Asah kemampuan teknismu menggunakan perangkat dan alur kerja standar industri terkini dibimbing oleh praktisi ahli.

</p>

</div>

<h4 className="text-base font-bold text-slate-900">Networking Profesional</h4>

Bangun jejaring pertemanan bernilai tinggi bersama para pemimpin bisnis, kolega seprofesi, dan mentor berpengalaman.

</p>

</div>

<h4 className="text-base font-bold text-slate-900">Sertifikat Nasional Dinas Pendidikan & ITS</h4>

Sertifikat kredibel yang disahkan oleh akademisi ITS dan Dinas Pendidikan Jawa Timur sebagai portofolio orisinal.

</p>

</div>

<h4 className="text-base font-bold text-slate-900">Peluang Direkrut Perusahaan</h4>

Kesempatan emas menunjukkan bakat terbaik untuk langsung direkrut sebagai karyawan tetap setelah masa pemagangan usai.

</p>

</div>

<h4 className="text-base font-bold text-slate-900">Portofolio Kerja Unggulan</h4>

Isi lembar portofolio atau CV Anda dengan kontribusi proyek riil berskala nasional untuk menaikkan reputasi karir.

</p>

</div>

</section>

{/* SECTION MITRA PERUSAHAAN */}

<span className="text-xs font-bold text-[#005BFF] tracking-widest uppercase block">KORPORASI & BUMN MITRA</span>

<h3 className="text-2xl sm:text-3xl font-black text-slate-900">Telah Dipercaya Oleh 1000+ Mitra Bisnis</h3>

<p className="text-xs sm:text-sm text-slate-500 font-semibold">Jaringan penempatan magang kami tersebar di berbagai sektor industri strategis tanah air.</p>

</div>

{/* Simulated Infinite Auto Scroll Carousel - Colored styled items */}

🇮🇩 <span className="text-sm">BUMN Tech Division</span>

</div>

📞 <span className="text-sm">Telkom Indonesia</span>

</div>

🏦 <span className="text-sm">Bank Mandiri</span>

</div>

🔥 <span className="text-sm">Pertamina Digital</span>

</div>

🚗 <span className="text-sm">Astra Internasional</span>

</div>

🏦 <span className="text-sm">BRI Tech Hub</span>

</div>

</section>

{/* SECTION TESTIMONI */}

<span className="text-xs font-bold text-[#005BFF] tracking-widest uppercase block">KATA ALUMNI & HR</span>

<h3 className="text-3xl sm:text-4xl font-black text-slate-900">Kisah Sukses Pengalaman Magang DT</h3>

Ulasan jujur dari alumni berprestasi, perwakilan human resource perusahaan mitra, serta mentor profesional.

</p>

</div>

{testimonials[currentTestimonial].badge}

</span>

</div>

{testimonials[currentTestimonial].quote}

</p>

{testimonials[currentTestimonial].avatar}

</span>

<div>

<h4 className="text-base font-black text-slate-900">{testimonials[currentTestimonial].name}</h4>

<p className="text-xs text-slate-500 font-bold">{testimonials[currentTestimonial].role}</p>

</div>

{[...Array(testimonials[currentTestimonial].rating)].map((_, i) => (

))}

</div>

{/* Testimonial Nav Arrows */}

<button

onClick={() => setCurrentTestimonial(prev => prev === 0 ? testimonials.length - 1 : prev - 1)}

className="p-1.5 rounded-lg bg-slate-50 border border-slate-200 text-slate-500 hover:text-slate-900 hover:bg-slate-100"

</button>

<button

onClick={() => setCurrentTestimonial(prev => prev === testimonials.length - 1 ? 0 : prev + 1)}

className="p-1.5 rounded-lg bg-slate-50 border border-slate-200 text-slate-500 hover:text-slate-900 hover:bg-slate-100"

</button>

</div>

</section>

{/* SECTION FAQ */}

{/* FAQ Left Column */}

<span className="text-xs font-bold text-[#FF8A00] uppercase tracking-widest block">PERTANYAAN UMUM</span>

<h3 className="text-3xl sm:text-4xl font-black text-slate-900 leading-tight">Frequently Asked Questions (FAQ)</h3>

Kami merangkum sejumlah jawaban cepat atas pertanyaan populer yang sering diajukan oleh calon peserta program Magang DT.

</p>

<div>

<h4 className="text-xs font-black text-slate-800">Ada kendala teknis?</h4>

<p className="text-[11px] text-slate-500 mt-1 font-semibold">Tim Helpdesk Double Track siap melayani konsultasi interaktif harian.</p>

</div>

{/* FAQ Accordion List Column */}

{[

{

q: "Apa itu program MAGANG DT?",

a: "MAGANG DT adalah program kerja magang bersertifikat resmi berskala nasional yang dikembangkan khusus oleh tim SMA Double Track Jawa Timur bekerja sama dengan platform SIAPkerja Kemnaker RI dan diuji oleh Institut Teknologi Sepuluh Nopember (ITS)."

{

q: "Apakah pendaftaran program ini dikenakan biaya?",

a: "Sama sekali tidak. Seluruh tahapan registrasi, pelatihan kompetensi pendukung, pembekalan mentor, hingga penempatan magang bersifat 100% gratis tanpa dipungut biaya apapun."

{

q: "Berapa lama durasi pelaksanaan magang?",

a: "Durasi pemagangan bervariasi bergantung pada kebutuhan dan program dari masing-masing perusahaan mitra, umumnya berlangsung selama 3 hingga 6 bulan."

{

q: "Apakah peserta akan mendapatkan sertifikasi resmi?",

a: "Ya. Setiap peserta yang menyelesaikan program dengan kriteria baik akan mendapatkan Sertifikat Kompetensi Kerja Resmi yang dikeluarkan bersama oleh SMA Double Track, Dinas Pendidikan Jawa Timur, dan ITS."

{

q: "Bagaimana cara melakukan registrasi?",

a: "Cukup kunjungi tautan pendaftaran di portal resmi plusk.online untuk mengisi form kesiapan kerja, lalu pastikan Anda melengkapi akun profil di portal SIAPkerja Kemnaker."

}

].map((item, idx) => (

<div

key={idx}

className="bg-slate-50/80 border border-slate-200 rounded-xl overflow-hidden transition-all duration-300 hover:bg-slate-50"

<button

onClick={() => toggleFaq(idx)}

className="w-full p-5 text-left flex items-center justify-between gap-4 font-bold text-sm sm:text-base text-slate-800 hover:text-[#005BFF] transition-colors"

{faqOpen[idx] ? <ChevronUp className="w-5 h-5 text-[#005BFF] shrink-0" /> : <ChevronDown className="w-5 h-5 text-slate-400 shrink-0" />}

</button>

{faqOpen[idx] && (

{item.a}

</div>

)}

</div>

))}

</div>

</section>

{/* FUTURISTIC BRIGHT NEON FOOTER */}

{/* Glow Effects in Footer reflecting DT sun colors */}

{/* Main Footer Big Call to Action (CTA) */}

<span className="text-xs font-bold tracking-widest text-[#005BFF] uppercase block">DARI JAWA TIMUR UNTUK INDONESIA</span>

MAGANG HARI INI, SUKSES UNTUK NEGERI!

</h3>

Persiapkan masa depan karir digital Anda secara nyata di bawah bimbingan akademisi dan industri terbaik nasional.

</p>

</div>

href="https://www.plusk.online/"

target="_blank"

rel="noopener noreferrer"

className="px-8 py-4 rounded-xl bg-gradient-to-r from-[#005BFF] to-[#00C2FF] hover:from-cyan-500 hover:to-blue-600 text-white font-black text-sm sm:text-base shadow-[0_6px_25px_rgba(0,194,255,0.25)] hover:shadow-[0_6px_30px_rgba(0,194,255,0.45)] transition-all duration-200 flex items-center gap-2 group"

<span>DAFTAR & BANGUN KARIRMU SEKARANG!</span>

</a>

{/* URL Link and QR display simulation */}

www.plusk.online

</a>

</div>

Pendaftaran Online Dibuka Secara Nasional

</div>

{/* Quick Micro Icons inside big CTA */}

<span className="text-xs sm:text-sm font-bold text-slate-700 block">💼 Pengalaman Nyata</span>

</div>

<span className="text-xs sm:text-sm font-bold text-slate-700 block">⚡ Skill Meningkat</span>

</div>

<span className="text-xs sm:text-sm font-bold text-slate-700 block">👨‍🏫 Mentor Profesional</span>

</div>

<span className="text-xs sm:text-sm font-bold text-slate-700 block">🏅 Sertifikat Resmi</span>

</div>

<span className="text-xs sm:text-sm font-bold text-slate-700 block">🚀 Karir Cemerlang</span>

</div>

{/* Bottom Footer Details */}

{/* Logo and Info */}

<div>

<div className="text-xs font-bold tracking-widest text-[#FF8A00]">SMA DOUBLE TRACK</div>

<div className="text-sm font-black text-slate-900 tracking-tight -mt-1">MAGANG DT</div>

</div>

Program pemagangan nasional berbasis keahlian teknologi digital guna menyiapkan masa depan lulusan yang mandiri, adaptif, tangguh, dan kompetitif.

</p>

{/* Official Organizers Logos */}

<div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Diselenggarakan Oleh:</div>

<span className="text-[10px] font-bold text-slate-600">Dinas Pendidikan Jawa Timur</span>

<span className="text-[10px] font-bold text-slate-600">ITS Surabaya</span>

</div>

</div>

{/* Quick Links */}

<h4 className="text-sm font-black text-slate-900 uppercase tracking-wider">Tautan Cepat</h4>

<a href="#beranda" className="text-slate-500 hover:text-[#005BFF] transition-colors">Halaman Beranda</a>

<a href="#tentang" className="text-slate-500 hover:text-[#005BFF] transition-colors">Mengenal Program</a>

<a href="#keunggulan" className="text-slate-500 hover:text-[#005BFF] transition-colors">Keunggulan Utama</a>

<a href="#alur" className="text-slate-500 hover:text-[#005BFF] transition-colors">Alur Sistem Karir</a>

<a href="#mitra" className="text-slate-500 hover:text-[#005BFF] transition-colors">Mitra Korporat</a>

<a href="https://www.plusk.online/" target="_blank" rel="noopener noreferrer" className="text-slate-500 hover:text-[#005BFF] transition-colors">Portal Pendaftaran</a>

</div>

{/* Contact Info */}

<h4 className="text-sm font-black text-slate-900 uppercase tracking-wider">Hubungi Kami</h4>

<p>📍 Kantor Pusat Double Track Indonesia - Jakarta & Surabaya, Jawa Timur</p>

<p>📧 helpdesk@doubletrack.or.id</p>

<p>📞 +62 811-2345-6789 (Senin - Jumat 08:00 - 17:00 WIB)</p>

</div>

{/* Verification Barcode Mockup */}

<h4 className="text-xs font-black text-slate-900 uppercase tracking-wider text-center md:text-left">Pindai QR Pendaftaran</h4>

{/* Simulated QR Code SVG */}

</svg>

</div>

<span className="text-[10px] text-slate-400 font-bold text-center md:text-left">Terverifikasi SIAPkerja</span>

</div>

</footer>

</div>

);

}

POSTER

WEB

PROMPT SPESIFIKASI PENGEMBANGAN APLIKASI LANDING PAGE PLUSK

1. PANDUAN DESAIN VISUAL & BRANDING

2. STRUKTUR DAN TATA LETAK HALAMAN

3. LOGIKA INTERAKTIVITAS JAVASCRIPT

Master Prompt: Pembuatan Landing Page Portal Lowongan Kerja "RuangKarir" (Double Track)

1. SPESIFIKASI VISUAL & DESAIN (UI/UX)

2. STRUKTUR SEMANTIK HTML & DASHBOARD SECTIONS

3. LOGIKA JAVASCRIPT & EVENT HANDLERS (BUKAN ALERT)

4. PENATAAN CSS & METODOLOGI BEM

MASTER PROMPT: GENERATOR LANDING PAGE RUANGDAGANG DOUBLE TRACK

ROLE & CONTEXT

BACKGROUND INFORMATION (KONTEKS PRODUK)

TARGET AUDIENS LANDING PAGE

STRUKTUR LANDING PAGE YANG HARUS DIHASILKAN

1. Hero Section (Attention)

2. Social Proof / Kepercayaan (Sejak 2019)

3. Masalah & Solusi (Interest)

4. Eksplorasi 3 Pilar Utama (Desire)

5. Alur Kerja Siklus Terpadu (Sederhana & Visual)

6. Value Proposition Berdasarkan Segmen (Why Us?)

7. Footer & Call to Action Utama (Action)

OUTPUT REQUIREMENTS (FORMAT KELUARAN)

SYSTEM PROMPT: ASISTEN PINTAR RUANGDAGANG (RD-ASSISTANT)

1. IDENTITAS & PERAN (IDENTITY & ROLE)

2. PEMAHAMAN KONTEKS EKOSISTEM (ECOSYSTEM CONTEXT)

A. Pilar Utama Ekosistem:

B. Alur Kerja Hulu-ke-Hilir:

3. AUDIENS SASARAN & PERSONA RESPONS (TARGET AUDIENCES)

A. Siswa / Kelompok Usaha Siswa (KUS)

B. Trainer / Guru Pendamping

C. Mitra Bisnis / Pembeli (B2B & B2C)

D. Investor / Pemberi Dana (Lender di RuangModal)

4. PEDOMAN RESPONS & INSTRUKSI KERJA (OPERATIONAL INSTRUCTIONS)

5. CONTOH SKENARIO & CARA MERESPONS (INTERACTION EXAMPLES)

Skenario 1: Siswa KUS bertanya tentang modal usaha

Skenario 2: Mitra Bisnis (B2B) bertanya tentang jaminan kualitas

6. BATASAN AI (LIMITATIONS)

Panduan Deploy

Panduan Deployment: Landing Page Magang DT

🛠️ Prasyarat Teknis (Prerequisites)

💻 Langkah 1: Setup Proyek Lokal (Vite + Tailwind)

🚀 Langkah 2: Opsi Deployment

Opsi A: Deploy ke Vercel (Tercepat & Sangat Direkomendasikan)

Opsi B: Deploy ke Netlify

Opsi C: Deploy ke GitHub Pages

🌐 Langkah 3: Integrasi Domain Custom (plusk.online)

Melalui Vercel / Netlify (Sangat Mudah):

Melalui Server Mandiri (cPanel / VPS):

🔒 Langkah 4: SSL & Security Checklist

Kode

🌐 Langkah 3: Integrasi Domain Custom (`plusk.online`)