initial commit

.vscode/settings.json

@@ -0,0 +1,19 @@
+// "tailwindCSS.includeLanguages": {
+//   "plaintext": "html",
+//   "razor": "html",
+//   "cshtml": "html"
+// },
+// "editor.quickSuggestions": {
+//   "strings": true
+// }
+
+{
+  "tailwindCSS.includeLanguages": {
+    "razor": "html",
+    "cshtml": "html"
+  },
+  "tailwindCSS.experimental.classRegex": [
+    ["class\\s*=\\s*\"([^\"]*)", 1],
+    ["className\\s*=\\s*\"([^\"]*)", 1]
+  ]
+}

Controllers/HomeController.cs

@@ -0,0 +1,37 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using dlh_net.Models;
+
+namespace dlh_net.Controllers;
+
+public class HomeController : Controller
+{
+    private readonly ILogger<HomeController> _logger;
+
+    public HomeController(ILogger<HomeController> logger)
+    {
+        _logger = logger;
+    }
+
+    public IActionResult Index()
+    {
+        return View();
+    }
+
+    public IActionResult Privacy()
+    {
+        return View();
+    }
+
+    [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
+    public IActionResult Error()
+    {
+        return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
+    }
+
+    public IActionResult NotFoundPage()
+{
+    Response.StatusCode = 404;
+    return View("NotFound");
+}
+}

Controllers/LayananController.cs

@@ -0,0 +1,82 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace MyApp.Namespace
+{
+    public class LayananController : Controller
+    {
+        // GET: LayananController
+        public ActionResult Index()
+        {
+            return View();
+        }
+
+        // GET: LayananController/Details/5
+        public ActionResult Details(int id)
+        {
+            return View();
+        }
+
+        // GET: LayananController/Create
+        public ActionResult Create()
+        {
+            return View();
+        }
+
+        // POST: LayananController/Create
+        [HttpPost]
+        [ValidateAntiForgeryToken]
+        public ActionResult Create(IFormCollection collection)
+        {
+            try
+            {
+                return RedirectToAction(nameof(Index));
+            }
+            catch
+            {
+                return View();
+            }
+        }
+
+        // GET: LayananController/Edit/5
+        public ActionResult Edit(int id)
+        {
+            return View();
+        }
+
+        // POST: LayananController/Edit/5
+        [HttpPost]
+        [ValidateAntiForgeryToken]
+        public ActionResult Edit(int id, IFormCollection collection)
+        {
+            try
+            {
+                return RedirectToAction(nameof(Index));
+            }
+            catch
+            {
+                return View();
+            }
+        }
+
+        // GET: LayananController/Delete/5
+        public ActionResult Delete(int id)
+        {
+            return View();
+        }
+
+        // POST: LayananController/Delete/5
+        [HttpPost]
+        [ValidateAntiForgeryToken]
+        public ActionResult Delete(int id, IFormCollection collection)
+        {
+            try
+            {
+                return RedirectToAction(nameof(Index));
+            }
+            catch
+            {
+                return View();
+            }
+        }
+    }
+}

Controllers/ProfilController.cs

@@ -0,0 +1,102 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace MyApp.Namespace
+{
+      [Route("profil")]
+    public class ProfilController : Controller
+    {
+
+        [HttpGet("organisasi")]
+        public IActionResult Organisasi()
+        {
+            return View();
+        }
+
+        [HttpGet("bidang")]
+        public IActionResult Bidang()
+        {
+            return View();
+        }
+
+        [HttpGet("tupoksi")]
+        public IActionResult Tupoksi()
+        {
+            return View();
+        }
+
+        // GET: ProfilController
+        public ActionResult Index()
+        {
+            return View();
+        }
+
+        // GET: ProfilController/Details/5
+        public ActionResult Details(int id)
+        {
+            return View();
+        }
+
+        // GET: ProfilController/Create
+        public ActionResult Create()
+        {
+            return View();
+        }
+
+        // POST: ProfilController/Create
+        [HttpPost]
+        [ValidateAntiForgeryToken]
+        public ActionResult Create(IFormCollection collection)
+        {
+            try
+            {
+                return RedirectToAction(nameof(Index));
+            }
+            catch
+            {
+                return View();
+            }
+        }
+
+        // GET: ProfilController/Edit/5
+        public ActionResult Edit(int id)
+        {
+            return View();
+        }
+
+        // POST: ProfilController/Edit/5
+        [HttpPost]
+        [ValidateAntiForgeryToken]
+        public ActionResult Edit(int id, IFormCollection collection)
+        {
+            try
+            {
+                return RedirectToAction(nameof(Index));
+            }
+            catch
+            {
+                return View();
+            }
+        }
+
+        // GET: ProfilController/Delete/5
+        public ActionResult Delete(int id)
+        {
+            return View();
+        }
+
+        // POST: ProfilController/Delete/5
+        [HttpPost]
+        [ValidateAntiForgeryToken]
+        public ActionResult Delete(int id, IFormCollection collection)
+        {
+            try
+            {
+                return RedirectToAction(nameof(Index));
+            }
+            catch
+            {
+                return View();
+            }
+        }
+    }
+}

Controllers/ProgramController.cs

@@ -0,0 +1,132 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace dlh_net.Controllers
+{
+    [Route("program")]
+    public class ProgramController : Controller
+    {
+        [HttpGet("udara")]
+        public IActionResult Udara()
+        {
+            return View();
+        }
+
+        [HttpGet("air")]
+        public IActionResult Air()
+        {
+            return View();
+        }
+
+         [HttpGet("sampah")]
+        public IActionResult Sampah()
+        {
+            return View();
+        }
+
+        [HttpGet("anggaran")]
+        public IActionResult Anggaran()
+        {
+            return View();
+        }
+
+          [HttpGet("lkip")]
+        public IActionResult LKIP()
+        {
+            return View();
+        }
+
+        [HttpGet("perjanjian-kinerja")]
+        public IActionResult PerjanjianKinerja()
+        {
+            return View();
+        }
+
+        [HttpGet("pengawasan")]
+        public IActionResult Pengawasan()
+        {
+            return View();
+        }
+
+         [HttpGet("rencana-strategis")]
+        public IActionResult RencanaStrategis()
+        {
+            return View();
+        }
+
+
+        // GET: ProgramController
+        public ActionResult Index()
+        {
+            return View();
+        }
+
+        // GET: ProgramController/Details/5
+        public ActionResult Details(int id)
+        {
+            return View();
+        }
+
+        // GET: ProgramController/Create
+        public ActionResult Create()
+        {
+            return View();
+        }
+
+        // POST: ProgramController/Create
+        [HttpPost]
+        [ValidateAntiForgeryToken]
+        public ActionResult Create(IFormCollection collection)
+        {
+            try
+            {
+                return RedirectToAction(nameof(Index));
+            }
+            catch
+            {
+                return View();
+            }
+        }
+
+        // GET: ProgramController/Edit/5
+        public ActionResult Edit(int id)
+        {
+            return View();
+        }
+
+        // POST: ProgramController/Edit/5
+        [HttpPost]
+        [ValidateAntiForgeryToken]
+        public ActionResult Edit(int id, IFormCollection collection)
+        {
+            try
+            {
+                return RedirectToAction(nameof(Index));
+            }
+            catch
+            {
+                return View();
+            }
+        }
+
+        // GET: ProgramController/Delete/5
+        public ActionResult Delete(int id)
+        {
+            return View();
+        }
+
+        // POST: ProgramController/Delete/5
+        [HttpPost]
+        [ValidateAntiForgeryToken]
+        public ActionResult Delete(int id, IFormCollection collection)
+        {
+            try
+            {
+                return RedirectToAction(nameof(Index));
+            }
+            catch
+            {
+                return View();
+            }
+        }
+    }
+}

Controllers/PublikasiController.cs

@@ -0,0 +1,92 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace MyApp.Namespace
+{
+    [Route("publikasi")]
+    public class PublikasiController : Controller
+    {
+
+        [HttpGet("dikplhd")]
+        public IActionResult DIKPLHD()
+        {
+            return View();
+        }
+
+
+
+        // GET: PublikasiController
+        public ActionResult Index()
+        {
+            return View();
+        }
+
+        // GET: PublikasiController/Details/5
+        public ActionResult Details(int id)
+        {
+            return View();
+        }
+
+        // GET: PublikasiController/Create
+        public ActionResult Create()
+        {
+            return View();
+        }
+
+        // POST: PublikasiController/Create
+        [HttpPost]
+        [ValidateAntiForgeryToken]
+        public ActionResult Create(IFormCollection collection)
+        {
+            try
+            {
+                return RedirectToAction(nameof(Index));
+            }
+            catch
+            {
+                return View();
+            }
+        }
+
+        // GET: PublikasiController/Edit/5
+        public ActionResult Edit(int id)
+        {
+            return View();
+        }
+
+        // POST: PublikasiController/Edit/5
+        [HttpPost]
+        [ValidateAntiForgeryToken]
+        public ActionResult Edit(int id, IFormCollection collection)
+        {
+            try
+            {
+                return RedirectToAction(nameof(Index));
+            }
+            catch
+            {
+                return View();
+            }
+        }
+
+        // GET: PublikasiController/Delete/5
+        public ActionResult Delete(int id)
+        {
+            return View();
+        }
+
+        // POST: PublikasiController/Delete/5
+        [HttpPost]
+        [ValidateAntiForgeryToken]
+        public ActionResult Delete(int id, IFormCollection collection)
+        {
+            try
+            {
+                return RedirectToAction(nameof(Index));
+            }
+            catch
+            {
+                return View();
+            }
+        }
+    }
+}

Controllers/SeputarController.cs

@@ -0,0 +1,82 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace MyApp.Namespace
+{
+    public class SeputarController : Controller
+    {
+        // GET: SeputarController
+        public ActionResult Index()
+        {
+            return View();
+        }
+
+        // GET: SeputarController/Details/5
+        public ActionResult Details(int id)
+        {
+            return View();
+        }
+
+        // GET: SeputarController/Create
+        public ActionResult Create()
+        {
+            return View();
+        }
+
+        // POST: SeputarController/Create
+        [HttpPost]
+        [ValidateAntiForgeryToken]
+        public ActionResult Create(IFormCollection collection)
+        {
+            try
+            {
+                return RedirectToAction(nameof(Index));
+            }
+            catch
+            {
+                return View();
+            }
+        }
+
+        // GET: SeputarController/Edit/5
+        public ActionResult Edit(int id)
+        {
+            return View();
+        }
+
+        // POST: SeputarController/Edit/5
+        [HttpPost]
+        [ValidateAntiForgeryToken]
+        public ActionResult Edit(int id, IFormCollection collection)
+        {
+            try
+            {
+                return RedirectToAction(nameof(Index));
+            }
+            catch
+            {
+                return View();
+            }
+        }
+
+        // GET: SeputarController/Delete/5
+        public ActionResult Delete(int id)
+        {
+            return View();
+        }
+
+        // POST: SeputarController/Delete/5
+        [HttpPost]
+        [ValidateAntiForgeryToken]
+        public ActionResult Delete(int id, IFormCollection collection)
+        {
+            try
+            {
+                return RedirectToAction(nameof(Index));
+            }
+            catch
+            {
+                return View();
+            }
+        }
+    }
+}

Models/ErrorViewModel.cs

@@ -0,0 +1,8 @@
+namespace dlh_net.Models;
+
+public class ErrorViewModel
+{
+    public string? RequestId { get; set; }
+
+    public bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
+}

Program.cs

@@ -0,0 +1,35 @@
+var builder = WebApplication.CreateBuilder(args);
+
+// Add services to the container.
+builder.Services.AddControllersWithViews();
+
+
+builder.Services.AddLucideIcons();
+
+
+var app = builder.Build();
+
+// Configure the HTTP request pipeline.
+if (!app.Environment.IsDevelopment())
+{
+    app.UseExceptionHandler("/Home/Error");
+    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
+    app.UseHsts();
+}
+
+app.UseHttpsRedirection();
+app.UseRouting();
+app.UseStatusCodePagesWithReExecute("/Home/NotFoundPage");
+
+app.UseAuthorization();
+
+app.MapStaticAssets();
+
+app.MapControllerRoute(
+    name: "default",
+    pattern: "{controller=Home}/{action=Index}/{id?}")
+    .WithStaticAssets();
+
+
+
+app.Run();

Properties/launchSettings.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://json.schemastore.org/launchsettings.json",
+  "profiles": {
+    "http": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "applicationUrl": "http://localhost:5221",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "https": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "applicationUrl": "https://localhost:7047;http://localhost:5221",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}

Views/Components/Home/_Berita.cshtml

@@ -0,0 +1,61 @@
+<section class="delay-[300ms] duration-[600ms] taos:translate-y-[100%] taos:opacity-0" data-taos-offset="300">
+    <div class="container mx-auto px-4 py-12 max-w-6xl">
+        <div class="flex flex-col md:flex-row justify-between items-start mb-6">
+            <div>
+                <h2 class="text-3xl font-bold text-gray-900">Berita Terkini</h2>
+                <p class="text-gray-600 mt-2">
+                    Ikuti akun resmi DLH untuk berita, edukasi, dan ajakan aksi lingkungan langsung dari sumber terpercaya.
+                </p>
+            </div>
+            <a href="#" class="mt-4 md:mt-0 bg-orange-500 hover:bg-orange-600 text-white px-6 py-2 rounded-full flex items-center">
+                Lihat Semua
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
+                </svg>
+            </a>
+        </div>
+
+        <div class="flex flex-col gap-6 md:flex-row">
+            <!-- Main news item (large) -->
+            <div class="w-full md:w-2/3">
+            <div class="overflow-hidden rounded-lg">
+                    <img src="@Url.Content("~/assets/images/home/berita1.jpg")" alt="Perayaan Malam Tahun Baru" class="w-full h-auto object-cover" />
+                </div>
+                <div class="mt-4">
+                    <span class="bg-orange-500 text-white text-sm px-3 py-1 rounded-md">Artikel</span>
+                    <span class="text-gray-600 ml-2 text-sm">17 Mei 2025</span>
+                    <h3 class="text-gray-900 text-xl font-bold mt-2">Perayaan Malam Tahun Baru di Jakarta Hasilkan 132 Ton Sampah</h3>
+                    <p class="text-gray-600">
+                        Ikuti akun resmi DLH untuk berita, edukasi, dan ajakan aksi lingkungan langsung dari sumber terpercaya.
+                    </p>
+                    <a href="#" class="text-green-500 flex items-center mt-2 font-medium hover:text-green-600 transition-colors duration-300">
+                        Baca Selengkapnya
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
+                            <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
+                        </svg>
+                    </a>
+                </div>
+            </div>
+
+            <!-- Right side news items (smaller) -->
+            <div class="w-full md:w-1/3 flex flex-col gap-4">
+        @for (var i = 0; i < 4; i++)
+        {
+            <div class="flex space-x-4 border-b border-gray-100 pb-4">
+                <img src="@Url.Content("~/assets/images/home/berita1.jpg")" alt="Berita" class="w-32 h-24 object-cover rounded-lg" />
+                <a href="#" class="flex flex-col justify-center">
+                    <div class="flex items-center mb-1">
+                        <span class="bg-orange-500 text-white text-xs px-2 py-1 rounded">Artikel</span>
+                        <span class="text-gray-500 text-xs ml-2">17 Mei 2025</span>
+                    </div>
+                    <h3 class="font-bold text-gray-900 hover:text-orange-500 transition-colors duration-300">
+                        Perayaan Malam Tahun Baru di Jakarta Hasilkan 132 Ton Sampah
+                    </h3>
+                </a>
+            </div>
+        }
+    </div>
+</div>
+
+    </div>
+</section>

Views/Components/Home/_Informasi.cshtml

@@ -0,0 +1,234 @@
+<div class="container max-w-6xl px-4 mx-auto my-12">
+    <div class="flex flex-col md:flex-row justify-between items-start md:items-start mb-12 gap-4">
+        <div class="w-full md:w-1/2">
+            <h2 class="text-2xl md:text-3xl font-bold text-gray-800">Informasi Lingkungan dan</br> Kebersihan Realtime</h2>
+        </div>
+        <div class="w-full md:w-1/2">
+            <div class="flex flex-col gap-2">
+                <div class="inline-flex flex-wrap md:flex-nowrap mt-2 md:mt-0 bg-amber-100 rounded-full px-3 py-1 items-center hover:bg-amber-200 transition-all duration-300 w-fit">
+                    <i class="h-4 w-4 md:h-5 md:w-5 text-amber-600 mr-2" data-lucide="calendar"></i>
+                    <span class="font-medium text-sm md:text-base">Senin, 10 Februari 2025</span>
+                    <span class="mx-2 text-amber-600">|</span>
+                    <i class="h-4 w-4 md:h-5 md:w-5 text-amber-600 mr-2" data-lucide="clock"></i>
+                    <span class="font-medium text-sm md:text-base">15.00 WIB</span>
+                </div>
+                <div>
+                    <p class="text-gray-600 text-balance text-sm md:text-base">
+                        Update terbaru seputar kapasitas, teknologi, dan program keberlanjutan TPST Bantar Gebang dalam pengelolaan sampah Jakarta serta kualitas udara di Provinsi DKI Jakarta.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="animate-on-scroll" data-aos="fade-up" data-aos-duration="2000" data-aos-once="true">
+        <div class="grid grid-cols-1 md:grid-cols-12 gap-4">
+            <!-- Jumlah Sampah Card -->
+            <div class="relative bg-gradient-to-br from-orange-400 via-orange-500 to-orange-600 text-white p-6 rounded-lg md:col-span-6 overflow-hidden h-[240px] md:h-[488px] group">
+                <div class="absolute inset-0 bg-gradient-to-r from-white/20 via-white/10 to-transparent animate-spotlight"></div>
+                <div class="relative z-10 flex flex-col justify-between h-full md:p-6">
+                    <div class="flex justify-between items-start">
+                        <div>
+                            <h3 class="text-lg md:text-2xl leading-tight">Jumlah Sampah<br>Masuk TPST<br>Bantar Gebang</h3>
+                        </div>
+                        <div>
+                            <i class="h-8 w-8 md:h-10 md:w-10" data-lucide="trash-2"></i>
+                        </div>
+                    </div>
+                    <div class="text-left">
+                        <span class="text-lg md:text-xl">Ton</span>
+                        <div class="text-5xl md:text-7xl font-bold rolling-number" data-target="673">0</div>
+                        <div class="mt-3 inline-flex items-center bg-orange-600 bg-opacity-50 rounded-md px-3 py-1">
+                             <i class="h-4 w-4 mr-1" data-lucide="arrow-down"></i>
+                            <span class="text-sm">2.5%</span>
+                            <span class="ml-1 text-sm">dari kemarin</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="md:col-span-6 grid grid-rows-1 md:grid-rows-2 gap-4">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <!-- Kualitas Udara Terbaik -->
+                    <div class="relative bg-green-600 text-white p-6 rounded-lg h-[240px] md:h-[234px] overflow-hidden group">
+                        <div class="absolute inset-0 bg-gradient-to-r from-white/20 via-white/10 to-transparent animate-spotlight-slow"></div>
+                        <div class="relative z-10 flex flex-col justify-between h-full">
+                            <div class="flex justify-between items-start">
+                                <div>
+                                    <h3 class="text-lg md:text-xl leading-tight">Kualitas Udara<br>Terbaik</h3>
+                                </div>
+                                <div>
+                                      <i class="h-8 w-8 md:h-10 md:w-10" data-lucide="wind"></i>
+                                </div>
+                            </div>
+                            <div class="text-left">
+                                <div class="flex items-end gap-2">
+                                    <div class="text-5xl md:text-7xl font-bold rolling-number" data-target="8">0</div>
+                                    <div class="text-lg md:text-sm font-normal">ISPU</div>
+                                </div>
+                                <div class="mt-3 inline-flex items-center bg-green-700 bg-opacity-50 rounded-md px-3 py-1">
+                                      <i class="h-4 w-4 mr-1" data-lucide="arrow-up"></i>
+                                    <span class="text-sm">2.5 μg/</span>
+                                    <span class="ml-1 text-sm">PM2</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Kualitas Udara Terburuk -->
+                    <div class="relative bg-red-600 text-white p-6 rounded-lg h-[240px] md:h-[234px] overflow-hidden group">
+                        <div class="absolute inset-0 bg-gradient-to-r from-white/20 via-white/10 to-transparent animate-spotlight-reverse"></div>
+                        <div class="relative z-10 flex flex-col justify-between h-full">
+                            <div class="flex justify-between items-start">
+                                <div>
+                                    <h3 class="text-lg md:text-xl leading-tight">Kualitas Udara<br>Terburuk</h3>
+                                </div>
+                                <div>
+                                    <i class="h-8 w-8 md:h-10 md:w-10" data-lucide="tornado"></i>
+                                </div>
+                            </div>
+                            <div class="text-left">
+                                <div class="flex items-end gap-2">
+                                    <div class="text-5xl md:text-7xl font-bold rolling-number" data-target="8">0</div>
+                                    <div class="text-lg md:text-sm font-normal">ISPU</div>
+                                </div>
+                                <div class="mt-3 inline-flex items-center bg-red-700 bg-opacity-50 rounded-md px-3 py-1">
+                                    
+                                    <i class="h-4 w-4 mr-1" data-lucide="arrow-down"></i>
+                                    <span class="text-sm">2.5 μg/</span>
+                                    <span class="ml-1 text-sm">PM2</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Jumlah Truk Card -->
+                <div class="relative bg-yellow-400 text-white rounded-lg p-6 h-[240px] md:h-[234px] overflow-hidden group">
+                    <div class="absolute inset-0 bg-gradient-to-r from-white/20 via-white/10 to-transparent animate-spotlight-diagonal"></div>
+                    <div class="relative z-10 flex flex-col justify-between h-full">
+                        <div class="flex justify-between items-start">
+                            <div>
+                                <h3 class="text-lg md:text-xl leading-tight">Jumlah Truk<br>Masuk TPST<br>Bantar Gebang</h3>
+                            </div>
+                            <div>
+                               <i class="h-8 w-8 md:h-10 md:w-10" data-lucide="truck"></i>
+                            </div>
+                        </div>
+                        <div class="text-left">
+                            <div class="flex items-end gap-2">
+                                    <div class="text-5xl md:text-7xl font-bold rolling-number" data-target="673">0</div>
+                                    <div class="text-lg md:text-sm font-normal">Unit</div>
+                                </div>
+                            <div class="mt-3 inline-flex items-center bg-yellow-500 bg-opacity-50 rounded-md px-3 py-1">
+                                  <i class="h-4 w-4 mr-1" data-lucide="arrow-down"></i>
+                                <span class="text-sm">2.5%</span>
+                                <span class="ml-1 text-sm">dari kemarin</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<register-block dynamic-section="css" key="cssInformasi">
+<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+<style>
+    @@keyframes spotlight {
+  0% {
+    transform: translateX(-100%) skew(-20deg);
+  }
+  100% {
+    transform: translateX(200%) skew(-20deg);
+  }
+}
+
+@@keyframes spotlight-slow {
+  0% {
+    transform: translateX(-100%) skew(-15deg);
+  }
+  100% {
+    transform: translateX(200%) skew(-15deg);
+  }
+}
+
+@@keyframes spotlight-reverse {
+  0% {
+    transform: translateX(200%) skew(20deg);
+  }
+  100% {
+    transform: translateX(-100%) skew(20deg);
+  }
+}
+
+@@keyframes spotlight-diagonal {
+  0% {
+    transform: translate(-100%, -50%) skew(-25deg);
+  }
+  100% {
+    transform: translate(200%, 50%) skew(-25deg);
+  }
+}
+
+.animate-spotlight {
+  animation: spotlight 3s ease-in-out infinite;
+}
+
+.animate-spotlight-slow {
+  animation: spotlight-slow 4s ease-in-out infinite;
+}
+
+.animate-spotlight-reverse {
+  animation: spotlight-reverse 3.5s ease-in-out infinite;
+}
+
+.animate-spotlight-diagonal {
+  animation: spotlight-diagonal 4.5s ease-in-out infinite;
+}
+
+</style>
+</register-block>
+
+<register-block dynamic-section="scripts" key="jsInformasi">
+  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+  
+<script>
+    AOS.init();
+</script>
+
+<script>
+document.addEventListener("DOMContentLoaded", function () {
+  const rollingNumbers = document.querySelectorAll(".rolling-number");
+
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        const element = entry.target;
+        const target = parseInt(element.getAttribute("data-target"));
+        let current = 0;
+        const increment = target / 120;
+
+        const updateNumber = () => {
+          current += increment;
+          if (current < target) {
+            element.textContent = Math.floor(current);
+            requestAnimationFrame(updateNumber);
+          } else {
+            element.textContent = target;
+          }
+        };
+
+        updateNumber();
+        observer.unobserve(element);
+      }
+    });
+  });
+
+  rollingNumbers.forEach((number) => {
+    observer.observe(number);
+  });
+});
+</script>
+</register-block>

Views/Components/Home/_Layanan.cshtml

@@ -0,0 +1,382 @@
+<section class="container mx-auto px-4 py-4 max-w-6xl">
+    <h2 class="text-3xl font-bold mb-4">Layanan Kami</h2>
+    <p class="text-gray-600 mb-12 text-balance">
+        Beragam layanan DLH DKI Jakarta, dari pengelolaan sampah, pengujian lingkungan, hingga pengaduan pelanggaran untuk Jakarta yang lebih hijau.
+    </p>
+
+    <!-- tab Mobile -->
+   <div class="md:hidden mb-8">
+    <div class="grid grid-cols-2 gap-3 mb-4" id="mobile-tabs-top">
+        <button class="mobile-tab group relative px-4 py-3 text-sm font-semibold rounded-xl bg-orange-500 text-white shadow-lg transform transition-all duration-300 hover:scale-105 active:scale-95" data-service="Penjemputan e-Waste">
+            <div class="flex items-center justify-center space-x-2">
+                <i class="w-4 h-4 inline" data-lucide="trash-2"></i>
+                <span>e-Waste</span>
+            </div>
+            <div class="absolute inset-0 bg-white/20 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+        </button>
+        <button class="mobile-tab group relative px-4 py-3 text-sm font-semibold rounded-xl bg-gray-200 text-gray-600 shadow-md transform transition-all duration-300 hover:scale-105 active:scale-95" data-service="Uji Sampel Laboratorium">
+            <div class="flex items-center justify-center space-x-2">
+                 <i class="w-4 h-4 inline" data-lucide="flask-conical"></i>
+                <span>Lab Testing</span>
+            </div>
+        </button>
+    </div>
+    <div class="grid grid-cols-2 gap-3 mb-4" id="mobile-tabs-middle">
+        <button class="mobile-tab group relative px-4 py-3 text-sm font-semibold rounded-xl bg-gray-200 text-gray-600 shadow-md transform transition-all duration-300 hover:scale-105 active:scale-95" data-service="Bus Toilet">
+            <div class="flex items-center justify-center space-x-2">
+                <i class="w-4 h-4 inline" data-lucide="bus"></i>
+                <span>Bus Toilet</span>
+            </div>
+
+        </button>
+        <button class="mobile-tab group relative px-4 py-3 text-sm font-semibold rounded-xl bg-gray-200 text-gray-600 shadow-md transform transition-all duration-300 hover:scale-105 active:scale-95" data-service="AMDAL">
+            <div class="flex items-center justify-center space-x-2">
+                <i class="w-4 h-4 inline" data-lucide="file-text"></i>
+                <span>AMDAL</span>
+            </div>
+        </button>
+    </div>
+    <div class="grid grid-cols-2 gap-3 mb-4" id="mobile-tabs-third">
+        <button class="mobile-tab group relative px-4 py-3 text-sm font-semibold rounded-xl bg-gray-200 text-gray-600 shadow-md transform transition-all duration-300 hover:scale-105 active:scale-95" data-service="Bulky Waste">
+            <div class="flex items-center justify-center space-x-2">
+                <i class="w-4 h-4 inline" data-lucide="box"></i>
+                <span>Bulky Waste</span>
+            </div>
+
+        </button>
+        <button class="mobile-tab group relative px-4 py-3 text-sm font-semibold rounded-xl bg-gray-200 text-gray-600 shadow-md transform transition-all duration-300 hover:scale-105 active:scale-95" data-service="Permohonan Informasi Publik">
+            <div class="flex items-center justify-center space-x-2">
+                <i class="w-4 h-4 inline" data-lucide="info"></i>
+                <span>Info Publik</span>
+            </div>
+
+        </button>
+    </div>
+    <div class="grid grid-cols-2 gap-3" id="mobile-tabs-bottom">
+        <button class="mobile-tab group relative px-4 py-3 text-sm font-semibold rounded-xl bg-gray-200 text-gray-600 shadow-md transform transition-all duration-300 hover:scale-105 active:scale-95" data-service="BPS-RW">
+            <div class="flex items-center justify-center space-x-2">
+                <LucideIcon Name="database" class="w-4 h-4 inline" />
+                <i class="w-4 h-4 inline" data-lucide="database"></i>
+                <span>BPS-RW</span>
+            </div>
+
+        </button>
+        <button class="mobile-tab group relative px-4 py-3 text-sm font-semibold rounded-xl bg-gray-200 text-gray-600 shadow-md transform transition-all duration-300 hover:scale-105 active:scale-95" data-service="Whistleblowing System">
+            <div class="flex items-center justify-center space-x-2">
+                 <i class="w-4 h-4 inline" data-lucide="shield-check"></i>
+                <span>Whistleblowing</span>
+            </div>
+
+        </button>
+    </div>
+</div>
+
+    <!-- Mobile Card Display -->
+    <div class="md:hidden mb-8">
+        <div class="bg-white rounded-lg shadow-lg overflow-hidden">
+            <div class="relative h-48">
+                <img src="/assets/images/home/jemput.jpg" alt="Penjemputan e-Waste" class="w-full h-full object-cover" id="mobile-service-image">
+                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
+                <div class="absolute bottom-4 left-4 right-4 text-white">
+                    <h3 class="text-xl font-bold mb-2" id="mobile-service-title">Penjemputan e-Waste</h3>
+                    <p class="text-white/90 text-sm" id="mobile-service-description">Layanan pengumpulan sampah elektronik.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Desktop Grid -->
+    <div class="hidden md:grid grid-cols-1 md:grid-cols-3 gap-8">
+        <!-- Kiri Mobile, Tengah desktop -->
+        <div class="md:col-span-1 md:order-2">
+            <div class="rounded-lg overflow-hidden shadow-lg h-full transform transition-all duration-300 hover:shadow-xl hover:-translate-y-2 relative group">
+                <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent z-10"></div>
+                <img src="/assets/images/home/jemput.jpg" alt="Penjemputan e-Waste" class="w-full object-cover h-full transition-transform duration-700 group-hover:scale-105">
+                <div class="absolute bottom-0 left-0 right-0 p-6 z-20 transition-all duration-300">
+                    <a href="#" class="block">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <p class="text-sm text-orange-300 font-medium mb-1">Telusuri</p>
+                                <h3 class="font-bold text-2xl text-white mb-2">Penjemputan e-Waste</h3>
+                                <p class="text-white/80 text-sm max-w-xs hidden group-hover:block transition-all duration-300">
+                                    Layanan pengumpulan sampah elektronik.
+                                </p>
+                            </div>
+                            <div class="bg-orange-500 p-3 rounded-full transform transition-all duration-300 group-hover:bg-orange-600 group-hover:-rotate-45">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+                                </svg>
+                            </div>
+                        </div>
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <!-- kiri desktop, keduua on mobile -->
+        <div class="flex flex-col gap-8 md:order-1">
+            <div class="flex flex-col service-item cursor-pointer">
+                <div class="flex flex-row items-center mb-4">
+                    <div>
+                        <div class="bg-orange-600 w-2 h-16 mr-4 rounded-full hidden"></div>
+                    </div>
+                    <div>
+                        <h2 class="text-2xl font-bold text-gray-400">Penjemputan e-Waste</h2>
+                        <p class="text-balance text-gray-400">Layanan pengumpulan sampah elektronik.</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex flex-col service-item cursor-pointer">
+                <h2 class="text-2xl font-bold text-gray-400">Uji Sampel Laboratorium</h2>
+                <p class="text-balance text-gray-400">Pengujian kualitas lingkungan hidup.</p>
+            </div>
+
+            <div class="flex flex-col service-item cursor-pointer">
+                <h2 class="text-2xl font-bold text-gray-400">Bus Toilet</h2>
+                <p class="text-balance text-gray-400">Fasilitas toilet keliling untuk kegiatan umum.</p>
+            </div>
+
+            <div class="flex flex-col service-item cursor-pointer">
+                <h2 class="text-2xl font-bold text-gray-400">AMDAL</h2>
+                <p class="text-balance text-gray-400">Proses Analisis Mengenai Dampak Lingkungan.</p>
+            </div>
+        </div>
+
+        <!-- kanan desktop, ketiga mobile -->
+        <div class="flex flex-col gap-8 md:order-3">
+            <div class="flex flex-col service-item cursor-pointer">
+                <h2 class="text-2xl font-bold text-gray-400">Bulky Waste</h2>
+                <p class="text-balance text-gray-400">Layanan khusus pengangkutan sampah besar.</p>
+            </div>
+
+            <div class="flex flex-col service-item cursor-pointer">
+                <h2 class="text-2xl font-bold text-gray-400">Permohonan Informasi Publik</h2>
+                <p class="text-balance text-gray-400">Saluran pengaduan pelanggaran lingkungan.</p>
+            </div>
+
+            <div class="flex flex-col service-item cursor-pointer">
+                <h2 class="text-2xl font-bold text-gray-400">BPS-RW</h2>
+                <p class="text-balance text-gray-400">Basis data lingkungan hidup tingkat Rukun Warga</p>
+            </div>
+
+            <div class="flex flex-col service-item cursor-pointer">
+                <h2 class="text-2xl font-bold text-gray-400">Whistleblowing System</h2>
+                <p class="text-balance text-gray-400">Sarana pelaporan pelanggaran terkait lingkungan</p>
+            </div>
+        </div>
+    </div>
+</section>
+
+<register-block dynamic-section="scripts" key="jsLayanan">
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+  const asset = (file) => `${window.assetBaseUrl}images/home/${file}`;
+
+  const serviceData = {
+    "Penjemputan e-Waste": {
+      image: asset("jemput.jpg"),
+      description: "Layanan pengumpulan sampah elektronik.",
+    },
+    "Uji Sampel Laboratorium": {
+      image: asset("lab.jpg"),
+      description: "Pengujian kualitas lingkungan hidup.",
+    },
+    "Bus Toilet": {
+      image: asset("lab.jpg"),
+      description: "Fasilitas toilet keliling untuk kegiatan umum.",
+    },
+    AMDAL: {
+      image: asset("lab.jpg"),
+      description: "Proses Analisis Mengenai Dampak Lingkungan.",
+    },
+    "Bulky Waste": {
+      image: asset("lab.jpg"),
+      description: "Layanan khusus pengangkutan sampah besar.",
+    },
+    "Permohonan Informasi Publik": {
+      image: asset("lab.jpg"),
+      description: "Saluran pengaduan pelanggaran lingkungan.",
+    },
+    "BPS-RW": {
+      image: asset("lab.jpg"),
+      description: "Basis data lingkungan hidup tingkat Rukun Warga",
+    },
+    "Whistleblowing System": {
+      image: asset("lab.jpg"),
+      description: "Sarana pelaporan pelanggaran terkait lingkungan",
+    },
+  };
+
+  const mobileTabs = document.querySelectorAll(".mobile-tab");
+  const mobileServiceImage = document.getElementById("mobile-service-image");
+  const mobileServiceTitle = document.getElementById("mobile-service-title");
+  const mobileServiceDescription = document.getElementById(
+    "mobile-service-description"
+  );
+
+  mobileTabs.forEach((tab) => {
+    tab.addEventListener("click", function () {
+      const serviceName = this.getAttribute("data-service");
+
+      mobileTabs.forEach((t) => {
+        t.classList.remove("bg-orange-500", "text-white");
+        t.classList.add("bg-gray-200", "text-gray-600");
+      });
+
+      this.classList.remove("bg-gray-200", "text-gray-600");
+      this.classList.add("bg-orange-500", "text-white");
+
+      if (serviceData[serviceName]) {
+        mobileServiceImage.src = serviceData[serviceName].image;
+        mobileServiceTitle.textContent = serviceName;
+        mobileServiceDescription.textContent =
+          serviceData[serviceName].description;
+      }
+    });
+  });
+
+  const serviceItems = Array.from(document.querySelectorAll(".service-item"));
+  const imageCard = document.querySelector(".md\\:col-span-1 .rounded-lg img");
+  const serviceTitle = document.querySelector(
+    ".md\\:col-span-1 .rounded-lg h3"
+  );
+  const cardContainer = document.querySelector(".md\\:col-span-1 .rounded-lg");
+
+  let activeService = "Penjemputan e-Waste";
+
+  const style = document.createElement("style");
+  style.innerHTML = `
+    .service-item {
+        position: relative;
+        transition: all 0.3s ease-in-out;
+        border-left: 0px solid #ed8936;
+        overflow: hidden;
+    }
+    .service-item::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 100%;
+        width: 0;
+        background-color: rgba(237, 137, 54, 0.1);
+        transition: width 0.3s ease-in-out;
+        z-index: -1;
+    }
+    .service-item.active::before {
+        width: 100%;
+    }
+    .service-item h2, .service-item p {
+        transition: all 0.3s ease-in-out;
+    }
+    .rounded-lg.overflow-hidden {
+        transition: transform 0.3s ease, box-shadow 0.3s ease;
+    }
+    .rounded-lg.overflow-hidden:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
+                    0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    }
+    .rounded-lg.overflow-hidden img {
+        transition: transform 0.6s ease;
+    }
+    .image-fade {
+        animation: imageFade 0.4s ease-in-out;
+    }
+    @@keyframes imageFade {
+        0% { opacity: 0.6; transform: scale(0.95); }
+        100% { opacity: 1; transform: scale(1); }
+    }
+  `;
+  document.head.appendChild(style);
+
+  function setActiveService(title) {
+    serviceItems.forEach((item) => {
+      const h2 = item.querySelector("h2");
+      const p = item.querySelector("p");
+      if (!h2 || !p) return;
+
+      const serviceName = h2.textContent.trim();
+
+      if (serviceName === title) {
+        item.classList.add("active");
+        item.style.borderLeft = "4px solid #ed8936";
+        item.style.paddingLeft = "1rem";
+
+        h2.classList.remove("text-gray-400");
+        h2.classList.add("text-black", "font-bold");
+
+        p.classList.remove("text-gray-400");
+        p.classList.add("text-gray-600");
+      } else {
+        item.classList.remove("active");
+        item.style.borderLeft = "none";
+        item.style.paddingLeft = "0";
+
+        h2.classList.add("text-gray-400");
+        h2.classList.remove("text-black", "font-bold");
+
+        p.classList.add("text-gray-400");
+        p.classList.remove("text-gray-600");
+      }
+    });
+
+    if (imageCard && serviceData[title]) {
+      imageCard.classList.add("image-fade");
+      imageCard.src = serviceData[title].image;
+      imageCard.alt = title;
+      setTimeout(() => imageCard.classList.remove("image-fade"), 400);
+    }
+
+    if (serviceTitle) {
+      serviceTitle.textContent = title;
+    }
+
+    activeService = title;
+  }
+
+  let autoplayInterval;
+  let isHovering = false;
+
+  serviceItems.forEach((item) => {
+    item.addEventListener("mouseenter", () => {
+      isHovering = true;
+      const h2 = item.querySelector("h2");
+      if (!h2) return;
+      const hoveredTitle = h2.textContent.trim();
+      if (serviceData[hoveredTitle]) setActiveService(hoveredTitle);
+    });
+
+    item.addEventListener("mouseleave", () => {
+      isHovering = false;
+    });
+  });
+
+  if (cardContainer) {
+    cardContainer.addEventListener("mouseenter", () => {
+      if (imageCard) imageCard.style.transform = "scale(1.05)";
+    });
+
+    cardContainer.addEventListener("mouseleave", () => {
+      if (imageCard) imageCard.style.transform = "scale(1)";
+    });
+  }
+
+  function startAutoplay() {
+    autoplayInterval = setInterval(() => {
+      if (!isHovering) {
+        const serviceNames = Object.keys(serviceData);
+        const currentIndex = serviceNames.indexOf(activeService);
+        const nextIndex = (currentIndex + 1) % serviceNames.length;
+        setActiveService(serviceNames[nextIndex]);
+      }
+    }, 4000);
+  }
+
+  setActiveService(activeService);
+  startAutoplay();
+});
+
+    </script>
+</register-block>

Views/Components/Home/_Slider.cshtml

@@ -0,0 +1,152 @@
+<div class="select-none w-full flex items-center justify-center py-8 overflow-x-hidden max-w-6xl mx-auto">
+    <div class="w-full text-center whitespace-nowrap flex flex-col md:flex-row items-center md:items-stretch justify-center gap-4 md:gap-6 px-4">
+        @* Item 1 *@
+        <div class="item w-[90vw] h-[18vh] rounded-2xl md:w-[22vw] md:h-[28vh] lg:w-[18vw] lg:h-[35vh] bg-center bg-cover bg-no-repeat inline-block cursor-pointer transition-all duration-1000 ease-out relative border-2 border-white/20 hover:border-white/40 overflow-hidden group shadow-lg hover:shadow-xl" style="background-image: url('@Url.Content("~/assets/images/home/bg-1.jpg")')">
+            <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent rounded-b-2xl"></div>
+            <div class="cover absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent rounded-2xl flex items-center justify-center backdrop-blur-[1px]">
+                <h3 class="title text-white text-lg md:text-xl font-bold transform md:-rotate-90 tracking-wider transition-all duration-500 group-hover:scale-110">DLH</h3>
+            </div>
+            <div class="absolute top-2 right-2 w-3 h-3 bg-green-700/60 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse"></div>
+            <div class="action-button absolute bottom-4 left-0 right-0 opacity-0 transition-all duration-500 flex items-center justify-center px-4">
+                <a href="#" class="bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-lg text-sm font-medium shadow-2xl backdrop-blur-sm border border-white/10">Telusuri</a>
+            </div>
+        </div>
+
+        @* Item 2 *@
+        <div class="item w-[90vw] h-[18vh] rounded-2xl md:w-[22vw] md:h-[28vh] lg:w-[18vw] lg:h-[35vh] bg-center bg-cover bg-no-repeat inline-block cursor-pointer transition-all duration-1000 ease-out relative border-2 border-white/20 hover:border-white/40 overflow-hidden group shadow-lg hover:shadow-xl" style="background-image: url('https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?auto=format&fit=crop&w=800&q=60')">
+            <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent rounded-b-2-2xl"></div>
+            <div class="cover absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent rounded-2xl flex items-center justify-center backdrop-blur-[1px]">
+                <h3 class="title text-white text-lg md:text-xl font-bold transform md:-rotate-90 tracking-wider transition-all duration-500 group-hover:scale-110">BPS-RW</h3>
+            </div>
+            <div class="absolute top-2 right-2 w-3 h-3 bg-green-700/60 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse"></div>
+            <div class="action-button absolute bottom-4 left-0 right-0 opacity-0 transition-all duration-500 flex items-center justify-center px-4">
+                <a href="#" class="bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-lg text-sm font-medium shadow-2xl backdrop-blur-sm border border-white/10">Telusuri</a>
+            </div>
+        </div>
+
+        @* Item 3 *@
+        <div class="item w-[90vw] h-[18vh] rounded-2xl md:w-[22vw] md:h-[28vh] lg:w-[18vw] lg:h-[35vh] bg-center bg-cover bg-no-repeat inline-block cursor-pointer transition-all duration-1000 ease-out relative border-2 border-white/20 hover:border-white/40 overflow-hidden group shadow-lg hover:shadow-xl" style="background-image: url('https://images.unsplash.com/photo-1531123897727-8f129e1688ce?auto=format&fit=crop&w=800&q=60')">
+            <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent rounded-b-2-2xl"></div>
+            <div class="cover absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent rounded-2xl flex items-center justify-center backdrop-blur-[1px]">
+                <h3 class="title text-white text-lg md:text-xl font-bold transform md:-rotate-90 tracking-wider transition-all duration-500 group-hover:scale-110">AMDAL</h3>
+            </div>
+            <div class="absolute top-2 right-2 w-3 h-3 bg-green-700/60 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse"></div>
+            <div class="action-button absolute bottom-4 left-0 right-0 opacity-0 transition-all duration-500 flex items-center justify-center px-4">
+                <a href="#" class="bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-lg text-sm font-medium shadow-2xl backdrop-blur-sm border border-white/10">Telusuri</a>
+            </div>
+        </div>
+    </div>
+</div>
+
+<register-block dynamic-section="scripts" key="jsSlider">
+<script>
+    // GSAP logic as received
+const items = document.querySelectorAll(".item");
+const covers = document.querySelectorAll(".cover");
+const actionButtons = document.querySelectorAll(".action-button");
+const isMobile = window.innerWidth <= 768;
+
+const expand = (item, i) => {
+  const cover = item.querySelector(".cover");
+  const button = item.querySelector(".action-button");
+
+  items.forEach((it, ind) => {
+    if (i === ind) return;
+    it.clicked = false;
+    const otherCover = it.querySelector(".cover");
+    const otherButton = it.querySelector(".action-button");
+
+    gsap.to(otherCover, { opacity: 1, duration: 0.8, ease: "power2.out" });
+    gsap.to(otherButton, {
+      opacity: 0,
+      y: 20,
+      duration: 0.5,
+      ease: "power2.out",
+    });
+    gsap.to(it, { scale: 1, rotationY: 0, duration: 0.8, ease: "power2.out" });
+  });
+
+  if (isMobile) {
+    gsap.to(items, {
+      height: item.clicked ? "18vh" : "12vh",
+      duration: 1.5,
+      ease: "elastic(1, .6)",
+    });
+
+    item.clicked = !item.clicked;
+    gsap.to(item, {
+      height: item.clicked ? "35vh" : "18vh",
+      duration: 2,
+      ease: "elastic(1, .3)",
+      scale: item.clicked ? 1.02 : 1,
+    });
+  } else {
+    gsap.to(items, {
+      width: item.clicked ? "18vw" : "12vw",
+      duration: 2,
+      ease: "elastic(1, .6)",
+    });
+
+    item.clicked = !item.clicked;
+    gsap.to(item, {
+      width: item.clicked ? "48vw" : "18vw",
+      duration: 2.5,
+      ease: "elastic(1, .3)",
+      scale: item.clicked ? 1.05 : 1,
+      rotationY: item.clicked ? 5 : 0,
+    });
+  }
+
+  gsap.to(cover, {
+    opacity: item.clicked ? 0 : 1,
+    duration: 0.8,
+    ease: "power2.out",
+  });
+
+  gsap.to(button, {
+    opacity: item.clicked ? 1 : 0,
+    y: item.clicked ? 0 : 20,
+    duration: item.clicked ? 0.8 : 0.5,
+    delay: item.clicked ? 0.3 : 0,
+    ease: "power2.out",
+  });
+};
+
+items.forEach((item, i) => {
+  item.clicked = false;
+  item.addEventListener("click", (e) => {
+    if (!e.target.closest(".action-button")) expand(item, i);
+  });
+
+  item.addEventListener("mouseenter", () => {
+    if (!item.clicked) {
+      gsap.to(item, { scale: 1.03, duration: 0.3, ease: "power2.out" });
+    }
+  });
+
+  item.addEventListener("mouseleave", () => {
+    if (!item.clicked) {
+      gsap.to(item, { scale: 1, duration: 0.3, ease: "power2.out" });
+    }
+  });
+});
+
+document.addEventListener("DOMContentLoaded", () => {
+  gsap.fromTo(
+    items,
+    { opacity: 0, y: 50, scale: 0.8 },
+    {
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      duration: 1,
+      stagger: 0.2,
+      ease: "back.out(1.7)",
+    }
+  );
+
+  setTimeout(() => expand(items[0], 0), 1200);
+});
+
+</script>
+</register-block>

Views/Components/Home/_Sosmed.cshtml

@@ -0,0 +1,78 @@
+<section class="relative w-full py-8 px-6 my-12">
+    <div class="absolute top-0 left-0 h-[600px] md:h-full w-full md:w-1/3 bg-orange-500 rounded-br-[30px] md:rounded-tr-[30px] md:rounded-br-[30px] -z-10"></div>
+
+    <div class="md:container md:max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-5 gap-6 items-center relative">
+
+        <!-- Left Content -->
+        <div class="text-white md:p-6 rounded-lg flex flex-col items-center md:items-start relative z-10 h-full justify-center">
+            <div>
+                <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-center md:text-left">Social Media</h2>
+                <p class="text-lg mb-8 text-center md:text-left">
+                    Ikuti akun resmi DLH untuk berita, edukasi, dan ajakan aksi lingkungan langsung dari sumber terpercaya.
+                </p>
+            </div>
+            <div class="w-full flex justify-center md:justify-start">
+                <img src="@Url.Content("~/assets/images/home/pancoran.svg")" alt="DLH Pancoran" class="max-w-full h-auto">
+            </div>
+        </div>
+
+        <!-- Right Content - Social Media Posts Grid -->
+        <div class="col-span-4 grid grid-cols-1 md:grid-cols-4 gap-6 relative z-10">
+            <!-- Instagram Post 1 -->
+            <div class="w-full max-w-[280px] h-[400px] overflow-hidden rounded-lg shadow-lg border border-gray-200 mx-auto">
+                <blockquote
+                    class="instagram-media"
+                    data-instgrm-captioned
+                    data-instgrm-permalink="https://www.instagram.com/p/DBtPIcETJjm/?utm_source=ig_embed&amp;utm_campaign=loading"
+                    data-instgrm-version="14"
+                    style="background:#FFF; border:0; border-radius:8px; box-shadow:none; margin:0; max-width:100%; min-width:100%; height:100%; width:100%;">
+                </blockquote>
+            </div>
+
+            <!-- Instagram Post 2 -->
+            <div class="w-full max-w-[280px] h-[400px] overflow-hidden rounded-lg shadow-lg border border-gray-200 mx-auto">
+                <blockquote
+                    class="instagram-media"
+                    data-instgrm-captioned
+                    data-instgrm-permalink="https://www.instagram.com/p/DEzFYTwpJDW/?utm_source=ig_embed&amp;utm_campaign=loading"
+                    data-instgrm-version="14"
+                    style="background:#FFF; border:0; border-radius:8px; box-shadow:none; margin:0; max-width:100%; min-width:100%; height:100%; width:100%;">
+                </blockquote>
+            </div>
+
+            <!-- Twitter Post -->
+            <div class="w-full max-w-[280px] h-[400px] overflow-hidden rounded-lg shadow-lg border border-gray-200 bg-white mx-auto">
+                <blockquote class="twitter-tweet" data-theme="light" data-width="100%" style="height:100%; border:0; margin:0;">
+                    <a href="https://twitter.com/dinaslhdki/status/1884521645173596375?ref_src=twsrc%5Etfw">January 29, 2025</a>
+                </blockquote>
+            </div>
+
+            <!-- TikTok Post -->
+            <div class="w-full max-w-[280px] h-[400px] overflow-hidden rounded-lg shadow-lg border border-gray-200 mx-auto">
+                <blockquote
+                    class="tiktok-embed"
+                    cite="https://www.tiktok.com/@@dinaslhdki/video/7332309253337746694"
+                    data-video-id="7332309253337746694"
+                    style="max-width:100%; min-width:100%; height:100%; margin:0; border:0; border-radius:8px;">
+                    <section>
+                        <a target="_blank" title="@@dinaslhdki" href="https://www.tiktok.com/@@dinaslhdki?refer=embed">@@dinaslhdki</a>
+                        Street Sweeper Electric⚡️ Peluncuran Street sweeper Electric, menyapu dan menyedot sampah ke dalam bak tahan karat dengan teknologi mesin yang lebih ramah lingkungan☘️
+                        <a title="suksesjakartauntukindonesia" target="_blank" href="https://www.tiktok.com/tag/suksesjakartauntukindonesia?refer=embed">#SuksesJakartaUntukIndonesia</a>
+                        <a title="kurangipilaholah" target="_blank" href="https://www.tiktok.com/tag/kurangipilaholah?refer=embed">#KurangiPilahOlah</a>
+                        <a title="roadsweeperelectric" target="_blank" href="https://www.tiktok.com/tag/roadsweeperelectric?refer=embed">#RoadSweeperElectric</a>
+                    </section>
+                </blockquote>
+            </div>
+        </div>
+    </div>
+</section>
+
+<register-block dynamic-section="css" key="cssSosmed">
+
+</register-block>
+
+<register-block dynamic-section="scripts" key="jsSosmed">
+<script async src="https://www.instagram.com/embed.js"></script>
+<script async src="https://platform.twitter.com/widgets.js"></script>
+<script async src="https://www.tiktok.com/embed.js"></script>
+</register-block>

Views/Components/Home/_Website.cshtml

@@ -0,0 +1,285 @@
+<div class="relative bg-gradient-to-br from-amber-600 via-amber-700 to-orange-600 py-16 md:py-24 min-h-screen">
+    <div class="container mx-auto px-4 max-w-7xl">
+        <!-- Heading Section -->
+        <div class="text-center text-white mb-16">
+            <h2 class="text-4xl md:text-5xl font-bold mb-6">
+                Layanan Digital
+            </h2>
+            <p class="max-w-3xl mx-auto text-lg md:text-xl leading-relaxed text-amber-50">
+                Beragam layanan DLH DKI Jakarta, dari pengelolaan sampah, pengujian lingkungan, hingga pengaduan pelanggaran untuk Jakarta yang lebih hijau.
+            </p>
+        </div>
+
+        <!-- Three Laptops Display -->
+        <div class="relative max-w-6xl mx-auto">
+            <div class="grid grid-cols-3 gap-6 mb-12">
+                <!-- Website Image 1 -->
+                <div class="website-item" data-index="0">
+                    <img src="/assets/images/home/skl.png" alt="Sistem Ketaatan Lingkungan" class="w-full h-auto object-contain cursor-pointer hover:scale-105 transition-transform duration-300">
+                </div>
+
+                <!-- Website Image 2 -->
+                <div class="website-item active" data-index="1">
+                    <img src="/assets/images/home/skl.png" alt="Jakarta Lingko" class="w-full h-auto object-contain cursor-pointer hover:scale-105 transition-transform duration-300">
+                </div>
+
+                <!-- Website Image 3 -->
+                <div class="website-item" data-index="2">
+                    <img src="/assets/images/home/skl.png" alt="Lingkungan Jakarta" class="w-full h-auto object-contain cursor-pointer hover:scale-105 transition-transform duration-300">
+                </div>
+            </div>
+
+            <!-- Featured URL Display -->
+            <div class="relative mx-auto max-w-md mb-8">
+                <div class="bg-white/95 backdrop-blur-sm flex items-center rounded-2xl overflow-hidden shadow-2xl border border-white/20">
+                    <div class="flex items-center px-4 py-1">
+                        <div class="flex space-x-2">
+                            <div class="w-3 h-3 rounded-full bg-red-500"></div>
+                            <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+                            <div class="w-3 h-3 rounded-full bg-green-500"></div>
+                        </div>
+                    </div>
+                    <input type="text" id="urlDisplay" value="jaklingko.jakarta.go.id" class="flex-1 py-4 px-4 text-gray-800 focus:outline-none font-medium bg-transparent" readonly>
+                    <button class="bg-gradient-to-r from-amber-600 to-orange-600 p-4 hover:from-amber-700 hover:to-orange-700 transition-all duration-300">
+                        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Enhanced Indicators -->
+            <div class="flex justify-center space-x-4" id="indicators">
+                <button class="indicator group relative" data-slide="0">
+                    <div class="w-12 h-3 rounded-full bg-white/30 group-hover:bg-white/50 transition-all duration-300"></div>
+                    <span class="absolute -bottom-6 left-1/2 transform -translate-x-1/2 text-white/70 text-xs font-medium opacity-0 group-hover:opacity-100 transition-opacity">SKL</span>
+                </button>
+                <button class="indicator group relative active" data-slide="1">
+                    <div class="w-12 h-3 rounded-full bg-white group-hover:bg-white transition-all duration-300"></div>
+                    <span class="absolute -bottom-6 left-1/2 transform -translate-x-1/2 text-white text-xs font-medium">Lingko</span>
+                </button>
+                <button class="indicator group relative" data-slide="2">
+                    <div class="w-12 h-3 rounded-full bg-white/30 group-hover:bg-white/50 transition-all duration-300"></div>
+                    <span class="absolute -bottom-6 left-1/2 transform -translate-x-1/2 text-white/70 text-xs font-medium opacity-0 group-hover:opacity-100 transition-opacity">Lingkungan</span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<register-block dynamic-section="css" key="cssWebsite">
+    <style>
+    .laptop-screen {
+  border-radius: 8px 8px 0 0;
+  border: 3px solid #374151;
+  background: #1f2937;
+}
+
+.laptop-base {
+  position: relative;
+}
+
+.laptop-base::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 60px;
+  height: 8px;
+  background: #9ca3af;
+  border-radius: 4px;
+}
+
+.website-slide {
+  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.carousel-container {
+  perspective: 1000px;
+}
+
+.website-card {
+  transition: all 0.4s ease-in-out;
+  cursor: pointer;
+}
+
+.website-card:hover {
+  transform: translateY(-10px) scale(1.02);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+}
+
+.website-card.active {
+  transform: scale(1.05);
+  z-index: 10;
+}
+
+.laptop-frame {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 12px;
+  padding: 8px;
+}
+
+.screen-content {
+  border-radius: 8px;
+  overflow: hidden;
+  background: #000;
+}
+
+    </style>
+</register-block>
+
+<register-block dynamic-section="scripts" key="jsWebsite">
+  <script>
+        document.addEventListener("DOMContentLoaded", function () {
+  const asset = (file) => `${window.assetBaseUrl}images/home/${file}`;
+  // Website data configuration
+  const websites = [
+    {
+      image: asset("skl.png"),
+      url: "wasdal.jakarta.go.id",
+      title: "Sistem Ketaatan Lingkungan",
+    },
+    {
+      image: asset("bps.png"),
+      url: "jaklingko.jakarta.go.id",
+      title: "Jakarta Lingko",
+    },
+    {
+      image: asset("bps.png"),
+      url: "lingkungan.jakarta.go.id",
+      title: "Lingkungan Jakarta",
+    },
+    {
+      image: asset("bps.png"),
+      url: "lingkungan.jakarta.go.id",
+      title: "Lingkungan Jakarta",
+    },
+    {
+      image: asset("bps.png"),
+      url: "lingkungan.jakarta.go.id",
+      title: "Lingkungan Jakarta",
+    },
+    {
+      image: asset("bps.png"),
+      url: "lingkungan.jakarta.go.id",
+      title: "Lingkungan Jakarta",
+    },
+    {
+      image: asset("bps.png"),
+      url: "lingkungan.jakarta.go.id",
+      title: "Lingkungan Jakarta",
+    },
+    {
+      image: asset("bps.png"),
+      url: "lingkungan.jakarta.go.id",
+      title: "Lingkungan Jakarta",
+    },
+  ];
+
+  // DOM Elements
+  const urlInput = document.getElementById("urlDisplay");
+  const websiteCards = document.querySelectorAll(".website-card");
+  const indicators = document.querySelectorAll(".indicator");
+
+  let currentIndex = 1; // Start with middle card active
+  let autoRotateInterval;
+
+  // Update active states
+  function updateActiveStates() {
+    // Update cards
+    websiteCards.forEach((card, index) => {
+      if (index === currentIndex) {
+        card.classList.add("active");
+      } else {
+        card.classList.remove("active");
+      }
+    });
+
+    // Update indicators
+    indicators.forEach((indicator, index) => {
+      if (index === currentIndex) {
+        indicator.classList.add("active");
+        indicator.querySelector("div").classList.remove("bg-white/30");
+        indicator.querySelector("div").classList.add("bg-white");
+        indicator
+          .querySelector("span")
+          .classList.remove("opacity-0", "text-white/70");
+        indicator.querySelector("span").classList.add("text-white");
+      } else {
+        indicator.classList.remove("active");
+        indicator.querySelector("div").classList.remove("bg-white");
+        indicator.querySelector("div").classList.add("bg-white/30");
+        indicator
+          .querySelector("span")
+          .classList.add("opacity-0", "text-white/70");
+        indicator.querySelector("span").classList.remove("text-white");
+      }
+    });
+
+    // Update URL
+    if (websites[currentIndex]) {
+      urlInput.value = websites[currentIndex].url;
+    }
+  }
+
+  // Navigate to specific slide
+  function navigateToSlide(targetIndex) {
+    if (targetIndex === currentIndex) return;
+    currentIndex = targetIndex;
+    updateActiveStates();
+  }
+
+  // Auto-rotate functionality
+  function startAutoRotate() {
+    autoRotateInterval = setInterval(() => {
+      currentIndex = (currentIndex + 1) % websites.length;
+      updateActiveStates();
+    }, 4000);
+  }
+
+  function stopAutoRotate() {
+    if (autoRotateInterval) {
+      clearInterval(autoRotateInterval);
+      autoRotateInterval = null;
+    }
+  }
+
+  function resetAutoRotate() {
+    stopAutoRotate();
+    setTimeout(startAutoRotate, 6000);
+  }
+
+  // Event listeners
+  websiteCards.forEach((card, index) => {
+    card.addEventListener("click", () => {
+      resetAutoRotate();
+      navigateToSlide(index);
+    });
+  });
+
+  indicators.forEach((indicator, index) => {
+    indicator.addEventListener("click", () => {
+      resetAutoRotate();
+      navigateToSlide(index);
+    });
+  });
+
+  // Mouse events for auto-rotate control
+  const container = document.querySelector(".max-w-6xl");
+  container.addEventListener("mouseenter", stopAutoRotate);
+  container.addEventListener("mouseleave", () => {
+    if (!autoRotateInterval) {
+      startAutoRotate();
+    }
+  });
+
+  // Initialize
+  updateActiveStates();
+  startAutoRotate();
+});
+
+    </script>
+
+    
+</register-block>

Views/Home/Index.cshtml

@@ -0,0 +1,19 @@
+@{
+    Layout = "_Layout";
+
+    ViewData["Title"] = "Website Resmi - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["Description"] = "Website Resmi - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["Keywords"] = "Website Resmi, DLH, Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["OgTitle"] = "Website Resmi - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["OgDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["TwitterTitle"] = "Website Resmi - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["TwitterDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
+}
+
+    <partial name="~/Views/Components/Home/_Slider.cshtml" />
+    <partial name="~/Views/Components/Home/_Layanan.cshtml" />
+    <partial name="~/Views/Components/Home/_Informasi.cshtml" />
+    <partial name="~/Views/Components/Home/_Website.cshtml" />
+    <partial name="~/Views/Components/Home/_Berita.cshtml" />
+    @* <partial name="~/Views/Components/Home/_Video.cshtml" /> *@
+    <partial name="~/Views/Components/Home/_Sosmed.cshtml" />

Views/Home/Privacy.cshtml

@@ -0,0 +1,6 @@
+@{
+    ViewData["Title"] = "Privacy Policy";
+}
+<h1>@ViewData["Title"]</h1>
+
+<p>Use this page to detail your site's privacy policy.</p>

Views/Profil/Bidang.cshtml

@@ -0,0 +1,445 @@
+@{
+    Layout = "_Layout";
+
+    ViewData["Title"] = "Bidang, Suku Dinas dan UPT - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["Description"] = "Bidang, Suku Dinas dan UPT - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["Keywords"] = "Bidang, Suku Dinas dan UPT, DLH, Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["OgTitle"] = "Bidang, Suku Dinas dan UPT - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["OgDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["TwitterTitle"] = "Bidang, Suku Dinas dan UPT - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["TwitterDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
+
+    // Breadcumb
+    ViewData["BreadcrumbText"] = "Bidang, Suku Dinas dan UPT";
+    ViewData["TitleBeforeHighlight"] = "Bidang, Suku Dinas";
+    ViewData["TitleHighlight"] = "dan UPT";
+}
+    <!-- Breadcumb -->
+    <partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />
+
+    <!-- Content Section -->
+<section class="container mx-auto px-6 lg:px-12 py-16">
+  <div class="max-w-6xl mx-auto space-y-12">
+    <!-- Accordion Container -->
+    <div class="bg-white rounded-3xl shadow-2xl p-8 lg:p-12 border border-gray-100 space-y-4">
+      <!-- Main Accordion Container -->
+      <div class="accordion" id="mainAccordion">
+        <!-- Sekretariat Dinas Lingkungan Hidup -->
+        <div class="border border-gray-200 rounded-xl overflow-hidden mb-4">
+          <button
+            class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-red-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between"
+            onclick="toggleAccordion('sekretariat')"
+          >
+            <div class="flex items-center space-x-3">
+              <i class="text-orange-600" data-lucide="building-2"></i>
+              <h3 class="text-lg font-semibold text-gray-800">Sekretariat Dinas Lingkungan Hidup</h3>
+            </div>
+            <i class="text-gray-600 transition-transform duration-200" data-lucide="chevron-down" id="iconsekretariat"></i>
+          </button>
+          <div id="sekretariat" class="px-6 py-4 bg-white">
+            <p class="text-gray-700 leading-relaxed text-md mb-6">
+              Sekretariat Dinas Lingkungan Hidup mempunyai tugas menyelenggarakan kesekretariatan di lingkungan Dinas Lingkungan Hidup.
+            </p>
+            <div class="mt-4">
+              <h4 class="font-semibold text-gray-800 mb-3">Fungsi:</h4>
+              <ul class="space-y-2">
+                <li class="flex items-start space-x-2">
+                  <div
+                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
+                  >
+                    <i data-lucide="check" class="w-3 h-3"></i>
+                  </div>
+                  <span class="text-gray-700">
+                    Pengoordinasian penyusunan rencana strategis, rencana kerja, dan anggaran Dinas Lingkungan Hidup
+                  </span>
+                </li>
+                <li class="flex items-start space-x-2">
+                  <div
+                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
+                  >
+                    <i data-lucide="check" class="w-3 h-3"></i>
+                  </div>
+                  <span class="text-gray-700">Pengelolaan kepegawaian, keuangan, dan barang Dinas Lingkungan Hidup</span>
+                </li>
+                <li class="flex items-start space-x-2">
+                  <div
+                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
+                  >
+                    <i data-lucide="check" class="w-3 h-3"></i>
+                  </div>
+                  <span class="text-gray-700">Pelaksanaan kegiatan ketatausahaan dan kerumahtanggaan Dinas Lingkungan Hidup</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <!-- Bidang Tata Lingkungan -->
+        <div class="border border-gray-200 rounded-xl overflow-hidden mb-4">
+          <button
+            class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-red-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between"
+            onclick="toggleAccordion('tataLingkungan')"
+          >
+            <div class="flex items-center space-x-3">
+              <i class="text-orange-600" data-lucide="leaf"></i>
+              <h3 class="text-lg font-semibold text-gray-800">Bidang Tata Lingkungan</h3>
+            </div>
+            <i
+              class="text-gray-600 transition-transform duration-200"
+              data-lucide="chevron-down"
+              id="icontataLingkungan"
+            ></i>
+          </button>
+          <div id="tataLingkungan" class="hidden px-6 py-4 bg-white">
+            <p class="text-gray-700 leading-relaxed text-md mb-6">
+              Bidang Tata Lingkungan merupakan unit kerja lini Dinas Lingkungan Hidup mempunyai tugas melaksanakan perencanaan lingkungan, kajian dampak lingkungan, dan pemeliharaan lingkungan.
+            </p>
+            <div class="mt-4">
+              <h4 class="font-semibold text-gray-800 mb-3">Fungsi:</h4>
+              <ul class="space-y-2">
+                <li class="flex items-start space-x-2">
+                  <div
+                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
+                  >
+                    <i data-lucide="check" class="w-3 h-3"></i>
+                  </div>
+                  <span class="text-gray-700">Penyusunan Rencana Strategis dan Rencana Kerja dan Anggaran Bidang Tata Lingkungan</span>
+                </li>
+                <li class="flex items-start space-x-2">
+                  <div
+                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
+                  >
+                    <i data-lucide="check" class="w-3 h-3"></i>
+                  </div>
+                  <span class="text-gray-700">Pelaksanaan Rencana Strategis dan Dokumen Pelaksanaan Anggaran Bidang Tata Lingkungan</span>
+                </li>
+                <li class="flex items-start space-x-2">
+                  <div
+                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
+                  >
+                    <i data-lucide="check" class="w-3 h-3"></i>
+                  </div>
+                  <span class="text-gray-700">
+                    Penyusunan bahan kebijakan, pedoman dan standar perencanaan lingkungan, kajian dampak lingkungan, dan pemeliharaan lingkungan
+                  </span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <!-- Bidang Pengelolaan Sampah dan Limbah B3 -->
+        <div class="border border-gray-200 rounded-xl overflow-hidden mb-4">
+          <button
+            class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-red-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between"
+            onclick="toggleAccordion('sampahLimbah')"
+          >
+            <div class="flex items-center space-x-3">
+              <i class="text-orange-600" data-lucide="recycle"></i>
+              <h3 class="text-lg font-semibold text-gray-800">Bidang Pengelolaan Sampah dan Limbah B3</h3>
+            </div>
+            <i class="text-gray-600 transition-transform duration-200" data-lucide="chevron-down" id="iconsampahLimbah"></i>
+          </button>
+          <div id="sampahLimbah" class="hidden px-6 py-4 bg-white">
+            <p class="text-gray-700 leading-relaxed text-md mb-6">
+              Bidang Pengelolaan Sampah dan Limbah B3 mempunyai tugas melaksanakan Pengelolaan Sampah, pengelolaan Limbah B3, dan pengembangan fasilitas teknis.
+            </p>
+            <div class="mt-4">
+              <h4 class="font-semibold text-gray-800 mb-3">Fungsi:</h4>
+              <ul class="space-y-2">
+                <li class="flex items-start space-x-2">
+                  <div
+                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
+                  >
+                    <i data-lucide="check" class="w-3 h-3"></i>
+                  </div>
+                  <span class="text-gray-700">
+                    Penyusunan bahan Rencana Strategis dan Rencana Kerja dan Anggaran Bidang Pengelolaan Sampah dan Limbah B3
+                  </span>
+                </li>
+                <li class="flex items-start space-x-2">
+                  <div
+                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
+                  >
+                    <i data-lucide="check" class="w-3 h-3"></i>
+                  </div>
+                  <span class="text-gray-700">Pelaksanaan Rencana Strategis dan Dokumen Pelaksanaan Anggaran Bidang Pengelolaan Sampah dan Limbah B3</span>
+                </li>
+                <li class="flex items-start space-x-2">
+                  <div
+                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
+                  >
+                    <i data-lucide="check" class="w-3 h-3"></i>
+                  </div>
+                  <span class="text-gray-700">Pengelolaan sampah dan limbah B3 serta pengembangan fasilitas teknis pengelolaan</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <!-- Bidang Pengendalian Pencemaran dan Kerusakan Lingkungan -->
+        <div class="border border-gray-200 rounded-xl overflow-hidden mb-4">
+          <button
+            class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-red-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between"
+            onclick="toggleAccordion('pengendalianPencemaran')"
+          >
+            <div class="flex items-center space-x-3">
+              <i class="text-orange-600" data-lucide="shield"></i>
+              <h3 class="text-lg font-semibold text-gray-800">Bidang Pengendalian Pencemaran dan Kerusakan Lingkungan</h3>
+            </div>
+            <i
+              class="text-gray-600 transition-transform duration-200"
+              data-lucide="chevron-down"
+              id="iconpengendalianPencemaran"
+            ></i>
+          </button>
+          <div id="pengendalianPencemaran" class="hidden px-6 py-4 bg-white">
+            <p class="text-gray-700 leading-relaxed text-md mb-6">
+              Bidang Pengendalian Pencemaran dan Kerusakan Lingkungan mempunyai tugas melaksanakan pemantauan lingkungan, penanggulangan pencemaran lingkungan, dan penanggulangan kerusakan lingkungan.
+            </p>
+            <div class="mt-4">
+              <h4 class="font-semibold text-gray-800 mb-3">Fungsi:</h4>
+              <ul class="space-y-2">
+                <li class="flex items-start space-x-2">
+                  <div
+                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
+                  >
+                    <i data-lucide="check" class="w-3 h-3"></i>
+                  </div>
+                  <span class="text-gray-700">
+                    Penyusunan Rencana Strategis dan Rencana Kerja dan Anggaran Bidang Pengendalian Pencemaran dan Kerusakan Lingkungan
+                  </span>
+                </li>
+                <li class="flex items-start space-x-2">
+                  <div
+                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
+                  >
+                    <i data-lucide="check" class="w-3 h-3"></i>
+                  </div>
+                  <span class="text-gray-700">Pelaksanaan Rencana Strategis dan Dokumen Pelaksanaan Anggaran Bidang Pengendalian Pencemaran dan Kerusakan Lingkungan</span>
+                </li>
+                <li class="flex items-start space-x-2">
+                  <div
+                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
+                  >
+                    <i data-lucide="check" class="w-3 h-3"></i>
+                  </div>
+                  <span class="text-gray-700">
+                    Penyusunan regulasi dan kebijakan teknis pemantauan kualitas lingkungan, pencegahan pencemaran dan/atau kerusakan lingkungan hidup
+                  </span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <!-- Suku Dinas Section -->
+        <div class="border border-gray-200 rounded-xl overflow-hidden mb-4">
+          <button
+            class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-red-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between"
+            onclick="toggleAccordion('sukuDinas')"
+          >
+            <div class="flex items-center space-x-3">
+              <i class="text-orange-600" data-lucide="building"></i>
+              <h3 class="text-lg font-semibold text-gray-800">Suku Dinas Lingkungan Hidup</h3>
+            </div>
+            <i class="text-gray-600 transition-transform duration-200" data-lucide="chevron-down" id="iconsukuDinas"></i>
+          </button>
+          <div id="sukuDinas" class="hidden px-6 py-4 bg-white">
+            <p class="text-gray-700 leading-relaxed text-md mb-6">
+              Dinas Lingkungan Hidup Provinsi DKI Jakarta membawahi 5 (lima) wilayah Suku Dinas Lingkungan Hidup Kota Administrasi dan 1 (satu) Kabupaten Administrasi.
+            </p>
+
+            <h4 class="font-semibold text-gray-800 mb-3 mt-4">Suku Dinas Lingkungan Hidup Kota Administrasi</h4>
+            <p class="text-gray-700 mb-4">
+              Suku Dinas Lingkungan Hidup Kota Administrasi mempunyai tugas menyelenggarakan urusan pemerintahan bidang lingkungan hidup dan urusan pemerintahan bidang pekerjaan umum dan penataan ruang pada sub urusan persampahan di Kota Administrasi.
+            </p>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+              <div
+                class="bg-gradient-to-r from-green-50 to-teal-50 rounded-lg p-4 border border-green-100"
+              >
+                <h5 class="font-semibold text-gray-800 flex items-center">
+                  <i data-lucide="map-pin" class="w-4 h-4 mr-2 text-green-600"></i>
+                  Jakarta Pusat
+                </h5>
+                <p class="text-sm text-gray-600 mt-1">Suku Dinas Lingkungan Hidup Kota Administrasi Jakarta Pusat</p>
+              </div>
+
+              <div
+                class="bg-gradient-to-r from-green-50 to-teal-50 rounded-lg p-4 border border-green-100"
+              >
+                <h5 class="font-semibold text-gray-800 flex items-center">
+                  <i data-lucide="map-pin" class="w-4 h-4 mr-2 text-green-600"></i>
+                  Jakarta Utara
+                </h5>
+                <p class="text-sm text-gray-600 mt-1">Jl. Alur Laut 9, RT.9/RW.5, Rawabadak Sel., Kec. Koja, Jakarta Utara</p>
+              </div>
+
+              <div
+                class="bg-gradient-to-r from-green-50 to-teal-50 rounded-lg p-4 border border-green-100"
+              >
+                <h5 class="font-semibold text-gray-800 flex items-center">
+                  <i data-lucide="map-pin" class="w-4 h-4 mr-2 text-green-600"></i>
+                  Jakarta Timur
+                </h5>
+                <p class="text-sm text-gray-600 mt-1">Pinang Ranti, Kec. Makasar, Kota Jakarta Timur</p>
+              </div>
+
+              <div
+                class="bg-gradient-to-r from-green-50 to-teal-50 rounded-lg p-4 border border-green-100"
+              >
+                <h5 class="font-semibold text-gray-800 flex items-center">
+                  <i data-lucide="map-pin" class="w-4 h-4 mr-2 text-green-600"></i>
+                  Jakarta Barat
+                </h5>
+                <p class="text-sm text-gray-600 mt-1">Jl. Perdana No.2 8, RT.1/RW.4, Wijaya Kusuma, Kec. Grogol Petamburan</p>
+              </div>
+
+              <div
+                class="bg-gradient-to-r from-green-50 to-teal-50 rounded-lg p-4 border border-green-100"
+              >
+                <h5 class="font-semibold text-gray-800 flex items-center">
+                  <i data-lucide="map-pin" class="w-4 h-4 mr-2 text-green-600"></i>
+                  Jakarta Selatan
+                </h5>
+                <p class="text-sm text-gray-600 mt-1">Jl. Hj. Tutty Alawiyah No.41, RT.2/RW.5, Kalibata, Kec. Pancoran</p>
+              </div>
+
+              <div
+                class="bg-gradient-to-r from-green-50 to-teal-50 rounded-lg p-4 border border-green-100"
+              >
+                <h5 class="font-semibold text-gray-800 flex items-center">
+                  <i data-lucide="map-pin" class="w-4 h-4 mr-2 text-green-600"></i>
+                  Kepulauan Seribu
+                </h5>
+                <p class="text-sm text-gray-600 mt-1">Kab. Administrasi Kepulauan Seribu, DKI Jakarta</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- UPT Section -->
+        <div class="border border-gray-200 rounded-xl overflow-hidden mb-4">
+          <button
+            class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-red-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between"
+            onclick="toggleAccordion('upt')"
+          >
+            <div class="flex items-center space-x-3">
+              <i class="text-orange-600" data-lucide="wrench"></i>
+              <h3 class="text-lg font-semibold text-gray-800">Unit Pelaksana Teknis</h3>
+            </div>
+            <i class="text-gray-600 transition-transform duration-200" data-lucide="chevron-down" id="iconupt"></i>
+          </button>
+          <div id="upt" class="hidden px-6 py-4 bg-white">
+            <!-- Nested sections for UPTs -->
+            <div class="space-y-6">
+              <!-- Laboratorium Lingkungan Hidup Daerah -->
+              <div class="bg-gray-50 rounded-lg p-5 border border-gray-200">
+                <h4 class="font-semibold text-gray-800 mb-3 flex items-center">
+                  <i data-lucide="flask" class="w-5 h-5 mr-2 text-orange-600"></i>
+                  Laboratorium Lingkungan Hidup Daerah
+                </h4>
+                <p class="text-gray-700 mb-4">
+                  Laboratorium Lingkungan Hidup Daerah mempunyai tugas melaksanakan pengambilan contoh uji, pengujian, dan analisis lingkungan secara laboratoris.
+                </p>
+                <div class="mt-3">
+                  <h5 class="font-medium text-gray-800 mb-2">Tugas dan Fungsi:</h5>
+                  <ul class="space-y-1">
+                    <li class="flex items-start space-x-2">
+                      <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i>
+                      <span class="text-sm text-gray-700">Melaksanakan pengambilan sampel uji pengujian dan analisa lingkungan</span>
+                    </li>
+                    <li class="flex items-start space-x-2">
+                      <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i>
+                      <span class="text-sm text-gray-700">Melakukan pemantauan kualitas air dan udara</span>
+                    </li>
+                    <li class="flex items-start space-x-2">
+                      <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i>
+                      <span class="text-sm text-gray-700">Menyediakan data dan informasi kualitas lingkungan</span>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+
+              <!-- Unit Penanganan Sampah Badan Air -->
+              <div class="bg-gray-50 rounded-lg p-5 border border-gray-200">
+                <h4 class="font-semibold text-gray-800 mb-3 flex items-center">
+                  <i data-lucide="droplet" class="w-5 h-5 mr-2 text-orange-600"></i>
+                  Unit Penanganan Sampah Badan Air
+                </h4>
+                <p class="text-gray-700 mb-4">
+                  Unit Penanganan Sampah Badan Air mempunyai tugas melaksanakan penanganan sampah di badan air.
+                </p>
+                <div class="mt-3">
+                  <h5 class="font-medium text-gray-800 mb-2">Tugas dan Fungsi:</h5>
+                  <ul class="space-y-1">
+                    <li class="flex items-start space-x-2">
+                      <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i>
+                      <span class="text-sm text-gray-700">Melaksanakan pengelolaan sampah di badan air</span>
+                    </li>
+                    <li class="flex items-start space-x-2">
+                      <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i>
+                      <span class="text-sm text-gray-700">Melakukan pemeliharaan kebersihan badan air</span>
+                    </li>
+                    <li class="flex items-start space-x-2">
+                      <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i>
+                      <span class="text-sm text-gray-700">Mengelola sarana dan prasarana kebersihan badan air</span>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+
+              <!-- Unit Pengelola Sampah Terpadu -->
+              <div class="bg-gray-50 rounded-lg p-5 border border-gray-200">
+                <h4 class="font-semibold text-gray-800 mb-3 flex items-center">
+                  <i data-lucide="recycle" class="w-5 h-5 mr-2 text-orange-600"></i>
+                  Unit Pengelola Sampah Terpadu
+                </h4>
+                <p class="text-gray-700 mb-4">
+                  Unit Pengelola Sampah Terpadu mempunyai tugas melaksanakan Pengelolaan Sampah secara terpadu.
+                </p>
+                <div class="mt-3">
+                  <h5 class="font-medium text-gray-800 mb-2">Tugas dan Fungsi:</h5>
+                  <ul class="space-y-1">
+                    <li class="flex items-start space-x-2">
+                      <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i>
+                      <span class="text-sm text-gray-700">Pengelolaan dan pelaksanaan kegiatan pengangkutan sampah di tempat pengolahan sampah terpadu</span>
+                    </li>
+                    <li class="flex items-start space-x-2">
+                      <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i>
+                      <span class="text-sm text-gray-700">Pengaturan dan pelaksanaan kegiatan pengelolaan sampah di tempat pengolahan sampah terpadu</span>
+                    </li>
+                    <li class="flex items-start space-x-2">
+                      <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i>
+                      <span class="text-sm text-gray-700">Penyusunan pedoman, standar dan prosedur teknis Unit Pengelola Sampah Terpadu</span>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div> <!-- End mainAccordion -->
+    </div>
+  </div>
+</section>
+
+
+    <register-block dynamic-section="scripts" key="jsProgramUdara">
+        <script>
+            function toggleAccordion(accordionId) {
+                const accordion = document.getElementById(accordionId);
+                const icon = document.getElementById('icon' + accordionId.slice(-1));
+                
+                if (accordion.classList.contains('hidden')) {
+                    accordion.classList.remove('hidden');
+                    icon.style.transform = 'rotate(180deg)';
+                } else {
+                    accordion.classList.add('hidden');
+                    icon.style.transform = 'rotate(0deg)';
+                }
+            }
+        </script>
+    </register-block>

Views/Profil/Organisasi.cshtml

@@ -0,0 +1,28 @@
+@{
+    Layout = "_Layout";
+
+    ViewData["Title"] = "Struktur Organisasi - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["Description"] = "Struktur Organisasi - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["Keywords"] = "Struktur Organisasi, DLH, Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["OgTitle"] = "Struktur Organisasi - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["OgDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["TwitterTitle"] = "Struktur Organisasi - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["TwitterDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
+
+    // Breadcumb
+    ViewData["BreadcrumbText"] = "Struktur Organisasi";
+    ViewData["TitleBeforeHighlight"] = "Struktur";
+    ViewData["TitleHighlight"] = "Organisasi";
+}
+
+<!-- Breadcumb -->
+<partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />
+
+<!-- Main Content -->
+
+
+<section class="container max-w-6xl mx-auto px-4 py-8">
+    <div class="flex justify-center text-center">
+    <img class="max-w-5xl" src="@Url.Content("~/assets/images/profil/org.png")" alt="Struktur Organisasi DLH DKI Jakarta">
+    </div>
+</section>

Views/Profil/Tupoksi.cshtml

@@ -0,0 +1,189 @@
+@{
+    Layout = "_Layout";
+
+    ViewData["Title"] = "Tupoksi Bidang, Suku Dinas dan UPT - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["Description"] = "Tupoksi Bidang, Suku Dinas dan UPT - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["Keywords"] = "Tupoksi Bidang, Suku Dinas dan UPT, DLH, Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["OgTitle"] = "Tupoksi Bidang, Suku Dinas dan UPT - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["OgDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["TwitterTitle"] = "Tupoksi Bidang, Suku Dinas dan UPT - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["TwitterDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
+
+    // Breadcumb
+    ViewData["BreadcrumbText"] = "Tupoksi Bidang, Suku Dinas dan UPT ";
+    ViewData["TitleBeforeHighlight"] = "Tupoksi Bidang,";
+    ViewData["TitleHighlight"] = "Suku Dinas dan UPT";
+}
+    <!-- Breadcumb -->
+    <partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />
+
+    <!-- Content Section -->
+    <section class="container mx-auto px-6 lg:px-12 py-16">
+        <div class="max-w-6xl mx-auto space-y-12">
+            <div class="rounded-3xl overflow-hidden">
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <!-- Pergub Card 1 -->
+                    <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 border border-green-100 transform hover:-translate-y-1">
+                        <div class="flex items-start">
+                        <div class="bg-green-100 p-3 rounded-lg">
+                            <i class="w-6 h-6 text-green-600" data-lucide="file-text"></i>
+                        </div>
+                        <div class="ml-4">
+                            <h3 class="font-semibold text-lg text-gray-800">Dinas Lingkungan Hidup</h3>
+                            <p class="text-sm text-gray-600 mt-1">Pergub No. 284 Tahun 2016 Tentang Dinas Lingkungan Hidup Provinsi DKI Jakarta</p>
+                            <div class="mt-3"></div>
+                            <span class="inline-block bg-green-100 text-green-800 text-xs font-semibold px-3 py-1 rounded-full">PERGUB NO. 284 TAHUN 2016</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Pergub Card 2 -->
+                    <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 border border-green-100 transform hover:-translate-y-1">
+                        <div class="flex items-start">
+                        <div class="bg-blue-100 p-3 rounded-lg">
+                            <i class="w-6 h-6 text-blue-600" data-lucide="droplets"></i>
+                        </div>
+                        <div class="ml-4">
+                            <h3 class="font-semibold text-lg text-gray-800">Unit Pelaksana Kebersihan Badan Air</h3>
+                            <p class="text-sm text-gray-600 mt-1">Pergub No. 399 Tahun 2016 Tentang Unit Pelaksana Kebersihan Badan Air</p>
+                            <div class="mt-3">
+                            <span class="inline-block bg-blue-100 text-blue-800 text-xs font-semibold px-3 py-1 rounded-full">PERGUB NO. 399 TAHUN 2016</span>
+                            </div>
+                        </div>
+                        </div>
+                    </div>
+
+                    <!-- Pergub Card 3 -->
+                    <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 border border-green-100 transform hover:-translate-y-1">
+                        <div class="flex items-start">
+                        <div class="bg-purple-100 p-3 rounded-lg">
+                            <i class="w-6 h-6 text-purple-600" data-lucide="flask-conical"></i>
+                        </div>
+                        <div class="ml-4">
+                            <h3 class="font-semibold text-lg text-gray-800">Unit Laboratorium Lingkungan Hidup</h3>
+                            <p class="text-sm text-gray-600 mt-1">Pergub No. 398 Tahun 2016 Tentang Unit Laboratorium Lingkungan Hidup Daerah</p>
+                            <div class="mt-3">
+                            <span class="inline-block bg-purple-100 text-purple-800 text-xs font-semibold px-3 py-1 rounded-full">PERGUB NO. 398 TAHUN 2016</span>
+                            </div>
+                        </div>
+                        </div>
+                    </div>
+
+                    <!-- Pergub Card 4 -->
+                    <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 border border-green-100 transform hover:-translate-y-1">
+                        <div class="flex items-start">
+                        <div class="bg-amber-100 p-3 rounded-lg">
+                            <i class="w-6 h-6 text-amber-600" data-lucide="recycle"></i>
+                        </div>
+                        <div class="ml-4">
+                            <h3 class="font-semibold text-lg text-gray-800">Unit Pengelola Sampah Terpadu</h3>
+                            <p class="text-sm text-gray-600 mt-1">Pergub No. 400 Tahun 2016 Tentang Unit Pengelola Sampah Terpadu</p>
+                            <div class="mt-3">
+                            <span class="inline-block bg-amber-100 text-amber-800 text-xs font-semibold px-3 py-1 rounded-full">PERGUB NO. 400 TAHUN 2016</span>
+                            </div>
+                        </div>
+                        </div>
+                    </div>
+
+                    <!-- Pergub Card 5 -->
+                    <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 border border-green-100 transform hover:-translate-y-1 md:col-span-2">
+                        <div class="flex items-start">
+                        <div class="bg-teal-100 p-3 rounded-lg">
+                            <i class="w-6 h-6 text-teal-600" data-lucide="landmark"></i>
+                        </div>
+                        <div class="ml-4">
+                            <h3 class="font-semibold text-lg text-gray-800">Organisasi dan Tata Kerja Perangkat Daerah</h3>
+                            <p class="text-sm text-gray-600 mt-1">Pergub No. 57 Tahun 2022 Tentang Organisasi dan Tata Kerja Perangkat Daerah</p>
+                            <div class="mt-3 flex flex-wrap gap-2">
+                            <span class="inline-block bg-teal-100 text-teal-800 text-xs font-semibold px-3 py-1 rounded-full">Naskah Komprehensif Pergub No. 57 Tahun 2022</span>
+                            <span class="inline-block bg-teal-100 text-teal-800 text-xs font-semibold px-3 py-1 rounded-full">Lamp XVI SOTK DLH Pergub No. 57 Tahun 2022</span>
+                            </div>
+                        </div>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+      
+
+            <h2 class="text-3xl font-bold text-gray-800 mb-12 text-center">Dokumen Terkait</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Document Card 2024 -->
+                <div class="group bg-white rounded-2xl shadow-xl hover:shadow-2xl transform hover:-translate-y-3 transition-all duration-500 overflow-hidden border border-gray-200 relative">
+                    <div class="absolute inset-0 bg-gradient-to-br from-green-500/5 to-teal-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+                    <div class="bg-gradient-to-br from-green-50 via-emerald-50 to-teal-100 p-8 text-center relative">
+                        <div class="absolute top-4 right-4 z-10">
+                            <span class="bg-gradient-to-r from-orange-500 to-red-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg animate-pulse">ARSIP</span>
+                        </div>
+                        <div class="w-24 h-24 mx-auto mb-6 bg-white rounded-full flex items-center justify-center shadow-xl group-hover:shadow-2xl group-hover:scale-110 transition-all duration-500 border-4 border-green-100">
+                            <img src="@Url.Content("~/lambang-dki.png")" alt="Jakarta Logo" class="w-14 h-14">
+                        </div>
+                        <p class="text-sm font-bold text-gray-700 tracking-wide">PEMERINTAH PROVINSI</p>
+                        <p class="text-sm font-bold text-gray-700 tracking-wide">DAERAH KHUSUS IBUKOTA JAKARTA</p>
+                        <div class="mt-6 p-4 bg-white/90 backdrop-blur-sm rounded-xl shadow-lg border border-green-100 group-hover:bg-white group-hover:scale-105 transition-all duration-500">
+                            <p class="text-md font-black text-green-600 mt-1">PERGUB NO.284 TAHUN 2024</p>
+                        </div>
+                    </div>
+                    <div class="p-8 relative z-10">
+                        <a href="#" class="w-full bg-gradient-to-r from-green-600 via-emerald-600 to-teal-600 text-white px-6 py-4 rounded-xl text-sm font-bold hover:from-green-700 hover:via-emerald-700 hover:to-teal-700 transition-all duration-300 flex items-center justify-center group-hover:shadow-xl shadow-lg transform hover:scale-105">
+                            <i class="w-5 h-5 mr-2 group-hover:animate-bounce" data-lucide="file-down"></i>
+                            Download PDF
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Document Card 2023 -->
+                <div class="group bg-white rounded-2xl shadow-xl hover:shadow-2xl transform hover:-translate-y-3 transition-all duration-500 overflow-hidden border border-gray-200 relative">
+                    <div class="absolute inset-0 bg-gradient-to-br from-green-500/5 to-teal-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+                    <div class="bg-gradient-to-br from-green-50 via-emerald-50 to-teal-100 p-8 text-center relative">
+                        <div class="absolute top-4 right-4 z-10">
+                            <span class="bg-gradient-to-r from-orange-500 to-red-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg animate-pulse">ARSIP</span>
+                        </div>
+                        <div class="w-24 h-24 mx-auto mb-6 bg-white rounded-full flex items-center justify-center shadow-xl group-hover:shadow-2xl group-hover:scale-110 transition-all duration-500 border-4 border-green-100">
+                            <img src="@Url.Content("~/lambang-dki.png")" alt="Jakarta Logo" class="w-14 h-14">
+                        </div>
+                        <p class="text-sm font-bold text-gray-700 tracking-wide">PEMERINTAH PROVINSI</p>
+                        <p class="text-sm font-bold text-gray-700 tracking-wide">DAERAH KHUSUS IBUKOTA JAKARTA</p>
+                        <div class="mt-6 p-4 bg-white/90 backdrop-blur-sm rounded-xl shadow-lg border border-green-100 group-hover:bg-white group-hover:scale-105 transition-all duration-500">
+                            <p class="text-md font-black text-green-600 mt-1">PERGUB NO.398 TAHUN 2016</p>
+                        </div>
+                    </div>
+                    <div class="p-8 relative z-10">
+                        <a href="#" class="w-full bg-gradient-to-r from-green-600 via-emerald-600 to-teal-600 text-white px-6 py-4 rounded-xl text-sm font-bold hover:from-green-700 hover:via-emerald-700 hover:to-teal-700 transition-all duration-300 flex items-center justify-center group-hover:shadow-xl shadow-lg transform hover:scale-105">
+                            <i class="w-5 h-5 mr-2 group-hover:animate-bounce" data-lucide="file-down"></i>
+                            Download PDF
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Document Card 2020-2022 -->
+                <div class="group bg-white rounded-2xl shadow-xl hover:shadow-2xl transform hover:-translate-y-3 transition-all duration-500 overflow-hidden border border-gray-200 relative">
+                    <div class="absolute inset-0 bg-gradient-to-br from-green-500/5 to-teal-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+                    <div class="bg-gradient-to-br from-green-50 via-emerald-50 to-teal-100 p-8 text-center relative">
+                        <div class="absolute top-4 right-4 z-10">
+                            <span class="bg-gradient-to-r from-orange-500 to-red-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg animate-pulse">ARSIP</span>
+                        </div>
+                        <div class="w-24 h-24 mx-auto mb-6 bg-white rounded-full flex items-center justify-center shadow-xl group-hover:shadow-2xl group-hover:scale-110 transition-all duration-500 border-4 border-green-100">
+                            <img src="@Url.Content("~/lambang-dki.png")" alt="Jakarta Logo" class="w-14 h-14">
+                        </div>
+                        <p class="text-sm font-bold text-gray-700 tracking-wide">PEMERINTAH PROVINSI</p>
+                        <p class="text-sm font-bold text-gray-700 tracking-wide">DAERAH KHUSUS IBUKOTA JAKARTA</p>
+                        @* <p class="text-xl font-black text-green-600 mt-3 tracking-wider">JAKARTA</p> *@
+                        <div class="mt-6 p-4 bg-white/90 backdrop-blur-sm rounded-xl shadow-lg border border-green-100 group-hover:bg-white group-hover:scale-105 transition-all duration-500">
+                            <p class="text-md font-black text-green-600 mt-1">PERGUB NO.400 TAHUN 2016</p>
+                        </div>
+                    </div>
+                    <div class="p-8 relative z-10">
+                        <a href="#" class="w-full bg-gradient-to-r from-green-600 via-emerald-600 to-teal-600 text-white px-6 py-4 rounded-xl text-sm font-bold hover:from-green-700 hover:via-emerald-700 hover:to-teal-700 transition-all duration-300 flex items-center justify-center group-hover:shadow-xl shadow-lg transform hover:scale-105">
+                            <i class="w-5 h-5 mr-2 group-hover:animate-bounce" data-lucide="file-down"></i>
+                            Download PDF
+                        </a>
+                    </div>
+                </div>
+            </div>
+            
+
+        </div>
+    </section>
+

Views/Program/Air.cshtml

@@ -0,0 +1,206 @@
+@{
+    Layout = "_Layout";
+
+    ViewData["Title"] = "Program Air - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["Description"] = "Program Air - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["Keywords"] = "Program Air, DLH, Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["OgTitle"] = "Program Air - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["OgDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["TwitterTitle"] = "Program Air - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["TwitterDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
+
+    // Breadcumb
+    ViewData["BreadcrumbText"] = "Program Pengendalian Pencemaran Air";
+    ViewData["TitleBeforeHighlight"] = "Program Pengendalian";
+    ViewData["TitleHighlight"] = "Pencemaran Air";
+}
+    <!-- Breadcumb -->
+    <partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />
+
+    <!-- Content Section -->
+    <section class="container mx-auto px-6 lg:px-12 py-16">
+        <div class="max-w-6xl mx-auto space-y-12">
+            <!-- Accordion Container -->
+            <div class="bg-white rounded-3xl shadow-2xl p-8 lg:p-12 border border-gray-100 space-y-4">
+                <!-- Accordion Item 1 -->
+                <div class="border border-gray-200 rounded-xl overflow-hidden">
+                    <button class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-cyan-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between" onclick="toggleAccordion('accordion1')">
+                        <div class="flex items-center space-x-3">
+                            <i class="text-orange-600" data-lucide="book-open"></i>
+                            <h3 class="text-lg font-semibold text-gray-800">Definisi & Dasar Hukum</h3>
+                        </div>
+                        <i class="text-gray-600 transition-transform duration-200" data-lucide="chevron-down" id="icon1"></i>
+                    </button>
+                    <div id="accordion1" class="hidden px-6 py-4 bg-white">
+                        <p class="text-gray-700 leading-relaxed text-md mb-6">
+                            Pengendalian pencemaran air adalah upaya pencegahan dan penanggulangan pencemaran air serta pemulihan kualitas air untuk menjamin kualitas air agar sesuai dengan baku mutu air (PP Nomor 82 Tahun 2001 Tentang Pengelolaan Kualitas Air Dan Pengendalian Pencemaran Air). Pelaksanaan pengendalian Pencemaran air di Provinsi DKI Jakarta dilakukan berdasarkan:
+                        </p>
+                        <div class="grid gap-3">
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">1</span>
+                                    <p class="text-gray-700 text-sm">Undang – Undang Nomor 32 Tahun 2009 tentang Perlindungan dan Pengelolaan Lingkungan Hidup</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">2</span>
+                                    <p class="text-gray-700 text-sm">Peraturan Pemerintah Nomor 82 Tahun 2001 tentang Pengelolaan Kualitas Air Dan Pengendalian Pencemaran Air</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">3</span>
+                                    <p class="text-gray-700 text-sm">Peraturan Menteri Kesehatan Nomor 416/MEN.KES/PER/IX/1990 tentang Syarat-Syarat dan Pengawasan Kualitas Air</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">4</span>
+                                    <p class="text-gray-700 text-sm">Peraturan Menteri Negara Lingkungan Hidup Nomor 01 Tahun 2010 tentang Tata Laksana Pengendalian Pencemaran Air</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">5</span>
+                                    <p class="text-gray-700 text-sm">Peraturan Menteri Lingkungan Hidup Nomor 5 Tahun 2014 tentang Baku Mutu Air Limbah</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">6</span>
+                                    <p class="text-gray-700 text-sm">Keputusan Menteri Negara Lingkungan Hidup Nomor 35 Tahun 1995 tentang Program Kali Bersih</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">7</span>
+                                    <p class="text-gray-700 text-sm">Peraturan Gubernur Nomor 122 Tahun 2005 Tentang Pengelolaan Air Limbah Domestik di Provinsi DKI Jakarta</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">8</span>
+                                    <p class="text-gray-700 text-sm">Peraturan Gubernur Nomor 69 Tahun 2013 tentang Baku Mutu Air Limbah bagi Kegiatan dan/atau Usaha</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">9</span>
+                                    <p class="text-gray-700 text-sm">Keputusan Gubernur Nomor 582 Tahun 1995 tentang Penetapan Peruntukan dan Baku Mutu Air Sungai/ Badan Air serta Baku Mutu Limbah Cair di Wilayah DKI Jakarta</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">10</span>
+                                    <p class="text-gray-700 text-sm">Instruksi Gubernur Nomor 59 Tahun 2014 tentang Pengolahan Air Limbah Domestik pada Bangunan Gedung Pemerintah Provinsi DKI Jakarta</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">11</span>
+                                    <p class="text-gray-700 text-sm">Rencana Strategis 2017 – 2022 Dinas Lingkungan Hidup Provinsi DKI Jakarta</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Accordion Item 2 -->
+                <div class="border border-gray-200 rounded-xl overflow-hidden">
+                    <button class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-cyan-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between" onclick="toggleAccordion('accordion2')">
+                      
+                        <div class="flex items-center space-x-3">
+                            <i class="text-orange-600" data-lucide="file-text"></i>
+                              <h3 class="text-lg font-semibold text-gray-800">Program & Rencana Kerja 2020</h3>
+                        </div>
+                        <i class="text-gray-600 transition-transform duration-200" data-lucide="chevron-down" id="icon2"></i>
+                    </button>
+                    <div id="accordion2" class="hidden px-6 py-4 bg-white">
+                        <p class="text-gray-700 leading-relaxed text-md mb-6">
+                            Program / Rencana Kerja Dinas Lingkungan Hidup Tahun 2020 yang terkait dengan Pengendalian pencemaran air antara lain:
+                        </p>
+                        <div class="grid gap-3">
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">1</span>
+                                    <p class="text-gray-700 text-sm">Pemantauan Kualitas Lingkungan Perairan Laut dan Muara Teluk Jakarta</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">2</span>
+                                    <p class="text-gray-700 text-sm">Pemantauan Kualitas Lingkungan Air Tanah</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">3</span>
+                                    <p class="text-gray-700 text-sm">Pemantauan Kualitas Lingkungan Air Sungai</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">4</span>
+                                    <p class="text-gray-700 text-sm">Pemantauan Kualitas Lingkungan Air Situ/Waduk</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">5</span>
+                                    <p class="text-gray-700 text-sm">Perencanaan Pemantauan Kualitas Lingkungan Air Sungai dengan Sistem Onlimo (Online Monitoring)</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">6</span>
+                                    <p class="text-gray-700 text-sm">Penyediaan Jasa Pengolahan Air Limbah</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">7</span>
+                                    <p class="text-gray-700 text-sm">Penyedotan Limbah Septik Tank</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">8</span>
+                                    <p class="text-gray-700 text-sm">Pengolahan IPAS TPST Bantar gebang</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">9</span>
+                                    <p class="text-gray-700 text-sm">Pembangunan dan Pemeliharaan Saluran Drainase/Air Lindi</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">10</span>
+                                    <p class="text-gray-700 text-sm">Pengolahan Air Limbah dan Pemeliharaan IPAL Laboratorium</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <register-block dynamic-section="scripts" key="jsProgramAir">
+        <script>
+            function toggleAccordion(accordionId) {
+                const accordion = document.getElementById(accordionId);
+                const icon = document.getElementById('icon' + accordionId.slice(-1));
+                
+                if (accordion.classList.contains('hidden')) {
+                    accordion.classList.remove('hidden');
+                    icon.style.transform = 'rotate(180deg)';
+                } else {
+                    accordion.classList.add('hidden');
+                    icon.style.transform = 'rotate(0deg)';
+                }
+            }
+        </script>
+    </register-block>

Views/Program/Anggaran.cshtml

@@ -0,0 +1,116 @@
+@{
+    Layout = "_Layout";
+
+    ViewData["Title"] = "Program Anggaran - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["Description"] = "Program Anggaran - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["Keywords"] = "Program Anggaran, DLH, Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["OgTitle"] = "Program Anggaran - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["OgDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["TwitterTitle"] = "Program Anggaran - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["TwitterDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
+
+    // Breadcumb
+    ViewData["BreadcrumbText"] = "Data Program dan Anggaran";
+    ViewData["TitleBeforeHighlight"] = "Data Program";
+    ViewData["TitleHighlight"] = "dan Anggaran";
+}
+    <!-- Breadcumb -->
+    <partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />
+
+    <!-- Content Section -->
+    <section class="container mx-auto px-6 lg:px-12 py-16">
+        <div class="max-w-6xl mx-auto space-y-12">
+            <div class="w-full">
+                <div class="content-section">
+                    <p class="text-gray-700 leading-relaxed mb-8">Halaman ini menyajikan informasi lengkap mengenai program kerja dan alokasi anggaran Dinas Lingkungan Hidup Provinsi DKI Jakarta
+                        selama periode 2020-2022. Data ini mencakup rincian kegiatan strategis, penggunaan anggaran, serta capaian dalam pengelolaan lingkungan hidup. Melalui
+                        transparansi ini, kami berkomitmen untuk memastikan pengelolaan sumber daya dilakukan secara akuntabel dan sesuai dengan kebutuhan pembangunan
+                        berkelanjutan di Jakarta.
+                    </p>
+                </div>
+            </div>
+
+            <h2 class="text-3xl font-bold text-gray-800 mb-12 text-center">Dokumen Terkait</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Document Card 2024 -->
+                <div class="group bg-white rounded-2xl shadow-xl hover:shadow-2xl transform hover:-translate-y-3 transition-all duration-500 overflow-hidden border border-gray-200 relative">
+                    <div class="absolute inset-0 bg-gradient-to-br from-green-500/5 to-teal-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+                    <div class="bg-gradient-to-br from-green-50 via-emerald-50 to-teal-100 p-8 text-center relative">
+                        <div class="absolute top-4 right-4 z-10">
+                            <span class="bg-gradient-to-r from-orange-500 to-red-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg animate-pulse">ARSIP</span>
+                        </div>
+                        <div class="w-24 h-24 mx-auto mb-6 bg-white rounded-full flex items-center justify-center shadow-xl group-hover:shadow-2xl group-hover:scale-110 transition-all duration-500 border-4 border-green-100">
+                            <img src="@Url.Content("~/lambang-dki.png")" alt="Jakarta Logo" class="w-14 h-14">
+                        </div>
+                        <p class="text-sm font-bold text-gray-700 tracking-wide">PEMERINTAH PROVINSI</p>
+                        <p class="text-sm font-bold text-gray-700 tracking-wide">DAERAH KHUSUS IBUKOTA</p>
+                        <p class="text-xl font-black text-green-600 mt-3 tracking-wider">JAKARTA</p>
+                        <div class="mt-6 p-4 bg-white/90 backdrop-blur-sm rounded-xl shadow-lg border border-green-100 group-hover:bg-white group-hover:scale-105 transition-all duration-500">
+                            <p class="text-sm font-semibold text-gray-600 tracking-wide">DATA PROGRAM DAN ANGGARAN</p>
+                            <p class="text-2xl font-black text-green-600 mt-1">2024</p>
+                        </div>
+                    </div>
+                    <div class="p-8 relative z-10">
+                        <a href="#" class="w-full bg-gradient-to-r from-green-600 via-emerald-600 to-teal-600 text-white px-6 py-4 rounded-xl text-sm font-bold hover:from-green-700 hover:via-emerald-700 hover:to-teal-700 transition-all duration-300 flex items-center justify-center group-hover:shadow-xl shadow-lg transform hover:scale-105">
+                            <i class="w-5 h-5 mr-2 group-hover:animate-bounce" data-lucide="file-down"></i>
+                            Download PDF
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Document Card 2023 -->
+                <div class="group bg-white rounded-2xl shadow-xl hover:shadow-2xl transform hover:-translate-y-3 transition-all duration-500 overflow-hidden border border-gray-200 relative">
+                    <div class="absolute inset-0 bg-gradient-to-br from-green-500/5 to-teal-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+                    <div class="bg-gradient-to-br from-green-50 via-emerald-50 to-teal-100 p-8 text-center relative">
+                        <div class="absolute top-4 right-4 z-10">
+                            <span class="bg-gradient-to-r from-orange-500 to-red-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg animate-pulse">ARSIP</span>
+                        </div>
+                        <div class="w-24 h-24 mx-auto mb-6 bg-white rounded-full flex items-center justify-center shadow-xl group-hover:shadow-2xl group-hover:scale-110 transition-all duration-500 border-4 border-green-100">
+                            <img src="@Url.Content("~/lambang-dki.png")" alt="Jakarta Logo" class="w-14 h-14">
+                        </div>
+                        <p class="text-sm font-bold text-gray-700 tracking-wide">PEMERINTAH PROVINSI</p>
+                        <p class="text-sm font-bold text-gray-700 tracking-wide">DAERAH KHUSUS IBUKOTA</p>
+                        <p class="text-xl font-black text-green-600 mt-3 tracking-wider">JAKARTA</p>
+                        <div class="mt-6 p-4 bg-white/90 backdrop-blur-sm rounded-xl shadow-lg border border-green-100 group-hover:bg-white group-hover:scale-105 transition-all duration-500">
+                            <p class="text-sm font-semibold text-gray-600 tracking-wide">DATA PROGRAM DAN ANGGARAN</p>
+                            <p class="text-2xl font-black text-green-600 mt-1">2023</p>
+                        </div>
+                    </div>
+                    <div class="p-8 relative z-10">
+                        <a href="#" class="w-full bg-gradient-to-r from-green-600 via-emerald-600 to-teal-600 text-white px-6 py-4 rounded-xl text-sm font-bold hover:from-green-700 hover:via-emerald-700 hover:to-teal-700 transition-all duration-300 flex items-center justify-center group-hover:shadow-xl shadow-lg transform hover:scale-105">
+                            <i class="w-5 h-5 mr-2 group-hover:animate-bounce" data-lucide="file-down"></i>
+                            Download PDF
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Document Card 2020-2022 -->
+                <div class="group bg-white rounded-2xl shadow-xl hover:shadow-2xl transform hover:-translate-y-3 transition-all duration-500 overflow-hidden border border-gray-200 relative">
+                    <div class="absolute inset-0 bg-gradient-to-br from-green-500/5 to-teal-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+                    <div class="bg-gradient-to-br from-green-50 via-emerald-50 to-teal-100 p-8 text-center relative">
+                        <div class="absolute top-4 right-4 z-10">
+                            <span class="bg-gradient-to-r from-orange-500 to-red-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg animate-pulse">ARSIP</span>
+                        </div>
+                        <div class="w-24 h-24 mx-auto mb-6 bg-white rounded-full flex items-center justify-center shadow-xl group-hover:shadow-2xl group-hover:scale-110 transition-all duration-500 border-4 border-green-100">
+                            <img src="@Url.Content("~/lambang-dki.png")" alt="Jakarta Logo" class="w-14 h-14">
+                        </div>
+                        <p class="text-sm font-bold text-gray-700 tracking-wide">PEMERINTAH PROVINSI</p>
+                        <p class="text-sm font-bold text-gray-700 tracking-wide">DAERAH KHUSUS IBUKOTA</p>
+                        <p class="text-xl font-black text-green-600 mt-3 tracking-wider">JAKARTA</p>
+                        <div class="mt-6 p-4 bg-white/90 backdrop-blur-sm rounded-xl shadow-lg border border-green-100 group-hover:bg-white group-hover:scale-105 transition-all duration-500">
+                            <p class="text-sm font-semibold text-gray-600 tracking-wide">DATA PROGRAM DAN ANGGARAN</p>
+                            <p class="text-2xl font-black text-green-600 mt-1">2020-2022</p>
+                        </div>
+                    </div>
+                    <div class="p-8 relative z-10">
+                        <a href="#" class="w-full bg-gradient-to-r from-green-600 via-emerald-600 to-teal-600 text-white px-6 py-4 rounded-xl text-sm font-bold hover:from-green-700 hover:via-emerald-700 hover:to-teal-700 transition-all duration-300 flex items-center justify-center group-hover:shadow-xl shadow-lg transform hover:scale-105">
+                            <i class="w-5 h-5 mr-2 group-hover:animate-bounce" data-lucide="file-down"></i>
+                            Download PDF
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </section>
+

Views/Program/LKIP.cshtml

@@ -0,0 +1,113 @@
+@{
+    Layout = "_Layout";
+
+    ViewData["Title"] = "Laporan Kinerja Instansi Pemerintahan - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["Description"] = "Laporan Kinerja Instansi Pemerintahan - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["Keywords"] = "Laporan Kinerja Instansi Pemerintahan, DLH, Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["OgTitle"] = "Laporan Kinerja Instansi Pemerintahan - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["OgDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["TwitterTitle"] = "Laporan Kinerja Instansi Pemerintahan - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["TwitterDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
+
+    // Breadcumb
+    ViewData["BreadcrumbText"] = "Laporan Kinerja Instansi Pemerintahan";
+    ViewData["TitleBeforeHighlight"] = "Laporan Kinerja";
+    ViewData["TitleHighlight"] = "Instansi Pemerintahan";
+}
+    <!-- Breadcumb -->
+    <partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />
+
+    <!-- Content Section -->
+    <section class="container mx-auto px-6 lg:px-12 py-16">
+        <div class="max-w-6xl mx-auto space-y-12">
+            <div class="w-full">
+                <div class="content-section">
+                    <p class="text-gray-700 leading-relaxed mb-8">Laporan Kinerja Instansi Pemerintah" (LKIP) pada situs Dinas Lingkungan Hidup Provinsi DKI Jakarta menyediakan informasi mengenai pencapaian kinerja instansi tersebut. LKIP memuat evaluasi terhadap program dan kegiatan yang telah dilaksanakan selama periode tertentu, serta capaian indikator kinerja utama yang ditetapkan. Dokumen ini juga mencakup analisis terhadap faktor-faktor yang mempengaruhi kinerja, baik yang mendukung maupun yang menjadi kendala, serta langkah-langkah strategis yang diambil untuk meningkatkan kinerja di masa mendatang. Dengan membaca LKIP, masyarakat dapat memahami sejauh mana Dinas Lingkungan Hidup DKI Jakarta telah mencapai target dan komitmennya dalam pengelolaan lingkungan hidup di wilayah Jakarta.
+                    </p>
+                </div>
+            </div>
+
+            <h2 class="text-3xl font-bold text-gray-800 mb-12 text-center">Dokumen Terkait</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Document Card 2024 -->
+                <div class="group bg-white rounded-2xl shadow-xl hover:shadow-2xl transform hover:-translate-y-3 transition-all duration-500 overflow-hidden border border-gray-200 relative">
+                    <div class="absolute inset-0 bg-gradient-to-br from-green-500/5 to-teal-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+                    <div class="bg-gradient-to-br from-green-50 via-emerald-50 to-teal-100 p-8 text-center relative">
+                        <div class="absolute top-4 right-4 z-10">
+                            <span class="bg-gradient-to-r from-orange-500 to-red-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg animate-pulse">ARSIP</span>
+                        </div>
+                        <div class="w-24 h-24 mx-auto mb-6 bg-white rounded-full flex items-center justify-center shadow-xl group-hover:shadow-2xl group-hover:scale-110 transition-all duration-500 border-4 border-green-100">
+                            <img src="@Url.Content("~/lambang-dki.png")" alt="Jakarta Logo" class="w-14 h-14">
+                        </div>
+                        <p class="text-sm font-bold text-gray-700 tracking-wide">PEMERINTAH PROVINSI</p>
+                        <p class="text-sm font-bold text-gray-700 tracking-wide">DAERAH KHUSUS IBUKOTA</p>
+                        <p class="text-xl font-black text-green-600 mt-3 tracking-wider">JAKARTA</p>
+                        <div class="mt-6 p-4 bg-white/90 backdrop-blur-sm rounded-xl shadow-lg border border-green-100 group-hover:bg-white group-hover:scale-105 transition-all duration-500">
+                            <p class="text-sm font-semibold text-gray-600 tracking-wide">LAPORAN KINERJA INSTANSI PEMERINTAHAN</p>
+                            <p class="text-2xl font-black text-green-600 mt-1">2024</p>
+                        </div>
+                    </div>
+                    <div class="p-8 relative z-10">
+                        <a href="#" class="w-full bg-gradient-to-r from-green-600 via-emerald-600 to-teal-600 text-white px-6 py-4 rounded-xl text-sm font-bold hover:from-green-700 hover:via-emerald-700 hover:to-teal-700 transition-all duration-300 flex items-center justify-center group-hover:shadow-xl shadow-lg transform hover:scale-105">
+                            <i class="w-5 h-5 mr-2 group-hover:animate-bounce" data-lucide="file-down"></i>
+                            Download PDF
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Document Card 2023 -->
+                <div class="group bg-white rounded-2xl shadow-xl hover:shadow-2xl transform hover:-translate-y-3 transition-all duration-500 overflow-hidden border border-gray-200 relative">
+                    <div class="absolute inset-0 bg-gradient-to-br from-green-500/5 to-teal-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+                    <div class="bg-gradient-to-br from-green-50 via-emerald-50 to-teal-100 p-8 text-center relative">
+                        <div class="absolute top-4 right-4 z-10">
+                            <span class="bg-gradient-to-r from-orange-500 to-red-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg animate-pulse">ARSIP</span>
+                        </div>
+                        <div class="w-24 h-24 mx-auto mb-6 bg-white rounded-full flex items-center justify-center shadow-xl group-hover:shadow-2xl group-hover:scale-110 transition-all duration-500 border-4 border-green-100">
+                            <img src="@Url.Content("~/lambang-dki.png")" alt="Jakarta Logo" class="w-14 h-14">
+                        </div>
+                        <p class="text-sm font-bold text-gray-700 tracking-wide">PEMERINTAH PROVINSI</p>
+                        <p class="text-sm font-bold text-gray-700 tracking-wide">DAERAH KHUSUS IBUKOTA</p>
+                        <p class="text-xl font-black text-green-600 mt-3 tracking-wider">JAKARTA</p>
+                        <div class="mt-6 p-4 bg-white/90 backdrop-blur-sm rounded-xl shadow-lg border border-green-100 group-hover:bg-white group-hover:scale-105 transition-all duration-500">
+                            <p class="text-sm font-semibold text-gray-600 tracking-wide">LAPORAN KINERJA INSTANSI PEMERINTAHAN</p>
+                            <p class="text-2xl font-black text-green-600 mt-1">2023</p>
+                        </div>
+                    </div>
+                    <div class="p-8 relative z-10">
+                        <a href="#" class="w-full bg-gradient-to-r from-green-600 via-emerald-600 to-teal-600 text-white px-6 py-4 rounded-xl text-sm font-bold hover:from-green-700 hover:via-emerald-700 hover:to-teal-700 transition-all duration-300 flex items-center justify-center group-hover:shadow-xl shadow-lg transform hover:scale-105">
+                            <i class="w-5 h-5 mr-2 group-hover:animate-bounce" data-lucide="file-down"></i>
+                            Download PDF
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Document Card 2020-2022 -->
+                <div class="group bg-white rounded-2xl shadow-xl hover:shadow-2xl transform hover:-translate-y-3 transition-all duration-500 overflow-hidden border border-gray-200 relative">
+                    <div class="absolute inset-0 bg-gradient-to-br from-green-500/5 to-teal-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+                    <div class="bg-gradient-to-br from-green-50 via-emerald-50 to-teal-100 p-8 text-center relative">
+                        <div class="absolute top-4 right-4 z-10">
+                            <span class="bg-gradient-to-r from-orange-500 to-red-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg animate-pulse">ARSIP</span>
+                        </div>
+                        <div class="w-24 h-24 mx-auto mb-6 bg-white rounded-full flex items-center justify-center shadow-xl group-hover:shadow-2xl group-hover:scale-110 transition-all duration-500 border-4 border-green-100">
+                            <img src="@Url.Content("~/lambang-dki.png")" alt="Jakarta Logo" class="w-14 h-14">
+                        </div>
+                        <p class="text-sm font-bold text-gray-700 tracking-wide">PEMERINTAH PROVINSI</p>
+                        <p class="text-sm font-bold text-gray-700 tracking-wide">DAERAH KHUSUS IBUKOTA</p>
+                        <p class="text-xl font-black text-green-600 mt-3 tracking-wider">JAKARTA</p>
+                        <div class="mt-6 p-4 bg-white/90 backdrop-blur-sm rounded-xl shadow-lg border border-green-100 group-hover:bg-white group-hover:scale-105 transition-all duration-500">
+                            <p class="text-sm font-semibold text-gray-600 tracking-wide">LAPORAN KINERJA INSTANSI PEMERINTAHAN</p>
+                            <p class="text-2xl font-black text-green-600 mt-1">2020-2022</p>
+                        </div>
+                    </div>
+                    <div class="p-8 relative z-10">
+                        <a href="#" class="w-full bg-gradient-to-r from-green-600 via-emerald-600 to-teal-600 text-white px-6 py-4 rounded-xl text-sm font-bold hover:from-green-700 hover:via-emerald-700 hover:to-teal-700 transition-all duration-300 flex items-center justify-center group-hover:shadow-xl shadow-lg transform hover:scale-105">
+                            <i class="w-5 h-5 mr-2 group-hover:animate-bounce" data-lucide="file-down"></i>
+                            Download PDF
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </section>
+

Views/Program/Pengawasan.cshtml

@@ -0,0 +1,289 @@
+@{
+    Layout = "_Layout";
+
+    ViewData["Title"] = "Program Pengawasan - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["Description"] = "Program Pengawasan - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["Keywords"] = "Program Pengawasan, DLH, Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["OgTitle"] = "Program Pengawasan - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["OgDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["TwitterTitle"] = "Program Pengawasan - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["TwitterDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
+
+    // Breadcumb
+    ViewData["BreadcrumbText"] = "Pengawasan Penaatan Lingkungan dan Kebersihan";
+    ViewData["TitleBeforeHighlight"] = "Pengawasan Penaatan";
+    ViewData["TitleHighlight"] = "Lingkungan dan Kebersihan";
+}
+    <!-- Breadcumb -->
+    <partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />
+
+    <!-- Content Section -->
+    <section class="container mx-auto px-6 lg:px-12 py-16">
+        <div class="max-w-6xl mx-auto space-y-12">
+            <!-- Accordion Container -->
+            <div class="bg-white rounded-3xl shadow-2xl p-8 lg:p-12 border border-gray-100 space-y-4">
+                <!-- Accordion Item 1 -->
+                <div class="border border-gray-200 rounded-xl overflow-hidden">
+                    <button class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-red-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between" onclick="toggleAccordion('accordion1')">
+                        <div class="flex items-center space-x-3">
+                            <i class="text-orange-600" data-lucide="scale"></i>
+                            <h3 class="text-lg font-semibold text-gray-800">Definisi & Dasar Hukum</h3>
+                        </div>
+                        <i class="text-gray-600 transition-transform duration-200" data-lucide="chevron-down" id="icon1"></i>
+                    </button>
+                    <div id="accordion1" class="hidden px-6 py-4 bg-white">
+                        <p class="text-gray-700 leading-relaxed text-md mb-6">
+                            Pengawasan penaatan merupakan amanat Pasal 71 ayat (1) UU Nomor 32 Tahun 2009 tentang Perlindungan dan Pengelolaan Lingkungan Hidup yang menyatakan bahwa "Menteri, Gubernur, atau Bupati/Walikota sesuai dengan kewenangannya wajib melakukan pengawasan terhadap ketaatan penanggung jawab dan/atau kegiatan atas ketentuan yang ditetapkan dalam peraturan perundang – undangan di bidang perlindungan dan pengelolaan lingkungan hidup". Pengawasan tersebut dilakukan secara langsung maupun tidak langsung. Pelaksanaan pengendalian Pencemaran air di Provinsi DKI Jakarta dilakukan berdasarkan:
+                        </p>
+                        <div class="grid gap-3">
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">1</span>
+                                    <p class="text-gray-700 text-sm">Undang – Undang Nomor 32 Tahun 2009 tentang Perlindungan dan Pengelolaan Lingkungan Hidup</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">2</span>
+                                    <p class="text-gray-700 text-sm">Undang – Undang Nomor 18 Tahun 2008 tentang Pengelolaan Sampah</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">3</span>
+                                    <p class="text-gray-700 text-sm">Peraturan Pemerintah Nomor 82 Tahun 2001 tentang Pengelolaan Kualitas Air Dan Pengendalian Pencemaran Air</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">4</span>
+                                    <p class="text-gray-700 text-sm">Peraturan Pemerintah Nomor 18 Tahun 1999 tentang Pengelolaan Limbah Bahan Berbahaya Dan Beracun</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">5</span>
+                                    <p class="text-gray-700 text-sm">Kepka Bapedal No.68 Tahun 1994 Izin B3</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">6</span>
+                                    <p class="text-gray-700 text-sm">Kepka Bapedal No.1 Tahun 1995 Tata Cara Pengumpulan Limbah B3</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">7</span>
+                                    <p class="text-gray-700 text-sm">Kepka Bapedal No.2 Tahun 1995 Dokumen Limbah B3</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">8</span>
+                                    <p class="text-gray-700 text-sm">Kepka Bapedal No.3 Tahun 1995 Persyaratan Pengelolaan Limbah B3</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">9</span>
+                                    <p class="text-gray-700 text-sm">Kepka Bapedal No.4 Tahun 1995 Tata Cara Penimbunan Hasil Pengolahan B3</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">10</span>
+                                    <p class="text-gray-700 text-sm">Kepka Bapedal No.5 Tahun 1995 Simbol dan Label Limbah B3</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">11</span>
+                                    <p class="text-gray-700 text-sm">Kepka Bapedal No.255 Tahun 1996 Tata Cara Pengumpulan Minyak Bekas</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">12</span>
+                                    <p class="text-gray-700 text-sm">SE Kepka No.8 Tahun 1997 Penyerahan Pelumas Minyak Bekas</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">13</span>
+                                    <p class="text-gray-700 text-sm">Kepka Bapedal No.2 Tahun 1998 Pengawasan Limbah B3 Daerah</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">14</span>
+                                    <p class="text-gray-700 text-sm">Kepka Bapedal No.3 Tahun 1998 Program Kemitraan Limbah B3</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">15</span>
+                                    <p class="text-gray-700 text-sm">Kepka Bapedal No.4 Tahun 1998 Daerah Tingkat I Kemitraan Limbah B3</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">16</span>
+                                    <p class="text-gray-700 text-sm">Kepmen LH No.128 Tahun 2003 Limbah Minyak Bumi</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">17</span>
+                                    <p class="text-gray-700 text-sm">Permen LH No.2 Tahun 2008 Pemanfaatan Limbah B3</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">18</span>
+                                    <p class="text-gray-700 text-sm">Permen LH No.3 Tahun 2007 Limbah di Pelabuhan</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">19</span>
+                                    <p class="text-gray-700 text-sm">Permen LH No.14 Tahun 2013 Simbol Dan Label Limbah B3</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">20</span>
+                                    <p class="text-gray-700 text-sm">Peraturan Daerah Nomor 2 Tahun 2005 tentang Pengendalian Pencemaran Udara</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">21</span>
+                                    <p class="text-gray-700 text-sm">Peraturan Daerah Nomor 3 Tahun 2013 tentang Pengelolaan Sampah yang diubah dengan Peraturan Daerah Nomor 4 Tahun 2019</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">22</span>
+                                    <p class="text-gray-700 text-sm">Peraturan Gubernur Nomor 69 Tahun 2013 tentang Baku Mutu Air Limbah bagi Kegiatan dan/atau Usaha</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">23</span>
+                                    <p class="text-gray-700 text-sm">Peraturan Gubernur Nomor 52 Tahun 2006 tentang Pedoman Pengendalian Kualitas Udara Dalam Ruangan</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">24</span>
+                                    <p class="text-gray-700 text-sm">Peraturan Gubernur Nomor 31 Tahun 2008 tentang Ambang Batas Gas Buang Kendaraan Bermotor</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">25</span>
+                                    <p class="text-gray-700 text-sm">Peraturan Gubernur Nomor 54 Tahun 2008 tentang Baku Mutu Kualitas Udara Dalam Ruangan (KUDR)</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">26</span>
+                                    <p class="text-gray-700 text-sm">Keputusan Gubernur Nomor 670/2000 tentang Penetapan Baku Mutu Emisi Sumber Tidak Bergerak di Provinsi DKI Jakarta</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">27</span>
+                                    <p class="text-gray-700 text-sm">Keputusan Gubernur Nomor 551/2001 tentang Penetapan Baku Mutu Udara Ambien dan Baku Tingkat Kebisingan di Provinsi DKI Jakarta</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Accordion Item 2 -->
+                <div class="border border-gray-200 rounded-xl overflow-hidden">
+                    <button class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-red-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between" onclick="toggleAccordion('accordion2')">
+                        <div class="flex items-center space-x-3">
+                            <i class="text-orange-600" data-lucide="file-text"></i>
+                            <h3 class="text-lg font-semibold text-gray-800">Program & Rencana Kerja 2020</h3>
+                        </div>
+                        <i class="text-gray-600 transition-transform duration-200" data-lucide="chevron-down" id="icon2"></i>
+                    </button>
+                    <div id="accordion2" class="hidden px-6 py-4 bg-white">
+                        <p class="text-gray-700 leading-relaxed text-md mb-6">
+                            Program / Rencana Kerja Dinas Lingkungan Hidup Tahun 2020 yang terkait dengan Pengawasan penaatan antara lain:
+                        </p>
+                        <div class="grid gap-3">
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">1</span>
+                                    <p class="text-gray-700 text-sm">Pembinaan dan Pengawasan Pengelolaan Limbah B3 dari Fasyankes Tk Dasar, USK dan Rumah Tangga</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">2</span>
+                                    <p class="text-gray-700 text-sm">Pengawasan dan Penindakan bagi Pelanggar Kebersihan</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">3</span>
+                                    <p class="text-gray-700 text-sm">Penanganan pengaduan dan penyelesaian sengketa lingkungan</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">4</span>
+                                    <p class="text-gray-700 text-sm">Penegakan Hukum Lingkungan</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">5</span>
+                                    <p class="text-gray-700 text-sm">Pengawasan Pelaksanaan Pengelolaan Lingkungan Hidup</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">6</span>
+                                    <p class="text-gray-700 text-sm">Peningkatan Peringkat Kinerja Perusahaan (PROPER)</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">7</span>
+                                    <p class="text-gray-700 text-sm">Pengawasan Pembatasan Penggunaan Plastik dan Styrofoam</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">8</span>
+                                    <p class="text-gray-700 text-sm">Penanganan Pengaduan Akibat Dugaan Pencemaran dan Perusakan Lingkungan</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <register-block dynamic-section="scripts" key="jsProgramUdara">
+        <script>
+            function toggleAccordion(accordionId) {
+                const accordion = document.getElementById(accordionId);
+                const icon = document.getElementById('icon' + accordionId.slice(-1));
+                
+                if (accordion.classList.contains('hidden')) {
+                    accordion.classList.remove('hidden');
+                    icon.style.transform = 'rotate(180deg)';
+                } else {
+                    accordion.classList.add('hidden');
+                    icon.style.transform = 'rotate(0deg)';
+                }
+            }
+        </script>
+    </register-block>

Views/Program/PerjanjianKinerja.cshtml

@@ -0,0 +1,196 @@
+@{
+    Layout = "_Layout";
+
+    ViewData["Title"] = "Perjanjian Kinerja Pemerintah - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["Description"] = "Perjanjian Kinerja Pemerintah - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["Keywords"] = "Perjanjian Kinerja Pemerintah, DLH, Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["OgTitle"] = "Perjanjian Kinerja Pemerintah - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["OgDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["TwitterTitle"] = "Perjanjian Kinerja Pemerintah - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["TwitterDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
+
+    // Breadcumb
+    ViewData["BreadcrumbText"] = "Perjanjian Kinerja Pemerintah";
+    ViewData["TitleBeforeHighlight"] = "Laporan Kinerja";
+    ViewData["TitleHighlight"] = "Instansi Pemerintahan";
+}
+    <!-- Breadcumb -->
+    <partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />
+
+    <!-- Content Section -->
+    <section class="container mx-auto px-6 lg:px-12 py-16">
+        <div class="max-w-6xl mx-auto space-y-12">
+            <div class="bg-white rounded-3xl shadow-2xl p-8 lg:p-12 border border-gray-100 space-y-4">
+                <!-- Accordion Item 1 -->
+                <div class="border border-gray-200 rounded-xl overflow-hidden">
+                    <button class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-cyan-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between" onclick="toggleAccordion('accordion1')">
+                        <div class="flex items-center space-x-3">
+                            <i class="text-orange-600" data-lucide="book-open"></i>
+                            <h3 class="text-lg font-semibold text-gray-800">Definisi & Dasar Hukum</h3>
+                            <p></p>
+                        </div>
+                        <i class="text-gray-600 transition-transform duration-200" data-lucide="chevron-down" id="icon1"></i>
+                    </button>
+                    <div id="accordion1" class="hidden px-6 py-4 bg-white">
+                        <p class="text-gray-700 leading-relaxed text-md mb-6">
+                           Berdasarkan Peraturan Gubernur Daerah Khusus Ibukota Jakarta Nomor 121 Tahun 2020, Tentang Penyelenggaraan Sistem Akuntabilitas Kinerja Instansi Pemerintah
+                        </p>
+                        <div class="grid gap-3">
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">1</span>
+                                    <p class="text-gray-700 text-sm">Sistem Akuntabilitas Kinerja Instansi Pemerintah yang selanjutnya disingkat SAKIP adalah rangkaian sistematik dari berbagai aktivitas, alat, dan prosedur yang dirancang untuk tujuan penetapan dan pengukuran, pengumpulan data, pengklasifikasian, pengikhtisaran, dan pelaporan kinerja pada instansi pemerintah, dalam rangka pertanggungjawaban dan peningkatan kinerja instansi pemerintah.</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">2</span>
+                                    <p class="text-gray-700 text-sm">Indikator Kinerja adalah ukuran keberhasilan yang akan dicapai dari kinerja program dan kegiatan yang telah direncanakan.</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">3</span>
+                                    <p class="text-gray-700 text-sm">Indikator Kinerja Utama adalah ukuran keberhasilan organisasi/ unit/ pegawai dalam mencapai sasaran sebagai penjabaran tugas dan fungsi organisasi/unit/pegawai.</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">4</span>
+                                    <p class="text-gray-700 text-sm">Perjanjian Kinerja adalah lembar/ dokumen yang berisikan penugasan dari pimpinan instansi yang lebih tinggi kepada pimpinan instansi yang lebih rendah untuk melaksanakan program/kegiatan yang disertai dengan indikator kinerja utama.</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">5</span>
+                                    <p class="text-gray-700 text-sm">Perencanaan Kinerja adalah merupakan proses penyusunan rencana kinerja sebagai penjabaran dari sasaran dan program yang telah ditetapkan dalam rencana stratejik, yang dilaksanakan oleh instansi pemerintah melalui berbagai kegiatan tahunan.</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">6</span>
+                                    <p class="text-gray-700 text-sm">Pengukuran Kinerja adalah proses pengumpulan, analisis, dan/ atau pelaporan informasi mengenai kinerja organisasi dalam proses ini, organisasi menetapkan parameter hasil untuk dicapai oleh program, investasi, dan akuisisi yang dilakukan.</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">7</span>
+                                    <p class="text-gray-700 text-sm">Laporan Kinerja adalah ikhtisar yang menjelaskan secara ringkas dan lengkap tentang evaluasi dan analisa capaian kinerja yang disusun berdasarkan rencana kerja yang ditetapkan dalam rangka pelaksanaan Anggaran Pendapatan dan Belanja Daerah.</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">8</span>
+                                    <p class="text-gray-700 text-sm">Pegawai Negeri Sipil yang selanjutnya disingkat PNS adalah PNS yang bertugas pada PD/UKPD atau yang ditugaskan Gubernur di luar PD/UKPD</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="mt-6 p-4 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg border-l-4 border-blue-500">
+                            <p class="text-sm font-semibold text-blue-800 mb-2">Sumber:</p>
+                            <p class="text-sm text-blue-700">PERGUB NO.121 TAHUN 2020 Tentang Penyelenggaraan SAKIP</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <h2 class="text-3xl font-bold text-gray-800 mb-12 text-center">Dokumen Terkait</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Document Card 2024 -->
+                <div class="group bg-white rounded-2xl shadow-xl hover:shadow-2xl transform hover:-translate-y-3 transition-all duration-500 overflow-hidden border border-gray-200 relative">
+                    <div class="absolute inset-0 bg-gradient-to-br from-green-500/5 to-teal-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+                    <div class="bg-gradient-to-br from-green-50 via-emerald-50 to-teal-100 p-8 text-center relative">
+                        <div class="absolute top-4 right-4 z-10">
+                            <span class="bg-gradient-to-r from-orange-500 to-red-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg animate-pulse">ARSIP</span>
+                        </div>
+                        <div class="w-24 h-24 mx-auto mb-6 bg-white rounded-full flex items-center justify-center shadow-xl group-hover:shadow-2xl group-hover:scale-110 transition-all duration-500 border-4 border-green-100">
+                            <img src="@Url.Content("~/lambang-dki.png")" alt="Jakarta Logo" class="w-14 h-14">
+                        </div>
+                        <p class="text-sm font-bold text-gray-700 tracking-wide">PEMERINTAH PROVINSI</p>
+                        <p class="text-sm font-bold text-gray-700 tracking-wide">DAERAH KHUSUS IBUKOTA</p>
+                        <p class="text-xl font-black text-green-600 mt-3 tracking-wider">JAKARTA</p>
+                        <div class="mt-6 p-4 bg-white/90 backdrop-blur-sm rounded-xl shadow-lg border border-green-100 group-hover:bg-white group-hover:scale-105 transition-all duration-500">
+                            <p class="text-sm font-semibold text-gray-600 tracking-wide">PERJANJIAN KINERJA PEMERINTAH</p>
+                            <p class="text-2xl font-black text-green-600 mt-1">2024</p>
+                        </div>
+                    </div>
+                    <div class="p-8 relative z-10">
+                        <a href="#" class="w-full bg-gradient-to-r from-green-600 via-emerald-600 to-teal-600 text-white px-6 py-4 rounded-xl text-sm font-bold hover:from-green-700 hover:via-emerald-700 hover:to-teal-700 transition-all duration-300 flex items-center justify-center group-hover:shadow-xl shadow-lg transform hover:scale-105">
+                            <i class="w-5 h-5 mr-2 group-hover:animate-bounce" data-lucide="file-down"></i>
+                            Download PDF
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Document Card 2023 -->
+                <div class="group bg-white rounded-2xl shadow-xl hover:shadow-2xl transform hover:-translate-y-3 transition-all duration-500 overflow-hidden border border-gray-200 relative">
+                    <div class="absolute inset-0 bg-gradient-to-br from-green-500/5 to-teal-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+                    <div class="bg-gradient-to-br from-green-50 via-emerald-50 to-teal-100 p-8 text-center relative">
+                        <div class="absolute top-4 right-4 z-10">
+                            <span class="bg-gradient-to-r from-orange-500 to-red-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg animate-pulse">ARSIP</span>
+                        </div>
+                        <div class="w-24 h-24 mx-auto mb-6 bg-white rounded-full flex items-center justify-center shadow-xl group-hover:shadow-2xl group-hover:scale-110 transition-all duration-500 border-4 border-green-100">
+                            <img src="@Url.Content("~/lambang-dki.png")" alt="Jakarta Logo" class="w-14 h-14">
+                        </div>
+                        <p class="text-sm font-bold text-gray-700 tracking-wide">PEMERINTAH PROVINSI</p>
+                        <p class="text-sm font-bold text-gray-700 tracking-wide">DAERAH KHUSUS IBUKOTA</p>
+                        <p class="text-xl font-black text-green-600 mt-3 tracking-wider">JAKARTA</p>
+                        <div class="mt-6 p-4 bg-white/90 backdrop-blur-sm rounded-xl shadow-lg border border-green-100 group-hover:bg-white group-hover:scale-105 transition-all duration-500">
+                            <p class="text-sm font-semibold text-gray-600 tracking-wide">PERJANJIAN KINERJA PEMERINTAH</p>
+                            <p class="text-2xl font-black text-green-600 mt-1">2023</p>
+                        </div>
+                    </div>
+                    <div class="p-8 relative z-10">
+                        <a href="#" class="w-full bg-gradient-to-r from-green-600 via-emerald-600 to-teal-600 text-white px-6 py-4 rounded-xl text-sm font-bold hover:from-green-700 hover:via-emerald-700 hover:to-teal-700 transition-all duration-300 flex items-center justify-center group-hover:shadow-xl shadow-lg transform hover:scale-105">
+                            <i class="w-5 h-5 mr-2 group-hover:animate-bounce" data-lucide="file-down"></i>
+                            Download PDF
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Document Card 2020-2022 -->
+                <div class="group bg-white rounded-2xl shadow-xl hover:shadow-2xl transform hover:-translate-y-3 transition-all duration-500 overflow-hidden border border-gray-200 relative">
+                    <div class="absolute inset-0 bg-gradient-to-br from-green-500/5 to-teal-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+                    <div class="bg-gradient-to-br from-green-50 via-emerald-50 to-teal-100 p-8 text-center relative">
+                        <div class="absolute top-4 right-4 z-10">
+                            <span class="bg-gradient-to-r from-orange-500 to-red-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg animate-pulse">ARSIP</span>
+                        </div>
+                        <div class="w-24 h-24 mx-auto mb-6 bg-white rounded-full flex items-center justify-center shadow-xl group-hover:shadow-2xl group-hover:scale-110 transition-all duration-500 border-4 border-green-100">
+                            <img src="@Url.Content("~/lambang-dki.png")" alt="Jakarta Logo" class="w-14 h-14">
+                        </div>
+                        <p class="text-sm font-bold text-gray-700 tracking-wide">PEMERINTAH PROVINSI</p>
+                        <p class="text-sm font-bold text-gray-700 tracking-wide">DAERAH KHUSUS IBUKOTA</p>
+                        <p class="text-xl font-black text-green-600 mt-3 tracking-wider">JAKARTA</p>
+                        <div class="mt-6 p-4 bg-white/90 backdrop-blur-sm rounded-xl shadow-lg border border-green-100 group-hover:bg-white group-hover:scale-105 transition-all duration-500">
+                            <p class="text-sm font-semibold text-gray-600 tracking-wide">PERJANJIAN KINERJA PEMERINTAH</p>
+                            <p class="text-2xl font-black text-green-600 mt-1">2020-2022</p>
+                        </div>
+                    </div>
+                    <div class="p-8 relative z-10">
+                        <a href="#" class="w-full bg-gradient-to-r from-green-600 via-emerald-600 to-teal-600 text-white px-6 py-4 rounded-xl text-sm font-bold hover:from-green-700 hover:via-emerald-700 hover:to-teal-700 transition-all duration-300 flex items-center justify-center group-hover:shadow-xl shadow-lg transform hover:scale-105">
+                            <i class="w-5 h-5 mr-2 group-hover:animate-bounce" data-lucide="file-down"></i>
+                            Download PDF
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </section>
+
+    <register-block dynamic-section="scripts" key="jsPerjanjianKinerja">
+    <script>
+        function toggleAccordion(accordionId) {
+            const accordion = document.getElementById(accordionId);
+            const icon = document.getElementById('icon' + accordionId.slice(-1));
+            
+            if (accordion.classList.contains('hidden')) {
+                accordion.classList.remove('hidden');
+                icon.style.transform = 'rotate(180deg)';
+            } else {
+                accordion.classList.add('hidden');
+                icon.style.transform = 'rotate(0deg)';
+            }
+        }
+    </script>
+</register-block>
+

Views/Program/RencanaStrategis.cshtml

@@ -0,0 +1,105 @@
+@{
+    Layout = "_Layout";
+
+    ViewData["Title"] = "Rencana Strategis - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["Description"] = "Rencana Strategis - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["Keywords"] = "Rencana Strategis, DLH, Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["OgTitle"] = "Rencana Strategis - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["OgDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["TwitterTitle"] = "Rencana Strategis - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["TwitterDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
+
+    // Breadcumb
+    ViewData["BreadcrumbText"] = "Rencana & Strategis";
+    ViewData["TitleBeforeHighlight"] = "Rencana";
+    ViewData["TitleHighlight"] = "dan Strategis";
+}
+    <!-- Breadcumb -->
+    <partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />
+
+    <!-- Content Section -->
+    <section class="container mx-auto px-6 lg:px-12 py-16">
+        <div class="max-w-6xl mx-auto space-y-12">
+            <!-- Accordion Container -->
+            <div class="bg-white rounded-3xl shadow-2xl p-8 lg:p-12 border border-gray-100 space-y-4">
+                <!-- Accordion Item 1 -->
+                <div class="border border-gray-200 rounded-xl overflow-hidden">
+                    <button class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-red-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between" onclick="toggleAccordion('accordion1')">
+                        <div class="flex items-center space-x-3">
+                             <i class="text-orange-600" data-lucide="file-text"></i>
+                            <h3 class="text-lg font-semibold text-gray-800">Rencana Strategis 2023-2026</h3>
+                        </div>
+                        <i class="text-gray-600 transition-transform duration-200" data-lucide="chevron-down" id="icon1"></i>
+                    </button>
+                    <div id="accordion1" class="hidden px-6 py-4 bg-white">
+                        <p class="text-gray-700 leading-relaxed text-md mb-6">
+                            Menindaklanjuti amanat Undang-undang Nomor 10 tahun 2016 tentang Perubahan Kedua Atas Undang-undang Nomor 1 Tahun 2015 tentang Penetapan Peraturan Pemerintah Pengganti Undang-undang Nomor 1 Nomor 2014 tentang Pemilihan Gubernur, Bupati, dan Walikota Menjadi Undang-undang, yang salah satu amanatnya adalah dilaksanakan pemilu kepala daerah serentak secara nasional pada Tahun 2024 maka telah ditetapkan Instruksi Menteri Dalam Negeri Nomor 70 Tahun 2021 tentang Penyusunan Dokumen Perencanaan Pembangunan Daerah Bagi Daerah Dengan Masa Jabatan Kepala Daerah Berakhir Pada Tahun 2022.
+                        </p>
+                        <p class="text-gray-700 leading-relaxed text-md mb-6">
+                            Instruksi Menteri Dalam Negeri ini menginstruksikan kepada Gubernur yang masa jabatannya berakhir Tahun 2022 agar menyusun Dokumen Perencanaan Pembangunan Menengah Daerah Tahun 2023-2026 yang selanjutanya disebut sebagai Rencana Pembangunan Daerah Provinsi Tahun 2023-2026, serta memerintahkan kepada seluruh Kepala Perangkat Daerah (PD) utuk menyusun Rencana Strategis Perangkat Daerah (Renstra PD) Provinsi Tahun 2023-2026.
+                        </p>
+                        <div class="bg-gradient-to-r from-blue-50 to-cyan-50 rounded-lg p-6 border-l-4 border-blue-500 mb-6">
+                            <h4 class="text-lg font-semibold text-gray-800 mb-3">Dasar Penyusunan Renstra</h4>
+                            <p class="text-gray-700 text-sm leading-relaxed">
+                                Dinas Lingkungan Hidup sebagai Perangkat Daerah menyusun Rencana Strategis Dinas Lingkungan Hidup Provinsi DKI Jakarta Tahun 2023-2026 dengan memperhatikan tujuan, sasaran Rencana Pembangunan Daerah Provinsi DKI Jakarta Tahun 2023-2026 dan norma, standar, prosedur, dan kriteria yang ditetapkan oleh Pemerintah Pusat yang menjadi kewenangan daerah berdasarkan kondisi dan potensi yang dimiliki Dinas Lingkungan Hidup.
+                            </p>
+                        </div>
+                        <div class="bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg p-6 border-l-4 border-green-500">
+                            <h4 class="text-lg font-semibold text-gray-800 mb-3">Implementasi Renstra</h4>
+                            <p class="text-gray-700 text-sm leading-relaxed">
+                                Renstra ini yang selanjutnya akan menjadi dasar penyusunan Rencana Kerja Tahun 2023 dan selanjutnya sampai ditetapkannya Gubernur terpilih. Rencana Pembangunan Daerah Tahun 2023-2026 dan Renstra PD Tahun 2023-2026 ditetapkan dengan Peraturan Kepala Daerah.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Accordion Item 2 -->
+                <div class="border border-gray-200 rounded-xl overflow-hidden">
+                    <button class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-red-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between" onclick="toggleAccordion('accordion2')">
+                        <div class="flex items-center space-x-3">
+                            <i class="text-orange-600" data-lucide="file-text"></i>
+                            <h3 class="text-lg font-semibold text-gray-800">Rencana Strategis 2017-2022</h3>
+                        </div>
+                        <i class="text-gray-600 transition-transform duration-200" data-lucide="chevron-down" id="icon2"></i>
+                    </button>
+                    <div id="accordion2" class="hidden px-6 py-4 bg-white">
+                        <p class="text-gray-700 leading-relaxed text-md mb-6">
+                            Undang-Undang Nomor 25 Tahun 2004 tentang Sistem Perencanaan Pembangunan Nasional dan Undang-Undang Nomor 32 Tahun 2004 tentang Pemerintah Daerah mengamanatkan agar Satuan Kerja Perangkat Daerah menyusun Rencana Strategis (Renstra) sebagai dokumen perencanaan jangka menengah lima tahun.
+                        </p>
+                        <p class="text-gray-700 leading-relaxed text-md mb-6">
+                            Dalam rangka melaksanakan ketentuan tersebut, Dinas Lingkungan Hidup Provinsi DKI Jakarta menyusun Renstra tahun 2017-2022, yang merupakan dokumen perencanaan untuk mengarahkan pelayanan Dinas Lingkungan khususnya dan pembangunan daerah pada umumnya dalam jangka waktu 5 (lima) tahun mendatang.
+                        </p>
+                        <div class="bg-gradient-to-r from-blue-50 to-cyan-50 rounded-lg p-6 border-l-4 border-blue-500 mb-6">
+                            <h4 class="text-lg font-semibold text-gray-800 mb-3">Dasar Penyusunan Renstra</h4>
+                            <p class="text-gray-700 text-sm leading-relaxed">
+                                Dokumen Renstra Dinas Lingkungan Hidup Provinsi DKI Jakarta berpedoman pada Rencana Pembangunan Jangka Menengah Daerah (RPJMD) dan merupakan uraian pencapaian Visi, Misi, Tujuan dan Sasaran Gubernur terpilih periode 2017-2022 untuk urusan lingkungan hidup.
+                            </p>
+                        </div>
+                        <div class="bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg p-6 border-l-4 border-green-500">
+                            <h4 class="text-lg font-semibold text-gray-800 mb-3">Implementasi dan Komitmen</h4>
+                            <p class="text-gray-700 text-sm leading-relaxed">
+                                Keberhasilan pencapaian visi, misi, tujuan dan sasaran tersebut secara langsung menjadi tanggung jawab Dinas Lingkungan Hidup Provinsi DKI Jakarta yang diuraikan secara detil dalam strategi, kebijakan, program dan kegiatan pembangunan di bidang lingkungan hidup berdasarkan kondisi dan potensi daerah di Provinsi DKI Jakarta. Renstra ini dapat dijadikan sebagai pedoman dan arah dalam upaya mencapai sasaran-sasaran Dinas Lingkungan Hidup untuk mendukung arah dan kebijakan pembangunan daerah dalam 5 (lima) tahun kedepan.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <register-block dynamic-section="scripts" key="jsProgramUdara">
+        <script>
+            function toggleAccordion(accordionId) {
+                const accordion = document.getElementById(accordionId);
+                const icon = document.getElementById('icon' + accordionId.slice(-1));
+                
+                if (accordion.classList.contains('hidden')) {
+                    accordion.classList.remove('hidden');
+                    icon.style.transform = 'rotate(180deg)';
+                } else {
+                    accordion.classList.add('hidden');
+                    icon.style.transform = 'rotate(0deg)';
+                }
+            }
+        </script>
+    </register-block>

Views/Program/Sampah.cshtml

@@ -0,0 +1,355 @@
+@{
+    Layout = "_Layout";
+
+    ViewData["Title"] = "Program Sampah - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["Description"] = "Program Sampah - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["Keywords"] = "Program Sampah, DLH, Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["OgTitle"] = "Program Sampah - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["OgDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["TwitterTitle"] = "Program Sampah - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["TwitterDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
+
+    // Breadcumb
+    ViewData["BreadcrumbText"] = "Program Pengelolaan Sampah Dinas Lingkungan Hidup Provinsi DKI Jakarta";
+    ViewData["TitleBeforeHighlight"] = "Inovasi Pengelolaan Sampah";
+    ViewData["TitleHighlight"] = "Menuju Jakarta Bebas Sampah";
+}
+    <!-- Breadcumb -->
+    <partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />
+
+    <!-- Content Section -->
+    <section class="container mx-auto px-6 lg:px-12 py-16">
+        <div class="max-w-6xl mx-auto space-y-12">
+            <!-- Accordion Container -->
+            <div class="bg-white rounded-3xl shadow-2xl p-8 lg:p-12 border border-gray-100 space-y-4">
+                <!-- Accordion Item 1 -->
+                <div class="border border-gray-200 rounded-xl overflow-hidden">
+                    <button class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-cyan-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between" onclick="toggleAccordion('accordion1')">
+                        <div class="flex items-center space-x-3">
+                            <i class="text-orange-600" data-lucide="book-open"></i>
+                            <h3 class="text-lg font-semibold text-gray-800">Definisi & Dasar Hukum</h3>
+                        </div>
+                        <i class="text-gray-600 transition-transform duration-200" data-lucide="chevron-down" id="icon1"></i>
+                    </button>
+                    <div id="accordion1" class="hidden px-6 py-4 bg-white">
+                        <p class="text-gray-700 leading-relaxed text-md mb-6">
+                            Pengelolaan sampah adalah kegiatan yang sistematis, menyeluruh, dan berkesinambungan yang meliputi pengurangan dan penanganan sampah (Undang – Undang Nomor 18 Tahun 2008 tentang Pengelolaan Sampah). Pengelolaan sampah ini meliputi pengurangan dan penanganan sampah. Pelaksanaan pengelolaan sampah di Provinsi DKI Jakarta dilakukan berdasarkan:
+                        </p>
+                        <div class="grid gap-3">
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">1</span>
+                                    <p class="text-gray-700 text-sm">Undang – Undang Nomor 18 Tahun 2008 tentang Pengelolaan Sampah</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">2</span>
+                                    <p class="text-gray-700 text-sm">Peraturan Pemerintah Nomor 81 Tahun 2012 tentang Pengelolaan Sampah Rumah Tangga dan Sampah Sejenis Sampah Rumah Tangga</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">3</span>
+                                    <p class="text-gray-700 text-sm">Peraturan Menteri Dalam Negeri Nomor 33 Tahun 2010 tentang Pedoman Pengelolaan Sampah</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">4</span>
+                                    <p class="text-gray-700 text-sm">Peraturan Menteri Pekerjaan Umum Nomor 3 Tahun 2013 Tentang Penyelenggaraan Prasarana Dan Sarana Persampahan Dalam Penanganan Sampah Rumah Tangga Dan Sampah Sejenis Sampah Rumah Tangga</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">5</span>
+                                    <p class="text-gray-700 text-sm">Peraturan Daerah Nomor 3 Tahun 2013 tentang Pengelolaan Sampah yang diubah dengan Peraturan Daerah Nomor 4 Tahun 2019</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">6</span>
+                                    <p class="text-gray-700 text-sm">Rencana Strategis 2017 – 2022 Dinas Lingkungan Hidup Provinsi DKI Jakarta</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Accordion Item 2 -->
+                <div class="border border-gray-200 rounded-xl overflow-hidden">
+                    <button class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-cyan-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between" onclick="toggleAccordion('accordion2')">
+                        <div class="flex items-center space-x-3">
+                            <i class="text-orange-600" data-lucide="file-text"></i>
+                            <h3 class="text-lg font-semibold text-gray-800">Program & Rencana Kerja 2020</h3>
+                        </div>
+                        <i class="text-gray-600 transition-transform duration-200" data-lucide="chevron-down" id="icon2"></i>
+                    </button>
+                    <div id="accordion2" class="hidden px-6 py-4 bg-white">
+                        <p class="text-gray-700 leading-relaxed text-md mb-6">
+                            Program / Rencana Kerja Dinas Lingkungan Hidup Tahun 2020 yang terkait dengan Pengelolaan Sampah antara lain:
+                        </p>
+                        <div class="grid gap-3">
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">1</span>
+                                    <p class="text-gray-700 text-sm">Jasa Pendampingan Pengelolaan Sampah</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">2</span>
+                                    <p class="text-gray-700 text-sm">Optimalisasi TPS 3R di wilayah</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">3</span>
+                                    <p class="text-gray-700 text-sm">Peningkatan Pengolahan Sampah di TPS</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">4</span>
+                                    <p class="text-gray-700 text-sm">Perbaikan/Rehabilitasi TPS</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">5</span>
+                                    <p class="text-gray-700 text-sm">Pemantauan Kinerja Pengelolaan Sampah di DKI Jakarta</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">6</span>
+                                    <p class="text-gray-700 text-sm">Penyusunan Kebijakan Pengelolaan Sampah</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">7</span>
+                                    <p class="text-gray-700 text-sm">Perencanaan Pembangunan Fasilitas Pengelolaan Sampah</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">8</span>
+                                    <p class="text-gray-700 text-sm">Perencanaan Pemeliharaan Alat Pemusnah Sampah (L-Box)</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">9</span>
+                                    <p class="text-gray-700 text-sm">Pembentukan dan Peningkatan Kapasitas Bank Sampah</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">10</span>
+                                    <p class="text-gray-700 text-sm">Pemberdayaan Usaha dan Produk Daur Ulang Ramah Lingkungan</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">11</span>
+                                    <p class="text-gray-700 text-sm">Pembinaan dan pengadaan sarana prasarana composting</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">12</span>
+                                    <p class="text-gray-700 text-sm">Pembinaan Masyarakat Peduli Lingkungan</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">13</span>
+                                    <p class="text-gray-700 text-sm">Penanganan Kebersihan Dengan Pekerja Kontrak Perorangan</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">14</span>
+                                    <p class="text-gray-700 text-sm">Pendampingan Persiapan Pembangunan ITF</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">15</span>
+                                    <p class="text-gray-700 text-sm">Pemeliharaan Saringan Sampah</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">16</span>
+                                    <p class="text-gray-700 text-sm">Pemeliharaan Prasarana dan Sarana TPST Bantar gebang</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">17</span>
+                                    <p class="text-gray-700 text-sm">Optimalisasi usia pakai TPST Bantar gebang</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">18</span>
+                                    <p class="text-gray-700 text-sm">Pembangunan saringan sampah di perbatasan</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">19</span>
+                                    <p class="text-gray-700 text-sm">Pemeliharaan Fasilitas Pengolahan Sampah JRC Pesanggrahan</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">20</span>
+                                    <p class="text-gray-700 text-sm">Pemeliharaan Saringan Sampah</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">21</span>
+                                    <p class="text-gray-700 text-sm">Pengadaan Alat Biopori dan Kelengkapannya</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">22</span>
+                                    <p class="text-gray-700 text-sm">Pengadaan Dermaga Sampah</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">23</span>
+                                    <p class="text-gray-700 text-sm">Pengadaan Lahan untuk Perluasan Area Pembangunan TPS 3R Jl. Siaga Raya Kelurahan Pejaten Barat</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">24</span>
+                                    <p class="text-gray-700 text-sm">Pengadaan Penyekat Sampah</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">25</span>
+                                    <p class="text-gray-700 text-sm">Pengadaan Mesin Kapal Tempel</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">26</span>
+                                    <p class="text-gray-700 text-sm">Pengadaan Penunjang Penanganan Sampah</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">27</span>
+                                    <p class="text-gray-700 text-sm">Pemeliharaan Kendaraan Bermotor Truck (ATPM)</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">28</span>
+                                    <p class="text-gray-700 text-sm">Pemeliharaan Kendaraan Operasional Road Sweeper (ATPM)</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">29</span>
+                                    <p class="text-gray-700 text-sm">Pemeliharaan Kendaraan Operasional Gerobak Motor</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">30</span>
+                                    <p class="text-gray-700 text-sm">Pengadaan Ponton Sampah Sungai/Kali</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">31</span>
+                                    <p class="text-gray-700 text-sm">Pengadaan Tempat Sampah Pilah</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">32</span>
+                                    <p class="text-gray-700 text-sm">Pengadaan Truck Compactor</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">33</span>
+                                    <p class="text-gray-700 text-sm">Pengambilan Sampah Bawah Laut</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">34</span>
+                                    <p class="text-gray-700 text-sm">Pengelolaan Fasilitas Jembatan Timbang</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">35</span>
+                                    <p class="text-gray-700 text-sm">Pengadaan Perahu Karet</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">36</span>
+                                    <p class="text-gray-700 text-sm">Pengadaan Ponton Sampah Sungai/Kali</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">37</span>
+                                    <p class="text-gray-700 text-sm">Peningkatan TPS Limbah B3 Skala Kecamatan</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">38</span>
+                                    <p class="text-gray-700 text-sm">Peningkatan TPS Limbah B3 Skala Kota</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">39</span>
+                                    <p class="text-gray-700 text-sm">Penyediaan BBM KDO/KDO Khusus</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-green-50 to-cyan-50 rounded-lg p-4 border-l-4 border-green-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold">40</span>
+                                    <p class="text-gray-700 text-sm">Perbaikan Emplasemen Perintis Kemerdekaan, BKT Marunda, Manggarai, Pluit, Saringan Kembangan, Sentiong</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <register-block dynamic-section="scripts" key="jsProgramSampah">
+        <script>
+            function toggleAccordion(accordionId) {
+                const accordion = document.getElementById(accordionId);
+                const icon = document.getElementById('icon' + accordionId.slice(-1));
+                
+                if (accordion.classList.contains('hidden')) {
+                    accordion.classList.remove('hidden');
+                    icon.style.transform = 'rotate(180deg)';
+                } else {
+                    accordion.classList.add('hidden');
+                    icon.style.transform = 'rotate(0deg)';
+                }
+            }
+        </script>
+    </register-block>

Views/Program/Udara.cshtml

@@ -0,0 +1,205 @@
+@{
+    Layout = "_Layout";
+
+    ViewData["Title"] = "Program Udara - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["Description"] = "Program Udara - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["Keywords"] = "Program Udara, DLH, Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["OgTitle"] = "Program Udara - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["OgDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["TwitterTitle"] = "Program Udara - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["TwitterDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
+
+    // Breadcumb
+    ViewData["BreadcrumbText"] = "Program Pengendalian Pencemaran Udara";
+    ViewData["TitleBeforeHighlight"] = "Program Pengendalian";
+    ViewData["TitleHighlight"] = "Pencemaran Udara";
+}
+    <!-- Breadcumb -->
+    <partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />
+
+    <!-- Content Section -->
+    <section class="container mx-auto px-6 lg:px-12 py-16">
+        <div class="max-w-6xl mx-auto space-y-12">
+            <!-- Accordion Container -->
+            <div class="bg-white rounded-3xl shadow-2xl p-8 lg:p-12 border border-gray-100 space-y-4">
+                <!-- Accordion Item 1 -->
+                <div class="border border-gray-200 rounded-xl overflow-hidden">
+                    <button class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-red-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between" onclick="toggleAccordion('accordion1')">
+                        <div class="flex items-center space-x-3">
+                            <i class="text-orange-600" data-lucide="scale"></i>
+                            <h3 class="text-lg font-semibold text-gray-800">Definisi & Dasar Hukum</h3>
+                        </div>
+                        <i class="text-gray-600 transition-transform duration-200" data-lucide="chevron-down" id="icon1"></i>
+                    </button>
+                    <div id="accordion1" class="hidden px-6 py-4 bg-white">
+                        <p class="text-gray-700 leading-relaxed text-md mb-6">
+                            Pengendalian pencemaran udara adalah upaya pencegahan dan/atau penanggulangan pencemaran udara serta pemulihan mutu udara (PP Nomor 41 Tahun 1999 Tentang Pengendalian Pencemaran Udara). Pelaksanaan pengendalian Pencemaran Udara di Provinsi DKI Jakarta dilakukan berdasarkan:
+                        </p>
+                        <div class="grid gap-3">
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">1</span>
+                                    <p class="text-gray-700 text-sm">Undang – Undang Nomor 32 Tahun 2009 tentang Perlindungan dan Pengelolaan Lingkungan Hidup</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">2</span>
+                                    <p class="text-gray-700 text-sm">Peraturan Pemerintah Nomor 42 Tahun 1999 tentang Pengendalian Pencemaran Udara</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">3</span>
+                                    <p class="text-gray-700 text-sm">Peraturan Daerah Nomor 2 Tahun 2005 tentang Pengendalian Pencemaran Udara</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">4</span>
+                                    <p class="text-gray-700 text-sm">Peraturan Gubernur Nomor 52 Tahun 2006 tentang Pedoman Pengendalian Kualitas Udara Dalam Ruangan</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">5</span>
+                                    <p class="text-gray-700 text-sm">Peraturan Gubernur Nomor 31 Tahun 2008 tentang Ambang Batas Gas Buang Kendaraan Bermotor</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">6</span>
+                                    <p class="text-gray-700 text-sm">Peraturan Gubernur Nomor 54 Tahun 2008 tentang Baku Mutu Kualitas Udara Dalam Ruangan (KUDR)</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">7</span>
+                                    <p class="text-gray-700 text-sm">Peraturan Gubernur Nomor 131 Tahun 2012 tentang Rencana Aksi Daerah Penurunan Emisi Gas Rumah Kaca</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">8</span>
+                                    <p class="text-gray-700 text-sm">Keputusan Gubernur Nomor 670/2000 tentang Penetapan Baku Mutu Emisi Sumber Tidak Bergerak di Provinsi DKI Jakarta</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">9</span>
+                                    <p class="text-gray-700 text-sm">Keputusan Gubernur Nomor 551/2001 tentang Penetapan Baku Mutu Udara Ambien dan Baku Tingkat Kebisingan di Propinsi DKI Jakarta</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">10</span>
+                                    <p class="text-gray-700 text-sm">Instruksi Gubernur Nomor 66 Tahun 2019 tentang Pengendalian Kualitas Udara</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">11</span>
+                                    <p class="text-gray-700 text-sm">Rencana Strategis 2017 – 2022 Dinas Lingkungan Hidup Provinsi DKI Jakarta</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Accordion Item 2 -->
+                <div class="border border-gray-200 rounded-xl overflow-hidden">
+                    <button class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-red-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between" onclick="toggleAccordion('accordion2')">
+                        <div class="flex items-center space-x-3">
+                            <i class="text-orange-600" data-lucide="file-text"></i>
+                            <h3 class="text-lg font-semibold text-gray-800">Program & Rencana Kerja 2020</h3>
+                        </div>
+                        <i class="text-gray-600 transition-transform duration-200" data-lucide="chevron-down" id="icon2"></i>
+                    </button>
+                    <div id="accordion2" class="hidden px-6 py-4 bg-white">
+                        <p class="text-gray-700 leading-relaxed text-md mb-6">
+                            Program / Rencana Kerja Dinas Lingkungan Hidup Tahun 2020 yang terkait dengan Pengendalian pencemaran udara antara lain:
+                        </p>
+                        <div class="grid gap-3">
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">1</span>
+                                    <p class="text-gray-700 text-sm">Inventarisasi Profil Emisi dan Pelaporan Penurunan Emisi Gas Rumah Kaca Provinsi DKI Jakarta</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">2</span>
+                                    <p class="text-gray-700 text-sm">Pemantauan Kualitas Udara dan Tingkat Kebisingan</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">3</span>
+                                    <p class="text-gray-700 text-sm">Kajian Standarisasi PM 2.5 di Provinsi DKI Jakarta</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">4</span>
+                                    <p class="text-gray-700 text-sm">Pelaksanaan Uji Emisi Kendaraan Bermotor di Provinsi DKI Jakarta</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">5</span>
+                                    <p class="text-gray-700 text-sm">Pelaksanaan Evaluasi Kualitas Udara Perkotaan (EKUP)</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">6</span>
+                                    <p class="text-gray-700 text-sm">Pemantauan Kualitas Lingkungan Udara Hari Bebas Kendaraan Bermotor (HBKB)</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">7</span>
+                                    <p class="text-gray-700 text-sm">Pembinaan Bengkel Pelaksana Uji Emisi Kendaraan Bermotor</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">8</span>
+                                    <p class="text-gray-700 text-sm">Pengadaan alat Pemantau Kualitas Udara</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">9</span>
+                                    <p class="text-gray-700 text-sm">Pemeliharaan dan Perawatan Stasiun Pemantau Kualitas Udara di 5 Wilayah Kota Administrasi dan 3 SPKU bergerak</p>
+                                </div>
+                            </div>
+                            <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-lg p-4 border-l-4 border-orange-500">
+                                <div class="flex items-center space-x-3">
+                                    <span class="flex-shrink-0 w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold">10</span>
+                                    <p class="text-gray-700 text-sm">Perencanaan pengelolaan dan pemanfaatan landfill gas di TPST Bantar gebang</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <register-block dynamic-section="scripts" key="jsProgramUdara">
+        <script>
+            function toggleAccordion(accordionId) {
+                const accordion = document.getElementById(accordionId);
+                const icon = document.getElementById('icon' + accordionId.slice(-1));
+                
+                if (accordion.classList.contains('hidden')) {
+                    accordion.classList.remove('hidden');
+                    icon.style.transform = 'rotate(180deg)';
+                } else {
+                    accordion.classList.add('hidden');
+                    icon.style.transform = 'rotate(0deg)';
+                }
+            }
+        </script>
+    </register-block>

Views/Publikasi/Dikplhd.cshtml

@@ -0,0 +1,281 @@
+@{
+    Layout = "_Layout";
+
+    ViewData["Title"] = "DIKPLHD - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["Description"] = "Dokumen Informasi Kinerja Pengelolaan Lingkungan Hidup Daerah - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["Keywords"] = "DIKPLHD, Dokumen Informasi, Kinerja, Lingkungan Hidup, DLH, Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["OgTitle"] = "DIKPLHD - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["OgDescription"] = "Dokumen Informasi Kinerja Pengelolaan Lingkungan Hidup Daerah - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["TwitterTitle"] = "DIKPLHD - Dinas Lingkungan Hidup DKI Jakarta";
+    ViewData["TwitterDescription"] = "Dokumen Informasi Kinerja Pengelolaan Lingkungan Hidup Daerah - Dinas Lingkungan Hidup DKI Jakarta";
+
+    // Breadcumb
+    ViewData["BreadcrumbText"] = "Dokumen Informasi Kinerja Pengelolaan Lingkungan Hidup Daerah";
+    ViewData["TitleBeforeHighlight"] = "Dokumen Informasi";
+    ViewData["TitleHighlight"] = "Kinerja Pengelolaan Lingkungan Hidup Daerah";
+}
+
+<!-- Breadcumb -->
+<partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />
+
+<div class="flex justify-center">
+    <div class="w-full max-w-6xl py-12">
+        <div class="text-center mb-8">
+            <h1 class="text-3xl font-bold mb-4">DIKPLHD</h1>
+            <p class="text-gray-600 max-w-4xl mx-auto">Daftar Informasi Publik Dinas Lingkungan Hidup Provinsi DKI Jakarta dapat dilihat dihalaman data ini atau dapat dilihat pada halaman pusat data Pemerintah Provinsi DKI Jakarta (data.jakarta.go.id) baik data secara berkala, sesaat dan serta merta apabila dibutuhkan</p>
+        </div>
+    </div>
+</div>
+
+<div class="container max-w-7xl mx-auto pb-8">
+    <div class="flex flex-col lg:flex-row gap-8">
+        <!-- Main Content -->
+        <div class="lg:w-2/3">
+            <div class="bg-gradient-to-br from-white to-gray-50 rounded-xl shadow-lg border border-gray-100 p-8 backdrop-blur-sm">
+                <div class="flex items-center justify-between mb-6">
+                    <h2 class="text-2xl font-bold text-gray-800 flex items-center">
+                        <i class="fas fa-file-archive text-green-600 mr-3"></i>
+                        Dokumen Tersedia
+                    </h2>
+                    <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">4 Dokumen</span>
+                </div>
+
+                <!-- Document Items with Enhanced Design -->
+                <div class="space-y-6">
+                    <!-- Document Item 1 -->
+                    <div class="group bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 hover:border-green-200">
+                        <div class="flex flex-col md:flex-row gap-6">
+                            <!-- Image Preview Column -->
+                            <div class="md:w-1/4">
+                                <div class="relative overflow-hidden rounded-lg">
+                                    
+                                    <img src="https://lingkunganhidup.jakarta.go.id/images/buku2dikplhd2019.png" alt="Document Preview" class="w-full h-32 object-cover group-hover:scale-105 transition-transform duration-300">
+                                    <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
+                                </div>
+                            </div>
+
+                            <!-- Document Details Column -->
+                            <div class="md:w-3/4">
+                                <h3 class="text-xl font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
+                                <p class="text-gray-600 mb-4 leading-relaxed">Ringkasan eksekutif dokumen informasi kinerja pengelolaan lingkungan hidup daerah</p>
+                                <div class="flex flex-wrap justify-between items-center gap-4">
+                                    <div class="flex items-center gap-4">
+                                        <span class="flex items-center text-orange-500 font-medium">
+                                            <i class="far fa-calendar-alt mr-2"></i>12 Jan 2025
+                                        </span>
+                                        <span class="flex items-center text-gray-500">
+                                            <i class="fas fa-download mr-2"></i>673 Download
+                                        </span>
+                                    </div>
+                                    <div class="flex gap-3">
+                                        <a href="#" class="flex items-center text-blue-600 hover:text-blue-800 font-medium transition-colors">
+                                            <i class="fas fa-eye mr-2"></i>View
+                                        </a>
+                                        <a href="#" class="bg-green-600 text-white px-6 py-2 rounded-lg hover:from-green-700 hover:to-green-800 transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
+                                            <i class="fas fa-download mr-2"></i>Download
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Document Item 2 -->
+                    <div class="group bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 hover:border-green-200">
+                        <div class="flex flex-col md:flex-row gap-6">
+                            <div class="md:w-1/4">
+                                <div class="relative overflow-hidden rounded-lg">
+                                    
+                                    <img src="https://lingkunganhidup.jakarta.go.id/images/buku2dikplhd2019.png" alt="Document Preview" class="w-full h-32 object-cover group-hover:scale-105 transition-transform duration-300">
+                                    <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
+                                </div>
+                            </div>
+                            <div class="md:w-3/4">
+                                <h3 class="text-xl font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors">Buku II DIKPLHD Tahun 2019</h3>
+                                <p class="text-gray-600 mb-4 leading-relaxed">Dokumen lengkap informasi kinerja pengelolaan lingkungan hidup daerah</p>
+                                <div class="flex flex-wrap justify-between items-center gap-4">
+                                    <div class="flex items-center gap-4">
+                                        <span class="flex items-center text-orange-500 font-medium">
+                                            <i class="far fa-calendar-alt mr-2"></i>12 Jan 2025
+                                        </span>
+                                        <span class="flex items-center text-gray-500">
+                                            <i class="fas fa-download mr-2"></i>673 Download
+                                        </span>
+                                    </div>
+                                    <div class="flex gap-3">
+                                        <a href="#" class="flex items-center text-blue-600 hover:text-blue-800 font-medium transition-colors">
+                                            <i class="fas fa-eye mr-2"></i>View
+                                        </a>
+                                        <a href="#" class="bg-green-600 text-white px-6 py-2 rounded-lg hover:from-green-700 hover:to-green-800 transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
+                                            <i class="fas fa-download mr-2"></i>Download
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Document Item 3 -->
+                    <div class="group bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 hover:border-green-200">
+                        <div class="flex flex-col md:flex-row gap-6">
+                            <div class="md:w-1/4">
+                                <div class="relative overflow-hidden rounded-lg">
+                                    
+                                    <img src="https://lingkunganhidup.jakarta.go.id/images/buku2dikplhd2019.png" alt="Document Preview" class="w-full h-32 object-cover group-hover:scale-105 transition-transform duration-300">
+                                    <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
+                                </div>
+                            </div>
+                            <div class="md:w-3/4">
+                                <h3 class="text-xl font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors">Laporan Kualitas Udara DKI Jakarta 2023</h3>
+                                <p class="text-gray-600 mb-4 leading-relaxed">Laporan komprehensif mengenai kondisi kualitas udara di wilayah DKI Jakarta</p>
+                                <div class="flex flex-wrap justify-between items-center gap-4">
+                                    <div class="flex items-center gap-4">
+                                        <span class="flex items-center text-orange-500 font-medium">
+                                            <i class="far fa-calendar-alt mr-2"></i>10 Jan 2025
+                                        </span>
+                                        <span class="flex items-center text-gray-500">
+                                            <i class="fas fa-download mr-2"></i>412 Download
+                                        </span>
+                                    </div>
+                                    <div class="flex gap-3">
+                                        <a href="#" class="flex items-center text-blue-600 hover:text-blue-800 font-medium transition-colors">
+                                            <i class="fas fa-eye mr-2"></i>View
+                                        </a>
+                                        <a href="#" class="bg-green-600 text-white px-6 py-2 rounded-lg hover:from-green-700 hover:to-green-800 transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
+                                            <i class="fas fa-download mr-2"></i>Download
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Document Item 4 -->
+                    <div class="group bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 p-6 border border-gray-100 hover:border-green-200">
+                        <div class="flex flex-col md:flex-row gap-6">
+                            <div class="md:w-1/4">
+                                <div class="relative overflow-hidden rounded-lg">
+                                    <div class="absolute top-3 right-3 z-10 bg-green-500 p-2 rounded-full shadow-md">
+                                        <i class="fas fa-file-excel text-white text-sm"></i>
+                                    </div>
+                                    <img src="https://lingkunganhidup.jakarta.go.id/images/buku2dikplhd2019.png" alt="Document Preview" class="w-full h-32 object-cover group-hover:scale-105 transition-transform duration-300">
+                                    <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
+                                </div>
+                            </div>
+                            <div class="md:w-3/4">
+                                <h3 class="text-xl font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors">Data Pengelolaan Lingkungan Hidup 2024</h3>
+                                <p class="text-gray-600 mb-4 leading-relaxed">Data statistik dan analisis komprehensif mengenai pengelolaan lingkungan hidup</p>
+                                <div class="flex flex-wrap justify-between items-center gap-4">
+                                    <div class="flex items-center gap-4">
+                                        <span class="flex items-center text-orange-500 font-medium">
+                                            <i class="far fa-calendar-alt mr-2"></i>5 Jan 2025
+                                        </span>
+                                        <span class="flex items-center text-gray-500">
+                                            <i class="fas fa-download mr-2"></i>289 Download
+                                        </span>
+                                    </div>
+                                    <div class="flex gap-3">
+                                        <a href="#" class="flex items-center text-blue-600 hover:text-blue-800 font-medium transition-colors">
+                                            <i class="fas fa-eye mr-2"></i>View
+                                        </a>
+                                        <a href="#" class="bg-green-600 text-white px-6 py-2 rounded-lg hover:from-green-700 hover:to-green-800 transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
+                                            <i class="fas fa-download mr-2"></i>Download
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Enhanced Sidebar -->
+        <div class="lg:w-1/3 space-y-6">
+            <!-- Search Box -->
+            <div class="bg-gradient-to-br from-white to-green-50 rounded-xl shadow-lg border border-green-100 p-6">
+                <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
+                    <i class="fas fa-search text-green-600 mr-3"></i>
+                    Cari Dokumen
+                </h3>
+                <div class="relative">
+                    <input type="text" class="w-full px-4 py-3 pl-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all" placeholder="Masukkan kata kunci...">
+                    <i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
+                    <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-green-600 text-white px-4 py-2 rounded-md hover:from-green-700 hover:to-green-800 transition-all duration-300 shadow-md">
+                        Cari
+                    </button>
+                </div>
+            </div>
+
+            <!-- Filter Options -->
+            <div class="bg-gradient-to-br from-white to-blue-50 rounded-xl shadow-lg border border-blue-100 p-6">
+                <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
+                    <i class="fas fa-filter text-blue-600 mr-3"></i>
+                    Filter Dokumen
+                </h3>
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-2">Jenis Dokumen</label>
+                        <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                            <option>Semua Jenis</option>
+                            <option>PDF</option>
+                            <option>Excel</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-2">Tahun</label>
+                        <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                            <option>Semua Tahun</option>
+                            <option>2024</option>
+                            <option>2023</option>
+                            <option>2019</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Related Documents -->
+            <div class="bg-gradient-to-br from-white to-purple-50 rounded-xl shadow-lg border border-purple-100 p-6">
+                <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
+                    <i class="fas fa-link text-purple-600 mr-3"></i>
+                    Dokumen Terkait
+                </h3>
+                <div class="space-y-4">
+                    <div class="group flex gap-4 p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300 border border-gray-100 hover:border-purple-200">
+                        <div class="w-16 h-16 flex-shrink-0">
+                            <div class="w-full h-full bg-gradient-to-br from-green-400 to-green-600 rounded-lg flex items-center justify-center">
+                                <i class="fas fa-leaf text-white text-xl"></i>
+                            </div>
+                        </div>
+                        <div class="flex-1">
+                            <h4 class="font-bold mb-1 text-gray-800 group-hover:text-purple-600 transition-colors">Bidang Tata Lingkungan dan Kebersihan</h4>
+                            <p class="text-gray-500 text-sm mb-2 flex items-center">
+                                <i class="far fa-calendar-alt mr-1"></i>12 Jan 2025
+                            </p>
+                            <a href="#" class="text-purple-600 hover:text-purple-800 text-sm font-medium flex items-center">
+                                Kunjungi Laman <i class="fas fa-arrow-right ml-2"></i>
+                            </a>
+                        </div>
+                    </div>
+
+                    <div class="group flex gap-4 p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300 border border-gray-100 hover:border-purple-200">
+                        <div class="w-16 h-16 flex-shrink-0">
+                            <div class="w-full h-full bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg flex items-center justify-center">
+                                <i class="fas fa-shield-alt text-white text-xl"></i>
+                            </div>
+                        </div>
+                        <div class="flex-1">
+                            <h4 class="font-bold mb-1 text-gray-800 group-hover:text-purple-600 transition-colors">Bidang Pengendalian Dampak Lingkungan</h4>
+                            <p class="text-gray-500 text-sm mb-2 flex items-center">
+                                <i class="far fa-calendar-alt mr-1"></i>8 Jan 2025
+                            </p>
+                            <a href="#" class="text-purple-600 hover:text-purple-800 text-sm font-medium flex items-center">
+                                Kunjungi Laman <i class="fas fa-arrow-right ml-2"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

Views/Shared/Error.cshtml

@@ -0,0 +1,25 @@
+@model ErrorViewModel
+@{
+    ViewData["Title"] = "Error";
+}
+
+<h1 class="text-danger">Error.</h1>
+<h2 class="text-danger">An error occurred while processing your request.</h2>
+
+@if (Model.ShowRequestId)
+{
+    <p>
+        <strong>Request ID:</strong> <code>@Model.RequestId</code>
+    </p>
+}
+
+<h3>Development Mode</h3>
+<p>
+    Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
+</p>
+<p>
+    <strong>The Development environment shouldn't be enabled for deployed applications.</strong>
+    It can result in displaying sensitive information from exceptions to end users.
+    For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
+    and restarting the app.
+</p>

Views/Shared/NotFound.cshtml

@@ -0,0 +1,42 @@
+@{
+    ViewData["Title"] = "Page Not Found";
+}
+
+<section class="container mx-auto px-4 py-8 max-w-6xl">
+    <div class="min-h-[60vh] flex items-center justify-center">
+        <div class="text-center space-y-6">
+            <div class="relative">
+                <h1 class="text-9xl font-black text-gray-200 select-none">404</h1>
+                <div class="absolute inset-0 flex items-center justify-center">
+                    <div class="text-2xl font-bold text-gray-700 bg-white px-4 py-2 rounded-lg shadow-lg">
+                        Halaman Tidak Ditemukan
+                    </div>
+                </div>
+            </div>
+            
+            <div class="space-y-4">
+                <p class="text-lg text-gray-600 max-w-md mx-auto">
+                    Ups! Sepertinya halaman yang Anda cari telah berpindah ke TPST atau mungkin sudah di Recycle 🔃
+                </p>
+                
+                <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
+                    <a href="@Url.Action("Index", "Home")" 
+                       class="inline-flex items-center px-6 py-3 bg-orange-500 text-white font-semibold rounded-lg hover:from-orange-600 transform hover:scale-105 transition-all duration-200 shadow-lg">
+                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+                        </svg>
+                        Kembali ke Beranda
+                    </a>
+                </div>
+            </div>
+            
+            <div class="mt-8">
+                <div class="inline-flex items-center space-x-2 text-sm text-gray-500">
+                    <div class="w-2 h-2 bg-red-400 rounded-full animate-pulse"></div>
+                    <span>Error Code: 404</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</section>

Views/Shared/Partials/MegaMenus/_MegaMenu2-Profil.cshtml

@@ -0,0 +1,28 @@
+@using InfiniLore.Lucide
+@addTagHelper *, InfiniLore.Lucide
+
+<div id="mega-menu-2" class="hidden absolute left-0 w-full bg-white shadow-lg border-t border-gray-200 transition-all duration-300 z-40">
+    <div class="max-w-6xl mx-auto px-4 py-6 grid grid-cols-1 md:grid-cols-3 gap-4">
+        <a href="@Url.Action("Organisasi", "Profil")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
+            <div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="users"></i></div>
+            <div>
+                <div class="font-medium text-gray-900 hover:text-orange-700">Struktur Organisasi</div>
+                <p class="text-sm text-gray-500">Susunan organisasi DLH.</p>
+            </div>
+        </a>
+        <a href="@Url.Action("Bidang", "Profil")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
+            <div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="building"></i></div>
+            <div>
+                <div class="font-medium text-gray-900 hover:text-orange-700">Bidang & UPT</div>
+                <p class="text-sm text-gray-500">Informasi bidang kerja & unit pelaksana teknis DLH.</p>
+            </div>
+        </a>
+        <a href="@Url.Action("Tupoksi", "Profil")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
+            <div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="clipboard-list"></i></div>
+            <div>
+                <div class="font-medium text-gray-900 hover:text-orange-700">Tupoksi</div>
+                <p class="text-sm text-gray-500">Tugas pokok dan fungsi DLH.</p>
+            </div>
+        </a>
+    </div>
+</div>

Views/Shared/Partials/MegaMenus/_MegaMenu3-PublikasiData.cshtml

@@ -0,0 +1,28 @@
+@using InfiniLore.Lucide
+@addTagHelper *, InfiniLore.Lucide
+
+<div id="mega-menu-3" class="hidden absolute left-0 w-full bg-white shadow-lg border-t border-gray-200 transition-all duration-300 z-40">
+    <div class="max-w-6xl mx-auto px-4 py-6 grid grid-cols-1 md:grid-cols-3 gap-4">
+        <a href="@Url.Action("DIKPLHD", "Publikasi")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
+            <div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="database"></i></div>
+            <div>
+                <div class="font-medium text-gray-900 hover:text-orange-700">DIKPLH</div>
+                <p class="text-sm text-gray-500">Data dan Informasi Kinerja Pengelolaan Lingkungan Hidup.</p>
+            </div>
+        </a>
+        <a href="#" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
+            <div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="book-open"></i></div>
+            <div>
+                <div class="font-medium text-gray-900 hover:text-orange-700">Peraturan</div>
+                <p class="text-sm text-gray-500">Regulasi terkait lingkungan hidup.</p>
+            </div>
+        </a>
+        <a href="#" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
+            <div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="waves"></i></div>
+            <div>
+                <div class="font-medium text-gray-900 hover:text-orange-700">Kualitas Air</div>
+                <p class="text-sm text-gray-500">Laporan kualitas air terkini.</p>
+            </div>
+        </a>
+    </div>
+</div>

Views/Shared/Partials/MegaMenus/_MegaMenu4-Layanan.cshtml

@@ -0,0 +1,28 @@
+@using InfiniLore.Lucide
+@addTagHelper *, InfiniLore.Lucide
+
+<div id="mega-menu-4" class="hidden absolute left-0 w-full bg-white shadow-lg border-t border-gray-200 transition-all duration-300 z-40">
+    <div class="max-w-6xl mx-auto px-4 py-6 grid grid-cols-1 md:grid-cols-3 gap-4">
+        <a href="#" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
+            <div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="file-check"></i></div>
+            <div>
+                <div class="font-medium text-gray-900 hover:text-orange-700">AMDAL</div>
+                <p class="text-sm text-gray-500">Analisis Dampak Lingkungan.</p>
+            </div>
+        </a>
+        <a href="#" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
+            <div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="banknote"></i></div>
+            <div>
+                <div class="font-medium text-gray-900 hover:text-orange-700">PPID</div>
+                <p class="text-sm text-gray-500">Pejabat Pengelola Informasi dan Dokumentasi.</p>
+            </div>
+        </a>
+        <a href="#" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
+            <div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="truck"></i></div>
+            <div>
+                <div class="font-medium text-gray-900 hover:text-orange-700">Bulky Waste</div>
+                <p class="text-sm text-gray-500">Penjemputan sampah besar.</p>
+            </div>
+        </a>
+    </div>
+</div>

Views/Shared/Partials/MegaMenus/_MegaMenu5-SeputarDLH.cshtml

@@ -0,0 +1,21 @@
+@using InfiniLore.Lucide
+@addTagHelper *, InfiniLore.Lucide
+
+<div id="mega-menu-5" class="hidden absolute left-0 w-full bg-white shadow-lg border-t border-gray-200 transition-all duration-300 z-40">
+    <div class="max-w-6xl mx-auto px-4 py-6 grid grid-cols-1 md:grid-cols-2 gap-4">
+        <a href="#" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
+            <div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="newspaper"></i></div>
+            <div>
+                <div class="font-medium text-gray-900 hover:text-orange-700">Berita</div>
+                <p class="text-sm text-gray-500">Kegiatan dan informasi terkini dari DLH.</p>
+            </div>
+        </a>
+        <a href="#" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
+            <div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="phone"></i></div>
+            <div>
+                <div class="font-medium text-gray-900 hover:text-orange-700">Kontak Kami</div>
+                <p class="text-sm text-gray-500">Informasi kontak untuk keperluan masyarakat.</p>
+            </div>
+        </a>
+    </div>
+</div>

Views/Shared/Partials/_Breadcumb.cshtml

@@ -0,0 +1,96 @@
+@{
+    var breadcrumbText = ViewData["BreadcrumbText"] as string ?? "Default Breadcrumb";
+    var titleBeforeHighlight = ViewData["TitleBeforeHighlight"] as string ?? "Judul Sebelum";
+    var titleHighlight = ViewData["TitleHighlight"] as string ?? "Judul Highlight";
+}
+
+<div class="relative bg-white text-gray-800 py-12 container mx-auto max-w-6xl rounded-2xl shadow-2xl overflow-hidden mt-6 h-80">
+    <!-- Background Image -->
+    <div class="absolute inset-0">
+        <img src="@Url.Content("~/assets/images/bg-breadcumb.png")" alt="Background" class="w-full h-full object-cover object-right md:object-center" />
+    </div>
+    
+    <!-- Animated Background Pattern -->
+    <div class="absolute inset-0 opacity-15">
+        <div class="absolute top-0 left-0 w-48 h-48 bg-green-500 rounded-full mix-blend-multiply filter blur-xl animate-pulse"></div>
+        <div class="absolute top-0 right-0 w-48 h-48 bg-green-500 rounded-full mix-blend-multiply filter blur-xl animate-pulse animation-delay-2000"></div>
+        <div class="absolute bottom-0 left-1/2 w-48 h-48 bg-amber-500 rounded-full mix-blend-multiply filter blur-xl animate-pulse animation-delay-4000"></div>
+    </div>
+    
+    <!-- Grid Pattern Overlay -->
+    <div class="absolute inset-0 bg-gradient-to-r from-transparent via-black/5 to-transparent"></div>
+    
+    <div class="relative px-6 lg:px-12 h-full flex flex-col justify-center">
+        <!-- Modern Breadcrumb -->
+        <nav class="flex items-center justify-center lg:justify-start mb-6 hidden md:flex" aria-label="breadcrumb">
+            <div class="flex items-center space-x-3 bg-orange-500/10 backdrop-blur-sm rounded-full px-5 py-2 border border-gray-300">
+                <a href="@Url.Action("Index", "Home")" class="flex items-center space-x-2 text-gray-700 hover:text-gray-900 transition-all duration-300 group">
+                    <div class="p-1.5 bg-green-500/20 rounded-full group-hover:bg-green-500/40 transition-all duration-300">
+                        <i class="w-3 h-3" data-lucide="home"></i>
+                    </div>
+                    <span class="font-medium text-sm">Beranda</span>
+                </a>
+                <div class="w-px h-4 bg-gray-400"></div>
+                <span class="text-gray-800 font-medium text-sm">@breadcrumbText</span>
+            </div>
+        </nav>
+
+        <!-- Hero Title Section -->
+        <div class="text-center lg:text-left max-w-4xl mx-auto lg:mx-0">
+            <!-- Main Title with Enhanced Typography -->
+            <div class="mb-4">
+                <h1 class="text-2xl lg:text-4xl font-black mb-2 leading-tight tracking-tight">
+                    <span class="block text-gray-800">@titleBeforeHighlight</span>
+                    <span class="block bg-gradient-to-r from-green-600 via-amber-600 to-green-600 bg-clip-text text-transparent animate-pulse">
+                        @titleHighlight
+                    </span>
+                </h1>
+            </div>
+
+            <!-- Subtitle with Icon -->
+            <div class="flex items-center justify-center lg:justify-start space-x-4 mb-4">
+                @* <div class="hidden lg:block w-12 h-px bg-gradient-to-r from-transparent to-green-600"></div> *@
+                <div class="flex items-center space-x-3 bg-green-300/10 backdrop-blur-sm rounded-xl px-4 py-2 border border-gray-300">
+                    <div class="p-1.5 bg-green-500/20 rounded-full hidden md:block">
+                        <i class="w-4 h-4 text-green-600" data-lucide="leaf"></i>
+                    </div>
+                    <p class="text-sm lg:text-base text-gray-700 font-medium">
+                        Dinas Lingkungan Hidup Provinsi DKI Jakarta
+                    </p>
+                </div>
+                @* <div class="hidden lg:block w-12 h-px bg-gradient-to-l from-transparent to-green-600"></div> *@
+            </div>
+
+            <!-- Decorative Elements -->
+            @* <div class="flex justify-center lg:justify-start items-center space-x-3">
+                <div class="w-6 h-6 border-2 border-green-600 rounded-full animate-spin-slow"></div>
+                <div class="w-24 h-0.5 bg-gradient-to-r from-green-600 via-green-600 to-amber-600 rounded-full shadow-lg shadow-green-500/50"></div>
+                <div class="w-6 h-6 border-2 border-green-600 rounded-full animate-spin-slow animation-reverse"></div>
+            </div> *@
+        </div>
+    </div>
+
+    <!-- Bottom Glow Effect -->
+    <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-3/4 h-1 bg-gradient-to-r from-transparent via-green-600 to-transparent blur-sm"></div>
+</div>
+
+<register-block dynamic-section="css" key="cssBreadcumb">
+<style>
+    @@keyframes spin-slow {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+    }
+    .animate-spin-slow {
+        animation: spin-slow 8s linear infinite;
+    }
+    .animation-reverse {
+        animation-direction: reverse;
+    }
+    .animation-delay-2000 {
+        animation-delay: 2s;
+    }
+    .animation-delay-4000 {
+        animation-delay: 4s;
+    }
+</style>
+</register-block>

Views/Shared/Partials/_Footer.cshtml

@@ -0,0 +1,185 @@
+
+<footer class="bg-orange-500 pt-8">
+    <!-- Main Footer Section -->
+    <div class="relative max-w-6xl bg-gradient-to-r from-green-600 to-emerald-700 rounded-2xl mx-auto overflow-hidden shadow-2xl">
+        <!-- Background Pattern -->
+        <div class="absolute inset-0 opacity-20">
+            <div class="absolute inset-0"
+                 style="background-image: url('@Url.Content("~/assets/images/home/bg-green.png")'); background-size: cover; background-position: center;"></div>
+            <div class="absolute inset-0 bg-gradient-to-br from-green-500/30 to-emerald-800/30"></div>
+        </div>
+
+        <!-- Decorative Elements -->
+        <div class="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -translate-y-16 translate-x-16"></div>
+        <div class="absolute bottom-0 left-0 w-24 h-24 bg-white/5 rounded-full translate-y-12 -translate-x-12"></div>
+
+        <div class="relative container mx-auto px-6">
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
+                <!-- Left Section -->
+                <div class="flex flex-col text-center justify-center lg:text-left">
+                    <div class="inline-block">
+                        <h2 class="text-4xl lg:text-5xl font-black text-white mb-2 tracking-tight">SAVE OUR</h2>
+                        <a href="#" class="flip-animate inline-block">
+                            <span class="text-4xl lg:text-5xl font-black text-yellow-300 mb-4 tracking-tight" data-hover="FUTURE">EARTH</span>
+                        </a>
+                    </div>
+                    <p class="text-green-100 text-lg leading-relaxed max-w-sm mx-auto lg:mx-0">
+                        Bersama membangun Jakarta yang hijau dan berkelanjutan untuk generasi mendatang
+                    </p>
+                </div>
+
+                <!-- Center Section -->
+                <div class="relative justify-center items-end hidden md:flex">
+                    <div class="relative">
+                        <div class="absolute inset-0 bg-white/20 rounded-full blur-3xl transform scale-300"></div>
+                        <img src="@Url.Content("~/assets/images/home/monas.svg")" alt="Monas Jakarta" class="relative z-10 max-w-full h-auto max-h-5 md:max-h-7 drop-shadow-2xl">
+                    </div>
+                </div>
+
+                <!-- Right Section -->
+                <div class="text-left py-12">
+                    <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 lg:p-6 border border-white/20">
+                        <h3 class="text-xl lg:text-2xl font-bold text-white mb-4 lg:mb-6 flex items-center justify-center lg:justify-start">
+                              <i class="text-yellow-300 w-6 h-6 lg:w-8 lg:h-8 mr-2" data-lucide="phone-call"></i>
+                            Kontak Kami
+                        </h3>
+
+                        <div class="space-y-3 lg:space-y-4">
+                            <div class="flex items-start space-x-3">
+                                <div class="w-7 h-7 lg:w-8 lg:h-8 bg-yellow-300/20 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
+                                    <i class="text-yellow-300 w-4 h-4"data-lucide="map-pin"></i>
+                                </div>
+                                <div class="text-left">
+                                    <p class="text-white font-medium text-sm lg:text-base">Alamat</p>
+                                    <p class="text-green-100 text-xs lg:text-sm leading-relaxed">
+                                        Jl. Mandala V No.67, RT.1/RW.2, Cililitan, Kramatjati, Kota Jakarta Timur, DKI Jakarta 13640
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div class="flex items-start space-x-3">
+                                <div class="w-7 h-7 lg:w-8 lg:h-8 bg-yellow-300/20 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
+                                     <i class="text-yellow-300 w-4 h-4"data-lucide="phone"></i>
+                                </div>
+                                <div class="text-left">
+                                    <p class="text-white font-medium text-sm lg:text-base">Telepon</p>
+                                    <p class="text-green-100 text-xs lg:text-sm">(021) 8092744</p>
+                                </div>
+                            </div>
+
+                            <div class="flex items-start space-x-3">
+                                <div class="w-7 h-7 lg:w-8 lg:h-8 bg-yellow-300/20 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
+                                     <i class="text-yellow-300 w-4 h-4"data-lucide="mail"></i>
+                                </div>
+                                <div class="text-left">
+                                    <p class="text-white font-medium text-sm lg:text-base">Email</p>
+                                    <p class="text-green-100 text-xs lg:text-sm">dinaslh@jakarta.go.id</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Section 2: Tentang Kami dan Layanan -->
+    <div class="bg-orange-500 py-8">
+        <div class="container max-w-6xl mx-auto px-4">
+            <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center text-white space-y-8 lg:space-y-0">
+                <!-- Tentang Kami -->
+                <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-8 items-start md:items-center">
+                    <div>
+                        <h4 class="font-semibold text-xl md:text-2xl">Tentang<br class="hidden md:block"> Kami</h4>
+                    </div>
+                    <div class="flex flex-col space-y-2">
+                        <a href="#" class="hover:underline">Visi Misi</a>
+                        <a href="#" class="hover:underline">Struktur Organisasi</a>
+                    </div>
+                </div>
+
+                <!-- Layanan -->
+                <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-8 items-start md:items-center">
+                    <div>
+                        <h4 class="font-semibold text-xl md:text-2xl">Layanan</h4>
+                    </div>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-2">
+                        <a href="#" class="hover:underline">Penjemputan e-Waste</a>
+                        <a href="#" class="hover:underline">Bulky Waste</a>
+                        <a href="#" class="hover:underline">Uji Sampel Laboratorium</a>
+                        <a href="#" class="hover:underline">Permohonan Informasi Publik</a>
+                        <a href="#" class="hover:underline">Bus Toilet</a>
+                        <a href="#" class="hover:underline">BPS-RW</a>
+                        <a href="#" class="hover:underline">AMDAL</a>
+                        <a href="#" class="hover:underline">Whistleblowing System</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Bottom Section -->
+    <div class="bg-black py-6">
+        <div class="container max-w-6xl mx-auto px-4">
+            <div class="flex flex-col md:flex-row justify-between items-center text-white space-y-4 md:space-y-0">
+                <a href="@Url.Action("Index", "Home")" class="flex items-center space-x-3">
+                    <img src="https://lingkunganhidup.jakarta.go.id/images/weblink/logo-dlh.png" class="h-8 md:h-10" alt="DLH Logo" />
+                    <div class="text-center md:text-left">
+                        <span class="text-sm md:text-lg font-bold text-white leading-tight">DINAS LINGKUNGAN HIDUP</span>
+                        <span class="block text-xs md:text-sm text-white/70 font-medium">PROVINSI DKI JAKARTA</span>
+                    </div>
+                </a>
+                <div class="text-xs md:text-sm text-center md:text-right">
+                    <p>&copy; @DateTime.Now.Year Dinas Lingkungan Hidup Provinsi Jakarta</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</footer>
+
+<style>
+a.flip-animate {
+    perspective: 1000px;
+    text-decoration: none;
+    outline: none;
+}
+a.flip-animate span {
+    position: relative;
+    display: inline-block;
+    transition: transform 0.6s ease-in-out;
+    transform-origin: 50% 0;
+    transform-style: preserve-3d;
+}
+a.flip-animate span:before {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    content: attr(data-hover);
+    transform: rotateX(-90deg);
+    transform-origin: 50% 0;
+    text-align: center;
+    color: #fde047;
+    backface-visibility: hidden;
+}
+a.flip-animate.flipped span {
+    transform: rotateX(90deg) translateY(-22px);
+    backface-visibility: hidden;
+}
+a.flip-animate.flipped span:before {
+    color: #fbbf24;
+}
+</style>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+        const flipElement = document.querySelector('.flip-animate');
+        
+        if (flipElement) {
+                setInterval(function() {
+                        flipElement.classList.toggle('flipped');
+                }, 1500);
+        }
+});
+</script>

Views/Shared/Partials/_Head.cshtml

@@ -0,0 +1,55 @@
+@{
+    var cssStack = ViewData["CssStack"] as List<string>;
+    string title = ViewData["Title"] as string ?? "Website Resmi Dinas Lingkungan Hidup Provinsi DKI Jakarta";
+    string description = ViewData["Description"] as string ?? "Website Resmi Dinas Lingkungan Hidup Provinsi DKI Jakarta";
+    string keywords = ViewData["Keywords"] as string ?? "Website Resmi Dinas Lingkungan Hidup Provinsi DKI Jakarta";
+    string ogTitle = ViewData["OgTitle"] as string ?? "Dinas Lingkungan Hidup Provinsi DKI Jakarta";
+    string ogDescription = ViewData["OgDescription"] as string ?? "Dinas Lingkungan Hidup Provinsi DKI Jakarta";
+    string twitterTitle = ViewData["TwitterTitle"] as string ?? "Website Resmi Dinas Lingkungan Hidup Provinsi DKI Jakarta";
+    string twitterDescription = ViewData["TwitterDescription"] as string ?? "Dinas Lingkungan Hidup Provinsi DKI Jakarta";
+    string currentUrl = Context.Request.Path;
+}
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>@title</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+
+    <link rel="icon" type="image/ico" href="~/favicon.ico" sizes="16x16">
+    
+
+    <!-- SEO Meta Tags -->
+    <meta name="description" content="@description" />
+    <meta name="keywords" content="@keywords" />
+    <meta name="author" content="Dinas Lingkungan Hidup Provinsi DKI Jakarta" />
+    <meta name="robots" content="index, follow" />
+
+    <!-- Open Graph Meta Tags -->
+    <meta property="og:title" content="@ogTitle" />
+    <meta property="og:description" content="@ogDescription" />
+    <meta property="og:image" content="~/assets/images/logo_color.svg" />
+    <meta property="og:url" content="@currentUrl" />
+    <meta property="og:type" content="website" />
+
+    <!-- Twitter Card Meta Tags -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="@twitterTitle" />
+    <meta name="twitter:description" content="@twitterDescription" />
+    <meta name="twitter:image" content="~/assets/images/logo_color.svg" />
+
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="~/css/output.css" asp-append-version="true" />
+
+    <!-- Stack for CSS -->
+    @if (cssStack != null)
+    {
+        foreach (var css in cssStack)
+        {
+            @Html.Raw(css)
+        }
+    }
+</head>

Views/Shared/Partials/_MegaMenu.cshtml

@@ -0,0 +1,79 @@
+@using InfiniLore.Lucide
+@addTagHelper *, InfiniLore.Lucide
+
+<!-- Mega Menu 1: Program -->
+<div id="mega-menu-1" class="hidden absolute left-0 w-full bg-white shadow-lg border-t border-gray-200 transition-all duration-300 z-40">
+    <div class="max-w-6xl mx-auto px-4 py-6 grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div class="space-y-3">
+            <a href="@Url.Action("Udara", "Program")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
+                <div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="wind"></i></div>
+                <div>
+                    <div class="font-medium text-gray-900 hover:text-orange-700">Udara</div>
+                    <p class="text-sm text-gray-500">Pengelolaan dan pengawasan kualitas udara.</p>
+                </div>
+            </a>
+            <a href="@Url.Action("Sampah", "Program")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
+                <div class="bg-orange-100 rounded-full p-2">
+                 <i class="w-5 h-5 text-orange-600" data-lucide="trash"></i>
+                </div>
+                <div>
+                    <div class="font-medium text-gray-900 hover:text-orange-700">Sampah</div>
+                    <p class="text-sm text-gray-500">Pengawasan kepatuhan lingkungan.</p>
+                </div>
+            </a>
+            <a href="@Url.Action("Anggaran", "Program")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
+                <div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="banknote"></i></div>
+                <div>
+                    <div class="font-medium text-gray-900 hover:text-orange-700">Anggaran</div>
+                    <p class="text-sm text-gray-500">Informasi mengenai anggaran DLH.</p>
+                </div>
+            </a>
+        </div>
+
+        <div class="space-y-3">
+            <a href="@Url.Action("Air", "Program")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
+                <div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="droplet"></i></div>
+                <div>
+                    <div class="font-medium text-gray-900 hover:text-orange-700">Air</div>
+                    <p class="text-sm text-gray-500">Pengelolaan dan pelestarian air.</p>
+                </div>
+            </a>
+            <a href="@Url.Action("LKIP", "Program")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
+                <div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="notebook-text"></i></div>
+                <div>
+                    <div class="font-medium text-gray-900 hover:text-orange-700">LKIP</div>
+                    <p class="text-sm text-gray-500">Laporan Kinerja Instansi Pemerintah.</p>
+                </div>
+            </a>
+            <a href="@Url.Action("Pengawasan", "Program")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
+                <div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="eye"></i></div>
+                <div>
+                    <div class="font-medium text-gray-900 hover:text-orange-700">Pengawasan</div>
+                    <p class="text-sm text-gray-500">Komitmen pencapaian kinerja lingkungan.</p>
+                </div>
+            </a>
+        </div>
+
+        <div class="space-y-3">
+            <a href="@Url.Action("PerjanjianKinerja", "Program")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
+                <div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="file-text"></i></div>
+                <div>
+                    <div class="font-medium text-gray-900 hover:text-orange-700">Perjanjian Kinerja</div>
+                    <p class="text-sm text-gray-500">Upaya pengelolaan sampah terintegrasi.</p>
+                </div>
+            </a>
+            <a href="@Url.Action("RencanaStrategis", "Program")" class="flex items-start gap-3 p-2 rounded-lg hover:bg-orange-50 transition">
+                <div class="bg-orange-100 rounded-full p-2"><i class="w-5 h-5 text-orange-600" data-lucide="target"></i></div>
+                <div>
+                    <div class="font-medium text-gray-900 hover:text-orange-700">Rencana Strategis</div>
+                    <p class="text-sm text-gray-500">Dokumen perencanaan strategis DLH.</p>
+                </div>
+            </a>
+        </div>
+    </div>
+</div>
+
+<partial name="~/Views/Shared/Partials/MegaMenus/_MegaMenu2-Profil.cshtml" />
+<partial name="~/Views/Shared/Partials/MegaMenus/_MegaMenu3-PublikasiData.cshtml" />
+<partial name="~/Views/Shared/Partials/MegaMenus/_MegaMenu4-Layanan.cshtml" />
+<partial name="~/Views/Shared/Partials/MegaMenus/_MegaMenu5-SeputarDLH.cshtml" />

Views/Shared/Partials/_Navbar.cshtml

@@ -0,0 +1,53 @@
+@using InfiniLore.Lucide
+@addTagHelper *, InfiniLore.Lucide
+
+<nav class="bg-white shadow-sm relative z-50">
+    <div class="flex flex-wrap justify-between items-center mx-auto max-w-6xl px-4 py-3 lg:py-4">
+        <a href="@Url.Action("Index", "Home")" class="flex items-center space-x-3">
+            <img src="@Url.Content("~/logo-dlh.png")" class="h-10" alt="DLH Logo" />
+            <div>
+                <span class="text-lg font-bold text-gray-900 leading-tight">DINAS LINGKUNGAN HIDUP</span>
+                <span class="block text-sm text-orange-600 font-medium">PROVINSI DKI JAKARTA</span>
+            </div>
+        </a>
+
+        <!-- Mobile menu button -->
+        <button id="mobile-drawer-button" type="button"
+            class="inline-flex items-center p-2 ml-3 text-gray-700 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-orange-400"
+            aria-controls="mobile-drawer" aria-expanded="false">
+            <span class="sr-only">Open main menu</span>
+            <i class="w-5 h-5" data-lucide="menu"></i>
+            
+        </button>
+
+        <!-- Desktop Menu -->
+        <div class="hidden md:flex md:items-center md:w-auto">
+            <ul class="flex flex-col md:flex-row md:space-x-6 font-medium">
+            <li class="relative group">
+                <a href="@Url.Action("Index", "Home")" class="flex items-center py-2 text-gray-900 hover:text-orange-600">
+                Beranda
+                </a>
+            </li>
+
+            @* Dropdown Menu Buttons *@
+            @{
+                var menus = new[] { "Program", "Profil", "Publikasi Data", "Layanan", "Seputar DLH" };
+            }
+
+            @for (int i = 0; i < menus.Length; i++)
+            {
+                <li class="relative group">
+                <button id="dropdown-button-@(i + 1)"
+                    class="flex items-center justify-between py-2 text-gray-900 hover:text-orange-600 group">
+                    <span>@menus[i]</span>
+                    <i class="w-5 h-5 ml-1 transition-transform group-hover:rotate-180" data-lucide="chevron-down"></i>
+                </button>
+                </li>
+            }
+            </ul>
+        </div>
+    </div>
+
+    <partial name="~/Views/Shared/Partials/_MegaMenu.cshtml" />
+</nav>
+

Views/Shared/Partials/_Scripts.cshtml

@@ -0,0 +1,44 @@
+<script src="~/js/Navbar.js"></script>
+<script>
+    window.assetBaseUrl = '@Url.Content("~/assets/")';
+</script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+@* <script src="~/lib/lucide/lucide.min.js"></script> *@
+<script src="https://unpkg.com/lucide@latest"></script>
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    lucide.createIcons();
+  });
+</script>
+
+<script type="module">
+	@* import { createChat } from 'https://cdn.jsdelivr.net/npm/@@n8n/chat/dist/chat.bundle.es.js'; *@
+
+	createChat({
+	webhookUrl: 'https://n8n.nurarif.in/webhook/f2129606-7716-415b-a83b-b9c0e84b752f/chat',
+	webhookConfig: {
+		method: 'POST',
+		headers: {}
+	},
+	target: '#n8n-chat',
+	mode: 'window',
+	chatInputKey: 'chatInput',
+	chatSessionKey: 'sessionId',
+	metadata: {},
+	showWelcomeScreen: false,
+	defaultLanguage: 'en',
+	initialMessages: [
+		'Hi there! 👋',
+		'My name is Nathan. How can I assist you today?'
+	],
+	i18n: {
+		en: {
+			title: 'Hi there! 👋',
+			subtitle: "Start a chat. We're here to help you 24/7.",
+			footer: '',
+			getStarted: 'New Conversation',
+			inputPlaceholder: 'Type your question..',
+		},
+	},
+});
+</script>

Views/Shared/Partials/_Styles.cshtml

@@ -0,0 +1,34 @@
+<style>
+a.flip-animate {
+    perspective: 1000px;
+    text-decoration: none;
+    outline: none;
+}
+a.flip-animate span {
+    position: relative;
+    display: inline-block;
+    transition: transform 0.6s ease-in-out;
+    transform-origin: 50% 0;
+    transform-style: preserve-3d;
+}
+a.flip-animate span:before {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    content: attr(data-hover);
+    transform: rotateX(-90deg);
+    transform-origin: 50% 0;
+    text-align: center;
+    color: #fde047;
+}
+a.flip-animate.flipped span {
+    transform: rotateX(90deg) translateY(-22px);
+}
+a.flip-animate.flipped span:before {
+    color: #fbbf24;
+}
+</style>
+
+<link href="https://cdn.jsdelivr.net/npm/@@n8n/chat/dist/style.css" rel="stylesheet" />

Views/Shared/_Layout.cshtml

@@ -0,0 +1,77 @@
+
+<!DOCTYPE html>
+<html lang="id">
+
+    @{
+    string title = ViewData["Title"] as string ?? "Website Resmi Dinas Lingkungan Hidup Provinsi DKI Jakarta";
+    string description = ViewData["Description"] as string ?? "Website Resmi Dinas Lingkungan Hidup Provinsi DKI Jakarta";
+    string keywords = ViewData["Keywords"] as string ?? "Website Resmi Dinas Lingkungan Hidup Provinsi DKI Jakarta";
+    string ogTitle = ViewData["OgTitle"] as string ?? "Dinas Lingkungan Hidup Provinsi DKI Jakarta";
+    string ogDescription = ViewData["OgDescription"] as string ?? "Dinas Lingkungan Hidup Provinsi DKI Jakarta";
+    string twitterTitle = ViewData["TwitterTitle"] as string ?? "Website Resmi Dinas Lingkungan Hidup Provinsi DKI Jakarta";
+    string twitterDescription = ViewData["TwitterDescription"] as string ?? "Dinas Lingkungan Hidup Provinsi DKI Jakarta";
+    string currentUrl = Context.Request.Path;
+    }
+
+
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>@title</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+
+        <link rel="icon" type="image/ico" href="~/favicon.ico" sizes="16x16">
+        
+        <!-- SEO Meta Tags -->
+        <meta name="description" content="@description" />
+        <meta name="keywords" content="@keywords" />
+        <meta name="author" content="Dinas Lingkungan Hidup Provinsi DKI Jakarta" />
+        <meta name="robots" content="index, follow" />
+
+        <!-- Open Graph Meta Tags -->
+        <meta property="og:title" content="@ogTitle" />
+        <meta property="og:description" content="@ogDescription" />
+        <meta property="og:image" content="~/assets/images/logo_color.svg" />
+        <meta property="og:url" content="@currentUrl" />
+        <meta property="og:type" content="website" />
+
+        <!-- Twitter Card Meta Tags -->
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:title" content="@twitterTitle" />
+        <meta name="twitter:description" content="@twitterDescription" />
+        <meta name="twitter:image" content="~/assets/images/logo_color.svg" />
+
+        <!-- Fonts -->
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
+        @* <link rel="stylesheet" href="~/css/output.css" asp-append-version="true" /> *@
+        <link rel="stylesheet" href="~/css/style.css" asp-append-version="true" />
+
+        @await RenderSectionAsync("css", required: false)
+        <dynamic-section name="css" />
+    </head>
+
+
+    <body class="font-sans antialiased text-sm text-gray-900 bg-white">
+        <partial name="~/Views/Shared/Partials/_Navbar.cshtml" />
+
+        <main>
+            @RenderBody()
+
+
+        </main>
+
+        <partial name="~/Views/Shared/Partials/_Footer.cshtml" />
+
+        <!-- Tailwind CSS CDN -->
+        @* <script src="https://cdn.jsdelivr.net/npm/@@tailwindcss/browser@4"></script> *@
+
+
+        <!-- Section script stack -->
+        <partial name="~/Views/Shared/Partials/_Scripts.cshtml" />
+        @await RenderSectionAsync("scripts", required: false)
+        <dynamic-section name="scripts" />
+        
+    </body>
+</html>

Views/Shared/_Layout.cshtml.css

@@ -0,0 +1,48 @@
+/* Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
+for details on configuring this project to bundle and minify static web assets. */
+
+/* a.navbar-brand {
+  white-space: normal;
+  text-align: center;
+  word-break: break-all;
+}
+
+a {
+  color: #0077cc;
+}
+
+.btn-primary {
+  color: #fff;
+  background-color: #1b6ec2;
+  border-color: #1861ac;
+}
+
+.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
+  color: #fff;
+  background-color: #1b6ec2;
+  border-color: #1861ac;
+}
+
+.border-top {
+  border-top: 1px solid #e5e5e5;
+}
+.border-bottom {
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.box-shadow {
+  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
+}
+
+button.accept-policy {
+  font-size: 1rem;
+  line-height: inherit;
+}
+
+.footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  white-space: nowrap;
+  line-height: 60px;
+} */

Views/Shared/_ValidationScriptsPartial.cshtml

@@ -0,0 +1,2 @@
+<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
+<script src="~/lib/jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.min.js"></script>

Views/_ViewImports.cshtml

@@ -0,0 +1,6 @@
+@using dlh_net
+@using dlh_net.Models
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+@using InfiniLore.Lucide
+@addTagHelper *, InfiniLore.Lucide
+@addTagHelper *, DynamicSections

Views/_ViewStart.cshtml

@@ -0,0 +1,3 @@
+@{
+    Layout = "_Layout";
+}

appsettings.Development.json

@@ -0,0 +1,8 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  }
+}

appsettings.json

@@ -0,0 +1,9 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  },
+  "AllowedHosts": "*"
+}