<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu Utama Modern</title>

    <!-- Bootstrap Local -->
    <link rel="stylesheet" href="css/css/bootstrap.min.css">

    <style>
        body {
            background: #f1f4f9;
            font-family: 'Segoe UI', sans-serif;
        }

        /* HERO */
        .hero {
            background: linear-gradient(135deg, #4e73df, #6f42c1);
            color: white;
            padding: 100px 0;
            position: relative;
            overflow: hidden;
        }

        .hero::after {
            content: "";
            position: absolute;
            width: 300px;
            height: 300px;
            background: rgba(255,255,255,0.1);
            border-radius: 50%;
            top: -50px;
            right: -50px;
        }

        /* CARD MODERN */
        .card-modern {
            border-radius: 20px;
            backdrop-filter: blur(10px);
            background: white;
            transition: 0.3s;
            border: none;
        }

        .card-modern:hover {
            transform: translateY(-12px) scale(1.02);
            box-shadow: 0 15px 35px rgba(0,0,0,0.2);
        }

        .icon-box {
            width: 60px;
            height: 60px;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            margin: auto;
            color: white;
        }

        .bg-blue { background: #4e73df; }
        .bg-green { background: #1cc88a; }
        .bg-orange { background: #f6c23e; }

        /* STAT BOX */
        .stat-box {
            border-radius: 15px;
            background: white;
            padding: 20px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        /* NAVBAR */
        .navbar {
            backdrop-filter: blur(10px);
        }

        footer {
            background: #212529;
            color: white;
        }
    </style>
</head>
<body>

<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top">
    <div class="container">
        <a class="navbar-brand fw-bold text-primary" href="#">MyApp</a>

        <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="nav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                <li class="nav-item"><a class="nav-link" href="register.php">Register</a></li>
                <li class="nav-item"><a class="nav-link" href="mobil.php">Mobil</a></li>
                <li class="nav-item"><a class="nav-link" href="input_data_mahasiswa.php">Mahasiswa</a></li>
            </ul>
        </div>
    </div>
</nav>

<!-- HERO -->
<section class="hero text-center">
    <div class="container">
        <h1 class="fw-bold">Dashboard Utama 🚀</h1>
        <p class="lead">Kelola data dengan tampilan modern dan elegan</p>
        <a href="register.html" class="btn btn-light btn-lg mt-3">Mulai Sekarang</a>
    </div>
</section>

<!-- STATS -->
<div class="container mt-5">
    <div class="row g-4 text-center">
        <div class="col-md-4">
            <div class="stat-box">
                <h3>120+</h3>
                <p>Data Mobil</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="stat-box">
                <h3>80+</h3>
                <p>Mahasiswa</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="stat-box">
                <h3>50+</h3>
                <p>User Aktif</p>
            </div>
        </div>
    </div>
</div>

<!-- MENU -->
<div class="container mt-5">
    <div class="text-center mb-4">
        <h2>Menu Utama</h2>
        <p>Pilih fitur yang tersedia</p>
    </div>

    <div class="row g-4">

        <div class="col-md-4">
            <div class="card card-modern p-4 text-center">
                <div class="icon-box bg-blue">👤</div>
                <h5 class="mt-3">Register</h5>
                <p>Daftarkan akun baru</p>
                <a href="register.html" class="btn btn-primary">Masuk</a>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card card-modern p-4 text-center">
                <div class="icon-box bg-green">🚗</div>
                <h5 class="mt-3">Data Mobil</h5>
                <p>Kelola kendaraan</p>
                <a href="mobil.html" class="btn btn-success">Lihat</a>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card card-modern p-4 text-center">
                <div class="icon-box bg-orange">⚙️</div>
                <h5 class="mt-3">Services</h5>
                <p>Fitur tambahan sistem</p>
                <a href="#" class="btn btn-warning">Detail</a>
            </div>
        </div>

    </div>
</div>

<!-- FOOTER -->
<footer class="text-center mt-5 p-3">
    <p class="mb-0">© 2026 MyApp | UI Modern</p>
</footer>

<!-- JS -->
<script src="css/js/bootstrap.bundle.min.js"></script>

</body>
</html>