AHMAD_ZEKI_SAPUTRA
/
TKK_E32230908
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
TKK_E32230908/resources/views/user/fasilitas.blade.php

249 lines
11 KiB
PHP
Raw Blame History

@extends('layouts.pustaka')
@section('content')
<!-- Memastikan font modern dan ikon Bootstrap ter-load dengan baik -->
<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>
/* Menghilangkan garis scrollbar di samping kanan browser agar tampilan lebih rapi */
html, body {
scrollbar-width: none;
-ms-overflow-style: none;
}
::-webkit-scrollbar {
display: none;
}
/* Pengaturan Warna Utama - Biru Gelap Profesional & Abu-abu Terang */
:root {
--pustaka-blue: #004d91;
--pustaka-dark: #002d5a;
--pustaka-accent: #0284c7;
--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);
}
/* Desain Kotak Pembungkus Konten (Card) */
.service-section-card {
background: #ffffff;
padding: 45px 40px;
margin-bottom: 35px;
border-radius: 16px;
border: 1px solid var(--slate-200);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
}
.hero-title-custom {
color: var(--pustaka-blue);
font-weight: 800;
letter-spacing: -1px;
}
.section-subtitle-premium {
color: var(--pustaka-blue);
font-weight: 700;
font-size: 1.5rem;
letter-spacing: -0.5px;
display: flex;
align-items: center;
gap: 10px;
}
/* Desain Kotak Foto Fasilitas */
.facility-premium-card {
background: #ffffff;
border-radius: 16px;
border: 1px solid var(--slate-200);
overflow: hidden;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.facility-premium-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 25px -5px rgba(0, 77, 145, 0.08);
}
.facility-img-wrapper {
position: relative;
overflow: hidden;
height: 250px;
}
.facility-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.facility-premium-card:hover .facility-img-wrapper img {
transform: scale(1.06);
}
.facility-img-wrapper::after {
content: '';
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.4));
}
/* Desain Kotak Grid Peralatan */
.equipment-premium-item {
background-color: var(--slate-50);
border: 1px solid var(--slate-200);
border-radius: 14px;
padding: 20px;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.equipment-premium-item:hover {
transform: translateY(-4px);
background-color: #ffffff;
border-color: var(--pustaka-accent);
box-shadow: 0 12px 20px -8px rgba(2, 132, 199, 0.2);
}
.equipment-image-box {
width: 100%;
height: 160px;
object-fit: cover;
border-radius: 10px;
border: 1px solid var(--slate-200);
margin-bottom: 15px;
}
.equipment-badge-id {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
color: var(--pustaka-accent);
letter-spacing: 0.5px;
display: inline-block;
margin-bottom: 6px;
}
</style>
<div class="container py-5" data-aos="fade-up">
{{-- Bagian Pembuka / Ucapan Selamat Datang --}}
<div class="service-section-card text-center mb-4">
<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;">
Sarana & Prasarana
</span>
<h2 class="hero-title-custom display-6 mb-3">Selamat Datang di Fasilitas &amp; Peralatan Kami</h2>
<p class="text-muted mx-auto fs-6 mb-0" style="max-width: 800px; line-height: 1.7;">
Silakan lihat berbagai fasilitas ruangan dan perlengkapan modern yang kami sediakan. Semua ini disiapkan khusus untuk mendukung kenyamanan, kelancaran diskusi, serta kemudahan Anda saat belajar atau mencari data di <strong>Pustaka Nawasena Bakorwil III Malang</strong>.
</p>
<div style="width: 50px; height: 3px; background: var(--pustaka-blue);" class="mx-auto mt-4 rounded-pill"></div>
</div>
{{-- Bagian I: Fasilitas Ruangan Utama --}}
<div class="service-section-card" data-aos="fade-up" data-aos-delay="100">
<div class="text-center mb-5">
<h3 class="section-subtitle-premium justify-content-center mb-2">
<i class="bi bi-building"></i> Fasilitas Ruangan Utama
</h3>
<p class="text-muted small">Pilihan tempat membaca yang tenang atau ruang berkumpul yang nyaman</p>
</div>
<div class="row justify-content-center g-4">
<!-- Fasilitas 1: Pojok Baca -->
<div class="col-md-6 col-lg-5">
<div class="facility-premium-card h-100">
<div class="facility-img-wrapper">
<img src="{{ asset('images/pojokbaca.jpeg') }}" alt="Pojok Baca Pustaka Nawasena">
</div>
<div class="card-body p-4 text-center">
<h5 class="fw-bold text-dark mb-2" style="font-size: 1.15rem;">Pojok Baca Mandiri</h5>
<p class="text-muted small lh-lg mb-0">
Tempat membaca yang nyaman dengan penataan meja kursi yang pas, cahaya yang sejuk di mata, serta suasana yang tenang agar Anda bisa lebih fokus membaca.
</p>
</div>
</div>
</div>
<!-- Fasilitas 2: Ruang Diskusi -->
<div class="col-md-6 col-lg-5">
<div class="facility-premium-card h-100">
<div class="facility-img-wrapper">
<img src="{{ asset('images/RUANGDISKUSI.jpeg') }}" alt="Ruang Diskusi Pustaka Nawasena">
</div>
<div class="card-body p-4 text-center">
<h5 class="fw-bold text-dark mb-2" style="font-size: 1.15rem;">Ruang Kerja &amp; Diskusi Bersama</h5>
<p class="text-muted small lh-lg mb-0">
Ruangan khusus untuk berkumpul kelompok yang dilengkapi meja kursi rapat. Sangat cocok digunakan untuk kerja kelompok, menyusun rencana kegiatan, atau bertukar pikiran.
</p>
</div>
</div>
</div>
</div>
</div>
{{-- Bagian II: Peralatan & Teknologi --}}
<div class="service-section-card" data-aos="fade-up" data-aos-delay="200">
<div class="text-center mb-5">
<h3 class="section-subtitle-premium justify-content-center mb-2">
<i class="bi bi-cpu"></i> Perlengkapan &amp; Alat Pendukung
</h3>
<p class="text-muted small">Perangkat teknologi gratis yang siap digunakan untuk mempercepat urusan tugas Anda</p>
</div>
<div class="row g-4">
<!-- Alat 1: Printer & Scanner -->
<div class="col-sm-6 col-md-3">
<div class="equipment-premium-item text-center h-100">
<span class="equipment-badge-id"><i class="bi bi-printer me-1"></i> Cetak &amp; Pindai</span>
<img src="{{ asset('images/printer.jpg') }}" alt="Fasilitas Printer & Scanner" class="equipment-image-box">
<h6 class="fw-bold text-dark mb-1" style="font-size: 0.95rem;">Mesin Cetak &amp; Scanner</h6>
<p class="text-muted x-small mb-0" style="font-size: 0.8rem; line-height: 1.4;">Disediakan untuk memudahkan Anda mencetak dokumen penting atau mengubah berkas fisik kertas menjadi file digital.</p>
</div>
</div>
<!-- Alat 2: Proyektor -->
<div class="col-sm-6 col-md-3">
<div class="equipment-premium-item text-center h-100">
<span class="equipment-badge-id"><i class="bi bi-projector me-1"></i> Layar Presentasi</span>
<img src="{{ asset('images/proyektor.jpg') }}" alt="Fasilitas Proyektor" class="equipment-image-box">
<h6 class="fw-bold text-dark mb-1" style="font-size: 0.95rem;">Proyektor Layar</h6>
<p class="text-muted x-small mb-0" style="font-size: 0.8rem; line-height: 1.4;">Alat bantu di ruang diskusi untuk menampilkan bahan presentasi, video panduan, atau saat mengadakan acara pelatihan kecil.</p>
</div>
</div>
<!-- Alat 3: Wi-Fi -->
<div class="col-sm-6 col-md-3">
<div class="equipment-premium-item text-center h-100">
<span class="equipment-badge-id"><i class="bi bi-wifi me-1"></i> Internet Cepat</span>
<img src="{{ asset('images/wifi.jpg') }}" alt="Fasilitas Wi-Fi Gratis" class="equipment-image-box">
<h6 class="fw-bold text-dark mb-1" style="font-size: 0.95rem;">Koneksi Wi-Fi Gratis</h6>
<p class="text-muted x-small mb-0" style="font-size: 0.8rem; line-height: 1.4;">Akses internet tanpa kabel yang cepat dan tanpa biaya di seluruh area perpustakaan untuk mempermudah browsing informasi.</p>
</div>
</div>
<!-- Alat 4: CCTV -->
<div class="col-sm-6 col-md-3">
<div class="equipment-premium-item text-center h-100">
<span class="equipment-badge-id"><i class="bi bi-shield-check me-1"></i> Pengawasan Keamanan</span>
<img src="{{ asset('images/cctv.jpg') }}" alt="Sistem Keamanan CCTV" class="equipment-image-box">
<h6 class="fw-bold text-dark mb-1" style="font-size: 0.95rem;">Kamera Keamanan (CCTV)</h6>
<p class="text-muted x-small mb-0" style="font-size: 0.8rem; line-height: 1.4;">Kamera pemantau tersembunyi yang aktif selama 24 jam demi menjamin keselamatan barang bawaan dan kenyamanan Anda.</p>
</div>
</div>
</div>
</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
Reference in New Issue View Git Blame Copy Permalink