365 lines
14 KiB
PHP
365 lines
14 KiB
PHP
@extends('publik.layouts.app')
|
||
@section('title', 'Beranda')
|
||
|
||
@push('styles')
|
||
<style>
|
||
.hero-section {
|
||
background: url('/images/bg-desa.jpg') center/cover no-repeat;
|
||
position: relative;
|
||
min-height: 480px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.hero-section::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(135deg, rgba(10, 40, 20, 0.75) 0%, rgba(26, 92, 56, 0.65) 100%);
|
||
}
|
||
|
||
.hero-content {
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.hero-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
background: rgba(255, 255, 255, 0.15);
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
backdrop-filter: blur(6px);
|
||
color: #fff;
|
||
padding: 6px 16px;
|
||
border-radius: 20px;
|
||
font-size: 0.82rem;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.hero-title {
|
||
font-size: 2.4rem;
|
||
font-weight: 800;
|
||
color: #fff;
|
||
line-height: 1.2;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.hero-title span {
|
||
color: #7ee8a2;
|
||
}
|
||
|
||
.hero-desc {
|
||
color: rgba(255, 255, 255, 0.85);
|
||
font-size: 1rem;
|
||
max-width: 520px;
|
||
margin-bottom: 28px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.hero-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 12px 24px;
|
||
border-radius: 10px;
|
||
font-weight: 600;
|
||
font-size: 0.95rem;
|
||
text-decoration: none;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.hero-btn-primary {
|
||
background: #2d7a4f;
|
||
color: #fff;
|
||
border: 2px solid #2d7a4f;
|
||
}
|
||
|
||
.hero-btn-primary:hover {
|
||
background: #1a5c38;
|
||
color: #fff;
|
||
border-color: #1a5c38;
|
||
}
|
||
|
||
.hero-btn-outline {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border: 2px solid rgba(255, 255, 255, 0.4);
|
||
color: #fff;
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
|
||
.hero-btn-outline:hover {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
color: #fff;
|
||
}
|
||
|
||
.stat-card {
|
||
background: #fff;
|
||
border-radius: 14px;
|
||
padding: 24px 20px;
|
||
text-align: center;
|
||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||
border-top: 4px solid var(--green-primary);
|
||
transition: transform 0.2s;
|
||
}
|
||
|
||
.stat-card:hover {
|
||
transform: translateY(-4px);
|
||
}
|
||
|
||
.stat-icon {
|
||
width: 52px;
|
||
height: 52px;
|
||
background: #e8f5ee;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto 12px;
|
||
font-size: 1.5rem;
|
||
color: #2d7a4f;
|
||
}
|
||
|
||
.stat-number {
|
||
font-size: 2rem;
|
||
font-weight: 800;
|
||
color: #1a3c2e;
|
||
line-height: 1;
|
||
}
|
||
|
||
.stat-label {
|
||
color: #6b7280;
|
||
font-size: 0.82rem;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.alur-step {
|
||
display: flex;
|
||
gap: 16px;
|
||
align-items: flex-start;
|
||
padding: 20px;
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||
transition: box-shadow 0.2s;
|
||
}
|
||
|
||
.alur-step:hover {
|
||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.alur-number {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 10px;
|
||
background: var(--green-primary);
|
||
color: #fff;
|
||
font-weight: 800;
|
||
font-size: 1.1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 1.6rem;
|
||
font-weight: 800;
|
||
color: #1a3c2e;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.section-sub {
|
||
color: #6b7280;
|
||
font-size: 0.9rem;
|
||
margin-bottom: 36px;
|
||
}
|
||
</style>
|
||
@endpush
|
||
|
||
@section('content')
|
||
|
||
<div class="hero-section" style="min-height: 480px; background: url('/images/bg-desa.jpg') center center / cover no-repeat; position: relative; display: flex; align-items: center;">
|
||
{{-- Gradient Overlay --}}
|
||
<div style="position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10, 40, 20, 0.75) 0%, rgba(26, 92, 56, 0.65) 100%); z-index: 1;"></div>
|
||
|
||
<div class="container hero-content" style="position: relative; z-index: 2; width: 100%;">
|
||
<div class="row align-items-center">
|
||
<div class="col-lg-7">
|
||
<div class="hero-badge">
|
||
<i class="bi bi-shield-check"></i>
|
||
Sistem Resmi Desa Pungging
|
||
</div>
|
||
<h1 class="hero-title">
|
||
Seleksi BLT Dana Desa<br>
|
||
<span>Transparan & Objektif</span>
|
||
</h1>
|
||
<p class="hero-desc">
|
||
Sistem Pendukung Keputusan berbasis metode <strong style="color:#7ee8a2;">Simple Additive Weighting (SAW)</strong>
|
||
untuk menentukan penerima Bantuan Langsung Tunai Dana Desa secara adil dan terstruktur.
|
||
</p>
|
||
<div class="d-flex gap-3 flex-wrap">
|
||
<a href="{{ route('publik.penerima') }}" class="hero-btn hero-btn-primary">
|
||
<i class="bi bi-people-fill"></i>Lihat Penerima BLT
|
||
</a>
|
||
<a href="{{ route('publik.peta') }}" class="hero-btn hero-btn-outline">
|
||
<i class="bi bi-geo-alt-fill"></i>Peta Distribusi
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-5 d-none d-lg-flex justify-content-end">
|
||
<div style="background:rgba(255,255,255,0.12);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.2);border-radius:16px;padding:24px;min-width:220px;">
|
||
@if($periodeAktif)
|
||
<div style="color:rgba(255,255,255,0.6);font-size:0.75rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;">Periode Aktif</div>
|
||
<div style="color:#fff;font-weight:700;font-size:1rem;margin-bottom:4px;">{{ $periodeAktif->nama }}</div>
|
||
<div style="color:#7ee8a2;font-size:0.82rem;margin-bottom:16px;">
|
||
<i class="bi bi-calendar3 me-1"></i>
|
||
{{ \Carbon\Carbon::parse($periodeAktif->tanggal_mulai)->format('d M Y') }}
|
||
</div>
|
||
<div style="background:rgba(255,255,255,0.1);border-radius:8px;padding:10px 14px;color:#fff;font-size:0.85rem;">
|
||
<div style="color:rgba(255,255,255,0.6);font-size:0.72rem;">Kuota Penerima</div>
|
||
<div style="font-size:1.4rem;font-weight:800;color:#7ee8a2;">{{ $periodeAktif->kuota_penerima }}</div>
|
||
<div style="font-size:0.72rem;color:rgba(255,255,255,0.5);">orang</div>
|
||
</div>
|
||
@else
|
||
<div style="color:rgba(255,255,255,0.6);font-size:0.85rem;text-align:center;padding:16px 0;">
|
||
<i class="bi bi-calendar-x" style="font-size:2rem;display:block;margin-bottom:8px;opacity:0.5;"></i>
|
||
Belum ada periode aktif
|
||
</div>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- STAT CARDS --}}
|
||
<div class="container" style="margin-top:-40px;position:relative;z-index:10;">
|
||
<div class="row g-3">
|
||
<div class="col-6 col-md-3">
|
||
<a href="{{ route('publik.penerima') }}" style="text-decoration:none;">
|
||
<div class="stat-card">
|
||
<div class="stat-icon"><i class="bi bi-people-fill"></i></div>
|
||
<div class="stat-number">{{ number_format($totalWarga) }}</div>
|
||
<div class="stat-label">Total Warga Terdaftar</div>
|
||
</div></a>
|
||
</div>
|
||
<div class="col-6 col-md-3">
|
||
<a href="{{ route('publik.penerima') }}" style="text-decoration:none;">
|
||
<div class="stat-card">
|
||
<div class="stat-icon" style="background:#fef9c3;color:#ca8a04;"><i class="bi bi-check-circle-fill"></i></div>
|
||
<div class="stat-number">{{ number_format($totalPenerima) }}</div>
|
||
<div class="stat-label">Total Penerima BLT</div>
|
||
</div></a>
|
||
</div>
|
||
<div class="col-6 col-md-3">
|
||
<a href="{{ route('publik.peta') }}" style="text-decoration:none;">
|
||
<div class="stat-card">
|
||
<div class="stat-icon" style="background:#dbeafe;color:#2563eb;"><i class="bi bi-calendar-check"></i></div>
|
||
<div class="stat-number">{{ $periodeSelesai }}</div>
|
||
<div class="stat-label">Periode Selesai</div>
|
||
</div></a>
|
||
</div>
|
||
<div class="col-6 col-md-3">
|
||
<div class="stat-card">
|
||
<div class="stat-icon" style="background:#fce7f3;color:#db2777;"><i class="bi bi-graph-up-arrow"></i></div>
|
||
<div class="stat-number">SAW</div>
|
||
<div class="stat-label">Metode Seleksi</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- ALUR SELEKSI --}}
|
||
<div class="container mt-5 pt-3">
|
||
<div class="text-center mb-5">
|
||
<div class="section-title">Alur Proses Seleksi BLT</div>
|
||
<div class="section-sub">Proses seleksi dilakukan secara sistematis dan transparan menggunakan metode SAW</div>
|
||
</div>
|
||
<div class="row g-3 justify-content-center">
|
||
@php
|
||
$alur = [
|
||
['icon'=>'bi-person-plus-fill','title'=>'Input Data Warga','desc'=>'Perangkat desa menginput data calon penerima beserta informasi sosial ekonomi.'],
|
||
['icon'=>'bi-clipboard-data-fill','title'=>'Penilaian Kriteria','desc'=>'Setiap warga dinilai berdasarkan 7 kriteria: penghasilan, tanggungan, tempat tinggal, dan lainnya.'],
|
||
['icon'=>'bi-calculator-fill','title'=>'Perhitungan SAW','desc'=>'Sistem menghitung normalisasi dan skor akhir menggunakan metode Simple Additive Weighting.'],
|
||
['icon'=>'bi-trophy-fill','title'=>'Ranking & Penetapan','desc'=>'Warga diurutkan berdasarkan skor tertinggi dan ditetapkan sesuai kuota per periode.'],
|
||
['icon'=>'bi-eye-fill','title'=>'Publikasi Transparan','desc'=>'Hasil seleksi dipublikasikan secara terbuka agar dapat diakses masyarakat.'],
|
||
];
|
||
@endphp
|
||
@foreach($alur as $i => $step)
|
||
<div class="col-md-6 col-lg-4">
|
||
<div class="alur-step">
|
||
<div class="alur-number">{{ $i+1 }}</div>
|
||
<div>
|
||
<div style="font-weight:700;color:#1a3c2e;margin-bottom:4px;">
|
||
<i class="bi {{ $step['icon'] }} me-2 text-green"></i>{{ $step['title'] }}
|
||
</div>
|
||
<div style="font-size:0.83rem;color:#6b7280;line-height:1.6;">{{ $step['desc'] }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
|
||
{{-- PERIODE TERBARU --}}
|
||
@if($periodeList->isNotEmpty())
|
||
<div class="container mt-5 pt-3">
|
||
<div class="text-center mb-4">
|
||
<div class="section-title">Riwayat Periode Seleksi</div>
|
||
<div class="section-sub">Histori seleksi BLT Dana Desa Pungging</div>
|
||
</div>
|
||
<div class="row g-3 justify-content-center">
|
||
@foreach($periodeList as $p)
|
||
<div class="col-md-4">
|
||
<div class="card p-3">
|
||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||
<div style="font-weight:700;color:#1a3c2e;font-size:0.9rem;">{{ $p->nama }}</div>
|
||
@if($p->status === 'aktif')
|
||
<span class="badge bg-success">Aktif</span>
|
||
@else
|
||
<span class="badge bg-primary">Selesai</span>
|
||
@endif
|
||
</div>
|
||
<div style="font-size:0.8rem;color:#6b7280;">
|
||
<i class="bi bi-calendar3 me-1"></i>
|
||
{{ \Carbon\Carbon::parse($p->tanggal_mulai)->format('d M Y') }} –
|
||
{{ \Carbon\Carbon::parse($p->tanggal_selesai)->format('d M Y') }}
|
||
</div>
|
||
<div style="font-size:0.8rem;color:#6b7280;margin-top:4px;">
|
||
<i class="bi bi-people me-1"></i>Kuota: {{ $p->kuota_penerima }} orang
|
||
</div>
|
||
<a href="{{ route('publik.penerima', ['periode_id' => $p->id]) }}" class="btn btn-sm btn-primary mt-3 w-100">
|
||
<i class="bi bi-list-check me-1"></i>Lihat Penerima
|
||
</a>
|
||
<a href="{{ route('publik.peta', ['periode_id' => $p->id]) }}" class="btn btn-sm btn-outline-success mt-1 w-100">
|
||
<i class="bi bi-geo-alt me-1"></i>Lihat Peta
|
||
</a>
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
{{-- TRANSPARANSI BANNER --}}
|
||
<div class="container mt-5 pt-3 mb-4">
|
||
<div style="background:linear-gradient(135deg,#1a3c2e,#2d7a4f);border-radius:16px;padding:36px;color:#fff;text-align:center;">
|
||
<i class="bi bi-shield-check" style="font-size:2.5rem;color:#7ee8a2;margin-bottom:12px;display:block;"></i>
|
||
<h4 style="font-weight:800;margin-bottom:8px;">Komitmen Transparansi Desa</h4>
|
||
<p style="color:rgba(255,255,255,0.8);max-width:500px;margin:0 auto 20px;font-size:0.9rem;line-height:1.7;">
|
||
Seleksi BLT dilakukan secara objektif berbasis data menggunakan sistem komputasi.
|
||
Seluruh hasil dapat diverifikasi dan diakses oleh masyarakat.
|
||
</p>
|
||
<div class="d-flex justify-content-center gap-3 flex-wrap">
|
||
<a href="{{ route('publik.penerima') }}" class="hero-btn hero-btn-primary" style="background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.3);">
|
||
<i class="bi bi-list-ul"></i>Daftar Penerima
|
||
</a>
|
||
<a href="{{ route('publik.peta') }}" class="hero-btn" style="background:rgba(255,255,255,0.1);border:2px solid rgba(255,255,255,0.3);color:#fff;">
|
||
<i class="bi bi-map"></i>Peta Distribusi
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
@endsection |