ikan Uploader :
Directory : /var/www/new-ppid-app/
Upload File : |
| Current File : /var/www/new-ppid-app/profil.php |
<?php
/**
* Halaman Profil PPID Kabupaten Mamuju Tengah.
*/
require_once __DIR__ . '/config/config.php';
$pageTitle = 'Profil PPID — ' . APP_NAME_SHORT;
$activeNav = 'profil';
require __DIR__ . '/partials/head.php';
require __DIR__ . '/partials/navbar.php';
?>
<section class="relative overflow-hidden bg-gradient-to-br from-mateng-green to-mateng-blue text-white py-14">
<?php require __DIR__ . '/partials/sekda-header.php'; ?>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<nav class="text-sm text-green-100 mb-3">
<a href="<?= e(url('index.php')) ?>" class="hover:underline">Beranda</a><span class="mx-2">/</span><span>Profil</span>
</nav>
<h1 class="text-3xl md:text-4xl font-extrabold mb-2">Profil PPID</h1>
<p class="text-green-50 max-w-2xl">Pejabat Pengelola Informasi dan Dokumentasi Pemerintah Kabupaten Mamuju Tengah.</p>
</div>
</section>
<style>html{scroll-behavior:smooth}</style>
<main class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12 w-full space-y-10">
<article id="tentang" class="scroll-mt-24 bg-white rounded-2xl border border-slate-100 shadow-sm p-8">
<h2 class="text-2xl font-bold text-slate-900 mb-4 flex items-center gap-3"><i class="fas fa-circle-info text-mateng-green"></i> Tentang PPID</h2>
<p class="text-slate-600 leading-relaxed mb-4">
Pejabat Pengelola Informasi dan Dokumentasi (PPID) adalah pejabat yang bertanggung jawab di bidang penyimpanan, pendokumentasian, penyediaan, dan/atau pelayanan informasi di badan publik. PPID Kabupaten Mamuju Tengah dibentuk berdasarkan amanat
<strong> Undang-Undang Nomor 14 Tahun 2008 tentang Keterbukaan Informasi Publik</strong> guna menjamin hak setiap warga negara untuk memperoleh informasi publik.
</p>
<p class="text-slate-600 leading-relaxed">
Melalui portal ini, PPID Kabupaten Mamuju Tengah berkomitmen mewujudkan penyelenggaraan pemerintahan yang transparan, akuntabel, dan partisipatif di Bumi Lalla Tassisara.
</p>
</article>
<article id="video" class="scroll-mt-24 bg-white rounded-2xl border border-slate-100 shadow-sm p-6 sm:p-8">
<h2 class="text-2xl font-bold text-slate-900 mb-4 flex items-center gap-3"><i class="fas fa-circle-play text-mateng-green"></i> Video Profil</h2>
<div class="relative w-full rounded-xl overflow-hidden shadow-sm bg-slate-900" style="aspect-ratio:16/9;">
<iframe class="absolute inset-0 w-full h-full" src="https://www.youtube-nocookie.com/embed/PbC1OcYJJPk" title="Video Profil PPID Kabupaten Mamuju Tengah"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen loading="lazy"></iframe>
</div>
</article>
<div id="visi-misi" class="scroll-mt-24 grid grid-cols-1 md:grid-cols-2 gap-6">
<article class="bg-white rounded-2xl border border-slate-100 shadow-sm p-8">
<h2 class="text-xl font-bold text-slate-900 mb-4 flex items-center gap-3"><i class="fas fa-eye text-mateng-blue"></i> Visi</h2>
<p class="text-slate-600 leading-relaxed italic">"Terwujudnya pelayanan informasi publik yang transparan, cepat, tepat, dan akuntabel di Kabupaten Mamuju Tengah."</p>
</article>
<article class="bg-white rounded-2xl border border-slate-100 shadow-sm p-8">
<h2 class="text-xl font-bold text-slate-900 mb-4 flex items-center gap-3"><i class="fas fa-bullseye text-mateng-gold"></i> Misi</h2>
<ul class="text-slate-600 leading-relaxed space-y-2 list-disc list-inside">
<li>Meningkatkan kualitas pelayanan informasi publik.</li>
<li>Membangun dan mengembangkan sistem informasi dan dokumentasi.</li>
<li>Mewujudkan keterbukaan informasi yang bertanggung jawab.</li>
</ul>
</article>
</div>
<article id="tugas-fungsi" class="scroll-mt-24 bg-white rounded-2xl border border-slate-100 shadow-sm p-8">
<h2 class="text-2xl font-bold text-slate-900 mb-6 flex items-center gap-3"><i class="fas fa-sitemap text-mateng-green"></i> Tugas & Fungsi</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
<?php
$tufoksi = [
['fa-database', 'Menghimpun informasi publik dari seluruh unit/satuan kerja di badan publik.'],
['fa-folder-tree', 'Menata dan menyimpan informasi publik yang diperoleh dari unit kerja.'],
['fa-headset', 'Menyediakan dan memberikan pelayanan informasi kepada publik.'],
['fa-shield-halved', 'Melakukan pengujian konsekuensi atas informasi yang dikecualikan.'],
];
foreach ($tufoksi as $t): ?>
<div class="flex items-start gap-4 p-4 bg-slate-50 rounded-xl border border-slate-100">
<div class="w-10 h-10 bg-mateng-green/10 text-mateng-green rounded-lg flex items-center justify-center shrink-0"><i class="fas <?= $t[0] ?>"></i></div>
<p class="text-sm text-slate-600 leading-relaxed"><?= e($t[1]) ?></p>
</div>
<?php endforeach; ?>
</div>
</article>
<div id="struktur" class="scroll-mt-24"><?php require __DIR__ . '/partials/struktur-ppid.php'; ?></div>
<div id="galeri" class="scroll-mt-24"><?php require __DIR__ . '/partials/galeri-kegiatan.php'; ?></div>
<div id="jadwal" class="scroll-mt-24"><?php require __DIR__ . '/partials/jadwal-pelayanan.php'; ?></div>
<?php
$socials = array_filter([
['fa-facebook-f', SOCIAL_FACEBOOK, 'Facebook'],
['fa-instagram', SOCIAL_INSTAGRAM, 'Instagram'],
['fa-youtube', SOCIAL_YOUTUBE, 'YouTube'],
['fa-tiktok', SOCIAL_TIKTOK, 'TikTok'],
], static fn ($s) => !empty($s[1]));
?>
<article id="lokasi" class="scroll-mt-24 bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
<div class="p-6 sm:p-8 pb-5">
<h2 class="text-2xl font-bold text-slate-900 mb-2 flex items-center gap-3"><i class="fas fa-map-location-dot text-mateng-green"></i> Lokasi Kantor</h2>
<p class="text-slate-600 leading-relaxed flex items-start gap-2"><i class="fas fa-map-marker-alt text-mateng-green mt-1"></i> <?= e(PPID_ALAMAT) ?></p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-5 border-t border-slate-100">
<!-- Peta -->
<div class="lg:col-span-3">
<iframe
src="<?= e(PPID_MAPS_EMBED) ?>"
class="w-full h-full block" style="border:0; min-height:340px;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade" title="Peta Lokasi Kantor PPID Mamuju Tengah"></iframe>
</div>
<!-- Kontak & media sosial -->
<div class="lg:col-span-2 p-6 sm:p-8 bg-slate-50 border-t lg:border-t-0 lg:border-l border-slate-100 flex flex-col">
<h3 class="font-bold text-slate-900 mb-4 flex items-center gap-2"><i class="fas fa-address-book text-mateng-green"></i> Informasi Kontak</h3>
<ul class="space-y-3.5 text-sm text-slate-600">
<li class="flex items-start gap-3"><i class="fas fa-location-dot text-mateng-green mt-1 w-4 text-center"></i><span><?= e(PPID_ALAMAT) ?></span></li>
<li class="flex items-center gap-3"><i class="fas fa-envelope text-mateng-green w-4 text-center"></i><a href="mailto:<?= e(PPID_EMAIL) ?>" class="hover:text-mateng-green break-all"><?= e(PPID_EMAIL) ?></a></li>
<li class="flex items-center gap-3"><i class="fas fa-phone text-mateng-green w-4 text-center"></i><span><?= e(PPID_TELP) ?></span></li>
<li class="flex items-center gap-3"><i class="far fa-clock text-mateng-green w-4 text-center"></i><span>Senin–Kamis 08.00–16.00 · Jumat 08.00–16.30 WITA</span></li>
</ul>
<?php if ($socials): ?>
<div class="mt-6">
<p class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3">Ikuti Kami</p>
<div class="flex flex-wrap gap-2">
<?php foreach ($socials as $s): ?>
<a href="<?= e($s[1]) ?>" target="_blank" rel="noopener" aria-label="<?= e($s[2]) ?>" class="w-9 h-9 rounded-full bg-white border border-slate-200 text-slate-500 hover:bg-mateng-green hover:text-white hover:border-mateng-green flex items-center justify-center transition-colors">
<i class="fab <?= e($s[0]) ?>"></i>
</a>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
<a href="<?= e(PPID_MAPS_LINK) ?>" target="_blank" rel="noopener" class="mt-6 inline-flex items-center justify-center gap-2 bg-mateng-green hover:bg-green-700 text-white text-sm font-semibold px-4 py-2.5 rounded-lg transition-colors">
<i class="fas fa-location-arrow"></i> Buka di Google Maps
</a>
</div>
</div>
</article>
<article class="bg-slate-900 rounded-2xl shadow-sm p-8 text-center">
<h2 class="text-2xl font-bold text-white mb-3">Ingin mengajukan permohonan informasi?</h2>
<p class="text-slate-300 mb-6 max-w-xl mx-auto">Sampaikan permohonan Anda secara online. Cepat, mudah, dan dapat dilacak melalui nomor resi.</p>
<div class="flex flex-col sm:flex-row justify-center gap-3">
<a href="<?= e(url('permohonan.php')) ?>" class="bg-mateng-green hover:bg-green-700 text-white px-6 py-3 rounded-lg font-bold transition-colors"><i class="fas fa-paper-plane mr-2"></i>Ajukan Permohonan</a>
<a href="<?= e(url('cek-status.php')) ?>" class="bg-white/10 hover:bg-white/20 text-white px-6 py-3 rounded-lg font-bold transition-colors border border-white/20"><i class="fas fa-search mr-2"></i>Lacak Permohonan</a>
</div>
</article>
</main>
<?php require __DIR__ . '/partials/footer.php'; ?>
Kontol Shell Bypass