ikan Uploader :
Directory : /var/www/new-ppid-app/
Upload File : |
| Current File : /var/www/new-ppid-app/index.php |
<?php
/**
* Halaman Beranda — Portal PPID Kabupaten Mamuju Tengah.
*/
require_once __DIR__ . '/config/config.php';
require_once __DIR__ . '/includes/queries.php';
$kategoriKip = get_kategori('kip');
$jumlahDok = count_dokumen_per_kategori();
// Dokumen terbaru untuk ditampilkan di beranda.
$dokumenTerbaru = db()->query(
"SELECT d.id, d.judul, d.tahun, d.created_at, k.nama AS kategori_nama, k.slug AS kategori_slug, k.warna, k.icon
FROM dokumen_informasi d
JOIN kategori_informasi k ON k.id = d.kategori_id
WHERE d.status = 'publish'
ORDER BY d.created_at DESC LIMIT 6"
)->fetchAll();
$testimoniStats = testimoni_publik_stats();
$testimoni = get_testimoni_publik(3);
// Berita terbaru untuk section di beranda.
$beritaTerbaru = get_berita_terbaru(3);
// Angka statistik ringkas untuk strip "social proof".
$statBeranda = [
'dokumen' => (int) db()->query("SELECT COUNT(*) FROM dokumen_informasi WHERE status = 'publish'")->fetchColumn(),
'permohonan' => (int) db()->query("SELECT COUNT(*) FROM permohonan")->fetchColumn(),
'selesai' => (int) db()->query("SELECT COUNT(*) FROM permohonan WHERE status = 'selesai'")->fetchColumn(),
];
// Pemetaan warna kategori → gradient untuk ikon modern.
$gradKategori = [
'blue' => 'from-sky-500 to-mateng-blue',
'red' => 'from-rose-500 to-red-600',
'green' => 'from-emerald-500 to-mateng-green',
'gold' => 'from-amber-400 to-mateng-gold',
'slate' => 'from-slate-500 to-slate-700',
];
$gradOf = static fn (string $w): string => $gradKategori[$w] ?? $gradKategori['slate'];
// Media banner opsional di folder assets/:
// • assets/video-mateng.mp4 (atau hero.mp4) → video latar penuh (autoplay, mute, loop)
// • foto pimpinan ditampilkan di sisi kanan hero (split layout).
$heroVideo = null;
foreach (['video-mateng.mp4', 'hero.mp4', 'hero.webm'] as $vf) {
if (is_file(ROOT_PATH . '/assets/' . $vf)) { $heroVideo = asset($vf); break; }
}
$heroBupati = null;
foreach (['bupatidanwakil.webp', 'bupatidanwakil.png', 'hero.jpg', 'hero.jpeg', 'hero.png', 'hero.webp'] as $f) {
if (is_file(ROOT_PATH . '/assets/' . $f)) { $heroBupati = asset($f); break; }
}
$heroSekda = null;
foreach (['sekda-mateng.webp', 'sekda-mateng.png'] as $f) {
if (is_file(ROOT_PATH . '/assets/' . $f)) { $heroSekda = asset($f); break; }
}
// ── UKURAN FOTO PIMPINAN DI HERO (Bupati & Wakil + Sekda) ──
// Kedua foto memakai kelas yang sama agar TINGGI-nya seimbang. Untuk memperbesar/
// memperkecil KEDUA foto sekaligus, ubah nilai tinggi: h-[13rem] (layar sedang) dan
// xl:h-[16rem] (layar besar). Contoh lebih besar: 'h-[15rem] xl:h-[18rem]'.
$heroFotoClass = 'w-auto max-w-full h-[13rem] xl:h-[18rem] object-contain object-bottom pointer-events-none select-none drop-shadow-2xl';
$dots = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='2' cy='2' r='1.4' fill='%23ffffff'/%3E%3C/svg%3E";
// Frasa efek ketik (looping) pada judul hero. Tiap frasa: 'm' = teks putih, 'a' = teks aksen (gradient emas).
$twPhrases = [
['m' => t('Layanan Informasi Publik') . ' ', 'a' => t('Terpadu')],
['m' => t('Pejabat Pengelola Informasi dan Dokumentasi') . ' ', 'a' => '(PPID)'],
];
$pageTitle = APP_NAME . ' — Layanan Informasi Publik';
$activeNav = 'beranda';
$transparentNav = true; // navbar transparan di atas hero, putih saat di-scroll
require __DIR__ . '/partials/head.php';
require __DIR__ . '/partials/navbar.php';
?>
<style>
/* Animasi reveal saat elemen masuk viewport */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none; } }
/* Animasi mengambang lembut untuk aksen */
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.floaty { animation: floaty 6s ease-in-out infinite; }
/* Kursor efek ketik pada judul hero */
#twCursor { display:inline-block; width:4px; height:.95em; margin-left:5px; border-radius:2px; background:#fcd34d; vertical-align:-.08em; animation: twblink 1.05s steps(1,end) infinite; }
@keyframes twblink { 0%,50% { opacity:1; } 50.01%,100% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { #twCursor { animation:none; } }
</style>
<noscript><style>.reveal{opacity:1!important;transform:none!important}</style></noscript>
<!-- ============================= HERO ============================= -->
<section class="relative bg-mateng-green overflow-hidden">
<!-- Latar gradient (tampil instan; juga fallback bila video belum/tidak dimuat) -->
<div class="absolute inset-0 bg-gradient-to-br from-mateng-green via-green-700 to-mateng-blue"></div>
<?php if ($heroVideo): ?>
<!-- Video dimuat "lazy" via JS (preload none) agar tidak memperlambat load awal -->
<video id="heroVideo" class="absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-700" data-src="<?= e($heroVideo) ?>" muted loop playsinline preload="none" aria-hidden="true">
<source type="video/mp4">
</video>
<?php endif; ?>
<!-- Scrim gelap ber-nuansa brand agar teks tetap terbaca (di atas gradient/video) -->
<div class="absolute inset-0 bg-gradient-to-br from-green-950/60 via-slate-900/45 to-mateng-blue/45"></div>
<div class="absolute inset-0 bg-gradient-to-r from-black/50 via-black/10 to-transparent"></div>
<div class="absolute inset-0 opacity-[0.06]" style="background-image:url('<?= $dots ?>');background-size:28px 28px;"></div>
<div class="absolute -top-32 -right-24 w-96 h-96 bg-white/10 rounded-full blur-3xl pointer-events-none floaty"></div>
<div class="absolute -bottom-40 -left-24 w-[28rem] h-[28rem] bg-mateng-gold/15 rounded-full blur-3xl pointer-events-none floaty" style="animation-delay:-3s"></div>
<!-- Overlay animasi jaringan digital (digitalisasi) di atas video -->
<canvas id="heroNet" class="absolute inset-0 w-full h-full pointer-events-none" style="z-index:5" aria-hidden="true"></canvas>
<div class="relative z-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-28 pb-16 lg:pb-24">
<div class="grid lg:grid-cols-[1.15fr_1.2fr_0.9fr] items-end gap-2 xl:gap-4">
<!-- Kiri: Bupati & Wakil Bupati -->
<div class="hidden lg:flex items-end justify-center">
<?php if ($heroBupati): ?>
<img src="<?= e($heroBupati) ?>" alt="Bupati & Wakil Bupati Kabupaten Mamuju Tengah"
decoding="async" class="<?= $heroFotoClass ?>">
<?php endif; ?>
</div>
<!-- Tengah: teks utama -->
<div class="flex flex-col items-center text-center lg:self-center">
<span class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/15 text-white text-[11px] md:text-xs font-semibold tracking-widest mb-5 backdrop-blur-sm border border-white/25">
<span class="w-1.5 h-1.5 rounded-full bg-mateng-gold animate-pulse"></span> BUMI LALLA TASSISARA
</span>
<h1 class="text-2xl md:text-3xl xl:text-4xl font-extrabold text-white mb-4 leading-[1.15] tracking-tight">
<span class="block min-h-[3.6em]"><span id="twMain"><?= e($twPhrases[0]['m']) ?></span><span id="twAccent" class="bg-gradient-to-r from-amber-200 to-mateng-gold bg-clip-text text-transparent"><?= e($twPhrases[0]['a']) ?></span><span id="twCursor" aria-hidden="true"></span></span>
<span class="block text-lg md:text-xl mt-2 font-bold text-green-50/95"><?= e(t('Pemerintah Kabupaten Mamuju Tengah')) ?></span>
</h1>
<p class="text-sm md:text-base text-green-50/90 mb-6 max-w-md font-light">
<?= e(t('Akses dokumen dan informasi publik secara cepat, mudah, dan transparan.')) ?>
</p>
<form action="<?= e(url('informasi.php')) ?>" method="get" class="w-full max-w-md bg-white/95 backdrop-blur p-1.5 rounded-2xl shadow-2xl shadow-black/20 flex items-center transition-all focus-within:ring-4 focus-within:ring-white/40">
<i class="fas fa-search text-slate-400 ml-3 md:ml-4 text-lg"></i>
<input type="text" name="q" placeholder="<?= e(t('Cari informasi publik...')) ?>" class="w-full px-3 py-2.5 outline-none text-slate-700 bg-transparent placeholder-slate-400 text-sm">
<button type="submit" class="bg-gradient-to-r from-mateng-gold to-amber-500 hover:from-amber-500 hover:to-mateng-gold text-white px-5 py-2.5 rounded-xl font-bold transition-all shadow-lg shrink-0 text-sm"><?= e(t('Cari')) ?></button>
</form>
<!-- Chip aksi cepat -->
<div class="flex flex-wrap items-center gap-2 mt-5 justify-center">
<a href="<?= e(url('permohonan.php')) ?>" class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white/10 hover:bg-white/20 text-white text-xs md:text-sm font-medium border border-white/20 backdrop-blur-sm transition-colors"><i class="fas fa-paper-plane text-xs"></i> <?= e(t('Ajukan Permohonan')) ?></a>
<a href="<?= e(url('cek-status.php')) ?>" class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white/10 hover:bg-white/20 text-white text-xs md:text-sm font-medium border border-white/20 backdrop-blur-sm transition-colors"><i class="fas fa-magnifying-glass text-xs"></i> <?= e(t('Lacak Status')) ?></a>
<a href="<?= e(url('regulasi.php')) ?>" class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white/10 hover:bg-white/20 text-white text-xs md:text-sm font-medium border border-white/20 backdrop-blur-sm transition-colors"><i class="fas fa-gavel text-xs"></i> <?= e(t('Regulasi')) ?></a>
</div>
</div>
<!-- Kanan: Sekretaris Daerah -->
<div class="hidden lg:flex items-end justify-center">
<?php if ($heroSekda): ?>
<img src="<?= e($heroSekda) ?>" alt="Litha Febriani, SE., M.Si. — Sekretaris Daerah Kab. Mamuju Tengah"
decoding="async" class="<?= $heroFotoClass ?>">
<?php endif; ?>
</div>
</div>
</div>
<!-- Lengkung pemisah ke section berikutnya -->
<div class="absolute bottom-0 inset-x-0 leading-none">
<svg class="w-full h-12 md:h-16" viewBox="0 0 1440 80" preserveAspectRatio="none"><path class="wave-sep" fill="#f8fafc" d="M0,40 C360,90 1080,-10 1440,40 L1440,80 L0,80 Z"></path></svg>
</div>
</section>
<script>
// Video hero dimuat "lazy": hanya di layar besar & koneksi memadai, setelah halaman siap.
(function () {
var v = document.getElementById('heroVideo');
if (!v) return;
var conn = navigator.connection || {};
var slow = conn.saveData === true || /(^|\b)(2g|slow-2g)$/.test(conn.effectiveType || '');
var small = window.matchMedia('(max-width: 900px)').matches;
if (slow || small) return; // cukup gradient sebagai latar
function go() {
var s = v.querySelector('source');
if (!s || s.src) return;
s.src = v.getAttribute('data-src');
v.load();
v.addEventListener('playing', function () { v.classList.remove('opacity-0'); }, { once: true });
var p = v.play();
if (p && p.catch) { p.catch(function () {}); }
}
if (document.readyState === 'complete') { go(); }
else { window.addEventListener('load', go); }
})();
</script>
<script>
// Animasi jaringan digital (titik + garis penghubung) di atas video hero.
(function () {
var canvas = document.getElementById('heroNet');
if (!canvas) return;
var section = canvas.parentElement;
var ctx = canvas.getContext('2d');
if (!ctx) return;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var dpr = Math.min(window.devicePixelRatio || 1, 2);
var W = 0, H = 0, pts = [], raf = null, visible = true;
var LINK = 140; // jarak sambung antar titik (px)
var MOUSE = 190; // radius interaksi kursor (px)
var SPEED = 0.7; // kecepatan gerak titik
var mouse = { x: null, y: null };
function build() {
var r = section.getBoundingClientRect();
W = r.width; H = r.height;
canvas.width = Math.floor(W * dpr);
canvas.height = Math.floor(H * dpr);
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
var target = Math.min(140, Math.max(40, Math.round(W * H / 10000)));
pts = [];
for (var i = 0; i < target; i++) {
pts.push({
x: Math.random() * W, y: Math.random() * H,
vx: (Math.random() - 0.5) * SPEED, vy: (Math.random() - 0.5) * SPEED,
blue: Math.random() < 0.18
});
}
}
function draw() {
ctx.clearRect(0, 0, W, H);
for (var i = 0; i < pts.length; i++) {
var p = pts[i];
p.x += p.vx; p.y += p.vy;
if (p.x <= 0 || p.x >= W) p.vx *= -1;
if (p.y <= 0 || p.y >= H) p.vy *= -1;
// Interaksi kursor: sambungkan titik ke kursor + dorong lembut menjauh.
if (mouse.x !== null) {
var mdx = p.x - mouse.x, mdy = p.y - mouse.y, md = Math.sqrt(mdx * mdx + mdy * mdy);
if (md < MOUSE) {
ctx.strokeStyle = 'rgba(56,189,248,' + ((1 - md / MOUSE) * 0.6).toFixed(3) + ')';
ctx.lineWidth = 1;
ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(mouse.x, mouse.y); ctx.stroke();
if (!reduce && md > 0.01) { var f = (1 - md / MOUSE) * 0.7; p.x += (mdx / md) * f; p.y += (mdy / md) * f; }
}
}
for (var j = i + 1; j < pts.length; j++) {
var q = pts[j], dx = p.x - q.x, dy = p.y - q.y;
var d = Math.sqrt(dx * dx + dy * dy);
if (d < LINK) {
ctx.strokeStyle = 'rgba(255,255,255,' + ((1 - d / LINK) * 0.32).toFixed(3) + ')';
ctx.lineWidth = 1;
ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(q.x, q.y); ctx.stroke();
}
}
}
for (var k = 0; k < pts.length; k++) {
var pt = pts[k];
ctx.beginPath();
ctx.arc(pt.x, pt.y, pt.blue ? 2.9 : 1.7, 0, Math.PI * 2);
ctx.fillStyle = pt.blue ? 'rgba(56,189,248,0.95)' : 'rgba(255,255,255,0.72)';
ctx.fill();
}
}
function loop() { draw(); raf = requestAnimationFrame(loop); }
function start() { if (raf === null && visible && !document.hidden) { raf = requestAnimationFrame(loop); } }
function stop() { if (raf !== null) { cancelAnimationFrame(raf); raf = null; } }
build();
var t;
window.addEventListener('resize', function () { clearTimeout(t); t = setTimeout(function () { build(); if (reduce) draw(); }, 200); }, { passive: true });
// Kursor interaktif: lacak posisi relatif terhadap hero.
section.addEventListener('mousemove', function (e) {
var r = section.getBoundingClientRect();
mouse.x = e.clientX - r.left; mouse.y = e.clientY - r.top;
if (reduce) draw();
}, { passive: true });
section.addEventListener('mouseleave', function () { mouse.x = mouse.y = null; if (reduce) draw(); });
if (reduce) { draw(); return; }
start();
document.addEventListener('visibilitychange', function () { if (document.hidden) stop(); else start(); });
if ('IntersectionObserver' in window) {
new IntersectionObserver(function (es) {
visible = es[0].isIntersecting;
if (visible) start(); else stop();
}, { threshold: 0 }).observe(section);
}
})();
</script>
<!-- ===================== KARTU KATEGORI ===================== -->
<section class="bg-slate-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-10 relative z-10">
<br>
<br>
<div class="text-center mb-10 reveal">
<span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-mateng-green/10 text-mateng-green text-xs font-bold uppercase tracking-wider mb-3"><i class="fas fa-layer-group"></i> <?= e(t('Klasifikasi Informasi')) ?></span>
<h2 class="text-3xl md:text-4xl font-bold text-slate-900 tracking-tight"><?= e(t('Kategori Informasi Publik')) ?></h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<?php foreach ($kategoriKip as $i => $kat):
$jml = $jumlahDok[(int) $kat['id']] ?? 0; ?>
<div class="reveal group relative bg-white rounded-3xl p-6 ring-1 ring-slate-100 shadow-xl shadow-slate-200/40 hover:-translate-y-2 hover:shadow-2xl hover:shadow-slate-300/50 transition-all duration-300 flex flex-col h-full overflow-hidden" style="transition-delay:<?= $i * 80 ?>ms">
<div class="absolute top-0 inset-x-0 h-1 bg-gradient-to-r <?= $gradOf($kat['warna']) ?> opacity-0 group-hover:opacity-100 transition-opacity"></div>
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br <?= $gradOf($kat['warna']) ?> text-white flex items-center justify-center text-2xl mb-5 shadow-lg group-hover:scale-110 transition-transform duration-300">
<i class="fas <?= e($kat['icon']) ?>"></i>
</div>
<h3 class="text-lg font-bold text-slate-900 mb-2"><?= e($kat['nama']) ?></h3>
<p class="text-slate-500 text-sm mb-6 flex-grow leading-relaxed"><?= e($kat['deskripsi']) ?></p>
<div class="flex items-center justify-between pt-4 border-t border-slate-100">
<a href="<?= e(url('informasi.php?kategori=' . $kat['slug'])) ?>" class="text-slate-700 group-hover:text-mateng-green font-semibold text-sm inline-flex items-center gap-1.5 transition-colors">
<?= e(t('Lihat Dokumen')) ?> <i class="fas fa-arrow-right text-xs group-hover:translate-x-1 transition-transform"></i>
</a>
<span class="text-xs font-bold text-slate-500 bg-slate-100 px-2.5 py-1 rounded-full"><?= $jml ?> <?= e(t('dok')) ?></span>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</section>
<!-- ===================== STRIP STATISTIK ===================== -->
<section class="bg-slate-50 py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="reveal relative overflow-hidden rounded-3xl bg-gradient-to-br from-mateng-green via-green-700 to-mateng-blue p-8 md:p-12 shadow-2xl shadow-mateng-green/20">
<div class="absolute inset-0 opacity-[0.07]" style="background-image:url('<?= $dots ?>');background-size:26px 26px;"></div>
<div class="absolute -top-20 -right-10 w-72 h-72 bg-white/10 rounded-full blur-3xl pointer-events-none"></div>
<div class="relative grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-4 text-center text-white divide-y md:divide-y-0 md:divide-x divide-white/15">
<?php
$stats = [
['fa-folder-open', $statBeranda['dokumen'], t('Dokumen Publik')],
['fa-inbox', $statBeranda['permohonan'], t('Total Permohonan')],
['fa-circle-check', $statBeranda['selesai'], t('Permohonan Selesai')],
['fa-star', $testimoniStats['avg'], t('Rating Kepuasan')],
];
foreach ($stats as $j => $st): ?>
<div class="px-2 py-4 md:py-0">
<div class="w-11 h-11 mx-auto mb-3 rounded-xl bg-white/15 flex items-center justify-center text-lg"><i class="fas <?= $st[0] ?>"></i></div>
<div class="text-3xl md:text-4xl font-extrabold tracking-tight"><?= $j === 3 ? number_format((float) $st[1], 1) : number_format((int) $st[1]) ?><?= $j === 3 ? '<span class="text-xl">/5</span>' : '' ?></div>
<div class="text-green-50/80 text-sm mt-1"><?= e($st[2]) ?></div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</section>
<!-- ===================== ALUR PERMOHONAN ===================== -->
<section class="py-24 bg-white relative overflow-hidden">
<div class="absolute top-20 -left-20 w-72 h-72 bg-mateng-blue/5 rounded-full blur-3xl pointer-events-none"></div>
<div class="absolute bottom-10 -right-20 w-72 h-72 bg-mateng-green/5 rounded-full blur-3xl pointer-events-none"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative">
<div class="reveal">
<span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-mateng-blue/10 text-mateng-blue text-xs font-bold uppercase tracking-wider mb-3"><i class="fas fa-route"></i> <?= e(t('Cara Kerja')) ?></span>
<h2 class="text-3xl md:text-4xl font-bold text-slate-900 mb-4 tracking-tight"><?= e(t('Alur Permohonan Informasi')) ?></h2>
<p class="text-slate-500 max-w-2xl mx-auto mb-16"><?= e(t('Proses pengajuan permohonan informasi publik berbasis digital secara terpadu untuk pelayanan yang lebih cepat dan terukur.')) ?></p>
</div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 relative">
<!-- Garis penghubung antar langkah (desktop) -->
<div class="hidden md:block absolute top-10 left-[12.5%] right-[12.5%] h-0.5 bg-gradient-to-r from-mateng-blue/30 via-mateng-blue/30 to-mateng-green/40"></div>
<?php
$alur = [
['fa-file-signature', t('Isi Formulir'), t('Pemohon mengisi formulir permohonan informasi secara online beserta data diri & tujuan penggunaan.'), 'from-sky-500 to-mateng-blue'],
['fa-receipt', t('Terima Resi'), t('Sistem menerbitkan Nomor Resi sebagai bukti permohonan untuk melacak status.'), 'from-sky-500 to-mateng-blue'],
['fa-list-check', t('Verifikasi PPID'), t('Admin PPID Mamuju Tengah memverifikasi dan memproses permintaan Anda.'), 'from-indigo-500 to-mateng-blue'],
['fa-circle-check', t('Informasi Diterima'), t('Pemohon menerima tanggapan & dokumen sesuai cara perolehan yang dipilih.'), 'from-emerald-500 to-mateng-green'],
];
foreach ($alur as $i => $a): ?>
<div class="reveal relative group" style="transition-delay:<?= $i * 90 ?>ms">
<div class="relative z-10 w-20 h-20 mx-auto mb-5">
<div class="w-20 h-20 rounded-2xl bg-gradient-to-br <?= $a[3] ?> text-white flex items-center justify-center text-2xl shadow-xl group-hover:scale-110 group-hover:-rotate-6 transition-transform duration-300">
<i class="fas <?= $a[0] ?>"></i>
</div>
<span class="absolute -top-2 -right-2 w-7 h-7 rounded-full bg-white text-slate-800 text-sm font-extrabold flex items-center justify-center shadow-md ring-1 ring-slate-100"><?= $i + 1 ?></span>
</div>
<h3 class="font-bold text-lg mb-2 text-slate-800"><?= e($a[1]) ?></h3>
<p class="text-sm text-slate-500 leading-relaxed px-2"><?= e($a[2]) ?></p>
</div>
<?php endforeach; ?>
</div>
<div class="reveal mt-16 flex flex-col sm:flex-row justify-center gap-4">
<a href="<?= e(url('permohonan.php')) ?>" class="px-8 py-4 text-base font-bold text-white bg-gradient-to-r from-mateng-green to-emerald-600 hover:to-mateng-green rounded-2xl shadow-lg shadow-mateng-green/30 hover:shadow-xl hover:-translate-y-0.5 transition-all flex items-center justify-center gap-2">
<i class="fas fa-paper-plane"></i> <?= e(t('Ajukan Permohonan')) ?>
</a>
<a href="<?= e(url('cek-status.php')) ?>" class="px-8 py-4 text-base font-bold text-slate-700 bg-white border border-slate-200 hover:border-mateng-green hover:text-mateng-green rounded-2xl shadow-sm hover:shadow-md transition-all flex items-center justify-center gap-2">
<i class="fas fa-magnifying-glass"></i> <?= e(t('Cek Status Permohonan')) ?>
</a>
</div>
</div>
</section>
<!-- ===================== DOKUMEN TERBARU ===================== -->
<?php if (!empty($dokumenTerbaru)): ?>
<section class="py-24 bg-gradient-to-br from-emerald-50 via-slate-50 to-sky-50 dark:from-slate-900 dark:via-slate-900 dark:to-slate-900 relative overflow-hidden">
<!-- Aksen dekoratif agar tidak polos -->
<div class="absolute -top-16 -left-24 w-80 h-80 bg-mateng-green/10 rounded-full blur-3xl pointer-events-none"></div>
<div class="absolute -bottom-24 -right-16 w-96 h-96 bg-mateng-blue/10 rounded-full blur-3xl pointer-events-none"></div>
<div class="absolute inset-0 opacity-[0.05]" style="background-image:url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2726%27 height=%2726%27%3E%3Ccircle cx=%272%27 cy=%272%27 r=%271.3%27 fill=%27%2394a3b8%27/%3E%3C/svg%3E');background-size:26px 26px;"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="reveal flex flex-col sm:flex-row sm:items-end justify-between gap-4 mb-12">
<div>
<span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-mateng-gold/10 text-mateng-gold text-xs font-bold uppercase tracking-wider mb-3"><i class="fas fa-file-lines"></i> <?= e(t('Informasi Publik')) ?></span>
<h2 class="text-3xl md:text-4xl font-bold text-slate-900 tracking-tight"><?= e(t('Dokumen Terbaru')) ?></h2>
<p class="text-slate-500 mt-2"><?= e(t('Informasi publik terkini yang dipublikasikan badan publik.')) ?></p>
</div>
<a href="<?= e(url('informasi.php')) ?>" class="hidden sm:inline-flex items-center gap-2 text-mateng-green font-semibold hover:gap-3 transition-all"><?= e(t('Semua Dokumen')) ?> <i class="fas fa-arrow-right text-xs"></i></a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<?php foreach ($dokumenTerbaru as $i => $d): ?>
<a href="<?= e(url('dokumen.php?id=' . $d['id'])) ?>" class="reveal group bg-white rounded-3xl p-6 ring-1 ring-slate-100 shadow-lg shadow-slate-200/40 hover:-translate-y-1.5 hover:shadow-2xl hover:shadow-slate-300/50 transition-all duration-300 flex flex-col" style="transition-delay:<?= $i * 70 ?>ms">
<div class="flex items-center gap-3 mb-4">
<div class="w-11 h-11 rounded-xl bg-gradient-to-br <?= $gradOf($d['warna']) ?> text-white flex items-center justify-center shadow-md">
<i class="fas <?= e($d['icon']) ?>"></i>
</div>
<span class="text-xs font-bold text-slate-500 uppercase tracking-wide"><?= e($d['kategori_nama']) ?></span>
</div>
<h3 class="font-bold text-slate-800 group-hover:text-mateng-green transition-colors leading-snug mb-4 flex-grow"><?= e($d['judul']) ?></h3>
<div class="flex items-center justify-between text-xs text-slate-400 pt-4 border-t border-slate-100">
<span><i class="far fa-calendar mr-1"></i><?= e($d['tahun'] ?: tanggal_id($d['created_at'])) ?></span>
<span class="inline-flex items-center gap-1 text-mateng-green font-semibold opacity-0 group-hover:opacity-100 transition-opacity"><?= e(t('Buka')) ?> <i class="fas fa-arrow-right"></i></span>
</div>
</a>
<?php endforeach; ?>
</div>
<div class="sm:hidden text-center mt-8">
<a href="<?= e(url('informasi.php')) ?>" class="inline-flex items-center gap-2 text-mateng-green font-semibold"><?= e(t('Semua Dokumen')) ?> <i class="fas fa-arrow-right text-xs"></i></a>
</div>
</div>
</section>
<?php endif; ?>
<!-- ===================== TESTIMONI ===================== -->
<?php if (!empty($testimoni)): ?>
<section class="py-24 bg-white relative overflow-hidden">
<div class="absolute -top-10 left-1/2 -translate-x-1/2 w-[40rem] h-72 bg-mateng-green/5 rounded-full blur-3xl pointer-events-none"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
<div class="reveal text-center mb-12">
<span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-mateng-green/10 text-mateng-green text-xs font-bold uppercase tracking-wider mb-3"><i class="fas fa-comments"></i> <?= e(t('Testimoni')) ?></span>
<h2 class="text-3xl md:text-4xl font-bold text-slate-900 mb-4 tracking-tight"><?= e(t('Apa Kata Masyarakat')) ?></h2>
<?php if ($testimoniStats['count'] > 0): ?>
<div class="inline-flex items-center gap-3 bg-white border border-slate-100 rounded-full px-5 py-2.5 shadow-lg shadow-slate-200/50">
<span class="text-2xl font-extrabold text-slate-900"><?= number_format($testimoniStats['avg'], 1) ?></span>
<?= render_stars($testimoniStats['avg'], 'text-sm') ?>
<span class="text-sm text-slate-500">· <?= $testimoniStats['count'] ?> <?= e(t('penilaian')) ?></span>
</div>
<?php endif; ?>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<?php foreach ($testimoni as $i => $t): ?>
<figure class="reveal relative bg-gradient-to-b from-white to-slate-50/50 border border-slate-100 rounded-3xl p-7 shadow-lg shadow-slate-200/40 hover:-translate-y-1.5 hover:shadow-2xl transition-all duration-300 flex flex-col" style="transition-delay:<?= $i * 90 ?>ms">
<i class="fas fa-quote-right absolute top-6 right-6 text-4xl text-slate-100"></i>
<div class="mb-4"><?= render_stars((int) $t['rating'], 'text-base') ?></div>
<blockquote class="text-slate-600 leading-relaxed flex-grow mb-6 relative z-10"><?= $t['isi'] ? e(excerpt($t['isi'], 160)) : '<span class="italic text-slate-400">Memberi rating tanpa komentar.</span>' ?></blockquote>
<figcaption class="flex items-center gap-3 border-t border-slate-100 pt-4">
<div class="w-11 h-11 rounded-full bg-gradient-to-br from-mateng-green to-mateng-blue text-white flex items-center justify-center font-bold uppercase shadow-md"><?= e(mb_substr($t['nama'], 0, 1)) ?></div>
<div>
<p class="font-bold text-slate-800 text-sm"><?= e($t['nama']) ?></p>
<p class="text-xs text-slate-400"><?= e(tanggal_id($t['created_at'])) ?></p>
</div>
</figcaption>
</figure>
<?php endforeach; ?>
</div>
<div class="reveal text-center mt-12">
<a href="<?= e(url('testimoni.php')) ?>" class="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-mateng-green/10 hover:bg-mateng-green hover:text-white text-mateng-green font-semibold transition-colors"><?= e(t('Lihat semua testimoni')) ?> <i class="fas fa-arrow-right text-xs"></i></a>
</div>
</div>
</section>
<?php endif; ?>
<!-- ===================== BERITA TERKINI ===================== -->
<?php if (!empty($beritaTerbaru)): ?>
<section class="py-24 bg-slate-50 relative overflow-hidden">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="reveal flex flex-col sm:flex-row sm:items-end justify-between gap-4 mb-12">
<div>
<span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-mateng-blue/10 text-mateng-blue text-xs font-bold uppercase tracking-wider mb-3"><i class="fas fa-newspaper"></i> <?= e(t('Berita')) ?></span>
<h2 class="text-3xl md:text-4xl font-bold text-slate-900 tracking-tight"><?= e(t('Berita Terkini')) ?></h2>
<p class="text-slate-500 mt-2"><?= e(t('Kabar & informasi terbaru seputar layanan publik Kabupaten Mamuju Tengah.')) ?></p>
</div>
<a href="<?= e(url('berita.php')) ?>" class="hidden sm:inline-flex items-center gap-2 text-mateng-blue font-semibold hover:gap-3 transition-all"><?= e(t('Semua Berita')) ?> <i class="fas fa-arrow-right text-xs"></i></a>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<?php foreach ($beritaTerbaru as $i => $b):
$img = !empty($b['gambar']) && is_file(ROOT_PATH . '/uploads/berita/' . $b['gambar'])
? UPLOAD_URL . '/berita/' . $b['gambar'] : null; ?>
<a href="<?= e(url('berita-detail.php?slug=' . urlencode($b['slug']))) ?>" class="reveal group bg-white rounded-2xl overflow-hidden ring-1 ring-slate-100 shadow-lg shadow-slate-200/40 hover:-translate-y-1.5 hover:shadow-2xl transition-all duration-300 flex flex-col" style="transition-delay:<?= $i * 80 ?>ms">
<div class="aspect-[16/9] bg-gradient-to-br from-mateng-green/10 to-mateng-blue/10 overflow-hidden">
<?php if ($img): ?>
<img src="<?= e($img) ?>" alt="<?= e($b['judul']) ?>" loading="lazy" decoding="async" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
<?php else: ?>
<div class="w-full h-full flex items-center justify-center text-mateng-blue/40"><i class="fas fa-newspaper text-4xl"></i></div>
<?php endif; ?>
</div>
<div class="p-5 flex flex-col flex-grow">
<p class="text-xs text-slate-400 mb-2"><i class="far fa-calendar mr-1"></i><?= e(tanggal_id($b['tanggal'])) ?></p>
<h3 class="font-bold text-slate-800 leading-snug mb-2 group-hover:text-mateng-blue transition-colors"><?= e($b['judul']) ?></h3>
<p class="text-sm text-slate-500 flex-grow"><?= e(excerpt($b['ringkasan'] ?: '', 100)) ?></p>
<span class="inline-flex items-center gap-1.5 text-sm font-semibold text-mateng-blue mt-4"><?= e(t('Baca selengkapnya')) ?> <i class="fas fa-arrow-right text-xs group-hover:translate-x-1 transition-transform"></i></span>
</div>
</a>
<?php endforeach; ?>
</div>
<div class="sm:hidden text-center mt-8">
<a href="<?= e(url('berita.php')) ?>" class="inline-flex items-center gap-2 text-mateng-blue font-semibold"><?= e(t('Semua Berita')) ?> <i class="fas fa-arrow-right text-xs"></i></a>
</div>
</div>
</section>
<?php endif; ?>
<script>
// Reveal-on-scroll dengan IntersectionObserver (ringan & aman).
(function () {
var els = document.querySelectorAll('.reveal');
if (!('IntersectionObserver' in window)) {
els.forEach(function (el) { el.classList.add('is-visible'); });
return;
}
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (en) {
if (en.isIntersecting) { en.target.classList.add('is-visible'); io.unobserve(en.target); }
});
}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
els.forEach(function (el) { io.observe(el); });
})();
// Efek ketik (typewriter) yang bergiliran antar beberapa frasa (loop).
(function () {
var main = document.getElementById('twMain');
var accent = document.getElementById('twAccent');
if (!main || !accent) return;
// Hormati preferensi kurangi-gerak: biarkan teks frasa pertama tanpa animasi.
if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
var phrases = <?= json_encode($twPhrases, JSON_UNESCAPED_UNICODE) ?>;
var TYPE = 60, DEL = 30, HOLD_FULL = 1800, HOLD_EMPTY = 500, START = 400;
var p = 0, t1 = '', t2 = '', i = 0, j = 0;
function startPhrase() {
t1 = phrases[p].m; t2 = phrases[p].a;
i = 0; j = 0; main.textContent = ''; accent.textContent = '';
typeMain();
}
function typeMain() {
if (i < t1.length) { main.textContent = t1.slice(0, ++i); setTimeout(typeMain, TYPE); }
else { setTimeout(typeAccent, 120); }
}
function typeAccent() {
if (j < t2.length) { accent.textContent = t2.slice(0, ++j); setTimeout(typeAccent, TYPE); }
else { setTimeout(delAccent, HOLD_FULL); } // tahan sebentar saat penuh
}
function delAccent() {
if (j > 0) { accent.textContent = t2.slice(0, --j); setTimeout(delAccent, DEL); }
else { setTimeout(delMain, DEL); }
}
function delMain() {
if (i > 0) { main.textContent = t1.slice(0, --i); setTimeout(delMain, DEL); }
else { p = (p + 1) % phrases.length; setTimeout(startPhrase, HOLD_EMPTY); } // frasa berikutnya
}
setTimeout(startPhrase, START);
})();
</script>
<?php require __DIR__ . '/partials/footer.php'; ?>
Kontol Shell Bypass