<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard Tryout - SmartHub Edu Style</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
// Kustomisasi warna khas SmartHub Edu untuk mempermudah class utility
tailwind.config = {
theme: {
extend: {
colors: {
smarthub: {
orange: '#FF7A00', // Oranye utama khas edukasi & logo
orangelight: '#FFF4EB', // Background tint oranye
darkblue: '#111827', // Navy gelap teks/kontras utama
navy: '#1E293B',
bglight: '#FAFAFB'
}
}
}
}
}
</script>
<!-- Lucide Icons untuk ikon premium -->
<script src="https://unpkg.com/lucide@latest"></script>
</head>
<body class="bg-smarthub-bglight text-gray-800 font-sans">
<div class="flex min-h-screen">
<!-- ================= SIDEBAR ================= -->
<aside class="w-64 bg-white p-5 flex flex-col justify-between border-r border-gray-100 shrink-0">
<div>
<!-- Logo / Brand SmartHub Edu Style -->
<div class="flex items-center gap-3 mb-8 pl-2">
<div class="bg-smarthub-orange text-white p-2 rounded-xl shadow-md shadow-orange-100">
<i data-lucide="graduation-cap" class="w-6 h-6"></i>
</div>
<div>
<h1 class="font-bold text-smarthub-darkblue text-sm leading-tight">SmartHub <span class="text-smarthub-orange">Edu</span></h1>
<p class="text-[11px] text-gray-400">Click for Your Future</p>
</div>
</div>
<!-- Menu Navigasi -->
<nav class="space-y-1">
<a href="#" class="flex items-center gap-3 px-4 py-3 text-smarthub-orange bg-smarthub-orangelight font-semibold rounded-xl text-sm transition">
<i data-lucide="layout-dashboard" class="w-5 h-5"></i> Beranda
</a>
<a href="#" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-gray-50 hover:text-smarthub-darkblue rounded-xl text-sm transition">
<i data-lucide="book-open" class="w-5 h-5"></i> TO UTBK
</a>
<a href="#" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-gray-50 hover:text-smarthub-darkblue rounded-xl text-sm transition">
<i data-lucide="award" class="w-5 h-5"></i> TO TKA
</a>
<!-- Dropdown Informasi PTN -->
<div class="pt-2">
<div class="flex items-center justify-between px-4 py-2 text-xs font-bold text-gray-400 uppercase tracking-wider">
Informasi PTN
<i data-lucide="chevron-down" class="w-3 h-3"></i>
</div>
<div class="pl-4 mt-1 space-y-1">
<a href="#" class="block px-4 py-2 text-sm text-gray-600 hover:text-smarthub-orange rounded-lg">Daftar PTN</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-600 hover:text-smarthub-orange rounded-lg">Jurusan & Prodi</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-600 hover:text-smarthub-orange rounded-lg">Passing Grade</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-600 hover:text-smarthub-orange rounded-lg">SNPMB 2025</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-600 hover:text-smarthub-orange rounded-lg">Beasiswa</a>
</div>
</div>
<div class="pt-4 border-t border-gray-100 my-2"></div>
<a href="#" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-gray-50 hover:text-smarthub-darkblue rounded-xl text-sm transition">
<i data-lucide="package" class="w-5 h-5"></i> Paket Tryout
</a>
<a href="#" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-gray-50 hover:text-smarthub-darkblue rounded-xl text-sm transition">
<i data-lucide="history" class="w-5 h-5"></i> Histori Tryout
</a>
<a href="#" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-gray-50 hover:text-smarthub-darkblue rounded-xl text-sm transition">
<i data-lucide="bar-chart-3" class="w-5 h-5"></i> Ranking
</a>
<a href="#" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-gray-50 hover:text-smarthub-darkblue rounded-xl text-sm transition">
<i data-lucide="user" class="w-5 h-5"></i> Akun Saya
</a>
<a href="#" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-gray-50 hover:text-smarthub-darkblue rounded-xl text-sm transition">
<i data-lucide="help-circle" class="w-5 h-5"></i> Bantuan
</a>
</nav>
</div>
<!-- Banner Promo Sidebar (Tema Orange-Dark Blue) -->
<div class="bg-gradient-to-br from-smarthub-orange to-red-600 text-white p-4 rounded-2xl relative overflow-hidden mt-6 shadow-lg shadow-orange-100">
<div class="relative z-10">
<h4 class="font-bold text-sm mb-1">Persiapan terbaik untuk hasil terbaik!</h4>
<p class="text-[11px] text-orange-100 mb-4">Kerjakan tryout rutin dan pantau perkembanganmu.</p>
<a href="#" class="inline-flex items-center justify-between w-full bg-white text-smarthub-orange px-3 py-2 rounded-xl text-xs font-bold shadow transition hover:bg-orange-50">
Lihat Progress <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
</a>
</div>
<div class="absolute -right-4 -bottom-4 w-20 h-20 bg-white/10 rounded-full blur-xl"></div>
</div>
</aside>
<!-- ================= MAIN CONTENT AREA ================= -->
<div class="flex-1 flex flex-col min-w-0">
<!-- HEADER / TOPBAR -->
<header class="bg-white h-16 px-8 flex items-center justify-end border-b border-gray-100 gap-6 shrink-0">
<button class="flex items-center gap-1.5 bg-smarthub-orangelight border border-orange-200 text-smarthub-orange px-3 py-1.5 rounded-full text-xs font-semibold hover:bg-orange-100/50 transition">
<i data-lucide="crown" class="w-3.5 h-3.5 fill-smarthub-orange text-smarthub-orange"></i> Premium
</button>
<button class="text-gray-400 hover:text-gray-600 relative">
<i data-lucide="bell" class="w-5 h-5"></i>
<span class="absolute top-0 right-0 w-2 h-2 bg-smarthub-orange rounded-full"></span>
</button>
<div class="flex items-center gap-3 pl-4 border-l border-gray-100">
<div class="text-right">
<p class="text-xs text-gray-400">Hai, Siswa</p>
</div>
<img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&auto=format&fit=crop&q=80" alt="Avatar" class="w-8 h-8 rounded-full object-cover border border-gray-200">
<i data-lucide="chevron-down" class="w-4 h-4 text-gray-400"></i>
</div>
</header>
<!-- DASHBOARD SCROLL CONTAINER -->
<main class="p-8 overflow-y-auto flex-1 grid grid-cols-12 gap-6 max-w-[1400px] mx-full w-full">
<!-- LEFT & CENTER COLUMN -->
<div class="col-span-9 space-y-6">
<!-- Jumbotron Hero (Tema Gradien Oranye Lembut khas SmartHub) -->
<div class="bg-gradient-to-r from-smarthub-orangelight via-[#FFFDFB] to-white rounded-3xl p-8 relative flex justify-between items-center border border-white shadow-sm overflow-hidden">
<div class="space-y-4 max-w-md z-10">
<h2 class="text-3xl font-extrabold text-smarthub-darkblue tracking-tight leading-tight">
Latihan Hari Ini,<br><span class="text-smarthub-orange">PTN Impian Menanti!</span>
</h2>
<p class="text-sm text-gray-500 leading-relaxed">
Tryout berkualitas, pembahasan lengkap, dan analisis akurat untuk masa depanmu bersama SmartHub Edu.
</p>
<button class="bg-smarthub-orange text-white font-semibold text-sm px-5 py-3 rounded-xl shadow-md shadow-orange-100 hover:bg-orange-600 transition flex items-center gap-2">
Mulai Tryout Sekarang <i data-lucide="arrow-right" class="w-4 h-4"></i>
</button>
</div>
<!-- Ilustrasi Grafis Sederhana Kanan -->
<div class="relative w-72 h-44 hidden md:flex items-center justify-center">
<div class="absolute inset-0 bg-smarthub-orange/10 rounded-3xl blur-xl"></div>
<div class="bg-white p-4 rounded-2xl shadow-xl border border-gray-50 relative z-10 w-52 transform -rotate-6">
<div class="h-3 w-12 bg-smarthub-orange rounded mb-2"></div>
<div class="h-2 w-full bg-gray-100 rounded mb-1"></div>
<div class="h-2 w-3/4 bg-gray-100 rounded"></div>
<div class="flex gap-1 mt-4">
<span class="text-[9px] bg-orange-50 text-smarthub-orange px-1.5 py-0.5 rounded font-bold">UTBK</span>
<span class="text-[9px] bg-slate-100 text-smarthub-darkblue px-1.5 py-0.5 rounded font-bold">TKA</span>
</div>
</div>
</div>
</div>
<!-- Pilihan Tryout Section -->
<div>
<h3 class="font-bold text-smarthub-darkblue mb-4 text-base">Pilih Tryout</h3>
<div class="grid grid-cols-2 gap-4">
<!-- Card TO UTBK (Aksen Oranye Utama) -->
<div class="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm hover:shadow-md transition flex justify-between">
<div class="flex flex-col justify-between space-y-4">
<div>
<div class="flex items-center gap-2 mb-2">
<h4 class="font-bold text-smarthub-darkblue text-lg">TO UTBK</h4>
<span class="text-[10px] bg-smarthub-orangelight text-smarthub-orange font-bold px-2 py-0.5 rounded-full">Terpopuler</span>
</div>
<p class="text-xs text-gray-400 mb-4">Latihan UTBK sesuai format terbaru untuk semua TPS.</p>
<ul class="space-y-2 text-xs font-medium text-gray-600">
<li class="flex items-center gap-2"><i data-lucide="check-circle-2" class="w-4 h-4 text-smarthub-orange fill-smarthub-orangelight"></i> TPS Penalaran Umum</li>
<li class="flex items-center gap-2"><i data-lucide="check-circle-2" class="w-4 h-4 text-smarthub-orange fill-smarthub-orangelight"></i> TPS Pengetahuan & Pemahaman Umum</li>
<li class="flex items-center gap-2"><i data-lucide="check-circle-2" class="w-4 h-4 text-smarthub-orange fill-smarthub-orangelight"></i> Literasi dalam Bahasa Indonesia</li>
<li class="flex items-center gap-2"><i data-lucide="check-circle-2" class="w-4 h-4 text-smarthub-orange fill-smarthub-orangelight"></i> Literasi dalam Bahasa Inggris</li>
<li class="flex items-center gap-2"><i data-lucide="check-circle-2" class="w-4 h-4 text-smarthub-orange fill-smarthub-orangelight"></i> Penalaran Matematika</li>
</ul>
</div>
<button class="w-full bg-smarthub-orange hover:bg-orange-600 text-white text-xs font-bold py-3 px-4 rounded-xl transition flex items-center justify-center gap-2">
Mulai TO UTBK <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
</button>
</div>
<div class="w-20 h-20 bg-smarthub-orangelight rounded-2xl flex items-center justify-center text-smarthub-orange shrink-0 self-start">
<i data-lucide="clipboard-list" class="w-10 h-10"></i>
</div>
</div>
<!-- Card TO TKA (Aksen Navy Kontras) -->
<div class="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm hover:shadow-md transition flex justify-between">
<div class="flex flex-col justify-between space-y-4">
<div>
<div class="flex items-center gap-2 mb-2">
<h4 class="font-bold text-smarthub-darkblue text-lg">TO TKA</h4>
<span class="text-[10px] bg-slate-100 text-smarthub-darkblue font-bold px-2 py-0.5 rounded-full">Baru</span>
</div>
<p class="text-xs text-gray-400 mb-4">Tryout Tes Kemampuan Akademik untuk semua mata pelajaran.</p>
<ul class="space-y-2 text-xs font-medium text-gray-600">
<li class="flex items-center gap-2"><i data-lucide="check-circle-2" class="w-4 h-4 text-smarthub-darkblue fill-slate-100"></i> Matematika</li>
<li class="flex items-center gap-2"><i data-lucide="check-circle-2" class="w-4 h-4 text-smarthub-darkblue fill-slate-100"></i> Bahasa Indonesia</li>
<li class="flex items-center gap-2"><i data-lucide="check-circle-2" class="w-4 h-4 text-smarthub-darkblue fill-slate-100"></i> Bahasa Inggris</li>
<li class="flex items-center gap-2"><i data-lucide="check-circle-2" class="w-4 h-4 text-smarthub-darkblue fill-slate-100"></i> Sains</li>
<li class="flex items-center gap-2"><i data-lucide="check-circle-2" class="w-4 h-4 text-smarthub-darkblue fill-slate-100"></i> Sosial Humaniora</li>
</ul>
</div>
<button class="w-full bg-smarthub-darkblue hover:bg-slate-800 text-white text-xs font-bold py-3 px-4 rounded-xl transition flex items-center justify-center gap-2">
Mulai TO TKA <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
</button>
</div>
<div class="w-20 h-20 bg-slate-50 rounded-2xl flex items-center justify-center text-smarthub-darkblue shrink-0 self-start">
<i data-lucide="book-marked" class="w-10 h-10"></i>
</div>
</div>
</div>
</div>
<!-- Progress Belajarmu Section -->
<div>
<h3 class="font-bold text-smarthub-darkblue mb-4 text-base">Progress Belajarmu</h3>
<div class="grid grid-cols-4 gap-4">
<!-- Card 1 -->
<div class="bg-white p-4 rounded-2xl border border-gray-100 flex items-center gap-4 shadow-sm">
<div class="p-3 bg-smarthub-orangelight text-smarthub-orange rounded-xl"><i data-lucide="file-text" class="w-5 h-5"></i></div>
<div>
<p class="text-[11px] text-gray-400 font-medium">Tryout Dikerjakan</p>
<p class="text-lg font-bold text-smarthub-darkblue">12 <span class="text-xs text-gray-400 font-normal">dari 20</span></p>
</div>
</div>
<!-- Card 2 -->
<div class="bg-white p-4 rounded-2xl border border-gray-100 flex items-center gap-4 shadow-sm">
<div class="p-3 bg-emerald-50 text-emerald-600 rounded-xl"><i data-lucide="trending-up" class="w-5 h-5"></i></div>
<div>
<p class="text-[11px] text-gray-400 font-medium">Rata-rata Skor</p>
<p class="text-lg font-bold text-smarthub-darkblue">623 <span class="text-xs text-emerald-500 font-semibold bg-emerald-50 px-1 py-0.5 rounded">(Baik)</span></p>
</div>
</div>
<!-- Card 3 -->
<div class="bg-white p-4 rounded-2xl border border-gray-100 flex items-center gap-4 shadow-sm">
<div class="p-3 bg-blue-50 text-blue-600 rounded-xl"><i data-lucide="globe" class="w-5 h-5"></i></div>
<div>
<p class="text-[11px] text-gray-400 font-medium">Peringkat Nasional</p>
<p class="text-lg font-bold text-smarthub-darkblue">2.345 <span class="text-xs text-gray-400 font-normal">dari 12.456</span></p>
</div>
</div>
<!-- Card 4 -->
<div class="bg-white p-4 rounded-2xl border border-gray-100 flex items-center gap-4 shadow-sm">
<div class="p-3 bg-amber-50 text-amber-500 rounded-xl"><i data-lucide="zap" class="w-5 h-5 fill-amber-500 text-amber-500"></i></div>
<div>
<p class="text-[11px] text-gray-400 font-medium">Streak</p>
<p class="text-lg font-bold text-smarthub-darkblue">7 <span class="text-xs text-gray-400 font-normal">hari</span></p>
</div>
</div>
</div>
<!-- Detail Analisis Tombol -->
<button class="w-full mt-4 bg-white hover:bg-gray-50 border border-gray-100 py-3 rounded-xl text-xs font-bold text-gray-600 flex items-center justify-center gap-2 transition shadow-sm hover:text-smarthub-orange">
Lihat Analisis Lengkap <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
</button>
</div>
</div>
<!-- RIGHT COLUMN -->
<div class="col-span-3 space-y-6">
<!-- Pengumuman Box -->
<div class="bg-white p-5 rounded-2xl border border-gray-100 shadow-sm space-y-4">
<div class="flex items-center justify-between">
<h3 class="font-bold text-smarthub-darkblue text-sm">Pengumuman</h3>
<a href="#" class="text-xs text-smarthub-orange font-semibold hover:underline">Lihat semua</a>
</div>
<div class="space-y-3">
<!-- Item 1 -->
<div class="flex gap-3 p-2 hover:bg-gray-50 rounded-xl transition">
<div class="p-2 bg-smarthub-orangelight text-smarthub-orange rounded-lg shrink-0 h-9 w-9 flex items-center justify-center"><i data-lucide="megaphone" class="w-4 h-4"></i></div>
<div>
<span class="text-[9px] bg-smarthub-orangelight text-smarthub-orange font-bold px-1.5 py-0.5 rounded">Baru</span>
<h4 class="font-bold text-xs text-smarthub-darkblue mt-1">Jadwal UTBK 2025 Resmi Dirilis!</h4>
<p class="text-[10px] text-gray-400 mt-0.5">2 jam yang lalu</p>
</div>
</div>
<!-- Item 2 -->
<div class="flex gap-3 p-2 hover:bg-gray-50 rounded-xl transition">
<div class="p-2 bg-slate-50 text-smarthub-darkblue rounded-lg shrink-0 h-9 w-9 flex items-center justify-center"><i data-lucide="calendar" class="w-4 h-4"></i></div>
<div>
<h4 class="font-bold text-xs text-smarthub-darkblue">Simulasi UTBK Gelombang 3</h4>
<p class="text-[10px] text-gray-400 mt-0.5">1 hari yang lalu</p>
</div>
</div>
</div>
</div>
<!-- Artikel Terbaru Box -->
<div class="bg-white p-5 rounded-2xl border border-gray-100 shadow-sm space-y-4">
<div class="flex items-center justify-between">
<h3 class="font-bold text-smarthub-darkblue text-sm">Artikel Terbaru</h3>
<a href="#" class="text-xs text-smarthub-orange font-semibold hover:underline">Lihat semua</a>
</div>
<div class="space-y-4">
<!-- Artikel 1 -->
<div class="flex gap-3 items-start">
<img src="https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=150&auto=format&fit=crop&q=80" alt="Univ" class="w-16 h-12 rounded-lg object-cover bg-gray-100 shrink-0">
<div>
<h4 class="font-bold text-xs text-smarthub-darkblue line-clamp-2 hover:text-smarthub-orange cursor-pointer">Tips Lolos UTBK & SNPMB 2025</h4>
<p class="text-[10px] text-gray-400 mt-1">Tips & Trik • 2 hari lalu</p>
</div>
</div>
<!-- Artikel 2 -->
<div class="flex gap-3 items-start">
<img src="https://images.unsplash.com/photo-1456513080510-7bf3a84b82f8?w=150&auto=format&fit=crop&q=80" alt="Books" class="w-16 h-12 rounded-lg object-cover bg-gray-100 shrink-0">
<div>
<h4 class="font-bold text-xs text-smarthub-darkblue line-clamp-2 hover:text-smarthub-orange cursor-pointer">Perbedaan UTBK dan TKA</h4>
<p class="text-[10px] text-gray-400 mt-1">Info SNPMB • 4 hari lalu</p>
</div>
</div>
</div>
</div>
<!-- Butuh Bantuan / CS SmartHub -->
<div class="bg-smarthub-orangelight p-5 rounded-2xl border border-orange-100/50 flex flex-col items-center text-center space-y-3">
<div class="w-12 h-12 bg-smarthub-orange text-white rounded-full flex items-center justify-center shadow-md shadow-orange-100">
<i data-lucide="headset" class="w-6 h-6"></i>
</div>
<div>
<h4 class="font-bold text-sm text-smarthub-darkblue">Butuh Bantuan?</h4>
<p class="text-[11px] text-gray-400 mt-1">Tim Mentor SmartHub Edu siap membantu kesulitan belajarmu.</p>
</div>
<button class="w-full bg-smarthub-darkblue hover:bg-slate-800 text-white text-xs font-bold py-2.5 px-4 rounded-xl transition shadow-sm">
Hubungi CS
</button>
</div>
</div>
</main>
</div>
</div>
<!-- Inisialisasi Lucide Icons -->
<script>
lucide.createIcons();
</script>
</body>
</html>