<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Laravel') }}</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    @vite(['resources/scss/app.scss', 'resources/js/app.js'])

    <style>
        .info-panel {
            background-color: var(--bs-primary);
        }
        .info-svg {
            max-width: 400px;
            width: 80%;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row min-vh-100">

            <div class="col-lg-7 d-none d-lg-flex flex-column justify-content-center align-items-center info-panel text-white p-5">
                <div class="text-center">
                    <i class="bi bi-book-half" style="font-size: 4rem;"></i>
                    <h1 class="display-4 fw-bold mt-3">Perpus Digital</h1>
                    <p class="lead mt-3">Gerbang Anda menuju dunia pengetahuan. Jelajahi ribuan koleksi buku digital, pinjam dengan mudah, dan lacak progres membaca Anda.</p>
                </div>
            </div>

            <div class="col-lg-5 d-flex flex-column justify-content-center align-items-center bg-light p-4">
                <div class="card shadow-lg border-0 p-4 p-md-5" style="max-width: 450px; width: 100%;">
                    {{ $slot }}
                </div>
            </div>

        </div>
    </div>
</body>
</html>