initial commit

.gitignore

@@ -0,0 +1,7 @@
+bin/
+obj/
+publish/
+appsettings.Development.json
+*.user
+*.db
+node_modules/

Controllers/SpjAdminController/SpjAdminController.cs

@@ -0,0 +1,237 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using pesapakawan.Models;
+
+namespace pesapakawan.Controllers.SpjAdminController;
+
+[Route("transport/spj-admin")]
+public class SpjAdminController : Controller
+{
+    private static readonly Guid DummySpjGuid = new Guid("9f5b8f3a-1c2d-4a5b-9a7c-1234567890ab");
+    private const string DummySpjNumber = "SPJ/08-2025/PKM/000519";
+
+    [HttpGet("")]
+    public IActionResult Index()
+    {
+        return View("~/Views/Admin/Transport/SpjAdmin/Home/Index.cshtml");
+    }
+
+    [HttpGet("scan")]
+    public IActionResult Scan()
+    {
+        return View("~/Views/Admin/Transport/SpjAdmin/Scan/Index.cshtml");
+    }
+
+    [HttpGet("history")]
+    public IActionResult History()
+    {
+        return View("~/Views/Admin/Transport/SpjAdmin/History/Index.cshtml");
+    }
+
+    [HttpGet("history/details/{id}")]
+    public IActionResult Details(int id)
+    {
+        ViewData["Id"] = id;
+        return View("~/Views/Admin/Transport/SpjAdmin/History/Details.cshtml");
+    }
+
+    [ValidateAntiForgeryToken]
+    [HttpPost("scan/process/{id:guid}", Name = "Admin_Scan_Process")]
+    public IActionResult Process(Guid id)
+    {
+        // GUID yang sudah pernah di scan
+        var alreadyScannedGuid = new Guid("550e8400-e29b-41d4-a716-446655440007");
+        
+        if (id == alreadyScannedGuid)
+        {
+            return Json(new { 
+                success = false, 
+                message = "SPJ ini sudah pernah di scan pada 20 Agustus 2024." 
+            });
+        }
+
+        var validGuids = new[]
+        {
+            DummySpjGuid, // GUID asli yang sudah ada
+            new Guid("550e8400-e29b-41d4-a716-446655440001"), // Ahmad Supriyadi
+            new Guid("550e8400-e29b-41d4-a716-446655440002"), // Budi Santoso
+            new Guid("550e8400-e29b-41d4-a716-446655440003"), // Candra Wijaya
+            new Guid("550e8400-e29b-41d4-a716-446655440004"), // Dedi Kurniawan
+            new Guid("550e8400-e29b-41d4-a716-446655440006")  // Eko Prasetyo gua coba gagalin
+        };
+
+        if (validGuids.Contains(id))
+        {
+            return Json(new { success = true, data = new { id, status = "Valid" } });
+        }
+        
+        return Json(new { success = false, message = "SPJ tidak ditemukan." });
+    }
+
+    [ValidateAntiForgeryToken]
+    [HttpPost("scan/resolve", Name = "Admin_Scan_Resolve")]
+    public IActionResult Resolve([FromForm] string code)
+    {
+        if (string.IsNullOrWhiteSpace(code))
+        {
+            return Json(new { success = false, message = "Kode kosong." });
+        }
+
+        code = code.Trim();
+
+        // Jika sudah GUID, langsung kembalikan (tetap izinkan test langsung GUID dummy)
+        if (Guid.TryParse(code, out var guid))
+        {
+            return Json(new { success = true, id = guid });
+        }
+
+        // Pola SPJ
+        var isSpj = System.Text.RegularExpressions.Regex.IsMatch(
+            code,
+            @"^SPJ/\d{2}-\d{4}/[A-Z]+/\d{6}$",
+            System.Text.RegularExpressions.RegexOptions.IgnoreCase
+        );
+
+        if (!isSpj)
+        {
+            return Json(new { success = false, message = "Format kode tidak dikenali." });
+        }
+
+        // Mapping SPJ code ke GUID (semua dummy data)
+        var spjMapping = new Dictionary<string, Guid>(StringComparer.OrdinalIgnoreCase)
+        {
+            { DummySpjNumber, DummySpjGuid },
+            { "SPJ/01-2024/TRN/240815", new Guid("550e8400-e29b-41d4-a716-446655440001") },
+            { "SPJ/02-2024/TRN/240816", new Guid("550e8400-e29b-41d4-a716-446655440002") },
+            { "SPJ/03-2024/TRN/240817", new Guid("550e8400-e29b-41d4-a716-446655440003") },
+            { "SPJ/04-2024/TRN/240818", new Guid("550e8400-e29b-41d4-a716-446655440004") },
+            { "SPJ/05-2024/TRN/240819", new Guid("550e8400-e29b-41d4-a716-446655440005") },
+            { "SPJ/06-2024/TRN/240820", new Guid("550e8400-e29b-41d4-a716-446655440007") } // Sudah pernah di scan
+        };
+
+        if (spjMapping.TryGetValue(code, out var mappedGuid))
+        {
+            return Json(new { success = true, id = mappedGuid });
+        }
+
+        return Json(new { success = false, message = "SPJ tidak ditemukan." });
+    }
+
+    [HttpGet("search-spj")]
+    public IActionResult SearchSpj(string q, int page = 1, int pageSize = 20)
+    {
+        try 
+        {
+            // Dummy data buat testing
+            var dummySpjList = new[]
+            {
+                new { 
+                    id = "550e8400-e29b-41d4-a716-446655440001",
+                    spjCode = "SPJ/01-2024/TRN/240815",
+                    driverName = "Ahmad Supriyadi",
+                    platNomor = "B 1234 ABC",
+                    nomorPintu = "001"
+                },
+                new { 
+                    id = "550e8400-e29b-41d4-a716-446655440002",
+                    spjCode = "SPJ/02-2024/TRN/240816",
+                    driverName = "Budi Santoso",
+                    platNomor = "B 5678 DEF",
+                    nomorPintu = "002"
+                },
+                new { 
+                    id = "550e8400-e29b-41d4-a716-446655440003",
+                    spjCode = "SPJ/03-2024/TRN/240817",
+                    driverName = "Candra Wijaya",
+                    platNomor = "B 9012 GHI",
+                    nomorPintu = "003"
+                },
+                new { 
+                    id = "550e8400-e29b-41d4-a716-446655440004",
+                    spjCode = "SPJ/04-2024/TRN/240818",
+                    driverName = "Dedi Kurniawan",
+                    platNomor = "B 3456 JKL",
+                    nomorPintu = "004"
+                },
+                new { 
+                    id = "550e8400-e29b-41d4-a716-446655440005",
+                    spjCode = "SPJ/05-2024/TRN/240819",
+                    driverName = "Eko Prasetyo",
+                    platNomor = "B 7890 MNO",
+                    nomorPintu = "005"
+                },
+                new { 
+                    id = DummySpjGuid.ToString(),
+                    spjCode = DummySpjNumber,
+                    driverName = "Fahmi Rahman",
+                    platNomor = "B 2468 PQR",
+                    nomorPintu = "006"
+                },
+                new { 
+                    id = "550e8400-e29b-41d4-a716-446655440007",
+                    spjCode = "SPJ/06-2024/TRN/240820",
+                    driverName = "Gita Sari",
+                    platNomor = "B 1357 STU",
+                    nomorPintu = "007"
+                }
+            };
+
+            var filteredData = dummySpjList.AsQueryable();
+            
+            if (!string.IsNullOrWhiteSpace(q))
+            {
+                q = q.ToLower();
+                filteredData = dummySpjList.Where(s => 
+                    s.spjCode.ToLower().Contains(q) || 
+                    s.driverName.ToLower().Contains(q) ||
+                    s.platNomor.ToLower().Contains(q) ||
+                    s.nomorPintu.ToLower().Contains(q)
+                ).AsQueryable();
+            }
+
+            var total = filteredData.Count();
+            var items = filteredData
+                .Skip((page - 1) * pageSize)
+                .Take(pageSize)
+                .ToList();
+                
+            return Json(new {
+                items = items,
+                hasMore = (page * pageSize) < total
+            });
+
+            /* 
+            // PRODUCTION VERSION - Uncomment untuk production - tambahin sendiri yaa
+            var query = _context.SpjData
+                .Where(s => s.SpjCode.Contains(q) || 
+                           s.DriverName.Contains(q) ||
+                           s.PlatNomor.Contains(q) ||
+                           s.NomorPintu.Contains(q))
+                .OrderBy(s => s.SpjCode);
+                
+            var total = await query.CountAsync();
+            var items = await query
+                .Skip((page - 1) * pageSize)
+                .Take(pageSize)
+                .Select(s => new {
+                    id = s.Id,
+                    spjCode = s.SpjCode,
+                    driverName = s.DriverName,
+                    platNomor = s.PlatNomor,
+                    nomorPintu = s.NomorPintu
+                })
+                .ToListAsync();
+                
+            return Json(new {
+                items = items,
+                hasMore = (page * pageSize) < total
+            });
+            */
+        }
+        catch (Exception ex)
+        {
+            return Json(new { error = ex.Message });
+        }
+    }
+
+}

Controllers/SpjDriverController/DetailController.cs

@@ -0,0 +1,22 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace pesapakawan.Controllers.SpjDriverController
+{
+    [Route("detail-penjemputan")]
+    public class DetailPenjemputanController : Controller
+    {
+
+        [HttpGet("")]
+        public IActionResult Index()
+        {
+            return View("~/Views/Admin/Transport/SpjDriver/DetailPenjemputan/Index.cshtml");
+        }
+
+        [HttpGet("batal")]
+        public IActionResult Batal()
+        {
+            return View("~/Views/Admin/Transport/SpjDriver/DetailPenjemputan/Batal.cshtml");
+        }
+
+    }
+}

Controllers/SpjDriverController/HistoryController.cs

@@ -0,0 +1,22 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace pesapakawan.Controllers.SpjDriverController
+{
+    [Route("history")]
+    public class HistoryController : Controller
+    {
+
+        [HttpGet("")]
+        public IActionResult Index()
+        {
+            return View("~/Views/Admin/Transport/SpjDriver/History/Index.cshtml");
+        }
+
+        [HttpGet("details/{id}")]
+        public IActionResult Details(int id)
+        {
+            ViewData["Id"] = id;
+            return View("~/Views/Admin/Transport/SpjDriver/History/Details.cshtml");
+        }
+    }
+}

Controllers/SpjDriverController/LoginController.cs

@@ -0,0 +1,23 @@
+using Microsoft.AspNetCore.Mvc;
+
+
+namespace pesapakawan.Controllers.SpjDriverController
+{
+    [Route("login")]
+    public class LoginController : Controller
+    {
+        private readonly IConfiguration _configuration;
+
+        public LoginController(IConfiguration configuration)
+        {
+            _configuration = configuration;
+        }
+
+        [HttpGet("")]
+        public IActionResult Index()
+        {
+            ViewBag.SSOLoginUrl = _configuration["SSO:LoginUrl"];
+            return View("~/Views/Admin/Transport/SpjDriver/Login/Index.cshtml");
+        }
+    }
+}

Controllers/SpjDriverController/ProfilController.cs

@@ -0,0 +1,15 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace pesapakawan.Controllers.SpjDriverController
+{
+    [Route("profil")]
+    public class ProfilController : Controller
+    {
+
+        [HttpGet("")]
+        public IActionResult Index()
+        {
+            return View("~/Views/Admin/Transport/SpjDriver/Profil/Index.cshtml");
+        }
+    }
+}

Controllers/SpjDriverController/SpjDriverController.cs

@@ -0,0 +1,33 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using pesapakawan.Models;
+
+namespace pesapakawan.Controllers.SpjDriverController;
+
+[Route("transport/spj-driver")]
+public class SpjDriverController : Controller
+{
+    [HttpGet("")]
+    public IActionResult Index()
+    {
+        return View("~/Views/Admin/Transport/SpjDriver/Home/Index.cshtml");
+    }
+    [HttpGet("kosong")]
+    public IActionResult Kosong()
+    {
+        return View("~/Views/Admin/Transport/SpjDriver/Home/Kosong.cshtml");
+    }
+
+    [HttpGet("detail-penjemputan")]
+    public IActionResult DetailPenjemputan()
+    {
+        return View("~/Views/Admin/Transport/SpjDriver/DetailPenjemputan/Index.cshtml");
+    }
+
+    [HttpGet("detail-penjemputan/batal")]
+    public IActionResult BatalJemput()
+    {
+        return View("~/Views/Admin/Transport/SpjDriver/DetailPenjemputan/Batal.cshtml");
+    }
+
+}

Controllers/SpjDriverController/SubmitController.cs

@@ -0,0 +1,87 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace pesapakawan.Controllers.SpjDriverController
+{
+    [Route("submit")]
+    public class SubmitController : Controller
+    {
+
+        [HttpGet("")]
+        public IActionResult Index()
+        {
+            return View("~/Views/Admin/Transport/SpjDriver/Submit/Index.cshtml");
+        }
+
+        
+        [HttpGet("struk")]
+        public IActionResult Struk()
+        {
+            return View("~/Views/Admin/Transport/SpjDriver/Submit/Struk.cshtml");
+        }
+
+        [HttpPost("struk")]
+        public IActionResult ProcessStruk(string NomorStruk, string NomorPolisi, string Penugasan, 
+            string WaktuMasuk, string WaktuKeluar, int? BeratMasuk, int? BeratKeluar, int BeratNett)
+        {
+            try
+            {
+                // Validate required inputs
+                if (string.IsNullOrEmpty(NomorStruk) || BeratNett <= 0)
+                {
+                    TempData["Error"] = "Nomor struk dan berat nett harus diisi.";
+                    return RedirectToAction("Struk");
+                }
+
+                // Validate receipt number format (numbers only, 7+ digits)
+                if (!System.Text.RegularExpressions.Regex.IsMatch(NomorStruk, @"^\d{7,}$"))
+                {
+                    TempData["Error"] = "Format nomor struk tidak valid. Harus berupa angka minimal 7 digit.";
+                    return RedirectToAction("Struk");
+                }
+
+                // Validate weight range
+                if (BeratNett < 100 || BeratNett > 50000)
+                {
+                    TempData["Error"] = "Berat nett harus antara 100 kg - 50,000 kg.";
+                    return RedirectToAction("Struk");
+                }
+
+                // Validate optional weights
+                if (BeratMasuk.HasValue && (BeratMasuk < 0 || BeratMasuk > 100000))
+                {
+                    TempData["Error"] = "Berat masuk tidak valid.";
+                    return RedirectToAction("Struk");
+                }
+
+                if (BeratKeluar.HasValue && (BeratKeluar < 0 || BeratKeluar > 100000))
+                {
+                    TempData["Error"] = "Berat keluar tidak valid.";
+                    return RedirectToAction("Struk");
+                }
+
+                // Here you would normally save to database
+                // For now, just simulate success with all data
+                var submitData = new
+                {
+                    NomorStruk,
+                    NomorPolisi = NomorPolisi ?? "N/A",
+                    Penugasan = Penugasan ?? "N/A",
+                    WaktuMasuk = WaktuMasuk ?? "N/A",
+                    WaktuKeluar = WaktuKeluar ?? "N/A",
+                    BeratMasuk = BeratMasuk?.ToString() ?? "N/A",
+                    BeratKeluar = BeratKeluar?.ToString() ?? "N/A",
+                    BeratNett
+                };
+                
+                TempData["Success"] = $"Struk berhasil disubmit! No: {NomorStruk}, Nett: {BeratNett} kg";
+                return RedirectToAction("Index", "Home");
+
+            }
+            catch (Exception)
+            {
+                TempData["Error"] = "Terjadi kesalahan saat memproses struk. Silakan coba lagi.";
+                return RedirectToAction("Struk");
+            }
+        }
+    }
+}

Controllers/WebsiteController/WebsiteController.cs

@@ -0,0 +1,49 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using pesapakawan.Models;
+
+namespace pesapakawan.Controllers;
+
+
+[Route("")]
+public class WebsiteController : Controller
+{
+
+    [HttpGet("")]
+    public IActionResult Home()
+    {
+        return View("~/Views/Website/Home/Index.cshtml");
+    }
+
+    [HttpGet("jasa/pengolahan-sampah")]
+    public IActionResult PengolahanSampah()
+    {
+        return View("~/Views/Website/Jasa/PengolahanSampah.cshtml");
+    }
+
+    [HttpGet("jasa/pengangkutan-sampah")]
+    public IActionResult PengangkutanSampah()
+    {
+        return View("~/Views/Website/Jasa/PengangkutanSampah.cshtml");
+    }
+
+    [HttpGet("kontak")]
+    public IActionResult Kontak()
+    {
+        return View("~/Views/Website/Kontak/Index.cshtml");
+    }
+
+    [HttpGet("usaha")]
+    public IActionResult Usaha()
+    {
+        return View("~/Views/Website/Usaha/Index.cshtml");
+    }
+
+    [HttpGet("auth/signup")]
+    public IActionResult Signup()
+    {
+        return View("~/Views/Website/Auth/Signup.cshtml");
+    }
+
+
+}

Models/ErrorViewModel.cs

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

Program.cs

@@ -0,0 +1,29 @@
+var builder = WebApplication.CreateBuilder(args);
+
+// Add services to the container.
+builder.Services.AddControllersWithViews();
+
+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.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:5101",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "https": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "applicationUrl": "https://localhost:7285;http://localhost:5101",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}

Views/Website/Auth/Signup.cshtml

@@ -0,0 +1,147 @@
+@{
+    ViewData["Title"] = "Daftar";
+     Layout = "~/Views/Website/Shared/_AuthLayout.cshtml";
+}
+
+@section css {
+    <style>
+          .bg-auth-signup {
+        background-image: radial-gradient(circle at 85% 1%, hsla(190,0%,93%,0.05) 0%, hsla(190,0%,93%,0.05) 96%,transparent 96%, transparent 100%),radial-gradient(circle at 14% 15%, hsla(190,0%,93%,0.05) 0%, hsla(190,0%,93%,0.05) 1%,transparent 1%, transparent 100%),radial-gradient(circle at 60% 90%, hsla(190,0%,93%,0.05) 0%, hsla(190,0%,93%,0.05) 20%,transparent 20%, transparent 100%),radial-gradient(circle at 79% 7%, hsla(190,0%,93%,0.05) 0%, hsla(190,0%,93%,0.05) 78%,transparent 78%, transparent 100%),radial-gradient(circle at 55% 65%, hsla(190,0%,93%,0.05) 0%, hsla(190,0%,93%,0.05) 52%,transparent 52%, transparent 100%),linear-gradient(135deg, rgb(0, 180, 230),rgb(0, 162, 255));
+    }
+    </style>
+}
+
+ <div class="min-h-screen bg-auth-signup flex flex-col items-center justify-center p-4 sm:p-6 lg:p-8">
+        <div class="bg-white rounded-2xl sm:rounded-3xl shadow-2xl max-w-4xl w-full overflow-hidden">
+            <div class="flex flex-col lg:flex-row">
+                <div class="lg:w-1/2 bg-gradient-to-br from-cyan-300 to-cyan-500 flex flex-col items-center justify-between p-6 sm:p-8 lg:p-12 min-h-[200px] lg:min-h-[500px] lg:order-2">
+                    <div class="flex-grow flex items-center justify-center w-full">
+                        <div class="text-center text-white">
+
+                            <div class="relative">
+                                <img src="/website/logo.svg" alt="Ilustrasi Login" class="w-full h-20 max-w-xs sm:max-w-md mx-auto">
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <footer class="mt-4 sm:mt-8 w-full text-center text-xs sm:text-sm text-gray-200">
+                        &copy; @(DateTime.Now.Year > 2025 ? $"2025 - {DateTime.Now.Year}" : DateTime.Now.Year.ToString()) Dinas Lingkungan Hidup Provinsi DKI Jakarta. All rights reserved.
+                    </footer>
+                </div>
+
+                <div class="lg:w-1/2 p-6 sm:p-8 lg:p-12 lg:order-1">
+
+                    <h1 class="text-2xl sm:text-3xl font-bold text-gray-800 mb-6 sm:mb-8">Daftar</h1>
+
+                    <form id="signupForm" method="POST" action="#" class="space-y-4 sm:space-y-6 needs-validation" novalidate autocomplete="off">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-2">Nama Perusahaan/Kegiatan Usaha</label>
+                            <div class="relative">
+                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                    <i class="w-4 h-4 sm:h-5 sm:w-5 text-gray-400" data-lucide="building-2"></i>
+                                </div>
+                                <input type="text" name="company_name" id="company_name" placeholder="Masukan nama perusahaan" class="w-full pl-9 sm:pl-10 pr-4 py-2.5 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 outline-none transition-colors" required autofocus>
+                            </div>
+                        </div>
+
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-2">Email</label>
+                            <div class="relative">
+                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                    <i class="w-4 h-4 sm:h-5 sm:w-5 text-gray-400" data-lucide="mail"></i>
+                                </div>
+                                <input type="email" name="email" id="email" placeholder="Masukan email" class="w-full pl-9 sm:pl-10 pr-4 py-2.5 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 outline-none transition-colors" required>
+                            </div>
+                        </div>
+
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-2">Jenis Usaha</label>
+                            <div class="relative">
+                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                    <i class="w-4 h-4 sm:h-5 sm:w-5 text-gray-400" data-lucide="briefcase"></i>
+                                </div>
+                                <select name="business_type" id="business_type" class="w-full pl-9 sm:pl-10 pr-4 py-2.5 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 outline-none transition-colors" required>
+                                    <option value="" selected disabled>Pilih jenis usaha</option>
+                                    <option value="jasa_pengangkutan">Jasa Pengangkutan</option>
+                                    <option value="jasa_pengolahan">Jasa Pengolahan</option>
+                                    <option value="usaha_kegiatan">Usaha Kegiatan</option>
+                                </select>
+                            </div>
+                        </div>
+
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-2">Password</label>
+                            <div class="relative">
+                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                    <i class="w-4 h-4 text-gray-400 transition-colors duration-300" data-lucide="lock"></i>
+                                </div>
+                                <input type="password" name="password" id="password" placeholder="Masukan password" class="w-full pl-9 sm:pl-10 pr-10 sm:pr-12 py-2.5 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 outline-none transition-colors" required>
+                                <div class="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer" onclick="togglePassword('password')">
+                                     <i id="eye-open-password" class="w-4 h-4 sm:h-5 sm:w-5 text-gray-400 transition-colors duration-300" data-lucide="eye"></i>
+                                    @* <x-lucide-eye id="eye-open-password" class="h-4 w-4 sm:h-5 sm:w-5 text-gray-400" /> *@
+                                    <i id="eye-closed-password" class="w-4 h-4 sm:h-5 sm:w-5 text-gray-400 hidden" data-lucide="eye-off"></i>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-2">Konfirmasi Password</label>
+                            <div class="relative">
+                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                                    <i class="w-4 h-4 sm:h-5 sm:w-5 text-gray-400" data-lucide="lock-keyhole"></i>
+                                </div>
+                                <input type="password" name="password_confirmation" id="password_confirmation" placeholder="Konfirmasi password" class="w-full pl-9 sm:pl-10 pr-10 sm:pr-12 py-2.5 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 outline-none transition-colors" required>
+                                <div class="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer" onclick="togglePassword('password_confirmation')">
+                                    <i id="eye-open-confirm" class="w-4 h-4 sm:h-5 sm:w-5 text-gray-400" data-lucide="eye"></i>
+                                    <i id="eye-closed-confirm" class="w-4 h-4 sm:h-5 sm:w-5 text-gray-400 hidden" data-lucide="eye-off"></i>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="flex items-start">
+                            <div class="flex items-center h-5">
+                                <input id="terms" name="terms" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-cyan-300" required>
+                            </div>
+                            <label for="terms" class="ml-2 text-sm font-medium text-gray-700">
+                                Saya setuju dengan <a href="#" class="text-cyan-600 hover:underline">Syarat dan Ketentuan</a> yang Berlaku
+                            </label>
+                        </div>
+
+                        <button type="submit" class="w-full bg-cyan-400 hover:bg-cyan-500 text-white font-semibold py-2.5 sm:py-3 px-6 text-sm sm:text-base rounded-lg transition-colors duration-200">
+                            Daftar
+                        </button>
+
+                        <div class="text-center">
+                            <p class="text-sm text-gray-600">
+                                Sudah memiliki akun? <a href="/login" class="text-cyan-600 hover:underline">Masuk</a>
+                            </p>
+                        </div>
+                    </form>
+
+                    
+                </div>
+            </div>
+        </div>
+
+     
+</div>
+
+@section Scripts {
+    <script>
+        function togglePassword(field) {
+            const passwordInput = document.getElementById(field);
+            const eyeOpen = document.getElementById('eye-open-' + (field === 'password' ? 'password' : 'confirm'));
+            const eyeClosed = document.getElementById('eye-closed-' + (field === 'password' ? 'password' : 'confirm'));
+            
+            if (passwordInput.type === 'password') {
+                passwordInput.type = 'text';
+                eyeOpen.classList.add('hidden');
+                eyeClosed.classList.remove('hidden');
+            } else {
+                passwordInput.type = 'password';
+                eyeOpen.classList.remove('hidden');
+                eyeClosed.classList.add('hidden');
+            }
+        }
+    </script>
+}

Views/Website/Home/Index.cshtml

@@ -0,0 +1,11 @@
+@{
+    Layout = "~/Views/Website/Shared/_Layout.cshtml";
+    ViewData["Title"] = "Home Page";
+}
+
+<partial name="~/Views/Website/Shared/Components/Frontend/_Hero.cshtml" />
+<partial name="~/Views/Website/Shared/Components/Frontend/_Tentang.cshtml" />
+<partial name="~/Views/Website/Shared/Components/Frontend/_Faq.cshtml" />
+<partial name="~/Views/Website/Shared/Components/Frontend/_Peran.cshtml" />
+<partial name="~/Views/Website/Shared/Components/Frontend/_Laksanakan.cshtml" />
+<partial name="~/Views/Website/Shared/Components/Frontend/_Pengelolaan.cshtml" />

Views/Website/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/Website/Jasa/PengangkutanSampah.cshtml

@@ -0,0 +1,105 @@
+@{
+    Layout = "~/Views/Website/Shared/_Layout.cshtml";
+    ViewData["Title"] = "Jasa Pengangkutan Sampah";
+}
+
+<div class="mx-auto bg-gray-50">
+    <div class="bg-cyan-700 pt-30 pb-10 mb-8 shadow-md rounded-br-4xl rounded-bl-4xl relative overflow-hidden">
+        <div class="absolute inset-0" style="background-image: radial-gradient(circle at 85% 1%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 96%, transparent 96%, transparent 100%), radial-gradient(circle at 14% 15%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 1%, transparent 1%, transparent 100%), radial-gradient(circle at 60% 90%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 20%, transparent 20%, transparent 100%), radial-gradient(circle at 79% 7%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 78%, transparent 78%, transparent 100%), radial-gradient(circle at 55% 65%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 52%, transparent 52%, transparent 100%), linear-gradient(135deg, rgb(0, 163, 227), rgb(6, 182, 212));"></div>
+        
+        <div class="max-w-6xl mx-auto px-6 hidden md:block relative z-10">
+            <nav class="flex items-center text-white text-sm space-x-2" aria-label="Breadcrumb">
+                <a href="@Url.Action("Index", "Home")" class="hover:underline">Beranda</a>
+                <i class="w-4 h-4 text-white transition-colors duration-300" data-lucide="chevron-right"></i>
+                <span class="font-semibold">Pengangkutan Sampah</span>
+            </nav>
+        </div>
+        
+        <div class="max-w-6xl mx-auto justify-between flex flex-col md:flex-row items-center px-6 gap-8 relative z-10">
+            <div class="flex-1 text-center max-w-xl md:text-left">
+                <h1 class="text-3xl md:text-4xl font-medium text-white mb-3">Jasa Pengangkutan Sampah</h1>
+                <p class="text-lg text-white mb-4">Layanan pengangkutan residu sampah dari kawasan sesuai regulasi DKI Jakarta.</p>
+                <div class="w-20 h-1 bg-white mt-4 mx-auto md:mx-0 rounded-full"></div>
+            </div>
+            <div class="flex-shrink-0 hidden md:block">
+                <img src="@Url.Content("~/website/images/bg-header.svg")" alt="Usaha Pesapakawan" class="w-52 h-auto">
+            </div>
+        </div>
+    </div>
+
+    <div class="max-w-6xl mx-auto ">
+        <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
+            <div class="flex items-start space-x-4 mb-4">
+            <div class="bg-blue-100 rounded-full p-3">
+                <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-6a2 2 0 012-2h6m2 2v6a2 2 0 01-2 2h-6a2 2 0 01-2-2z"></path>
+                </svg>
+            </div>
+            <div>
+                <h2 class="text-2xl font-semibold text-gray-800 mb-2">Pengangkutan Residu Sampah</h2>
+                <p class="text-gray-600 leading-relaxed mb-2">
+                Pelaksanaan pengangkutan residu sampah dari usaha dan/atau kegiatan serta kawasan telah diatur dalam <span class="font-semibold text-blue-600">Peraturan Daerah Nomor 3 Tahun 2020 Pasal 36 ayat (2)</span>:
+                </p>
+                <blockquote class="mt-2 p-4 bg-blue-50 border-l-4 border-blue-500 italic text-blue-800">
+                “Pengangkutan residu sampah kawasan dari TPS dan/atau TPS 3R kawasan sebagaimana dimaksud pada ayat (1), ke TPST menjadi kewajiban penanggung jawab dan/atau pengelola kawasan dan dapat dikerjasamakan dengan badan usaha di bidang kebersihan.”
+                </blockquote>
+            </div>
+            </div>
+            <div class="mt-6">
+            <h3 class="text-xl font-semibold text-gray-800 mb-2">Izin Usaha Pelayanan Angkutan</h3>
+            <p class="text-gray-600 mb-2">
+                Badan usaha yang melakukan pengangkutan sampah wajib memiliki izin usaha pelayanan angkutan di bidang kebersihan sesuai <span class="font-semibold text-blue-600">Peraturan Gubernur Nomor 47 Tahun 2017</span>. Pendaftaran dilakukan melalui <span class="font-semibold text-blue-600">UP PMPTSP Kota</span> dengan kelengkapan dokumen sesuai ketentuan.
+            </p>
+            <ul class="list-disc pl-5 text-gray-600 space-y-1 mb-4">
+                <li>Pengecekan kendaraan dilakukan bersama Tim Teknis Bersama (UP PMPTSP Kota & Dinas Lingkungan Hidup).</li>
+                <li>Izin diterbitkan jika persyaratan administrasi dan teknis kendaraan terpenuhi.</li>
+            </ul>
+            </div>
+            <div class="mt-6">
+            <h3 class="text-xl font-semibold text-gray-800 mb-2">Persyaratan Teknis Kendaraan</h3>
+            <div class="bg-gray-50 rounded-lg p-4 mb-4">
+                <ul class="list-decimal pl-5 text-gray-700 space-y-2">
+                <li>Berbadan usaha.</li>
+                <li>Jenis truk yang diizinkan: <span class="font-semibold">Arm Roll Truck (6-10 m<sup>3</sup>), Dump Truck (6-14 m<sup>3</sup>), Compactor (6-10 m<sup>3</sup>)</span>.</li>
+                <li>Truk wajib lulus uji KIR.</li>
+                <li>Bak truk tidak bocor, ada tanggul penahan air lindi, bahan tahan korosif.</li>
+                <li>Bak penampung air lindi dari plat besi/sejenisnya, model & dimensi sesuai kebutuhan, pipa/selang kuat & tahan bocor.</li>
+                <li>Umur truk maksimal 6 tahun saat pendaftaran:
+                    <div class="overflow-x-auto mt-2">
+                    <table class="min-w-full text-sm text-left border border-gray-200">
+                        <thead>
+                        <tr class="bg-blue-100">
+                            <th class="px-2 py-1 border">Umur Kendaraan</th>
+                            <th class="px-2 py-1 border">Masa Berlaku Izin</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr>
+                            <td class="px-2 py-1 border">0 – 4 tahun</td>
+                            <td class="px-2 py-1 border">Maks. 3 tahun</td>
+                        </tr>
+                        <tr>
+                            <td class="px-2 py-1 border">5 tahun</td>
+                            <td class="px-2 py-1 border">Maks. 2 tahun</td>
+                        </tr>
+                        <tr>
+                            <td class="px-2 py-1 border">6 tahun</td>
+                            <td class="px-2 py-1 border">Maks. 1 tahun</td>
+                        </tr>
+                        </tbody>
+                    </table>
+                    </div>
+                </li>
+                <li>Domisili perusahaan di DKI Jakarta.</li>
+                <li>STNK truk sesuai domisili perusahaan atau wilayah hukum Polda Metro Jaya.</li>
+                <li>STNK atas nama pemohon atau lampirkan surat pernyataan penguasaan kendaraan & perjanjian kerja sama.</li>
+                <li>Atribut khusus berupa stiker identitas perusahaan & nomor pintu kendaraan (tidak boleh atribut Pemprov DKI/DLH).</li>
+                <li>Truk dilengkapi GPS & akses login untuk DLH DKI Jakarta.</li>
+                <li>Truk dilengkapi jaring, terpal, dan APD untuk supir & kru.</li>
+                <li>Perusahaan wajib menyediakan lahan parkir sesuai jumlah kendaraan, dibuktikan surat & foto lokasi.</li>
+                </ul>
+            </div>
+            </div>
+        </div>
+    </div>
+</div>

Views/Website/Jasa/PengolahanSampah.cshtml

@@ -0,0 +1,254 @@
+@{
+    Layout = "~/Views/Website/Shared/_Layout.cshtml";
+    ViewData["Title"] = "Jasa Pengolahan Sampah";
+}
+
+<div class="mx-auto bg-gray-50">
+     <div class="bg-cyan-700 pt-30 pb-10 mb-8 shadow-md rounded-br-4xl rounded-bl-4xl relative overflow-hidden">
+        <div class="absolute inset-0" style="background-image: radial-gradient(circle at 85% 1%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 96%, transparent 96%, transparent 100%), radial-gradient(circle at 14% 15%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 1%, transparent 1%, transparent 100%), radial-gradient(circle at 60% 90%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 20%, transparent 20%, transparent 100%), radial-gradient(circle at 79% 7%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 78%, transparent 78%, transparent 100%), radial-gradient(circle at 55% 65%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 52%, transparent 52%, transparent 100%), linear-gradient(135deg, rgb(0, 163, 227), rgb(6, 182, 212));"></div>
+        
+        <div class="max-w-6xl mx-auto px-6 hidden md:block relative z-10">
+            <nav class="flex items-center text-white text-sm space-x-2" aria-label="Breadcrumb">
+                <a href="@Url.Action("Index", "Home")" class="hover:underline">Beranda</a>
+                <i class="w-4 h-4 text-white transition-colors duration-300" data-lucide="chevron-right"></i>
+                <span class="font-semibold">Pengolahan Sampah</span>
+            </nav>
+        </div>
+        
+        <div class="max-w-6xl mx-auto justify-between flex flex-col md:flex-row items-center px-6 gap-8 relative z-10">
+            <div class="flex-1 text-center max-w-xl md:text-left">
+                <h1 class="text-3xl md:text-4xl font-medium text-white mb-3">Jasa Pengolahan Sampah</h1>
+                <p class="text-lg text-white mb-4">Solusi pengelolaan sampah sesuai Pergub DKI Jakarta untuk kawasan permukiman, komersial, dan industri.</p>
+                <div class="w-20 h-1 bg-white mt-4 mx-auto md:mx-0 rounded-full"></div>
+            </div>
+            <div class="flex-shrink-0 hidden md:block">
+                <img src="@Url.Content("~/website/images/bg-header.svg")" alt="Usaha Pesapakawan" class="w-52 h-auto">
+            </div>
+        </div>
+    </div>
+
+    <div class="max-w-6xl mx-auto px-4 lg:px-6 z-20">
+        <div class="bg-white rounded-2xl p-8 mb-7 border border-gray-200">
+            <div class="flex flex-col lg:flex-row items-start gap-6">
+                <div class="bg-gradient-to-br from-blue-500 to-cyan-600 rounded-xl p-4 flex-shrink-0">
+                    <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                    </svg>
+                </div>
+                <div class="flex-1">
+                    <h2 class="text-2xl font-bold text-gray-900 mb-4">Izin Usaha Pengolahan Sampah</h2>
+                    <p class="text-gray-700 leading-relaxed mb-6">
+                        Dalam melaksanakan kegiatan usaha pengolahan sampah, badan usaha yang melakukan usaha pengolahan sampah wajib memiliki izin usaha pengolahan sampah. Jenis izin yang diterbitkan sesuai dengan <span class="font-semibold text-blue-600">Peraturan Gubernur Nomor 47 Tahun 2017</span> tentang Petunjuk Pelaksanaan Pelayanan Terpadu Satu Pintu, adapun jenis izin pengangkutan sampah yaitu Izin Usaha Pengelolaan Sampah.
+                    </p>
+                    <p class="text-gray-700 leading-relaxed">
+                        Mekanisme perolehan Izin Usaha didaftarkan melalui Unit Pengelola Penanaman Modal dan Pelayanan Terpadu Satu Pintu Kota (UP PMPTSP Kota). Adapun formulir dan kelengkapan dokumen sesuai dengan ketentuan yang diatur oleh UP PMPTSP Kota. Setelah berkas administrasi dinyatakan lengkap dan lolos verifikasi, maka dilanjutkan dengan pengecekan/survey terhadap lokasi dan teknologi pengolahan sampah yang diajukan dalam proses permohonan izin.
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        <div class="bg-white rounded-2xl p-8 mb-7 border border-gray-200">
+            <div class="text-center mb-8">
+                <h3 class="text-2xl font-bold text-gray-900 mb-3">Alur Permohonan Izin</h3>
+                <div class="w-24 h-1 bg-gradient-to-r from-blue-500 to-cyan-500 mx-auto rounded-full"></div>
+            </div>
+            <div class="flex justify-center mb-8">
+                <img src="@Url.Content("~/website/images/alur_jasa.png")" class="rounded-2xl border border-gray-200 shadow-lg max-w-full h-auto" alt="Gambaran Alur">
+            </div>
+            <div class="bg-gradient-to-r from-blue-50 to-cyan-50 border-l-4 border-blue-500 p-6 rounded-r-xl">
+                <p class="text-gray-700 leading-relaxed">
+                    Pelaksanaan survey dimaksud dilakukan bersama-sama oleh Tim Teknis Bersama yang terdiri dari unsur UP PMPTSP Kota dan Dinas Lingkungan Hidup. Izin akan diterbitkan apabila telah memenuhi persyaratan administrasi dan hasil survey telah disetujui atau dinyatakan sesuai persyaratan teknis oleh Tim Teknis Bersama.
+                </p>
+            </div>
+        </div>
+
+        <div class="bg-white rounded-2xl p-8 mb-7 border border-gray-200">
+            <div class="flex items-center gap-4 mb-6">
+                <div class="bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl p-4">
+                    <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
+                    </svg>
+                </div>
+                <div>
+                    <h3 class="text-2xl font-bold text-gray-900">Teknologi Pengolahan</h3>
+                    <p class="text-gray-600">Teknologi yang diizinkan untuk pengolahan sampah</p>
+                </div>
+            </div>
+            <p class="text-gray-700 leading-relaxed mb-6">
+                Dalam pelaksanaan survey/pengecekan lokasi dan teknologi pengolahan sampah, dilakukan pemeriksaan kesesuaian persyaratan teknis yang diatur dalam <span class="font-semibold text-blue-600">SK Kepala Dinas Lingkungan Hidup Nomor 374 Tahun 2017</span> tentang Persyaratan Teknis Izin Usaha Pengelolaan Sampah.
+            </p>
+            <div class="grid md:grid-cols-2 gap-6">
+                <div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-xl border border-blue-200">
+                    <h4 class="font-bold text-blue-900 mb-3">Teknologi Fisik</h4>
+                    <p class="text-blue-800 text-sm">Pengurangan ukuran, pemadatan, pemisahan magnetis, masa-jenis, dan optik</p>
+                </div>
+                <div class="bg-gradient-to-br from-green-50 to-emerald-50 p-6 rounded-xl border border-green-200">
+                    <h4 class="font-bold text-green-900 mb-3">Teknologi Biologi</h4>
+                    <p class="text-green-800 text-sm">Pengolahan aerobik dan/atau anaerobik seperti pengomposan dan biogasifikasi</p>
+                </div>
+                <div class="bg-gradient-to-br from-orange-50 to-red-50 p-6 rounded-xl border border-orange-200">
+                    <h4 class="font-bold text-orange-900 mb-3">Teknologi Termal</h4>
+                    <p class="text-orange-800 text-sm">Gasifikasi, pirolisis, plasma dan insenerasi</p>
+                </div>
+                <div class="bg-gradient-to-br from-purple-50 to-pink-50 p-6 rounded-xl border border-purple-200">
+                    <h4 class="font-bold text-purple-900 mb-3">Teknologi Lainnya</h4>
+                    <p class="text-purple-800 text-sm">Teknologi lain atau gabungan dari beberapa macam teknologi</p>
+                </div>
+            </div>
+        </div>
+
+        <div class="grid lg:grid-cols-2 gap-8 mb-7">
+            <div class="bg-white rounded-2xl p-8 border border-gray-200">
+                <div class="flex items-center gap-4 mb-6">
+                    <div class="bg-gradient-to-br from-blue-500 to-cyan-600 rounded-xl p-4">
+                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                        </svg>
+                    </div>
+                    <div>
+                        <h3 class="text-xl font-bold text-gray-900">Persyaratan Umum</h3>
+                    </div>
+                </div>
+                <div class="space-y-4">
+                    <div class="bg-gradient-to-r from-gray-50 to-slate-50 p-4 rounded-xl border border-gray-200">
+                        <ul class="text-gray-700 space-y-2 text-sm">
+                            <li class="flex items-start gap-2">
+                                <span class="text-blue-500 mt-1">✓</span>
+                                <span>Pemohon wajib berbadan usaha</span>
+                            </li>
+                            <li class="flex items-start gap-2">
+                                <span class="text-blue-500 mt-1">✓</span>
+                                <span>Melampirkan deskripsi dari lokasi kegiatan dengan tata letak (layout) di lokasi kegiatan dan terhadap bangunan sekelilingnya</span>
+                            </li>
+                            <li class="flex items-start gap-2">
+                                <span class="text-blue-500 mt-1">✓</span>
+                                <span>Papan nama yang mudah terlihat dengan tulisan "Fasilitas Pengolahan Sampah Non B3" yang dipasang pada unit/bangunan pengolah sampah</span>
+                            </li>
+                            <li class="flex items-start gap-2">
+                                <span class="text-blue-500 mt-1">✓</span>
+                                <span>Melampirkan dokumen rencana pengolahan sampah yang menjelaskan jenis, karakteristik, jumlah, komposisi dan asal/sumber sampah yang akan diolah</span>
+                            </li>
+                            <li class="flex items-start gap-2">
+                                <span class="text-blue-500 mt-1">✓</span>
+                                <span>Melampirkan dokumen studi kelayakan</span>
+                            </li>
+                            <li class="flex items-start gap-2">
+                                <span class="text-blue-500 mt-1">✓</span>
+                                <span>Melampirkan dokumen lingkungan (Amdal/UKL-UPL) dan izin lingkungan atau SPPL (Surat Pernyataan Pengelolaan Lingkungan)</span>
+                            </li>
+                            <li class="flex items-start gap-2">
+                                <span class="text-blue-500 mt-1">✓</span>
+                                <span>Umur truk sampah pada saat pendaftaran maksimal 6 tahun, dengan masa berlaku izin minimal 1 tahun dan maksimal 3 tahun</span>
+                            </li>
+                            <li class="flex items-start gap-2">
+                                <span class="text-blue-500 mt-1">✓</span>
+                                <span>Melampirkan DED/detailed engineering design fasilitas pengolahan sampah</span>
+                            </li>
+                            <li class="flex items-start gap-2">
+                                <span class="text-blue-500 mt-1">✓</span>
+                                <span>Memiliki fasilitas pendukung berupa peralatan/instalasi pengendalian pencemaran lingkungan (air dan/atau udara)</span>
+                            </li>
+                            <li class="flex items-start gap-2">
+                                <span class="text-blue-500 mt-1">✓</span>
+                                <span>Melampirkan Standar Operasional Prosedur (SOP)</span>
+                            </li>
+                            <li class="flex items-start gap-2">
+                                <span class="text-blue-500 mt-1">✓</span>
+                                <span>Memiliki Alat Pelindung Diri (APD) untuk petugas</span>
+                            </li>
+                            <li class="flex items-start gap-2">
+                                <span class="text-blue-500 mt-1">✓</span>
+                                <span>Memiliki alat perlengkapan peralatan tanggap darurat</span>
+                            </li>
+                            <li class="flex items-start gap-2">
+                                <span class="text-blue-500 mt-1">✓</span>
+                                <span>Melampirkan Izin Gangguan – Tempat Usaha Berdasarkan Undang-Undang Gangguan (UUG/HO)</span>
+                            </li>
+                            <li class="flex items-start gap-2">
+                                <span class="text-blue-500 mt-1">✓</span>
+                                <span>Memiliki fasilitas pendukung: ruang pemilahan dan bak penampung air lindi</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-2xl p-8 border border-gray-200">
+                <div class="flex items-center gap-4 mb-6">
+                    <div class="bg-gradient-to-br from-orange-500 to-red-600 rounded-xl p-4">
+                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
+                        </svg>
+                    </div>
+                    <div>
+                        <h3 class="text-xl font-bold text-gray-900">Persyaratan Khusus</h3>
+                    </div>
+                </div>
+                <div class="space-y-4">
+                    <div class="bg-gradient-to-r from-blue-50 to-cyan-50 p-4 rounded-xl border border-blue-200">
+                        <h4 class="font-bold text-blue-900 mb-2">Teknologi Fisik</h4>
+                        <p class="text-blue-800 text-sm">Kapasitas minimal 20 ton/hari atau luas lahan minimal 200 m²</p>
+                    </div>
+                    <div class="bg-gradient-to-r from-green-50 to-emerald-50 p-4 rounded-xl border border-green-200">
+                        <h4 class="font-bold text-green-900 mb-2">Teknologi Biologi</h4>
+                        <ul class="text-green-800 text-sm space-y-1">
+                            <li>• Kapasitas minimal 10 ton/hari atau luas >200 m²</li>
+                            <li>• Wajib memenuhi baku mutu kebauan</li>
+                            <li>• Wajib memenuhi baku mutu air lindi</li>
+                        </ul>
+                    </div>
+                    <div class="bg-gradient-to-r from-orange-50 to-red-50 p-4 rounded-xl border border-orange-200">
+                        <h4 class="font-bold text-orange-900 mb-2">Teknologi Termal</h4>
+                        <ul class="text-orange-800 text-sm space-y-1">
+                            <li>• Insinerasi: minimal 8000°C</li>
+                            <li>• Pirolisis: minimal 4000°C</li>
+                            <li>• Gasifikasi: minimal 7000°C</li>
+                            <li>• Plasma: minimal 5000°C</li>
+                            <li>• Wajib memenuhi baku mutu emisi</li>
+                        </ul>
+                    </div>
+                    <div class="bg-gradient-to-r from-purple-50 to-pink-50 p-4 rounded-xl border border-purple-200">
+                        <h4 class="font-bold text-purple-900 mb-2">Teknologi Lainnya</h4>
+                        <ul class="text-purple-800 text-sm space-y-1">
+                            <li>• Kapasitas minimal 20 ton/hari atau luas lahan minimal 200 m2</li>
+                            <li>• Wajib memenuhi persyaratan khusus pada semua jenis teknologi yang digunakan</li>
+                            <li>• Memenuhi baku mutu lingkungan</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-2xl p-8 mb-7">
+            <div class="flex items-center gap-4 mb-6">
+                <div class="bg-green-500 rounded-full p-3">
+                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                    </svg>
+                </div>
+                <h3 class="text-2xl font-bold text-green-800">Kewajiban Setelah Memperoleh Izin</h3>
+            </div>
+            <p class="text-green-700 mb-6 leading-relaxed">
+                Setelah memperoleh Izin Usaha Pengelolaan Sampah, penyedia jasa pengolahan sampah wajib melaporkan izinnya kepada Dinas Lingkungan Hidup Provinsi DKI Jakarta untuk melakukan pendaftaran/registrasi secara online melalui website ini.
+            </p>
+            <div class="bg-white p-6 rounded-xl border border-green-200 shadow-sm">
+                <h4 class="font-bold text-green-900 mb-4">Penyedia jasa pengolahan sampah wajib melakukan:</h4>
+                <div class="grid md:grid-cols-3 gap-4">
+                    <div class="bg-green-100 p-4 rounded-lg text-center">
+                        <div class="bg-green-500 text-white px-3 py-1 rounded-full text-sm font-bold mb-2 inline-block">1</div>
+                        <p class="text-green-800 text-sm font-semibold">Pendaftaran sebagai penyedia jasa yang teregistrasi</p>
+                    </div>
+                    <div class="bg-green-100 p-4 rounded-lg text-center">
+                        <div class="bg-green-500 text-white px-3 py-1 rounded-full text-sm font-bold mb-2 inline-block">2</div>
+                        <p class="text-green-800 text-sm font-semibold">Melaporkan kontrak kerjasama pengolahan sampah</p>
+                    </div>
+                    <div class="bg-green-100 p-4 rounded-lg text-center">
+                        <div class="bg-green-500 text-white px-3 py-1 rounded-full text-sm font-bold mb-2 inline-block">3</div>
+                        <p class="text-green-800 text-sm font-semibold">Melaporkan hasil kegiatan pengolahan sampah</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>

Views/Website/Kontak/Index.cshtml

@@ -0,0 +1,98 @@
+@{
+    Layout = "~/Views/Website/Shared/_Layout.cshtml";
+    ViewData["Title"] = "Usaha/Kegiatan Pesapakawan";
+}
+
+<div class="mx-auto">
+     <div class="bg-cyan-700 pt-30 pb-10 mb-8 shadow-md rounded-br-4xl rounded-bl-4xl relative overflow-hidden">
+        <div class="absolute inset-0" style="background-image: radial-gradient(circle at 85% 1%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 96%, transparent 96%, transparent 100%), radial-gradient(circle at 14% 15%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 1%, transparent 1%, transparent 100%), radial-gradient(circle at 60% 90%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 20%, transparent 20%, transparent 100%), radial-gradient(circle at 79% 7%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 78%, transparent 78%, transparent 100%), radial-gradient(circle at 55% 65%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 52%, transparent 52%, transparent 100%), linear-gradient(135deg, rgb(0, 163, 227), rgb(6, 182, 212));"></div>
+        
+        <div class="max-w-6xl mx-auto px-6 hidden md:block relative z-10">
+            <nav class="flex items-center text-white text-sm space-x-2" aria-label="Breadcrumb">
+                <a href="@Url.Action("Index", "Home")" class="hover:underline">Beranda</a>
+                <i class="w-4 h-4 text-white transition-colors duration-300" data-lucide="chevron-right"></i>
+                <span class="font-semibold">Kontak Kami</span>
+            </nav>
+        </div>
+        
+        <div class="max-w-6xl mx-auto justify-between flex flex-col md:flex-row items-center px-6 gap-8 relative z-10">
+            <div class="flex-1 text-center max-w-xl md:text-left">
+                <h1 class="text-3xl md:text-4xl font-medium text-white mb-3">Kontak Kami</h1>
+                <p class="text-lg text-white mb-4">Hubungi kami untuk konsultasi, pertanyaan, atau bantuan terkait pengelolaan sampah kawasan/perusahaan Anda.</p>
+                <div class="w-20 h-1 bg-white mt-4 mx-auto md:mx-0 rounded-full"></div>
+            </div>
+            <div class="flex-shrink-0 hidden md:block">
+                <img src="@Url.Content("~/website/images/bg-header.svg")" alt="Usaha Pesapakawan" class="w-52 h-auto">
+            </div>
+        </div>
+    </div>
+
+    <div class="max-w-6xl mx-auto px-4">
+        <div class="bg-white rounded-xl border border-gray-200 p-8 mb-8">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div class="space-y-6">
+                    <h2 class="text-2xl font-semibold text-gray-800 mb-6">Informasi Kontak</h2>
+                    
+                    <div class="flex items-start space-x-4">
+                        <div class="flex-shrink-0">
+                            <i class="w-5 h-5 text-cyan-500" data-lucide="map-pin"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-medium text-gray-700 mb-1">Alamat</h3>
+                            <p class="text-gray-600 leading-relaxed">
+                                Jl. Mandala V No.67, RT.1/RW.2, Cililitan,<br>
+                                Kec. Kramat Jati, Kota Jakarta Timur,<br>
+                                DKI Jakarta 13640
+                            </p>
+                        </div>
+                    </div>
+                    
+                    <div class="flex items-start space-x-4">
+                        <div class="flex-shrink-0">
+                            <i class="w-5 h-5 text-cyan-500" data-lucide="phone"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-medium text-gray-700 mb-1">Telepon</h3>
+                            <p class="text-gray-600">
+                                <a href="tel:02180927744" class="hover:text-cyan-600 transition-colors">
+                                    (021) 8092-7744
+                                </a>
+                            </p>
+                        </div>
+                    </div>
+                    
+                    <div class="flex items-start space-x-4">
+                        <div class="flex-shrink-0">
+                            <i class="w-5 h-5 text-cyan-500" data-lucide="mail"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-medium text-gray-700 mb-1">Email</h3>
+                            <p class="text-gray-600">
+                                <a href="mailto:dinaslh@jakarta.go.id" 
+                                   class="text-cyan-600 hover:text-cyan-700 transition-colors hover:underline">
+                                    dinaslh@jakarta.go.id
+                                </a>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                
+                <div>
+                    <h2 class="text-2xl font-semibold text-gray-800 mb-6">Lokasi Kami</h2>
+                    <div class="w-full h-80 rounded-lg overflow-hidden shadow-md">
+                        <iframe
+                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3965.7234567890123!2d106.87654321!3d-6.234567890!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f3e123456789%3A0x123456789abcdef0!2sJl.%20Mandala%20V%20No.67%2C%20RT.1%2FRW.2%2C%20Cililitan%2C%20Kec.%20Kramat%20jati%2C%20Kota%20Jakarta%20Timur%2C%20Daerah%20Khusus%20Ibukota%20Jakarta%2013640!5e0!3m2!1sid!2sid!4v1234567890123!5m2!1sid!2sid"
+                            width="100%" 
+                            height="100%" 
+                            style="border:0;" 
+                            allowfullscreen="" 
+                            loading="lazy"
+                            referrerpolicy="no-referrer-when-downgrade"
+                            title="Lokasi Kantor Pesapakawan">
+                        </iframe>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

Views/Website/Shared/Components/Frontend/_Faq.cshtml

@@ -0,0 +1,120 @@
+<div class="container mx-auto max-w-6xl py-5">
+    <div class="flex flex-wrap items-center">
+        <div class="w-full lg:w-1/2 md:w-1/2 mb-4 md:mb-0 relative">
+            <div class="text-center p-8">
+            <img src="@Url.Content("~/website/images/bg-faq.svg")" alt="FAQ Illustration" class="max-w-full h-auto rounded-2xl">
+            </div>
+             <div class="text-left absolute top-1/2 left-1/7 z-10 text-white">
+                <h3 class="text-2xl md:text-4xl font-bold mb-4">Kenapa Harus Melakukan</h3>
+                <h2 class="text-2xl md:text-4xl font-bold">PESAPA KAWAN ?</h2>
+            </div>
+        </div>
+        
+        <div class="w-full lg:w-1/2 md:w-1/2">
+            <div class="faq-content">
+                @* <div class="mb-8">
+                    <h2 class="text-3xl font-bold bg-gradient-to-r from-green-600 to-blue-600 bg-clip-text text-transparent mb-2">
+                        Frequently Asked Questions
+                    </h2>
+                    <p class="text-gray-600">Pertanyaan yang sering diajukan tentang PESAPA KAWAN</p>
+                </div> *@
+                <div class="space-y-4">
+                    <div class="faq-item border border-gray-200 rounded-lg overflow-hidden">
+                        <button class="faq-question w-full text-left px-6 py-4 bg-blue-50 hover:bg-blue-100 transition-colors duration-200 flex justify-between items-center">
+                            <span class="font-medium text-gray-800">Kewajiban Pengelolaan Sampah</span>
+                            <svg class="faq-icon w-5 h-5 text-gray-500 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                            </svg>
+                        </button>
+                        <div class="faq-answer hidden px-6 py-4 bg-white text-gray-600">
+                            <p>Kewajiban pengelolaan sampah oleh penanggung jawab dan/atau pengelola kawasan permukiman, komersial, industri dan perusahaan.</p>
+                        </div>
+                    </div>
+
+                    <div class="faq-item border border-gray-200 rounded-lg overflow-hidden">
+                        <button class="faq-question w-full text-left px-6 py-4 bg-blue-50 hover:bg-blue-100 transition-colors duration-200 flex justify-between items-center">
+                            <span class="font-medium text-gray-800">Sampah Terkelola di Sumber Sampah</span>
+                            <svg class="faq-icon w-5 h-5 text-gray-500 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                            </svg>
+                        </button>
+                        <div class="faq-answer hidden px-6 py-4 bg-white text-gray-600">
+                            <p>Mengutamakan prinsip bahwa pengelolaan sampah harus selesai terkelola di sumber sampah.</p>
+                        </div>
+                    </div>
+
+                    <div class="faq-item border border-gray-200 rounded-lg overflow-hidden">
+                        <button class="faq-question w-full text-left px-6 py-4 bg-blue-50 hover:bg-blue-100 transition-colors duration-200 flex justify-between items-center">
+                            <span class="font-medium text-gray-800">Pengelolaan Sampah Mandiri bagi Pemegang AMDAL/UKL-UPL</span>
+                            <svg class="faq-icon w-5 h-5 text-gray-500 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                            </svg>
+                        </button>
+                        <div class="faq-answer hidden px-6 py-4 bg-white text-gray-600">
+                            <p>Usaha dan/atau kegiatan yang telah memiliki dokumen Izin Lingkungan (AMDAL atau UKL- UPL) wajib melakukan pengelolaan sampah secara mandiri.</p>
+                        </div>
+                    </div>
+
+                    <div class="faq-item border border-gray-200 rounded-lg overflow-hidden">
+                        <button class="faq-question w-full text-left px-6 py-4 bg-blue-50 hover:bg-blue-100 transition-colors duration-200 flex justify-between items-center">
+                            <span class="font-medium text-gray-800">Pengurangan Ketergantungan pada TPA Bantargebang</span>
+                            <svg class="faq-icon w-5 h-5 text-gray-500 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                            </svg>
+                        </button>
+                        <div class="faq-answer hidden px-6 py-4 bg-white text-gray-600">
+                            <p>Mengurangi ketergantungan terhadap TPA Bantargebang.</p>
+                        </div>
+                    </div>
+
+                    <div class="faq-item border border-gray-200 rounded-lg overflow-hidden">
+                        <button class="faq-question w-full text-left px-6 py-4 bg-blue-50 hover:bg-blue-100 transition-colors duration-200 flex justify-between items-center">
+                            <span class="font-medium text-gray-800">Kemitraan Pengelola Kawasan dan Jasa Pengolahan Sampah Berizin</span>
+                            <svg class="faq-icon w-5 h-5 text-gray-500 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                            </svg>
+                        </button>
+                        <div class="faq-answer hidden px-6 py-4 bg-white text-gray-600">
+                            <p>Terciptanya kemitraan pelaku pengelola kawasan dan perusahaan dengan pelaku jasa pengolahan sampah yang berizin.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<register-block dynamic-section="scripts" key="jsFaq">
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const faqItems = document.querySelectorAll('.faq-item');
+    
+    faqItems.forEach(item => {
+        const question = item.querySelector('.faq-question');
+        const answer = item.querySelector('.faq-answer');
+        const icon = item.querySelector('.faq-icon');
+        
+        question.addEventListener('click', function() {
+            const isOpen = !answer.classList.contains('hidden');
+            
+            // Close all other FAQ items
+            faqItems.forEach(otherItem => {
+                if (otherItem !== item) {
+                    otherItem.querySelector('.faq-answer').classList.add('hidden');
+                    otherItem.querySelector('.faq-icon').classList.remove('rotate-180');
+                }
+            });
+            
+            // Toggle current item
+            if (isOpen) {
+                answer.classList.add('hidden');
+                icon.classList.remove('rotate-180');
+            } else {
+                answer.classList.remove('hidden');
+                icon.classList.add('rotate-180');
+            }
+        });
+    });
+});
+</script>
+</register-block>

Views/Website/Shared/Components/Frontend/_Hero.cshtml

@@ -0,0 +1,22 @@
+<section class="relative bg-cover bg-center bg-no-repeat min-h-screen flex items-center justify-center overflow-hidden" style="background-image: url('@Url.Content("~/website/images/bg-hero.jpg")')">
+
+    <div class="relative z-10 text-center text-white px-4">
+        <div class="bg-[#20D3D3] text-white text-sm px-4 rounded-full mb-8 inline-block">
+            Peraturan Gubernur Nomor 102 Tahun 2021
+        </div>
+        
+        <h1 class="text-6xl md:text-7xl font-bold leading-tight">
+            Pesapa Kawan
+        </h1>
+        
+        <h2 class="text-2xl md:text-3xl font-light mb-8 opacity-90">
+            Pengelolaan Sampah Pada Kawasan dan Perusahaan
+        </h2>
+        
+        <p class="text-lg md:text-xl max-w-2xl mx-auto opacity-80 leading-relaxed">
+            Membangun semangat kolaborasi untuk mewujudkan Jakarta<br>
+            yang bersih dan masa depan yang lebih baik.
+        </p>
+    </div>
+
+</section>

Views/Website/Shared/Components/Frontend/_Laksanakan.cshtml

@@ -0,0 +1,17 @@
+<div class="py-20">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-12">
+            <div class="relative inline-block">
+                <img src="@Url.Content("~/website/images/laksanakan.svg")" alt="Badge" class="absolute -top-17 left-1/2 transform -translate-x-1/2 w-24 h-24 z-10">
+                <div class="bg-[#20D3D3] text-white px-4 py-2 inline-block rounded-full text-sm font-medium">
+                    CARA MELAKSANAKAN
+                </div>
+            </div>
+            <h2 class="text-5xl font-bold text-gray-900 mb-4">Pesapa Kawan</h2>
+        </div>
+
+        <div class="mt-8 items-center flex flex-col lg:flex-row justify-center">
+            <img class="sm:max-w-3xl md:max-w-3xl lg:max-w-4xl" src="@Url.Content("~/website/images/laksanakan_bagan.png")" alt="">
+        </div>
+    </div>
+</div>

Views/Website/Shared/Components/Frontend/_Pengelolaan.cshtml

@@ -0,0 +1,17 @@
+<div class="py-20">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-12">
+            <div class="relative inline-block">
+                <img src="@Url.Content("~/website/images/pengelolaan.svg")" alt="Badge" class="absolute -top-18 left-1/2 transform -translate-x-1/2 w-24 h-24 z-10">
+                <div class="bg-[#20D3D3] text-white px-4 py-2 inline-block rounded-full text-sm font-medium">
+                    ALUR PENGELOLAAN
+                </div>
+            </div>
+            <h2 class="text-5xl max-w-2xl items-center justify-center flex mx-auto font-bold text-gray-900 mb-4">Sampah Kawasan dan Perusahaan Secara Mandiri</h2>
+        </div>
+
+        <div class="mt-8 items-center flex flex-col lg:flex-row justify-center">
+            <img class="sm:max-w-3xl md:max-w-3xl lg:max-w-4xl" src="@Url.Content("~/website/images/pengelolaan_bagan.png")" alt="">
+        </div>
+    </div>
+</div>

Views/Website/Shared/Components/Frontend/_Peran.cshtml

@@ -0,0 +1,17 @@
+<div class="bg-blue-100 py-20">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="text-center mb-12">
+            <div class="relative inline-block">
+                <img src="@Url.Content("~/website/images/peran.svg")" alt="Badge" class="absolute -top-20 left-1/2 transform -translate-x-1/2 w-24 h-24 z-10">
+                <div class="bg-[#20D3D3] text-white px-4 py-2 inline-block rounded-full text-sm font-medium">
+                    PIHAK YANG BERPERAN
+                </div>
+            </div>
+            <h2 class="text-5xl font-bold text-gray-900 mb-4">Pesapa Kawan</h2>
+        </div>
+
+        <div class="mt-8 items-center flex flex-col lg:flex-row justify-center">
+            <img class="sm:max-w-3xl md:max-w-3xl lg:max-w-4xl" src="@Url.Content("~/website/images/peran_bagan.png")" alt="">
+        </div>
+    </div>
+</div>

Views/Website/Shared/Components/Frontend/_Tentang.cshtml

@@ -0,0 +1,32 @@
+<section class="relative container mx-auto max-w-6xl bg-cover bg-no-repeat min-h-screen flex flex-col overflow-hidden" style="background-image: url('@Url.Content("~/website/images/bg-tentang.png")')">
+
+    <div class="flex flex-col md:flex-row items-center justify-between px-4 sm:px-6 lg:px-8 py-8 md:py-12">
+        <div class="w-full md:w-1/2 mt-4 md:mt-8">
+            <div class="relative z-10 text-gray-900 px-2 md:px-4">
+
+                <div class="flex space-x-3 md:space-x-4">
+                    <img class="w-12 h-12 md:w-16 md:h-16" src="@Url.Content("~/website/logo-dlh.svg")" alt="">
+                    <img class="w-12 h-12 md:w-16 md:h-16" src="@Url.Content("~/website/logo-upst.svg")" alt="">
+                </div>
+                <small class="bg-teal-400 text-white text-xs md:text-sm px-3 md:px-4 py-1 rounded-full inline-block mt-6 md:mt-8">
+                    Tentang
+                </small>
+                
+                <h2 class="text-3xl sm:text-4xl md:text-6xl lg:text-7xl font-bold leading-tight mt-4">
+                    Pesapa Kawan
+                </h2>
+                
+            </div>
+        </div>
+    
+
+        <div class="w-full md:w-1/2 mt-8 md:mt-20">
+             <p class="text-gray-900 text-sm sm:text-base md:text-lg px-2 md:px-0 leading-relaxed">Sebuah wadah kolaborasi yang bertujuan mewujudkan Jakarta yang lebih bersih melalui kesadaran untuk menanggulangi dan memanfaatkan sampah secara lebih baik. Mulai dari pemerintah, kawasan, dan perusahaan. PESAPA KAWAN mengajak untuk para pelaku usaha bekerja sama dan turut terlibat melalui tiga aksi nyata: mengurangi, memilah dan mengolah sampah.</p>
+        </div>
+    </div>
+
+    <div class="items-center justify-center flex mt-6 md:mt-8 px-4">
+        <img class="w-full max-w-md md:max-w-3xl h-auto object-contain" src="@Url.Content("~/website/images/bg-tentang-2.png")" alt="">
+    </div>
+
+</section>

Views/Website/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/Website/Shared/Partials/Frontend/_Footer.cshtml

@@ -0,0 +1,58 @@
+<footer class="bg-cyan-700 py-10 relative overflow-hidden rounded-tr-[200px]">
+    <div class="absolute inset-0" style="background-image: radial-gradient(circle at 85% 1%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 96%, transparent 96%, transparent 100%), radial-gradient(circle at 14% 15%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 1%, transparent 1%, transparent 100%), radial-gradient(circle at 60% 90%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 20%, transparent 20%, transparent 100%), radial-gradient(circle at 79% 7%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 78%, transparent 78%, transparent 100%), radial-gradient(circle at 55% 65%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 52%, transparent 52%, transparent 100%), linear-gradient(135deg, rgb(0, 163, 227), rgb(6, 182, 212));"></div>
+
+    <div class="container mx-auto max-w-6xl px-4 relative z-10">
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+            <div class="col-span-1 md:col-span-2">
+                <div class="mb-6">
+                    <img class="w-20 h-20" src="@Url.Content("~/website/logo.svg")" alt="Pesapakawan Logo">
+                    <p class="text-gray-300 mb-6 text-lg leading-relaxed w-4/5">
+                        Pengelolaan Sampah Pada Kawasan dan Perusahaan.<br>
+                        Membangun semangat kolaborasi untuk mewujudkan Jakarta
+                        yang bersih dan masa depan yang lebih baik.
+                    </p>
+                </div>
+            </div>
+
+            <div>
+                <h4 class="text-xl font-semibold mb-6 text-white">Kontak</h4>
+                <div class="space-y-4 text-gray-300">
+                    <div class="flex items-center group">
+                        <div>
+                            <p class="text-sm text-white">Email</p>
+                            <p class="hover:text-white transition-colors duration-300">info@pesapakawan.com</p>
+                        </div>
+                    </div>
+                    <div class="flex items-center group">
+                        <div>
+                            <p class="text-sm text-white">Telepon</p>
+                            <p class="hover:text-white transition-colors duration-300">+62 123 456 789</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <h4 class="text-xl font-semibold mb-6 text-white">Alamat</h4>
+                <div class="space-y-4 text-gray-300">
+                    <div class="flex items-start group">
+                        <div>
+                            <p class="hover:text-white transition-colors duration-300">
+                                Jl. Mandala V No.67, RT.1/RW.2, Cililitan, Kec. Kramat jati, 
+                                Kota Jakarta Timur, Daerah Khusus Ibukota Jakarta 13640
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="border-t border-gray-700 mt-8 pt-8">
+            <div class="flex mx-auto justify-center items-center text-gray-300">
+                <p class="mb-4 md:mb-0">
+                    &copy; @DateTime.Now.Year Pesapakawan. All rights reserved.
+                </p>
+            </div>
+        </div>
+    </div>
+</footer>

Views/Website/Shared/Partials/Frontend/_Navbar.cshtml

@@ -0,0 +1,173 @@
+<nav class="absolute top-0 left-0 right-0 z-50">
+    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 border rounded-b-3xl border-amber-50 border-t-0 pb-2 backdrop-blur-md bg-white/10">
+        <div class="flex justify-between items-center h-16">
+            <div class="flex items-center">
+                <img class="w-12 h-12 sm:w-16 sm:h-16" src="@Url.Content("~/website/logo.svg")" alt="Logo">
+            </div>
+
+            <div class="hidden lg:flex items-center space-x-8">
+                <a href="/" class="text-white hover:text-amber-300 font-medium transition-all duration-300 hover:scale-105 relative group">
+                    BERANDA
+                    <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-amber-300 transition-all duration-300 group-hover:w-full"></span>
+                </a>
+                <a href="@Url.Action("Usaha", "Website")" class="text-white hover:text-amber-300 font-medium transition-all duration-300 hover:scale-105 relative group">
+                    USAHA/KEGIATAN
+                    <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-amber-300 transition-all duration-300 group-hover:w-full"></span>
+                </a>
+                <div class="relative group" id="dropdown-jasa">
+                    <button type="button" class="text-white hover:text-amber-300 font-medium transition-all duration-300 hover:scale-105 relative group flex items-center gap-2" id="dropdown-jasa-button">
+                        PENYEDIA JASA
+                        <svg class="w-4 h-4 transition-transform duration-300 group-hover:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
+                        <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-amber-300 transition-all duration-300 group-hover:w-full"></span>
+                    </button>
+                    <div class="absolute left-0 mt-2 min-w-[240px] bg-white/95 rounded-2xl shadow-xl border border-amber-100 opacity-0 pointer-events-none transition-all duration-300 z-50 group-hover:opacity-100 group-hover:pointer-events-auto flex flex-col divide-y divide-amber-100" id="dropdown-jasa-menu">
+                        <a href="@Url.Action("PengangkutanSampah", "Website")" class="flex items-center px-5 py-3 text-gray-900 font-semibold hover:bg-amber-50 hover:text-amber-600 transition-all duration-200 rounded-t-2xl">
+                            <span class="mr-2"><svg class="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h8" /></svg></span>
+                            Pengangkutan Sampah
+                        </a>
+                        <a href="@Url.Action("PengolahanSampah", "Website")" class="flex items-center px-5 py-3 text-gray-900 font-semibold hover:bg-teal-50 hover:text-teal-600 transition-all duration-200 rounded-b-2xl">
+                            <span class="mr-2"><svg class="w-5 h-5 text-teal-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v8" /></svg></span>
+                            Pengolahan Sampah
+                        </a>
+                    </div>
+                </div>
+
+                
+                <a href="@Url.Action("Kontak", "Website")" class="text-white hover:text-amber-300 font-medium transition-all duration-300 hover:scale-105 relative group">
+                    KONTAK
+                    <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-amber-300 transition-all duration-300 group-hover:w-full"></span>
+                </a>
+            </div>
+
+            <div class="hidden lg:flex items-center space-x-4">
+                <a href="#" class="text-white hover:text-amber-300 font-medium transition-all duration-300 hover:scale-105 px-4 py-2 rounded-full border border-white/20 hover:border-amber-300/50">
+                    MASUK
+                </a>
+                <a href="@Url.Action("Signup", "Website")" class="bg-gradient-to-r from-[#20D3D3] to-[#20D3D3] text-white px-6 py-2 rounded-full hover:from-teal-500 hover:to-blue-600 transition-all duration-300 font-medium transform hover:scale-105 shadow-lg hover:shadow-xl">
+                    DAFTAR
+                </a>
+            </div>
+
+            <div class="lg:hidden">
+                <button id="mobile-menu-button" class="text-white hover:text-amber-300 transition-colors duration-300 p-2">
+                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+                    </svg>
+                </button>
+            </div>
+        </div>
+
+        <div id="mobile-menu" class="lg:hidden hidden">
+            <div class="px-2 pt-2 pb-3 space-y-1 bg-white/20 backdrop-blur-md rounded-2xl mt-2 border border-white/10">
+                <a href="@Url.Action("Index", "Website")" class="block px-3 py-2 text-white hover:text-amber-300 hover:bg-white/10 rounded-lg font-medium transition-all duration-300">
+                    BERANDA
+                </a>
+                <a href="@Url.Action("Usaha", "Website")" class="block px-3 py-2 text-white hover:text-amber-300 hover:bg-white/10 rounded-lg font-medium transition-all duration-300">
+                    USAHA/KEGIATAN
+                </a>
+                <a href="@Url.Action("PenyediaJasa", "Website")" class="block px-3 py-2 text-white hover:text-amber-300 hover:bg-white/10 rounded-lg font-medium transition-all duration-300">
+                    PENYEDIA JASA
+                </a>
+                <a href="@Url.Action("Kontak", "Website")" class="block px-3 py-2 text-white hover:text-amber-300 hover:bg-white/10 rounded-lg font-medium transition-all duration-300">
+                    KONTAK
+                </a>
+                <div class="flex flex-col space-y-2 pt-2 border-t border-white/20">
+                    <a href="#" class="block px-3 py-2 text-white hover:text-amber-300 hover:bg-white/10 rounded-lg font-medium transition-all duration-300 text-center border border-white/20">
+                        MASUK
+                    </a>
+                    <a href="@Url.Action("Daftar", "Website")" class="block px-3 py-2 bg-gradient-to-r from-teal-400 to-blue-500 text-white rounded-lg font-medium text-center hover:from-teal-500 hover:to-blue-600 transition-all duration-300 shadow-lg">
+                        DAFTAR
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</nav>
+
+<register-block dynamic-section="scripts" key="jsNavbar">
+    <script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const mobileMenuButton = document.getElementById('mobile-menu-button');
+        const mobileMenu = document.getElementById('mobile-menu');
+        
+        mobileMenuButton.addEventListener('click', function() {
+            mobileMenu.classList.toggle('hidden');
+            
+            // Animate menu icon
+            const svg = mobileMenuButton.querySelector('svg');
+            if (mobileMenu.classList.contains('hidden')) {
+                svg.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>';
+            } else {
+                svg.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>';
+            }
+        });
+        
+        // Close mobile menu when clicking outside
+        document.addEventListener('click', function(event) {
+            if (!mobileMenuButton.contains(event.target) && !mobileMenu.contains(event.target)) {
+                mobileMenu.classList.add('hidden');
+                const svg = mobileMenuButton.querySelector('svg');
+                svg.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>';
+            }
+        });
+        
+        // Close mobile menu when window is resized to desktop
+        window.addEventListener('resize', function() {
+            if (window.innerWidth >= 1024) {
+                mobileMenu.classList.add('hidden');
+                const svg = mobileMenuButton.querySelector('svg');
+                svg.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>';
+            }
+        });
+    });
+    </script>
+
+    <script>
+    document.addEventListener('DOMContentLoaded', function() {
+        // Dropdown submenu for PENYEDIA JASA
+        const jasaBtn = document.getElementById('dropdown-jasa-button');
+        const jasaMenu = document.getElementById('dropdown-jasa-menu');
+        const jasaWrapper = document.getElementById('dropdown-jasa');
+
+        let submenuTimeout;
+
+        // Show submenu on hover (desktop)
+        jasaWrapper.addEventListener('mouseenter', function() {
+            clearTimeout(submenuTimeout);
+            jasaMenu.classList.add('opacity-100', 'pointer-events-auto');
+            jasaMenu.classList.remove('opacity-0', 'pointer-events-none');
+        });
+        jasaWrapper.addEventListener('mouseleave', function() {
+            submenuTimeout = setTimeout(function() {
+                jasaMenu.classList.remove('opacity-100', 'pointer-events-auto');
+                jasaMenu.classList.add('opacity-0', 'pointer-events-none');
+            }, 120); // delay to allow moving to submenu
+        });
+
+        jasaMenu.addEventListener('mouseenter', function() {
+            clearTimeout(submenuTimeout);
+            jasaMenu.classList.add('opacity-100', 'pointer-events-auto');
+            jasaMenu.classList.remove('opacity-0', 'pointer-events-none');
+        });
+        jasaMenu.addEventListener('mouseleave', function() {
+            submenuTimeout = setTimeout(function() {
+                jasaMenu.classList.remove('opacity-100', 'pointer-events-auto');
+                jasaMenu.classList.add('opacity-0', 'pointer-events-none');
+            }, 120);
+        });
+
+        // Toggle submenu on click (for accessibility)
+        jasaBtn.addEventListener('click', function(e) {
+            e.preventDefault();
+            const isOpen = jasaMenu.classList.contains('opacity-100');
+            if (isOpen) {
+                jasaMenu.classList.remove('opacity-100', 'pointer-events-auto');
+                jasaMenu.classList.add('opacity-0', 'pointer-events-none');
+            } else {
+                jasaMenu.classList.add('opacity-100', 'pointer-events-auto');
+                jasaMenu.classList.remove('opacity-0', 'pointer-events-none');
+            }
+        });
+    });
+    </script>
+</register-block>

Views/Website/Shared/Partials/Frontend/_Scripts.cshtml

@@ -0,0 +1,8 @@
+<script src="https://api.mapbox.com/mapbox-gl-js/v3.13.0/mapbox-gl.js"></script>
+
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <script>
+         document.addEventListener('DOMContentLoaded', function () {
+        lucide.createIcons();
+    });
+    </script>

Views/Website/Shared/_AuthLayout.cshtml

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="id">
+
+    @{
+    string title = ViewData["Title"] as string ?? "Pesapakawan - Dinas Lingkungan Hidup Provinsi DKI Jakarta";
+    string description = ViewData["Description"] as string ?? "Pengelolaan Sampah Pada Kawasan dan Perusahaan";
+    string keywords = ViewData["Keywords"] as string ?? "Pesapakawan - Dinas Lingkungan Hidup Provinsi DKI Jakarta";
+    string ogTitle = ViewData["OgTitle"] as string ?? "Dinas Lingkungan Hidup Provinsi DKI Jakarta";
+    string ogDescription = ViewData["OgDescription"] as string ?? "Pengelolaan Sampah Pada Kawasan dan Perusahaan";
+    string twitterTitle = ViewData["TwitterTitle"] as string ?? "Pesapakawan - Dinas Lingkungan Hidup Provinsi DKI Jakarta";
+    string twitterDescription = ViewData["TwitterDescription"] as string ?? "Pengelolaan Sampah Pada Kawasan dan Perusahaan";
+    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="@Url.Content("~/assets/cover_og.jpg")" />
+        <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="@Url.Content("~/assets/cover_og.jpg")" />
+
+        <!-- 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=Figtree:ital,wght@0,300..900;1,300..900&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
+
+
+        <link rel="stylesheet" href="~/website/css/watch.css" asp-append-version="true" />
+        <link rel="stylesheet" href="~/website/css/website.css" asp-append-version="true" />
+
+        <dynamic-section name="css" />
+        @await RenderSectionAsync("css", required: false)
+     
+    </head>
+
+
+    <body class="font-sans">
+
+        <main>
+            @RenderBody()
+        </main>
+
+
+        <partial name="~/Views/Website/Shared/Partials/Frontend/_Scripts.cshtml" />
+        @await RenderSectionAsync("scripts", required: false)
+        <dynamic-section name="scripts" />
+        
+    </body>
+</html>

Views/Website/Shared/_Layout.cshtml

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="id">
+
+    @{
+    string title = ViewData["Title"] as string ?? "Pesapakawan - Dinas Lingkungan Hidup Provinsi DKI Jakarta";
+    string description = ViewData["Description"] as string ?? "Pengelolaan Sampah Pada Kawasan dan Perusahaan";
+    string keywords = ViewData["Keywords"] as string ?? "Pesapakawan - Dinas Lingkungan Hidup Provinsi DKI Jakarta";
+    string ogTitle = ViewData["OgTitle"] as string ?? "Dinas Lingkungan Hidup Provinsi DKI Jakarta";
+    string ogDescription = ViewData["OgDescription"] as string ?? "Pengelolaan Sampah Pada Kawasan dan Perusahaan";
+    string twitterTitle = ViewData["TwitterTitle"] as string ?? "Pesapakawan - Dinas Lingkungan Hidup Provinsi DKI Jakarta";
+    string twitterDescription = ViewData["TwitterDescription"] as string ?? "Pengelolaan Sampah Pada Kawasan dan Perusahaan";
+    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="@Url.Content("~/assets/cover_og.jpg")" />
+        <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="@Url.Content("~/assets/cover_og.jpg")" />
+
+        <!-- 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=Figtree:ital,wght@0,300..900;1,300..900&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
+
+
+        <link rel="stylesheet" href="~/website/css/watch.css" asp-append-version="true" />
+        <link rel="stylesheet" href="~/website/css/website.css" asp-append-version="true" />
+
+        <dynamic-section name="css" />
+        @await RenderSectionAsync("css", required: false)
+     
+    </head>
+
+
+    <body class="font-sans">
+        <partial name="~/Views/Website/Shared/Partials/Frontend/_Navbar.cshtml" />
+
+        <main>
+            @RenderBody()
+        </main>
+
+        <partial name="~/Views/Website/Shared/Partials/Frontend/_Footer.cshtml" />
+
+        <partial name="~/Views/Website/Shared/Partials/Frontend/_Scripts.cshtml" />
+        @await RenderSectionAsync("scripts", required: false)
+        <dynamic-section name="scripts" />
+        
+    </body>
+</html>

Views/Website/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/Website/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/Website/Usaha/Index.cshtml

@@ -0,0 +1,302 @@
+@{
+    Layout = "~/Views/Website/Shared/_Layout.cshtml";
+    ViewData["Title"] = "Usaha/Kegiatan Pesapakawan";
+}
+
+<div class="mx-auto bg-gray-50">
+    <div class="bg-cyan-700 pt-30 pb-10 mb-8 shadow-md rounded-br-4xl rounded-bl-4xl relative overflow-hidden">
+        <div class="absolute inset-0" style="background-image: radial-gradient(circle at 85% 1%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 96%, transparent 96%, transparent 100%), radial-gradient(circle at 14% 15%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 1%, transparent 1%, transparent 100%), radial-gradient(circle at 60% 90%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 20%, transparent 20%, transparent 100%), radial-gradient(circle at 79% 7%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 78%, transparent 78%, transparent 100%), radial-gradient(circle at 55% 65%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 52%, transparent 52%, transparent 100%), linear-gradient(135deg, rgb(0, 163, 227), rgb(6, 182, 212));"></div>
+        
+        <div class="max-w-6xl mx-auto px-6 hidden md:block relative z-10">
+            <nav class="flex items-center text-white text-sm space-x-2" aria-label="Breadcrumb">
+                <a href="@Url.Action("Index", "Home")" class="hover:underline">Beranda</a>
+                <i class="w-4 h-4 text-white transition-colors duration-300" data-lucide="chevron-right"></i>
+                <span class="font-semibold">Usaha/Kegiatan Pesapakawan</span>
+            </nav>
+        </div>
+        
+        <div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center px-6 gap-8 relative z-10">
+            <div class="flex-1 text-center md:text-left">
+                <h1 class="text-3xl md:text-4xl font-medium text-white mb-3">Usaha/Kegiatan Pesapakawan</h1>
+                <p class="text-lg text-white mb-4">Pengelolaan Sampah Kawasan dan Perusahaan</p>
+                <div class="w-20 h-1 bg-white mt-4 mx-auto md:mx-0 rounded-full"></div>
+            </div>
+            <div class="flex-shrink-0 hidden md:block">
+                <img src="@Url.Content("~/website/images/bg-header.svg")" alt="Usaha Pesapakawan" class="w-52 h-auto">
+            </div>
+        </div>
+    </div>
+
+    <div class="max-w-6xl mx-auto px-4 lg:px-6 z-20">
+        <div class="bg-white rounded-2xl  p-8 mb-7 border border-gray-200">
+            <div class="flex flex-col lg:flex-row items-start gap-6">
+                <div class="bg-gradient-to-br from-blue-500 to-cyan-600 rounded-xl p-4 flex-shrink-0">
+                    <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                    </svg>
+                </div>
+                <div class="flex-1">
+                    <h2 class="text-2xl font-bold text-gray-900 mb-4">Kewajiban Pengelolaan Sampah</h2>
+                    <p class="text-gray-700 leading-relaxed mb-6">
+                        Setiap Kawasan atau Perusahaan diwajibkan untuk melakukan pengelolaan sampah di areanya. Sebagaimana yang tertera pada <span class="font-semibold text-blue-600">Peraturan Gubernur Nomor 102 Tahun 2021 Pasal 2</span>:
+                    </p>
+                    <div class="bg-gradient-to-r from-blue-50 to-cyan-50 border-l-4 border-blue-500 p-6 rounded-r-xl">
+                        <div class="flex items-start gap-3">
+                            <svg class="w-5 h-5 text-blue-600 mt-1 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"></svg>
+                                <path d="M14.017 21v-7.391c0-5.704-3.731-9.57-8.983-10.609l.949-2.004c6.249 1.235 10.034 6.777 10.034 12.613v7.391h-1.983zm-12.017 0v-7.391c0-5.704-3.748-9.57-9-10.609l.949-2.004c6.249 1.235 10.051 6.777 10.051 12.613v7.391h-2z"/>
+                            </svg>
+                            <p class="text-gray-800 italic font-medium"></p>
+                                "Setiap penanggung jawab atau pengelola kawasan, dan/atau Perusahaan, wajib melakukan Pengelolaan Sampah di dalam area dan/atau fasilitas yang menjadi tanggung jawabnya."
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="bg-white rounded-2xl  p-8 mb-7 border border-gray-200">
+            <div class="text-center mb-8">
+                <h3 class="text-2xl font-bold text-gray-900 mb-3">Kawasan yang Dimaksud</h3>
+                <div class="w-24 h-1 bg-gradient-to-r from-blue-500 to-cyan-500 mx-auto rounded-full"></div>
+            </div>
+            
+            <div class="grid md:grid-cols-3 gap-6">
+                <div class="group bg-gradient-to-br from-gray-50 to-white p-8 rounded-xl border border-gray-200 hover:border-blue-300 transition-all duration-300 text-center">
+                    <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
+                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path>
+                        </svg>
+                    </div>
+                    <h4 class="text-lg font-semibold text-gray-800 mb-2">Kawasan Permukiman</h4>
+                    <p class="text-sm text-gray-600">Area hunian dan kompleks perumahan</p>
+                </div>
+                
+                <div class="group bg-gradient-to-br from-gray-50 to-white p-8 rounded-xl border border-gray-200 hover:border-green-300 transition-all duration-300 text-center">
+                    <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
+                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
+                        </svg>
+                    </div>
+                    <h4 class="text-lg font-semibold text-gray-800 mb-2">Kawasan Komersial</h4>
+                    <p class="text-sm text-gray-600">Mall, perkantoran, dan pusat bisnis</p>
+                </div>
+                
+                <div class="group bg-gradient-to-br from-gray-50 to-white p-8 rounded-xl border border-gray-200 hover:border-orange-300 transition-all duration-300 text-center">
+                    <div class="bg-gradient-to-br from-orange-500 to-orange-600 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
+                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
+                        </svg>
+                    </div>
+                    <h4 class="text-lg font-semibold text-gray-800 mb-2">Kawasan Industri</h4>
+                    <p class="text-sm text-gray-600">Pabrik dan area manufaktur</p>
+                </div>
+            </div>
+        </div>
+
+        <div class="bg-gradient-to-r from-red-50 to-pink-50 border border-red-200 rounded-2xl p-8 mb-7 ">
+            <div class="flex items-center gap-4 mb-6">
+                <div class="bg-red-500 rounded-full p-3">
+                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
+                    </svg>
+                </div>
+                <h3 class="text-2xl font-bold text-red-800">Sanksi Administratif</h3>
+            </div>
+            
+            <p class="text-red-700 mb-8 leading-relaxed">
+                Setiap pengelola Kawasan yang tidak melaksanakan kewajiban Pengelolaan Sampah akan dikenakan sanksi administratif berupa teguran tertulis oleh Dinas Lingkungan Hidup dan akan dipublikasikan di situs yang dikelola oleh Pemerintah Provinsi DKI Jakarta.
+            </p>
+            
+            <div class="grid md:grid-cols-3 gap-4">
+                <div class="bg-white p-6 rounded-xl border border-red-200 shadow-sm">
+                    <div class="flex items-center gap-3 mb-3">
+                        <span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">1</span>
+                        <span class="text-red-800 font-semibold">Teguran Pertama</span>
+                    </div>
+                    <p class="text-red-700 text-sm">Durasi: <strong>14 x 24 jam</strong></p>
+                </div>
+                
+                <div class="bg-white p-6 rounded-xl border border-red-200 shadow-sm">
+                    <div class="flex items-center gap-3 mb-3">
+                        <span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">2</span>
+                        <span class="text-red-800 font-semibold">Teguran Kedua</span>
+                    </div>
+                    <p class="text-red-700 text-sm">Durasi: <strong>7 x 24 jam</strong></p>
+                </div>
+                
+                <div class="bg-white p-6 rounded-xl border border-red-200 shadow-sm">
+                    <div class="flex items-center gap-3 mb-3">
+                        <span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">3</span>
+                        <span class="text-red-800 font-semibold">Teguran Ketiga</span>
+                    </div>
+                    <p class="text-red-700 text-sm">Durasi: <strong>3 x 24 jam</strong></p>
+                </div>
+            </div>
+        </div>
+
+        <div class="grid lg:grid-cols-2 gap-8 mb-7">
+            <div class="bg-white rounded-2xl  p-8 border border-gray-200">
+                <div class="flex items-center gap-4 mb-8">
+                    <div class="bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl p-4">
+                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
+                        </svg>
+                    </div>
+                    <div>
+                        <h3 class="text-2xl font-bold text-gray-900">Pengurangan Sampah</h3>
+                        <p class="text-gray-600">Reduce, Reuse, Recycle</p>
+                    </div>
+                </div>
+                
+                <div class="space-y-6">
+                    <div class="bg-gradient-to-r from-green-50 to-emerald-50 p-6 rounded-xl border border-green-200">
+                        <h4 class="font-bold text-gray-900 mb-3 flex items-center gap-2">
+                            <span class="w-2 h-2 bg-green-500 rounded-full"></span>
+                            Pembatasan Timbulan Sampah
+                        </h4>
+                        <ul class="text-gray-700 space-y-2">
+                            <li class="flex items-start gap-2">
+                                <span class="text-green-500 mt-1">✓</span>
+                                <span>Menyediakan sedikit mungkin kemasan/produk yang menimbulkan sampah</span>
+                            </li>
+                            <li class="flex items-start gap-2">
+                                <span class="text-green-500 mt-1">✓</span>
+                                <span>Menghindari penyediaan maupun penggunaan kemasan/produk sekali pakai</span>
+                            </li>
+                            <li class="flex items-start gap-2">
+                                <span class="text-green-500 mt-1">✓</span>
+                                <span>Menggunakan barang dan/atau kemasan yang dapat didaur ulang</span>
+                            </li>
+                        </ul>
+                    </div>
+                    
+                    <div class="bg-gradient-to-r from-blue-50 to-cyan-50 p-6 rounded-xl border border-blue-200">
+                        <h4 class="font-bold text-gray-900 mb-3 flex items-center gap-2">
+                            <span class="w-2 h-2 bg-blue-500 rounded-full"></span>
+                            Pemanfaatan Kembali Kemasan
+                        </h4>
+                        <p class="text-gray-700">Memanfaatkan produk/kemasan lama untuk fungsi sama atau fungsi yang berbeda tanpa melalui proses pengolahan terlebih dahulu.</p>
+                    </div>
+                    
+                    <div class="bg-gradient-to-r from-purple-50 to-indigo-50 p-6 rounded-xl border border-purple-200">
+                        <h4 class="font-bold text-gray-900 mb-3 flex items-center gap-2">
+                            <span class="w-2 h-2 bg-purple-500 rounded-full"></span>
+                            Daur Ulang Sampah
+                        </h4>
+                        <p class="text-gray-700">Memanfaatkan sampah menjadi barang yang berguna setelah melalui proses pengolahan terlebih dahulu.</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-2xl  p-8 border border-gray-200">
+                <div class="flex items-center gap-4 mb-8">
+                    <div class="bg-gradient-to-br from-blue-500 to-cyan-600 rounded-xl p-4">
+                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
+                        </svg>
+                    </div>
+                    <div>
+                        <h3 class="text-2xl font-bold text-gray-900">Penanganan Sampah</h3>
+                        <p class="text-gray-600">Pemilahan & Pengolahan</p>
+                    </div>
+                </div>
+                
+                <div class="space-y-6">
+                    <div class="bg-gradient-to-r from-gray-50 to-slate-50 p-6 rounded-xl border border-gray-200">
+                        <h4 class="font-bold text-gray-900 mb-4">Pemilahan Sampah</h4>
+                        <p class="text-gray-700 mb-4">Pengelompokan sampah pada wadah yang sesuai dengan jenisnya:</p>
+                        
+                        <div class="grid grid-cols-2 gap-3">
+                            <div class="bg-green-100 p-4 rounded-lg text-center border border-green-300 hover:shadow-md transition-shadow">
+                                <div class="text-2xl mb-2">🍎</div>
+                                <div class="text-sm font-bold text-green-800">Mudah Terurai</div>
+                                <div class="text-xs text-green-600 bg-green-200 px-2 py-1 rounded-full mt-1">Hijau</div>
+                            </div>
+                            <div class="bg-yellow-100 p-4 rounded-lg text-center border border-yellow-300 hover:shadow-md transition-shadow">
+                                <div class="text-2xl mb-2">📦</div>
+                                <div class="text-sm font-bold text-yellow-800">Daur Ulang</div>
+                                <div class="text-xs text-yellow-600 bg-yellow-200 px-2 py-1 rounded-full mt-1">Kuning</div>
+                            </div>
+                            <div class="bg-red-100 p-4 rounded-lg text-center border border-red-300 hover:shadow-md transition-shadow">
+                                <div class="text-2xl mb-2">🔋</div>
+                                <div class="text-sm font-bold text-red-800">B3</div>
+                                <div class="text-xs text-red-600 bg-red-200 px-2 py-1 rounded-full mt-1">Merah</div>
+                            </div>
+                            <div class="bg-gray-100 p-4 rounded-lg text-center border border-gray-300 hover:shadow-md transition-shadow">
+                                <div class="text-2xl mb-2">🧻</div>
+                                <div class="text-sm font-bold text-gray-800">Residu</div>
+                                <div class="text-xs text-gray-600 bg-gray-200 px-2 py-1 rounded-full mt-1">Abu-abu</div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="space-y-3">
+                        <div class="bg-blue-50 p-5 rounded-xl border border-blue-200 hover:shadow-md transition-shadow">
+                            <h5 class="font-bold text-blue-900 mb-2 flex items-center gap-2">
+                                <span class="w-2 h-2 bg-blue-500 rounded-full"></span>
+                                Pengumpulan Sampah
+                            </h5>
+                            <p class="text-blue-800 text-sm">Pengumpulan sampah terpilah dari sumber sampah TPS atau TPS 3R</p>
+                        </div>
+                        
+                        <div class="bg-green-50 p-5 rounded-xl border border-green-200 hover:shadow-md transition-shadow">
+                            <h5 class="font-bold text-green-900 mb-2 flex items-center gap-2">
+                                <span class="w-2 h-2 bg-green-500 rounded-full"></span>
+                                Pengolahan Sampah
+                            </h5>
+                            <p class="text-green-800 text-sm">Pengolahan sampah mudah terurai dan daur ulang di lokasi sumber</p>
+                        </div>
+                        
+                        <div class="bg-orange-50 p-5 rounded-xl border border-orange-200 hover:shadow-md transition-shadow">
+                            <h5 class="font-bold text-orange-900 mb-2 flex items-center gap-2">
+                                <span class="w-2 h-2 bg-orange-500 rounded-full"></span>
+                                Pengangkutan Sampah
+                            </h5>
+                            <p class="text-orange-800 text-sm">Pengangkutan dari TPS ke fasilitas pengolahan</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="bg-gradient-to-r from-blue-600 to-cyan-600 rounded-2xl p-8 text-center border border-blue-200 mb-7 relative overflow-hidden">
+            <div class="absolute inset-0" style="background-image: radial-gradient(circle at 20% 80%, hsla(0, 0%, 100%, 0.1) 0%, hsla(0, 0%, 100%, 0.1) 22%, transparent 22%, transparent 100%), radial-gradient(circle at 80% 20%, hsla(0, 0%, 100%, 0.1) 0%, hsla(0, 0%, 100%, 0.1) 25%, transparent 25%, transparent 100%), radial-gradient(circle at 40% 40%, hsla(0, 0%, 100%, 0.05) 0%, hsla(0, 0%, 100%, 0.05) 50%, transparent 50%, transparent 100%), linear-gradient(90deg, transparent 24%, hsla(0, 0%, 100%, 0.03) 25%, hsla(0, 0%, 100%, 0.03) 26%, transparent 27%, transparent 74%, hsla(0, 0%, 100%, 0.03) 75%, hsla(0, 0%, 100%, 0.03) 76%, transparent 77%, transparent), linear-gradient(0deg, transparent 24%, hsla(0, 0%, 100%, 0.03) 25%, hsla(0, 0%, 100%, 0.03) 26%, transparent 27%, transparent 74%, hsla(0, 0%, 100%, 0.03) 75%, hsla(0, 0%, 100%, 0.03) 76%, transparent 77%, transparent);"></div>
+            <div class="max-w-3xl mx-auto relative z-10">
+            <h3 class="text-2xl font-bold text-white mb-4">Informasi Penting</h3>
+            <p class="text-blue-100 mb-6 leading-relaxed">
+                Penanggung jawab atau pengelola kawasan wajib melakukan registrasi dan menyampaikan laporan Pengelolaan Sampah harian setiap bulan.
+            </p>
+            <p class="text-blue-200 text-sm mb-8">
+                Untuk informasi lengkap, lihat <span class="font-semibold text-white">Peraturan Gubernur Nomor 102 Tahun 2021</span>
+            </p>
+            <div class="_df_button inline-flex items-center gap-3 bg-white text-blue-600 px-8 py-4 rounded-xl hover:bg-blue-50 transition-all duration-300 cursor-pointer font-semibold hover:scale-105" source="@Url.Content("~/website/documents/Pergub_102_2021.pdf")">
+                <span>Download Peraturan Gubernur Nomor 102 Tahun 2021</span>
+            </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<register-block dynamic-section="css" key="cssUsaha">
+    <link href="~/website/lib/dflip/css/dflip.min.css" rel="stylesheet" type="text/css">
+    <link href="~/website/lib/dflip/css/themify-icons.min.css" rel="stylesheet" type="text/css">
+    <style>
+        .transition-colors {
+            transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
+        }
+        
+        ._df_button:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+        
+        .bg-gray-50 {
+            background-color: #f9fafb;
+        }
+    </style>
+</register-block>
+
+<register-block dynamic-section="scripts" key="jsUsaha">
+    <script src="~/website/lib/dflip/js/libs/jquery.min.js" type="text/javascript"></script>
+    <script src="~/website/lib/dflip/js/dflip.min.js" type="text/javascript"></script>
+</register-block>

Views/_ViewImports.cshtml

@@ -0,0 +1,3 @@
+@using pesapakawan
+@using pesapakawan.Models
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Views/_ViewStart.cshtml

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

appsettings.json

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

package.json

@@ -0,0 +1,9 @@
+{
+  "dependencies": {
+    "@tailwindcss/cli": "^4.1.10",
+    "tailwindcss": "^4.1.10"
+  },
+  "scripts": {
+    "watch": "npx @tailwindcss/cli -i ./wwwroot/website/css/site.css -o ./wwwroot/website/css/watch.css --watch"
+  }
+}

pesapakawan.csproj

@@ -0,0 +1,14 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>net9.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="DynamicSections" Version="2.0.0" />
+  </ItemGroup>
+  
+
+</Project>

pesapakawan.sln

@@ -0,0 +1,24 @@
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.5.2.0
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "pesapakawan", "pesapakawan.csproj", "{3B5DB5B6-35F5-E4A9-A4B8-8FE1C9E5AA8F}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{3B5DB5B6-35F5-E4A9-A4B8-8FE1C9E5AA8F}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{3B5DB5B6-35F5-E4A9-A4B8-8FE1C9E5AA8F}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{3B5DB5B6-35F5-E4A9-A4B8-8FE1C9E5AA8F}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{3B5DB5B6-35F5-E4A9-A4B8-8FE1C9E5AA8F}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {81F40452-3DCC-4DC2-9EE2-7D4466E2EBE5}
+	EndGlobalSection
+EndGlobal

tailwind.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  content: [
+    "./Views/Website/**/*.cshtml",
+    "./Pages/**/*.cshtml",
+    "./wwwroot/js/**/*.js",
+  ],
+};

wwwroot/website/css/site.css

@@ -0,0 +1 @@
+@import "tailwindcss";

wwwroot/website/css/website.css

@@ -0,0 +1,3 @@
+.font-sans {
+  font-family: "Figtree", sans-serif;
+}

wwwroot/website/images/laksanakan.svg

@@ -0,0 +1,38 @@
+<svg width="137" height="128" viewBox="0 0 137 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.9241 64.1528C27.4292 64.3947 27.8083 64.8771 27.9071 65.4966L28.6479 70.114C28.6718 70.2872 28.7802 70.4337 28.9374 70.5059L34.6627 73.2241C34.7025 73.2439 34.7433 73.2673 34.7743 73.2971C34.869 73.3365 34.9638 73.3759 35.056 73.4197L46.0626 78.5861C49.159 80.0387 50.429 83.8705 48.8876 87.1477C47.3534 90.4229 43.5927 91.8992 40.4964 90.4466L29.4897 85.2802C29.3577 85.2165 29.2258 85.1528 29.1016 85.0755C29.0819 85.0732 29.0719 85.0644 29.0547 85.0576L16.0301 78.8771L16.0396 78.8555L13.2114 77.5177C13.1046 77.4624 12.9777 77.3323 12.9423 77.2157C12.5975 76.139 13.1035 75.31 13.7906 75.0515C14.1327 74.9168 14.5069 74.915 14.8468 75.083L17.2766 76.2342L17.4632 75.8358L12.6551 73.5539C12.5377 73.5016 12.4408 73.3978 12.3964 73.276C12.0078 72.2072 12.5284 71.3475 13.2253 71.0825C13.5603 70.9498 13.939 70.9506 14.277 71.1115L18.6912 73.2094C18.6912 73.2094 18.71 73.2081 18.7161 73.2026L18.9811 72.6415C18.9811 72.6415 18.9834 72.6217 18.9753 72.6201L13.0223 69.7953C12.9175 69.7472 12.7932 69.6126 12.7552 69.5005C12.4104 68.4238 12.9164 67.5948 13.6061 67.3317C13.9411 67.199 14.3198 67.1998 14.6578 67.3607L20.2295 70.0057L20.3868 69.6687L15.5833 67.3894C15.4649 67.3335 15.3689 67.2333 15.3226 67.1043C14.934 66.0356 15.4547 65.1759 16.1515 64.9109C16.4865 64.7782 16.8617 64.7799 17.2032 64.9399L23.5546 67.9513C23.5944 67.9711 23.6351 67.9945 23.6759 68.0179C23.9605 68.1512 24.278 67.9965 24.4045 67.729C24.4536 67.6278 24.471 67.5084 24.4534 67.3869L24.2802 66.2944C24.1162 65.2643 24.7915 64.2556 25.791 64.0349C26.1913 63.9457 26.581 64.0009 26.918 64.1583L26.9241 64.1528Z" fill="white" stroke="black" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M74.5465 23.4723C74.5465 23.4723 59.1981 36.6145 39.7333 31.97C20.2649 27.3265 51.6205 40.9703 51.6205 40.9703C51.6205 40.9703 74.9926 35.3388 74.5465 23.4723Z" fill="#E87722" stroke="black" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M89.2837 23.4041C89.2837 23.4041 103.798 25.9315 103.224 21.6628C102.647 17.395 89.3058 13.254 89.3058 13.254L89.2873 23.4032L89.2837 23.4041Z" fill="#E87722" stroke="black" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M135.134 97.9563L46.8133 97.8058C46.1158 99.4819 40.3034 81.3627 39.0472 77.921C39.0472 77.921 21.1219 38.1528 26.9417 26.4378C32.7605 14.7194 44.0859 22.4913 44.0859 22.4913C44.0859 22.4913 49.6954 27.8906 47.4432 31.4939C47.121 32.0131 46.8726 33.2007 46.663 34.871C47.9139 36.1308 49.5799 36.678 52.7615 35.8172L52.8691 35.7766C62.4286 34.2799 67.3066 31.7327 69.7598 29.3101C69.7906 29.2826 69.8169 29.2525 69.8441 29.226C73.0088 26.0412 71.9976 23.0953 71.9976 23.0953C71.9976 23.0953 69.4932 10.7725 79.706 8.46815C89.9161 6.16832 93.8825 10.0735 96.4909 15.2907C98.8264 19.966 93.2594 20.6731 92.0731 20.7685C98.1714 24.2154 101.922 21.4454 102.681 20.7853C102.777 20.702 102.825 20.6545 102.825 20.6545C102.825 20.6545 116.698 63.0561 135.129 97.9502L135.134 97.9563Z" fill="#F2CD00" stroke="black" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M47.1937 35.2358C47.1937 35.2358 42.7011 31.8591 41.7476 30.0447" stroke="black" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M91.9822 20.6017C91.9822 20.6017 86.6002 18.6013 87.7027 14.1543" stroke="black" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M59.21 76.0868C63.2851 74.9842 65.6949 70.7869 64.5923 66.7118C63.4897 62.6367 59.2924 60.227 55.2173 61.3295C51.1422 62.4321 48.7324 66.6294 49.835 70.7045C50.9376 74.7797 55.1349 77.1893 59.21 76.0868Z" fill="#E87722"/>
+<path d="M64.1974 66.4785C66.0241 65.8864 66.1455 61.2125 64.4685 56.0389C62.7915 50.8653 59.9513 47.1513 58.1246 47.7433C56.298 48.3354 56.1766 53.0095 57.8536 58.183C59.5305 63.3566 62.3708 67.0706 64.1974 66.4785Z" fill="black" stroke="black" stroke-width="2.25" stroke-miterlimit="10"/>
+<mask id="mask0_698_1276" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="56" y="47" width="10" height="20">
+<path d="M64.1974 66.4785C66.0241 65.8864 66.1455 61.2125 64.4685 56.0389C62.7915 50.8653 59.9513 47.1513 58.1246 47.7433C56.298 48.3354 56.1766 53.0095 57.8536 58.183C59.5305 63.3566 62.3708 67.0706 64.1974 66.4785Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_698_1276)">
+<path d="M63.6326 58.8116C64.3922 58.6061 64.8413 57.8237 64.6358 57.0642C64.4303 56.3047 63.648 55.8555 62.8884 56.061C62.1289 56.2665 61.6798 57.0489 61.8853 57.8084C62.0908 58.5679 62.8731 59.0171 63.6326 58.8116Z" fill="#F7F7CF" stroke="black" stroke-width="0.9" stroke-miterlimit="10"/>
+<path d="M62.6367 63.5393C63.8921 63.1997 64.6344 61.9066 64.2947 60.6512C63.9551 59.3958 62.662 58.6535 61.4066 58.9931C60.1512 59.3328 59.4089 60.6259 59.7486 61.8812C60.0882 63.1366 61.3813 63.879 62.6367 63.5393Z" fill="#F7F7CF" stroke="black" stroke-width="0.9" stroke-miterlimit="10"/>
+<path d="M62.5629 55.8471C61.4426 56.2573 61.3829 56.3614 61.5935 57.5356C61.1833 56.4154 61.0792 56.3556 59.905 56.5662C61.0252 56.1561 61.085 56.052 60.8744 54.8777C61.2845 55.998 61.3886 56.0577 62.5629 55.8471Z" fill="#F7F7CF"/>
+<path d="M66.8208 62.9082C65.2205 63.4942 65.1382 63.6426 65.4356 65.321C64.8497 63.7207 64.7013 63.6385 63.0228 63.9358C64.6232 63.3499 64.7054 63.2015 64.408 61.5231C64.9939 63.1234 65.1424 63.2056 66.8208 62.9082Z" fill="#F7F7CF"/>
+</g>
+<path d="M56.0349 66.0752L53.7931 70.4098" stroke="black" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M58.7965 65.9512L55.3636 72.7799" stroke="black" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M87.7235 68.7965C91.7986 67.6939 94.2083 63.4966 93.1057 59.4215C92.0031 55.3464 87.8058 52.9367 83.7307 54.0393C79.6556 55.1418 77.2459 59.3392 78.3484 63.4143C79.451 67.4894 83.6484 69.8991 87.7235 68.7965Z" fill="#E87722"/>
+<path d="M79.8278 52.6276C78.6674 47.3143 76.2059 43.3391 74.3299 43.7488C72.4539 44.1585 71.8738 48.7979 73.0342 54.1113C74.1946 59.4246 76.6561 63.3998 78.5321 62.9901C80.4081 62.5804 80.9882 57.941 79.8278 52.6276Z" fill="black" stroke="black" stroke-width="2.25" stroke-miterlimit="10"/>
+<mask id="mask1_698_1276" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="72" y="43" width="9" height="21">
+<path d="M79.8278 52.6276C78.6674 47.3143 76.2059 43.3391 74.3299 43.7488C72.4539 44.1585 71.8738 48.7979 73.0342 54.1113C74.1946 59.4246 76.6561 63.3998 78.5321 62.9901C80.4081 62.5804 80.9882 57.941 79.8278 52.6276Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_698_1276)">
+<path d="M75.1941 56.1077C75.9537 55.9022 76.4028 55.1198 76.1973 54.3603C75.9918 53.6008 75.2095 53.1517 74.45 53.3572C73.6904 53.5627 73.2413 54.345 73.4468 55.1045C73.6523 55.864 74.4346 56.3132 75.1941 56.1077Z" fill="#F7F7CF" stroke="black" stroke-width="0.9" stroke-miterlimit="10"/>
+<path d="M78.4423 59.6909C79.6977 59.3513 80.4401 58.0582 80.1004 56.8028C79.7607 55.5474 78.4677 54.8051 77.2123 55.1448C75.9569 55.4844 75.2146 56.7775 75.5542 58.0329C75.8939 59.2882 77.1869 60.0306 78.4423 59.6909Z" fill="#F7F7CF" stroke="black" stroke-width="0.9" stroke-miterlimit="10"/>
+<path d="M74.623 53.0084C75.7972 52.7977 75.9014 52.8575 76.3115 53.9777C76.1009 52.8035 76.1606 52.6994 77.2809 52.2892C76.1067 52.4999 76.0026 52.4401 75.5924 51.3199C75.803 52.4941 75.7432 52.5982 74.623 53.0084Z" fill="#F7F7CF"/>
+<path d="M74.507 61.2566C76.1844 60.9557 76.3302 61.0424 76.9197 62.6418C76.6188 60.9644 76.7055 60.8186 78.3049 60.2291C76.6274 60.53 76.4816 60.4433 75.8921 58.8439C76.1931 60.5213 76.1063 60.6671 74.507 61.2566Z" fill="#F7F7CF"/>
+</g>
+<path d="M85.4177 58.5496L89.5392 61.1625" stroke="black" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M82.9705 59.835L89.3782 64.0011" stroke="black" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M100.197 25.6553C88.7977 29.8332 88.1939 30.8799 90.3348 42.8346C86.1569 31.4349 85.1102 30.8309 73.1556 32.9719C84.5553 28.794 85.1592 27.7473 83.0183 15.7927C87.1962 27.1924 88.2428 27.7963 100.197 25.6553Z" fill="#F7F7CF"/>
+<path d="M75.8469 81.9666C79.6033 80.9502 81.8245 77.0812 80.8081 73.3249C79.7918 69.5686 75.9228 67.3473 72.1665 68.3636C68.4101 69.38 66.1889 73.249 67.2052 77.0053C68.2215 80.7617 72.0906 82.9829 75.8469 81.9666Z" fill="black" stroke="black" stroke-width="2.25" stroke-miterlimit="10"/>
+<path d="M86.1518 65.3903C86.7699 65.3149 87.4189 65.5369 87.8846 66.0571L91.3626 69.9377C91.4898 70.083 91.682 70.1572 91.874 70.132L98.8798 69.2306C98.9316 69.2243 98.9808 69.2224 99.0293 69.2322C99.1391 69.214 99.255 69.1903 99.3658 69.1757L112.799 67.3841C116.579 66.8815 120.077 69.7088 120.609 73.7097C121.144 77.7061 118.507 81.3562 114.728 81.8623L101.295 83.6539C101.132 83.6749 100.969 83.6924 100.806 83.6983C100.784 83.704 100.77 83.7079 100.752 83.7127L84.8127 85.7656L84.8059 85.7407L81.3522 86.1895C81.2217 86.2019 81.0221 86.1565 80.9174 86.0663C79.944 85.2667 79.9186 84.1838 80.4101 83.527C80.649 83.1947 81.001 82.9694 81.419 82.9175L84.3896 82.5344L84.3229 82.0477L78.4407 82.8057C78.3005 82.8245 78.1458 82.7898 78.0304 82.7025C77.0226 81.9313 76.9922 80.8154 77.4843 80.147C77.718 79.8237 78.0762 79.593 78.4897 79.5385L83.8924 78.8453C83.8924 78.8453 83.9118 78.8324 83.9089 78.8217L83.8187 78.1349C83.8187 78.1349 83.8129 78.1135 83.8022 78.1164L76.516 79.0554C76.39 79.0703 76.193 79.0204 76.0867 78.9383C75.1133 78.1387 75.0879 77.0558 75.5774 76.3919C75.8112 76.0686 76.1693 75.8379 76.5828 75.7834L83.4037 74.9053L83.3492 74.4918L77.4706 75.2488C77.3232 75.2695 77.1757 75.233 77.0548 75.1395C76.047 74.3683 76.0166 73.2524 76.5087 72.584C76.7424 72.2607 77.0934 72.0319 77.5141 71.9755L85.2834 70.9708C85.3352 70.9644 85.3844 70.9625 85.4372 70.9597C85.7882 70.9145 85.9876 70.5775 85.9445 70.2489C85.927 70.1275 85.878 70.003 85.7847 69.8983L84.962 68.9776C84.1888 68.1124 84.2119 66.7564 85.0183 65.9493C85.3398 65.6253 85.7373 65.4413 86.1463 65.3842L86.1518 65.3903Z" fill="white" stroke="black" stroke-width="2.7" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M51.6926 50.9727C35.9508 57.5872 35.175 59.101 38.9642 75.7487C32.3497 60.0069 30.836 59.2311 14.1883 63.0203C29.9301 56.4058 30.7058 54.8921 26.9166 38.2444C33.5311 53.9862 35.0449 54.762 51.6926 50.9727Z" fill="#F7F7CF"/>
+</svg>

wwwroot/website/js/site.js

@@ -0,0 +1,4 @@
+// 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.
+
+// Write your JavaScript code.

wwwroot/website/lib/bootstrap/LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2011-2021 Twitter, Inc.
+Copyright (c) 2011-2021 The Bootstrap Authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

wwwroot/website/lib/bootstrap/dist/css/bootstrap-reboot.css

@@ -0,0 +1,597 @@
+/*!
+ * Bootstrap Reboot v5.3.3 (https://getbootstrap.com/)
+ * Copyright 2011-2024 The Bootstrap Authors
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+:root,
+[data-bs-theme=light] {
+  --bs-blue: #0d6efd;
+  --bs-indigo: #6610f2;
+  --bs-purple: #6f42c1;
+  --bs-pink: #d63384;
+  --bs-red: #dc3545;
+  --bs-orange: #fd7e14;
+  --bs-yellow: #ffc107;
+  --bs-green: #198754;
+  --bs-teal: #20c997;
+  --bs-cyan: #0dcaf0;
+  --bs-black: #000;
+  --bs-white: #fff;
+  --bs-gray: #6c757d;
+  --bs-gray-dark: #343a40;
+  --bs-gray-100: #f8f9fa;
+  --bs-gray-200: #e9ecef;
+  --bs-gray-300: #dee2e6;
+  --bs-gray-400: #ced4da;
+  --bs-gray-500: #adb5bd;
+  --bs-gray-600: #6c757d;
+  --bs-gray-700: #495057;
+  --bs-gray-800: #343a40;
+  --bs-gray-900: #212529;
+  --bs-primary: #0d6efd;
+  --bs-secondary: #6c757d;
+  --bs-success: #198754;
+  --bs-info: #0dcaf0;
+  --bs-warning: #ffc107;
+  --bs-danger: #dc3545;
+  --bs-light: #f8f9fa;
+  --bs-dark: #212529;
+  --bs-primary-rgb: 13, 110, 253;
+  --bs-secondary-rgb: 108, 117, 125;
+  --bs-success-rgb: 25, 135, 84;
+  --bs-info-rgb: 13, 202, 240;
+  --bs-warning-rgb: 255, 193, 7;
+  --bs-danger-rgb: 220, 53, 69;
+  --bs-light-rgb: 248, 249, 250;
+  --bs-dark-rgb: 33, 37, 41;
+  --bs-primary-text-emphasis: #052c65;
+  --bs-secondary-text-emphasis: #2b2f32;
+  --bs-success-text-emphasis: #0a3622;
+  --bs-info-text-emphasis: #055160;
+  --bs-warning-text-emphasis: #664d03;
+  --bs-danger-text-emphasis: #58151c;
+  --bs-light-text-emphasis: #495057;
+  --bs-dark-text-emphasis: #495057;
+  --bs-primary-bg-subtle: #cfe2ff;
+  --bs-secondary-bg-subtle: #e2e3e5;
+  --bs-success-bg-subtle: #d1e7dd;
+  --bs-info-bg-subtle: #cff4fc;
+  --bs-warning-bg-subtle: #fff3cd;
+  --bs-danger-bg-subtle: #f8d7da;
+  --bs-light-bg-subtle: #fcfcfd;
+  --bs-dark-bg-subtle: #ced4da;
+  --bs-primary-border-subtle: #9ec5fe;
+  --bs-secondary-border-subtle: #c4c8cb;
+  --bs-success-border-subtle: #a3cfbb;
+  --bs-info-border-subtle: #9eeaf9;
+  --bs-warning-border-subtle: #ffe69c;
+  --bs-danger-border-subtle: #f1aeb5;
+  --bs-light-border-subtle: #e9ecef;
+  --bs-dark-border-subtle: #adb5bd;
+  --bs-white-rgb: 255, 255, 255;
+  --bs-black-rgb: 0, 0, 0;
+  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
+  --bs-body-font-family: var(--bs-font-sans-serif);
+  --bs-body-font-size: 1rem;
+  --bs-body-font-weight: 400;
+  --bs-body-line-height: 1.5;
+  --bs-body-color: #212529;
+  --bs-body-color-rgb: 33, 37, 41;
+  --bs-body-bg: #fff;
+  --bs-body-bg-rgb: 255, 255, 255;
+  --bs-emphasis-color: #000;
+  --bs-emphasis-color-rgb: 0, 0, 0;
+  --bs-secondary-color: rgba(33, 37, 41, 0.75);
+  --bs-secondary-color-rgb: 33, 37, 41;
+  --bs-secondary-bg: #e9ecef;
+  --bs-secondary-bg-rgb: 233, 236, 239;
+  --bs-tertiary-color: rgba(33, 37, 41, 0.5);
+  --bs-tertiary-color-rgb: 33, 37, 41;
+  --bs-tertiary-bg: #f8f9fa;
+  --bs-tertiary-bg-rgb: 248, 249, 250;
+  --bs-heading-color: inherit;
+  --bs-link-color: #0d6efd;
+  --bs-link-color-rgb: 13, 110, 253;
+  --bs-link-decoration: underline;
+  --bs-link-hover-color: #0a58ca;
+  --bs-link-hover-color-rgb: 10, 88, 202;
+  --bs-code-color: #d63384;
+  --bs-highlight-color: #212529;
+  --bs-highlight-bg: #fff3cd;
+  --bs-border-width: 1px;
+  --bs-border-style: solid;
+  --bs-border-color: #dee2e6;
+  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
+  --bs-border-radius: 0.375rem;
+  --bs-border-radius-sm: 0.25rem;
+  --bs-border-radius-lg: 0.5rem;
+  --bs-border-radius-xl: 1rem;
+  --bs-border-radius-xxl: 2rem;
+  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
+  --bs-border-radius-pill: 50rem;
+  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
+  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
+  --bs-focus-ring-width: 0.25rem;
+  --bs-focus-ring-opacity: 0.25;
+  --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
+  --bs-form-valid-color: #198754;
+  --bs-form-valid-border-color: #198754;
+  --bs-form-invalid-color: #dc3545;
+  --bs-form-invalid-border-color: #dc3545;
+}
+
+[data-bs-theme=dark] {
+  color-scheme: dark;
+  --bs-body-color: #dee2e6;
+  --bs-body-color-rgb: 222, 226, 230;
+  --bs-body-bg: #212529;
+  --bs-body-bg-rgb: 33, 37, 41;
+  --bs-emphasis-color: #fff;
+  --bs-emphasis-color-rgb: 255, 255, 255;
+  --bs-secondary-color: rgba(222, 226, 230, 0.75);
+  --bs-secondary-color-rgb: 222, 226, 230;
+  --bs-secondary-bg: #343a40;
+  --bs-secondary-bg-rgb: 52, 58, 64;
+  --bs-tertiary-color: rgba(222, 226, 230, 0.5);
+  --bs-tertiary-color-rgb: 222, 226, 230;
+  --bs-tertiary-bg: #2b3035;
+  --bs-tertiary-bg-rgb: 43, 48, 53;
+  --bs-primary-text-emphasis: #6ea8fe;
+  --bs-secondary-text-emphasis: #a7acb1;
+  --bs-success-text-emphasis: #75b798;
+  --bs-info-text-emphasis: #6edff6;
+  --bs-warning-text-emphasis: #ffda6a;
+  --bs-danger-text-emphasis: #ea868f;
+  --bs-light-text-emphasis: #f8f9fa;
+  --bs-dark-text-emphasis: #dee2e6;
+  --bs-primary-bg-subtle: #031633;
+  --bs-secondary-bg-subtle: #161719;
+  --bs-success-bg-subtle: #051b11;
+  --bs-info-bg-subtle: #032830;
+  --bs-warning-bg-subtle: #332701;
+  --bs-danger-bg-subtle: #2c0b0e;
+  --bs-light-bg-subtle: #343a40;
+  --bs-dark-bg-subtle: #1a1d20;
+  --bs-primary-border-subtle: #084298;
+  --bs-secondary-border-subtle: #41464b;
+  --bs-success-border-subtle: #0f5132;
+  --bs-info-border-subtle: #087990;
+  --bs-warning-border-subtle: #997404;
+  --bs-danger-border-subtle: #842029;
+  --bs-light-border-subtle: #495057;
+  --bs-dark-border-subtle: #343a40;
+  --bs-heading-color: inherit;
+  --bs-link-color: #6ea8fe;
+  --bs-link-hover-color: #8bb9fe;
+  --bs-link-color-rgb: 110, 168, 254;
+  --bs-link-hover-color-rgb: 139, 185, 254;
+  --bs-code-color: #e685b5;
+  --bs-highlight-color: #dee2e6;
+  --bs-highlight-bg: #664d03;
+  --bs-border-color: #495057;
+  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
+  --bs-form-valid-color: #75b798;
+  --bs-form-valid-border-color: #75b798;
+  --bs-form-invalid-color: #ea868f;
+  --bs-form-invalid-border-color: #ea868f;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :root {
+    scroll-behavior: smooth;
+  }
+}
+
+body {
+  margin: 0;
+  font-family: var(--bs-body-font-family);
+  font-size: var(--bs-body-font-size);
+  font-weight: var(--bs-body-font-weight);
+  line-height: var(--bs-body-line-height);
+  color: var(--bs-body-color);
+  text-align: var(--bs-body-text-align);
+  background-color: var(--bs-body-bg);
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+hr {
+  margin: 1rem 0;
+  color: inherit;
+  border: 0;
+  border-top: var(--bs-border-width) solid;
+  opacity: 0.25;
+}
+
+h6, h5, h4, h3, h2, h1 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  line-height: 1.2;
+  color: var(--bs-heading-color);
+}
+
+h1 {
+  font-size: calc(1.375rem + 1.5vw);
+}
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 2.5rem;
+  }
+}
+
+h2 {
+  font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  h2 {
+    font-size: 2rem;
+  }
+}
+
+h3 {
+  font-size: calc(1.3rem + 0.6vw);
+}
+@media (min-width: 1200px) {
+  h3 {
+    font-size: 1.75rem;
+  }
+}
+
+h4 {
+  font-size: calc(1.275rem + 0.3vw);
+}
+@media (min-width: 1200px) {
+  h4 {
+    font-size: 1.5rem;
+  }
+}
+
+h5 {
+  font-size: 1.25rem;
+}
+
+h6 {
+  font-size: 1rem;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+abbr[title] {
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+  cursor: help;
+  -webkit-text-decoration-skip-ink: none;
+  text-decoration-skip-ink: none;
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul {
+  padding-left: 2rem;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin-bottom: 0.5rem;
+  margin-left: 0;
+}
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+small {
+  font-size: 0.875em;
+}
+
+mark {
+  padding: 0.1875em;
+  color: var(--bs-highlight-color);
+  background-color: var(--bs-highlight-bg);
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 0.75em;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+a {
+  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
+  text-decoration: underline;
+}
+a:hover {
+  --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
+}
+
+a:not([href]):not([class]), a:not([href]):not([class]):hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: var(--bs-font-monospace);
+  font-size: 1em;
+}
+
+pre {
+  display: block;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+  font-size: 0.875em;
+}
+pre code {
+  font-size: inherit;
+  color: inherit;
+  word-break: normal;
+}
+
+code {
+  font-size: 0.875em;
+  color: var(--bs-code-color);
+  word-wrap: break-word;
+}
+a > code {
+  color: inherit;
+}
+
+kbd {
+  padding: 0.1875rem 0.375rem;
+  font-size: 0.875em;
+  color: var(--bs-body-bg);
+  background-color: var(--bs-body-color);
+  border-radius: 0.25rem;
+}
+kbd kbd {
+  padding: 0;
+  font-size: 1em;
+}
+
+figure {
+  margin: 0 0 1rem;
+}
+
+img,
+svg {
+  vertical-align: middle;
+}
+
+table {
+  caption-side: bottom;
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  color: var(--bs-secondary-color);
+  text-align: left;
+}
+
+th {
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+
+label {
+  display: inline-block;
+}
+
+button {
+  border-radius: 0;
+}
+
+button:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+[role=button] {
+  cursor: pointer;
+}
+
+select {
+  word-wrap: normal;
+}
+select:disabled {
+  opacity: 1;
+}
+
+[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
+  display: none !important;
+}
+
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+  -webkit-appearance: button;
+}
+button:not(:disabled),
+[type=button]:not(:disabled),
+[type=reset]:not(:disabled),
+[type=submit]:not(:disabled) {
+  cursor: pointer;
+}
+
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+textarea {
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  float: left;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 0.5rem;
+  font-size: calc(1.275rem + 0.3vw);
+  line-height: inherit;
+}
+@media (min-width: 1200px) {
+  legend {
+    font-size: 1.5rem;
+  }
+}
+legend + * {
+  clear: left;
+}
+
+::-webkit-datetime-edit-fields-wrapper,
+::-webkit-datetime-edit-text,
+::-webkit-datetime-edit-minute,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-year-field {
+  padding: 0;
+}
+
+::-webkit-inner-spin-button {
+  height: auto;
+}
+
+[type=search] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+/* rtl:raw:
+[type="tel"],
+[type="url"],
+[type="email"],
+[type="number"] {
+  direction: ltr;
+}
+*/
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+::file-selector-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+iframe {
+  border: 0;
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+/*# sourceMappingURL=bootstrap-reboot.css.map */

wwwroot/website/lib/bootstrap/dist/css/bootstrap-reboot.rtl.css

@@ -0,0 +1,594 @@
+/*!
+ * Bootstrap Reboot v5.3.3 (https://getbootstrap.com/)
+ * Copyright 2011-2024 The Bootstrap Authors
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+:root,
+[data-bs-theme=light] {
+  --bs-blue: #0d6efd;
+  --bs-indigo: #6610f2;
+  --bs-purple: #6f42c1;
+  --bs-pink: #d63384;
+  --bs-red: #dc3545;
+  --bs-orange: #fd7e14;
+  --bs-yellow: #ffc107;
+  --bs-green: #198754;
+  --bs-teal: #20c997;
+  --bs-cyan: #0dcaf0;
+  --bs-black: #000;
+  --bs-white: #fff;
+  --bs-gray: #6c757d;
+  --bs-gray-dark: #343a40;
+  --bs-gray-100: #f8f9fa;
+  --bs-gray-200: #e9ecef;
+  --bs-gray-300: #dee2e6;
+  --bs-gray-400: #ced4da;
+  --bs-gray-500: #adb5bd;
+  --bs-gray-600: #6c757d;
+  --bs-gray-700: #495057;
+  --bs-gray-800: #343a40;
+  --bs-gray-900: #212529;
+  --bs-primary: #0d6efd;
+  --bs-secondary: #6c757d;
+  --bs-success: #198754;
+  --bs-info: #0dcaf0;
+  --bs-warning: #ffc107;
+  --bs-danger: #dc3545;
+  --bs-light: #f8f9fa;
+  --bs-dark: #212529;
+  --bs-primary-rgb: 13, 110, 253;
+  --bs-secondary-rgb: 108, 117, 125;
+  --bs-success-rgb: 25, 135, 84;
+  --bs-info-rgb: 13, 202, 240;
+  --bs-warning-rgb: 255, 193, 7;
+  --bs-danger-rgb: 220, 53, 69;
+  --bs-light-rgb: 248, 249, 250;
+  --bs-dark-rgb: 33, 37, 41;
+  --bs-primary-text-emphasis: #052c65;
+  --bs-secondary-text-emphasis: #2b2f32;
+  --bs-success-text-emphasis: #0a3622;
+  --bs-info-text-emphasis: #055160;
+  --bs-warning-text-emphasis: #664d03;
+  --bs-danger-text-emphasis: #58151c;
+  --bs-light-text-emphasis: #495057;
+  --bs-dark-text-emphasis: #495057;
+  --bs-primary-bg-subtle: #cfe2ff;
+  --bs-secondary-bg-subtle: #e2e3e5;
+  --bs-success-bg-subtle: #d1e7dd;
+  --bs-info-bg-subtle: #cff4fc;
+  --bs-warning-bg-subtle: #fff3cd;
+  --bs-danger-bg-subtle: #f8d7da;
+  --bs-light-bg-subtle: #fcfcfd;
+  --bs-dark-bg-subtle: #ced4da;
+  --bs-primary-border-subtle: #9ec5fe;
+  --bs-secondary-border-subtle: #c4c8cb;
+  --bs-success-border-subtle: #a3cfbb;
+  --bs-info-border-subtle: #9eeaf9;
+  --bs-warning-border-subtle: #ffe69c;
+  --bs-danger-border-subtle: #f1aeb5;
+  --bs-light-border-subtle: #e9ecef;
+  --bs-dark-border-subtle: #adb5bd;
+  --bs-white-rgb: 255, 255, 255;
+  --bs-black-rgb: 0, 0, 0;
+  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
+  --bs-body-font-family: var(--bs-font-sans-serif);
+  --bs-body-font-size: 1rem;
+  --bs-body-font-weight: 400;
+  --bs-body-line-height: 1.5;
+  --bs-body-color: #212529;
+  --bs-body-color-rgb: 33, 37, 41;
+  --bs-body-bg: #fff;
+  --bs-body-bg-rgb: 255, 255, 255;
+  --bs-emphasis-color: #000;
+  --bs-emphasis-color-rgb: 0, 0, 0;
+  --bs-secondary-color: rgba(33, 37, 41, 0.75);
+  --bs-secondary-color-rgb: 33, 37, 41;
+  --bs-secondary-bg: #e9ecef;
+  --bs-secondary-bg-rgb: 233, 236, 239;
+  --bs-tertiary-color: rgba(33, 37, 41, 0.5);
+  --bs-tertiary-color-rgb: 33, 37, 41;
+  --bs-tertiary-bg: #f8f9fa;
+  --bs-tertiary-bg-rgb: 248, 249, 250;
+  --bs-heading-color: inherit;
+  --bs-link-color: #0d6efd;
+  --bs-link-color-rgb: 13, 110, 253;
+  --bs-link-decoration: underline;
+  --bs-link-hover-color: #0a58ca;
+  --bs-link-hover-color-rgb: 10, 88, 202;
+  --bs-code-color: #d63384;
+  --bs-highlight-color: #212529;
+  --bs-highlight-bg: #fff3cd;
+  --bs-border-width: 1px;
+  --bs-border-style: solid;
+  --bs-border-color: #dee2e6;
+  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
+  --bs-border-radius: 0.375rem;
+  --bs-border-radius-sm: 0.25rem;
+  --bs-border-radius-lg: 0.5rem;
+  --bs-border-radius-xl: 1rem;
+  --bs-border-radius-xxl: 2rem;
+  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
+  --bs-border-radius-pill: 50rem;
+  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
+  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
+  --bs-focus-ring-width: 0.25rem;
+  --bs-focus-ring-opacity: 0.25;
+  --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
+  --bs-form-valid-color: #198754;
+  --bs-form-valid-border-color: #198754;
+  --bs-form-invalid-color: #dc3545;
+  --bs-form-invalid-border-color: #dc3545;
+}
+
+[data-bs-theme=dark] {
+  color-scheme: dark;
+  --bs-body-color: #dee2e6;
+  --bs-body-color-rgb: 222, 226, 230;
+  --bs-body-bg: #212529;
+  --bs-body-bg-rgb: 33, 37, 41;
+  --bs-emphasis-color: #fff;
+  --bs-emphasis-color-rgb: 255, 255, 255;
+  --bs-secondary-color: rgba(222, 226, 230, 0.75);
+  --bs-secondary-color-rgb: 222, 226, 230;
+  --bs-secondary-bg: #343a40;
+  --bs-secondary-bg-rgb: 52, 58, 64;
+  --bs-tertiary-color: rgba(222, 226, 230, 0.5);
+  --bs-tertiary-color-rgb: 222, 226, 230;
+  --bs-tertiary-bg: #2b3035;
+  --bs-tertiary-bg-rgb: 43, 48, 53;
+  --bs-primary-text-emphasis: #6ea8fe;
+  --bs-secondary-text-emphasis: #a7acb1;
+  --bs-success-text-emphasis: #75b798;
+  --bs-info-text-emphasis: #6edff6;
+  --bs-warning-text-emphasis: #ffda6a;
+  --bs-danger-text-emphasis: #ea868f;
+  --bs-light-text-emphasis: #f8f9fa;
+  --bs-dark-text-emphasis: #dee2e6;
+  --bs-primary-bg-subtle: #031633;
+  --bs-secondary-bg-subtle: #161719;
+  --bs-success-bg-subtle: #051b11;
+  --bs-info-bg-subtle: #032830;
+  --bs-warning-bg-subtle: #332701;
+  --bs-danger-bg-subtle: #2c0b0e;
+  --bs-light-bg-subtle: #343a40;
+  --bs-dark-bg-subtle: #1a1d20;
+  --bs-primary-border-subtle: #084298;
+  --bs-secondary-border-subtle: #41464b;
+  --bs-success-border-subtle: #0f5132;
+  --bs-info-border-subtle: #087990;
+  --bs-warning-border-subtle: #997404;
+  --bs-danger-border-subtle: #842029;
+  --bs-light-border-subtle: #495057;
+  --bs-dark-border-subtle: #343a40;
+  --bs-heading-color: inherit;
+  --bs-link-color: #6ea8fe;
+  --bs-link-hover-color: #8bb9fe;
+  --bs-link-color-rgb: 110, 168, 254;
+  --bs-link-hover-color-rgb: 139, 185, 254;
+  --bs-code-color: #e685b5;
+  --bs-highlight-color: #dee2e6;
+  --bs-highlight-bg: #664d03;
+  --bs-border-color: #495057;
+  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
+  --bs-form-valid-color: #75b798;
+  --bs-form-valid-border-color: #75b798;
+  --bs-form-invalid-color: #ea868f;
+  --bs-form-invalid-border-color: #ea868f;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :root {
+    scroll-behavior: smooth;
+  }
+}
+
+body {
+  margin: 0;
+  font-family: var(--bs-body-font-family);
+  font-size: var(--bs-body-font-size);
+  font-weight: var(--bs-body-font-weight);
+  line-height: var(--bs-body-line-height);
+  color: var(--bs-body-color);
+  text-align: var(--bs-body-text-align);
+  background-color: var(--bs-body-bg);
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+hr {
+  margin: 1rem 0;
+  color: inherit;
+  border: 0;
+  border-top: var(--bs-border-width) solid;
+  opacity: 0.25;
+}
+
+h6, h5, h4, h3, h2, h1 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  line-height: 1.2;
+  color: var(--bs-heading-color);
+}
+
+h1 {
+  font-size: calc(1.375rem + 1.5vw);
+}
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 2.5rem;
+  }
+}
+
+h2 {
+  font-size: calc(1.325rem + 0.9vw);
+}
+@media (min-width: 1200px) {
+  h2 {
+    font-size: 2rem;
+  }
+}
+
+h3 {
+  font-size: calc(1.3rem + 0.6vw);
+}
+@media (min-width: 1200px) {
+  h3 {
+    font-size: 1.75rem;
+  }
+}
+
+h4 {
+  font-size: calc(1.275rem + 0.3vw);
+}
+@media (min-width: 1200px) {
+  h4 {
+    font-size: 1.5rem;
+  }
+}
+
+h5 {
+  font-size: 1.25rem;
+}
+
+h6 {
+  font-size: 1rem;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+abbr[title] {
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+  cursor: help;
+  -webkit-text-decoration-skip-ink: none;
+  text-decoration-skip-ink: none;
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul {
+  padding-right: 2rem;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin-bottom: 0.5rem;
+  margin-right: 0;
+}
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+small {
+  font-size: 0.875em;
+}
+
+mark {
+  padding: 0.1875em;
+  color: var(--bs-highlight-color);
+  background-color: var(--bs-highlight-bg);
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 0.75em;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+a {
+  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
+  text-decoration: underline;
+}
+a:hover {
+  --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
+}
+
+a:not([href]):not([class]), a:not([href]):not([class]):hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: var(--bs-font-monospace);
+  font-size: 1em;
+}
+
+pre {
+  display: block;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+  font-size: 0.875em;
+}
+pre code {
+  font-size: inherit;
+  color: inherit;
+  word-break: normal;
+}
+
+code {
+  font-size: 0.875em;
+  color: var(--bs-code-color);
+  word-wrap: break-word;
+}
+a > code {
+  color: inherit;
+}
+
+kbd {
+  padding: 0.1875rem 0.375rem;
+  font-size: 0.875em;
+  color: var(--bs-body-bg);
+  background-color: var(--bs-body-color);
+  border-radius: 0.25rem;
+}
+kbd kbd {
+  padding: 0;
+  font-size: 1em;
+}
+
+figure {
+  margin: 0 0 1rem;
+}
+
+img,
+svg {
+  vertical-align: middle;
+}
+
+table {
+  caption-side: bottom;
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  color: var(--bs-secondary-color);
+  text-align: right;
+}
+
+th {
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+
+label {
+  display: inline-block;
+}
+
+button {
+  border-radius: 0;
+}
+
+button:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+[role=button] {
+  cursor: pointer;
+}
+
+select {
+  word-wrap: normal;
+}
+select:disabled {
+  opacity: 1;
+}
+
+[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
+  display: none !important;
+}
+
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+  -webkit-appearance: button;
+}
+button:not(:disabled),
+[type=button]:not(:disabled),
+[type=reset]:not(:disabled),
+[type=submit]:not(:disabled) {
+  cursor: pointer;
+}
+
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+textarea {
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  float: right;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 0.5rem;
+  font-size: calc(1.275rem + 0.3vw);
+  line-height: inherit;
+}
+@media (min-width: 1200px) {
+  legend {
+    font-size: 1.5rem;
+  }
+}
+legend + * {
+  clear: right;
+}
+
+::-webkit-datetime-edit-fields-wrapper,
+::-webkit-datetime-edit-text,
+::-webkit-datetime-edit-minute,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-year-field {
+  padding: 0;
+}
+
+::-webkit-inner-spin-button {
+  height: auto;
+}
+
+[type=search] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+[type="tel"],
+[type="url"],
+[type="email"],
+[type="number"] {
+  direction: ltr;
+}
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+::file-selector-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+iframe {
+  border: 0;
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[hidden] {
+  display: none !important;
+}
+/*# sourceMappingURL=bootstrap-reboot.rtl.css.map */