118 lines
7.2 KiB
PHP
118 lines
7.2 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Kontak - PUSYANGATRA Kanigoro')
|
|
|
|
@section('content')
|
|
|
|
<section class="py-20 bg-gray-50 min-h-screen">
|
|
<div class="container mx-auto px-4">
|
|
|
|
{{-- HEADER SECTION --}}
|
|
<div class="text-center mb-16">
|
|
<span class="text-blue-600 font-bold tracking-widest uppercase text-sm">Hubungi Kami</span>
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2 mb-4">Layanan Pengaduan & Informasi</h2>
|
|
<p class="text-gray-600 max-w-2xl mx-auto text-lg">
|
|
Punya pertanyaan atau butuh bantuan seputar layanan Keluarga Berencana? Jangan ragu untuk menghubungi kami melalui saluran di bawah ini.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-5 gap-12">
|
|
|
|
<div class="lg:col-span-2 space-y-6">
|
|
|
|
<div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 flex items-start gap-5 hover:shadow-md transition-all duration-300">
|
|
<div class="w-12 h-12 bg-blue-50 text-blue-600 rounded-xl flex items-center justify-center shrink-0">
|
|
<i class="fas fa-clock text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-bold text-gray-800 mb-1">Jam Operasional Layanan</h3>
|
|
<p class="text-gray-600 text-sm leading-relaxed">
|
|
Senin - Jumat: 08.00 - 15.00 WIB<br>
|
|
<span class="text-red-500">Sabtu, Minggu & Tanggal Merah: Tutup</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 flex items-start gap-5 hover:shadow-md transition-all duration-300">
|
|
<div class="w-12 h-12 bg-green-50 text-green-600 rounded-xl flex items-center justify-center shrink-0">
|
|
<i class="fab fa-whatsapp text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-bold text-gray-800 mb-1">WhatsApp (Konsultasi)</h3>
|
|
<a href="https://wa.me/6281234567890" target="_blank" class="text-blue-600 text-sm hover:underline font-medium">
|
|
+62 813-3252-7180
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 flex items-start gap-5 hover:shadow-md transition-all duration-300">
|
|
<div class="w-12 h-12 bg-orange-50 text-orange-600 rounded-xl flex items-center justify-center shrink-0">
|
|
<i class="fas fa-envelope text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-bold text-gray-800 mb-1">Email Resmi</h3>
|
|
<a href="mailto:info@kbkanigoro.go.id" class="text-blue-600 text-sm hover:underline font-medium">
|
|
info@kbkanigoro.go.id
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 flex items-start gap-5 hover:shadow-md transition-all duration-300">
|
|
<div class="w-12 h-12 bg-purple-50 text-purple-600 rounded-xl flex items-center justify-center shrink-0">
|
|
<i class="fas fa-hashtag text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-bold text-gray-800 mb-1">Media Sosial</h3>
|
|
<p class="text-sm text-gray-600">
|
|
IG: <a href="https://www.instagram.com/balaipenyuluhkbkanigoro/" class="text-blue-600 hover:underline">@balaipenyuluhkbkanigoro</a><br>
|
|
FB: <a href="https://www.facebook.com/balaikb.kanigoro/?checkpoint_src=any" class="text-blue-600 hover:underline">Balai Penyuluhan KB Kanigoro</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="lg:col-span-3">
|
|
<div class="bg-white p-8 md:p-10 rounded-2xl shadow-sm border border-gray-100">
|
|
<h3 class="text-2xl font-bold text-gray-800 mb-6">Tinggalkan Pesan</h3>
|
|
|
|
@if(session('success'))
|
|
<div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-xl mb-6 flex items-center">
|
|
<i class="fas fa-check-circle mr-2"></i>
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
<form action="{{ route('kontak.store') }}" method="POST" class="space-y-6">
|
|
@csrf
|
|
<div>
|
|
<label for="nama" class="block text-gray-700 font-semibold mb-2 text-sm">Nama Lengkap</label>
|
|
<input type="text" id="nama" name="nama" placeholder="Masukkan nama Anda" required
|
|
class="w-full px-4 py-3 rounded-xl border border-gray-200 bg-gray-50 focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all duration-200">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="email" class="block text-gray-700 font-semibold mb-2 text-sm">Alamat Email</label>
|
|
<input type="email" id="email" name="email" placeholder="contoh@email.com" required
|
|
class="w-full px-4 py-3 rounded-xl border border-gray-200 bg-gray-50 focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all duration-200">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="pesan" class="block text-gray-700 font-semibold mb-2 text-sm">Pesan atau Pertanyaan</label>
|
|
<textarea id="pesan" name="pesan" rows="5" placeholder="Tulis pesan Anda di sini..." required
|
|
class="w-full px-4 py-3 rounded-xl border border-gray-200 bg-gray-50 focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all duration-200 resize-none"></textarea>
|
|
</div>
|
|
|
|
<button type="submit"
|
|
class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 px-8 rounded-xl transition duration-300 shadow-lg transform hover:-translate-y-1 flex justify-center items-center">
|
|
<i class="fas fa-paper-plane mr-2"></i> Kirim Pesan Sekarang
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
@endsection |