277 lines
16 KiB
PHP
277 lines
16 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Beranda BKKBN Kanigoro')
|
|
|
|
@section('content')
|
|
|
|
<section class="relative overflow-hidden text-white">
|
|
|
|
<!-- BACKGROUND -->
|
|
<div class="absolute inset-0 bg-gradient-to-br from-gray-900 via-blue-900 to-indigo-900"></div>
|
|
|
|
<!-- GLOW -->
|
|
<div class="absolute w-96 h-96 bg-indigo-500 rounded-full blur-3xl opacity-20 -top-20 -left-20"></div>
|
|
<div class="absolute w-96 h-96 bg-cyan-400 rounded-full blur-3xl opacity-10 bottom-0 right-0"></div>
|
|
|
|
<div class="relative z-10 py-28 px-6 text-center max-w-5xl mx-auto">
|
|
|
|
<h1 class="text-5xl md:text-7xl font-extrabold mb-6 tracking-tight leading-tight">
|
|
PUSYANGATRA
|
|
</h1>
|
|
|
|
<p class="text-lg md:text-2xl text-blue-100 mb-10 leading-relaxed max-w-3xl mx-auto">
|
|
Mewujudkan ketahanan keluarga melalui
|
|
<span class="text-white font-semibold">Pusat Pelayanan Keluarga Sejahtera</span>
|
|
yang terpadu, modern, dan profesional.
|
|
</p>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
|
|
<a href="#program"
|
|
class="bg-white text-blue-700 font-bold py-3 px-8 rounded-full shadow-lg hover:bg-blue-100 transition transform hover:-translate-y-1">
|
|
🚀 Lihat Program
|
|
</a>
|
|
|
|
<a href="#artikel"
|
|
class="bg-white/10 border border-white/30 text-white py-3 px-8 rounded-full hover:bg-white/20 transition">
|
|
📚 Artikel Edukasi
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<div class="mt-12 grid grid-cols-3 gap-6 max-w-md mx-auto text-sm">
|
|
<div>
|
|
<p class="text-2xl font-bold">100+</p>
|
|
<p class="text-blue-300">Keluarga</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-2xl font-bold">6+</p>
|
|
<p class="text-blue-300">Program</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-2xl font-bold">24/7</p>
|
|
<p class="text-blue-300">Layanan</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section class="py-20 bg-white">
|
|
<div class="container mx-auto px-4">
|
|
<div class="flex flex-col md:flex-row items-center gap-12">
|
|
<div class="md:w-1/2 flex justify-center">
|
|
<div class="relative">
|
|
<div class="absolute -inset-1 bg-blue-100 rounded-lg blur-lg opacity-50"></div>
|
|
<img src="{{ asset('img/lambang_Kab.Blitar.png') }}" alt="Lambang Kabupaten Blitar"
|
|
class="relative rounded-lg shadow-2xl max-w-xs md:max-w-md transition-transform duration-500 hover:scale-105" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md:w-1/2">
|
|
<span
|
|
class="inline-block px-4 py-1.5 mb-4 text-xs font-bold tracking-widest text-blue-600 uppercase bg-blue-50 rounded-full border border-blue-100">
|
|
Profil
|
|
</span>
|
|
<h2 class="text-3xl md:text-4xl font-extrabold text-gray-900 mb-6 leading-tight">
|
|
PUSYANGATRA <span class="text-blue-600 italic">Kecamatan Kanigoro</span>
|
|
</h2>
|
|
<div class="space-y-6 text-gray-700 text-lg leading-relaxed">
|
|
<p>
|
|
<strong class="text-gray-900">PUSYANGATRA</strong> (Pusat Pelayanan Keluarga Sejahtera) adalah
|
|
wadah pelayanan publik berbasis masyarakat yang dibentuk oleh <span
|
|
class="font-bold text-blue-600">BKKBN</span>.
|
|
</p>
|
|
<p>
|
|
Kami hadir sebagai pusat rujukan keluarga di wilayah Kabupaten Blitar untuk memberikan akses
|
|
informasi, konseling, dan bantuan komprehensif guna menciptakan keluarga yang
|
|
<span
|
|
class="text-blue-600 font-semibold underline decoration-blue-200 decoration-4 underline-offset-4">
|
|
tangguh, mandiri, dan sejahtera
|
|
</span>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="program" class="py-24 bg-gray-50 border-y border-gray-100">
|
|
<div class="container mx-auto px-4">
|
|
<div class="text-center mb-16">
|
|
<span class="text-blue-600 font-bold tracking-widest uppercase text-sm">Layanan Terpadu</span>
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2 mb-4">Program Unggulan PUSYANGATRA</h2>
|
|
<p class="text-gray-600 max-w-2xl mx-auto text-lg">
|
|
Komitmen kami dalam mendampingi setiap fase kehidupan keluarga di Kecamatan Kanigoro untuk mewujudkan
|
|
masyarakat yang berkualitas.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<div
|
|
class="bg-white p-8 rounded-2xl shadow-sm border border-gray-100 hover:shadow-xl transition-all duration-300 group">
|
|
<div
|
|
class="w-14 h-14 bg-pink-50 text-pink-600 rounded-xl flex items-center justify-center mb-6 group-hover:bg-pink-600 group-hover:text-white transition-all">
|
|
<i class="fas fa-heart text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Pelayanan Pranikah</h3>
|
|
<p class="text-gray-600 text-sm leading-relaxed mb-6">Persiapan mental dan kesehatan bagi calon
|
|
pengantin untuk membangun pondasi keluarga yang kokoh.</p>
|
|
<ul class="text-gray-500 text-xs space-y-3 border-t pt-5">
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-pink-500 mr-2"></i> Konseling Calon
|
|
Pengantin</li>
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-pink-500 mr-2"></i> Pemeriksaan
|
|
Kesehatan</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div
|
|
class="bg-white p-8 rounded-2xl shadow-sm border border-gray-100 hover:shadow-xl transition-all duration-300 group">
|
|
<div
|
|
class="w-14 h-14 bg-blue-50 text-blue-600 rounded-xl flex items-center justify-center mb-6 group-hover:bg-blue-600 group-hover:text-white transition-all">
|
|
<i class="fas fa-baby text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Keluarga & Anak</h3>
|
|
<p class="text-gray-600 text-sm leading-relaxed mb-6">Fokus pengasuhan 1000 Hari Pertama Kehidupan (HPK)
|
|
untuk mencegah stunting secara dini.</p>
|
|
<ul class="text-gray-500 text-xs space-y-3 border-t pt-5">
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Bina Keluarga
|
|
Balita (BKB)</li>
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Pemantauan
|
|
Tumbuh Kembang</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div
|
|
class="bg-white p-8 rounded-2xl shadow-sm border border-gray-100 hover:shadow-xl transition-all duration-300 group">
|
|
<div
|
|
class="w-14 h-14 bg-orange-50 text-orange-600 rounded-xl flex items-center justify-center mb-6 group-hover:bg-orange-600 group-hover:text-white transition-all">
|
|
<i class="fas fa-users text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Remaja & Keluarga</h3>
|
|
<p class="text-gray-600 text-sm leading-relaxed mb-6">Pendampingan masa pubertas dan edukasi Generasi
|
|
Berencana (GenRe) bagi masa depan.</p>
|
|
<ul class="text-gray-500 text-xs space-y-3 border-t pt-5">
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-orange-500 mr-2"></i> Bina Keluarga
|
|
Remaja (BKR)</li>
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-orange-500 mr-2"></i> PIK-Remaja
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div
|
|
class="bg-white p-8 rounded-2xl shadow-sm border border-gray-100 hover:shadow-xl transition-all duration-300 group">
|
|
<div
|
|
class="w-14 h-14 bg-green-50 text-green-600 rounded-xl flex items-center justify-center mb-6 group-hover:bg-green-600 group-hover:text-white transition-all">
|
|
<i class="fas fa-notes-medical text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">KB & Kespro</h3>
|
|
<p class="text-gray-600 text-sm leading-relaxed mb-6">Pelayanan kontrasepsi dan edukasi kesehatan
|
|
reproduksi yang aman dan terencana.</p>
|
|
<ul class="text-gray-500 text-xs space-y-3 border-t pt-5">
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Konseling Alat
|
|
Kontrasepsi</li>
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Layanan
|
|
Kesehatan Ibu</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div
|
|
class="bg-white p-8 rounded-2xl shadow-sm border border-gray-100 hover:shadow-xl transition-all duration-300 group">
|
|
<div
|
|
class="w-14 h-14 bg-purple-50 text-purple-600 rounded-xl flex items-center justify-center mb-6 group-hover:bg-purple-600 group-hover:text-white transition-all">
|
|
<i class="fas fa-blind text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Lansia & Keluarga</h3>
|
|
<p class="text-gray-600 text-sm leading-relaxed mb-6">Mewujudkan lansia yang tangguh, mandiri, dan tetap
|
|
produktif di masa tua.</p>
|
|
<ul class="text-gray-500 text-xs space-y-3 border-t pt-5">
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> Bina Keluarga
|
|
Lansia (BKL)</li>
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> Sosialisasi
|
|
Lansia Produktif</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div
|
|
class="bg-white p-8 rounded-2xl shadow-sm border border-gray-100 hover:shadow-xl transition-all duration-300 group">
|
|
<div
|
|
class="w-14 h-14 bg-yellow-50 text-yellow-600 rounded-xl flex items-center justify-center mb-6 group-hover:bg-yellow-600 group-hover:text-white transition-all">
|
|
<i class="fas fa-hand-holding-usd text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Pemberdayaan Ekonomi</h3>
|
|
<p class="text-gray-600 text-sm leading-relaxed mb-6">Peningkatan pendapatan keluarga melalui kelompok
|
|
usaha ekonomi produktif (UPPKA).</p>
|
|
<ul class="text-gray-500 text-xs space-y-3 border-t pt-5">
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-yellow-500 mr-2"></i> Pelatihan
|
|
Keterampilan</li>
|
|
<li class="flex items-center"><i class="fas fa-check-circle text-yellow-500 mr-2"></i> Pendampingan
|
|
Usaha Mikro</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="artikel" class="py-20 bg-white">
|
|
<div class="container mx-auto px-4">
|
|
<div class="flex justify-between items-end mb-12">
|
|
<div class="text-left">
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-2">Artikel & Edukasi</h2>
|
|
<p class="text-gray-600">Informasi terbaru seputar kesehatan dan keluarga</p>
|
|
</div>
|
|
<a href="{{ route('articles.index') }}"
|
|
class="text-blue-600 font-semibold hover:underline hidden md:block">
|
|
Lihat Semua Artikel →
|
|
</a>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
@forelse ($articles as $article)
|
|
<div
|
|
class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden flex flex-col transition-all hover:shadow-md">
|
|
<a href="{{ route('articles.show', $article) }}" class="overflow-hidden">
|
|
@if ($article->images->isNotEmpty())
|
|
<img src="{{ asset('storage/' . $article->images->first()->path) }}"
|
|
alt="{{ $article->title }}"
|
|
class="w-full h-56 object-cover transform hover:scale-110 transition-transform duration-500">
|
|
@else
|
|
<div class="w-full h-56 bg-gray-100 flex items-center justify-center">
|
|
<i class="fas fa-image text-gray-300 text-5xl"></i>
|
|
</div>
|
|
@endif
|
|
</a>
|
|
<div class="p-6 flex flex-col flex-grow">
|
|
<span class="text-blue-600 text-xs font-bold uppercase mb-2">Edukasi</span>
|
|
<h3 class="text-xl font-bold mb-3 text-gray-800 line-clamp-2">{{ $article->title }}</h3>
|
|
<p class="text-gray-500 text-xs mb-5">
|
|
<i class="far fa-calendar-alt mr-1"></i>
|
|
{{ $article->created_at->translatedFormat('d F Y') }}
|
|
</p>
|
|
<a href="{{ route('articles.show', $article) }}"
|
|
class="text-blue-600 font-bold text-sm inline-flex items-center mt-auto hover:text-blue-800 transition-colors">
|
|
Baca Selengkapnya <i class="fas fa-arrow-right ml-2 text-xs"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div
|
|
class="col-span-full text-center py-20 bg-gray-50 rounded-3xl border-2 border-dashed border-gray-200">
|
|
<i class="fas fa-newspaper text-gray-300 text-6xl mb-4"></i>
|
|
<p class="text-gray-500 font-medium text-lg">Belum ada artikel yang dipublikasikan.</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="kontak" class="h-96 w-full grayscale hover:grayscale-0 transition-all duration-700">
|
|
<iframe
|
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3949.7221246535323!2d112.21778097354378!3d-8.129747081380389!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e78ebe73c4a8b5b%3A0xec24f7169deddc44!2sBalai%20Penyuluhan%20KB%20Kecamatan%20Kanigoro!5e0!3m2!1sen!2sid!4v1770195810830!5m2!1sen!2sid"
|
|
width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"
|
|
referrerpolicy="no-referrer-when-downgrade">
|
|
</iframe>
|
|
</section>
|
|
|
|
@endsection
|