@extends('admin.layouts.app')

@section('content')
<!-- Google Web Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@600;700&family=Montserrat:wght@200;400;600&display=swap" rel="stylesheet"> 

<!-- Icon Font Stylesheet -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">

<style>
    .card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }
    .card-body i {
        transition: color 0.3s ease;
    }
    .card:hover .card-body i {
        color: #6a11cb;
    }
    .btn {
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }
    .btn:hover {
        background-color: #6a11cb !important;
        border-color: #6a11cb !important;
    }
</style>

<div class="container py-4">
    <h4 class="mb-4 text-primary">Dashboard Admin</h4>

    <div class="row g-4">
        <!-- Card 1 -->
        <div class="col-md-4">
            <div class="card shadow-sm">
                <div class="card-body text-center">
                    <i class="fas fa-images fa-3x text-primary mb-3"></i>
                    <h5 class="fw-bold">Kelola Galeri</h5>
                    <a href="{{ route('admin.galeri.index') }}" class="btn btn-primary btn-sm mt-2">Masuk</a>
                </div>
            </div>
        </div>

        <!-- Card 2 -->
        <div class="col-md-4">
            <div class="card shadow-sm">
                <div class="card-body text-center">
                    <i class="fas fa-calendar-alt fa-3x text-success mb-3"></i>
                    <h5 class="fw-bold">Kelola Kegiatan</h5>
                    <a href="{{ route('admin.kegiatan.index') }}" class="btn btn-success btn-sm mt-2">Masuk</a>
                </div>
            </div>
        </div>

        <!-- Card 3 -->
        <div class="col-md-4">
            <div class="card shadow-sm">
                <div class="card-body text-center">
                    <i class="fas fa-book fa-3x text-warning mb-3"></i>
                    <h5 class="fw-bold">Kelola Program</h5>
                    <a href="{{ route('admin.program.index') }}" class="btn btn-warning btn-sm mt-2">Masuk</a>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection