Refactor: Landing page and fixing a little bit bug
This commit is contained in:
zhadaarsita
parent
f61187c5c0
commit
a8ea989e4a
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"name": "perpus",
|
"name": "skripsi-perpus-fe",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
|
|
|
||||||
|
|
@ -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
|
// BASE COMPONENTS
|
||||||
// ===================================
|
// ===================================
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@ $theme-colors: (
|
||||||
"primary": #0A4174,
|
"primary": #0A4174,
|
||||||
"secondary": #49769F,
|
"secondary": #49769F,
|
||||||
"success": #14b8a6,
|
"success": #14b8a6,
|
||||||
"info": #7BBDE8,
|
"info": #0c88db,
|
||||||
"warning": #fbb716,
|
"warning": #fbb716,
|
||||||
"danger": #f43f5e,
|
"danger": #f43f5e,
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -47,7 +47,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="d-grid mt-4">
|
<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>
|
</div>
|
||||||
|
|
||||||
<p class="mt-4 text-center text-muted small">
|
<p class="mt-4 text-center text-muted small">
|
||||||
|
|
|
||||||
|
|
@ -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>
|
<p class="card-text small text-muted mb-2">{{ $buku['penulis'] }}</p>
|
||||||
</div>
|
</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 ($mode === 'offline')
|
||||||
@if ($buku['status'] == 'Dipinjam')
|
@if ($buku['status'] == 'Dipinjam')
|
||||||
<button class="btn btn-sm btn-secondary w-100" disabled>
|
<button class="btn btn-sm btn-secondary w-100" disabled>
|
||||||
|
|
|
||||||
|
|
@ -30,7 +30,7 @@
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="mt-5">
|
<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>
|
<i class="{{ $actionButtonIcon }} me-2"></i>
|
||||||
{{ $actionButtonText }}
|
{{ $actionButtonText }}
|
||||||
</a>
|
</a>
|
||||||
|
|
|
||||||
|
|
@ -120,7 +120,7 @@ class="rounded me-3 form-book-cover">
|
||||||
|
|
||||||
{{-- Tombol Kirim Form --}}
|
{{-- Tombol Kirim Form --}}
|
||||||
<div class="d-grid">
|
<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">
|
data-bs-target="#konfirmasiModal">
|
||||||
Kirim Form
|
Kirim Form
|
||||||
</button>
|
</button>
|
||||||
|
|
|
||||||
|
|
@ -26,22 +26,26 @@ class="badge rounded-pill bg-success-subtle text-success-emphasis">{{ Str::title
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{-- Statistik Perpustakaan --}}
|
{{-- Statistik Perpustakaan --}}
|
||||||
<div class="card border-0 flex-grow-1">
|
<div class="mb-3 mb-md-4 flex-grow-1">
|
||||||
<div class="card-body p-3 p-md-4 d-flex flex-column h-100">
|
<h5 class="fw-bold mb-3">Statistik Perpustakaan</h5>
|
||||||
<h5 class="fw-bold mb-4">Statistik Perpustakaan</h5>
|
<div class="row g-3">
|
||||||
<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)
|
@foreach ($statistik as $stat)
|
||||||
<div class="flex-fill stat-item py-3">
|
<div class="col-sm-6 col-lg-3">
|
||||||
<i class="bi {{ $stat['icon'] }} fs-1 text-{{ $stat['color'] }} mb-3"></i>
|
<div class="card border-0 h-100">
|
||||||
<h4 class="fw-bolder mb-2 mt-2">{{ $stat['value'] }}</h4>
|
<div class="card-body p-3 p-md-4 text-center">
|
||||||
<p class="text-muted mb-0">{{ $stat['label'] }}</p>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
@endforeach
|
@endforeach
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{{-- Kolom Kanan: Pintasan & Aktivitas --}}
|
{{-- Kolom Kanan: Pintasan & Aktivitas --}}
|
||||||
<div class="col-lg-4 d-flex flex-column">
|
<div class="col-lg-4 d-flex flex-column">
|
||||||
|
|
@ -83,14 +87,10 @@ class="btn btn-outline-secondary rounded-pill w-100 py-2">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@elseif (Auth::user()->role == 'guru')
|
||||||
{{-- =================================================================== --}}
|
{{-- =================================================================== --}}
|
||||||
{{-- TAMPILAN PROFIL UNTUK GURU --}}
|
{{-- 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>
|
|
||||||
<div class="row g-3 g-md-4 h-100">
|
<div class="row g-3 g-md-4 h-100">
|
||||||
{{-- Kolom Kiri: Info & Ringkasan Laporan --}}
|
{{-- Kolom Kiri: Info & Ringkasan Laporan --}}
|
||||||
<div class="col-lg-8 d-flex flex-column">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
@else
|
||||||
{{-- =================================================================== --}}
|
{{-- =================================================================== --}}
|
||||||
{{-- TAMPILAN PROFIL UNTUK SISWA (DEFAULT) --}}
|
{{-- TAMPILAN PROFIL UNTUK SISWA (DEFAULT) --}}
|
||||||
{{-- =================================================================== --}}
|
{{-- =================================================================== --}}
|
||||||
@else
|
|
||||||
<div class="col-12">
|
|
||||||
<h1 class="h2 mb-3 mb-md-4">Profil Saya</h1>
|
|
||||||
</div>
|
|
||||||
<div class="row g-3 g-md-4 h-100">
|
<div class="row g-3 g-md-4 h-100">
|
||||||
{{-- Kolom Kiri: Info & Statistik Siswa --}}
|
{{-- Kolom Kiri: Info & Statistik Siswa --}}
|
||||||
<div class="col-lg-8 d-flex flex-column">
|
<div class="col-lg-8 d-flex flex-column">
|
||||||
|
|
@ -215,22 +211,26 @@ class="btn btn-outline-primary rounded-pill ms-md-auto">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{-- Statistik Personal Siswa --}}
|
{{-- Statistik Personal Siswa --}}
|
||||||
<div class="card border-0 flex-grow-1">
|
<div class="mb-3 mb-md-4 flex-grow-1">
|
||||||
<div class="card-body p-3 p-md-4 d-flex flex-column h-100">
|
<h5 class="fw-bold mb-3">Statistik Saya</h5>
|
||||||
<h5 class="fw-bold mb-4">Statistik Saya</h5>
|
<div class="row g-3">
|
||||||
<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)
|
@foreach ($statistik as $stat)
|
||||||
<div class="flex-fill stat-item py-3">
|
<div class="col-sm-6 col-lg-3">
|
||||||
<i class="bi {{ $stat['icon'] }} fs-1 text-{{ $stat['color'] }} mb-3"></i>
|
<div class="card border-0 h-100">
|
||||||
<h4 class="fw-bolder mb-2 mt-2">{{ $stat['value'] }}</h4>
|
<div class="card-body p-3 p-md-4 text-center">
|
||||||
<p class="text-muted mb-0">{{ $stat['label'] }}</p>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
@endforeach
|
@endforeach
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{{-- Kolom Kanan: Aktivitas Personal Siswa --}}
|
{{-- Kolom Kanan: Aktivitas Personal Siswa --}}
|
||||||
<div class="col-lg-4">
|
<div class="col-lg-4">
|
||||||
|
|
|
||||||
|
|
@ -1,153 +1,384 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" data-bs-theme="light">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Selamat Datang di {{ config('app.name', 'Perpus Digital') }}</title>
|
<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">
|
<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'])
|
@vite(['resources/scss/app.scss', 'resources/js/app.js'])
|
||||||
</head>
|
</head>
|
||||||
<body>
|
|
||||||
<!-- Hero Section -->
|
<body data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="56">
|
||||||
<div class="hero-gradient min-vh-100 d-flex align-items-center">
|
|
||||||
|
@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 small">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-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>
|
||||||
|
</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>
|
||||||
|
</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="container py-5">
|
||||||
<div class="row align-items-center g-5">
|
<div class="row align-items-center g-5">
|
||||||
<!-- Left Content -->
|
<div class="col-lg-7">
|
||||||
<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;">
|
<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
|
<i class="bi bi-stars me-1"></i> Perpustakaan Digital
|
||||||
</div>
|
</div>
|
||||||
<h1 class="display-4 fw-bold mb-3">DIGIPUS.GO</h1>
|
<h1 class="display-3 fw-bold mb-4">Jelajahi Ribuan Buku Digital di Satu Tempat</h1>
|
||||||
<p class="fs-5 mb-4 opacity-75">
|
<p class="fs-5 mb-5 opacity-75">
|
||||||
Gerbang menuju dunia pengetahuan tanpa batas. Akses ribuan koleksi buku digital dengan mudah.
|
Gerbang menuju dunia pengetahuan tanpa batas. Akses ribuan koleksi buku digital, kapan saja,
|
||||||
|
di mana saja, dan tingkatkan minat baca Anda.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="row g-3 mt-4">
|
<div class="d-grid gap-3 d-sm-flex">
|
||||||
<div class="col-sm-6">
|
<a href="#koleksi" class="btn fw-semibold btn-hero-solid" style="border-radius: 12px;">
|
||||||
<div class="d-flex align-items-center gap-3">
|
<i class="bi bi-search me-2"></i> Mulai Membaca
|
||||||
<div class="icon-box bg-white bg-opacity-10 text-white" style="border-radius: 16px;">
|
</a>
|
||||||
<i class="bi bi-book"></i>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<div class="fw-semibold">Ribuan Buku</div>
|
</div>
|
||||||
<small class="opacity-75">Koleksi lengkap</small>
|
<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>
|
||||||
</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>
|
</section>
|
||||||
<div class="fw-semibold">Akses 24/7</div>
|
|
||||||
<small class="opacity-75">Kapan saja</small>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-6">
|
</div>
|
||||||
<div class="d-flex align-items-center gap-3">
|
@endforeach
|
||||||
<div class="icon-box bg-white bg-opacity-10 text-white" style="border-radius: 16px;">
|
</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>
|
<i class="bi bi-phone"></i>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<h5 class="fw-bold">Akses 24/7 Responsif</h5>
|
||||||
<div class="fw-semibold">Responsive</div>
|
<p class="text-muted mb-0">Tersedia 24 jam sehari, 7 hari seminggu, di semua perangkat.</p>
|
||||||
<small class="opacity-75">Semua perangkat</small>
|
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
<div class="col-sm-6">
|
<h5 class="fw-bold">Tandai & Simpan</h5>
|
||||||
<div class="d-flex align-items-center gap-3">
|
<p class="text-muted mb-0">Buat koleksi pribadi, tandai halaman penting, dan lanjutkan
|
||||||
<div class="icon-box bg-white bg-opacity-10 text-white" style="border-radius: 16px;">
|
bacaan Anda.</p>
|
||||||
<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 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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- Right Content - Login Card -->
|
<div class="py-3"></div>
|
||||||
<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 -->
|
<section id="tentang" class="py-5">
|
||||||
<div class="d-grid gap-3 mb-4">
|
<div class="container">
|
||||||
<!-- Siswa -->
|
<div class="row align-items-center g-5">
|
||||||
<a href="{{ route('login', ['role' => 'siswa']) }}" class="role-card text-decoration-none">
|
<div class="col-lg-6 order-lg-2">
|
||||||
<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>
|
|
||||||
</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>
|
||||||
<div class="flex-grow-1">
|
<div class="col-lg-6 order-lg-1">
|
||||||
<h5 class="mb-1 fw-bold">Guru</h5>
|
<span class="badge bg-primary-soft text-primary px-3 py-2 mb-3" style="border-radius: 50px;">
|
||||||
<p class="mb-0 text-muted small">Kelola dan rekomendasikan buku</p>
|
Tentang Kami
|
||||||
</div>
|
</span>
|
||||||
<i class="bi bi-arrow-right-circle fs-3 text-success"></i>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</section>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Divider -->
|
<div class="py-3"></div>
|
||||||
<div class="text-center mb-3">
|
|
||||||
<span class="text-muted small">atau</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Admin Link -->
|
<section id="statistik" class="py-5 bg-primary-light">
|
||||||
<div class="text-center">
|
<div class="container">
|
||||||
<a href="{{ route('admin.login') }}" class="btn btn-outline-secondary" style="border-radius: 16px;">
|
<h2 class="text-center fw-bold mb-5 text-dark">DIGIPUS.GO Dalam Angka</h2>
|
||||||
<i class="bi bi-shield-lock me-2"></i>Login sebagai Petugas
|
<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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
|
|
||||||
<!-- Footer Info -->
|
<div class="col-6 col-md-2">
|
||||||
<div class="text-center mt-3">
|
<h6 class="text-white fw-bold mb-3">Link Cepat</h6>
|
||||||
<small class="text-white opacity-75">
|
<ul class="list-unstyled small">
|
||||||
<i class="bi bi-info-circle me-1"></i>
|
<li class="mb-2"><a href="#tentang" class="text-decoration-none text-white-50">Tentang</a>
|
||||||
Butuh bantuan? Hubungi petugas perpustakaan
|
</li>
|
||||||
</small>
|
<li class="mb-2"><a href="#koleksi" class="text-decoration-none text-white-50">Koleksi</a>
|
||||||
</div>
|
</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>
|
||||||
</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>
|
||||||
</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>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue