77 lines
3.5 KiB
Plaintext
77 lines
3.5 KiB
Plaintext
<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 items-center shrink-0">
|
|
<img class="w-14 h-14" src="/images/logo.png" alt="BPS-RW Logo" />
|
|
</div>
|
|
|
|
<!-- Navigation Menu - Desktop -->
|
|
<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="#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="#pergub"
|
|
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="/Panduan"
|
|
class="px-4 py-2 text-slate-600 text-base font-medium font-jakarta hover:bg-gray-50 rounded-lg transition-colors">Panduan
|
|
</a>
|
|
<a href="/Edukasi"
|
|
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 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>
|
|
|
|
<!-- 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>
|
|
</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="#pergub" class="px-4 py-2 text-slate-600 text-base font-medium font-jakarta hover:bg-gray-50 rounded-lg">
|
|
Regulasi
|
|
</a>
|
|
<a href="/Panduan" class="px-4 py-2 text-slate-600 text-base font-medium font-jakarta hover:bg-gray-50 rounded-lg">
|
|
Panduan
|
|
</a>
|
|
<a href="/Edukasi" 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> |