E41220778
/
TIF_NGANJUK_E41220778
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor: Landing page and fixing a little bit bug

This commit is contained in:
zhadaarsita 2025-11-07 01:51:26 +07:00
parent f61187c5c0
commit a8ea989e4a
9 changed files with 593 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@ -1,5 +1,5 @@
{
"name": "perpus",
"name": "skripsi-perpus-fe",
"lockfileVersion": 3,
"requires": true,
"packages": {

184
resources/scss/_custom.scss
View File

@ -19,6 +19,190 @@
}
}
// ===================================
// LANDING PAGE CUSTOM STYLING
// ===================================
html {
scroll-behavior: smooth;
}
// Navbar Landing
.landing-navbar {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
z-index: 1050;
.navbar-brand {
font-size: 1.25rem;
i {
font-size: 1.5rem;
}
@media (max-width: 575.98px) {
font-size: 1.1rem;
i {
font-size: 1.25rem;
}
}
}
.navbar-toggler {
padding: 0.25rem 0.5rem;
&:focus {
box-shadow: none;
}
}
.navbar-nav {
.nav-link {
padding: 0.5rem 1rem;
color: #49769F;
&:hover, &.active {
color: #0A4174;
}
@media (max-width: 991.98px) {
padding: 0.5rem 0;
}
}
}
@media (max-width: 991.98px) {
.navbar-collapse {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid rgba(0, 0, 0, 0.1);
.navbar-nav {
text-align: left !important;
width: 100%;
}
.nav-item {
margin: 0 !important;
text-align: left !important;
}
.nav-link {
width: 100%;
justify-content: start;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
}
}
// Hero Section
.landing-hero-section {
background: linear-gradient(
135deg,
#0A4174 0%,
color.adjust(#0A4174, $lightness: 10%) 100%
);
padding: 60px 0;
@media (min-width: 992px) {
padding: 100px 0;
}
.btn-hero-solid {
background-color: #fff !important;
border-color: #fff !important;
color: $primary !important; /* Menggunakan warna primary Anda #0A4174 */
&:hover {
background-color: lighten($primary, 70%) !important; /* Sedikit keabu-abuan saat hover */
border-color: lighten($primary, 70%) !important;
color: $primary !important;
}
}
}
.landing-hero-illustration {
width: 180px;
height: 180px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
i {
font-size: 5rem;
}
@media (min-width: 1200px) {
width: 220px;
height: 220px;
i {
font-size: 6rem;
}
}
}
.card-img-top {
height: 200px;
object-fit: cover;
}
.card-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.4;
min-height: 2.8rem;
font-size: 0.9rem;
@media (max-width: 575.98px) {
font-size: 0.85rem;
min-height: 2.4rem;
}
}
// Stat Card
.landing-stat-card {
transition: all 0.3s ease;
&:hover {
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12) !important;
}
h2 {
font-size: 2rem;
@media (min-width: 768px) {
font-size: 2.5rem;
}
}
}
// CTA Section
.landing-cta-section {
background: linear-gradient(
135deg,
#0A4174 0%,
color.adjust(#0A4174, $lightness: 10%) 100%
);
border-radius: 1rem;
@media (min-width: 768px) {
border-radius: 1.5rem;
}
}
// ===================================
// BASE COMPONENTS
// ===================================

2
resources/scss/_variables.scss
View File

@ -9,7 +9,7 @@ $theme-colors: (
"primary": #0A4174,
"secondary": #49769F,
"success": #14b8a6,
"info": #7BBDE8,
"info": #0c88db,
"warning": #fbb716,
"danger": #f43f5e,
);

2
resources/views/auth/login.blade.php
View File

@ -47,7 +47,7 @@
</div>
<div class="d-grid mt-4">
<button type="submit" class="btn btn-primary btn-lg">Masuk</button>
<button type="submit" class="btn btn-primary">Masuk</button>
</div>
<p class="mt-4 text-center text-muted small">

2
resources/views/katalog/index.blade.php
View File

@ -67,7 +67,7 @@ class="badge fw-normal {{ $buku['status'] == 'Tersedia' ? 'bg-success-subtle tex
<p class="card-text small text-muted mb-2">{{ $buku['penulis'] }}</p>
</div>
<div class="d-flex flex-column flex-sm-row gap-2 mt-auto pt-2 border-top">
<div class="d-flex flex-column gap-2 mt-auto pt-2 border-top">
@if ($mode === 'offline')
@if ($buku['status'] == 'Dipinjam')
<button class="btn btn-sm btn-secondary w-100" disabled>

2
resources/views/katalog/ringkasan.blade.php
View File

@ -30,7 +30,7 @@
</p>
<div class="mt-5">
<a href="{{ route($actionRoute, $buku['id']) }}" class="btn btn-primary btn-lg rounded-pill px-5 py-3">
<a href="{{ route($actionRoute, $buku['id']) }}" class="btn btn-primary rounded-pill py-3 px-4">
<i class="{{ $actionButtonIcon }} me-2"></i>
{{ $actionButtonText }}
</a>

2
resources/views/peminjaman/form.blade.php
View File

@ -120,7 +120,7 @@ class="rounded me-3 form-book-cover">
{{-- Tombol Kirim Form --}}
<div class="d-grid">
<button type="button" class="btn btn-primary btn-lg " data-bs-toggle="modal"
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#konfirmasiModal">
Kirim Form
</button>

76
resources/views/profile/index.blade.php
View File

@ -26,19 +26,23 @@ class="badge rounded-pill bg-success-subtle text-success-emphasis">{{ Str::title
</div>
{{-- Statistik Perpustakaan --}}
<div class="card border-0 flex-grow-1">
<div class="card-body p-3 p-md-4 d-flex flex-column h-100">
<h5 class="fw-bold mb-4">Statistik Perpustakaan</h5>
<div
class="d-flex flex-column flex-sm-row justify-content-around text-center stats-container flex-grow-1 align-items-center">
@foreach ($statistik as $stat)
<div class="flex-fill stat-item py-3">
<i class="bi {{ $stat['icon'] }} fs-1 text-{{ $stat['color'] }} mb-3"></i>
<h4 class="fw-bolder mb-2 mt-2">{{ $stat['value'] }}</h4>
<p class="text-muted mb-0">{{ $stat['label'] }}</p>
<div class="mb-3 mb-md-4 flex-grow-1">
<h5 class="fw-bold mb-3">Statistik Perpustakaan</h5>
<div class="row g-3">
@foreach ($statistik as $stat)
<div class="col-sm-6 col-lg-3">
<div class="card border-0 h-100">
<div class="card-body p-3 p-md-4 text-center">
<div class="icon-circle bg-{{ $stat['color'] }}-light mx-auto mb-3"
style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 15px;">
<i class="bi {{ $stat['icon'] }} fs-2 text-{{ $stat['color'] }}"></i>
</div>
<h3 class="fw-bold mb-2">{{ $stat['value'] }}</h3>
<p class="text-muted mb-0 small">{{ $stat['label'] }}</p>
</div>
</div>
@endforeach
</div>
</div>
@endforeach
</div>
</div>
</div>
@ -83,14 +87,10 @@ class="btn btn-outline-secondary rounded-pill w-100 py-2">
</div>
</div>
</div>
{{-- =================================================================== --}}
{{-- TAMPILAN PROFIL UNTUK GURU --}}
{{-- =================================================================== --}}
@elseif (Auth::user()->role == 'guru')
<div class="col-12">
<h1 class="h2 mb-3 mb-md-4">Profil Guru</h1>
</div>
{{-- =================================================================== --}}
{{-- TAMPILAN PROFIL UNTUK GURU --}}
{{-- =================================================================== --}}
<div class="row g-3 g-md-4 h-100">
{{-- Kolom Kiri: Info & Ringkasan Laporan --}}
<div class="col-lg-8 d-flex flex-column">
@ -164,14 +164,10 @@ class="badge bg-success rounded-pill">{{ $kategori['total_pembaca'] }}</span>
])
</div>
</div>
{{-- =================================================================== --}}
{{-- TAMPILAN PROFIL UNTUK SISWA (DEFAULT) --}}
{{-- =================================================================== --}}
@else
<div class="col-12">
<h1 class="h2 mb-3 mb-md-4">Profil Saya</h1>
</div>
{{-- =================================================================== --}}
{{-- TAMPILAN PROFIL UNTUK SISWA (DEFAULT) --}}
{{-- =================================================================== --}}
<div class="row g-3 g-md-4 h-100">
{{-- Kolom Kiri: Info & Statistik Siswa --}}
<div class="col-lg-8 d-flex flex-column">
@ -215,19 +211,23 @@ class="btn btn-outline-primary rounded-pill ms-md-auto">
</div>
{{-- Statistik Personal Siswa --}}
<div class="card border-0 flex-grow-1">
<div class="card-body p-3 p-md-4 d-flex flex-column h-100">
<h5 class="fw-bold mb-4">Statistik Saya</h5>
<div
class="d-flex flex-column flex-sm-row justify-content-around text-center stats-container flex-grow-1 align-items-center">
@foreach ($statistik as $stat)
<div class="flex-fill stat-item py-3">
<i class="bi {{ $stat['icon'] }} fs-1 text-{{ $stat['color'] }} mb-3"></i>
<h4 class="fw-bolder mb-2 mt-2">{{ $stat['value'] }}</h4>
<p class="text-muted mb-0">{{ $stat['label'] }}</p>
<div class="mb-3 mb-md-4 flex-grow-1">
<h5 class="fw-bold mb-3">Statistik Saya</h5>
<div class="row g-3">
@foreach ($statistik as $stat)
<div class="col-sm-6 col-lg-3">
<div class="card border-0 h-100">
<div class="card-body p-3 p-md-4 text-center">
<div class="icon-circle bg-{{ $stat['color'] }}-light mx-auto mb-3"
style="width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 15px;">
<i class="bi {{ $stat['icon'] }} fs-2 text-{{ $stat['color'] }}"></i>
</div>
<h3 class="fw-bold mb-2">{{ $stat['value'] }}</h3>
<p class="text-muted mb-0 small">{{ $stat['label'] }}</p>
</div>
</div>
@endforeach
</div>
</div>
@endforeach
</div>
</div>
</div>

499
resources/views/welcome.blade.php
View File

@ -1,153 +1,384 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" data-bs-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Selamat Datang di {{ config('app.name', 'Perpus Digital') }}</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'])
</head>
<body>
<!-- Hero Section -->
<div class="hero-gradient min-vh-100 d-flex align-items-center">
<div class="container py-5">
<div class="row align-items-center g-5">
<!-- Left Content -->
<div class="col-lg-6">
<div class="text-white mb-4 mb-lg-0">
<div class="badge bg-white text-primary px-3 py-2 mb-3" style="border-radius: 50px;">
<i class="bi bi-stars me-1"></i> Perpustakaan Digital
</div>
<h1 class="display-4 fw-bold mb-3">DIGIPUS.GO</h1>
<p class="fs-5 mb-4 opacity-75">
Gerbang menuju dunia pengetahuan tanpa batas. Akses ribuan koleksi buku digital dengan mudah.
</p>
<div class="row g-3 mt-4">
<div class="col-sm-6">
<div class="d-flex align-items-center gap-3">
<div class="icon-box bg-white bg-opacity-10 text-white" style="border-radius: 16px;">
<i class="bi bi-book"></i>
</div>
<body data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="56">
@php
// Dummy data untuk landing page (Hanya contoh)
$buku_unggulan = \App\Services\DummyDataService::getAllBooks()->take(6);
$stats = [
['label' => 'Koleksi Buku', 'value' => 12500, 'icon' => 'bi-bookshelf'],
['label' => 'Pengguna Aktif', 'value' => 4500, 'icon' => 'bi-person-lines-fill'],
['label' => 'Total Dibaca', 'value' => '900K+', 'icon' => 'bi-hand-thumbs-up-fill'],
['label' => 'Tahun Berdiri', 'value' => 2018, 'icon' => 'bi-clock-fill'],
];
@endphp
{{-- Navbar --}}
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm landing-navbar sticky-top" id="mainNav">
<div class="container">
<a class="navbar-brand fw-bold text-primary d-flex align-items-center" href="#">
<i class="bi bi-book-half me-2"></i>
<span>DIGIPUS.GO</span>
</a>
<button class="navbar-toggler border-0 p-0" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-lg-auto mb-2 mb-lg-0">
<li class="nav-item mx-md-3"><a class="nav-link active" href="#hero">Beranda</a></li>
<li class="nav-item mx-md-3"><a class="nav-link" href="#koleksi">Koleksi</a></li>
<li class="nav-item mx-md-3"><a class="nav-link" href="#fitur">Fitur</a></li>
<li class="nav-item mx-md-3"><a class="nav-link" href="#tentang">Tentang</a></li>
<li class="nav-item mx-md-3"><a class="nav-link" href="#bantuan">Bantuan</a></li>
</ul>
<div class="d-grid d-lg-block my-2 my-lg-0">
<div class="dropdown">
<button
class="btn btn-primary dropdown-toggle fw-semibold w-100 d-flex align-items-center justify-content-center justify-content-lg-start"
type="button" data-bs-toggle="dropdown" aria-expanded="false"
style="border-radius: 0.6rem;">
<i class="bi bi-person-circle me-1"></i>
<span>Masuk / Daftar</span>
</button>
<ul class="dropdown-menu dropdown-menu-end shadow border-0" style="border-radius: 12px;">
<h6 class="dropdown-header fw-bold small">Pilih Peran Anda</h6>
<li>
<a class="dropdown-item d-flex align-items-start gap-2"
href="{{ route('login', ['role' => 'siswa']) }}">
<i class="bi bi-person-badge text-primary"></i>
<div>
<div class="fw-semibold">Ribuan Buku</div>
<small class="opacity-75">Koleksi lengkap</small>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="d-flex align-items-center gap-3">
<div class="icon-box bg-white bg-opacity-10 text-white" style="border-radius: 16px;">
<i class="bi bi-clock"></i>
</div>
<div>
<div class="fw-semibold">Akses 24/7</div>
<small class="opacity-75">Kapan saja</small>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="d-flex align-items-center gap-3">
<div class="icon-box bg-white bg-opacity-10 text-white" style="border-radius: 16px;">
<i class="bi bi-phone"></i>
</div>
<div>
<div class="fw-semibold">Responsive</div>
<small class="opacity-75">Semua perangkat</small>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="d-flex align-items-center gap-3">
<div class="icon-box bg-white bg-opacity-10 text-white" style="border-radius: 16px;">
<i class="bi bi-shield-check"></i>
</div>
<div>
<div class="fw-semibold">Aman</div>
<small class="opacity-75">Data terlindungi</small>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Right Content - Login Card -->
<div class="col-lg-5 offset-lg-1">
<div class="card border-0 shadow-lg" style="border-radius: 32px;">
<div class="card-body p-5">
<!-- Logo -->
<div class="text-center mb-4">
<div class="icon-circle bg-primary-soft mx-auto mb-3" style="width: 90px; height: 90px; border-radius: 28px;">
<i class="bi bi-book-half text-primary" style="font-size: 2.5rem;"></i>
</div>
<h3 class="fw-bold mb-2">Selamat Datang</h3>
<p class="text-muted mb-0">Pilih peran Anda untuk melanjutkan</p>
</div>
<!-- Role Options -->
<div class="d-grid gap-3 mb-4">
<!-- Siswa -->
<a href="{{ route('login', ['role' => 'siswa']) }}" class="role-card text-decoration-none">
<div class="card h-100 border-0 bg-light">
<div class="card-body p-4">
<div class="d-flex align-items-center gap-3">
<div class="icon-circle bg-primary text-white flex-shrink-0" style="border-radius: 20px;">
<i class="bi bi-person-badge fs-4"></i>
</div>
<div class="flex-grow-1">
<h5 class="mb-1 fw-bold">Siswa</h5>
<p class="mb-0 text-muted small">Pinjam dan baca buku digital</p>
</div>
<i class="bi bi-arrow-right-circle fs-3 text-primary"></i>
</div>
</div>
<div class="fw-semibold small">Siswa</div>
<small class="text-muted d-block" style="font-size: 0.75rem;">Pinjam & Baca
Buku</small>
</div>
</a>
<!-- Guru -->
<a href="{{ route('login', ['role' => 'guru']) }}" class="role-card text-decoration-none">
<div class="card h-100 border-0 bg-light">
<div class="card-body p-4">
<div class="d-flex align-items-center gap-3">
<div class="icon-circle bg-success text-white flex-shrink-0" style="border-radius: 20px;">
<i class="bi bi-person-workspace fs-4"></i>
</div>
<div class="flex-grow-1">
<h5 class="mb-1 fw-bold">Guru</h5>
<p class="mb-0 text-muted small">Kelola dan rekomendasikan buku</p>
</div>
<i class="bi bi-arrow-right-circle fs-3 text-success"></i>
</div>
</div>
</li>
<li>
<a class="dropdown-item d-flex align-items-start gap-2"
href="{{ route('login', ['role' => 'guru']) }}">
<i class="bi bi-person-workspace text-success"></i>
<div>
<div class="fw-semibold small">Guru</div>
<small class="text-muted d-block" style="font-size: 0.75rem;">Kelola
Buku</small>
</div>
</a>
</div>
<!-- Divider -->
<div class="text-center mb-3">
<span class="text-muted small">atau</span>
</div>
<!-- Admin Link -->
<div class="text-center">
<a href="{{ route('admin.login') }}" class="btn btn-outline-secondary" style="border-radius: 16px;">
<i class="bi bi-shield-lock me-2"></i>Login sebagai Petugas
</li>
<li>
<hr class="dropdown-divider my-1">
</li>
<li>
<a class="dropdown-item d-flex align-items-center gap-2 text-danger"
href="{{ route('admin.login') }}">
<i class="bi bi-shield-lock"></i>
<div class="fw-semibold small">Login Petugas</div>
</a>
</div>
</div>
</div>
<!-- Footer Info -->
<div class="text-center mt-3">
<small class="text-white opacity-75">
<i class="bi bi-info-circle me-1"></i>
Butuh bantuan? Hubungi petugas perpustakaan
</small>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
<main>
{{-- Hero Section --}}
<section id="hero" class="landing-hero-section text-white">
<div class="container py-5">
<div class="row align-items-center g-5">
<div class="col-lg-7">
<div class="badge bg-white text-primary px-3 py-2 mb-3" style="border-radius: 50px;">
<i class="bi bi-stars me-1"></i> Perpustakaan Digital
</div>
<h1 class="display-3 fw-bold mb-4">Jelajahi Ribuan Buku Digital di Satu Tempat</h1>
<p class="fs-5 mb-5 opacity-75">
Gerbang menuju dunia pengetahuan tanpa batas. Akses ribuan koleksi buku digital, kapan saja,
di mana saja, dan tingkatkan minat baca Anda.
</p>
<div class="d-grid gap-3 d-sm-flex">
<a href="#koleksi" class="btn fw-semibold btn-hero-solid" style="border-radius: 12px;">
<i class="bi bi-search me-2"></i> Mulai Membaca
</a>
</div>
</div>
<div class="col-lg-5 d-none d-lg-block text-center">
<div class="landing-hero-illustration text-white ms-auto">
<i class="bi bi-book-half"></i>
</div>
</div>
</div>
</div>
</section>
<div class="py-3"></div>
{{-- Koleksi Section --}}
<section id="koleksi" class="py-5">
<div class="container">
<h2 class="text-center fw-bold mb-5">Koleksi Unggulan Terbaru</h2>
<div class="row g-4 mb-4 justify-content-center">
@foreach ($buku_unggulan as $buku)
<div class="col-6 col-md-4 col-lg-2">
<div class="card h-100 border-0 shadow-sm">
<img src="{{ asset($buku['cover']) }}" class="card-img-top"
alt="Cover {{ $buku['judul'] }}">
<div class="card-body p-3">
<span
class="badge bg-primary-soft text-primary small mb-2">{{ $buku['kategori'] }}</span>
<h6 class="card-title fw-bold mb-1">{{ $buku['judul'] }}</h6>
<p class="card-text small text-muted mb-1">{{ $buku['penulis'] }}</p>
<div class="small text-warning">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i
class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i
class="bi bi-star-half"></i>
(4.5)
</div>
</div>
</div>
</div>
@endforeach
</div>
</div>
</section>
<div class="py-3"></div>
<section id="fitur" class="py-5 bg-light">
<div class="container">
<div class="text-center mb-5">
<span class="badge bg-secondary-soft text-secondary px-3 py-2 mb-3" style="border-radius: 50px;">
Keunggulan Kami
</span>
<h2 class="fw-bold mb-3">Manfaat Menggunakan DIGIPUS.GO</h2>
<p class="lead text-muted">Akses mudah, koleksi lengkap, pengalaman membaca yang lebih baik.</p>
</div>
<div class="row g-4">
<div class="col-md-4">
<div class="card h-100 p-4 border-0 shadow-sm">
<div class="icon-circle bg-primary-soft text-primary mb-3"
style="width: 50px; height: 50px; border-radius: 10px;">
<i class="bi bi-wifi"></i>
</div>
<h5 class="fw-bold">Akses Online & Offline</h5>
<p class="text-muted mb-0">Baca kapan saja. Unduh buku untuk dibaca tanpa koneksi internet.
</p>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 p-4 border-0 shadow-sm">
<div class="icon-circle bg-success-soft text-success mb-3"
style="width: 50px; height: 50px; border-radius: 10px;">
<i class="bi bi-clock-history"></i>
</div>
<h5 class="fw-bold">Peminjaman Digital Otomatis</h5>
<p class="text-muted mb-0">Proses pinjam dan kembali tercatat otomatis, bebas antri.</p>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 p-4 border-0 shadow-sm">
<div class="icon-circle bg-warning-soft text-warning mb-3"
style="width: 50px; height: 50px; border-radius: 10px;">
<i class="bi bi-lightbulb-fill"></i>
</div>
<h5 class="fw-bold">Rekomendasi Personal</h5>
<p class="text-muted mb-0">Temukan buku baru berdasarkan minat dan riwayat baca Anda.</p>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 p-4 border-0 shadow-sm">
<div class="icon-circle bg-info-soft text-info mb-3"
style="width: 50px; height: 50px; border-radius: 10px;">
<i class="bi bi-phone"></i>
</div>
<h5 class="fw-bold">Akses 24/7 Responsif</h5>
<p class="text-muted mb-0">Tersedia 24 jam sehari, 7 hari seminggu, di semua perangkat.</p>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 p-4 border-0 shadow-sm">
<div class="icon-circle bg-danger-soft text-danger mb-3"
style="width: 50px; height: 50px; border-radius: 10px;">
<i class="bi bi-journal-bookmark-fill"></i>
</div>
<h5 class="fw-bold">Tandai & Simpan</h5>
<p class="text-muted mb-0">Buat koleksi pribadi, tandai halaman penting, dan lanjutkan
bacaan Anda.</p>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 p-4 border-0 shadow-sm">
<div class="icon-circle bg-dark-soft text-dark mb-3"
style="width: 50px; height: 50px; border-radius: 10px;">
<i class="bi bi-cloud-arrow-up-fill"></i>
</div>
<h5 class="fw-bold">Konten Selalu Baru</h5>
<p class="text-muted mb-0">Ribuan buku dan modul pembelajaran terbaru ditambahkan setiap
bulan.</p>
</div>
</div>
</div>
</div>
</section>
<div class="py-3"></div>
<section id="tentang" class="py-5">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-lg-6 order-lg-2">
</div>
<div class="col-lg-6 order-lg-1">
<span class="badge bg-primary-soft text-primary px-3 py-2 mb-3" style="border-radius: 50px;">
Tentang Kami
</span>
<h2 class="fw-bold mb-4">Misi Kami: Mencerdaskan Bangsa Melalui Akses Digital</h2>
<p class="lead text-muted">
**DIGIPUS.GO** adalah platform perpustakaan digital resmi yang dikelola untuk institusi
pendidikan. Kami bertujuan menyediakan akses mudah, cepat, dan merata terhadap sumber daya
pengetahuan berkualitas tinggi bagi seluruh siswa dan staf pengajar.
</p>
<ul class="list-unstyled text-muted">
<li class="mb-2"><i class="bi bi-check-circle-fill text-primary me-2"></i> Mewujudkan
ekosistem literasi digital yang inklusif.</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-primary me-2"></i> Mendukung
proses pembelajaran berbasis teknologi.</li>
<li class="mb-2"><i class="bi bi-check-circle-fill text-primary me-2"></i> Menjadikan
membaca sebagai kebiasaan sehari-hari.</li>
</ul>
</div>
</div>
</div>
</section>
<div class="py-3"></div>
<section id="statistik" class="py-5 bg-primary-light">
<div class="container">
<h2 class="text-center fw-bold mb-5 text-dark">DIGIPUS.GO Dalam Angka</h2>
<div class="row g-4 text-center">
@foreach ($stats as $stat)
<div class="col-sm-6 col-md-3">
<div class="p-4 bg-white shadow-sm h-100 landing-stat-card" style="border-radius: 1rem;">
<i class="bi {{ $stat['icon'] }} display-5 text-primary mb-3"></i>
<h2 class="fw-bold text-dark mb-1">{{ $stat['value'] }}</h2>
<p class="text-muted fw-semibold mb-0">{{ $stat['label'] }}</p>
</div>
</div>
@endforeach
</div>
</div>
</section>
<div class="py-3"></div>
<section id="bantuan" class="py-5">
<div class="container">
<div class="text-center p-5 text-white landing-cta-section">
<h2 class="display-6 fw-bold mb-3">Siap Memulai Petualangan Membaca Anda?</h2>
<p class="lead opacity-75 mb-4">Baca sekarang dan akses ribuan koleksi buku digital gratis!</p>
<a href="{{ route('login', ['role' => 'siswa']) }}" class="btn btn-warning btn-lg fw-bold"
style="border-radius: 12px;" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-fill-add me-2"></i> Baca Sekarang
</a>
</div>
</div>
</section>
</main>
<footer class="mt-5 py-5 landing-footer bg-primary">
<div class="container">
<div class="row g-4">
<div class="col-md-4">
<div class="d-flex align-items-center mb-3">
<i class="bi bi-book-half text-white fs-2 me-2"></i>
<h5 class="fw-bold text-white mb-0">DIGIPUS.GO</h5>
</div>
<p class="small text-white-50">Gerbang digital untuk seluruh koleksi buku pendidikan dan umum.
Dikelola oleh [Nama Institusi/Sekolah Anda].</p>
<div class="d-flex gap-3 fs-5">
<a href="#" class="text-white-50"><i class="bi bi-twitter"></i></a>
<a href="#" class="text-white-50"><i class="bi bi-facebook"></i></a>
<a href="#" class="text-white-50"><i class="bi bi-instagram"></i></a>
</div>
</div>
<div class="col-6 col-md-2">
<h6 class="text-white fw-bold mb-3">Link Cepat</h6>
<ul class="list-unstyled small">
<li class="mb-2"><a href="#tentang" class="text-decoration-none text-white-50">Tentang</a>
</li>
<li class="mb-2"><a href="#koleksi" class="text-decoration-none text-white-50">Koleksi</a>
</li>
<li class="mb-2"><a href="#fitur" class="text-decoration-none text-white-50">Fitur</a>
</li>
<li class="mb-2"><a href="#statistik"
class="text-decoration-none text-white-50">Statistik</a></li>
</ul>
</div>
<div class="col-6 col-md-3">
<h6 class="text-white fw-bold mb-3">Informasi Hukum</h6>
<ul class="list-unstyled small">
<li class="mb-2"><a href="#" class="text-decoration-none text-white-50">Kebijakan
Privasi</a></li>
<li class="mb-2"><a href="#" class="text-decoration-none text-white-50">Syarat
Penggunaan</a></li>
<li class="mb-2"><a href="#" class="text-decoration-none text-white-50">Bantuan</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h6 class="text-white fw-bold mb-3">Hubungi Kami</h6>
<ul class="list-unstyled small">
<li class="mb-2 text-white-50"><i class="bi bi-envelope-fill me-2"></i> admin@digipus.go.id
</li>
<li class="mb-2 text-white-50"><i class="bi bi-telephone-fill me-2"></i> (021) 1234 5678</li>
<li class="mb-2 text-white-50"><i class="bi bi-geo-alt-fill me-2"></i> [Alamat Pustaka Anda]
</li>
</ul>
</div>
</div>
<hr class="mt-4 border-secondary opacity-25">
<div class="text-center small text-white-50">
&copy; {{ date('Y') }} DIGIPUS.GO. Hak Cipta Dilindungi.
</div>
</div>
</footer>
<script>
document.querySelectorAll('#navbarNav .nav-link').forEach(link => {
link.addEventListener('click', () => {
const navbarCollapse = document.getElementById('navbarNav');
if (navbarCollapse.classList.contains('show')) {
new bootstrap.Collapse(navbarCollapse, {
toggle: false
}).hide();
}
});
});
</script>
</body>
</html>
</html>