186 lines
9.1 KiB
Plaintext
186 lines
9.1 KiB
Plaintext
|
|
<footer class="bg-orange-500 pt-8">
|
|
<!-- Main Footer Section -->
|
|
<div class="relative max-w-6xl bg-gradient-to-r from-green-600 to-emerald-700 rounded-2xl mx-auto overflow-hidden shadow-2xl">
|
|
<!-- Background Pattern -->
|
|
<div class="absolute inset-0 opacity-20">
|
|
<div class="absolute inset-0"
|
|
style="background-image: url('@Url.Content("~/assets/images/home/bg-green.png")'); background-size: cover; background-position: center;"></div>
|
|
<div class="absolute inset-0 bg-gradient-to-br from-green-500/30 to-emerald-800/30"></div>
|
|
</div>
|
|
|
|
<!-- Decorative Elements -->
|
|
<div class="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -translate-y-16 translate-x-16"></div>
|
|
<div class="absolute bottom-0 left-0 w-24 h-24 bg-white/5 rounded-full translate-y-12 -translate-x-12"></div>
|
|
|
|
<div class="relative container mx-auto px-6">
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
|
<!-- Left Section -->
|
|
<div class="flex flex-col text-center justify-center lg:text-left">
|
|
<div class="inline-block">
|
|
<h2 class="text-4xl lg:text-5xl font-black text-white mb-2 tracking-tight">SAVE OUR</h2>
|
|
<a href="#" class="flip-animate inline-block">
|
|
<span class="text-4xl lg:text-5xl font-black text-yellow-300 mb-4 tracking-tight" data-hover="FUTURE">EARTH</span>
|
|
</a>
|
|
</div>
|
|
<p class="text-green-100 text-lg leading-relaxed max-w-sm mx-auto lg:mx-0">
|
|
Bersama membangun Jakarta yang hijau dan berkelanjutan untuk generasi mendatang
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Center Section -->
|
|
<div class="relative justify-center items-end hidden md:flex">
|
|
<div class="relative">
|
|
<div class="absolute inset-0 bg-white/20 rounded-full blur-3xl transform scale-300"></div>
|
|
<img src="@Url.Content("~/assets/images/home/monas.svg")" alt="Monas Jakarta" class="relative z-10 max-w-full h-auto max-h-5 md:max-h-7 drop-shadow-2xl">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Section -->
|
|
<div class="text-left py-12">
|
|
<div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 lg:p-6 border border-white/20">
|
|
<h3 class="text-xl lg:text-2xl font-bold text-white mb-4 lg:mb-6 flex items-center justify-center lg:justify-start">
|
|
<i class="text-yellow-300 w-6 h-6 lg:w-8 lg:h-8 mr-2" data-lucide="phone-call"></i>
|
|
Kontak Kami
|
|
</h3>
|
|
|
|
<div class="space-y-3 lg:space-y-4">
|
|
<div class="flex items-start space-x-3">
|
|
<div class="w-7 h-7 lg:w-8 lg:h-8 bg-yellow-300/20 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
<i class="text-yellow-300 w-4 h-4"data-lucide="map-pin"></i>
|
|
</div>
|
|
<div class="text-left">
|
|
<p class="text-white font-medium text-sm lg:text-base">Alamat</p>
|
|
<p class="text-green-100 text-xs lg:text-sm leading-relaxed">
|
|
Jl. Mandala V No.67, RT.1/RW.2, Cililitan, Kramatjati, Kota Jakarta Timur, DKI Jakarta 13640
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start space-x-3">
|
|
<div class="w-7 h-7 lg:w-8 lg:h-8 bg-yellow-300/20 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
<i class="text-yellow-300 w-4 h-4"data-lucide="phone"></i>
|
|
</div>
|
|
<div class="text-left">
|
|
<p class="text-white font-medium text-sm lg:text-base">Telepon</p>
|
|
<p class="text-green-100 text-xs lg:text-sm">(021) 8092744</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start space-x-3">
|
|
<div class="w-7 h-7 lg:w-8 lg:h-8 bg-yellow-300/20 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
|
|
<i class="text-yellow-300 w-4 h-4"data-lucide="mail"></i>
|
|
</div>
|
|
<div class="text-left">
|
|
<p class="text-white font-medium text-sm lg:text-base">Email</p>
|
|
<p class="text-green-100 text-xs lg:text-sm">dinaslh@jakarta.go.id</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 2: Tentang Kami dan Layanan -->
|
|
<div class="bg-orange-500 py-8">
|
|
<div class="container max-w-6xl mx-auto px-4">
|
|
<div class="flex flex-col lg:flex-row justify-between items-start lg:items-center text-white space-y-8 lg:space-y-0">
|
|
<!-- Tentang Kami -->
|
|
<div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-8 items-start md:items-center">
|
|
<div>
|
|
<h4 class="font-semibold text-xl md:text-2xl">Tentang<br class="hidden md:block"> Kami</h4>
|
|
</div>
|
|
<div class="flex flex-col space-y-2">
|
|
<a href="#" class="hover:underline">Visi Misi</a>
|
|
<a href="#" class="hover:underline">Struktur Organisasi</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Layanan -->
|
|
<div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-8 items-start md:items-center">
|
|
<div>
|
|
<h4 class="font-semibold text-xl md:text-2xl">Layanan</h4>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-2">
|
|
<a href="#" class="hover:underline">Penjemputan e-Waste</a>
|
|
<a href="#" class="hover:underline">Bulky Waste</a>
|
|
<a href="#" class="hover:underline">Uji Sampel Laboratorium</a>
|
|
<a href="#" class="hover:underline">Permohonan Informasi Publik</a>
|
|
<a href="#" class="hover:underline">Bus Toilet</a>
|
|
<a href="#" class="hover:underline">BPS-RW</a>
|
|
<a href="#" class="hover:underline">AMDAL</a>
|
|
<a href="#" class="hover:underline">Whistleblowing System</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bottom Section -->
|
|
<div class="bg-black py-6">
|
|
<div class="container max-w-6xl mx-auto px-4">
|
|
<div class="flex flex-col md:flex-row justify-between items-center text-white space-y-4 md:space-y-0">
|
|
<a href="@Url.Action("Index", "Home")" class="flex items-center space-x-3">
|
|
<img src="https://lingkunganhidup.jakarta.go.id/images/weblink/logo-dlh.png" class="h-8 md:h-10" alt="DLH Logo" />
|
|
<div class="text-center md:text-left">
|
|
<span class="text-sm md:text-lg font-bold text-white leading-tight">DINAS LINGKUNGAN HIDUP</span>
|
|
<span class="block text-xs md:text-sm text-white/70 font-medium">PROVINSI DKI JAKARTA</span>
|
|
</div>
|
|
</a>
|
|
<div class="text-xs md:text-sm text-center md:text-right">
|
|
<p>© @DateTime.Now.Year Dinas Lingkungan Hidup Provinsi Jakarta</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<style>
|
|
a.flip-animate {
|
|
perspective: 1000px;
|
|
text-decoration: none;
|
|
outline: none;
|
|
}
|
|
a.flip-animate span {
|
|
position: relative;
|
|
display: inline-block;
|
|
transition: transform 0.6s ease-in-out;
|
|
transform-origin: 50% 0;
|
|
transform-style: preserve-3d;
|
|
}
|
|
a.flip-animate span:before {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
content: attr(data-hover);
|
|
transform: rotateX(-90deg);
|
|
transform-origin: 50% 0;
|
|
text-align: center;
|
|
color: #fde047;
|
|
backface-visibility: hidden;
|
|
}
|
|
a.flip-animate.flipped span {
|
|
transform: rotateX(90deg) translateY(-22px);
|
|
backface-visibility: hidden;
|
|
}
|
|
a.flip-animate.flipped span:before {
|
|
color: #fbbf24;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const flipElement = document.querySelector('.flip-animate');
|
|
|
|
if (flipElement) {
|
|
setInterval(function() {
|
|
flipElement.classList.toggle('flipped');
|
|
}, 1500);
|
|
}
|
|
});
|
|
</script>
|