From 07021a53e30f9bba1d850f1c8aaa592cba4170e6 Mon Sep 17 00:00:00 2001
From: Rohmad Eko Wahyudi <eko@impstudio.co.id>
Date: Wed, 12 Nov 2025 06:15:14 +0700
Subject: [PATCH] fix: navbar

---
 Views/Shared/_Layout.cshtml        |  2 +-
 Views/Shared/_NavbarLanding.cshtml | 57 ++++++++++++++++++++----------
 2 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/Views/Shared/_Layout.cshtml b/Views/Shared/_Layout.cshtml
index 1197f24..07ac388 100644
--- a/Views/Shared/_Layout.cshtml
+++ b/Views/Shared/_Layout.cshtml
@@ -41,7 +41,7 @@
     <!-- Landing page dengan navbar dan footer -->
     <partial name="_NavbarLanding" />
 
-    <main class="pt-16">
+    <main>
         @RenderBody()
     </main>
 
diff --git a/Views/Shared/_NavbarLanding.cshtml b/Views/Shared/_NavbarLanding.cshtml
index 12a8728..7e4ee2b 100644
--- a/Views/Shared/_NavbarLanding.cshtml
+++ b/Views/Shared/_NavbarLanding.cshtml
@@ -1,23 +1,44 @@
-<nav class="navbar fixed top-0 left-0 right-0 z-50 bg-white shadow-sm">
-    <div class="container mx-auto px-4 lg:px-28">
-        <div class="flex-1">
-            <a href="/" class="flex items-center gap-3">
-                <img src="/images/logo.png" alt="Logo" class="h-12 w-12" />
-                <span class="text-xl font-bold font-jakarta text-gray-900">e-Bank Sampah Jakarta</span>
+<nav id="navbar" class="w-full h-24 px-4 lg:px-28 fixed left-0 top-0 z-50 flex flex-col justify-center items-center transition-all duration-300">
+    <div class="w-full max-w-[1440px] flex justify-center items-center gap-8">
+        <div class="flex-1 flex justify-start items-center gap-2">
+            <img class="w-11 h-10" src="/images/logo.png" alt="Logo" />
+        </div>
+        <div class="hidden lg:flex justify-start items-center gap-8">
+            <a href="/" class="rounded-[99px] flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
+                <div class="text-white text-base font-semibold font-jakarta leading-6">Beranda</div>
+            </a>
+            <a href="#about" class="rounded-[99px] flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
+                <div class="text-gray-300 text-base font-semibold font-jakarta leading-6">Tentang</div>
+            </a>
+            <a href="#publications" class="rounded-[99px] flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
+                <div class="text-gray-300 text-base font-semibold font-jakarta leading-6">Publikasi</div>
+            </a>
+            <a href="#regulations" class="rounded-[99px] flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
+                <div class="text-gray-300 text-base font-semibold font-jakarta leading-6">Regulasi</div>
+            </a>
+            <a href="#location" class="rounded-[99px] flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
+                <div class="text-gray-300 text-base font-semibold font-jakarta leading-6">Lokasi</div>
+            </a>
+            <a href="#helpdesk" class="rounded-[99px] flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
+                <div class="text-gray-300 text-base font-semibold font-jakarta leading-6">Helpdesk</div>
             </a>
         </div>
-        <div class="flex-none">
-            <ul class="menu menu-horizontal px-1 gap-2">
-                <li><a href="/" class="font-jakarta">Beranda</a></li>
-                <li><a href="#about" class="font-jakarta">Tentang</a></li>
-                <li><a href="#regulations" class="font-jakarta">Regulasi</a></li>
-                <li><a href="#contact" class="font-jakarta">Kontak</a></li>
-                <li>
-                    <a asp-controller="Dashboard" class="btn btn-sm bg-green-800 hover:bg-green-700 text-white rounded-full font-jakarta">
-                        Login
-                    </a>
-                </li>
-            </ul>
+        <div class="flex-1 flex justify-end items-center gap-4">
+            <a asp-controller="Dashboard" class="px-8 py-2.5 bg-green-800 hover:bg-green-700 rounded-[99px] flex justify-center items-center gap-2 transition-colors">
+                <div class="text-white text-base font-semibold font-jakarta leading-6">Login</div>
+            </a>
         </div>
     </div>
 </nav>
+
+<script>
+    // Navbar scroll effect
+    window.addEventListener('scroll', function() {
+        const navbar = document.getElementById('navbar');
+        if (window.scrollY > 50) {
+            navbar.classList.add('bg-black/80', 'backdrop-blur-sm', 'shadow-lg');
+        } else {
+            navbar.classList.remove('bg-black/80', 'backdrop-blur-sm', 'shadow-lg');
+        }
+    });
+</script>