feat: slicing landing page

Views/Shared/Layouts/Landing/_Footer.cshtml

@@ -1,11 +1,11 @@
-<footer class="w-full px-4 lg:px-28 py-20 relative bg-green-950 flex flex-col justify-start items-center gap-20 overflow-hidden">
+<footer class="w-full py-8 lg:py-20 relative bg-green-950 overflow-hidden">
     <!-- Background overlay -->
-    <div class="w-full h-full left-0 top-0 absolute overflow-hidden">
-        <img src="/images/leaf.svg" class="w-full h-full absolute bg-green-950" alt="Leaf" />
+      <div class="absolute inset-0 overflow-hidden">
+        <img src="/images/leaf.svg" class="w-full h-full object-cover opacity-20" alt="Background Pattern" style="mix-blend-mode: overlay;" />
     </div>
 
     <!-- Footer Content -->
-    <div class="w-full max-w-[1280px] relative z-10 flex flex-col justify-start items-start gap-20">
+    <div class="w-full mx-auto px-4 lg:px-28 xl:px-48 relative z-10 flex flex-col justify-start items-start gap-2 lg:gap-20">
         <div class="self-stretch flex flex-col lg:flex-row justify-start items-start gap-8">
             <!-- Logo -->
             <div class="flex-1 flex justify-start items-center gap-2 overflow-hidden">
@@ -15,18 +15,21 @@
             </div>
 
             <!-- Navigation Menu -->
-            <div class="grid gap-8 grid-cols-4">
+            <div class="grid gap-1 lg:gap-3 grid-cols-5">
                 <a href="#" class="rounded-full flex justify-center items-center gap-2 hover:bg-green-800/20 px-4 py-2 transition-colors">
-                    <div class="text-white text-base font-semibold font-jakarta leading-normal">Beranda</div>
+                    <div class="text-white text-sm lg:text-base font-semibold font-jakarta leading-normal">Beranda</div>
                 </a>
                 <a href="#" class="rounded-full flex justify-center items-center gap-2 hover:bg-green-800/20 px-4 py-2 transition-colors">
-                    <div class="text-white text-base font-semibold font-jakarta leading-normal">Tentang</div>
+                    <div class="text-white text-sm lg:text-base font-semibold font-jakarta leading-normal">Tentang</div>
                 </a>
                 <a href="#" class="rounded-full flex justify-center items-center gap-2 hover:bg-green-800/20 px-4 py-2 transition-colors">
-                    <div class="text-white text-base font-semibold font-jakarta leading-normal">Regulasi</div>
+                    <div class="text-white text-sm lg:text-base font-semibold font-jakarta leading-normal">Regulasi</div>
                 </a>
                 <a href="#" class="rounded-full flex justify-center items-center gap-2 hover:bg-green-800/20 px-4 py-2 transition-colors">
-                    <div class="text-white text-base font-semibold font-jakarta leading-normal">Edukasi</div>
+                    <div class="text-white text-sm lg:text-base font-semibold font-jakarta leading-normal">Panduan</div>
+                </a>
+                <a href="#" class="rounded-full flex justify-center items-center gap-2 hover:bg-green-800/20 px-4 py-2 transition-colors">
+                    <div class="text-white text-sm lg:text-base font-semibold font-jakarta leading-normal">Edukasi</div>
                 </a>
             </div>
 
@@ -36,7 +39,6 @@
 
         <!-- Footer Bottom -->
         <div class="self-stretch flex flex-col justify-start items-center gap-8">
-            <div class="self-stretch h-px bg-green-950"></div>
             <div class="flex justify-start items-start gap-6">
                 <div class="text-white text-sm font-normal leading-tight">
                     Copyright © @DateTime.Now.Year Dinas Lingkungan Hidup Provinsi DKI Jakarta.

Views/Shared/Layouts/Landing/_Layout.cshtml

@@ -27,6 +27,8 @@
     <!-- CSS -->
     <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
     
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
+
     <!-- Favicon -->
     <link rel="icon" type="image/x-icon" href="~/favicon.ico">
 </head>
@@ -42,6 +44,8 @@
     <!-- Footer -->
     <partial name="~/Views/Shared/Layouts/Landing/_Footer.cshtml" />
 
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+
     <!-- Scripts -->
     <script src="~/js/site.js" asp-append-version="true"></script>
     @await RenderSectionAsync("Scripts", required: false)

Views/Shared/Layouts/Landing/_Navbar.cshtml

@@ -1,46 +1,74 @@
-<header class="w-full h-20 px-4 lg:px-28 bg-white flex flex-col justify-center items-center shadow-sm">
-    <div class="self-stretch flex justify-center items-center gap-8">
+<header class="w-full px-4 lg:px-28 xl:px-48 bg-white border-b border-gray-100 sticky top-0 z-50 shadow-sm">
+    <div class="flex w-full mx-auto justify-between items-center h-20">
         <!-- Logo -->
-        <div class="flex-1 flex justify-start items-center gap-2">
-            <img class="w-10 h-10" src="/images/logo.png" alt="Logo" />
+        <div class="flex items-center shrink-0">
+            <img class="w-14 h-14" src="/images/logo.png" alt="BPS-RW Logo" />
         </div>
 
         <!-- Navigation Menu - Desktop -->
-        <div class="hidden lg:flex justify-start items-center gap-8">
-            <a href="#" class="rounded-full flex justify-center items-center gap-2 hover:bg-gray-100 px-4 py-2 transition-colors">
-                <div class="text-green-800 text-base font-semibold font-jakarta leading-normal">Beranda</div>
+        <nav class="hidden lg:flex items-center gap-3 flex-1 justify-center" aria-label="navigation">
+            <a href="/"
+                class="px-4 py-2 text-green-800 text-base font-medium font-jakarta hover:bg-green-50 rounded-lg transition-colors">
+                Beranda
             </a>
-            <a href="#" class="rounded-full flex justify-center items-center gap-2 hover:bg-gray-100 px-4 py-2 transition-colors">
-                <div class="text-slate-600 text-base font-semibold font-jakarta leading-normal">Tentang</div>
+            <a href="#tentang"
+                class="px-4 py-2 text-slate-600 text-base font-medium font-jakarta hover:bg-gray-50 rounded-lg transition-colors">
+                Tentang
             </a>
-            <a href="#" class="rounded-full flex justify-center items-center gap-2 hover:bg-gray-100 px-4 py-2 transition-colors">
-                <div class="text-slate-600 text-base font-semibold font-jakarta leading-normal">Regulasi</div>
+            <a href="#"
+                class="px-4 py-2 text-slate-600 text-base font-medium font-jakarta hover:bg-gray-50 rounded-lg transition-colors">
+                Regulasi
             </a>
-            <a href="#" class="rounded-full flex justify-center items-center gap-2 hover:bg-gray-100 px-4 py-2 transition-colors">
-                <div class="text-slate-600 text-base font-semibold font-jakarta leading-normal">Edukasi</div>
+            <a href="#"
+                class="px-4 py-2 text-slate-600 text-base font-medium font-jakarta hover:bg-gray-50 rounded-lg transition-colors">Panduan
             </a>
-        </div>
+            <a href="#"
+                class="px-4 py-2 text-slate-600 text-base font-medium font-jakarta hover:bg-gray-50 rounded-lg transition-colors">
+                Edukasi
+            </a>
+        </nav>
 
         <!-- Login Button -->
-        <div class="flex flex-1 items-center justify-end gap-4">
-            <a asp-controller="Dashboard" asp-action="Index" class="btn btn-success rounded-full border-0 bg-bpsrw-500 shadow-none">
-                <span class="font-jakarta text-base leading-normal font-semibold text-white">Login</span>
+        <div class="flex items-center gap-3 shrink-0">
+            <a asp-controller="Auth" asp-action="Login"
+                class="inline-flex px-4 lg:px-6 py-2 lg:py-2.5 bg-primary-700 hover:bg-primary-500 text-white text-sm lg:text-base font-semibold font-jakarta rounded-full transition-colors">
+                Login
             </a>
-        </div>
 
-        <!-- Mobile Menu Button -->
-        <div class="dropdown dropdown-bottom dropdown-end lg:hidden">
-            <div tabindex="0" role="button" class="btn btn-ghost">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
+            <!-- Mobile Menu Button -->
+            <button class="lg:hidden p-2 text-gray-600 hover:bg-gray-100 rounded-lg" onclick="toggleMobileMenu()">
+                <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>
-            </div>
-            <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
-                <li><a href="#">Beranda</a></li>
-                <li><a href="#">Tentang</a></li>
-                <li><a href="#">Regulasi</a></li>
-                <li><a href="#">Edukasi</a></li>
-            </ul>
+            </button>
         </div>
     </div>
+
+    <!-- Mobile Menu -->
+    <div id="mobileMenu" class="hidden lg:hidden pb-4 border-t border-gray-100 mt-2 pt-4">
+        <nav class="flex flex-col gap-2" aria-label="menu">
+            <a href="/"
+                class="px-4 py-2 text-green-800 text-base font-semibold font-jakarta hover:bg-green-50 rounded-lg">
+                Beranda
+            </a>
+            <a href="#tentang"
+                class="px-4 py-2 text-slate-600 text-base font-medium font-jakarta hover:bg-gray-50 rounded-lg">
+                Tentang
+            </a>
+            <a href="#" class="px-4 py-2 text-slate-600 text-base font-medium font-jakarta hover:bg-gray-50 rounded-lg">
+                Regulasi
+            </a>
+            <a href="#" class="px-4 py-2 text-slate-600 text-base font-medium font-jakarta hover:bg-gray-50 rounded-lg">
+                Edukasi
+            </a>
+        </nav>
+    </div>
 </header>
+
+<script>
+    function toggleMobileMenu() {
+        const menu = document.getElementById('mobileMenu');
+        menu.classList.toggle('hidden');
+    }
+</script>