<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Suryo Garage Bot - Robotik & Digital Hub</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono&display=swap');
:root {
--primary: #f59e0b; /* Amber 500 */
--dark: #0f172a;
}
body {
font-family: 'Space+Grotesk', sans-serif;
background-color: #020617;
color: #e2e8f0;
}
.mono { font-family: 'JetBrains+Mono', monospace; }
.glass-card {
background: rgba(30, 41, 59, 0.7);
backdrop-filter: blur(12px);
border: 1px solid rgba(245, 158, 11, 0.2);
transition: all 0.3s ease;
}
.glass-card:hover {
border-color: var(--primary);
box-shadow: 0 0 20px rgba(245, 158, 11, 0.15);
transform: translateY(-5px);
}
.glow-text {
text-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}
.gradient-border {
border: 1px solid;
border-image: linear-gradient(to right, #f59e0b, #7c3aed) 1;
}
</style>
</head>
<body class="selection:bg-amber-500 selection:text-black">
<!-- Navigasi Futuristik -->
<nav class="sticky top-0 z-50 bg-slate-950/80 backdrop-blur-md border-b border-slate-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-20 items-center">
<div class="flex items-center gap-3">
<div class="bg-amber-500 p-2 rounded-md rotate-3">
<i class="fas fa-robot text-black text-2xl"></i>
</div>
<div>
<span class="text-xl font-bold tracking-tighter text-white uppercase block leading-none">Suryo Garage</span>
<span class="text-[10px] text-amber-500 mono font-bold tracking-[0.2em]">BOT ECOSYSTEM</span>
</div>
</div>
<div class="hidden md:flex space-x-10 text-sm font-medium tracking-widest uppercase">
<a href="#workshop" class="text-gray-400 hover:text-amber-500 transition">Workshop</a>
<a href="#arduino" class="text-gray-400 hover:text-amber-500 transition">Arduino Lab</a>
<a href="#digital" class="text-gray-400 hover:text-amber-500 transition">Digital Assets</a>
</div>
<div class="flex items-center gap-6">
<button class="bg-amber-500 text-black px-5 py-2 rounded-sm font-bold text-xs uppercase hover:bg-white transition">Login Admin</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section: The Garage -->
<header class="relative py-24 px-4 overflow-hidden border-b border-slate-800">
<div class="absolute inset-0 opacity-10 pointer-events-none" style="background-image: radial-gradient(#f59e0b 0.5px, transparent 0.5px); background-size: 24px 24px;"></div>
<div class="max-w-7xl mx-auto relative z-10">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<h1 class="text-6xl md:text-7xl font-bold text-white mb-6 leading-none">Build <span class="text-amber-500 glow-text">The Future</span> of Automation.</h1>
<p class="text-gray-400 text-lg mb-8 max-w-lg leading-relaxed">Pusat pembelajaran Robotika, Microcontroller Arduino, dan Pengembangan Produk Digital untuk inovator masa depan.</p>
<div class="flex flex-wrap gap-4">
<button class="bg-white text-black px-8 py-4 font-bold uppercase text-sm tracking-widest hover:bg-amber-500 transition">Mulai Merakit</button>
<button class="border border-slate-700 text-white px-8 py-4 font-bold uppercase text-sm tracking-widest hover:border-amber-500 transition">Cek Portfolio</button>
</div>
</div>
<div class="hidden md:block">
<div class="relative w-full h-[400px] flex items-center justify-center">
<div class="absolute w-72 h-72 bg-amber-500/20 rounded-full blur-[100px] animate-pulse"></div>
<!-- Representasi Visual Robot Sederhana dengan CSS -->
<div class="text-[180px] text-amber-500/80 drop-shadow-2xl">
<i class="fas fa-microchip"></i>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Kategori Fokus -->
<section class="py-20 px-4 max-w-7xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Robotik & Arduino -->
<div class="glass-card p-8 rounded-lg group" id="arduino">
<div class="text-amber-500 mb-6 text-4xl group-hover:scale-110 transition duration-300">
<i class="fas fa-terminal"></i>
</div>
<h3 class="text-2xl font-bold mb-3 text-white">Arduino & IoT</h3>
<p class="text-gray-400 mb-6 text-sm leading-relaxed">Pelajari coding C++, wiring sensor, dan integrasi Internet of Things untuk membuat smart home atau robot pintar.</p>
<a href="#" class="text-amber-500 mono text-xs font-bold uppercase flex items-center gap-2 hover:gap-4 transition-all">Pelajari Modul <i class="fas fa-arrow-right"></i></a>
</div>
<!-- Produk Digital -->
<div class="glass-card p-8 rounded-lg group" id="digital">
<div class="text-amber-500 mb-6 text-4xl group-hover:scale-110 transition duration-300">
<i class="fas fa-cubes"></i>
</div>
<h3 class="text-2xl font-bold mb-3 text-white">Digital Assets</h3>
<p class="text-gray-400 mb-6 text-sm leading-relaxed">Download source code, desain 3D part robot, dan blueprint PCB untuk mempercepat proses prototyping Anda.</p>
<a href="#" class="text-amber-500 mono text-xs font-bold uppercase flex items-center gap-2 hover:gap-4 transition-all">Akses Katalog <i class="fas fa-arrow-right"></i></a>
</div>
<!-- Bot Ecosystem -->
<div class="glass-card p-8 rounded-lg group">
<div class="text-amber-500 mb-6 text-4xl group-hover:scale-110 transition duration-300">
<i class="fas fa-project-diagram"></i>
</div>
<h3 class="text-2xl font-bold mb-3 text-white">Bot Service</h3>
<p class="text-gray-400 mb-6 text-sm leading-relaxed">Layanan jasa pembuatan robot custom, optimasi bot trading, dan otomatisasi workflow bisnis digital Anda.</p>
<a href="#" class="text-amber-500 mono text-xs font-bold uppercase flex items-center gap-2 hover:gap-4 transition-all">Hubungi Suryo <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</section>
<!-- Lab Section (Learning Content) -->
<section class="bg-slate-900/50 py-20 px-4 border-y border-slate-800">
<div class="max-w-7xl mx-auto">
<div class="mb-12 flex justify-between items-center">
<div>
<span class="text-amber-500 mono text-xs font-bold tracking-widest uppercase">Live From The Lab</span>
<h2 class="text-4xl font-bold text-white mt-2">Active Projects & Courses</h2>
</div>
<div class="flex gap-2">
<button class="p-2 border border-slate-700 hover:border-amber-500 transition"><i class="fas fa-chevron-left"></i></button>
<button class="p-2 border border-slate-700 hover:border-amber-500 transition"><i class="fas fa-chevron-right"></i></button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Project Item -->
<div class="bg-slate-950 border border-slate-800 p-4 rounded-sm">
<div class="h-40 bg-slate-800 mb-4 overflow-hidden">
<img src="https://images.unsplash.com/photo-1553406830-ef2513450d76?auto=format&fit=crop&w=500&q=80" alt="Arduino Project" class="w-full h-full object-cover grayscale hover:grayscale-0 transition duration-500">
</div>
<span class="bg-amber-500 text-black text-[10px] font-bold px-2 py-0.5 uppercase mb-2 inline-block">Arduino Lab</span>
<h4 class="text-white font-bold mb-1">Obstacle Avoiding Bot</h4>
<p class="text-xs text-gray-500 mb-4">Level: Intermediate</p>
<div class="flex justify-between items-center mt-auto">
<span class="text-amber-500 mono font-bold text-sm">FREE</span>
<button class="text-white text-xs hover:text-amber-500 transition"><i class="fas fa-play mr-1"></i> Watch</button>
</div>
</div>
<!-- Digital Asset Item -->
<div class="bg-slate-950 border border-slate-800 p-4 rounded-sm">
<div class="h-40 bg-slate-800 mb-4 overflow-hidden">
<img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?auto=format&fit=crop&w=500&q=80" alt="Code Asset" class="w-full h-full object-cover grayscale hover:grayscale-0 transition duration-500">
</div>
<span class="bg-blue-600 text-white text-[10px] font-bold px-2 py-0.5 uppercase mb-2 inline-block">Source Code</span>
<h4 class="text-white font-bold mb-1">Stock Prediction Bot v1.2</h4>
<p class="text-xs text-gray-500 mb-4">Python + AI Model</p>
<div class="flex justify-between items-center mt-auto">
<span class="text-white mono font-bold text-sm">IDR 250k</span>
<button class="text-white text-xs hover:text-amber-500 transition"><i class="fas fa-shopping-cart mr-1"></i> Buy</button>
</div>
</div>
<!-- More items can be added here... -->
</div>
</div>
</section>
<!-- Footer: Terminal Style -->
<footer class="py-12 px-4 border-t border-slate-800">
<div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-8">
<div class="mono text-xs text-gray-500">
<p>> Initializing Suryo_Garage_Bot_v2.0...</p>
<p>> System Status: <span class="text-green-500">ONLINE</span></p>
<p>> Location: Garage Lab, Jakarta, ID</p>
</div>
<div class="flex gap-8 text-sm uppercase tracking-widest font-bold">
<a href="#" class="hover:text-amber-500 transition">Instagram</a>
<a href="#" class="hover:text-amber-500 transition">Github</a>
<a href="#" class="hover:text-amber-500 transition">YouTube</a>
</div>
<div class="text-right">
<p class="text-xs text-gray-600">© 2024 SURYO GARAGE BOT. <br> ENGINEERED FOR INNOVATION.</p>
</div>
</div>
</footer>
<!-- Custom Cursor Effect (Optional simple circle) -->
<div class="fixed top-0 left-0 w-8 h-8 border border-amber-500 rounded-full pointer-events-none z-[9999] hidden md:block opacity-30" id="cursor"></div>
<script>
// Simple cursor follower
const cursor = document.getElementById('cursor');
document.addEventListener('mousemove', e => {
cursor.style.left = e.clientX - 16 + 'px';
cursor.style.top = e.clientY - 16 + 'px';
});
</script>
</body>
</html>
Validasi Client-Side: Memeriksa username "admin123" dan password (saya atur default "garage123").
