Update frontend LLHD

Controllers/BeritaController.cs

@@ -0,0 +1,56 @@
+using Microsoft.AspNetCore.Mvc;
+using System.Text.Json.Nodes;
+
+namespace WebApplication2.Controllers
+{
+    public class BeritaController : Controller
+    {
+        public IActionResult Index()
+        {
+            return View("~/Views/Berita/Berita.cshtml");
+        }
+
+        public IActionResult GetBerita()
+        {
+            var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/json", "berita.json");
+
+            if (!System.IO.File.Exists(path))
+                return NotFound();
+
+            var json = System.IO.File.ReadAllText(path);
+            return Content(json, "application/json");
+        }
+
+        public IActionResult Detail(int id)
+        {
+            ViewBag.Id = id;
+            return View("~/Views/Berita/DetailBerita.cshtml");
+        }
+
+        public IActionResult GetDetail(int id)
+        {
+            var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/json", "berita.json");
+
+            if (!System.IO.File.Exists(path))
+                return NotFound();
+
+            var json = System.IO.File.ReadAllText(path);
+
+            var data = JsonNode.Parse(json).AsArray();
+
+            var result = data.FirstOrDefault(x => (int)x["id"] == id);
+
+            if (result == null)
+                return NotFound();
+
+            return Json(result);
+        }
+
+        public IActionResult GetAll()
+        {
+            var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/json", "berita.json");
+            var json = System.IO.File.ReadAllText(path);
+            return Content(json, "application/json");
+        }
+    }
+}

Controllers/DetailItemController.cs

@@ -0,0 +1,24 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace WebApplication2.Controllers
+{
+    public class DetailItemController : Controller
+    {
+        public IActionResult Index(string kode)
+        {
+            ViewBag.Kode = kode;
+            return View("~/Views/Layanan/DetailItem.cshtml");
+        }
+
+        public IActionResult GetDetail(string kode)
+        {
+            var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/json", "DetailItem.json");
+
+            if (!System.IO.File.Exists(path))
+                return NotFound();
+
+            var json = System.IO.File.ReadAllText(path);
+            return Content(json, "application/json");
+        }
+    }
+}

Controllers/GaleriController.cs

@@ -0,0 +1,23 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace WebApplication2.Controllers
+{
+    public class GaleriController : Controller
+    {
+        public IActionResult Index()
+        {
+            return View("~/Views/Galeri.cshtml");
+        }
+
+        public IActionResult GetAll()
+        {
+            var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/json", "galeri.json");
+
+            if (!System.IO.File.Exists(path))
+                return NotFound();
+
+            var json = System.IO.File.ReadAllText(path);
+            return Content(json, "application/json");
+        }
+    }
+}

Controllers/HomeController.cs

@@ -1,6 +1,7 @@
-using System.Diagnostics;
+using System.Diagnostics;
 using Microsoft.AspNetCore.Mvc;
 using WebApplication2.Models;
+using WebApplication2.Models.ViewModels;
 
 namespace WebApplication2.Controllers
 {
@@ -15,18 +16,92 @@ namespace WebApplication2.Controllers
 
         public IActionResult Index()
         {
+            var berita = GetData();
+
+            ViewBag.MainNews = berita.FirstOrDefault();
+            ViewBag.SideNews = berita.Skip(1).Take(4).ToList();
+
             return View();
         }
 
+        [HttpGet("/faq")]
+        public IActionResult Faq()
+        {
+            return View("~/Views/Faq.cshtml");
+        }
+
+        [HttpGet("/kontak")]
+        public IActionResult Kontak()
+        {
+            return View("~/Views/Kontak.cshtml");
+        }
+
+        [HttpGet("/sertifikat")]
+        public IActionResult Sertifikat()
+        {
+            return View("~/Views/Sertifikat.cshtml");
+        }
+
+        [HttpGet("/tentang-kami")]
+        public IActionResult TentangKami()
+        {
+            return View("~/Views/TentangKami.cshtml");
+        }
+
         public IActionResult Privacy()
         {
             return View();
         }
 
+        private List<BeritaViewModel> GetData()
+        {
+            return new List<BeritaViewModel>()
+            {
+                new BeritaViewModel {
+                    Judul = "Komitmen LLHD Terhadap Pemenuhan Permen LHK NO.23 TAHUN 2020",
+                    Deskripsi = "Komitmen Laboratorium Lingkungan Hidup Daerah (LLHD) Provinsi DKI Jakarta...",
+                    Gambar = "/assets/image/foto/Berita komitmen llhd.png",
+                    Tanggal = new DateTime(2025,3,4),
+                    Slug = "berita-1"
+                },
+                new BeritaViewModel {
+                    Judul = "Lorem Ipsum Judul",
+                    Deskripsi = "Isi berita...",
+                    Gambar = "/assets/image/foto/1.jpeg",
+                    Tanggal = new DateTime(2025,3,4),
+                    Slug = "berita-2"
+                },
+                new BeritaViewModel {
+                    Judul = "Lorem Ipsum Judul",
+                    Deskripsi = "Isi berita...",
+                    Gambar = "/assets/image/foto/2.jpeg",
+                    Tanggal = new DateTime(2025,3,4),
+                    Slug = "berita-3"
+                },
+                new BeritaViewModel {
+                    Judul = "Lorem Ipsum Judul",
+                    Deskripsi = "Isi berita...",
+                    Gambar = "/assets/image/foto/3.jpeg",
+                    Tanggal = new DateTime(2025,3,4),
+                    Slug = "berita-4"
+                },
+                new BeritaViewModel {
+                    Judul = "Lorem Ipsum Judul",
+                    Deskripsi = "Isi berita...",
+                    Gambar = "/assets/image/foto/4.jpeg",
+                    Tanggal = new DateTime(2025,3,4),
+                    Slug = "berita-5"
+                }
+            };
+        }
+
         [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
         public IActionResult Error()
         {
-            return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
+            return View(new ErrorViewModel
+            {
+                RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier
+            });
         }
     }
 }

Controllers/LayananController.cs

@@ -0,0 +1,21 @@
+using Microsoft.AspNetCore.Mvc;
+
+public class LayananController : Controller
+{
+    public IActionResult Index(string jenis)
+    {
+        ViewBag.Jenis = jenis;
+        return View();
+    }
+
+    public IActionResult GetData(string jenis)
+    {
+        var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/json/Layanan", $"{jenis}.json");
+
+        if (!System.IO.File.Exists(path))
+            return NotFound();
+
+        var json = System.IO.File.ReadAllText(path);
+        return Content(json, "application/json");
+    }
+}

Controllers/RegulasiController.cs

@@ -0,0 +1,23 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace WebApplication2.Controllers
+{
+    public class RegulasiController : Controller
+    {
+        public IActionResult Index()
+        {
+            return View("~/Views/Regulasi.cshtml");
+        }
+
+        public IActionResult GetRegulasi()
+        {
+            var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/json", "regulasi.json");
+
+            if (!System.IO.File.Exists(path))
+                return NotFound();
+
+            var json = System.IO.File.ReadAllText(path);
+            return Content(json, "application/json");
+        }
+    }
+}

Controllers/VideoController.cs

@@ -0,0 +1,23 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace WebApplication2.Controllers
+{
+    public class VideoController : Controller
+    {
+        public IActionResult Index()
+        {
+            return View("~/Views/Video.cshtml");
+        }
+
+        public IActionResult GetAll()
+        {
+            var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/json", "video.json");
+
+            if (!System.IO.File.Exists(path))
+                return NotFound();
+
+            var json = System.IO.File.ReadAllText(path);
+            return Content(json, "application/json");
+        }
+    }
+}

Models/BeritaViewModel.cs

@@ -0,0 +1,13 @@
+namespace WebApplication2.Models.ViewModels
+{
+	public class BeritaViewModel
+	{
+		public string Judul { get; set; }
+		public string Deskripsi { get; set; }
+		public string Gambar { get; set; }
+		public DateTime Tanggal { get; set; }
+		public string Slug { get; set; }
+
+		public List<string> GambarList { get; set; }
+	}
+}

Views/Berita/Berita.cshtml

@@ -0,0 +1,100 @@
+@model List<WebApplication2.Models.ViewModels.BeritaViewModel>
+
+    @{
+    ViewData["Title"] = "Berita";
+    }
+
+    @section Style {
+        <link rel="stylesheet" href="~/css/Berita/Berita.css" asp-append-version="true" />
+    }
+
+    @await Html.PartialAsync("Section/_Hero", "Berita")
+
+    <div class="container mt-5">
+
+        <div class="row mb-4">
+            <div class="col-md-6">
+                <input type="text" id="search" class="form-control" placeholder="Cari Berita...">
+            </div>
+            <div class="col-md-6">
+                <input type="date" id="filterDate" class="form-control">
+            </div>
+        </div>
+
+
+        <div class="row" id="beritaList"></div>
+
+    </div>
+
+    <script>
+        function formatTanggal(dateStr) {
+            const date = new Date(dateStr);
+            return date.toLocaleDateString("en-US", {
+                year: "numeric",
+                month: "long",
+                day: "numeric"
+            });
+        }
+
+        function loadBerita() {
+
+            fetch('/Berita/GetBerita')
+                .then(res => res.json())
+                .then(data => {
+
+                    renderBerita(data);
+
+                    document.getElementById("search").addEventListener("keyup", function () {
+                        const keyword = this.value.toLowerCase();
+                        const filtered = data.filter(x =>
+                            x.judul.toLowerCase().includes(keyword) ||
+                            x.deskripsi.toLowerCase().includes(keyword)
+                        );
+                        renderBerita(filtered);
+                    });
+
+                    document.getElementById("filterDate").addEventListener("change", function () {
+                        const date = this.value;
+                        const filtered = data.filter(x => x.tanggal === date);
+                        renderBerita(filtered);
+                    });
+
+                });
+        }
+
+        function renderBerita(list) {
+
+            let html = "";
+
+            list.forEach(item => {
+                html += `
+                        <div class="col-md-4 mb-4">
+                            <div class="card h-100 shadow-sm">
+
+                                <img src="${Array.isArray(item.gambar) ? item.gambar[0] : item.gambar}"
+                                     class="card-img-top">
+
+                                <div class="card-body">
+                                    <small class="text-muted">${formatTanggal(item.tanggal)}</small>
+
+                                    <h6 class="fw-bold mt-2">${item.judul}</h6>
+
+                                    <p class="text-muted small">
+                                        ${item.deskripsi}
+                                    </p>
+
+                                    <a href="/Berita/Detail?id=${item.id}" class="text-primary fw-semibold">
+                                        Baca Selengkapnya
+                                    </a>
+                                </div>
+
+                            </div>
+                        </div>
+                    `;
+            });
+
+            document.getElementById("beritaList").innerHTML = html;
+        }
+
+        document.addEventListener("DOMContentLoaded", loadBerita);
+    </script>

Views/Berita/DetailBerita.cshtml

@@ -0,0 +1,147 @@
+
+@section Style {
+    <link rel="stylesheet" href="~/css/Berita/DetailBerita.css" asp-append-version="true" />
+ }
+
+<div class="container mt-5 bg-white mt-4 mb-4 rounded-3 p-3 px-3">
+
+    <div class="row">
+
+        <div class="col-md-8">
+
+            <small class="text-muted" id="tanggal"></small>
+
+            <h3 class="fw-bold mt-2" id="judul"></h3>
+
+            <div id="slider" class="slider my-3"></div>
+
+            <p id="isi" style="line-height:1.7;"></p>
+
+        </div>
+
+        <div class="col-md-4">
+
+            <div class="card p-3 shadow-sm sidebar-card">
+                <h6 class="fw-semibold mb-3">Baca Artikel Lainnya</h6>
+                <div id="sidebar"></div>
+            </div>
+
+        </div>
+
+    </div>
+
+</div>
+
+<script>
+    function getQueryParam(name) {
+        return new URLSearchParams(window.location.search).get(name);
+    }
+
+    function formatTanggal(dateStr) {
+        return new Date(dateStr).toLocaleDateString("id-ID", {
+            day: "numeric",
+            month: "long",
+            year: "numeric"
+        });
+    }
+
+    function loadDetail() {
+
+        const id = getQueryParam("id");
+
+        fetch(`/Berita/GetDetail?id=${id}`)
+            .then(res => {
+                if (!res.ok) throw new Error("Data tidak ditemukan");
+                return res.json();
+            })
+            .then(data => {
+
+                if (!data) {
+                    document.getElementById("judul").innerText = "Data tidak ditemukan";
+                    return;
+                }
+
+                document.getElementById("judul").innerText = data.judul || "-";
+                document.getElementById("tanggal").innerText = formatTanggal(data.tanggal || "");
+
+                renderSlider(data.gambar);
+
+                document.getElementById("isi").innerHTML =
+                    (data.isi || "").replace(/\n/g, "<br>");
+            })
+            .catch(err => {
+                console.error(err);
+                document.getElementById("judul").innerText = "Gagal load berita";
+            });
+    }
+
+    function loadSidebar() {
+
+        fetch('/Berita/GetAll')
+            .then(res => res.json())
+            .then(data => {
+
+                let html = "";
+
+                data.slice(0, 4).forEach(item => {
+
+                    let gambar = Array.isArray(item.gambar) ? item.gambar[0] : item.gambar;
+
+                    html += `
+                        <div class="sidebar-item">
+                            <img src="${Array.isArray(item.gambar) ? item.gambar[0] : item.gambar}" class="sidebar-img">
+
+                            <div class="sidebar-content">
+                                <small class="sidebar-date">${formatTanggal(item.tanggal)}</small>
+
+                                <div class="sidebar-title">${item.judul}</div>
+
+                                <a href="/Berita/Detail?id=${item.id}" class="sidebar-link">
+                                    Baca Selengkapnya
+                                </a>
+                            </div>
+                        </div>
+                    `;
+                });
+
+                document.getElementById("sidebar").innerHTML = html;
+            });
+    }
+
+    let currentIndex = 0;
+    let sliderImages = [];
+
+    function renderSlider(images) {
+
+        if (!images || images.length === 0) return;
+
+        sliderImages = images;
+        currentIndex = 0;
+
+        const slider = document.getElementById("slider");
+
+        slider.innerHTML = `
+            <img id="slide-img" src="${images[0]}">
+
+            ${images.length > 1 ? `
+                <button class="slider-btn prev" onclick="prevSlide()">‹</button>
+                <button class="slider-btn next" onclick="nextSlide()">›</button>
+            ` : ""}
+        `;
+    }
+
+    function nextSlide() {
+        currentIndex = (currentIndex + 1) % sliderImages.length;
+        document.getElementById("slide-img").src = sliderImages[currentIndex];
+    }
+
+    function prevSlide() {
+        currentIndex = (currentIndex - 1 + sliderImages.length) % sliderImages.length;
+        document.getElementById("slide-img").src = sliderImages[currentIndex];
+    }
+
+    document.addEventListener("DOMContentLoaded", function () {
+        loadDetail();
+        loadSidebar();
+    });
+</script>

Views/Faq.cshtml

@@ -0,0 +1,372 @@
+@{
+    ViewData["Title"] = "FAQ";
+}
+
+@section Style {
+    <link rel="stylesheet" href="~/css/Faq.css" asp-append-version="true" />
+}
+<section class="faq-section">
+    <div class="container text-center">
+
+        <div class="mb-3">
+            <span class="faq-badge">FAQ</span>
+        </div>
+
+        <h2 class="faq-title mb-5">Frequently Asked Questions</h2>
+
+        <div class="faq-tab item-center">
+            <button class="tab active" data-tab="umum">Pertanyaan Umum</button>
+            <button class="tab" data-tab="khusus">Pertanyaan Teknis</button>
+        </div>
+
+        <div class="faq-content">
+
+            <div class="faq-pane active" id="umum">
+
+                <div class="faq-wrapper mx-auto">
+
+                    <div class="faq-item active">
+                        <div class="faq-header">
+                            <h5>Bagaimana Cara Pembuatan akun di Sibolink?</h5>
+                            <div class="faq-icon">−</div>
+                        </div>
+                        <div class="faq-body">
+                            <p>
+                                Buka lablingkungan.jakarta.co.id.  Pilih menu register. Pelanggan diharapkan menyiapkan Surat Kuasa dari perusahaan dan KTP PIC yang ditunjuk.
+                                Admin LLHD akan memverifikasi permohonan pembuatan akun pelangggan. Tutorial pembuatan akun dapat diakses pada https://www.youtube.com/watch?v=KIB0Q2gvLKw
+                            </p>
+                        </div>
+                    </div>
+
+                    <div class="faq-item">
+                        <div class="faq-header">
+                            <h5>Bagaimana Pengajuan Pengujian Air di LLHD?</h5>
+                            <div class="faq-icon">+</div>
+                        </div>
+                        <div class="faq-body">
+                            <h6>Pengantaran Sampel Air</h6>
+                            <p>
+                                Login akun di website lablingkungan.jakarta.co.id. Pilih Menu
+                            </p>
+
+                            <ul class="list">
+                                <li>
+                                    Pengajuan Air untuk pengantaran sampel/contoh uji ke LLHD
+                                </li>
+                                <li>
+                                    Pengajuan Sampling Air untuk pengambilan contoh uji/sampling air (harus dengan kesepakatan dengan PIC LLHD)
+
+                                </li>
+                                <li>
+                                    Pengajuan Udara untuk pengambilan contoh uji dan pengujian udara
+
+                                </li>
+                            </ul>
+
+                            <p>
+                                Kemudian Input data sesuai kebutuhan pelanggan dan tanggal pelaksanaan, kemudian klik submit. Tutorial pengajuan pengujian akun dapat diakses pada https://www.youtube.com/watch?v=wO3abCNqqUU.
+                            </p>
+
+                        </div>
+                    </div>
+
+                    <div class="faq-item">
+                        <div class="faq-header">
+                            <h5>
+                                Bagaimana pemilihan tipe pengajuan ?
+                            </h5>
+                            <div class="faq-icon">+</div>
+                        </div>
+                        <div class="faq-body">
+                            <p>
+                                Pelanggan dapat menyesuaikan dengan dokumen lingkungan masing-masing/arahan dari Bidang Pengawasan dan Penaatan Hukum (PPH) DLH dan memilih sesuai yang tertera pada sistem sibolink. Apabila ada penambahan parameter dapat menambahkan dengan mimilih *custom*. Khusus untuk PermenLH 11 Tahun 2025 dapat melihat panduan berikut. (terlampir pohon PermenLH 11 Th 2025)
+                            </p>
+
+                        </div>
+                    </div>
+
+                    <div class="faq-item">
+                        <div class="faq-header">
+                            <h5>
+                                Kapan waktu maksimal pengajuan pengujian contoh uji ?
+                            </h5>
+                            <div class="faq-icon">+</div>
+                        </div>
+                        <div class="faq-body">
+                            <p>
+                                Pengajuan pengantaran contoh uji bisa dilakukan H-15 s/d H-1 pengantaran sampel ke LLHD. Sedangkan pengambilan contoh uji/sampling oleh LLHD bisa dilakukan H-30 hari Kalender atau setelah konfirmasi penjadwalan sampling.
+                                Th 2025)
+                            </p>
+
+                        </div>
+                    </div>
+
+                    <div class="faq-item">
+                        <div class="faq-header">
+                            <h5>
+                                Kapan Laporan Hasil Uji (LHU) terbit ?
+                            </h5>
+                            <div class="faq-icon">+</div>
+                        </div>
+                        <div class="faq-body">
+                            <p>
+                                LHU terbit kurang lebih 9 hari kerja setelah proses pengiriman sampel/pengambilan sampel pada masing-masing akun pelanggan yang melakukan pengajuan pengujian.
+                            </p>
+
+                        </div>
+                    </div>
+
+                    <div class="faq-item">
+                        <div class="faq-header">
+                            <h5>
+                                Bagaimana mekanisme pembayaran ?
+
+                            </h5>
+                            <div class="faq-icon">+</div>
+                        </div>
+                        <div class="faq-body">
+                            <p>
+                                Pembayaran dilakukan setelah pengiriman sampel/sampling dilakukan melalui beberapa opsi pembayaran yang terlampir pada saat penerbitan SSRD (Surat Setoran Resmi Daerah).
+
+                            </p>
+
+                        </div>
+                    </div>
+
+                    <div class="faq-item">
+                        <div class="faq-header">
+                            <h5>
+                                Apa yang perlu dibawa saat pengantaran sampel ?
+
+
+                            </h5>
+                            <div class="faq-icon">+</div>
+                        </div>
+                        <div class="faq-body">
+                            <p>
+                                Untuk sampel yang diantar ke LLHD, PIC Perusahaan yang mengirimkan sampel harus membawa surat pengantar dari perusahaan yang menjelaskan bahwa orang tersebut adalah perwakilan dari perusahaan yang bertugas mengirimkan sampel.
+                        </div>
+                    </div>
+
+                    <div class="faq-item">
+                        <div class="faq-header">
+                            <h5>
+                                Bagaimana mekanisme pengambilan botol steril ?
+
+                            </h5>
+                            <div class="faq-icon">+</div>
+                        </div>
+                        <div class="faq-body">
+                            <p>
+                                Pengambilan bisa dilakukan setelah melakukan pengajuan di website LLHD. Botol steril dapat di ambil di bagian pelayanan LLHD dengan menyampaikan nomor pengajuan perusahaan di website LLHD
+                        </div>
+                    </div>
+
+                    <div class="faq-item">
+                        <div class="faq-header">
+                            <h5>
+                                Apakah boleh membawa botol steril sendiri ?
+
+                            </h5>
+                            <div class="faq-icon">+</div>
+                        </div>
+                        <div class="faq-body">
+                            <p>
+                                Diperbolehkan, namun laboratorium tidak bertanggungjawab apabila ada kontaminan dari botol yang dibawa sendiri oleh pelanggan yang mungkin akan berpengaruh pada hasil pengujian, sehingga disarankan untuk menggunakan botol steril dari LLHD
+
+                        </div>
+                    </div>
+
+                    <div class="faq-item">
+                        <div class="faq-header">
+                            <h5>
+                                Bagaimana pemilihan tipe pengajuan ?
+
+                            </h5>
+                            <div class="faq-icon">+</div>
+                        </div>
+                        <div class="faq-body">
+                            <p>
+                                Pelanggan dapat menyesuaikan dengan dokumen lingkungan masing-masing/arahan dari Bidang Pengawasan dan Penaatan Hukum (PPH) DLH dan memilih sesuai yang tertera pada sistem sibolink. Apabila ada penambahan parameter dapat menambahkan dengan mimilih *custom*. Khusus untuk PermenLH 11 Tahun 2025 dapat melihat panduan berikut. (terlampir pohon PermenLH 11 Th 2025)
+
+                        </div>
+                    </div>
+
+                </div>
+
+            </div>
+
+            <div class="faq-pane" id="khusus">
+
+                <div class="faq-wrapper mx-auto">
+
+                    <div class="faq-item">
+                        <div class="faq-header">
+                            <h5>
+                                Apakah PCU Air wajib dilakukan ?
+                            </h5>
+                            <div class="faq-icon">+</div>
+                        </div>
+                        <div class="faq-body">
+                            <p>
+                                Berdasarkan Permen LH No. 23 Tahun 2020, pengambilan contoh uji wajib dilakukan oleh laboratorium lingkungan, karena bagian integral dari proses pengujian, yang menentukan validitas, akurasi, ketertelusuran, ketidakberpihakan, dan menjamin keabsahan hasil uji laboratorium.
+                            </p>
+                        </div>
+                    </div>
+
+
+                    <div class="faq-item">
+                        <div class="faq-header">
+                            <h5>
+                                Apakah PCU/sampling air berbayar?
+                            </h5>
+                            <div class="faq-icon">+</div>
+                        </div>
+                        <div class="faq-body">
+                            <p>
+                                Ya, sampling/pengambilan contoh uji air merupakan layanan berbayar sesuai dengan Perda 1 Tahun 2024, yaitu 500.000 per titik sampling
+
+                            </p>
+                        </div>
+                    </div>
+
+                    <div class="faq-item">
+                        <div class="faq-header">
+                            <h5>
+                                Bagaimana mekanisme/alur pengambilan contoh uji air ?
+                            </h5>
+                            <div class="faq-icon">+</div>
+                        </div>
+                        <div class="faq-body">
+                            <ul class="list">
+                                <li>
+                                    Pelanggan melakukan permohonan pelaksanaan PCU ke LLHD melalui form/barcode pada website LLHD
+                                </li>
+
+                                <li>
+                                    Apabila sudah ada kesepakatan tanggal, pelanggan segera melakukan pengajuan pada ‘PENGAJUAN SAMPLING AIR’ sesuai dengan tanggal kesepakatan
+                                </li>
+
+                                <li>
+                                    Tim PCU Air akan datang ke Lokasi sampling dan mengisi BA PCU Air dan memberikan SSRD (Surat Setoran Retribusi Daerah) kepada pelanggan
+                                </li>
+
+                                <li>
+                                    Pelanggan melakukan pembayaran pada hari yang sama dengan pelaksanaan sampling.
+                                </li>
+
+                                <li>
+                                    Pencetakan SSRD dan ttd oleh PIC Perusahaan
+                                </li>
+
+                                <li>
+                                    Petugas kembali ke Laboratorium dan hasil akan terbit pada akun masing-masing pelanggan.
+                                </li>
+
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="faq-item">
+                        <div class="faq-header">
+                            <h5>
+                                Bagaimana Pembayarannya?
+
+                            </h5>
+                            <div class="faq-icon">+</div>
+                        </div>
+                        <div class="faq-body">
+                            <p>
+                                Setelah pelaksanaan PCU/sampling petugas akan menyampaikan 2 jenis SSRD (SSRD pengambilan contoh uji dan SSRD Pengujian). Pembayaran dapat dilakukan melalui QRIS (dapat dilakukan dimana saja) dan beberapa opsi pembayaran lain yang terlampir pada SSRD yang HARUS dilakukan dihari yang sama.
+                            </p>
+                        </div>
+                    </div>
+
+                    <div class="faq-item">
+                        <div class="faq-header">
+                            <h5>
+                                Apa yang perlu disiapkan oleh pelanggan?
+                            </h5>
+                            <div class="faq-icon">+</div>
+                        </div>
+                        <div class="faq-body">
+                            <p>
+                                Pelanggan harus memastikan keadaan IPAL/titik sampling dalam kondisi baik/siap sampling, terkait dengan peralatan seperti jerigen sudah disiapkan oleh LLHD. Selain itu surat pengantar dari perusahaan TIDAK diperlukan.
+                            </p>
+                        </div>
+                    </div>
+
+                    <div class="faq-item">
+                        <div class="faq-header">
+                            <h5>
+                                Apakah setiap pengajuan sampling air mengisi form?
+                            </h5>
+                            <div class="faq-icon">+</div>
+                        </div>
+                        <div class="faq-body">
+                            <p>
+                                Pengisian form melalui barcode hanya dilakukan 1x per tahun untuk permohonan PCU dalam 1 tahun, untuk memudahkan konfirmasi pelaksanaan.
+                            </p>
+                        </div>
+                    </div>
+
+                    <div class="faq-item">
+                        <div class="faq-header">
+                            <h5>
+                                Apakah mengisi form sama dengan telah melakukan pengajuan sampling?
+                            </h5>
+                            <div class="faq-icon">+</div>
+                        </div>
+                        <div class="faq-body">
+                            <p>
+                                Belum, pengajuan sampling dilakukan melalui website pada menu ‘PENGAJUAN SAMPLING AIR’ setelah mendapat kesepakatan tanggal dengan tim LLHD.
+                            </p>
+                        </div>
+                    </div>
+
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+</section>
+
+<script>
+    const tabs = document.querySelectorAll(".tab");
+    const panes = document.querySelectorAll(".faq-pane");
+
+    tabs.forEach(tab => {
+        tab.addEventListener("click", () => {
+
+            tabs.forEach(t => t.classList.remove("active"));
+            tab.classList.add("active");
+
+            panes.forEach(p => p.classList.remove("active"));
+
+            document.getElementById(tab.dataset.tab).classList.add("active");
+        });
+    });
+
+    const faqItems = document.querySelectorAll(".faq-item");
+
+    faqItems.forEach(item => {
+        const header = item.querySelector(".faq-header");
+
+        header.addEventListener("click", () => {
+
+            faqItems.forEach(i => {
+                if (i !== item) {
+                    i.classList.remove("active");
+                    i.querySelector(".faq-icon").innerText = "+";
+                }
+            });
+
+            item.classList.toggle("active");
+
+            const icon = item.querySelector(".faq-icon");
+            icon.innerText = item.classList.contains("active") ? "−" : "+";
+        });
+    });
+</script>

Views/Galeri.cshtml

@@ -0,0 +1,128 @@
+@await Html.PartialAsync("Section/_Hero", "Galeri Kegiatan")
+
+@section Style {
+    <link rel="stylesheet" href="~/css/Galeri.css" asp-append-version="true" />
+}
+
+<div class="container my-5">
+    <div class="row g-4" id="galeri-list"></div>
+</div>
+
+<div id="lightbox" class="lightbox">
+    <span class="close">&times;</span>
+
+    <img class="lightbox-content" id="lightbox-img">
+
+    <div class="lightbox-text">
+        <h5 id="lightbox-title"></h5>
+        <p id="lightbox-description"></p>
+    </div>
+</div>
+@*<div class="container my-5">
+
+        <div class="row g-4" id="galeri-list"></div>
+
+    </div>
+    <div id="lightbox" class="lightbox">
+        <span class="close">&times;</span>
+        <img class="lightbox-content" id="lightbox-img">
+        <p id="lightbox-description"></p>
+    </div>*@
+
+<script>
+    //function loadGaleri() {
+
+    //    fetch('/Galeri/GetAll')
+    //        .then(res => res.json())
+    //        .then(data => {
+
+    //            let html = "";
+
+    //            data.forEach(item => {
+    //                html += `
+    //                    <div class="col-md-4">
+
+    //                        <div class="galeri-card">
+    //                            <img src="${item.gambar}" alt="${item.judul}" class="galeri-img">
+    //                        </div>
+
+    //                    </div>
+    //                `;
+    //            });
+
+    //            document.getElementById("galeri-list").innerHTML = html;
+
+    //            document.querySelectorAll(".galeri-img").forEach(img => {
+    //                img.addEventListener("click", function () {
+    //                    document.getElementById("lightbox").style.display = "block";
+    //                    document.getElementById("lightbox-img").src = this.src;
+    //                    document.getElementById("lightbox-description").innerText = this.alt;
+    //                });
+    //            });
+
+    //        });
+
+    //    document.querySelector(".lightbox .close").onclick = function () {
+    //        document.getElementById("lightbox").style.display = "none";
+    //    };
+
+
+    //    document.getElementById("lightbox").onclick = function (e) {
+    //        if (e.target.id === "lightbox") {
+    //            this.style.display = "none";
+    //        }
+    //    };
+    //}
+
+    //document.addEventListener("DOMContentLoaded", loadGaleri);
+
+    function loadGaleri() {
+
+        fetch('/Galeri/GetAll')
+            .then(res => res.json())
+            .then(data => {
+
+                let html = "";
+
+                data.forEach(item => {
+                    html += `
+                    <div class="col-md-4">
+                        <div class="galeri-card">
+                            <img src="${item.gambar}" 
+                                 alt="${item.judul}" 
+                                 class="galeri-img"
+                                 data-judul="${item.judul}"
+                                 data-deskripsi="${item.deskripsi}">
+                        </div>
+                    </div>
+                `;
+                });
+
+                document.getElementById("galeri-list").innerHTML = html;
+
+                document.querySelectorAll(".galeri-img").forEach(img => {
+                    img.addEventListener("click", function () {
+
+                        document.getElementById("lightbox").style.display = "block";
+                        document.getElementById("lightbox-img").src = this.src;
+
+                        document.getElementById("lightbox-title").innerText = this.dataset.judul;
+                        document.getElementById("lightbox-description").innerText = this.dataset.deskripsi;
+                    });
+                });
+
+            });
+
+        document.querySelector(".lightbox .close").onclick = function () {
+            document.getElementById("lightbox").style.display = "none";
+        };
+
+        document.getElementById("lightbox").onclick = function (e) {
+            if (e.target.id === "lightbox") {
+                this.style.display = "none";
+            }
+        };
+    }
+
+    document.addEventListener("DOMContentLoaded", loadGaleri);
+</script>

Views/Kontak.cshtml

@@ -0,0 +1,72 @@
+@{
+    ViewData["Title"] = "Kontak";
+}
+
+@section Style {
+    <link rel="stylesheet" href="~/css/Kontak.css" asp-append-version="true" />
+}
+
+
+@await Html.PartialAsync("Section/_Hero", "Kontak")
+
+<section class="kontak-section">
+    <div class="container">
+
+        <div class="map-wrapper">
+            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.2867371782063!2d106.8349494!3d-6.225874!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f3f1f2e8e2e9%3A0x5d3463fc552bda08!2sLaboratorium%20Lingkungan%20Hidup%20Daerah%20(LLHD)%20Provinsi%20DKI%20Jakarta!5e0!3m2!1sid!2sid!4v1776917670526!5m2!1sid!2sid"
+                    allowfullscreen=""
+                    loading="lazy"
+                    referrerpolicy="no-referrer-when-downgrade">
+            </iframe>
+        </div>
+
+
+        <div class="row g-4 mt-2">
+
+            <h3 class="text-center kontak-text">
+                Hubungi Kami melalui Kontak dibawah
+            </h3>
+
+            <div class="col-md-4">
+                <div class="kontak-card">
+
+                    <div class="icon-circle">
+                        <i class="bi bi-telephone"></i>
+                    </div>
+
+                    <h6>WA Dasalewa</h6>
+                    <p>0815-1193-0751</p>
+
+                </div>
+            </div>
+
+            <div class="col-md-4">
+                <div class="kontak-card">
+
+                    <div class="icon-circle">
+                        <i class="bi bi-envelope"></i>
+                    </div>
+
+                    <h6>Email</h6>
+                    <p>lablingkungan@jakarta.go.id</p>
+
+                </div>
+            </div>
+
+            <div class="col-md-4">
+                <div class="kontak-card">
+
+                    <div class="icon-circle">
+                        <i class="bi bi-geo-alt"></i>
+                    </div>
+
+                    <h6>Lokasi</h6>
+                    <p>Jl. Casablanca Kav. 1, Kuningan, Jakarta Selatan</p>
+
+                </div>
+            </div>
+
+        </div>
+
+    </div>
+</section>

Views/Layanan/DetailItem.cshtml

@@ -0,0 +1,175 @@
+@{
+    ViewData["Title"] = "Detail Analisis";
+}
+
+@section Style {
+    <link rel="stylesheet" href="~/css/layanan/DetailItem.css" asp-append-version="true" />
+}
+
+<div class="container mt-5">
+
+    <h3 class="page-title mb-4">Rincian Analisis</h3>
+
+    <div class="info-card mb-4">
+        <div class="info-item">
+            <span class="label">Output Hasil</span>
+            <span id="output" class="value"></span>
+        </div>
+
+        <div class="info-item">
+            <span class="label">Jenis Baku Mutu</span>
+            <span id="jenis" class="value"></span>
+        </div>
+    </div>
+
+    <div class="table-card">
+        <div class="table-header">
+            <button type="button" onclick="exportDetailExcel()" class="btn-export">
+                Download Excel
+            </button>
+
+            <input type="text" id="search" placeholder="Cari...">
+        </div>
+
+        <div class="table-responsive">
+            <table class="table custom-table">
+                <thead id="thead"></thead>
+                <tbody id="tbody"></tbody>
+            </table>
+        </div>
+    </div>
+
+    <div class="back-wrapper">
+        <a onclick="history.back()" class="btn-back">
+            <span class="arrow">←</span>
+            Kembali
+        </a>
+    </div>
+
+</div>
+
+<script>
+    function getQueryParam(name) {
+        return new URLSearchParams(window.location.search).get(name);
+    }
+
+    function loadDetail() {
+
+        const kode = getQueryParam("kode");
+
+        let total = 0;
+        let tbody = "";
+
+        fetch(`/DetailItem/GetDetail?kode=${kode}`)
+            .then(res => {
+                if (!res.ok) throw new Error("Data tidak ditemukan");
+                return res.json();
+            })
+            .then(data => {
+
+                document.getElementById("output").innerText = data.output || "-";
+                document.getElementById("jenis").innerText = data.jenis || "-";
+
+                let thead = "<tr>";
+                (data.table.columns || []).forEach(col => {
+                    thead += `<th>${col}</th>`;
+                });
+                thead += "</tr>";
+                document.getElementById("thead").innerHTML = thead;
+
+                (data.table.data || []).forEach(row => {
+
+                    tbody += "<tr>";
+
+                    (data.table.fields || []).forEach(field => {
+
+                        let value = row[field] ?? "-";
+
+                        if (field.toLowerCase().includes("biaya")) {
+                            let num = Number(value) || 0;
+                            total += num;
+                            value = "Rp " + num.toLocaleString();
+                        }
+
+                        tbody += `<td>${value}</td>`;
+                    });
+
+                    tbody += "</tr>";
+                });
+
+                tbody += `
+                <tr style="background:#f3f4f6; font-weight:600;">
+                    <td colspan="${data.table.columns.length - 1}" class="text-end">
+                        Total
+                    </td>
+                    <td>
+                        Rp ${total.toLocaleString()}
+                    </td>
+                </tr>
+            `;
+
+                document.getElementById("tbody").innerHTML = tbody;
+            })
+            .catch(err => {
+                console.error(err);
+                document.getElementById("tbody").innerHTML =
+                    "<tr><td colspan='7'>Data tidak ditemukan</td></tr>";
+            });
+    }
+
+    document.addEventListener("DOMContentLoaded", function () {
+
+        loadDetail();
+
+        const search = document.getElementById("search");
+
+        if (search) {
+            search.addEventListener("keyup", function () {
+                const keyword = this.value.toLowerCase();
+                const rows = document.querySelectorAll("#tbody tr");
+
+                rows.forEach(row => {
+                    const text = row.innerText.toLowerCase();
+                    row.style.display = text.includes(keyword) ? "" : "none";
+                });
+            });
+        }
+    });
+
+    function exportDetailExcel() {
+
+        const table = document.querySelector(".custom-table");
+
+        if (!table) {
+            alert("Table tidak ditemukan");
+            return;
+        }
+
+        if (typeof XLSX === "undefined") {
+            alert("Library XLSX belum ter-load");
+            return;
+        }
+
+        const output = document.getElementById("output").innerText;
+        const jenis = document.getElementById("jenis").innerText;
+
+        const tahun = new Date().getFullYear();
+
+        const fileName = `detail-${output}-${tahun}.xlsx`
+            .replace(/\s+/g, "-");
+
+        const wb = XLSX.utils.book_new();
+        const ws = XLSX.utils.table_to_sheet(table);
+
+        XLSX.utils.sheet_add_aoa(ws, [
+            ["Rincian Analisis"],
+            [`Output: ${output}`],
+            [`Jenis: ${jenis}`],
+            []
+        ], { origin: "A1" });
+
+        XLSX.utils.book_append_sheet(wb, ws, "Detail");
+
+        XLSX.writeFile(wb, fileName);
+    }
+</script>

Views/Layanan/DetailLayanan.cshtml

@@ -0,0 +1,328 @@
+@{
+    ViewData["Title"] = "Detail Layanan";
+}
+
+
+<style>
+    .service-btn.active {
+        background-color: #0d6efd;
+        color: white;
+    }
+</style>
+
+<div class="container mt-5">
+
+    <div class="service-card mb-5">
+        <div class="row align-items-center g-4">
+
+            <div class="col-md-7">
+                <h3 id="judul"></h3>
+                <p id="deskripsi-singkat"></p>
+                <ul id="deskripsi"></ul>
+            </div>
+
+            <div class="col-md-5 text-center">
+                <img id="gambar" />
+            </div>
+
+        </div>
+    </div>
+
+    <div class="table-card mb-4">
+        <div class="table-header">
+            <h5>Info Harga Baku Mutu Air</h5>
+            <div>
+                <button onclick="exportTableToExcel('table1')" class="btn-export">
+                    Download Excel
+                </button>
+
+                <input type="text" id="searchTable-harga" placeholder="Cari...">
+            </div>
+        </div>
+
+        <div class="table-responsive">
+            <table class="table custom-table" id="table1">
+                <thead></thead>
+                <tbody></tbody>
+            </table>
+        </div>
+    </div>
+
+    <div id="pagination" class="pagination-wrapper"></div>
+
+
+    <div class="table-card">
+        <div class="table-header">
+            <h5>Info Harga Per Parameter Air</h5>
+            <div>
+                <button onclick="exportTableToExcel('table2')" class="btn-export">
+                    Download Excel
+                </button>
+
+                <input type="text" id="searchTable-harga" placeholder="Cari...">
+            </div>
+        </div>
+
+        <div class="table-responsive">
+            <table class="table custom-table" id="table2">
+                <thead></thead>
+                <tbody></tbody>
+            </table>
+        </div>
+    </div>
+
+    <div id="pagination" class="pagination-wrapper"></div>
+
+</div>
+
+
+<script>
+
+    let currentPage = {};
+    const rowsPerPage = 5;
+
+    function getQueryParam(name) {
+        const urlParams = new URLSearchParams(window.location.search);
+        return urlParams.get(name);
+    }
+
+    function changeService(btn, jenis) {
+        window.history.pushState({}, "", `/Layanan?jenis=${jenis}`);
+
+        document.querySelectorAll('.service-btn').forEach(b => b.classList.remove('active'));
+        if (btn) btn.classList.add('active');
+
+        loadData(jenis);
+    }
+
+    function loadData(jenis) {
+
+        if (!jenis) jenis = "air";
+
+        document.getElementById("judul").innerText = "Loading...";
+
+        fetch(`/Layanan/GetData?jenis=${encodeURIComponent(jenis)}`)
+            .then(res => res.json())
+            .then(data => {
+
+                document.getElementById("judul").innerText = data.judul || "-";
+                document.getElementById("gambar").src = data.gambar || "";
+                document.getElementById("deskripsi-singkat").innerText = data["deskripsi-singkat"] || "";
+
+                let desc = "";
+                (data.deskripsi || []).forEach(d => {
+                    desc += `<li>${d}</li>`;
+                });
+
+                document.getElementById("deskripsi").innerHTML = desc;
+
+                renderTable("table1", data.table1);
+                renderTable("table2", data.table2);
+
+                setupPagination("table1");
+                setupPagination("table2");
+
+            })
+            .catch(() => {
+                document.getElementById("judul").innerText = "Data tidak ditemukan";
+            });
+    }
+
+    document.addEventListener("DOMContentLoaded", function () {
+
+        let jenis = getQueryParam("jenis") || "air";
+
+        loadData(jenis);
+
+        document.querySelectorAll('.service-btn').forEach(btn => {
+            btn.classList.toggle('active', btn.dataset.jenis === jenis);
+        });
+
+        setupSearch("searchTable-harga", "table1");
+        setupSearch("searchTable-parameter", "table2");
+    });
+
+    function renderTable(tableId, tableData) {
+
+        if (!tableData) return;
+
+        let thead = "<tr>";
+        (tableData.columns || []).forEach(col => {
+            thead += `<th>${col}</th>`;
+        });
+        thead += "</tr>";
+
+        document.querySelector(`#${tableId} thead`).innerHTML = thead;
+
+        let tbody = "";
+
+        (tableData.data || []).forEach(row => {
+            tbody += "<tr>";
+
+            (tableData.fields || []).forEach(field => {
+                let value = row[field] ?? "-";
+
+                if (typeof value === "number" && field.toLowerCase().includes("harga")) {
+                    value = "Rp " + value.toLocaleString();
+                }
+
+                if (field === "aksi") {
+                    value = `
+                        <a href="/DetailItem?kode=${row.kode}"
+                           class="btn btn-sm btn-primary rounded-pill">
+                           Detail
+                        </a>
+                    `;
+                }
+
+                tbody += `<td>${value}</td>`;
+            });
+
+            tbody += "</tr>";
+        });
+
+        document.querySelector(`#${tableId} tbody`).innerHTML = tbody;
+    }
+
+    function setupPagination(tableId) {
+
+        const rows = Array.from(document.querySelectorAll(`#${tableId} tbody tr`))
+            .filter(row => row.style.display !== "none");
+
+        let container = document.getElementById(`pagination-${tableId}`);
+
+        if (!container) {
+            container = document.createElement("div");
+            container.id = `pagination-${tableId}`;
+            container.className = "pagination-wrapper";
+
+            document.querySelector(`#${tableId}`).parentElement.appendChild(container);
+        }
+
+        const totalRows = rows.length;
+        const totalPages = Math.ceil(totalRows / rowsPerPage) || 1;
+
+        let page = 1;
+
+        function showPage(p) {
+            page = p;
+
+            rows.forEach((row, i) => {
+                row.style.display =
+                    i >= (p - 1) * rowsPerPage &&
+                        i < p * rowsPerPage
+                        ? ""
+                        : "none";
+            });
+
+            render();
+        }
+
+        function render() {
+            container.innerHTML = "";
+
+            const start = (page - 1) * rowsPerPage + 1;
+            const end = Math.min(page * rowsPerPage, totalRows);
+
+            const info = document.createElement("div");
+            info.className = "pagination-info";
+            info.innerText = `Showing ${start}–${end} of ${totalRows}`;
+
+            const controls = document.createElement("div");
+            controls.className = "pagination-controls";
+
+            const prev = document.createElement("button");
+            prev.innerText = "‹";
+            prev.className = "page-btn" + (page === 1 ? " disabled" : "");
+            prev.onclick = () => showPage(page - 1);
+            controls.appendChild(prev);
+
+            let pages = [];
+
+            if (totalPages <= 5) {
+                pages = [...Array(totalPages).keys()].map(i => i + 1);
+            } else {
+                pages = [1];
+
+                if (page > 3) pages.push("...");
+
+                for (let i = Math.max(2, page - 1); i <= Math.min(totalPages - 1, page + 1); i++) {
+                    pages.push(i);
+                }
+
+                if (page < totalPages - 2) pages.push("...");
+
+                pages.push(totalPages);
+            }
+
+            pages.forEach(p => {
+                const btn = document.createElement("button");
+
+                if (p === "...") {
+                    btn.innerText = "...";
+                    btn.className = "page-btn disabled";
+                } else {
+                    btn.innerText = p;
+                    btn.className = "page-btn" + (p === page ? " active" : "");
+                    btn.onclick = () => showPage(p);
+                }
+
+                controls.appendChild(btn);
+            });
+
+            const next = document.createElement("button");
+            next.innerText = "›";
+            next.className = "page-btn" + (page === totalPages ? " disabled" : "");
+            next.onclick = () => showPage(page + 1);
+            controls.appendChild(next);
+
+            container.appendChild(info);
+            container.appendChild(controls);
+        }
+
+        showPage(1);
+    }
+
+    function setupSearch(inputId, tableId) {
+
+        const input = document.getElementById(inputId);
+
+        input.addEventListener("keyup", function () {
+            const keyword = input.value.toLowerCase();
+            const rows = document.querySelectorAll(`#${tableId} tbody tr`);
+
+            rows.forEach(row => {
+                const text = row.innerText.toLowerCase();
+                row.style.display = text.includes(keyword) ? "" : "none";
+            });
+
+            setupPagination(tableId);
+        });
+    }
+
+    function exportTableToExcel(tableId) {
+
+        const table = document.getElementById(tableId);
+
+        if (!table || typeof XLSX === "undefined") {
+            alert("Export gagal");
+            return;
+        }
+
+        let jenis = getQueryParam("jenis") || "data";
+        const tahun = new Date().getFullYear();
+
+        jenis = jenis.toLowerCase().replace(/\s+/g, "-");
+
+        const fileName = `${jenis}-${tableId}-${tahun}.xlsx`;
+
+        const wb = XLSX.utils.book_new();
+        const ws = XLSX.utils.table_to_sheet(table);
+
+        XLSX.utils.book_append_sheet(wb, ws, "Data");
+
+        XLSX.writeFile(wb, fileName);
+    }
+
+</script>
+

Views/Layanan/Index.cshtml

@@ -0,0 +1,23 @@
+@{
+    var jenis = ViewBag.Jenis as string;
+    ViewData["Title"] = "Layanan";
+}
+
+
+@section Style {
+    <link rel="stylesheet" href="~/css/layanan/Layanan.css" asp-append-version="true" />
+    <link rel="stylesheet" href="~/css/layanan/DetailLayanan.css" asp-append-version="true" />
+}
+
+<div id="content">
+
+    @if (string.IsNullOrEmpty(jenis))
+    {
+    @await Html.PartialAsync("Layanan")
+    }
+    else
+    {
+    @await Html.PartialAsync("DetailLayanan")
+    }
+
+</div>

Views/Layanan/Layanan.cshtml

@@ -0,0 +1,136 @@
+
+
+<div class="layanan-page">
+
+    <section class="tahap-section">
+        <div class="container text-center">
+
+            <h5 class="mb-4 mt-4">Tahap Pengujian Sampel Laboratorium</h5>
+
+            <div class="tahap-image-wrapper">
+                <img src="~/assets/image/Tahap Pengujian LLHD.png"
+                     class="img-fluid tahap-image">
+            </div>
+
+        </div>
+    </section>
+
+    <section class="layanan-section py-5">
+        <div class="container">
+            <h5 class="mb-4 mt-4 text-center">Layanan Uji Laboratorium yang Tersedia</h5>
+
+            <div class="row g-4">
+
+                <div class="col-md-4">
+                    <div class="layanan-card">
+                        <h6>PCU Air</h6>
+
+                        <img src="~/assets/image/foto/ilustrasi pengujian air.png" class="card-img" />
+
+                        <p class="desc">
+                            Beberapa pengujian laboratorium yang dapat dilakukan pada pengujian air yaitu:
+                        </p>
+
+                        <ul>
+                            <li>Pengujian Air Limbah,</li>
+                            <li>Air Tanah, maupuan</li>
+                            <li>Air Minum.</li>
+                        </ul>
+
+                        <a href="/Layanan?jenis=pcu" class="card-footer-custom">
+                            <span>Lihat Harga</span>
+                            <div class="arrow-btn">
+                                <img src="~/assets/image/icon/arrow.png" />
+                            </div>
+                        </a>
+                    </div>
+                </div>
+
+                <div class="col-md-4">
+                    <div class="layanan-card">
+                        <h6>Pengujian Air</h6>
+
+                        <img src="~/assets/image/foto/ilustrasi pengujian air.png" class="card-img" />
+
+                        <p class="desc">
+                            Beberapa pengujian laboratorium yang dapat dilakukan pada pengujian air yaitu:
+                        </p>
+
+                        <ul>
+                            <li>Pengujian Air Limbah,</li>
+                            <li>Air Sungai,</li>
+                            <li>Air Situ,</li>
+                            <li>Air Tanah, dan</li>
+                            <li>Air Perpipaan.</li>
+                        </ul>
+
+                        <a href="/Layanan?jenis=air" class="card-footer-custom">
+                            <span>Lihat Harga</span>
+                            <div class="arrow-btn">
+                                <img src="~/assets/image/icon/arrow.png" />
+                            </div>
+                        </a>
+                    </div>
+                </div>
+
+                <div class="col-md-4">
+                    <div class="layanan-card">
+                        <h6>Pengujian Udara</h6>
+
+                        <img src="~/assets/image/foto/ilustrasi pengujian udara.png" class="card-img" />
+
+                        <p class="desc">
+                            Beberapa pengujian laboratorium yang dapat dilakukan pada pengujian udara yaitu:
+                        </p>
+
+                        <ul>
+                            <li>KUDR (kualitas udara dalam ruang)</li>
+                            <li>Kebisingan lingkungan</li>
+                            <li>Udara Ambien</li>
+                            <li>Emisi Tidak Bergerak (cerobong)</li>
+                            <li>Emisi Bergerak (kendaraan)</li>
+                            <li>SPKU (stasiun pemantau kualitas udara)</li>
+                        </ul>
+
+                        <a href="/Layanan?jenis=udara" class="card-footer-custom">
+                            <span>Lihat Harga</span>
+                            <div class="arrow-btn">
+                                <img src="~/assets/image/icon/arrow.png" />
+                            </div>
+                        </a>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </section>
+</div>
+
+<script>
+    function getQueryParam(name) {
+        const urlParams = new URLSearchParams(window.location.search);
+        return urlParams.get(name);
+    }
+
+    document.addEventListener("DOMContentLoaded", function () {
+
+        const jenis = getQueryParam("jenis");
+
+        if (jenis) {
+            fetch(`/Layanan/GetData?jenis=${jenis}`)
+                .then(res => res.json())
+                .then(data => {
+
+                    document.getElementById("content").innerHTML = `
+                    <div class="container mt-5">
+                        <h2>${data.judul}</h2>
+                        <ul>
+                            ${data.deskripsi.map(d => `<li>${d}</li>`).join("")}
+                        </ul>
+                    </div>
+                `;
+                });
+        }
+    });
+</script>
+

Views/Regulasi.cshtml

@@ -0,0 +1,209 @@
+@{
+    ViewData["Title"] = "Regulasi";
+}
+
+@section Style {
+<link rel="stylesheet" href="~/css/Regulasi.css" asp-append-version="true" />
+}
+
+@await Html.PartialAsync("Section/_Hero", "Regulasi")
+
+<div class="container">
+
+    <div class="text-center mb-3">
+        <button class="btn filter-btn active" data-kategori="peraturan">Peraturan</button>
+        <button class="btn filter-btn" data-kategori="sop">SOP</button>
+    </div>
+
+    <div class="row mb-3">
+        <div class="col-md-6">
+            <input type="text" id="search" class="form-control" placeholder="Cari..." />
+        </div>
+
+        <div class="col-md-6">
+            <select id="tahun" class="form-control">
+                <option value="">Semua Tahun</option>
+                <option value="2025">2025</option>
+                <option value="2026">2026</option>
+            </select>
+        </div>
+    </div>
+
+    <div id="list-regulasi"></div>
+
+    <div class="d-flex justify-content-between align-items-center mt-4 flex-wrap gap-2">
+        <div id="pagination-info" class="text-muted small"></div>
+        <div id="pagination" class="d-flex"></div>
+    </div>
+
+</div>
+
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+
+        let allData = [];
+        let filteredData = [];
+        let currentKategori = "peraturan";
+        let currentPage = 1;
+        const perPage = 10;
+
+        function formatTanggal(dateStr) {
+            return new Date(dateStr).toLocaleDateString("id-ID", {
+                day: "numeric",
+                month: "long",
+                year: "numeric"
+            });
+        }
+
+        function loadRegulasi() {
+            fetch('/Regulasi/GetRegulasi')
+                .then(res => res.json())
+                .then(data => {
+                    allData = data;
+                    filterData();
+                });
+        }
+
+        function filterData() {
+            const keyword = document.getElementById("search").value.toLowerCase();
+            const tahun = document.getElementById("tahun").value;
+
+            filteredData = allData.filter(item => {
+                const kategori = (item.kategori || "").trim().toLowerCase();
+                const judul = (item.judul || "").toLowerCase();
+
+                return (
+                    kategori === currentKategori &&
+                    judul.includes(keyword) &&
+                    (tahun === "" || item.tahun == tahun)
+                );
+            });
+
+            currentPage = 1;
+            renderPagination();
+        }
+
+        function renderPagination() {
+            const start = (currentPage - 1) * perPage;
+            const end = start + perPage;
+
+            const paginatedData = filteredData.slice(start, end);
+
+            renderData(paginatedData);
+            renderPaginationControls();
+            renderPaginationInfo(start, end);
+        }
+
+        function renderData(data) {
+            let html = "";
+
+            if (data.length === 0) {
+                html = "<p class='text-center text-muted'>Data tidak ditemukan</p>";
+            }
+
+            data.forEach(item => {
+                html += `
+            <div class="card p-3 mb-3 d-flex flex-row justify-content-between align-items-center">
+                <div class="d-flex align-items-center">
+                    <div class="me-3">
+                        <i class="bi bi-file-earmark-pdf fs-2 text-primary"></i>
+                    </div>
+                    <div>
+                        <h6 class="mb-1">${item.judul}</h6>
+                        <small class="text-muted">
+                            ${formatTanggal(item.tanggal)} | Diunduh ${item.download} kali
+                        </small>
+                    </div>
+                </div>
+                <div>
+                    <a href="${item.file}" target="_blank" class="btn btn-light btn-sm me-2">
+                        Lihat
+                    </a>
+                    <a href="${item.file}" download class="btn btn-primary btn-sm">
+                        Unduh
+                    </a>
+                </div>
+            </div>
+            `;
+            });
+
+            document.getElementById("list-regulasi").innerHTML = html;
+        }
+
+        function renderPaginationControls() {
+
+            const totalPages = Math.ceil(filteredData.length / perPage);
+
+            let html = "";
+
+            if (totalPages === 0) {
+                document.getElementById("pagination").innerHTML = "";
+                return;
+            }
+
+            html += `
+            <button class="btn btn-sm btn-outline-primary me-1"
+                ${currentPage === 1 ? "disabled" : ""}
+                onclick="changePage(${currentPage - 1})">
+                «
+            </button>
+        `;
+
+            for (let i = 1; i <= totalPages; i++) {
+                html += `
+                <button
+                    class="btn btn-sm ${i === currentPage ? "btn-primary" : "btn-outline-primary"} mx-1"
+                    onclick="changePage(${i})">
+                    ${i}
+                </button>
+            `;
+            }
+
+            html += `
+            <button class="btn btn-sm btn-outline-primary ms-1"
+                ${currentPage === totalPages ? "disabled" : ""}
+                onclick="changePage(${currentPage + 1})">
+                »
+            </button>
+        `;
+
+            document.getElementById("pagination").innerHTML = html;
+        }
+
+        function renderPaginationInfo(start, end) {
+            const total = filteredData.length;
+
+            if (total === 0) {
+                document.getElementById("pagination-info").innerHTML = "";
+                return;
+            }
+
+            const from = start + 1;
+            const to = Math.min(end, total);
+
+            document.getElementById("pagination-info").innerHTML =
+                `Show ${from}–${to} of ${total} data`;
+        }
+
+        window.changePage = function (page) {
+            currentPage = page;
+            renderPagination();
+            window.scrollTo({ top: 300, behavior: "smooth" });
+        };
+
+        document.querySelectorAll(".filter-btn").forEach(btn => {
+            btn.addEventListener("click", function () {
+                document.querySelectorAll(".filter-btn").forEach(b => b.classList.remove("active"));
+                this.classList.add("active");
+                currentKategori = this.dataset.kategori;
+                filterData();
+            });
+        });
+
+        document.getElementById("search").addEventListener("keyup", filterData);
+        document.getElementById("tahun").addEventListener("change", filterData);
+
+        loadRegulasi();
+
+    });
+</script>

Views/Sertifikat.cshtml

@@ -0,0 +1,96 @@
+@{
+    ViewData["Title"] = "Sertifikat";
+}
+
+@section Style {
+    <link rel="stylesheet" href="~/css/Sertifikat.css" asp-append-version="true" />
+}
+
+@await Html.PartialAsync("Section/_Hero", "Sertifikat")
+
+<section class="sertifikat-section">
+    <div class="container">
+
+        <div class="row g-4">
+
+            <div class="col-md-4">
+                <div class="sertifikat-card">
+
+                    <a href="~/assets/document/sertifikat/Registrasi Labling LLHD.pdf" target="_blank">
+                        <div class="pdf-preview">
+                            <iframe src="~/assets/document/sertifikat/Registrasi Labling LLHD.pdf"></iframe>
+                        </div>
+                    </a>
+
+                    <h6>Registrasi Labling LLHD</h6>
+
+                    <div class="sertifikat-action">
+
+                        <a href="~/assets/document/sertifikat/Registrasi Labling LLHD.pdf" target="_blank" class="btn-lihat">
+                            <i class="bi bi-eye"></i> Lihat Dokumen
+                        </a>
+
+                        <a href="~/assets/document/sertifikat/Registrasi Labling LLHD.pdf" download class="btn-unduh">
+                            <i class="bi bi-download"></i> Unduh
+                        </a>
+
+                    </div>
+
+                </div>
+            </div>
+
+            <div class="col-md-4">
+                <div class="sertifikat-card">
+
+                    <a href="~/assets/document/sertifikat/Sertifikat Akreditasi LLHD.pdf" target="_blank">
+                        <div class="pdf-preview">
+                            <iframe src="~/assets/document/sertifikat/Sertifikat Akreditasi LLHD.pdf"></iframe>
+                        </div>
+                    </a>
+
+                    <h6>Sertifikat Akreditasi LLHD</h6>
+
+                    <div class="sertifikat-action">
+
+                        <a href="~/assets/document/sertifikat/Sertifikat Akreditasi LLHD.pdf" target="_blank" class="btn-lihat">
+                            <i class="bi bi-eye"></i> Lihat Dokumen
+                        </a>
+
+                        <a href="~/assets/document/sertifikat/Sertifikat Akreditasi LLHD.pdf" download class="btn-unduh">
+                            <i class="bi bi-download"></i> Unduh
+                        </a>
+
+                    </div>
+
+                </div>
+            </div>
+            <div class="col-md-4">
+                <div class="sertifikat-card">
+
+                    <a href="~/assets/document/sertifikat/sertifikat wilayah bebas korupsi wbk.pdf" target="_blank">
+                        <div class="pdf-preview">
+                            <iframe src="~/assets/document/sertifikat/sertifikat wilayah bebas korupsi wbk.pdf"></iframe>
+                        </div>
+                    </a>
+
+                    <h6>Sertifikat Wilayah Bebas Korupsi</h6>
+
+                    <div class="sertifikat-action">
+
+                        <a href="~/assets/document/sertifikat/sertifikat wilayah bebas korupsi wbk.pdf" target="_blank" class="btn-lihat">
+                            <i class="bi bi-eye"></i> Lihat Dokumen
+                        </a>
+
+                        <a href="~/assets/document/sertifikat/sertifikat wilayah bebas korupsi wbk.pdf" download class="btn-unduh">
+                            <i class="bi bi-download"></i> Unduh
+                        </a>
+
+                    </div>
+
+                </div>
+            </div>
+
+        </div>
+
+    </div>
+</section>

Views/Shared/Section/_Footer.cshtml

@@ -0,0 +1,68 @@
+<footer class="footer-section">
+    <div class="container py-5">
+
+        <div class="row">
+
+            <div class="col-md-5 mb-4">
+
+                <div class="footer-logo mb-4">
+                    <img src="~/assets/image/logo/Logo update bg.png" alt="LLHD">
+                </div>
+
+                <p>
+                    Jl. Raya Casablanca No.Kav 1 10, RT.10/RW.4, Kuningan Tim., Kecamatan Setiabudi, Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12950
+                </p>
+
+                <p class="mt-3">
+                    Jam Pelayanan:<br>
+                    Senin - Jumat, 08.00 - 15.00 WIB
+                </p>
+
+            </div>
+
+            <div class="col-md-3 mb-4">
+                <h5 class="footer-title">Tautan Cepat</h5>
+                <ul class="footer-links">
+                    <li><a href="#">Beranda</a></li>
+                    <li><a asp-controller="Layanan" asp-action="Index">Layanan</a></li>
+                    <li><a href="/Layanan?jenis=pcu" >Layanan PCU</a></li>
+                    <li><a href="/Layanan?jenis=air">Layanan Uji Air</a></li>
+                    <li><a href="/Layanan?jenis=udara" >Layanan Uji Udara</a></li>
+                    <li><a asp-controller="Regulasi" asp-action="Index">Regulasi</a></li>
+                    <li><a asp-controller="Home" asp-action="sertifikat">Sertifikasi</a></li>
+                    <li><a asp-controller="Home" asp-action="TentangKami">Tentang Kami</a></li>
+                    <li><a asp-controller="Kontak" asp-action="Index">Kontak</a></li> 
+                    <li><a asp-controller="Faq" asp-action="Index">FAQ</a></li>
+                </ul>
+            </div>
+
+            <div class="col-md-2 mb-4">
+                <h5 class="footer-title">Sosial Media</h5>
+
+                <ul class="footer-links">
+                    <li><a href="https://www.instagram.com/lablingkungandki">Instagram</a></li>
+                    <li>
+                        <a href="@("https://www.youtube.com/@laboratoriumlingkunganjakarta")" target="_blank">
+                            Youtube
+                        </a>
+                    </li>
+                    <li><a href="https://wa.me/6281511930751">WhatsApp</a></li>
+                </ul>
+            </div>
+
+            <div class="col-md-2 mb-4">
+                <h5 class="footer-title">Hubungi Kami</h5>
+                <ul class="footer-links">
+                    <li>lablingkungan@jakarta.go.id</li>
+                    <li>0815-1193-0751</li>
+                </ul>
+            </div>
+
+        </div>
+
+        <div class="footer-bottom mt-4 pt-3">
+            Copyright@2026 • Laboratorium Lingkungan Hidup Daerah.
+        </div>
+
+    </div>
+</footer>

Views/Shared/Section/_Header.cshtml

@@ -1,21 +1,172 @@
 <header>
-    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
-        <div class="container-fluid">
-            <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">WebApplication2</a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
-                    aria-expanded="false" aria-label="Toggle navigation">
+    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top">
+        <div class="container">
+
+            <a class="navbar-brand" asp-controller="Home" asp-action="Index">
+                <img src="~/assets/image/logo/Logo update.png" width="120" />
+            </a>
+
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                 <span class="navbar-toggler-icon"></span>
             </button>
-            <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
-                <ul class="navbar-nav flex-grow-1">
+
+            <div class="collapse navbar-collapse" id="navbarNav">
+
+                <ul class="navbar-nav mx-auto align-items-lg-center gap-lg-3">
+
                     <li class="nav-item">
-                        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
+                        <a class="nav-link nav-underline" asp-controller="Home" asp-action="Index">
+                            Beranda
+                        </a>
                     </li>
-                    <li class="nav-item">
-                        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
+
+                    <li class="nav-item dropdown">
+                        <a class="nav-link" asp-controller="Layanan" asp-action="Index">Layanan</a>
+
+                        <ul class="dropdown-menu">
+                            <li>
+                                <a class="dropdown-item" href="/Layanan?jenis=pcu">
+                                    PCU Air
+                                </a>
+                            </li>
+                            <li>
+                                <a class="dropdown-item" href="/Layanan?jenis=air">
+                                    Pengujian Air
+                                </a>
+                            </li>
+                            <li>
+                                <a class="dropdown-item" href="/Layanan?jenis=udara">
+                                    Pengujian Udara
+                                </a>
                             </li>
                         </ul>
+                    </li>
+
+                    <li class="nav-item">
+                        <a class="nav-link nav-underline" asp-controller="Regulasi" asp-action="Index">Regulasi</a>
+                    </li>
+
+                    <li class="nav-item">
+                        <a class="nav-link nav-underline" asp-controller="Home" asp-action="Sertifikat">Sertifikat</a>
+                    </li>
+
+                    <li class="nav-item">
+                        <a class="nav-link nav-underline" asp-controller="Home" asp-action="TentangKami">Tentang Kami</a>
+                    </li>
+
+                    <li class="nav-item">
+                        <a class="nav-link nav-underline" asp-controller="Home" asp-action="Kontak">Kontak</a>
+                    </li>
+
+                    <li class="nav-item">
+                        <a class="nav-link nav-underline" asp-controller="Home" asp-action="Faq">FAQ</a>
+                    </li>
+
+                    <li>
+                        <button class="btn btn-link search-btn" data-bs-toggle="modal" data-bs-target="#searchModal">
+                            <i class="bi bi-search"></i>
+                        </button>
+                    </li>
+
+                </ul>
+
+                <div class="d-flex">
+                    <a href="https://akun.dinaslhdki.id/Identity/Account/Login?ReturnUrl=%2Fconnect%2Fauthorize%3Fclient_id%3Dlab-llhd%26redirect_uri%3Dhttps%253A%252F%252Fllhd.jakarta.go.id%252Fsignin-oidc%26response_type%3Dcode%26scope%3Dopenid%2520profile%2520email%2520roles%26code_challenge%3DROZFhIiIV8Fg4iVUWuIQbid6GXDa_jGSOqZKlmhU3N0%26code_challenge_method%3DS256%26response_mode%3Dform_post%26nonce%3D639063956776558493.ZTJjNjYxNzktODcyMC00NDdmLTgxODMtOTc3YzU1NmJkMGJiY2Q5ODg1MDMtMDZmOS00YTk2LThmM2YtNzI2ZjM5M2I5YjVj%26state%3DCfDJ8PaurvbSUKVMk3vpur3gVTRI_1HtqkzE3Ft0v1DW-t6Y10uXXwPx-sK1w0KA7UMZBOQgdlnQyyMJ4JeuYWtY0mOiiFlqizj2RDhZ934xfHNaqJMORnk08t2i4zCqJ0232v7LWviUqFkNsHYKUba4NLAJMkmPIhl8lgOZr_DrC-qAM6uCGJmD4wDyErxslcXYe4ljvW2InuPjWT4jKBq-qnKp6JsuEl6jmJBMt5fSSt2BqfFq4TDrHDZSB_xNHakU5l1m0QxLKH2lgoOe--p-eydQkxLzULMuxrIiI30nX_klk4cVioq6b-asGqqgbvsZVKGa3BilFjwV6_1Lntls2FcJaQ9_i69pLK5SAArWpPPNEGBLSVur-QysWvwnhYubGg%26x-client-SKU%3DID_NET9_0%26x-client-ver%3D8.0.1.0%26prompt%3D" class="btn btn-primary rounded-pill px-4">Login</a>
                 </div>
+
+            </div>
+
         </div>
     </nav>
 </header>
+
+<div class="modal fade" id="searchModal" tabindex="-1">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content search-modal">
+
+            <div class="modal-body">
+
+                <input type="text" id="searchInput"
+                       class="form-control search-popup-input"
+                       placeholder="Cari layanan, berita, regulasi..." />
+
+                <div id="searchResult" class="mt-3"></div>
+
+            </div>
+
+        </div>
+    </div>
+</div>
+
+<script>
+let allData = [];
+
+async function loadSearchData() {
+    const regulasi = await fetch('/Regulasi/GetRegulasi').then(r => r.json());
+    const berita = await fetch('/Berita/GetAll').then(r => r.json());
+
+    allData = [
+        ...regulasi.map(x => ({ ...x, type: 'regulasi' })),
+        ...berita.map(x => ({ ...x, type: 'berita' })),
+    ];
+}
+
+function searchData(keyword) {
+
+    keyword = keyword.toLowerCase();
+
+    const result = allData.filter(item =>
+        item.judul.toLowerCase().includes(keyword)
+    );
+
+    renderResult(result);
+}
+
+function renderResult(data) {
+
+    let html = "";
+
+    if (data.length === 0) {
+        html = "<p class='text-muted'>Tidak ditemukan</p>";
+    }
+
+    data.slice(0, 5).forEach(item => {
+
+        let link = "#";
+
+        if (item.type === "berita") {
+            link = `/Berita/Detail?id=${item.id}`;
+        }
+
+        if (item.type === "regulasi") {
+            link = item.file;
+        }
+
+        html += `
+            <a href="${link}" class="search-item d-block p-2 mb-2 rounded">
+                <strong>${item.judul}</strong><br>
+                <small class="text-muted">${item.type}</small>
+            </a>
+        `;
+    });
+
+    document.getElementById("searchResult").innerHTML = html;
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+
+    loadSearchData();
+
+    document.getElementById("searchInput").addEventListener("keyup", function () {
+        const keyword = this.value;
+
+        if (keyword.length < 2) {
+            document.getElementById("searchResult").innerHTML = "";
+            return;
+        }
+
+        searchData(keyword);
+    });
+
+});
+</script>

Views/Shared/Section/_Hero.cshtml

@@ -0,0 +1,9 @@
+@model string
+
+<section class="hero-section">
+    <div class="container">
+        <div class="hero-box text-center d-flex align-items-center justify-content-center">
+            <h2>@Model</h2>
+        </div>
+    </div>
+</section>

Views/Shared/_Layout.cshtml

@@ -3,27 +3,45 @@
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>@ViewData["Title"] - WebApplication2</title>
+    <title>@ViewData["Title"] - Laboratorium Lingkungan Hidup Jakarta</title>
     <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
+
     <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
+    <link rel="stylesheet" href="~/css/Header.css" asp-append-version="true" />
+    <link rel="stylesheet" href="~/css/Index.css" asp-append-version="true" />
+    <link rel="stylesheet" href="~/css/Footer.css" asp-append-version="true" />
+    <link rel="stylesheet" href="~/css/Hero.css" asp-append-version="true" />
+
     <link rel="stylesheet" href="~/WebApplication2.styles.css" asp-append-version="true" />
+    <link rel="icon" type="image/png" href="~/assets/image/logo/icon logo.png" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
+    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
+
     @await RenderSectionAsync("Style", required: false)
 </head>
 <body>
+    <header>
         <partial name="~/Views/Shared/Section/_Header.cshtml" />
+    </header>
+
     <div class="container">
         <main role="main" class="pb-3">
             @RenderBody()
         </main>
     </div>
 
-    <footer class="border-top footer text-muted">
-        <div class="container">
-            &copy; 2026 - WebApplication2 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
-        </div>
+    <footer>
+        <partial name="~/Views/Shared/Section/_Footer.cshtml" />
     </footer>
+
+
     <script src="~/lib/jquery/dist/jquery.min.js"></script>
     <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
     <script src="~/js/site.js" asp-append-version="true"></script>
     @await RenderSectionAsync("Scripts", required: false)
 </body>

Views/TentangKami.cshtml

@@ -0,0 +1,88 @@
+@{
+    ViewData["Title"] = "Tentang Kami";
+}
+
+@section Style {
+    <link rel="stylesheet" href="~/css/TentangKami.css" asp-append-version="true" />
+}
+
+
+@await Html.PartialAsync("Section/_Hero", "Tentang Kami")
+
+<section class="about-section">
+    <div class="container">
+
+        <div class="organisasi-card">
+
+            <h3 class="text-center">Struktur Organisasi LLHD</h3>
+            <img src="~/assets/image/Struktur Organisasi.png" class="about-img rounded-2" />
+        </div>
+
+        <div class="row g-4">
+
+            <div class="col-md-6">
+                <div class="about-card">
+
+                    <img src="~/assets/image/Visi Misi.png" class="about-img" />
+
+                </div>
+            </div>
+
+            <div class="col-md-6">
+                <div class="about-card">
+
+                    <img src="~/assets/image/Sejarah.png" class="about-img" />
+
+                </div>
+            </div>
+
+        </div>
+
+        <div class="value-section">
+
+            <h6 class="text-center mb-4">Value LLHD</h6>
+
+
+            <div class="row">
+                <div class="col-md-6">
+                    <div class="value-item">
+                        <div class="icon-box">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check-icon lucide-shield-check"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" /><path d="m9 12 2 2 4-4" /></svg>
+                        </div>
+                        <span class="value-label">Integritas</span>
+                        <p>Menjunjung tinggi kejujuran, objektivitas, dan etika pada setiap proses layanan</p>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <div class="value-item">
+                        <div class="icon-box">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-briefcase-business-icon lucide-briefcase-business"><path d="M12 12h.01" /><path d="M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2" /><path d="M22 13a18.15 18.15 0 0 1-20 0" /><rect width="20" height="14" x="2" y="6" rx="2" /></svg>
+                        </div>
+                        <span class="value-label">Profesional</span>
+                        <p>Didukung oleh SDM yang kompeten, berpengalaman, serta memberikan layanan cepat, responsif, dan berkualitas</p>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <div class="value-item">
+                        <div class="icon-box">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clipboard-check-icon lucide-clipboard-check"><rect width="8" height="4" x="8" y="2" rx="1" ry="1" /><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" /><path d="m9 14 2 2 4-4" /></svg>
+                        </div>
+                        <span class="value-label">Akuntabel</span>
+                        <p>Orientasi pada proses yang dapat dipertanggungjawabkan dan telusur sesuai dengan standar dan prosedur</p>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <div class="value-item">
+                        <div class="icon-box">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-recycle-icon lucide-recycle"><path d="M7 19H4.815a1.83 1.83 0 0 1-1.57-.881 1.785 1.785 0 0 1-.004-1.784L7.196 9.5" /><path d="M11 19h8.203a1.83 1.83 0 0 0 1.556-.89 1.784 1.784 0 0 0 0-1.775l-1.226-2.12" /><path d="m14 16-3 3 3 3" /><path d="M8.293 13.596 7.196 9.5 3.1 10.598" /><path d="m9.344 5.811 1.093-1.892A1.83 1.83 0 0 1 11.985 3a1.784 1.784 0 0 1 1.546.888l3.943 6.843" /><path d="m13.378 9.633 4.096 1.098 1.097-4.096" /></svg>
+                        </div>
+                        <span class="value-label">Berkelanjutan</span>
+                        <p>Komitmen untuk menjaga kualitas lingkungan dan mutu layanan serta inovasi dan perbaikan</p>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+
+    </div>
+</section>

Views/Video.cshtml

@@ -0,0 +1,64 @@
+@section Style {
+    <link rel="stylesheet" href="~/css/Video.css" asp-append-version="true" />
+}
+
+<div class="container my-5">
+
+    <h3 class="text-center fw-bold mb-4">Galeri Video</h3>
+
+    <div class="row g-4" id="video-list"></div>
+
+</div>
+
+<div id="videoModal" class="video-modal">
+    <div class="video-content">
+        <span class="close-btn" onclick="closeVideo()">×</span>
+        <iframe id="videoFrame" frameborder="0" allowfullscreen></iframe>
+    </div>
+</div>
+
+<script>
+    function loadVideo() {
+
+        fetch('/Video/GetAll')
+            .then(res => res.json())
+            .then(data => {
+
+                let html = "";
+
+                data.forEach(item => {
+                    html += `
+                        <div class="col-md-4">
+                            <div class="youtube-wrapper">
+                                <iframe 
+                                    src="https://www.youtube.com/embed/${item.youtube}"
+                                    title="${item.judul}"
+                                    frameborder="0"
+                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                                    allowfullscreen>
+                                </iframe>
+                            </div>
+                        </div>
+                    `;
+                });
+
+                document.getElementById("video-list").innerHTML = html;
+
+            });
+    }
+
+    function openVideo(url) {
+        document.getElementById("videoFrame").src = url;
+        document.getElementById("videoModal").style.display = "flex";
+    }
+
+    function closeVideo() {
+        document.getElementById("videoFrame").src = "";
+        document.getElementById("videoModal").style.display = "none";
+    }
+
+    document.addEventListener("DOMContentLoaded", loadVideo);
+</script>
+
+
+