Buatkan desain dan kode landing page modern dan responsif berjudul
“Ruang Trainer – Double Track”.
Tujuan halaman:
Sebagai sarana belajar dan berlatih mandiri bagi peserta program pelatihan
keterampilan Double Track (siswa SMK) yang difasilitasi oleh trainer.
Karakter desain:
- Modern, profesional, dan ramah pelajar
- Responsif (mobile, tablet, desktop)
- Warna dominan biru/teal/oranye (pendidikan & produktivitas)
- Tipografi clean dan mudah dibaca
- UI/UX sederhana namun interaktif
Struktur Landing Page:
1. Hero Section
- Headline kuat:
“Ruang Trainer – Belajar Mandiri, Terarah, dan Siap Kerja”
- Subheadline:
“Platform latihan mandiri peserta Program Double Track untuk
mengasah keterampilan vokasi dan kewirausahaan”
- Tombol CTA:
[Mulai Latihan] [Masuk Ruang Trainer]
2. Tentang Ruang Trainer
- Penjelasan singkat fungsi Ruang Trainer
- Fokus pada:
• latihan mandiri
• pendampingan trainer
• penguatan skill vokasi & entrepreneur
3. Fitur Utama
Tampilkan dalam card/icon grid:
- Modul Latihan Mandiri
- Video & Materi Interaktif
- Tugas & Studi Kasus
- Evaluasi & Feedback Trainer
- Progress Belajar Peserta
4. Alur Penggunaan
Step-by-step horizontal/vertical:
1. Login Peserta
2. Pilih Kelas & Materi
3. Latihan Mandiri
4. Submit Tugas
5. Review Trainer
5. Manfaat bagi Peserta
- Meningkatkan keterampilan kerja
- Melatih kemandirian belajar
- Persiapan dunia kerja & wirausaha
- Sertifikat/rekam jejak kompetensi
6. Testimoni (Dummy)
- Kutipan peserta & trainer
- Tampilan card sederhana
7. Call To Action
- “Siap Mengasah Skill dan Jadi Lulusan Siap Kerja?”
- Tombol:
[Daftar Sekarang] [Masuk Ruang Trainer]
8. Footer
- Logo Program Double Track
- Informasi penyelenggara
- Copyright
Teknis:
- Gunakan HTML5 + CSS3
- Framework: Bootstrap 5 atau Tailwind CSS
- Gunakan komponen modern (cards, icons, buttons)
- Animasi ringan (hover, fade-in)
- Struktur kode rapi dan mudah dikembangkan
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Ruang Trainer – Double Track</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<style>
:root {
--primary: #0d6efd;
--secondary: #20c997;
--accent: #fd7e14;
}
body {
font-family: 'Segoe UI', sans-serif;
}
.hero {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff;
padding: 100px 0;
}
.btn-accent {
background-color: var(--accent);
color: #fff;
}
.btn-accent:hover {
background-color: #e96b0c;
color: #fff;
}
.icon-box {
font-size: 2.5rem;
color: var(--primary);
}
.card-hover:hover {
transform: translateY(-5px);
transition: 0.3s;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.section-padding {
padding: 80px 0;
}
footer {
background: #0b1c2d;
color: #ccc;
}
</style>
</head>
<body>
<!-- ================= HERO SECTION ================= -->
<section class="hero text-center">
<div class="container">
<h1 class="fw-bold mb-3">
Ruang Trainer – Belajar Mandiri, Terarah, dan Siap Kerja
</h1>
<p class="lead mb-4">
Platform latihan mandiri peserta Program Double Track untuk
mengasah keterampilan vokasi dan kewirausahaan
</p>
<a href="#" class="btn btn-light btn-lg me-2">Mulai Latihan</a>
<a href="#" class="btn btn-accent btn-lg">Masuk Ruang Trainer</a>
</div>
</section>
<!-- ================= TENTANG ================= -->
<section class="section-padding">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 mb-4">
<h2 class="fw-bold">Tentang Ruang Trainer</h2>
<p>
Ruang Trainer adalah sarana pembelajaran dan latihan mandiri
bagi peserta Program Double Track untuk memperkuat keterampilan
vokasi dan jiwa kewirausahaan dengan pendampingan trainer.
</p>
<ul>
<li>Latihan mandiri berbasis kompetensi</li>
<li>Pendampingan dan evaluasi trainer</li>
<li>Penguatan skill vokasi & entrepreneur</li>
</ul>
</div>
<div class="col-md-6 text-center">
<img src="https://illustrations.popsy.co/blue/studying.svg" class="img-fluid" alt="Belajar">
</div>
</div>
</div>
</section>
<!-- ================= FITUR ================= -->
<section class="bg-light section-padding">
<div class="container">
<div class="text-center mb-5">
<h2 class="fw-bold">Fitur Utama</h2>
<p>Fasilitas pembelajaran untuk mendukung latihan mandiri peserta</p>
</div>
<div class="row g-4">
<div class="col-md-4">
<div class="card card-hover h-100 text-center p-4">
<div class="icon-box mb-3"><i class="bi bi-journal-text"></i></div>
<h5>Modul Latihan Mandiri</h5>
<p>Materi terstruktur sesuai kompetensi keahlian.</p>
</div>
</div>
<div class="col-md-4">
<div class="card card-hover h-100 text-center p-4">
<div class="icon-box mb-3"><i class="bi bi-play-circle"></i></div>
<h5>Video & Materi Interaktif</h5>
<p>Pembelajaran visual yang mudah dipahami.</p>
</div>
</div>
<div class="col-md-4">
<div class="card card-hover h-100 text-center p-4">
<div class="icon-box mb-3"><i class="bi bi-clipboard-check"></i></div>
<h5>Tugas & Studi Kasus</h5>
<p>Latihan berbasis kasus dunia kerja nyata.</p>
</div>
</div>
<div class="col-md-6">
<div class="card card-hover h-100 text-center p-4">
<div class="icon-box mb-3"><i class="bi bi-chat-square-dots"></i></div>
<h5>Evaluasi & Feedback Trainer</h5>
<p>Umpan balik langsung untuk meningkatkan kompetensi.</p>
</div>
</div>
<div class="col-md-6">
<div class="card card-hover h-100 text-center p-4">
<div class="icon-box mb-3"><i class="bi bi-graph-up"></i></div>
<h5>Progress Belajar Peserta</h5>
<p>Pantau perkembangan belajar secara real-time.</p>
</div>
</div>
</div>
</div>
</section>
<!-- ================= ALUR ================= -->
<section class="section-padding">
<div class="container">
<div class="text-center mb-5">
<h2 class="fw-bold">Alur Penggunaan</h2>
</div>
<div class="row text-center g-4">
<div class="col-md-2 col-6">1️⃣<br>Login Peserta</div>
<div class="col-md-2 col-6">2️⃣<br>Pilih Kelas</div>
<div class="col-md-2 col-6">3️⃣<br>Latihan Mandiri</div>
<div class="col-md-2 col-6">4️⃣<br>Submit Tugas</div>
<div class="col-md-2 col-12">5️⃣<br>Review Trainer</div>
</div>
</div>
</section>
<!-- ================= MANFAAT ================= -->
<section class="bg-light section-padding">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6">
<h2 class="fw-bold">Manfaat bagi Peserta</h2>
<ul class="mt-3">
<li>Meningkatkan keterampilan kerja</li>
<li>Melatih kemandirian belajar</li>
<li>Persiapan dunia kerja & wirausaha</li>
<li>Sertifikat & rekam jejak kompetensi</li>
</ul>
</div>
<div class="col-md-6 text-center">
<img src="https://illustrations.popsy.co/blue/achievement.svg" class="img-fluid" alt="Manfaat">
</div>
</div>
</div>
</section>
<!-- ================= TESTIMONI ================= -->
<section class="section-padding">
<div class="container">
<div class="text-center mb-5">
<h2 class="fw-bold">Testimoni</h2>
</div>
<div class="row g-4">
<div class="col-md-6">
<div class="card p-4">
<p>“Ruang Trainer membantu saya belajar mandiri dan lebih siap kerja.”</p>
<strong>– Siswa SMK</strong>
</div>
</div>
<div class="col-md-6">
<div class="card p-4">
<p>“Monitoring progres peserta menjadi lebih mudah dan terukur.”</p>
<strong>– Trainer Double Track</strong>
</div>
</div>
</div>
</div>
</section>
<!-- ================= CTA ================= -->
<section class="hero text-center">
<div class="container">
<h2 class="fw-bold mb-3">
Siap Mengasah Skill dan Jadi Lulusan Siap Kerja?
</h2>
<a href="#" class="btn btn-light btn-lg me-2">Daftar Sekarang</a>
<a href="#" class="btn btn-accent btn-lg">Masuk Ruang Trainer</a>
</div>
</section>
<!-- ================= FOOTER ================= -->
<footer class="py-4">
<div class="container text-center">
<p class="mb-1 fw-bold">Program Double Track</p>
<p class="mb-1">Dinas Pendidikan Provinsi Jawa Timur</p>
<small>© 2025 Ruang Trainer – Double Track</small>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
🚀 TAHAP LANJUTAN (PILIH)
Paling logis setelah ini:
1️⃣ Menu Tugas & Upload (Peserta)
2️⃣ Review & Penilaian Trainer
3️⃣ Progress Bar & Nilai
4️⃣ Role-based Menu (Peserta vs Trainer)
5️⃣ Sertifikat Otomatis (PDF)
6️⃣ Refactor ke MVC (Best Practice GAS)
