115 lines
8.4 KiB
Plaintext
115 lines
8.4 KiB
Plaintext
<footer class="bg-gradient-to-br from-emerald-50 via-green-50 to-teal-50 border-t-4 border-green-500 relative overflow-hidden">
|
|
<!-- Background Pattern -->
|
|
<div class="absolute inset-0 opacity-5">
|
|
<div class="absolute top-0 left-0 w-64 h-64 bg-green-600 rounded-full -translate-x-32 -translate-y-32"></div>
|
|
<div class="absolute bottom-0 right-0 w-96 h-96 bg-emerald-600 rounded-full translate-x-48 translate-y-48"></div>
|
|
</div>
|
|
|
|
<!-- Main Footer Section -->
|
|
<div class="py-16 relative z-10">
|
|
<div class="container max-w-6xl mx-auto px-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-4 gap-8">
|
|
<!-- Logo & Description -->
|
|
<div class="lg:col-span-1">
|
|
<div class="flex items-center space-x-3 mb-6">
|
|
<div class="relative">
|
|
<div class="absolute inset-0 bg-green-500 rounded-xl blur-sm opacity-30"></div>
|
|
<img src="https://lingkunganhidup.jakarta.go.id/images/weblink/logo-dlh.png" class="h-14 relative z-10 drop-shadow-lg" alt="DLH Logo" />
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-bold text-gray-800 mb-1">DLH</h3>
|
|
<p class="text-sm text-green-700 font-medium">Provinsi DKI Jakarta</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-gray-700 text-sm leading-relaxed font-light"></p>
|
|
Dinas Lingkungan Hidup Provinsi DKI Jakarta berkomitmen menjaga kelestarian lingkungan untuk Jakarta yang berkelanjutan.
|
|
</p>
|
|
<div class="flex space-x-3 mt-4">
|
|
<a href="#" class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center hover:bg-green-600 transition-all duration-300 transform hover:scale-110 shadow-lg">
|
|
<i class="text-white w-4 h-4" data-lucide="facebook"></i>
|
|
</a>
|
|
<a href="#" class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center hover:bg-green-600 transition-all duration-300 transform hover:scale-110 shadow-lg">
|
|
<i class="text-white w-4 h-4" data-lucide="instagram"></i>
|
|
</a>
|
|
<a href="#" class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center hover:bg-green-600 transition-all duration-300 transform hover:scale-110 shadow-lg">
|
|
<i class="text-white w-4 h-4" data-lucide="youtube"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tentang Kami -->
|
|
<div>
|
|
<h4 class="font-bold text-gray-800 mb-6 text-lg relative">
|
|
<span class="border-b-2 border-green-500 pb-1">Tentang Kami</span>
|
|
</h4>
|
|
<ul class="space-y-3">
|
|
<li><a href="#" class="text-gray-700 hover:text-green-600 text-sm transition-all duration-300 hover:translate-x-2 inline-block font-medium">Visi Misi</a></li>
|
|
<li><a href="#" class="text-gray-700 hover:text-green-600 text-sm transition-all duration-300 hover:translate-x-2 inline-block font-medium">Struktur Organisasi</a></li>
|
|
<li><a href="#" class="text-gray-700 hover:text-green-600 text-sm transition-all duration-300 hover:translate-x-2 inline-block font-medium">Sejarah</a></li>
|
|
<li><a href="#" class="text-gray-700 hover:text-green-600 text-sm transition-all duration-300 hover:translate-x-2 inline-block font-medium">Profil Pimpinan</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Layanan -->
|
|
<div>
|
|
<h4 class="font-bold text-gray-800 mb-6 text-lg relative">
|
|
<span class="border-b-2 border-green-500 pb-1">Layanan</span>
|
|
</h4>
|
|
<ul class="space-y-3">
|
|
<li><a href="#" class="text-gray-700 hover:text-green-600 text-sm transition-all duration-300 hover:translate-x-2 inline-block font-medium">Penjemputan e-Waste</a></li>
|
|
<li><a href="#" class="text-gray-700 hover:text-green-600 text-sm transition-all duration-300 hover:translate-x-2 inline-block font-medium">Bulky Waste</a></li>
|
|
<li><a href="#" class="text-gray-700 hover:text-green-600 text-sm transition-all duration-300 hover:translate-x-2 inline-block font-medium">Uji Sampel Laboratorium</a></li>
|
|
<li><a href="#" class="text-gray-700 hover:text-green-600 text-sm transition-all duration-300 hover:translate-x-2 inline-block font-medium">AMDAL</a></li>
|
|
<li><a href="#" class="text-gray-700 hover:text-green-600 text-sm transition-all duration-300 hover:translate-x-2 inline-block font-medium">Whistleblowing System</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Kontak -->
|
|
<div>
|
|
<h4 class="font-bold text-gray-800 mb-6 text-lg relative">
|
|
<span class="border-b-2 border-green-500 pb-1">Kontak Kami</span>
|
|
</h4>
|
|
<div class="space-y-4">
|
|
<div class="flex items-start space-x-3 group">
|
|
<div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center group-hover:bg-green-500 transition-colors duration-300">
|
|
<i class="text-green-600 w-4 h-4 group-hover:text-white transition-colors duration-300" data-lucide="map-pin"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm text-gray-700 font-medium leading-relaxed">
|
|
Jl. Mandala V No.67, RT.1/RW.2, Cililitan, Kramatjati, Jakarta Timur 13640
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center space-x-3 group">
|
|
<div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center group-hover:bg-green-500 transition-colors duration-300">
|
|
<i class="text-green-600 w-4 h-4 group-hover:text-white transition-colors duration-300" data-lucide="phone"></i>
|
|
</div>
|
|
<p class="text-sm text-gray-700 font-medium">(021) 8092744</p>
|
|
</div>
|
|
<div class="flex items-center space-x-3 group">
|
|
<div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center group-hover:bg-green-500 transition-colors duration-300">
|
|
<i class="text-green-600 w-4 h-4 group-hover:text-white transition-colors duration-300" data-lucide="mail"></i>
|
|
</div>
|
|
<p class="text-sm text-gray-700 font-medium">dinaslh@jakarta.go.id</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bottom Section -->
|
|
<div class="bg-gradient-to-r from-green-600 to-emerald-600 py-6 relative z-10">
|
|
<div class="container max-w-6xl mx-auto px-6">
|
|
<div class="flex flex-col md:flex-row justify-between items-center space-y-3 md:space-y-0">
|
|
<p class="text-sm text-green-50 font-medium">
|
|
© @DateTime.Now.Year Dinas Lingkungan Hidup Provinsi DKI Jakarta. All rights reserved.
|
|
</p>
|
|
<div class="flex space-x-6">
|
|
<a href="#" class="text-sm text-green-100 hover:text-white transition-colors duration-300 font-medium relative after:content-[''] after:absolute after:w-0 after:h-0.5 after:bg-white after:left-0 after:-bottom-1 after:transition-all after:duration-300 hover:after:w-full">Privacy Policy</a>
|
|
<a href="#" class="text-sm text-green-100 hover:text-white transition-colors duration-300 font-medium relative after:content-[''] after:absolute after:w-0 after:h-0.5 after:bg-white after:left-0 after:-bottom-1 after:transition-all after:duration-300 hover:after:w-full">Terms of Service</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer> |