411 lines
21 KiB
PHP
411 lines
21 KiB
PHP
<!DOCTYPE html>
|
|
<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 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" 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-auto mb-2 mb-lg-0">
|
|
<li class="nav-item">
|
|
<a class="nav-link-landing active" href="#hero">Beranda</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link-landing" href="#koleksi">Koleksi</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link-landing" href="#fitur">Fitur</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link-landing" href="#tentang">Tentang</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link-landing" href="#bantuan">Bantuan</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="d-grid d-lg-block my-3 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"
|
|
type="button" data-bs-toggle="dropdown" aria-expanded="false"
|
|
style="border-radius: 0.6rem; padding: 0.5rem 1.25rem;">
|
|
<i class="bi bi-person-circle me-2"></i>
|
|
<span>Masuk</span>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end shadow-sm border-0 mt-2 p-2"
|
|
style="border-radius: 12px; min-width: 250px;">
|
|
<li class="px-3 py-2">
|
|
<h6 class="fw-bold text-muted mb-0" style="font-size: 0.75rem;">PILIH PERAN ANDA</h6>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item d-flex align-items-start gap-3 py-2 rounded"
|
|
href="{{ route('login', ['role' => 'siswa']) }}">
|
|
<i class="bi bi-person-badge text-primary" style="font-size: 1.25rem;"></i>
|
|
<div>
|
|
<div class="fw-semibold">Siswa</div>
|
|
<small class="text-muted d-block" style="font-size: 0.75rem;">Pinjam & Baca
|
|
Buku</small>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item d-flex align-items-start gap-3 py-2 rounded"
|
|
href="{{ route('login', ['role' => 'guru']) }}">
|
|
<i class="bi bi-person-workspace text-success" style="font-size: 1.25rem;"></i>
|
|
<div>
|
|
<div class="fw-semibold">Guru</div>
|
|
<small class="text-muted d-block" style="font-size: 0.75rem;">Pinjam, Baca &
|
|
Pantau Laporan</small>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<hr class="dropdown-divider my-2">
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item d-flex align-items-center gap-3 text-danger py-2 rounded"
|
|
href="{{ route('admin.login') }}">
|
|
<i class="bi bi-shield-lock" style="font-size: 1.25rem;"></i>
|
|
<div class="fw-semibold">Login Petugas</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</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; padding: 0.75rem 2rem;">
|
|
<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 mx-auto">
|
|
<img src="{{ asset('images/assets/hero-image.svg') }}" alt="Hero Illustration"
|
|
class="img-fluid" style="max-width: 100%; height: auto;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="py-2"></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-2"></div>
|
|
|
|
{{-- Fitur Section --}}
|
|
<section id="fitur" class="py-5 bg-light">
|
|
<div class="container">
|
|
<div class="text-center mb-5">
|
|
<span class="badge bg-primary-soft text-primary 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 border border-2 border-primary 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 border border-2 border-primary text-primary 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 border border-2 border-primary text-primary 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 border border-2 border-primary text-primary 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 border border-2 border-primary text-primary 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 border border-2 border-primary text-primary 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-2"></div>
|
|
|
|
{{-- About Section --}}
|
|
<section id="tentang" class="py-5">
|
|
<div class="container">
|
|
<div class="row align-items-center g-5">
|
|
|
|
{{-- Bagian Logo (Kolom Kanan) --}}
|
|
<div class="col-lg-6 order-lg-2 text-center">
|
|
<img src="{{ asset('images/assets/logo-smp.png') }}" alt="Logo SMPN 1 Bagor" class="img-fluid"
|
|
style="max-width: 250px; height: auto;">
|
|
</div>
|
|
|
|
{{-- Bagian Teks (Kolom Kiri) --}}
|
|
<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">
|
|
<strong class="fw-semibold">DIGIPUS.GO</strong> adalah platform perpustakaan digital resmi
|
|
milik
|
|
<strong class="text-primary">SMPN 1 Bagor</strong>.
|
|
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>
|
|
|
|
{{-- Statistik Section --}}
|
|
<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>
|
|
|
|
{{-- CTA Section --}}
|
|
<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 Section --}}
|
|
<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> smpn1bagor@yahoo.co.id
|
|
</li>
|
|
<li class="mb-2 text-white-50"><i class="bi bi-telephone-fill me-2"></i> (+62) 856-0642-8357</li>
|
|
<li class="mb-2 text-white-50"><i class="bi bi-geo-alt-fill me-2"></i> Banaran Kulon, Kec. Bagor, Kabupaten Nganjuk, Jawa Timur 64461
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="mt-4 border-secondary opacity-25">
|
|
<div class="text-center small text-white-50">
|
|
© {{ 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> |