48 lines
2.6 KiB
Plaintext
48 lines
2.6 KiB
Plaintext
<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">
|
|
<!-- 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>
|
|
|
|
<!-- Footer Content -->
|
|
<div class="w-full max-w-[1280px] relative z-10 flex flex-col justify-start items-start 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">
|
|
<div class="w-16 h-16 relative">
|
|
<img class="w-16 h-16" src="/images/logo-white.png" alt="Logo" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation Menu -->
|
|
<div class="grid gap-8 grid-cols-4">
|
|
<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>
|
|
</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>
|
|
</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>
|
|
</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>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Right space -->
|
|
<div class="flex-1 flex justify-end items-center gap-3"></div>
|
|
</div>
|
|
|
|
<!-- 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.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|