229 lines
7.7 KiB
PHP
229 lines
7.7 KiB
PHP
@extends('layouts.kontak')
|
|
|
|
@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 bersih */
|
|
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 Bagian Atas / Header Banner */
|
|
.contact-header-premium {
|
|
background: linear-gradient(135deg, var(--pustaka-dark), var(--pustaka-blue));
|
|
border-radius: 16px;
|
|
padding: 40px 20px;
|
|
box-shadow: 0 4px 15px rgba(0, 77, 145, 0.15);
|
|
}
|
|
|
|
/* Desain Kotak Konten (Card) */
|
|
.contact-card-premium {
|
|
background: #ffffff;
|
|
border-radius: 16px;
|
|
border: 1px solid var(--slate-200);
|
|
padding: 35px;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
.contact-card-premium:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 15px 25px -5px rgba(0, 77, 145, 0.08);
|
|
}
|
|
|
|
.contact-title {
|
|
color: var(--pustaka-blue);
|
|
font-weight: 700;
|
|
font-size: 1.4rem;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
/* Desain Baris Informasi Kontak */
|
|
.contact-item-row {
|
|
display: flex;
|
|
align-items: start;
|
|
gap: 15px;
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid var(--slate-100);
|
|
}
|
|
.contact-item-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.contact-icon-box {
|
|
width: 38px;
|
|
height: 38px;
|
|
background: rgba(0, 77, 145, 0.06);
|
|
color: var(--pustaka-blue);
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.contact-text-label {
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
color: var(--slate-600);
|
|
margin-bottom: 2px;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.contact-text-value {
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
color: var(--slate-900);
|
|
}
|
|
|
|
.contact-link-action {
|
|
color: var(--pustaka-blue);
|
|
text-decoration: none;
|
|
transition: color 0.2s;
|
|
}
|
|
.contact-link-action:hover {
|
|
color: var(--pustaka-accent);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Desain Pembungkus Peta Google Maps */
|
|
.map-wrapper-premium {
|
|
border-radius: 14px;
|
|
overflow: hidden;
|
|
height: 340px;
|
|
width: 100%;
|
|
border: 1px solid var(--slate-200);
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
|
|
}
|
|
.map-wrapper-premium iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
}
|
|
</style>
|
|
|
|
<div class="container py-5" data-aos="fade-up">
|
|
|
|
{{-- Bagian Atas / Judul Halaman --}}
|
|
<div class="contact-header-premium text-center text-white mb-5">
|
|
<span class="badge px-3 py-2 mb-2 text-uppercase" style="background: rgba(255, 255, 255, 0.15); color: #ffffff; font-size: 0.65rem; letter-spacing: 1px;">
|
|
Hubungi Kami
|
|
</span>
|
|
<h1 class="fw-800 mb-2" style="letter-spacing: -1px;">Kontak & Lokasi Bakorwil III Malang</h1>
|
|
<p class="mb-0 opacity-85 jumbotron-subtext" style="font-size: 0.95rem;">Informasi alamat, nomor telepon resmi, dan peta petunjuk lokasi kantor</p>
|
|
</div>
|
|
|
|
<div class="row justify-content-center g-4">
|
|
{{-- Kolom Kiri: Informasi Kontak --}}
|
|
<div class="col-lg-6">
|
|
<div class="contact-card-premium h-100">
|
|
<h3 class="contact-title mb-4">
|
|
<i class="bi bi-telephone-fill me-2"></i> Informasi Kontak
|
|
</h3>
|
|
|
|
<!-- Baris No Telepon -->
|
|
<div class="contact-item-row">
|
|
<div class="contact-icon-box"><i class="bi bi-whatsapp"></i></div>
|
|
<div>
|
|
<div class="contact-text-label">Telepon / WhatsApp</div>
|
|
<div class="contact-text-value">0851-3479-1603</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Baris Email -->
|
|
<div class="contact-item-row">
|
|
<div class="contact-icon-box"><i class="bi bi-envelope-fill"></i></div>
|
|
<div>
|
|
<div class="contact-text-label">Alamat E-Mail</div>
|
|
<div class="contact-text-value">
|
|
<a href="mailto:arsiptubakorwil@gmail.com" class="contact-link-action">
|
|
arsiptubakorwil@gmail.com
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Baris Website -->
|
|
<div class="contact-item-row">
|
|
<div class="contact-icon-box"><i class="bi bi-globe"></i></div>
|
|
<div>
|
|
<div class="contact-text-label">Situs Web Resmi</div>
|
|
<div class="contact-text-value">
|
|
<a href="https://bakorwilmalang.jatimprov.go.id" target="_blank" class="contact-link-action">
|
|
bakorwilmalang.jatimprov.go.id
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Baris Alamat -->
|
|
<div class="contact-item-row">
|
|
<div class="contact-icon-box"><i class="bi bi-geo-alt-fill"></i></div>
|
|
<div>
|
|
<div class="contact-text-label">Alamat Kantor</div>
|
|
<div class="contact-text-value" style="line-height: 1.5;">
|
|
Jl. Simpang Ijen No. 2, Kota Malang, Jawa Timur
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Kolom Kanan: Peta Lokasi --}}
|
|
<div class="col-lg-6">
|
|
<div class="contact-card-premium h-100">
|
|
<h3 class="contact-title mb-4">
|
|
<i class="bi bi-map-fill me-2"></i> Peta Lokasi Resmi
|
|
</h3>
|
|
|
|
{{-- Pembungkus Peta Google Maps --}}
|
|
<div class="map-wrapper-premium">
|
|
<iframe
|
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3951.3496328766115!2d112.63001927453488!3d-7.980644292023594!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd629e924a3502b%3A0xc023c023d6a911a!2sBakorwil%20III%20Malang!5e0!3m2!1sen!2sid!4v1708567789572!5m2!1sen!2sid"
|
|
allowfullscreen=""
|
|
loading="lazy"
|
|
referrerpolicy="no-referrer-when-downgrade">
|
|
</iframe>
|
|
</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
|
|
|