303 lines
8.8 KiB
PHP
303 lines
8.8 KiB
PHP
@extends('layouts.pustaka')
|
|
|
|
@section('title', 'Layanan - Pustaka Nawasena Bakorwil III Malang')
|
|
|
|
@section('content')
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
|
|
<div class="container py-5 page-container-nobar">
|
|
|
|
{{-- Header Section --}}
|
|
<div class="section-box text-center mt-4 mx-3 mx-md-5" data-aos="fade-up">
|
|
<h2 class="section-title-custom">Layanan Pustaka Nawasena</h2>
|
|
<p class="text-muted mx-auto" style="max-width: 700px; font-size: 0.95rem; line-height: 1.6;">
|
|
Pilih salah satu layanan berikut untuk mendukung kegiatan literasi, penelitian, dan pengembangan kebijakan di
|
|
<strong>Pustaka Nawasena Bakorwil III Malang</strong>.
|
|
</p>
|
|
<p class="hero-subtext mt-3">
|
|
Explore our library services — from reference and borrowing to digital access and consultation — designed to help you learn, research, and grow.
|
|
</p>
|
|
</div>
|
|
|
|
{{-- Grid Layanan --}}
|
|
<div class="section-box" data-aos="fade-up">
|
|
<h3 class="text-center fw-700 mb-4 text-dark" style="font-size: 1.5rem; letter-spacing: -0.5px;">Pilih Jenis Layanan</h3>
|
|
|
|
<div class="row g-4 mt-2 justify-content-center">
|
|
|
|
{{-- 1. Layanan Referensi --}}
|
|
<div class="col-lg-4 col-md-6 collection-item" data-aos="zoom-in" data-aos-delay="100">
|
|
<div class="card-inner">
|
|
<div class="img-wrapper">
|
|
<img src="{{ asset('images/layanan_referensi.jpg') }}" alt="Layanan Referensi" class="content-image">
|
|
</div>
|
|
<div class="card-body-custom">
|
|
<h5 class="fw-bold text-primary-custom">Layanan Referensi</h5>
|
|
<p class="text-muted small-text">
|
|
Panduan menemukan sumber informasi, literatur, dan dokumen penting untuk riset dan kebijakan.
|
|
</p>
|
|
<a href="{{ route('user.layanan.referensi') }}" class="btn btn-custom btn-sm w-100 fw-semibold mt-auto">
|
|
Selengkapnya <i class="bi bi-arrow-right-short"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 2. Layanan Sirkulasi --}}
|
|
<div class="col-lg-4 col-md-6 collection-item" data-aos="zoom-in" data-aos-delay="200">
|
|
<div class="card-inner">
|
|
<div class="img-wrapper">
|
|
<img src="{{ asset('images/layanan_peminjaman.jpg') }}" alt="Layanan Peminjaman" class="content-image">
|
|
</div>
|
|
<div class="card-body-custom">
|
|
<h5 class="fw-bold text-primary-custom">Layanan Peminjaman</h5>
|
|
<p class="text-muted small-text">
|
|
Akses koleksi fisik maupun digital dengan sistem peminjaman terintegrasi untuk anggota terdaftar.
|
|
</p>
|
|
<a href="{{ route('user.layanan.peminjaman') }}" class="btn btn-custom btn-sm w-100 fw-semibold mt-auto">
|
|
Selengkapnya <i class="bi bi-arrow-right-short"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 3. Layanan Digital --}}
|
|
<div class="col-lg-4 col-md-6 collection-item" data-aos="zoom-in" data-aos-delay="300">
|
|
<div class="card-inner">
|
|
<div class="img-wrapper">
|
|
<img src="{{ asset('images/layanan_digital.png') }}" alt="Layanan Digital" class="content-image">
|
|
</div>
|
|
<div class="card-body-custom">
|
|
<h5 class="fw-bold text-primary-custom">Layanan Digital</h5>
|
|
<p class="text-muted small-text">
|
|
Akses e-book, arsip digital, dan laporan kegiatan melalui portal daring Pustaka Nawasena.
|
|
</p>
|
|
<a href="{{ route('user.layanan.digital') }}" class="btn btn-custom btn-sm w-100 fw-semibold mt-auto">
|
|
Selengkapnya <i class="bi bi-arrow-right-short"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 4. Layanan Informasi --}}
|
|
<div class="col-lg-4 col-md-6 collection-item" data-aos="zoom-in" data-aos-delay="400">
|
|
<div class="card-inner">
|
|
<div class="img-wrapper">
|
|
<img src="{{ asset('images/layanan_informasi.jpg') }}" alt="Layanan Informasi" class="content-image">
|
|
</div>
|
|
<div class="card-body-custom">
|
|
<h5 class="fw-bold text-primary-custom">Informasi & Konsultasi</h5>
|
|
<p class="text-muted small-text">
|
|
Layanan konsultasi dan literasi digital untuk mendukung kebutuhan informasi pegawai dan mitra kerja.
|
|
</p>
|
|
<a href="{{ route('user.layanan.informasi') }}" class="btn btn-custom btn-sm w-100 fw-semibold mt-auto">
|
|
Selengkapnya <i class="bi bi-arrow-right-short"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 5. Manual Book --}}
|
|
<div class="col-lg-4 col-md-6 collection-item" data-aos="zoom-in" data-aos-delay="500">
|
|
<div class="card-inner highlight-manual">
|
|
<div class="img-wrapper">
|
|
<img src="{{ asset('images/manualbook.jpg') }}" alt="Manual Book" class="content-image">
|
|
</div>
|
|
<div class="card-body-custom">
|
|
<h5 class="fw-bold text-secondary-custom">Manual Book Sistem</h5>
|
|
<p class="text-muted small-text">
|
|
Panduan lengkap tata cara penggunaan fitur Sistem Pustaka Nawasena secara mandiri untuk pengguna.
|
|
</p>
|
|
<a href="{{ asset('pdf/manualbookuser.pdf') }}" target="_blank" class="btn btn-secondary-custom btn-sm w-100 fw-semibold mt-auto">
|
|
<i class="bi bi-file-pdf me-1"></i> Buka Manual Book
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<style>
|
|
/* 1. Menghilangkan Scrollbar di Samping Kanan Browser */
|
|
html, body {
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
}
|
|
::-webkit-scrollbar {
|
|
display: none; /* Chrome, Safari and Opera */
|
|
}
|
|
|
|
/* Base Style */
|
|
body {
|
|
background-color: #f8fafc !important;
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
color: #1e293b;
|
|
}
|
|
|
|
.fw-700 { font-weight: 700; }
|
|
|
|
/* Section Container Card */
|
|
.section-box {
|
|
background-color: #ffffff;
|
|
padding: 40px 35px;
|
|
margin-bottom: 35px;
|
|
border-radius: 16px;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
|
|
border: 1px solid #e2e8f0;
|
|
border-top: 4px solid #004d91; /* Aksen warna biru utama */
|
|
}
|
|
|
|
/* Title Header Style */
|
|
.section-title-custom {
|
|
font-size: 1.85rem;
|
|
color: #004d91;
|
|
font-weight: 800;
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
.section-title-custom::after {
|
|
content: '';
|
|
display: block;
|
|
width: 60px;
|
|
height: 3.5px;
|
|
background-color: #004d91;
|
|
border-radius: 5px;
|
|
margin: 12px auto 0;
|
|
}
|
|
|
|
.hero-subtext {
|
|
color: #475569;
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
font-size: 0.85rem;
|
|
font-style: italic;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Card Wrapper Layout */
|
|
.card-inner {
|
|
background: #ffffff;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 12px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.card-inner:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 12px 20px -8px rgba(0, 77, 145, 0.15);
|
|
border-color: #cbd5e1;
|
|
}
|
|
|
|
/* Efek khusus manual book agar kontras */
|
|
.highlight-manual {
|
|
border-left: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.img-wrapper {
|
|
width: 100%;
|
|
aspect-ratio: 16 / 9;
|
|
overflow: hidden;
|
|
background-color: #f1f5f9;
|
|
}
|
|
|
|
.content-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.5s ease;
|
|
}
|
|
|
|
.card-inner:hover .content-image {
|
|
transform: scale(1.04);
|
|
}
|
|
|
|
/* Card Typography */
|
|
.card-body-custom {
|
|
padding: 18px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.text-primary-custom {
|
|
color: #004d91;
|
|
font-size: 1.05rem;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.text-secondary-custom {
|
|
color: #475569;
|
|
font-size: 1.05rem;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.small-text {
|
|
font-size: 0.8rem;
|
|
line-height: 1.5;
|
|
color: #64748b;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
/* Button UI */
|
|
.btn-custom {
|
|
color: #004d91;
|
|
border: 1px solid #004d91;
|
|
background: transparent;
|
|
border-radius: 6px;
|
|
font-size: 0.75rem;
|
|
padding: 7px 12px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-custom:hover {
|
|
background: #004d91;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.btn-secondary-custom {
|
|
color: #475569;
|
|
border: 1px solid #94a3b8;
|
|
background: #f8fafc;
|
|
border-radius: 6px;
|
|
font-size: 0.75rem;
|
|
padding: 7px 12px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-secondary-custom:hover {
|
|
background: #475569;
|
|
color: #ffffff;
|
|
border-color: #475569;
|
|
}
|
|
|
|
/* Responsive Customization */
|
|
@media (max-width: 992px) {
|
|
.section-title-custom { font-size: 1.6rem; }
|
|
.section-box { padding: 30px 20px; }
|
|
}
|
|
@media (max-width: 576px) {
|
|
.section-title-custom { font-size: 1.4rem; }
|
|
.card-body-custom { padding: 15px; }
|
|
}
|
|
</style>
|
|
|
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
|
<script>
|
|
AOS.init({
|
|
duration: 800,
|
|
once: true,
|
|
offset: 40
|
|
});
|
|
</script>
|
|
@endsection
|
|
|