A. Pertanyaan Umum
| No | Pertanyaan | Jawaban |
|---|---|---|
| 1 | Apa itu pelatihan Arduino? | Pelatihan yang mengajarkan dasar elektronika, pemrograman, dan pembuatan proyek menggunakan Arduino. |
| 2 | Siapa yang bisa mengikuti pelatihan? | Siswa SD, SMP, SMK, mahasiswa, guru, dan masyarakat umum. |
| 3 | Apakah harus memiliki pengalaman coding? | Tidak. Materi dimulai dari dasar. |
| 4 | Apakah pelatihan dilakukan secara online? | Ya, tersedia kelas online melalui Zoom atau Google Meet. |
| 5 | Apakah ada kelas offline? | Ya, tersedia kelas tatap muka di tempat pelatihan atau sekolah. |
| 6 | Berapa lama durasi pelatihan? | Setiap pertemuan berlangsung 1,5–2 jam. |
| 7 | Apakah peserta mendapat sertifikat? | Ya, peserta mendapatkan sertifikat setelah menyelesaikan pelatihan. |
| 8 | Apakah alat disediakan? | Untuk kelas offline disediakan alat. Untuk online, peserta dapat membeli paket kit atau menggunakan alat sendiri. |
| 9 | Apakah ada pendampingan setelah pelatihan? | Ya, tersedia grup konsultasi WhatsApp. |
| 10 | Bagaimana cara mendaftar? | Mengisi formulir pendaftaran dan melakukan pembayaran. |
B. Data Customer yang Perlu Dikumpulkan
Identitas Peserta
Nama Lengkap
Tempat, Tanggal Lahir
Jenis Kelamin
Alamat Lengkap
Nomor WhatsApp
Email
Asal Sekolah/Instansi
Kelas/Pekerjaan
Nama Orang Tua (untuk peserta SD dan SMP)
Data Minat Peserta
Mengapa ingin belajar Arduino?
Pernah belajar pemrograman?
Pernah menggunakan Arduino?
Bidang yang diminati:
Robotik
IoT
Otomasi
Elektronika
Coding
Target setelah mengikuti pelatihan.
C. Pertanyaan Penempatan Kelas
Untuk SD
Q: Apakah pernah merakit elektronik?
A: Ya / Tidak.
Q: Pernah menggunakan komputer?
A: Ya / Tidak.
Q: Apakah suka bermain robot?
A: Ya / Tidak.
Untuk SMP
Q: Apakah pernah membuat proyek elektronika?
A: Ya / Tidak.
Q: Apakah pernah menggunakan Scratch?
A: Ya / Tidak.
Untuk SMK
Q: Jurusan apa?
A: TBSM/TKJ/RPL/Elektronika/Lainnya.
Q: Pernah menggunakan Arduino?
A: Ya / Tidak.
Q: Pernah membuat proyek?
A: Ya / Tidak.
Untuk Umum
Q: Apa tujuan mengikuti pelatihan?
A: Hobi / Mengajar / Bisnis / Karier.
Q: Apakah memiliki laptop?
A: Ya / Tidak.
D. Kategori Pelatihan Robotik
Robotik SD (Dasar)
Lampu LED
Traffic Light
Alarm Sederhana
Robot Mengikuti Garis Dasar
Robotik SMP (Menengah)
Sensor Ultrasonik
Robot Avoider
Smart Lamp
Robot Bluetooth
Robotik SMK (Lanjutan)
Robot Arm
Robot Line Follower
Smart Home
IoT ESP32
Robot Transformer
Robotik Umum
Internet of Things (IoT)
Robot Industri
Sistem Otomasi
Smart Agriculture
Smart Home
E. Database FAQ Robotik
| Pertanyaan | Jawaban |
|---|---|
| Apa itu robotik? | Ilmu tentang perancangan dan pembuatan robot. |
| Apakah robotik sulit? | Tidak, pembelajaran dimulai dari dasar. |
| Apakah harus bisa matematika? | Tidak harus, cukup memahami logika dasar. |
| Apakah ada sertifikat? | Ya. |
| Apakah alat robotik disediakan? | Ya, untuk kelas offline. |
| Apakah bisa belajar dari nol? | Bisa. |
| Berapa umur minimal? | Mulai usia 8 tahun. |
| Apakah bisa untuk guru? | Sangat bisa. |
| Apakah ada proyek? | Ya, setiap kelas membuat proyek. |
| Apakah ada lomba? | Ya, peserta terbaik dapat mengikuti lomba robotik. |
F. Formulir Pendaftaran Singkat
Nama Lengkap : ................
Usia : ................
Jenjang :
☐ SD
☐ SMP
☐ SMK
☐ Umum
Pilih Kelas :
☐ Arduino Dasar
☐ Robotik Dasar
☐ Robotik Lanjutan
☐ IoT
☐ Robot Arm
☐ Smart Home
Metode Belajar :
☐ Online
☐ Offline
Nomor WhatsApp : ................
Email : ................
Tujuan Mengikuti Pelatihan : ................
Pernah Menggunakan Arduino?
☐ Ya
☐ Tidak
Database ini sudah siap digunakan untuk:
Google Form
Website pendaftaran
Aplikasi Android
WhatsApp Business
Sistem CRM pelanggan pelatihan Arduino dan Robotik.
Sejarah Singkat
AVENTRON ROBOTICS ACADEMY
AVENTRON ROBOTICS ACADEMY didirikan pada 26 Juni 2026, bertepatan dengan hari Jumat, 11 Muharram 1448 H, sebagai lembaga pendidikan dan pelatihan di bidang Arduino, robotika, pemrograman, dan teknologi digital. (Time and Date)
Lembaga ini didirikan oleh Suryo Budi Triawan, S.T., seorang pendidik dan praktisi teknologi yang memiliki visi untuk menciptakan generasi muda Indonesia yang kreatif, inovatif, dan siap menghadapi perkembangan teknologi di era industri digital.
Berawal dari keinginan untuk menyediakan pembelajaran robotik yang mudah diakses oleh semua kalangan, AVENTRON ROBOTICS ACADEMY hadir dengan program pelatihan online dan offline untuk tingkat SD, SMP, SMK, guru, mahasiswa, hingga masyarakat umum. Program pembelajaran dirancang berbasis proyek (Project Based Learning) sehingga peserta tidak hanya memahami teori, tetapi juga mampu menciptakan karya nyata berupa robot, sistem otomatisasi, Internet of Things (IoT), dan berbagai inovasi teknologi lainnya.
Dengan semangat:
"Build • Code • Innovate"
AVENTRON ROBOTICS ACADEMY berkomitmen menjadi pusat pembelajaran teknologi dan robotika yang profesional, inovatif, dan berdaya saing, serta turut berkontribusi dalam mencetak generasi pencipta teknologi masa depan Indonesia.
Visi
Menjadi pusat pendidikan robotika dan teknologi terdepan di Indonesia yang melahirkan generasi inovator, kreator, dan problem solver di bidang teknologi.
Misi
Menyelenggarakan pelatihan Arduino dan robotika yang berkualitas.
Mengembangkan pembelajaran berbasis proyek dan inovasi.
Meningkatkan kompetensi teknologi bagi pelajar, guru, dan masyarakat.
Menjadi wadah pengembangan kreativitas dan riset teknologi.
Membangun ekosistem pendidikan robotika yang modern dan berkelanjutan.
Profil Singkat
Nama Lembaga: AVENTRON ROBOTICS ACADEMY
Tanggal Berdiri: 26 Juni 2026
Pendiri: Suryo Budi Triawan, S.T.
Bidang: Pendidikan, Pelatihan Arduino, Robotika, IoT, dan Teknologi Digital
Motto: Build • Code • Innovate
Layanan: Kelas Online, Kelas Offline, Workshop, Sertifikasi, dan Konsultasi Proyek Teknologi.
client
html
<!DOCTYPE html>
<html lang="id" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aventron Robotics Academy - Belajar Masa Depan</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts: Poppins -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
}
/* Custom Glowing Shadow Effects */
.glow-blue {
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}
.glow-teal {
box-shadow: 0 0 20px rgba(20, 184, 166, 0.3);
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #0f172a;
}
::-webkit-scrollbar-thumb {
background: #1e293b;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #3b82f6;
}
</style>
</head>
<body class="bg-slate-950 text-slate-100 min-h-screen selection:bg-blue-500 selection:text-white">
<!-- NAVBAR -->
<nav class="sticky top-0 z-50 bg-slate-950/80 backdrop-blur-md border-b border-slate-900 px-6 lg:px-16 py-4 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="relative w-10 h-10 flex items-center justify-center">
<!-- Main Logo with dynamic error fallback -->
<img src="3e520854-0b72-4804-85fe-852378d84660.png"
onerror="this.style.display='none'; this.nextElementSibling.classList.remove('hidden');"
alt="Aventron Robotics Academy Logo"
class="h-10 w-10 object-contain rounded-xl bg-white p-1 shadow-md shadow-blue-500/10">
<div class="hidden w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center text-white font-black text-lg shadow-md shadow-blue-500/20">
A
</div>
</div>
<span class="text-xl font-extrabold bg-gradient-to-r from-blue-400 via-indigo-400 to-teal-400 bg-clip-text text-transparent tracking-wider">
AVENTRON
</span>
</div>
<!-- Desktop Navigation -->
<div class="hidden md:flex items-center gap-8 text-sm font-medium text-slate-300">
<a href="#beranda" class="hover:text-blue-400 transition-colors">Beranda</a>
<a href="#simulator" class="hover:text-blue-400 transition-colors flex items-center gap-1">
<span class="inline-block w-2 h-2 rounded-full bg-teal-400 animate-pulse"></span>
Virtual Lab
</a>
<a href="#kelas" class="hover:text-blue-400 transition-colors">Pilihan Kelas</a>
<a href="#program" class="hover:text-blue-400 transition-colors">Kurikulum</a>
<a href="#testimoni" class="hover:text-blue-400 transition-colors">Testimoni</a>
</div>
<div class="hidden md:flex items-center gap-4">
<button onclick="openModal()" class="px-6 py-2.5 bg-blue-600 hover:bg-blue-500 active:scale-95 transition-all text-white font-semibold rounded-full text-sm glow-blue">
Daftar Sekarang
</button>
</div>
<!-- Mobile Menu Toggle Button -->
<button id="mobile-menu-btn" class="md:hidden text-slate-300 focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
</nav>
<!-- Mobile Drawer Menu -->
<div id="mobile-drawer" class="hidden fixed inset-0 z-40 bg-slate-950/95 flex flex-col items-center justify-center gap-8 text-xl font-semibold transition-all duration-300">
<button id="close-drawer-btn" class="absolute top-6 right-6 text-slate-400">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
<div class="flex flex-col items-center gap-3 mb-4">
<div class="relative w-20 h-20 flex items-center justify-center">
<img src="3e520854-0b72-4804-85fe-852378d84660.png"
onerror="this.style.display='none'; this.nextElementSibling.classList.remove('hidden');"
alt="Aventron Robotics Academy Logo"
class="h-20 w-20 object-contain rounded-2xl bg-white p-2 shadow-lg shadow-blue-500/20">
<div class="hidden w-20 h-20 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center text-white font-black text-3xl shadow-lg shadow-blue-500/20">
A
</div>
</div>
<span class="text-2xl font-black bg-gradient-to-r from-blue-400 to-teal-400 bg-clip-text text-transparent">AVENTRON</span>
</div>
<a href="#beranda" onclick="toggleDrawer()" class="hover:text-blue-400">Beranda</a>
<a href="#simulator" onclick="toggleDrawer()" class="hover:text-teal-400">Virtual Lab</a>
<a href="#kelas" onclick="toggleDrawer()" class="hover:text-blue-400">Pilihan Kelas</a>
<a href="#program" onclick="toggleDrawer()" class="hover:text-blue-400">Kurikulum</a>
<a href="#testimoni" onclick="toggleDrawer()" class="hover:text-blue-400">Testimoni</a>
<button onclick="toggleDrawer(); openModal()" class="px-8 py-3 bg-blue-600 hover:bg-blue-500 rounded-full text-white text-base shadow-lg glow-blue">
Daftar Sekarang
</button>
</div>
<!-- HERO SECTION -->
<section id="beranda" class="relative overflow-hidden pt-10 pb-20 lg:pt-20 lg:pb-32 px-6 lg:px-16 flex flex-col lg:flex-row items-center justify-between gap-12">
<!-- Abstract Background Lights -->
<div class="absolute -top-40 -left-40 w-96 h-96 bg-blue-500/10 rounded-full blur-[120px] pointer-events-none"></div>
<div class="absolute top-1/2 right-10 w-96 h-96 bg-teal-500/10 rounded-full blur-[120px] pointer-events-none"></div>
<div class="w-full lg:w-1/2 space-y-6 text-center lg:text-left z-10">
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-blue-950/50 border border-blue-900/50 text-blue-400 text-xs font-semibold uppercase tracking-wider">
<span class="w-2 h-2 rounded-full bg-blue-500 animate-ping"></span>
Akademi STEM Terlengkap di Indonesia
</div>
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight text-white">
Rancang Robot & <br>
<span class="bg-gradient-to-r from-blue-400 via-indigo-400 to-teal-400 bg-clip-text text-transparent">Proyek IoT</span> Pertamamu!
</h1>
<p class="text-slate-400 text-base sm:text-lg max-w-lg mx-auto lg:mx-0">
Dari dasar coding, merakit modul elektronik, hingga mengontrol sistem rumah pintar lewat smartphone. Didampingi mentor profesional khusus kelas pemula hingga mahir.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4">
<a href="#simulator" class="w-full sm:w-auto text-center px-8 py-3.5 bg-blue-600 hover:bg-blue-500 active:scale-95 transition-all text-white font-bold rounded-xl glow-blue">
Coba Virtual Lab
</a>
<a href="#kelas" class="w-full sm:w-auto text-center px-8 py-3.5 bg-slate-900 hover:bg-slate-800 border border-slate-800 transition-all text-slate-300 font-semibold rounded-xl">
Jelajahi Kelas
</a>
</div>
<div class="grid grid-cols-3 gap-6 pt-8 border-t border-slate-900 max-w-md mx-auto lg:mx-0">
<div>
<h3 class="text-2xl sm:text-3xl font-extrabold text-white">1,200+</h3>
<p class="text-xs text-slate-400 mt-1">Alumni Siswa</p>
</div>
<div>
<h3 class="text-2xl sm:text-3xl font-extrabold text-white">45+</h3>
<p class="text-xs text-slate-400 mt-1">Proyek Robot</p>
</div>
<div>
<h3 class="text-2xl sm:text-3xl font-extrabold text-white">4.9★</h3>
<p class="text-xs text-slate-400 mt-1">Sertifikasi & Rating</p>
</div>
</div>
</div>
<div class="w-full lg:w-5/12 z-10 flex justify-center">
<div class="relative w-full max-w-md">
<div class="absolute -inset-1 bg-gradient-to-r from-blue-500 to-teal-500 rounded-3xl blur opacity-30 animate-pulse"></div>
<div class="relative bg-slate-900/60 border border-slate-800 rounded-3xl p-6 flex flex-col items-center">
<!-- Tech graphic / Simulated Robot Dashboard -->
<div class="w-full h-64 bg-slate-950 rounded-2xl flex items-center justify-center relative overflow-hidden border border-slate-800">
<!-- Hologram layout element -->
<div class="absolute inset-0 bg-[radial-gradient(#1e293b_1px,transparent_1px)] [background-size:16px_16px] opacity-40"></div>
<div id="hero-robot-graphic" class="relative z-10 flex flex-col items-center gap-4 text-center">
<span class="text-7xl animate-bounce">🤖</span>
<div class="space-y-1">
<span class="px-2 py-0.5 text-xs bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 rounded-full font-mono uppercase tracking-widest">
System Online
</span>
<h4 class="text-sm font-semibold font-mono text-slate-300">Robo-Bot V2.1</h4>
</div>
</div>
</div>
<div class="w-full mt-6 grid grid-cols-2 gap-4">
<div class="bg-slate-950 p-3 rounded-xl border border-slate-800 text-center">
<span class="text-xs text-slate-400 block font-mono">Baterai</span>
<span class="text-sm font-extrabold text-teal-400 font-mono">98% Charging</span>
</div>
<div class="bg-slate-950 p-3 rounded-xl border border-slate-800 text-center">
<span class="text-xs text-slate-400 block font-mono">Status Sensor</span>
<span class="text-sm font-extrabold text-blue-400 font-mono">Aktif</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- INTERACTIVE ARDUINO SIMULATOR / SANDBOX -->
<section id="simulator" class="py-16 px-6 lg:px-16 bg-slate-900/30 border-y border-slate-900 relative">
<div class="absolute -top-10 right-1/4 w-72 h-72 bg-indigo-500/5 rounded-full blur-[100px] pointer-events-none"></div>
<div class="max-w-4xl mx-auto text-center mb-12">
<span class="text-teal-400 text-sm font-bold tracking-widest uppercase">Eksklusif & Interaktif</span>
<h2 class="text-3xl sm:text-4xl font-extrabold text-white mt-2">Pusat Eksperimen Virtual Arduino</h2>
<p class="text-slate-400 mt-3 max-w-2xl mx-auto">
Gunakan simulator di bawah ini untuk melihat bagaimana kode program (C++) secara ajaib mengontrol modul mikrokontroler & sirkuit elektronik secara instan!
</p>
</div>
<div class="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-8 items-stretch">
<!-- Selector & Controls Panel -->
<div class="lg:col-span-3 flex flex-col gap-4">
<div class="bg-slate-900 border border-slate-800 rounded-2xl p-4 space-y-3">
<h3 class="text-sm font-bold uppercase text-slate-400 tracking-wider">Pilih Proyek Lab:</h3>
<button onclick="switchSim('blink')" id="btn-sim-blink" class="w-full flex items-center gap-3 p-3 rounded-xl border border-blue-500/20 bg-blue-500/10 text-blue-400 transition-all font-semibold text-sm">
<span class="text-base">💡</span>
<div class="text-left">
<h4 class="font-bold">Lampu Blink</h4>
<p class="text-[10px] text-slate-400">LED berkedip otomatis</p>
</div>
</button>
<button onclick="switchSim('smart-lamp')" id="btn-sim-smart-lamp" class="w-full flex items-center gap-3 p-3 rounded-xl border border-transparent hover:bg-slate-800 text-slate-400 transition-all font-semibold text-sm">
<span class="text-base">🌙</span>
<div class="text-left">
<h4 class="font-bold">Lampu Otomatis</h4>
<p class="text-[10px] text-slate-400">Deteksi sensor cahaya</p>
</div>
</button>
<button onclick="switchSim('robot-avoider')" id="btn-sim-robot-avoider" class="w-full flex items-center gap-3 p-3 rounded-xl border border-transparent hover:bg-slate-800 text-slate-400 transition-all font-semibold text-sm">
<span class="text-base">🚗</span>
<div class="text-left">
<h4 class="font-bold">Robot Avoider</h4>
<p class="text-[10px] text-slate-400">Sensor Ultrasonik</p>
</div>
</button>
</div>
<!-- Simulation Info Panel -->
<div id="sim-explanation" class="bg-slate-900 border border-slate-800 rounded-2xl p-5 flex-1 flex flex-col justify-between space-y-4">
<div>
<h4 class="text-xs font-bold font-mono text-teal-400 uppercase tracking-widest">Cara Kerja Proyek:</h4>
<p id="explanation-text" class="text-xs text-slate-400 mt-2 leading-relaxed">
Program menginstruksikan Arduino menyalurkan sinyal digital (HIGH & LOW) secara bergantian pada Pin 13, membuat sirkuit LED menyala dan mati setiap jeda waktu tertentu.
</p>
</div>
<div id="sim-control-widget" class="pt-4 border-t border-slate-800">
<label id="widget-label" class="text-xs text-slate-300 block font-mono mb-2">Jeda Waktu Blink (Delay):</label>
<!-- Dynamic Slider depending on simulation -->
<div class="flex items-center gap-3">
<input type="range" id="widget-slider" min="200" max="2000" value="1000" oninput="updateWidgetValue(this.value)" class="w-full accent-blue-500">
<span id="widget-val" class="font-mono text-sm text-blue-400">1000ms</span>
</div>
</div>
</div>
</div>
<!-- Virtual Output (Interactive Canvas / Graphical Panel) -->
<div class="lg:col-span-5 bg-slate-950 border border-slate-800 rounded-3xl p-6 flex flex-col justify-between min-h-[380px] relative overflow-hidden">
<!-- Status Bar -->
<div class="flex items-center justify-between border-b border-slate-900 pb-3 z-10">
<div class="flex items-center gap-2">
<span class="w-2.5 h-2.5 rounded-full bg-emerald-500 animate-pulse"></span>
<span class="text-xs font-mono text-slate-400 uppercase tracking-wider">Virtual Hardware Active</span>
</div>
<span class="text-xs font-mono text-slate-500">PORT: COM3</span>
</div>
<!-- Interactive Visual Container -->
<div id="simulation-canvas-area" class="flex-1 flex flex-col items-center justify-center my-6 z-10 min-h-[220px]">
<!-- This content updates dynamically via JavaScript -->
<div id="sim-view-blink" class="flex flex-col items-center gap-6">
<div class="relative flex items-center justify-center">
<!-- SVG Arduino Board Simplified Illustration -->
<svg class="w-56 h-auto" viewBox="0 0 300 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="200" rx="16" fill="#1e3a8a"/>
<rect x="10" y="10" width="40" height="25" rx="2" fill="#000"/>
<rect x="250" y="5" width="40" height="15" fill="#f59e0b"/>
<!-- Microchip -->
<rect x="110" y="80" width="80" height="40" rx="4" fill="#0f172a" stroke="#475569" stroke-width="2"/>
<circle cx="120" cy="100" r="4" fill="#fff" opacity="0.3"/>
<!-- PIN indicators -->
<rect x="10" y="180" width="280" height="15" fill="#020617"/>
<text x="140" y="191" fill="#94a3b8" font-size="9" font-family="monospace">DIGITAL PINS (PWM~)</text>
<!-- LED connection wire path indicator -->
<path d="M 230 180 L 230 140" stroke="#f43f5e" stroke-width="3" stroke-dasharray="4"/>
<circle cx="230" cy="180" r="3" fill="#ef4444"/>
</svg>
<!-- Glow Light Bulb (Absolute Position overlay on Pin 13) -->
<div id="virtual-led" class="absolute top-[80px] right-[40px] w-12 h-12 rounded-full bg-red-600 transition-all duration-200 border-4 border-slate-900 flex items-center justify-center cursor-pointer">
<span class="text-white text-xs font-mono font-bold">13</span>
</div>
</div>
<p class="text-xs text-slate-400 font-mono">Pin 13 LED output</p>
</div>
<!-- Smart Light Simulation Container (Hidden by default) -->
<div id="sim-view-smart-lamp" class="hidden flex-col items-center gap-6 w-full px-4">
<div class="flex items-center justify-between w-full">
<div class="flex flex-col items-center gap-2">
<span class="text-xs text-slate-400 font-mono">Sensor Cahaya (LDR)</span>
<div id="ldr-ambient-light" class="w-16 h-16 rounded-full bg-amber-200/50 flex items-center justify-center border-2 border-slate-800 transition-all duration-300">
☀️
</div>
</div>
<div class="text-2xl text-slate-600">➡️</div>
<div class="flex flex-col items-center gap-2">
<span class="text-xs text-slate-400 font-mono">Lampu Kamar</span>
<div id="smart-bulb" class="w-16 h-16 rounded-full bg-slate-800 flex items-center justify-center border-2 border-slate-700 transition-all duration-300">
💡
</div>
</div>
</div>
</div>
<!-- Robot Avoider Container (Hidden by default) -->
<div id="sim-view-robot-avoider" class="hidden flex-col items-center justify-center w-full relative">
<div class="w-full max-w-xs h-44 bg-slate-950 border border-slate-900 rounded-xl relative overflow-hidden flex items-center justify-center">
<!-- Simulated Grid -->
<div class="absolute inset-0 bg-[radial-gradient(#1e293b_1px,transparent_1px)] [background-size:12px_12px] opacity-25"></div>
<!-- Static Wall on Right side -->
<div class="absolute right-0 top-0 bottom-0 w-4 bg-red-600/40 border-l border-red-500"></div>
<!-- Robot Graphic -->
<div id="sim-robot" class="absolute left-8 w-16 h-16 bg-slate-800 border-2 border-blue-500 rounded-xl flex flex-col items-center justify-center transition-all duration-300">
<span class="text-2xl">🚗</span>
<div class="flex gap-1 mt-0.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-ping"></span>
<span class="text-[8px] font-mono text-slate-400">AVOID</span>
</div>
</div>
<!-- Sensor Wave Beam -->
<div id="sensor-beam" class="absolute left-24 w-12 h-8 bg-cyan-500/10 border-r-2 border-dashed border-cyan-400 rounded-r-lg"></div>
</div>
<span class="text-xs text-slate-400 font-mono mt-4">Sesuaikan jarak rintangan di menu samping!</span>
</div>
</div>
<!-- Debug Output Console -->
<div class="bg-slate-900 border border-slate-850 p-3 rounded-2xl font-mono text-xs flex flex-col gap-1.5">
<div class="flex items-center justify-between text-[10px] text-slate-500">
<span>SERIAL MONITOR</span>
<button onclick="clearConsole()" class="hover:text-slate-300 transition-colors">Hapus</button>
</div>
<div id="serial-terminal" class="h-16 overflow-y-auto text-cyan-400 flex flex-col gap-1 pr-2">
<!-- Terminal content generated dynamically -->
</div>
</div>
</div>
<!-- Code Editor Panel (Simulated Syntax Highlighter) -->
<div class="lg:col-span-4 bg-slate-900 border border-slate-800 rounded-3xl overflow-hidden flex flex-col justify-between">
<div class="bg-slate-950 px-5 py-3 border-b border-slate-850 flex items-center justify-between">
<span class="text-xs font-mono font-bold text-slate-400">Sketch_Robot.ino</span>
<span class="px-2 py-0.5 bg-blue-500/10 border border-blue-500/20 text-blue-400 rounded-md text-[10px] font-mono font-bold">C++ / Arduino</span>
</div>
<div class="p-5 flex-1 font-mono text-xs overflow-x-auto text-slate-300 leading-relaxed min-h-[300px]">
<!-- Arduino Code Box -->
<pre id="code-box-blink" class="block space-y-1">
<span class="text-slate-500">// Proyek 1: LED Blink Otomatis</span>
<span class="text-blue-400">int</span> ledPin = <span class="text-amber-400">13</span>;
<span class="text-emerald-400">void</span> <span class="text-teal-400">setup</span>() {
<span class="text-slate-500">// Inisialisasi pin digital sebagai Output</span>
<span class="text-indigo-400">pinMode</span>(ledPin, <span class="text-amber-400">OUTPUT</span>);
<span class="text-indigo-400">Serial</span>.<span class="text-indigo-400">begin</span>(<span class="text-amber-400">9600</span>);
}
<span class="text-emerald-400">void</span> <span class="text-teal-400">loop</span>() {
<span class="text-indigo-400">digitalWrite</span>(ledPin, <span class="text-amber-400">HIGH</span>); <span class="text-slate-500">// LED Menyala</span>
<span class="text-indigo-400">Serial</span>.<span class="text-indigo-400">println</span>(<span class="text-amber-400">"LED: MENYALA"</span>);
<span class="text-indigo-400">delay</span>(<span id="code-delay-high" class="text-teal-400 font-bold">1000</span>); <span class="text-slate-500">// Jeda</span>
<span class="text-indigo-400">digitalWrite</span>(ledPin, <span class="text-amber-400">LOW</span>); <span class="text-slate-500">// LED Padam</span>
<span class="text-indigo-400">Serial</span>.<span class="text-indigo-400">println</span>(<span class="text-amber-400">"LED: MATI"</span>);
<span class="text-indigo-400">delay</span>(<span id="code-delay-low" class="text-teal-400 font-bold">1000</span>);
}</pre>
<!-- Smart Lamp Code (Hidden) -->
<pre id="code-box-smart-lamp" class="hidden space-y-1">
<span class="text-slate-500">// Proyek 2: Smart Light Sensor LDR</span>
<span class="text-blue-400">int</span> sensorPin = <span class="text-amber-400">A0</span>; <span class="text-slate-500">// Sensor LDR</span>
<span class="text-blue-400">int</span> ledPin = <span class="text-amber-400">13</span>; <span class="text-slate-500">// Lampu Kamar</span>
<span class="text-emerald-400">void</span> <span class="text-teal-400">setup</span>() {
<span class="text-indigo-400">pinMode</span>(ledPin, <span class="text-amber-400">OUTPUT</span>);
<span class="text-indigo-400">Serial</span>.<span class="text-indigo-400">begin</span>(<span class="text-amber-400">9600</span>);
}
<span class="text-emerald-400">void</span> <span class="text-teal-400">loop</span>() {
<span class="text-blue-400">int</span> nilaiLDR = <span class="text-indigo-400">analogRead</span>(sensorPin);
<span class="text-indigo-400">Serial</span>.<span class="text-indigo-400">print</span>(<span class="text-amber-400">"Cahaya: "</span>);
<span class="text-indigo-400">Serial</span>.<span class="text-indigo-400">println</span>(nilaiLDR);
<span class="text-slate-500">// Jika gelap, nyalakan lampu otomatis</span>
<span class="text-blue-400">if</span> (nilaiLDR < <span id="code-ldr-threshold" class="text-teal-400 font-bold">400</span>) {
<span class="text-indigo-400">digitalWrite</span>(ledPin, <span class="text-amber-400">HIGH</span>);
} <span class="text-blue-400">else</span> {
<span class="text-indigo-400">digitalWrite</span>(ledPin, <span class="text-amber-400">LOW</span>);
}
<span class="text-indigo-400">delay</span>(<span class="text-amber-400">100</span>);
}</pre>
<!-- Robot Avoider Code (Hidden) -->
<pre id="code-box-robot-avoider" class="hidden space-y-1">
<span class="text-slate-500">// Proyek 3: Robot Penghindar Rintangan</span>
<span class="text-blue-400">int</span> trigPin = <span class="text-amber-400">9</span>;
<span class="text-blue-400">int</span> echoPin = <span class="text-amber-400">10</span>;
<span class="text-emerald-400">void</span> <span class="text-teal-400">setup</span>() {
<span class="text-indigo-400">pinMode</span>(trigPin, <span class="text-amber-400">OUTPUT</span>);
<span class="text-indigo-400">pinMode</span>(echoPin, <span class="text-amber-400">INPUT</span>);
<span class="text-indigo-400">Serial</span>.<span class="text-indigo-400">begin</span>(<span class="text-amber-400">9600</span>);
}
<span class="text-emerald-400">void</span> <span class="text-teal-400">loop</span>() {
<span class="text-slate-500">// Dapatkan jarak rintangan</span>
<span class="text-blue-400">long</span> jarak = <span class="text-indigo-400">bacaUltrasonik</span>();
<span class="text-indigo-400">Serial</span>.<span class="text-indigo-400">print</span>(<span class="text-amber-400">"Jarak: "</span>);
<span class="text-indigo-400">Serial</span>.<span class="text-indigo-400">print</span>(jarak);
<span class="text-indigo-400">Serial</span>.<span class="text-indigo-400">println</span>(<span class="text-amber-400">" cm"</span>);
<span class="text-blue-400">if</span> (jarak < <span id="code-avoider-threshold" class="text-teal-400 font-bold">25</span>) {
<span class="text-indigo-400">Serial</span>.<span class="text-indigo-400">println</span>(<span class="text-amber-400">"HINDARI RINTANGAN!"</span>);
<span class="text-indigo-400">belokKiri</span>();
} <span class="text-blue-400">else</span> {
<span class="text-indigo-400">majuLurus</span>();
}
<span class="text-indigo-400">delay</span>(<span class="text-amber-400">200</span>);
}</pre>
</div>
<div class="bg-slate-950 p-4 border-t border-slate-850 flex items-center justify-between">
<span class="text-[11px] text-slate-500 font-mono">Status: Terkompilasi</span>
<button onclick="flashArduino()" class="px-4 py-1.5 bg-teal-600 hover:bg-teal-500 text-slate-950 font-bold rounded-lg text-xs font-mono glow-teal transition-colors">
▶ UPLOAD CODE
</button>
</div>
</div>
</div>
</section>
<!-- KELAS & LEVEL SECTION -->
<section id="kelas" class="py-20 px-6 lg:px-16 max-w-7xl mx-auto">
<div class="text-center mb-16">
<span class="text-blue-400 text-sm font-bold tracking-widest uppercase">Jenjang Pendidikan</span>
<h2 class="text-3xl sm:text-5xl font-extrabold text-white mt-2">Pilih Jalur Belajarmu</h2>
<p class="text-slate-400 mt-4 max-w-2xl mx-auto text-base sm:text-lg">
Kelas dirancang interaktif menyesuaikan dengan tingkatan usia & pemahaman masing-masing siswa.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- SD Card -->
<div class="bg-slate-900/40 border border-slate-800/80 hover:border-blue-500/40 p-6 rounded-2xl transition-all duration-300 hover:-translate-y-2 flex flex-col justify-between group">
<div>
<div class="w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center text-2xl group-hover:bg-blue-500/20 transition-all">🧒</div>
<h3 class="text-xl font-bold text-white mt-6 group-hover:text-blue-400 transition-colors">Kelas SD</h3>
<p class="text-sm text-slate-400 mt-3 leading-relaxed">
Pendekatan belajar visual coding berbasis blok yang asyik, serta sirkuit aman bebas solder.
</p>
<ul class="text-xs text-slate-400 space-y-2 mt-4">
<li class="flex items-center gap-2">🟢 Elektronika Dasar</li>
<li class="flex items-center gap-2">🟢 Scratch Visual Programming</li>
<li class="flex items-center gap-2">🟢 Robot Manual Control</li>
</ul>
</div>
<button onclick="openModal()" class="w-full mt-6 py-2.5 bg-slate-900 border border-slate-800 group-hover:bg-blue-600 group-hover:border-transparent text-slate-300 group-hover:text-white font-semibold rounded-lg text-sm transition-all duration-300">
Pilih Kelas
</button>
</div>
<!-- SMP Card -->
<div class="bg-slate-900/40 border border-slate-800/80 hover:border-blue-500/40 p-6 rounded-2xl transition-all duration-300 hover:-translate-y-2 flex flex-col justify-between group">
<div>
<div class="w-12 h-12 bg-indigo-500/10 rounded-xl flex items-center justify-center text-2xl group-hover:bg-indigo-500/20 transition-all">🎒</div>
<h3 class="text-xl font-bold text-white mt-6 group-hover:text-indigo-400 transition-colors">Kelas SMP</h3>
<p class="text-sm text-slate-400 mt-3 leading-relaxed">
Mulai mempelajari dasar-dasar coding teks (C++), integrasi berbagai sensor, dan motor penggerak.
</p>
<ul class="text-xs text-slate-400 space-y-2 mt-4">
<li class="flex items-center gap-2">🟢 Pemrograman C++ Pemula</li>
<li class="flex items-center gap-2">🟢 Logika Sensor (Ultrasonic, LDR)</li>
<li class="flex items-center gap-2">🟢 Merakit Robot Roda 2</li>
</ul>
</div>
<button onclick="openModal()" class="w-full mt-6 py-2.5 bg-slate-900 border border-slate-800 group-hover:bg-blue-600 group-hover:border-transparent text-slate-300 group-hover:text-white font-semibold rounded-lg text-sm transition-all duration-300">
Pilih Kelas
</button>
</div>
<!-- SMK Card -->
<div class="bg-slate-900/40 border border-slate-800/80 hover:border-blue-500/40 p-6 rounded-2xl transition-all duration-300 hover:-translate-y-2 flex flex-col justify-between group">
<div>
<div class="w-12 h-12 bg-teal-500/10 rounded-xl flex items-center justify-center text-2xl group-hover:bg-teal-500/20 transition-all">🦾</div>
<h3 class="text-xl font-bold text-white mt-6 group-hover:text-teal-400 transition-colors">Kelas SMK</h3>
<p class="text-sm text-slate-400 mt-3 leading-relaxed">
Fokus pada pembuatan proyek IoT tingkat lanjut, otomatisasi industri, sistem mikrokontroler kompleks.
</p>
<ul class="text-xs text-slate-400 space-y-2 mt-4">
<li class="flex items-center gap-2">🟢 Internet of Things (ESP8266/ESP32)</li>
<li class="flex items-center gap-2">🟢 Monitoring Smartphone (Blynk)</li>
<li class="flex items-center gap-2">🟢 Robot Line Follower & Lengan Robot</li>
</ul>
</div>
<button onclick="openModal()" class="w-full mt-6 py-2.5 bg-slate-900 border border-slate-800 group-hover:bg-blue-600 group-hover:border-transparent text-slate-300 group-hover:text-white font-semibold rounded-lg text-sm transition-all duration-300">
Pilih Kelas
</button>
</div>
<!-- UMUM Card -->
<div class="bg-slate-900/40 border border-slate-800/80 hover:border-blue-500/40 p-6 rounded-2xl transition-all duration-300 hover:-translate-y-2 flex flex-col justify-between group">
<div>
<div class="w-12 h-12 bg-amber-500/10 rounded-xl flex items-center justify-center text-2xl group-hover:bg-amber-500/20 transition-all">👨🏫</div>
<h3 class="text-xl font-bold text-white mt-6 group-hover:text-amber-400 transition-colors">Kelas Umum/Guru</h3>
<p class="text-sm text-slate-400 mt-3 leading-relaxed">
Pelatihan kurikulum mengajar STEM bagi pengajar sekolah, mahasiswa teknik, maupun penghobi (*hobbyist*).
</p>
<ul class="text-xs text-slate-400 space-y-2 mt-4">
<li class="flex items-center gap-2">🟢 Metode Pengajaran STEM</li>
<li class="flex items-center gap-2">🟢 Desain Skema Sirkuit</li>
<li class="flex items-center gap-2">🟢 Studi Kasus IoT Smart Home</li>
</ul>
</div>
<button onclick="openModal()" class="w-full mt-6 py-2.5 bg-slate-900 border border-slate-800 group-hover:bg-blue-600 group-hover:border-transparent text-slate-300 group-hover:text-white font-semibold rounded-lg text-sm transition-all duration-300">
Pilih Kelas
</button>
</div>
</div>
</section>
<!-- PROGRAM UNGGULAN & SYLLABUS ACCORDION -->
<section id="program" class="py-20 bg-slate-900/20 border-t border-slate-900 px-6 lg:px-16">
<div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
<div class="lg:col-span-5 space-y-6">
<span class="text-blue-400 text-sm font-bold tracking-widest uppercase">Kurikulum Praktis</span>
<h2 class="text-3xl sm:text-4xl font-extrabold text-white">Program & Proyek Unggulan</h2>
<p class="text-slate-400">
Sistem belajar kami berfokus pada penyelesaian sirkuit (*Project-Based Learning*). Setiap siswa dibekali dengan modul komponen sirkuit robot yang siap dirakit.
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="bg-slate-900 border border-slate-800/60 p-4 rounded-xl flex items-center gap-3">
<span class="text-2xl">🚗</span>
<div>
<h4 class="font-bold text-white text-sm">Line Follower</h4>
<p class="text-[10px] text-slate-400">Melaju otomatis mengikuti garis</p>
</div>
</div>
<div class="bg-slate-900 border border-slate-800/60 p-4 rounded-xl flex items-center gap-3">
<span class="text-2xl">🦾</span>
<div>
<h4 class="font-bold text-white text-sm">Robot Arm</h4>
<p class="text-[10px] text-slate-400">Mengontrol capit lengan servo</p>
</div>
</div>
<div class="bg-slate-900 border border-slate-800/60 p-4 rounded-xl flex items-center gap-3">
<span class="text-2xl">🏠</span>
<div>
<h4 class="font-bold text-white text-sm">Smart Home</h4>
<p class="text-[10px] text-slate-400">Sistem rumah pintar otomatis</p>
</div>
</div>
<div class="bg-slate-900 border border-slate-800/60 p-4 rounded-xl flex items-center gap-3">
<span class="text-2xl">🌐</span>
<div>
<h4 class="font-bold text-white text-sm">Internet of Things</h4>
<p class="text-[10px] text-slate-400">Integrasi awan & database online</p>
</div>
</div>
</div>
</div>
<!-- Syllabus Accordion -->
<div class="lg:col-span-7 space-y-4">
<h3 class="text-xl font-bold text-white mb-4">Urutan Pembelajaran Komprehensif:</h3>
<!-- Accordion 1 -->
<div class="bg-slate-900/60 border border-slate-800 rounded-xl overflow-hidden">
<button onclick="toggleAccordion('acc1')" class="w-full p-5 flex items-center justify-between text-left font-semibold text-white hover:bg-slate-800/40 transition-colors">
<span>Fase 1: Logika Elektronika & Pemrograman Visual (Bulan 1)</span>
<span id="icon-acc1" class="text-slate-400 transform transition-transform">+</span>
</button>
<div id="content-acc1" class="hidden px-5 pb-5 text-sm text-slate-400 border-t border-slate-800/50 pt-4 space-y-2">
<p>Mengajarkan siswa mengenali komponen dasar seperti LED, Resistor, dan Switch tanpa perlu takut tersengat listrik. Fokus pada logika pemrograman (If-Else, Loop) lewat visual block Scratch.</p>
<span class="text-xs text-blue-400 font-mono inline-block mt-2">Target Output: Proyek Lampu Lalu Lintas Mini.</span>
</div>
</div>
<!-- Accordion 2 -->
<div class="bg-slate-900/60 border border-slate-800 rounded-xl overflow-hidden">
<button onclick="toggleAccordion('acc2')" class="w-full p-5 flex items-center justify-between text-left font-semibold text-white hover:bg-slate-800/40 transition-colors">
<span>Fase 2: Sensor Integrasi & Coding Teks C++ (Bulan 2)</span>
<span id="icon-acc2" class="text-slate-400 transform transition-transform">+</span>
</button>
<div id="content-acc2" class="hidden px-5 pb-5 text-sm text-slate-400 border-t border-slate-800/50 pt-4 space-y-2">
<p>Beralih menggunakan platform teks Arduino IDE asli. Membaca data sirkuit analog/digital melalui sensor ultrasonik jarak jauh, sensor inframerah garis, dan penggerak motor servo.</p>
<span class="text-xs text-blue-400 font-mono inline-block mt-2">Target Output: Robot Avoider Penghindar Rintangan.</span>
</div>
</div>
<!-- Accordion 3 -->
<div class="bg-slate-900/60 border border-slate-800 rounded-xl overflow-hidden">
<button onclick="toggleAccordion('acc3')" class="w-full p-5 flex items-center justify-between text-left font-semibold text-white hover:bg-slate-800/40 transition-colors">
<span>Fase 3: IoT & Kendali Smartphone (Bulan 3)</span>
<span id="icon-acc3" class="text-slate-400 transform transition-transform">+</span>
</button>
<div id="content-acc3" class="hidden px-5 pb-5 text-sm text-slate-400 border-t border-slate-800/50 pt-4 space-y-2">
<p>Penggunaan mikrokontroler berbasis Wi-Fi (ESP8266/ESP32). Mengirimkan data pembacaan sensor ke dashboard web/ponsel secara dinamis dan mengontrol peralatan rumah dari jarak jauh.</p>
<span class="text-xs text-blue-400 font-mono inline-block mt-2">Target Output: Sistem Kendali Kunci Rumah Otomatis (Smart Door Lock).</span>
</div>
</div>
</div>
</div>
</section>
<!-- TESTIMONI SECTION -->
<section id="testimoni" class="py-20 px-6 lg:px-16 max-w-7xl mx-auto">
<div class="text-center mb-16">
<span class="text-blue-400 text-sm font-bold tracking-widest uppercase">Umpan Balik Positif</span>
<h2 class="text-3xl sm:text-4xl font-extrabold text-white mt-2">Kata Para Kreator Muda</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Testi 1 -->
<div class="bg-slate-900/50 border border-slate-800 p-6 rounded-2xl flex flex-col justify-between">
<div>
<div class="flex text-amber-400 gap-1 mb-4">⭐⭐⭐⭐⭐</div>
<p class="text-sm text-slate-300 italic leading-relaxed">
"Mentoringnya seru banget! Cara belajarnya praktis dan langsung pegang komponen nyata. Dalam sebulan, saya sudah bisa membuat robot penghindar halangan saya sendiri."
</p>
</div>
<div class="flex items-center gap-3 mt-6 border-t border-slate-800 pt-4">
<span class="text-2xl">👦</span>
<div>
<h4 class="font-bold text-white text-sm">Fahri</h4>
<p class="text-[11px] text-slate-400">Siswa SMP - Proyek Robot Avoider</p>
</div>
</div>
</div>
<!-- Testi 2 -->
<div class="bg-slate-900/50 border border-slate-800 p-6 rounded-2xl flex flex-col justify-between">
<div>
<div class="flex text-amber-400 gap-1 mb-4">⭐⭐⭐⭐⭐</div>
<p class="text-sm text-slate-300 italic leading-relaxed">
"Anak saya sangat tertarik dengan elektronika sejak bergabung. Materi mudah dicerna untuk usia SD, penugasannya asyik berbentuk tantangan memecahkan misi sirkuit."
</p>
</div>
<div class="flex items-center gap-3 mt-6 border-t border-slate-800 pt-4">
<span class="text-2xl">👩👦</span>
<div>
<h4 class="font-bold text-white text-sm">Ibu Rina</h4>
<p class="text-[11px] text-slate-400">Orang Tua Siswa SD - Jakarta</p>
</div>
</div>
</div>
<!-- Testi 3 -->
<div class="bg-slate-900/50 border border-slate-800 p-6 rounded-2xl flex flex-col justify-between">
<div>
<div class="flex text-amber-400 gap-1 mb-4">⭐⭐⭐⭐⭐</div>
<p class="text-sm text-slate-300 italic leading-relaxed">
"Materi kurikulumnya sangat terstruktur untuk pengajar pemula. Modul kit elektronika pendukung yang dikirim ke alamat rumah juga sangat lengkap dan siap diajarkan kembali."
</p>
</div>
<div class="flex items-center gap-3 mt-6 border-t border-slate-800 pt-4">
<span class="text-2xl">👨🏫</span>
<div>
<h4 class="font-bold text-white text-sm">Pak Budi</h4>
<p class="text-[11px] text-slate-400">Guru Ekstrakurikuler - SMK Bandung</p>
</div>
</div>
</div>
</div>
</section>
<!-- CALL TO ACTION (CTA) -->
<section class="py-20 px-6 lg:px-16 bg-gradient-to-r from-blue-950 via-indigo-950 to-teal-950 border-t border-slate-900 text-center relative overflow-hidden">
<div class="absolute -bottom-20 -left-20 w-80 h-80 bg-blue-500/10 rounded-full blur-[100px] pointer-events-none"></div>
<div class="absolute top-0 right-0 w-80 h-80 bg-teal-500/10 rounded-full blur-[100px] pointer-events-none"></div>
<div class="max-w-3xl mx-auto space-y-6 z-10 relative">
<h2 class="text-3xl sm:text-5xl font-extrabold text-white leading-tight">
Mulai Perjalanan STEM & <br>Robotik Sekarang!
</h2>
<p class="text-slate-300 text-base sm:text-lg max-w-xl mx-auto">
Pendaftaran untuk gelombang belajar bulan ini telah dibuka. Kursi terbatas untuk memastikan bimbingan eksklusif 1 Mentor untuk 5 Siswa.
</p>
<div class="pt-4">
<button onclick="openModal()" class="px-8 py-3.5 bg-blue-600 hover:bg-blue-500 text-white font-bold rounded-xl glow-blue active:scale-95 transition-all">
Daftar & Konsultasi Gratis
</button>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="bg-slate-950 text-slate-500 py-12 px-6 lg:px-16 border-t border-slate-900 text-sm">
<div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-3">
<div class="relative w-8 h-8 flex items-center justify-center">
<img src="3e520854-0b72-4804-85fe-852378d84660.png"
onerror="this.style.display='none'; this.nextElementSibling.classList.remove('hidden');"
alt="Aventron Logo Small"
class="h-8 w-8 object-contain rounded-lg bg-white p-0.5">
<div class="hidden w-8 h-8 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center text-white font-black text-xs">
A
</div>
</div>
<span class="font-bold text-slate-300">Aventron Robotics Academy</span>
</div>
<p class="text-center md:text-right text-xs">
© 2026 Aventron Robotics Academy | Belajar - Berkarya - Berinovasi. All Rights Reserved.
</p>
</div>
</footer>
<!-- INTERACTIVE ENROLLMENT MODAL -->
<div id="enroll-modal" class="hidden fixed inset-0 z-50 bg-slate-950/80 backdrop-blur-sm flex items-center justify-center p-4">
<div class="bg-slate-900 border border-slate-800 rounded-3xl max-w-md w-full overflow-hidden shadow-2xl relative">
<!-- Modal Header -->
<div class="bg-slate-950 px-6 py-4 border-b border-slate-850 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="relative w-6 h-6 flex items-center justify-center">
<img src="3e520854-0b72-4804-85fe-852378d84660.png"
onerror="this.style.display='none'; this.nextElementSibling.classList.remove('hidden');"
alt="Aventron Badge"
class="h-6 w-6 object-contain rounded bg-white p-0.5">
<div class="hidden w-6 h-6 bg-gradient-to-br from-blue-500 to-indigo-600 rounded flex items-center justify-center text-white font-black text-[9px]">
A
</div>
</div>
<h3 class="font-extrabold text-white">Formulir Pendaftaran</h3>
</div>
<button onclick="closeModal()" class="text-slate-400 hover:text-white transition-colors text-xl">×</button>
</div>
<!-- Modal Content Form -->
<form id="enroll-form" onsubmit="handleFormSubmit(event)" class="p-6 space-y-4 text-left">
<div>
<label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Nama Lengkap Siswa</label>
<input type="text" required placeholder="Contoh: Andi Permana" class="w-full bg-slate-950 border border-slate-850 focus:border-blue-500 rounded-xl px-4 py-2.5 text-sm text-slate-200 outline-none transition-all">
</div>
<div>
<label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Pilih Tingkatan Kelas</label>
<select required class="w-full bg-slate-950 border border-slate-850 focus:border-blue-500 rounded-xl px-4 py-2.5 text-sm text-slate-200 outline-none transition-all">
<option value="">-- Silakan Pilih --</option>
<option value="SD">Kelas SD (Visual Block Coding)</option>
<option value="SMP">Kelas SMP (Arduino Dasar & C++)</option>
<option value="SMK">Kelas SMK (Internet of Things & Smart System)</option>
<option value="Umum">Kelas Umum / Pengajar (Sertifikasi Pengajaran)</option>
</select>
</div>
<div>
<label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Metode Belajar</label>
<div class="grid grid-cols-2 gap-3">
<label class="flex items-center gap-2 bg-slate-950 p-2.5 rounded-xl border border-slate-850 cursor-pointer hover:border-blue-500/55 transition-all text-sm text-slate-300">
<input type="radio" name="method" value="Online" checked class="accent-blue-500">
Online Interaktif
</label>
<label class="flex items-center gap-2 bg-slate-950 p-2.5 rounded-xl border border-slate-850 cursor-pointer hover:border-blue-500/55 transition-all text-sm text-slate-300">
<input type="radio" name="method" value="Offline" class="accent-blue-500">
Offline Tatap Muka
</label>
</div>
</div>
<div>
<label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Nomor WhatsApp Aktif</label>
<input type="tel" required placeholder="Contoh: 081234567890" class="w-full bg-slate-950 border border-slate-850 focus:border-blue-500 rounded-xl px-4 py-2.5 text-sm text-slate-200 outline-none transition-all">
</div>
<div class="pt-2">
<button type="submit" class="w-full py-3 bg-blue-600 hover:bg-blue-500 active:scale-95 transition-all text-white font-bold rounded-xl glow-blue">
Kirim Pendaftaran
</button>
</div>
</form>
<!-- Success State Inside Modal (Hidden by default) -->
<div id="modal-success-view" class="hidden p-8 text-center space-y-4">
<div class="w-16 h-16 bg-emerald-500/15 border border-emerald-500/30 text-emerald-400 text-3xl flex items-center justify-center rounded-full mx-auto animate-bounce">
✓
</div>
<h4 class="text-xl font-bold text-white">Pendaftaran Berhasil!</h4>
<p class="text-sm text-slate-400 leading-relaxed">
Data Anda telah kami rekam di sirkuit utama Aventron. Mentor kami akan segera menghubungi Anda melalui WhatsApp dalam 1x24 jam untuk diskusi penentuan modul.
</p>
<div class="pt-4">
<button onclick="closeModal()" class="w-full py-2.5 bg-slate-800 hover:bg-slate-700 text-slate-200 text-sm font-semibold rounded-xl">
Tutup Jendela
</button>
</div>
</div>
</div>
</div>
<!-- CUSTOM TOAST NOTIFICATION CONTAINER -->
<div id="toast" class="fixed bottom-6 right-6 z-50 bg-slate-900 border border-slate-800 text-white px-5 py-3.5 rounded-2xl shadow-xl flex items-center gap-3 transition-all duration-300 translate-y-24 opacity-0 pointer-events-none">
<span id="toast-icon" class="text-xl">⚡</span>
<div class="text-xs">
<h5 id="toast-title" class="font-bold">Notifikasi</h5>
<p id="toast-body" class="text-slate-400">Pesan notifikasi.</p>
</div>
</div>
<!-- JAVASCRIPT LOGIC -->
<script>
// State Management
let currentSimulation = 'blink';
let simulationInterval = null;
let sensorInterval = null;
// Custom Console Logger Function for virtual terminal
function logToTerminal(message) {
const terminal = document.getElementById('serial-terminal');
const timestamp = new Date().toLocaleTimeString();
// Limit line counts in virtual console
if (terminal.children.length > 25) {
terminal.removeChild(terminal.firstChild);
}
const logElement = document.createElement('div');
logElement.innerHTML = `<span class="text-slate-500">[${timestamp}]</span> ${message}`;
terminal.appendChild(logElement);
terminal.scrollTop = terminal.scrollHeight;
}
function clearConsole() {
document.getElementById('serial-terminal').innerHTML = '';
}
// Initialize Virtual Lab Simulation
function runSimulation() {
// Clear existing intervals
clearInterval(simulationInterval);
clearInterval(sensorInterval);
const led = document.getElementById('virtual-led');
const smartBulb = document.getElementById('smart-bulb');
const ldrAmbient = document.getElementById('ldr-ambient-light');
const robot = document.getElementById('sim-robot');
const beam = document.getElementById('sensor-beam');
const slider = document.getElementById('widget-slider');
logToTerminal(`🚀 Sistem Menginisialisasi Mode: ${currentSimulation.toUpperCase()}...`);
if (currentSimulation === 'blink') {
let state = false;
const updateBlink = () => {
const delayVal = parseInt(slider.value);
state = !state;
if (state) {
led.classList.remove('bg-red-600');
led.classList.add('bg-red-400', 'shadow-[0_0_20px_rgba(239,68,68,0.8)]');
logToTerminal("Pin 13: HIGH | LED Menyala");
} else {
led.classList.remove('bg-red-400', 'shadow-[0_0_20px_rgba(239,68,68,0.8)]');
led.classList.add('bg-red-600');
logToTerminal("Pin 13: LOW | LED Mati");
}
// Recursive timeout to allow dynamic speed adjustment
simulationInterval = setTimeout(updateBlink, delayVal);
};
simulationInterval = setTimeout(updateBlink, parseInt(slider.value));
} else if (currentSimulation === 'smart-lamp') {
// Smart lamp uses interval
simulationInterval = setInterval(() => {
const thresholdVal = parseInt(slider.value); // Slider represents LDR ambient lux
if (thresholdVal < 400) {
smartBulb.classList.add('bg-amber-400', 'shadow-[0_0_20px_rgba(251,191,36,0.8)]');
smartBulb.classList.remove('bg-slate-800');
ldrAmbient.innerText = '🌙';
logToTerminal(`AnalogRead(A0) Lux: ${thresholdVal} < 400 | Gelap -> Lampu ON`);
} else {
smartBulb.classList.remove('bg-amber-400', 'shadow-[0_0_20px_rgba(251,191,36,0.8)]');
smartBulb.classList.add('bg-slate-800');
ldrAmbient.innerText = '☀️';
logToTerminal(`AnalogRead(A0) Lux: ${thresholdVal} >= 400 | Terang -> Lampu OFF`);
}
}, 1000);
} else if (currentSimulation === 'robot-avoider') {
let robotPos = 32; // position in pixels (left-32)
let movingForward = true;
simulationInterval = setInterval(() => {
const obstacleDist = parseInt(slider.value); // distance of obstacle dynamically controlled by slider
if (obstacleDist < 25) {
logToTerminal(`Ultrasonic Jarak: ${obstacleDist} cm | BAHAYA! Belok Menghindar`);
// Visual shift
robot.style.transform = 'rotate(-15deg)';
beam.style.opacity = '0.3';
setTimeout(() => { robot.style.transform = 'rotate(0deg)'; }, 400);
} else {
logToTerminal(`Ultrasonic Jarak: ${obstacleDist} cm | AMAN -> Maju Terus`);
robot.style.transform = 'scale(1.05)';
beam.style.opacity = '1';
setTimeout(() => { robot.style.transform = 'scale(1)'; }, 150);
}
}, 1200);
}
}
// Switch Lab Tab Controls
function switchSim(mode) {
currentSimulation = mode;
// DOM elements
const btnBlink = document.getElementById('btn-sim-blink');
const btnSmart = document.getElementById('btn-sim-smart-lamp');
const btnAvoider = document.getElementById('btn-sim-robot-avoider');
const viewBlink = document.getElementById('sim-view-blink');
const viewSmart = document.getElementById('sim-view-smart-lamp');
const viewAvoider = document.getElementById('sim-view-robot-avoider');
const codeBlink = document.getElementById('code-box-blink');
const codeSmart = document.getElementById('code-box-smart-lamp');
const codeAvoider = document.getElementById('code-box-robot-avoider');
const expText = document.getElementById('explanation-text');
const sliderLabel = document.getElementById('widget-label');
const slider = document.getElementById('widget-slider');
const sliderVal = document.getElementById('widget-val');
// Reset Styles for control buttons
[btnBlink, btnSmart, btnAvoider].forEach(btn => {
btn.className = "w-full flex items-center gap-3 p-3 rounded-xl border border-transparent hover:bg-slate-800 text-slate-400 transition-all font-semibold text-sm";
});
// Hide all simulator panels & code panels
[viewBlink, viewSmart, viewAvoider, codeBlink, codeSmart, codeAvoider].forEach(el => el.classList.add('hidden'));
if (mode === 'blink') {
btnBlink.className = "w-full flex items-center gap-3 p-3 rounded-xl border border-blue-500/20 bg-blue-500/10 text-blue-400 transition-all font-semibold text-sm";
viewBlink.classList.remove('hidden');
codeBlink.classList.remove('hidden');
expText.innerText = "Program menginstruksikan Arduino menyalurkan sinyal digital (HIGH & LOW) secara bergantian pada Pin 13, membuat sirkuit LED menyala dan mati setiap jeda waktu tertentu.";
sliderLabel.innerText = "Jeda Waktu Blink (Delay):";
slider.min = "200";
slider.max = "2000";
slider.value = "1000";
sliderVal.innerText = "1000ms";
} else if (mode === 'smart-lamp') {
btnSmart.className = "w-full flex items-center gap-3 p-3 rounded-xl border border-blue-500/20 bg-blue-500/10 text-blue-400 transition-all font-semibold text-sm";
viewSmart.classList.remove('hidden');
codeSmart.classList.remove('hidden');
expText.innerText = "Arduino membaca resistansi sensor LDR (A0) yang berubah sesuai intensitas cahaya luar. Jika gelap (lux < 400), sirkuit menyalakan lampu kamar secara otomatis.";
sliderLabel.innerText = "Intensitas Cahaya (LDR):";
slider.min = "50";
slider.max = "900";
slider.value = "300";
sliderVal.innerText = "300 (GELAP)";
} else if (mode === 'robot-avoider') {
btnAvoider.className = "w-full flex items-center gap-3 p-3 rounded-xl border border-blue-500/20 bg-blue-500/10 text-blue-400 transition-all font-semibold text-sm";
viewAvoider.classList.remove('hidden');
codeAvoider.classList.remove('hidden');
expText.innerText = "Sensor ultrasonik mengirimkan gelombang sonar frekuensi tinggi dan menghitung durasi pantulannya. Jika jarak benda terlalu dekat (< 25 cm), robot membelokkan arah motor roda.";
sliderLabel.innerText = "Simulasi Jarak Dinding:";
slider.min = "5";
slider.max = "80";
slider.value = "18";
sliderVal.innerText = "18 cm (BAHAYA)";
}
// Fire Simulation run
runSimulation();
}
// Live slider updates for simulations
function updateWidgetValue(val) {
const sliderVal = document.getElementById('widget-val');
if (currentSimulation === 'blink') {
sliderVal.innerText = `${val}ms`;
document.getElementById('code-delay-high').innerText = val;
document.getElementById('code-delay-low').innerText = val;
} else if (currentSimulation === 'smart-lamp') {
const suffix = val < 400 ? '(GELAP)' : '(TERANG)';
sliderVal.innerText = `${val} ${suffix}`;
document.getElementById('code-ldr-threshold').innerText = val;
} else if (currentSimulation === 'robot-avoider') {
const status = val < 25 ? '(BELOK)' : '(MAJU)';
sliderVal.innerText = `${val} cm ${status}`;
document.getElementById('code-avoider-threshold').innerText = val;
}
}
// Simulate flashing Arduino
function flashArduino() {
showToast("📟 Uploading...", "Mengunggah kode program ke mikrokontroler Arduino...", "⚙️");
setTimeout(() => {
showToast("✓ Sukses!", "Proses kompilasi berhasil & modul berjalan sempurna.", "⚡");
runSimulation();
}, 1200);
}
// Syllabus Accordion Toggles
function toggleAccordion(id) {
const content = document.getElementById(`content-${id}`);
const icon = document.getElementById(`icon-${id}`);
if (content.classList.contains('hidden')) {
content.classList.remove('hidden');
icon.innerText = "−";
icon.classList.add('text-blue-400');
} else {
content.classList.add('hidden');
icon.innerText = "+";
icon.classList.remove('text-blue-400');
}
}
// Enrollment Modal Controls
function openModal() {
document.getElementById('enroll-modal').classList.remove('hidden');
document.getElementById('enroll-form').classList.remove('hidden');
document.getElementById('modal-success-view').classList.add('hidden');
}
function closeModal() {
document.getElementById('enroll-modal').classList.add('hidden');
}
function handleFormSubmit(e) {
e.preventDefault();
// Hide Form and Show Success Message in Modal
document.getElementById('enroll-form').classList.add('hidden');
document.getElementById('modal-success-view').classList.remove('hidden');
showToast("Daftar Sukses!", "Selamat bergabung! Admin kami akan menghubungi Anda sebentar lagi.", "🎉");
}
// Toast Notification System
function showToast(title, body, icon) {
const toast = document.getElementById('toast');
document.getElementById('toast-title').innerText = title;
document.getElementById('toast-body').innerText = body;
document.getElementById('toast-icon').innerText = icon;
// Slide in Toast
toast.classList.remove('translate-y-24', 'opacity-0', 'pointer-events-none');
// Auto hide after 4 seconds
setTimeout(() => {
toast.classList.add('translate-y-24', 'opacity-0', 'pointer-events-none');
}, 4000);
}
// Mobile Drawer Menu
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const mobileDrawer = document.getElementById('mobile-drawer');
const closeDrawerBtn = document.getElementById('close-drawer-btn');
function toggleDrawer() {
mobileDrawer.classList.toggle('hidden');
}
mobileMenuBtn.addEventListener('click', toggleDrawer);
closeDrawerBtn.addEventListener('click', toggleDrawer);
// Window Load triggers
window.onload = function() {
// Initiate default blink simulator
runSimulation();
}
</script>
</body>
</html>





0 Comments