SMART : Screen Machine Automation Resource Tools
Intel Skill Innovation
Axio Class Program
https://drive.google.com/file/d/1Yx2WsIpWbgy2ElZvsjpU5bmHbmLNSVW0/view
Ruang Trainer
https://sites.google.com/view/ruangtraining/home
PROMPT
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
Code
<!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>
https://docs.google.com/spreadsheets/d/1keMqtWh_2wqwSqk7cVMmTROkmZC-aQiiGQlAi1BVluI/edit?gid=0#gid=0
🚀 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)
Ruang Dagang
DoubleTrack
Update
PROMPT
Buatkan desain Landing Page aplikasi marketplace benama "Ruang Dagang" untuk menjual produk Kelompok Usaha Siswa (KUS) tingkat SMA.
Tujuan aplikasi:
Menjadi wadah digital untuk memasarkan dan menjual produk karya siswa kepada masyarakat luas secara profesional, modern, dan terpercaya.
Gaya Desain:
Responsif, Modern, edukatif, profesional
Warna cerah dan ramah (biru–hijau–oranye sebagai aksen)
Cocok untuk institusi pendidikan & UMKM siswa
Clean UI, banyak white space, mobile-first
Menggunakan bootstrap atau CDN
Struktur Landing Page:
1. Hero Section
Headline kuat dan inspiratif
“Marketplace Produk Kreatif Siswa SMK”
Subheadline:
“Dukung karya siswa lokal di bidang kuliner, fashion, kecantikan, multimedia, dan otomotif.”
Tombol CTA utama:
[Mulai Belanja] dan [Daftarkan Usaha Siswa]
Ilustrasi atau mockup aplikasi marketplace
2. Kategori Produk Unggulan
Tampilkan dalam bentuk card grid dengan ikon/ilustrasi:
🍰 Tata Boga – Makanan & Minuman Karya Siswa
👗 Tata Busana – Fashion & Jahit Kreatif
💄 Rias Kecantikan – Make Up & Perawatan
🎬 Multimedia – Desain, Video, Foto, Digital Product
🛠️ Teknik Kendaraan Bermotor – Jasa & Produk Otomotif
3. Keunggulan Aplikasi
Produk asli karya siswa
Harga terjangkau
Mendukung kewirausahaan Siwa SMA
Sistem pemesanan mudah
Terintegrasi dengan sekolah yang bernama "SMA Double Track"
4. Cara Kerja (How It Works)
Pilih Produk
Pesan & Bayar
Produk/Jasa Diproses oleh Siswa
Dikirim / Dikerjakan
5. Showcase Produk
Grid produk (gambar, nama produk, kategori, harga)
Badge: Best Seller, Produk Unggulan, Karya Siswa
6. Testimoni
Testimoni pembeli
Testimoni siswa pelaku usaha
Testimoni guru pembimbing
7. Call To Action (CTA Akhir)
“Marketplace Produk KUS Double Track”
Tombol: Gabung Sekarang / Mulai Belanja. Tombol terhubung dengan link url "www.plusk.online"
8. Footer
Tentang Aplikasi
Kategori Produk
Kontak Sekolah / Admin
Media Sosial
Tambahan Teknis:
Responsive (mobile, tablet, desktop)
SEO friendly
Loading cepat
Kompatibel PWA (opsional)
Tone Bahasa:
Inspiratif, edukatif, profesional, mudah dipahami masyarakat umum.
PROMPT 1
Buatkan google spreedsheet untuk menampung data dan foto produk. Kemudian buatkan aplikasi CRUD nya dengan model SPA, menggunakan backend google apps script. UI/UX Requirements Responsive (mobile-first) Clean layout, banyak whitespace Warna: gradient modern (biru/ putih) + background putih Font: sans modern Komponen: button besar, cards, icon, section divider Aksesibilitas: contrast bagus, ukuran font nyaman
CODE HTML
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- SEO -->
<title>Ruang Dagang — Marketplace Produk KUS SMA Double Track</title>
<meta name="description" content="Ruang Dagang adalah marketplace untuk produk Kelompok Usaha Siswa (KUS) SMA Double Track: kuliner, fashion, kecantikan, multimedia, dan otomotif. Dukung karya siswa lokal secara modern dan terpercaya." />
<meta name="keywords" content="Ruang Dagang, marketplace siswa, KUS, SMA Double Track, tata boga, tata busana, rias kecantikan, multimedia, otomotif" />
<meta name="theme-color" content="#0d6efd">
<!-- Open Graph -->
<meta property="og:title" content="Ruang Dagang — Marketplace Produk KUS SMA Double Track" />
<meta property="og:description" content="Dukung karya siswa lokal: kuliner, fashion, kecantikan, multimedia, dan otomotif." />
<meta property="og:type" content="website" />
<!-- Bootstrap CSS (CDN) -->
<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@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
<style>
:root{
--rd-blue:#0d6efd;
--rd-green:#12b981;
--rd-orange:#ff8a00;
--rd-ink:#0b1220;
--rd-muted:#6c757d;
--rd-soft:#f6f8fc;
--rd-border: rgba(14, 22, 46, 0.08);
}
body{ color: var(--rd-ink); }
.bg-soft{ background: var(--rd-soft); }
.text-muted-2{ color: var(--rd-muted); }
.rd-pill{
display:inline-flex; align-items:center; gap:.5rem;
padding:.45rem .8rem; border-radius:999px;
background:#fff; border:1px solid var(--rd-border);
box-shadow: 0 8px 30px rgba(13,110,253,.06);
font-size:.95rem;
}
.rd-hero{
position:relative;
background:
radial-gradient(1200px 500px at 10% 10%, rgba(13,110,253,.18), transparent 60%),
radial-gradient(900px 450px at 90% 20%, rgba(18,185,129,.16), transparent 60%),
radial-gradient(900px 450px at 60% 90%, rgba(255,138,0,.14), transparent 60%),
linear-gradient(180deg, #ffffff, #ffffff);
overflow:hidden;
}
.rd-card{
border:1px solid var(--rd-border);
border-radius: 18px;
box-shadow: 0 10px 30px rgba(11,18,32,.05);
}
.rd-card:hover{
transform: translateY(-2px);
transition: .2s ease;
box-shadow: 0 16px 40px rgba(11,18,32,.08);
}
.rd-icon{
width: 44px; height: 44px; border-radius: 14px;
display:grid; place-items:center;
border:1px solid var(--rd-border);
background: #fff;
}
.rd-badge{
border-radius:999px;
padding:.35rem .6rem;
border:1px solid var(--rd-border);
background:#fff;
font-size:.8rem;
display:inline-flex;
align-items:center;
gap:.35rem;
white-space:nowrap;
}
.badge-best{ border-color: rgba(255,138,0,.35); }
.badge-featured{ border-color: rgba(13,110,253,.35); }
.badge-student{ border-color: rgba(18,185,129,.35); }
.rd-mock{
border-radius: 26px;
border:1px solid var(--rd-border);
background: linear-gradient(180deg, #ffffff, #fbfcff);
box-shadow: 0 18px 60px rgba(11,18,32,.12);
overflow:hidden;
}
.rd-mock-top{
padding: 14px 16px;
border-bottom: 1px solid var(--rd-border);
display:flex; align-items:center; justify-content:space-between;
background: rgba(255,255,255,.9);
backdrop-filter: blur(8px);
}
.dot{ width:10px; height:10px; border-radius:999px; display:inline-block; margin-right:6px; }
.dot.red{ background:#ff5f56; } .dot.yellow{ background:#ffbd2e; } .dot.green{ background:#27c93f; }
.rd-product-img{
height: 170px;
border-radius: 16px;
background:
radial-gradient(120px 120px at 30% 30%, rgba(13,110,253,.25), transparent 60%),
radial-gradient(140px 140px at 70% 40%, rgba(18,185,129,.22), transparent 60%),
radial-gradient(160px 160px at 50% 80%, rgba(255,138,0,.18), transparent 60%),
linear-gradient(135deg, #f7f9ff, #ffffff);
border: 1px dashed rgba(11,18,32,.12);
display:grid; place-items:center;
color: rgba(11,18,32,.55);
font-weight:600;
}
.section-pad{ padding: 72px 0; }
.rd-footer a{ color: rgba(255,255,255,.82); text-decoration:none; }
.rd-footer a:hover{ color:#fff; text-decoration:underline; }
.navbar{
backdrop-filter: blur(10px);
background: rgba(255,255,255,.9) !important;
border-bottom: 1px solid var(--rd-border);
}
.btn-rd{
border-radius: 14px;
padding: .65rem 1rem;
}
.btn-outline-rd{
border-radius: 14px;
padding: .65rem 1rem;
border-color: rgba(13,110,253,.35);
}
</style>
<!-- Optional: JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Ruang Dagang",
"description": "Marketplace Produk Kelompok Usaha Siswa (KUS) SMA Double Track.",
"url": "https://www.plusk.online"
}
</script>
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg sticky-top">
<div class="container">
<a class="navbar-brand fw-bold d-flex align-items-center gap-2" href="#top">
<span class="rd-icon" style="border-radius:12px;">
<i class="bi bi-shop" style="color:var(--rd-blue);"></i>
</span>
<span>Ruang Dagang</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navRd" aria-controls="navRd" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navRd">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center">
<li class="nav-item"><a class="nav-link" href="#kategori">Kategori</a></li>
<li class="nav-item"><a class="nav-link" href="#keunggulan">Keunggulan</a></li>
<li class="nav-item"><a class="nav-link" href="#cara-kerja">Cara Kerja</a></li>
<li class="nav-item"><a class="nav-link" href="#produk">Produk</a></li>
<li class="nav-item"><a class="nav-link" href="#testimoni">Testimoni</a></li>
<li class="nav-item ms-lg-3">
<a class="btn btn-primary btn-rd" href="#cta-akhir">
<i class="bi bi-lightning-charge"></i> Mulai
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- HERO -->
<header id="top" class="rd-hero">
<div class="container section-pad">
<div class="row align-items-center g-5">
<div class="col-lg-6">
<div class="rd-pill mb-3">
<span class="dot green"></span>
<span><strong>KUS</strong> • SMA Double Track • Marketplace Edukasi</span>
</div>
<h1 class="display-5 fw-bold lh-sm mb-3">
Marketplace Produk Kreatif Siswa SMK
</h1>
<p class="lead text-muted-2 mb-4">
Dukung karya siswa lokal di bidang <strong>kuliner</strong>, <strong>fashion</strong>, <strong>kecantikan</strong>,
<strong>multimedia</strong>, dan <strong>otomotif</strong> — dengan pengalaman belanja yang modern, rapi, dan terpercaya.
</p>
<div class="d-flex flex-column flex-sm-row gap-2">
<a class="btn btn-primary btn-rd" href="#produk">
<i class="bi bi-bag-check"></i> Mulai Belanja
</a>
<a class="btn btn-outline-primary btn-outline-rd" href="#daftar">
<i class="bi bi-person-plus"></i> Daftarkan Usaha Siswa
</a>
</div>
<div class="mt-4 d-flex flex-wrap gap-2">
<span class="rd-badge badge-featured"><i class="bi bi-shield-check"></i> Kurasi Produk</span>
<span class="rd-badge badge-student"><i class="bi bi-mortarboard"></i> Karya Siswa</span>
<span class="rd-badge badge-best"><i class="bi bi-stars"></i> Mudah & Cepat</span>
</div>
<div class="mt-4 text-muted-2 small">
<i class="bi bi-geo-alt"></i> Terintegrasi dengan sekolah <strong>SMA Double Track</strong> • <i class="bi bi-phone"></i> Mobile-first
</div>
</div>
<div class="col-lg-6">
<!-- Mockup -->
<div class="rd-mock">
<div class="rd-mock-top">
<div class="d-flex align-items-center">
<span class="dot red"></span><span class="dot yellow"></span><span class="dot green"></span>
<span class="ms-2 small text-muted-2">Ruang Dagang — Preview</span>
</div>
<span class="rd-badge badge-featured"><i class="bi bi-phone"></i> App-like</span>
</div>
<div class="p-4">
<div class="d-flex align-items-center justify-content-between mb-3">
<div>
<div class="fw-semibold">Temukan Produk KUS</div>
<div class="small text-muted-2">Kategori lengkap • harga ramah • karya siswa</div>
</div>
<div class="rd-icon" title="Search">
<i class="bi bi-search" style="color:var(--rd-blue);"></i>
</div>
</div>
<div class="row g-3">
<div class="col-6">
<div class="p-3 rd-card h-100">
<div class="d-flex align-items-center gap-2 mb-2">
<div class="rd-icon"><span>🍰</span></div>
<div class="fw-semibold">Tata Boga</div>
</div>
<div class="small text-muted-2">Snack box, kue, catering</div>
</div>
</div>
<div class="col-6">
<div class="p-3 rd-card h-100">
<div class="d-flex align-items-center gap-2 mb-2">
<div class="rd-icon"><span>👗</span></div>
<div class="fw-semibold">Tata Busana</div>
</div>
<div class="small text-muted-2">Jahit, custom, fashion</div>
</div>
</div>
<div class="col-6">
<div class="p-3 rd-card h-100">
<div class="d-flex align-items-center gap-2 mb-2">
<div class="rd-icon"><span>💄</span></div>
<div class="fw-semibold">Kecantikan</div>
</div>
<div class="small text-muted-2">Make-up & perawatan</div>
</div>
</div>
<div class="col-6">
<div class="p-3 rd-card h-100">
<div class="d-flex align-items-center gap-2 mb-2">
<div class="rd-icon"><span>🛠️</span></div>
<div class="fw-semibold">Otomotif</div>
</div>
<div class="small text-muted-2">Jasa & produk bengkel</div>
</div>
</div>
</div>
<div class="mt-4 p-3 rd-card bg-soft">
<div class="d-flex align-items-start gap-3">
<div class="rd-icon"><i class="bi bi-award" style="color:var(--rd-orange);"></i></div>
<div>
<div class="fw-semibold">Badge “Karya Siswa”</div>
<div class="small text-muted-2">Setiap produk terverifikasi dan dibina oleh sekolah.</div>
</div>
</div>
</div>
</div>
</div>
<!-- end mockup -->
</div>
</div>
</div>
</header>
<!-- KATEGORI -->
<section id="kategori" class="section-pad">
<div class="container">
<div class="row mb-4 align-items-end">
<div class="col-lg-7">
<h2 class="fw-bold mb-2">Kategori Produk Unggulan</h2>
<p class="text-muted-2 mb-0">Temukan beragam produk dan jasa dari Kelompok Usaha Siswa (KUS) dengan tampilan rapi dan mudah dijelajahi.</p>
</div>
</div>
<div class="row g-3">
<div class="col-md-6 col-lg-4">
<div class="p-4 rd-card h-100">
<div class="d-flex align-items-center gap-3 mb-2">
<div class="rd-icon"><span style="font-size:1.25rem;">🍰</span></div>
<div>
<div class="fw-semibold">Tata Boga</div>
<div class="small text-muted-2">Makanan & Minuman Karya Siswa</div>
</div>
</div>
<div class="small text-muted-2">Snack box, kue kering, minuman segar, catering kegiatan sekolah & umum.</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="p-4 rd-card h-100">
<div class="d-flex align-items-center gap-3 mb-2">
<div class="rd-icon"><span style="font-size:1.25rem;">👗</span></div>
<div>
<div class="fw-semibold">Tata Busana</div>
<div class="small text-muted-2">Fashion & Jahit Kreatif</div>
</div>
</div>
<div class="small text-muted-2">Custom seragam, perbaikan jahit, karya fashion siswa, produk handmade.</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="p-4 rd-card h-100">
<div class="d-flex align-items-center gap-3 mb-2">
<div class="rd-icon"><span style="font-size:1.25rem;">💄</span></div>
<div>
<div class="fw-semibold">Rias Kecantikan</div>
<div class="small text-muted-2">Make Up & Perawatan</div>
</div>
</div>
<div class="small text-muted-2">Rias wisuda, rias acara, perawatan ringan, paket grooming sederhana.</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="p-4 rd-card h-100">
<div class="d-flex align-items-center gap-3 mb-2">
<div class="rd-icon"><span style="font-size:1.25rem;">🎬</span></div>
<div>
<div class="fw-semibold">Multimedia</div>
<div class="small text-muted-2">Desain, Video, Foto, Digital Product</div>
</div>
</div>
<div class="small text-muted-2">Poster, konten sosial media, foto produk, video promosi, template desain.</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="p-4 rd-card h-100">
<div class="d-flex align-items-center gap-3 mb-2">
<div class="rd-icon"><span style="font-size:1.25rem;">🛠️</span></div>
<div>
<div class="fw-semibold">Teknik Kendaraan Bermotor</div>
<div class="small text-muted-2">Jasa & Produk Otomotif</div>
</div>
</div>
<div class="small text-muted-2">Servis ringan, pengecekan, cuci kendaraan, aksesoris dan produk bengkel.</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="p-4 rd-card h-100 bg-soft">
<div class="d-flex align-items-center gap-3 mb-2">
<div class="rd-icon"><i class="bi bi-grid" style="color:var(--rd-green);"></i></div>
<div>
<div class="fw-semibold">Semua Kategori</div>
<div class="small text-muted-2">Jelajahi katalog lengkap</div>
</div>
</div>
<div class="small text-muted-2">Cari berdasarkan kategori, harga, badge, dan rekomendasi produk unggulan.</div>
</div>
</div>
</div>
</div>
</section>
<!-- KEUNGGULAN -->
<section id="keunggulan" class="section-pad bg-soft">
<div class="container">
<div class="row align-items-center g-4">
<div class="col-lg-6">
<h2 class="fw-bold mb-3">Kenapa Ruang Dagang?</h2>
<p class="text-muted-2 mb-4">
Ruang Dagang membantu siswa SMA mengembangkan kewirausahaan dengan wadah digital yang modern,
sekaligus memberi masyarakat tempat belanja yang jelas, aman, dan terpercaya.
</p>
<div class="d-grid gap-3">
<div class="p-4 rd-card">
<div class="d-flex align-items-start gap-3">
<div class="rd-icon"><i class="bi bi-patch-check" style="color:var(--rd-blue);"></i></div>
<div>
<div class="fw-semibold">Produk Asli Karya Siswa</div>
<div class="small text-muted-2">Setiap produk dibuat dan dikelola langsung oleh Kelompok Usaha Siswa (KUS).</div>
</div>
</div>
</div>
<div class="p-4 rd-card">
<div class="d-flex align-items-start gap-3">
<div class="rd-icon"><i class="bi bi-tags" style="color:var(--rd-orange);"></i></div>
<div>
<div class="fw-semibold">Harga Terjangkau</div>
<div class="small text-muted-2">Pilihan produk ramah kantong dengan kualitas yang terus ditingkatkan melalui pembinaan.</div>
</div>
</div>
</div>
<div class="p-4 rd-card">
<div class="d-flex align-items-start gap-3">
<div class="rd-icon"><i class="bi bi-rocket-takeoff" style="color:var(--rd-green);"></i></div>
<div>
<div class="fw-semibold">Mendukung Kewirausahaan Siswa SMA</div>
<div class="small text-muted-2">Mendorong siswa belajar branding, produksi, layanan pelanggan, dan manajemen usaha.</div>
</div>
</div>
</div>
<div class="p-4 rd-card">
<div class="d-flex align-items-start gap-3">
<div class="rd-icon"><i class="bi bi-bag-check" style="color:var(--rd-blue);"></i></div>
<div>
<div class="fw-semibold">Sistem Pemesanan Mudah</div>
<div class="small text-muted-2">Pilih produk, pesan, bayar, dan pantau proses secara sederhana dan transparan.</div>
</div>
</div>
</div>
<div class="p-4 rd-card">
<div class="d-flex align-items-start gap-3">
<div class="rd-icon"><i class="bi bi-building-check" style="color:var(--rd-green);"></i></div>
<div>
<div class="fw-semibold">Terintegrasi dengan SMA Double Track</div>
<div class="small text-muted-2">Pembinaan dan validasi dilakukan bersama sekolah agar kualitas dan proses tetap terjaga.</div>
</div>
</div>
</div>
</div>
</div>
<!-- Side Visual -->
<div class="col-lg-6">
<div class="p-4 rd-card">
<div class="d-flex align-items-center justify-content-between mb-3">
<div>
<div class="fw-semibold">Statistik Singkat (Dummy)</div>
<div class="small text-muted-2">Contoh tampilan ringkas di landing</div>
</div>
<span class="rd-badge badge-featured"><i class="bi bi-graph-up"></i> Insight</span>
</div>
<div class="row g-3">
<div class="col-6">
<div class="p-3 rd-card bg-soft">
<div class="small text-muted-2">Usaha Siswa</div>
<div class="h4 mb-0 fw-bold">120+</div>
</div>
</div>
<div class="col-6">
<div class="p-3 rd-card bg-soft">
<div class="small text-muted-2">Produk Aktif</div>
<div class="h4 mb-0 fw-bold">500+</div>
</div>
</div>
<div class="col-6">
<div class="p-3 rd-card bg-soft">
<div class="small text-muted-2">Pembeli</div>
<div class="h4 mb-0 fw-bold">3.2K</div>
</div>
</div>
<div class="col-6">
<div class="p-3 rd-card bg-soft">
<div class="small text-muted-2">Rating</div>
<div class="h4 mb-0 fw-bold">4.8/5</div>
</div>
</div>
</div>
<div class="mt-4 p-3 rd-card">
<div class="d-flex align-items-start gap-3">
<div class="rd-icon"><i class="bi bi-info-circle" style="color:var(--rd-orange);"></i></div>
<div class="small text-muted-2">
Bagian ini bisa diganti dengan <strong>video profil sekolah</strong>, <strong>poster program Double Track</strong>,
atau highlight “kisah sukses siswa”.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CARA KERJA -->
<section id="cara-kerja" class="section-pad">
<div class="container">
<div class="row mb-4">
<div class="col-lg-7">
<h2 class="fw-bold mb-2">Cara Kerja</h2>
<p class="text-muted-2 mb-0">Alur sederhana agar pembeli nyaman dan siswa tetap terarah dalam proses usaha.</p>
</div>
</div>
<div class="row g-3">
<div class="col-md-6 col-lg-3">
<div class="p-4 rd-card h-100">
<div class="rd-icon mb-3"><i class="bi bi-bag" style="color:var(--rd-blue);"></i></div>
<div class="fw-semibold">1) Pilih Produk</div>
<div class="small text-muted-2">Jelajahi katalog dan kategori sesuai kebutuhan.</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="p-4 rd-card h-100">
<div class="rd-icon mb-3"><i class="bi bi-credit-card" style="color:var(--rd-orange);"></i></div>
<div class="fw-semibold">2) Pesan & Bayar</div>
<div class="small text-muted-2">Checkout cepat, informasi pesanan jelas.</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="p-4 rd-card h-100">
<div class="rd-icon mb-3"><i class="bi bi-gear" style="color:var(--rd-green);"></i></div>
<div class="fw-semibold">3) Diproses Siswa</div>
<div class="small text-muted-2">Produk/jasa dikerjakan oleh tim KUS dengan bimbingan.</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="p-4 rd-card h-100">
<div class="rd-icon mb-3"><i class="bi bi-truck" style="color:var(--rd-blue);"></i></div>
<div class="fw-semibold">4) Dikirim / Dikerjakan</div>
<div class="small text-muted-2">Pesanan dikirim atau layanan dilakukan sesuai jadwal.</div>
</div>
</div>
</div>
</div>
</section>
<!-- SHOWCASE PRODUK -->
<section id="produk" class="section-pad bg-soft">
<div class="container">
<div class="row mb-4 align-items-end">
<div class="col-lg-7">
<h2 class="fw-bold mb-2">Showcase Produk</h2>
<p class="text-muted-2 mb-0">Contoh tampilan grid produk. Nanti tinggal ganti gambar dan data sesuai produk asli.</p>
</div>
<div class="col-lg-5 text-lg-end mt-3 mt-lg-0">
<div class="d-flex justify-content-lg-end gap-2 flex-wrap">
<span class="rd-badge badge-best"><i class="bi bi-stars"></i> Best Seller</span>
<span class="rd-badge badge-featured"><i class="bi bi-gem"></i> Produk Unggulan</span>
<span class="rd-badge badge-student"><i class="bi bi-mortarboard"></i> Karya Siswa</span>
</div>
</div>
</div>
<div class="row g-3">
<!-- Product Card -->
<div class="col-md-6 col-lg-4">
<div class="p-4 rd-card h-100">
<div class="rd-product-img mb-3">Foto Produk</div>
<div class="d-flex gap-2 flex-wrap mb-2">
<span class="rd-badge badge-best"><i class="bi bi-stars"></i> Best Seller</span>
<span class="rd-badge badge-student"><i class="bi bi-mortarboard"></i> Karya Siswa</span>
</div>
<div class="fw-semibold">Snack Box “Kreasi Pagi”</div>
<div class="small text-muted-2">Kategori: Tata Boga</div>
<div class="mt-2 d-flex align-items-center justify-content-between">
<div class="fw-bold">Rp 18.000</div>
<button class="btn btn-sm btn-primary btn-rd" type="button">
<i class="bi bi-cart-plus"></i> Pesan
</button>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="p-4 rd-card h-100">
<div class="rd-product-img mb-3">Foto Produk</div>
<div class="d-flex gap-2 flex-wrap mb-2">
<span class="rd-badge badge-featured"><i class="bi bi-gem"></i> Produk Unggulan</span>
<span class="rd-badge badge-student"><i class="bi bi-mortarboard"></i> Karya Siswa</span>
</div>
<div class="fw-semibold">Custom Tote Bag “Double Track”</div>
<div class="small text-muted-2">Kategori: Tata Busana</div>
<div class="mt-2 d-flex align-items-center justify-content-between">
<div class="fw-bold">Rp 35.000</div>
<button class="btn btn-sm btn-primary btn-rd" type="button">
<i class="bi bi-cart-plus"></i> Pesan
</button>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="p-4 rd-card h-100">
<div class="rd-product-img mb-3">Foto Produk</div>
<div class="d-flex gap-2 flex-wrap mb-2">
<span class="rd-badge badge-featured"><i class="bi bi-gem"></i> Produk Unggulan</span>
<span class="rd-badge badge-best"><i class="bi bi-stars"></i> Best Seller</span>
</div>
<div class="fw-semibold">Paket Rias Wisuda Basic</div>
<div class="small text-muted-2">Kategori: Rias Kecantikan</div>
<div class="mt-2 d-flex align-items-center justify-content-between">
<div class="fw-bold">Rp 120.000</div>
<button class="btn btn-sm btn-primary btn-rd" type="button">
<i class="bi bi-cart-plus"></i> Pesan
</button>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="p-4 rd-card h-100">
<div class="rd-product-img mb-3">Foto Produk</div>
<div class="d-flex gap-2 flex-wrap mb-2">
<span class="rd-badge badge-student"><i class="bi bi-mortarboard"></i> Karya Siswa</span>
</div>
<div class="fw-semibold">Desain Poster Promosi (1 set)</div>
<div class="small text-muted-2">Kategori: Multimedia</div>
<div class="mt-2 d-flex align-items-center justify-content-between">
<div class="fw-bold">Rp 45.000</div>
<button class="btn btn-sm btn-primary btn-rd" type="button">
<i class="bi bi-cart-plus"></i> Pesan
</button>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="p-4 rd-card h-100">
<div class="rd-product-img mb-3">Foto Produk</div>
<div class="d-flex gap-2 flex-wrap mb-2">
<span class="rd-badge badge-best"><i class="bi bi-stars"></i> Best Seller</span>
</div>
<div class="fw-semibold">Servis Ringan Motor (Cek Umum)</div>
<div class="small text-muted-2">Kategori: Teknik Kendaraan Bermotor</div>
<div class="mt-2 d-flex align-items-center justify-content-between">
<div class="fw-bold">Rp 25.000</div>
<button class="btn btn-sm btn-primary btn-rd" type="button">
<i class="bi bi-cart-plus"></i> Pesan
</button>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="p-4 rd-card h-100">
<div class="rd-product-img mb-3">Foto Produk</div>
<div class="d-flex gap-2 flex-wrap mb-2">
<span class="rd-badge badge-featured"><i class="bi bi-gem"></i> Produk Unggulan</span>
<span class="rd-badge badge-student"><i class="bi bi-mortarboard"></i> Karya Siswa</span>
</div>
<div class="fw-semibold">Minuman Fresh “Citrus Boost”</div>
<div class="small text-muted-2">Kategori: Tata Boga</div>
<div class="mt-2 d-flex align-items-center justify-content-between">
<div class="fw-bold">Rp 12.000</div>
<button class="btn btn-sm btn-primary btn-rd" type="button">
<i class="bi bi-cart-plus"></i> Pesan
</button>
</div>
</div>
</div>
</div>
<div class="mt-4 text-center">
<a class="btn btn-outline-primary btn-outline-rd" href="#cta-akhir">
Lihat Selengkapnya <i class="bi bi-arrow-right"></i>
</a>
</div>
</div>
</section>
<!-- TESTIMONI -->
<section id="testimoni" class="section-pad">
<div class="container">
<div class="row mb-4">
<div class="col-lg-7">
<h2 class="fw-bold mb-2">Testimoni</h2>
<p class="text-muted-2 mb-0">Membangun kepercayaan lewat cerita pembeli, siswa, dan guru pembimbing.</p>
</div>
</div>
<div class="row g-3">
<div class="col-lg-4">
<div class="p-4 rd-card h-100">
<div class="d-flex align-items-center gap-3 mb-3">
<div class="rd-icon"><i class="bi bi-person-heart" style="color:var(--rd-orange);"></i></div>
<div>
<div class="fw-semibold">Pembeli</div>
<div class="small text-muted-2">Warga sekitar</div>
</div>
</div>
<p class="mb-0 text-muted-2">
“Produknya rapi dan jelas. Saya bisa pilih snack box untuk acara keluarga, dan prosesnya cepat.
Keren karena ini karya siswa!”
</p>
<div class="mt-3 small">
<i class="bi bi-star-fill" style="color:var(--rd-orange);"></i>
<i class="bi bi-star-fill" style="color:var(--rd-orange);"></i>
<i class="bi bi-star-fill" style="color:var(--rd-orange);"></i>
<i class="bi bi-star-fill" style="color:var(--rd-orange);"></i>
<i class="bi bi-star-fill" style="color:var(--rd-orange);"></i>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="p-4 rd-card h-100">
<div class="d-flex align-items-center gap-3 mb-3">
<div class="rd-icon"><i class="bi bi-mortarboard" style="color:var(--rd-green);"></i></div>
<div>
<div class="fw-semibold">Siswa Pelaku Usaha</div>
<div class="small text-muted-2">Anggota KUS</div>
</div>
</div>
<p class="mb-0 text-muted-2">
“Lewat Ruang Dagang, kami belajar promosi, mengatur pesanan, dan meningkatkan kualitas produk.
Rasanya seperti punya toko online sendiri.”
</p>
<div class="mt-3 small">
<span class="rd-badge badge-student"><i class="bi bi-check2-circle"></i> Terbina</span>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="p-4 rd-card h-100">
<div class="d-flex align-items-center gap-3 mb-3">
<div class="rd-icon"><i class="bi bi-person-badge" style="color:var(--rd-blue);"></i></div>
<div>
<div class="fw-semibold">Guru Pembimbing</div>
<div class="small text-muted-2">SMA Double Track</div>
</div>
</div>
<p class="mb-0 text-muted-2">
“Platform ini membantu kami memantau perkembangan usaha siswa sekaligus memastikan proses bisnisnya terarah.
Sangat relevan untuk program kewirausahaan.”
</p>
<div class="mt-3 small">
<span class="rd-badge badge-featured"><i class="bi bi-shield-check"></i> Terpercaya</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- DAFTAR (Section anchor for 2nd CTA) -->
<section id="daftar" class="py-2"></section>
<!-- CTA AKHIR -->
<section id="cta-akhir" class="section-pad">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-10">
<div class="p-5 rd-card rd-hero">
<div class="row align-items-center g-4">
<div class="col-lg-7">
<div class="rd-pill mb-3">
<span class="dot yellow"></span>
<span><strong>Ruang Dagang</strong> • Marketplace Produk KUS Double Track</span>
</div>
<h2 class="fw-bold mb-2">Marketplace Produk KUS Double Track</h2>
<p class="text-muted-2 mb-0">
Saatnya karya siswa dikenal lebih luas. Gabung sebagai pembeli atau dukung usaha siswa SMA Double Track lewat marketplace yang modern dan mudah digunakan.
</p>
</div>
<div class="col-lg-5">
<div class="d-grid gap-2">
<a class="btn btn-primary btn-lg btn-rd" href="https://www.plusk.online" target="_blank" rel="noopener">
<i class="bi bi-box-arrow-up-right"></i> Gabung Sekarang
</a>
<a class="btn btn-outline-primary btn-lg btn-outline-rd" href="https://www.plusk.online" target="_blank" rel="noopener">
<i class="bi bi-bag-check"></i> Mulai Belanja
</a>
<div class="small text-muted-2">
Link terhubung ke: <strong>www.plusk.online</strong>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="rd-footer" style="background:#0b1220;">
<div class="container py-5">
<div class="row g-4">
<div class="col-lg-4">
<div class="d-flex align-items-center gap-2 mb-2">
<span class="rd-icon" style="border-radius:12px; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12);">
<i class="bi bi-shop" style="color:#fff;"></i>
</span>
<div class="fw-bold text-white">Ruang Dagang</div>
</div>
<p class="mb-2" style="color:rgba(255,255,255,.75);">
Wadah digital untuk memasarkan dan menjual produk karya siswa secara profesional, modern, dan terpercaya.
</p>
<div class="small" style="color:rgba(255,255,255,.65);">
Terintegrasi dengan <strong>SMA Double Track</strong>
</div>
</div>
<div class="col-6 col-lg-2">
<div class="text-white fw-semibold mb-2">Tentang</div>
<ul class="list-unstyled small">
<li class="mb-1"><a href="#keunggulan">Keunggulan</a></li>
<li class="mb-1"><a href="#cara-kerja">Cara Kerja</a></li>
<li class="mb-1"><a href="#testimoni">Testimoni</a></li>
</ul>
</div>
<div class="col-6 col-lg-3">
<div class="text-white fw-semibold mb-2">Kategori Produk</div>
<ul class="list-unstyled small">
<li class="mb-1"><a href="#kategori">Tata Boga</a></li>
<li class="mb-1"><a href="#kategori">Tata Busana</a></li>
<li class="mb-1"><a href="#kategori">Rias Kecantikan</a></li>
<li class="mb-1"><a href="#kategori">Multimedia</a></li>
<li class="mb-1"><a href="#kategori">Otomotif</a></li>
</ul>
</div>
<div class="col-lg-3">
<div class="text-white fw-semibold mb-2">Kontak Sekolah / Admin</div>
<div class="small" style="color:rgba(255,255,255,.75);">
Email: admin@smadoubletrack.sch.id<br/>
Telp: (contoh) 08xx-xxxx-xxxx<br/>
Alamat: (contoh) Kota / Kabupaten
</div>
<div class="mt-3 d-flex gap-2">
<a class="btn btn-sm btn-outline-light" href="#" aria-label="Instagram">
<i class="bi bi-instagram"></i>
</a>
<a class="btn btn-sm btn-outline-light" href="#" aria-label="Tiktok">
<i class="bi bi-tiktok"></i>
</a>
<a class="btn btn-sm btn-outline-light" href="#" aria-label="Youtube">
<i class="bi bi-youtube"></i>
</a>
</div>
</div>
</div>
<hr style="border-color:rgba(255,255,255,.14);" class="my-4"/>
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2 small" style="color:rgba(255,255,255,.65);">
<div>© <span id="year"></span> Ruang Dagang — KUS SMA Double Track</div>
<div>Responsive • SEO-friendly • Fast Loading • PWA Ready (opsional)</div>
</div>
</div>
</footer>
<!-- Bootstrap JS (CDN) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(a => {
a.addEventListener('click', (e) => {
const href = a.getAttribute('href');
if (!href || href === '#') return;
const target = document.querySelector(href);
if (!target) return;
e.preventDefault();
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
// close navbar on mobile after click
const nav = document.getElementById('navRd');
if (nav && nav.classList.contains('show')) {
new bootstrap.Collapse(nav).hide();
}
});
});
// Year
document.getElementById('year').textContent = new Date().getFullYear();
</script>
</body>
</html>
Subscribe to:
Comments (Atom)