444 lines
19 KiB
PHP
444 lines
19 KiB
PHP
@extends('layouts.layanan')
|
||
|
||
@section('content')
|
||
<!-- Memastikan font premium dan ikon Bootstrap ter-load -->
|
||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
||
|
||
<style>
|
||
/* 1. Menghilangkan Scrollbar di Samping Kanan Browser */
|
||
html, body {
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
}
|
||
::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
/* Core Variable Colors */
|
||
:root {
|
||
--pustaka-blue: #004d91;
|
||
--pustaka-dark: #002d5a;
|
||
--slate-50: #f8fafc;
|
||
--slate-100: #f1f5f9;
|
||
--slate-200: #e2e8f0;
|
||
--slate-600: #475569;
|
||
--slate-700: #334155;
|
||
--slate-900: #0f172a;
|
||
}
|
||
|
||
body {
|
||
background-color: #f8fafc !important;
|
||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||
color: var(--slate-900);
|
||
}
|
||
|
||
.hero-title-custom {
|
||
color: var(--pustaka-blue);
|
||
font-weight: 800;
|
||
letter-spacing: -1px;
|
||
}
|
||
|
||
/* Premium Sections Box */
|
||
.service-section-card {
|
||
background: #ffffff;
|
||
padding: 40px;
|
||
margin-bottom: 30px;
|
||
border-radius: 16px;
|
||
border: 1px solid var(--slate-200);
|
||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
|
||
}
|
||
|
||
.section-subtitle-premium {
|
||
color: var(--pustaka-blue);
|
||
font-weight: 700;
|
||
font-size: 1.25rem;
|
||
letter-spacing: -0.3px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
/* Table Customizations */
|
||
.table-premium {
|
||
border-collapse: separate;
|
||
border-spacing: 0;
|
||
}
|
||
.table-premium thead th {
|
||
background-color: var(--slate-100) !important;
|
||
color: var(--slate-700);
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
font-size: 0.75rem;
|
||
letter-spacing: 0.5px;
|
||
padding: 15px 20px;
|
||
border-bottom: 2px solid var(--slate-200);
|
||
}
|
||
.table-premium tbody td {
|
||
padding: 18px 20px;
|
||
color: var(--slate-700);
|
||
border-bottom: 1px solid var(--slate-100);
|
||
}
|
||
|
||
/* Grid Interactive Service Feature Cards */
|
||
.feature-subcard {
|
||
background: var(--slate-50);
|
||
border: 1px solid var(--slate-200);
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
height: 100%;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.feature-subcard:hover {
|
||
background: #ffffff;
|
||
border-color: var(--pustaka-blue);
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 10px 20px -5px rgba(0, 77, 145, 0.08);
|
||
}
|
||
.icon-box-premium {
|
||
width: 45px;
|
||
height: 45px;
|
||
background: rgba(0, 77, 145, 0.08);
|
||
color: var(--pustaka-blue);
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.25rem;
|
||
}
|
||
|
||
/* Modern Procedure Steps (Timeline Grid) */
|
||
.step-badge {
|
||
width: 32px;
|
||
height: 32px;
|
||
background: var(--pustaka-blue);
|
||
color: white;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 700;
|
||
font-size: 0.85rem;
|
||
}
|
||
.step-item {
|
||
position: relative;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
/* Contact Block Custom */
|
||
.contact-badge-info {
|
||
background: var(--slate-50);
|
||
border: 1px solid var(--slate-200);
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
}
|
||
.contact-link-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
color: var(--slate-700);
|
||
margin-bottom: 14px;
|
||
font-size: 0.9rem;
|
||
}
|
||
.contact-link-item i {
|
||
color: var(--pustaka-blue);
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
/* Alert Box Clean Accent */
|
||
.alert-premium-note {
|
||
background: rgba(0, 77, 145, 0.03);
|
||
border-left: 4px solid var(--pustaka-blue);
|
||
color: var(--slate-700);
|
||
border-radius: 0 12px 12px 0;
|
||
}
|
||
|
||
/* Main Action Button UI */
|
||
.btn-return-premium {
|
||
background: transparent;
|
||
color: var(--slate-600);
|
||
border: 1px solid var(--slate-300);
|
||
border-radius: 8px;
|
||
font-size: 0.85rem;
|
||
padding: 10px 20px;
|
||
transition: all 0.2s;
|
||
}
|
||
.btn-return-premium:hover {
|
||
background: var(--slate-100);
|
||
color: var(--slate-900);
|
||
}
|
||
</style>
|
||
|
||
<div class="container py-5">
|
||
|
||
{{-- Header Section --}}
|
||
<div class="text-center mb-5" data-aos="fade-up">
|
||
<span class="badge px-3 py-2 mb-2 text-uppercase fw-800 tracking-wider" style="background: rgba(0, 77, 145, 0.08); color: var(--pustaka-blue); font-size: 0.7rem;">
|
||
Layanan Inti Perpustakaan
|
||
</span>
|
||
<h2 class="hero-title-custom display-6 mb-3">Layanan Referensi</h2>
|
||
<p class="text-muted mx-auto fs-6" style="max-width: 800px; line-height: 1.7;">
|
||
Fasilitas khusus untuk mempermudah perolehan informasi faktual, data spesifik, dan sumber rujukan yang valid guna mendukung riset, pengambilan keputusan strategis, serta penulisan laporan kedinasan secara akurat.
|
||
</p>
|
||
<div style="width: 50px; height: 3px; background: var(--pustaka-blue);" class="mx-auto mt-4 rounded-pill"></div>
|
||
</div>
|
||
|
||
{{-- I. Pengantar --}}
|
||
<section class="service-section-card" data-aos="fade-up">
|
||
<h4 class="section-subtitle-premium mb-4">
|
||
<i class="bi bi-info-circle-fill"></i> I. Pengantar Layanan Referensi
|
||
</h4>
|
||
<div class="row g-4">
|
||
<div class="col-md-6">
|
||
<p class="lh-lg text-muted small-text mb-0" style="font-size: 0.95rem;">
|
||
Layanan Referensi (Rujukan) adalah salah satu layanan utama di <strong>Pustaka Nawasena Bakorwil III Malang</strong> yang ditujukan untuk membantu Pegawai, Pimpinan, serta Instansi Mitra memperoleh rujukan informasi yang kredibel dan dapat dipertanggungjawabkan.
|
||
</p>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<p class="lh-lg text-muted small-text mb-0" style="font-size: 0.95rem;">
|
||
Melalui koordinasi berkala, kami memastikan setiap data literatur pendukung kebijakan kedinasan tersaji secara <strong>akurat, terstruktur, dan relevan</strong> dengan Tugas Pokok dan Fungsi (Tupoksi) lembaga.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{{-- II. Jenis Koleksi --}}
|
||
<section class="service-section-card" data-aos="fade-up">
|
||
<h4 class="section-subtitle-premium mb-3">
|
||
<i class="bi bi-tags-fill"></i> II. Jenis-Jenis Koleksi Referensi
|
||
</h4>
|
||
<p class="text-muted small-text mb-4" style="font-size: 0.9rem;">
|
||
*Bahan pustaka di bawah ini merupakan rujukan khusus yang hanya digunakan untuk dibaca atau diolah di tempat (tidak dipinjamkan keluar ruang baca).
|
||
</p>
|
||
|
||
<div class="table-responsive rounded-3 border">
|
||
<table class="table table-premium align-middle mb-0">
|
||
<thead>
|
||
<tr>
|
||
<th width="30%">Kategori Koleksi</th>
|
||
<th>Contoh Materi yang Tersedia</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><span class="fw-bold text-dark">Data & Statistik Resmi</span></td>
|
||
<td>Data PDRB Wilayah Kerja Bakorwil III Malang, Publikasi Statistik Sektoral BPS Jawa Timur, Dokumen Survei Instansi Vertikal.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="fw-bold text-dark">Peraturan & Regulasi</span></td>
|
||
<td>Bundel Lembaran Negara (Undang-Undang, PP), Peraturan Daerah (Perda) Provinsi Jawa Timur, kompilasi Peraturan Gubernur (Pergub) lintas sektor.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="fw-bold text-dark">Laporan & Dokumen Internal</span></td>
|
||
<td>Laporan Akuntabilitas Kinerja (LAKIP), Dokumen Evaluasi Hasil Rapat Koordinasi Wilayah, Profil Pembangunan Daerah Terintegrasi.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
{{-- III. Bantuan Pencarian --}}
|
||
<section class="service-section-card" data-aos="fade-up">
|
||
<h4 class="section-subtitle-premium mb-4">
|
||
<i class="bi bi-grid-fill"></i> III. Layanan Bantuan Pencarian (Rujukan Cepat)
|
||
</h4>
|
||
|
||
<div class="row g-4">
|
||
<div class="col-md-6">
|
||
<div class="feature-subcard">
|
||
<div class="d-flex align-items-center gap-3 mb-3">
|
||
<div class="icon-box-premium"><i class="bi bi-people-fill"></i></div>
|
||
<h5 class="fw-bold text-dark mb-0" style="font-size: 1rem;">Konsultasi Rujukan</h5>
|
||
</div>
|
||
<p class="text-muted mb-0 small" style="line-height: 1.6;">Pustakawan membantu menganalisis kebutuhan riset Anda dan menyusun rekomendasi daftar literatur ilmiah yang valid untuk topik tugas dinas tertentu.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<div class="feature-subcard">
|
||
<div class="d-flex align-items-center gap-3 mb-3">
|
||
<div class="icon-box-premium"><i class="bi bi-lightning-charge-fill"></i></div>
|
||
<h5 class="fw-bold text-dark mb-0" style="font-size: 1rem;">Rujukan Cepat (Quick Reference)</h5>
|
||
</div>
|
||
<p class="text-muted mb-0 small" style="line-height: 1.6;">Pelayanan instan untuk menjawab kebutuhan data faktual seketika, seperti verifikasi nomor regulasi, definisi nomenklatur, atau data demografi cepat.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<div class="feature-subcard">
|
||
<div class="d-flex align-items-center gap-3 mb-3">
|
||
<div class="icon-box-premium"><i class="bi bi-compass-fill"></i></div>
|
||
<h5 class="fw-bold text-dark mb-0" style="font-size: 1rem;">Bimbingan Penelusuran</h5>
|
||
</div>
|
||
<p class="text-muted mb-0 small" style="line-height: 1.6;">Pendampingan teknis dalam memanfaatkan pangkalan data digital, penelusuran sistem OPAC lokal, serta eksplorasi sumber daya elektronik (*e-resources*).</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<div class="feature-subcard">
|
||
<div class="d-flex align-items-center gap-3 mb-3">
|
||
<div class="icon-box-premium"><i class="bi bi-journal-album"></i></div>
|
||
<h5 class="fw-bold text-dark mb-0" style="font-size: 1rem;">Penyediaan Dokumen Kliping</h5>
|
||
</div>
|
||
<p class="text-muted mb-0 small" style="line-height: 1.6;">Penyusunan berkas kliping informasi digital tematik mengenai kompilasi berita isu strategis pembangunan di wilayah kerja Bakorwil III Malang.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{{-- IV. Prosedur --}}
|
||
<section class="service-section-card" data-aos="fade-up">
|
||
<h4 class="section-subtitle-premium mb-4">
|
||
<i class="bi bi-bezier2"></i> IV. Prosedur Pemanfaatan Layanan Referensi
|
||
</h4>
|
||
|
||
<div class="row g-3">
|
||
<div class="col-md-4">
|
||
<div class="p-3 border rounded-3 bg-light h-100">
|
||
<div class="d-flex align-items-center gap-2 mb-2">
|
||
<span class="step-badge">1</span>
|
||
<span class="fw-bold text-dark small">Akses Ruang Baca</span>
|
||
</div>
|
||
<p class="text-muted small mb-0">Silakan kunjungi Ruang Referensi Utama atau area Koleksi Khusus di gedung perpustakaan lokal.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="p-3 border rounded-3 bg-light h-100">
|
||
<div class="d-flex align-items-center gap-2 mb-2">
|
||
<span class="step-badge">2</span>
|
||
<span class="fw-bold text-dark small">Identifikasi & Sampaikan</span>
|
||
</div>
|
||
<p class="text-muted small mb-0">Sampaikan topik riset, kata kunci data, atau regulasi spesifik yang dicari kepada pustakawan piket.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="p-3 border rounded-3 bg-light h-100">
|
||
<div class="d-flex align-items-center gap-2 mb-2">
|
||
<span class="step-badge">3</span>
|
||
<span class="fw-bold text-dark small">Penelusuran Terpandu</span>
|
||
</div>
|
||
<p class="text-muted small mb-0">Pustakawan akan memvalidasi data dan memandu pencarian dokumen baik dalam arsip fisik maupun basis portal daring.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 mt-3">
|
||
<div class="p-3 border rounded-3 bg-light h-100">
|
||
<div class="d-flex align-items-center gap-2 mb-2">
|
||
<span class="step-badge">4</span>
|
||
<span class="fw-bold text-dark small">Pemanfaatan Dalam Ruangan</span>
|
||
</div>
|
||
<p class="text-muted small mb-0">Seluruh berkas koleksi referensi wajib dipelajari dan diolah secara internal di dalam ruangan demi menjaga keutuhan dokumen asli.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 mt-3">
|
||
<div class="p-3 border rounded-3 bg-light h-100">
|
||
<div class="d-flex align-items-center gap-2 mb-2">
|
||
<span class="step-badge">5</span>
|
||
<span class="fw-bold text-dark small">Pencatatan & Pengutipan</span>
|
||
</div>
|
||
<p class="text-muted small mb-0">Intisari informasi penting diizinkan untuk dicatat manual, dikutip, atau dipindai (*scan*) mandiri sesuai ketentuan hak cipta.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{{-- V. Jam Layanan & VI. Kontak --}}
|
||
<div class="row g-4 mb-4">
|
||
<div class="col-lg-5" data-aos="fade-up">
|
||
<div class="service-section-card h-100">
|
||
<h4 class="section-subtitle-premium mb-4">
|
||
<i class="bi bi-clock-fill"></i> V. Jam Layanan
|
||
</h4>
|
||
<div class="table-responsive rounded-3 border">
|
||
<table class="table table-premium text-center align-middle mb-0">
|
||
<thead>
|
||
<tr>
|
||
<th>Hari Kerja</th>
|
||
<th>Waktu Layanan</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><span class="fw-bold text-dark">Senin – Jumat</span></td>
|
||
<td class="fw-bold text-primary-custom">08.00 – 16.00 WIB</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-7" data-aos="fade-up">
|
||
<div class="service-section-card h-100">
|
||
<h4 class="section-subtitle-premium mb-4">
|
||
<i class="bi bi-envelope-card-fill"></i> VI. Kontak Layanan Referensi
|
||
</h4>
|
||
<div class="contact-badge-info">
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<div class="contact-link-item">
|
||
<div class="icon-box-premium" style="width:35px; height:35px;"><i class="bi bi-whatsapp"></i></div>
|
||
<div>
|
||
<div class="text-muted" style="font-size:0.7rem; font-weight:700; text-transform:uppercase;">Telepon / WA</div>
|
||
<span class="fw-bold text-dark">0851-3479-1603</span>
|
||
</div>
|
||
</div>
|
||
<div class="contact-link-item">
|
||
<div class="icon-box-premium" style="width:35px; height:35px;"><i class="bi bi-envelope-at-fill"></i></div>
|
||
<div>
|
||
<div class="text-muted" style="font-size:0.7rem; font-weight:700; text-transform:uppercase;">E-Mail Resmi</div>
|
||
<span class="fw-bold text-dark" style="font-size:0.85rem;">arsiptubakorwil@gmail.com</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-6">
|
||
<div class="contact-link-item">
|
||
<div class="icon-box-premium" style="width:35px; height:35px;"><i class="bi bi-browser-chrome"></i></div>
|
||
<div>
|
||
<div class="text-muted" style="font-size:0.7rem; font-weight:700; text-transform:uppercase;">Situs Web</div>
|
||
<a href="https://bakorwilmalang.jatimprov.go.id" target="_blank" class="fw-bold text-primary-custom text-decoration-none" style="font-size:0.85rem;">bakorwilmalang.jatimprov.go.id</a>
|
||
</div>
|
||
</div>
|
||
<div class="contact-link-item">
|
||
<div class="icon-box-premium" style="width:35px; height:35px;"><i class="bi bi-geo-alt-fill"></i></div>
|
||
<div>
|
||
<div class="text-muted" style="font-size:0.7rem; font-weight:700; text-transform:uppercase;">Lokasi Kantor</div>
|
||
<span class="fw-bold text-dark" style="font-size:0.85rem;">Jl. Simpang Ijen No. 2, Kota Malang</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Bottom Alert Note --}}
|
||
<div class="alert alert-premium-note p-4 shadow-sm mb-5" data-aos="fade-up">
|
||
<div class="d-flex gap-3 align-items-start">
|
||
<i class="bi bi-lightbulb-fill text-primary" style="font-size: 1.25rem;"></i>
|
||
<div>
|
||
<strong class="text-dark d-block mb-1">💡 Catatan Penting:</strong>
|
||
<span class="small" style="color: var(--slate-600);">Layanan Referensi ini dikembangkan secara komprehensif untuk memastikan seluruh kajian ilmiah, penulisan artikel, maupun penyusunan draf kebijakan publik di lingkungan Bakorwil III Malang didasarkan pada data rujukan yang valid, otentik, dan dapat dipertanggungjawabkan secara hukum.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Back Action --}}
|
||
<div class="text-center mt-4" data-aos="fade-up">
|
||
<a href="{{ route('user.layanan') }}" class="btn btn-return-premium fw-semibold">
|
||
<i class="bi bi-arrow-left me-2"></i> Kembali ke Menu Layanan
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
||
<script>
|
||
AOS.init({
|
||
duration: 800,
|
||
once: true,
|
||
offset: 30
|
||
});
|
||
</script>
|
||
@endsection
|
||
|