336 lines
16 KiB
Plaintext
336 lines
16 KiB
Plaintext
<section id="layanan-section" class="container mx-auto px-4 py-4 max-w-6xl">
|
|
<div class="text-center mb-12 transition-all duration-700 ease-out" id="header-section">
|
|
<h2 class="text-3xl font-bold mb-4">Layanan Kami</h2>
|
|
<p class="text-gray-600 mb-12 text-balance max-w-2xl mx-auto">
|
|
Beragam layanan DLH DKI Jakarta, dari pengelolaan sampah, pengujian lingkungan, hingga pengaduan pelanggaran untuk Jakarta yang lebih hijau.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="md:hidden mb-8">
|
|
<div class="grid grid-cols-2 gap-3 mb-4" id="mobile-tabs-top">
|
|
<button class="mobile-tab group relative px-4 py-3 text-sm font-semibold rounded-xl bg-oren text-white shadow-lg transform transition-all duration-300 hover:scale-105 active:scale-95" data-service="Penjemputan e-Waste">
|
|
<div class="flex items-center justify-center space-x-2">
|
|
<i class="w-4 h-4 inline" data-lucide="trash-2"></i>
|
|
<span>e-Waste</span>
|
|
</div>
|
|
<div class="absolute inset-0 bg-white/20 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
|
</button>
|
|
<button class="mobile-tab group relative px-4 py-3 text-sm font-semibold rounded-xl bg-gray-200 text-gray-600 shadow-md transform transition-all duration-300 hover:scale-105 active:scale-95" data-service="Uji Sampel Laboratorium">
|
|
<div class="flex items-center justify-center space-x-2">
|
|
<i class="w-4 h-4 inline" data-lucide="flask-conical"></i>
|
|
<span>Lab Testing</span>
|
|
</div>
|
|
</button>
|
|
<button class="mobile-tab group relative px-4 py-3 text-sm font-semibold rounded-xl bg-gray-200 text-gray-600 shadow-md transform transition-all duration-300 hover:scale-105 active:scale-95" data-service="Bus Toilet">
|
|
<div class="flex items-center justify-center space-x-2">
|
|
<i class="w-4 h-4 inline" data-lucide="bus"></i>
|
|
<span>Bus Toilet</span>
|
|
</div>
|
|
</button>
|
|
<button class="mobile-tab group relative px-4 py-3 text-sm font-semibold rounded-xl bg-gray-200 text-gray-600 shadow-md transform transition-all duration-300 hover:scale-105 active:scale-95" data-service="AMDAL">
|
|
<div class="flex items-center justify-center space-x-2">
|
|
<i class="w-4 h-4 inline" data-lucide="file-text"></i>
|
|
<span>AMDAL</span>
|
|
</div>
|
|
</button>
|
|
<button class="mobile-tab group relative px-4 py-3 text-sm font-semibold rounded-xl bg-gray-200 text-gray-600 shadow-md transform transition-all duration-300 hover:scale-105 active:scale-95" data-service="Bulky Waste">
|
|
<div class="flex items-center justify-center space-x-2">
|
|
<i class="w-4 h-4 inline" data-lucide="truck"></i>
|
|
<span>Bulky Waste</span>
|
|
</div>
|
|
</button>
|
|
<button class="mobile-tab group relative px-4 py-3 text-sm font-semibold rounded-xl bg-gray-200 text-gray-600 shadow-md transform transition-all duration-300 hover:scale-105 active:scale-95" data-service="Permohonan Informasi Publik">
|
|
<div class="flex items-center justify-center space-x-2">
|
|
<i class="w-4 h-4 inline" data-lucide="info"></i>
|
|
<span>Info Publik</span>
|
|
</div>
|
|
</button>
|
|
<button class="mobile-tab group relative px-4 py-3 text-sm font-semibold rounded-xl bg-gray-200 text-gray-600 shadow-md transform transition-all duration-300 hover:scale-105 active:scale-95" data-service="BPS-RW">
|
|
<div class="flex items-center justify-center space-x-2">
|
|
<i class="w-4 h-4 inline" data-lucide="database"></i>
|
|
<span>BPS-RW</span>
|
|
</div>
|
|
</button>
|
|
<button class="mobile-tab group relative px-4 py-3 text-sm font-semibold rounded-xl bg-gray-200 text-gray-600 shadow-md transform transition-all duration-300 hover:scale-105 active:scale-95" data-service="Whistleblowing System">
|
|
<div class="flex items-center justify-center space-x-2">
|
|
<i class="w-4 h-4 inline" data-lucide="alert-triangle"></i>
|
|
<span>Whistleblowing</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md:hidden mb-8">
|
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
|
|
<div class="relative h-48">
|
|
<img src="/assets/images/home/jemput.jpg" alt="Penjemputan e-Waste" class="w-full h-full object-cover aspect-square" id="mobile-service-image">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
|
|
<div class="absolute bottom-4 left-4 right-4 text-white">
|
|
<h3 class="text-xl font-bold mb-2" id="mobile-service-title">Penjemputan e-Waste</h3>
|
|
<p class="text-white/90 text-sm" id="mobile-service-description">Layanan pengumpulan sampah elektronik.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hidden md:block relative" id="services-container">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8" id="three-column-layout">
|
|
<div class="flex flex-col gap-8 md:order-1 transform transition-all duration-1000 ease-out" id="left-services">
|
|
<div class="flex flex-col service-item cursor-pointer">
|
|
<h2 class="text-2xl font-bold text-gray-400">Penjemputan e-Waste</h2>
|
|
<p class="text-balance text-gray-400">Layanan pengumpulan sampah elektronik.</p>
|
|
</div>
|
|
<div class="flex flex-col service-item cursor-pointer">
|
|
<h2 class="text-2xl font-bold text-gray-400">Uji Sampel Laboratorium</h2>
|
|
<p class="text-balance text-gray-400">Pengujian kualitas lingkungan hidup.</p>
|
|
</div>
|
|
<div class="flex flex-col service-item cursor-pointer">
|
|
<h2 class="text-2xl font-bold text-gray-400">Bus Toilet</h2>
|
|
<p class="text-balance text-gray-400">Fasilitas toilet keliling untuk kegiatan umum.</p>
|
|
</div>
|
|
<div class="flex flex-col service-item cursor-pointer">
|
|
<h2 class="text-2xl font-bold text-gray-400">AMDAL</h2>
|
|
<p class="text-balance text-gray-400">Proses Analisis Mengenai Dampak Lingkungan.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md:col-span-1 md:order-2 transform transition-all duration-1000 ease-out" id="center-image-container">
|
|
<div class="rounded-lg overflow-hidden shadow-lg h-full transform transition-all duration-300 hover:shadow-xl hover:-translate-y-2 relative group">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent z-10"></div>
|
|
<img src="/assets/images/home/jemput.jpg" alt="Penjemputan e-Waste" class="w-full object-cover h-full aspect-square transition-transform duration-700 group-hover:scale-105" id="center-service-image">
|
|
<div class="absolute bottom-0 left-0 right-0 p-6 z-20 transition-all duration-300">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm text-orange-300 font-medium mb-1">Telusuri</p>
|
|
<h3 class="font-bold text-2xl text-white mb-2" id="center-service-title">Penjemputan e-Waste</h3>
|
|
<p class="text-white/80 text-sm max-w-xs hidden group-hover:block transition-all duration-300" id="center-service-description">
|
|
Layanan pengumpulan sampah elektronik.
|
|
</p>
|
|
</div>
|
|
<div class="bg-oren p-3 rounded-full transform transition-all duration-300 group-hover:bg-orange-600 group-hover:-rotate-45">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-8 md:order-3 transform transition-all duration-1000 ease-out" id="right-services">
|
|
<div class="flex flex-col service-item cursor-pointer">
|
|
<h2 class="text-2xl font-bold text-gray-400">Bulky Waste</h2>
|
|
<p class="text-balance text-gray-400">Layanan khusus pengangkutan sampah besar.</p>
|
|
</div>
|
|
<div class="flex flex-col service-item cursor-pointer">
|
|
<h2 class="text-2xl font-bold text-gray-400">Permohonan Informasi Publik</h2>
|
|
<p class="text-balance text-gray-400">Saluran pengaduan pelanggaran lingkungan.</p>
|
|
</div>
|
|
<div class="flex flex-col service-item cursor-pointer">
|
|
<h2 class="text-2xl font-bold text-gray-400">BPS-RW</h2>
|
|
<p class="text-balance text-gray-400">Basis data lingkungan hidup tingkat Rukun Warga</p>
|
|
</div>
|
|
<div class="flex flex-col service-item cursor-pointer">
|
|
<h2 class="text-2xl font-bold text-gray-400">Whistleblowing System</h2>
|
|
<p class="text-balance text-gray-400">Sarana pelaporan pelanggaran terkait lingkungan</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<register-block dynamic-section="scripts" key="jsLayanan">
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const asset = (file) => `${window.assetBaseUrl}images/home/${file}`;
|
|
|
|
const serviceData = {
|
|
"Penjemputan e-Waste": {
|
|
image: asset("waste.jpg"),
|
|
description: "Layanan pengumpulan sampah elektronik."
|
|
},
|
|
"Uji Sampel Laboratorium": {
|
|
image: asset("lab.jpg"),
|
|
description: "Pengujian kualitas lingkungan hidup."
|
|
},
|
|
"Bus Toilet": {
|
|
image: asset("waste.jpg"),
|
|
description: "Fasilitas toilet keliling untuk kegiatan umum."
|
|
},
|
|
"AMDAL": {
|
|
image: asset("waste.jpg"),
|
|
description: "Proses Analisis Mengenai Dampak Lingkungan."
|
|
},
|
|
"Bulky Waste": {
|
|
image: asset("waste.jpg"),
|
|
description: "Layanan khusus pengangkutan sampah besar."
|
|
},
|
|
"Permohonan Informasi Publik": {
|
|
image: asset("waste.jpg"),
|
|
description: "Saluran pengaduan pelanggaran lingkungan."
|
|
},
|
|
"BPS-RW": {
|
|
image: asset("waste.jpg"),
|
|
description: "Basis data lingkungan hidup tingkat Rukun Warga."
|
|
},
|
|
"Whistleblowing System": {
|
|
image: asset("waste.jpg"),
|
|
description: "Sarana pelaporan pelanggaran terkait lingkungan."
|
|
}
|
|
};
|
|
|
|
const mobileTabs = document.querySelectorAll(".mobile-tab");
|
|
const mobileServiceImage = document.getElementById("mobile-service-image");
|
|
const mobileServiceTitle = document.getElementById("mobile-service-title");
|
|
const mobileServiceDescription = document.getElementById("mobile-service-description");
|
|
|
|
mobileTabs.forEach((tab) => {
|
|
tab.addEventListener("click", function () {
|
|
const serviceName = this.getAttribute("data-service");
|
|
mobileTabs.forEach((t) => {
|
|
t.classList.remove("bg-oren", "text-white");
|
|
t.classList.add("bg-gray-200", "text-gray-600");
|
|
});
|
|
this.classList.remove("bg-gray-200", "text-gray-600");
|
|
this.classList.add("bg-oren", "text-white");
|
|
if (serviceData[serviceName]) {
|
|
mobileServiceImage.src = serviceData[serviceName].image;
|
|
mobileServiceTitle.textContent = serviceName;
|
|
mobileServiceDescription.textContent = serviceData[serviceName].description;
|
|
}
|
|
});
|
|
});
|
|
|
|
const leftServices = document.getElementById('left-services');
|
|
const rightServices = document.getElementById('right-services');
|
|
const centerImageContainer = document.getElementById('center-image-container');
|
|
const centerImage = document.getElementById('center-service-image');
|
|
const centerTitle = document.getElementById('center-service-title');
|
|
const centerDescription = document.getElementById('center-service-description');
|
|
|
|
leftServices.style.transform = 'translateX(-100px)';
|
|
leftServices.style.opacity = '0';
|
|
rightServices.style.transform = 'translateX(100px)';
|
|
rightServices.style.opacity = '0';
|
|
centerImageContainer.style.transform = 'translateY(50px)';
|
|
centerImageContainer.style.opacity = '0';
|
|
|
|
function startSequentialAnimation() {
|
|
setTimeout(() => {
|
|
leftServices.style.transform = 'translateX(0)';
|
|
leftServices.style.opacity = '1';
|
|
}, 200);
|
|
setTimeout(() => {
|
|
rightServices.style.transform = 'translateX(0)';
|
|
rightServices.style.opacity = '1';
|
|
}, 600);
|
|
setTimeout(() => {
|
|
centerImageContainer.style.transform = 'translateY(0)';
|
|
centerImageContainer.style.opacity = '1';
|
|
}, 1000);
|
|
}
|
|
|
|
const observerOptions = {
|
|
threshold: 0.2,
|
|
rootMargin: '0px 0px -100px 0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
startSequentialAnimation();
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
if (window.innerWidth >= 768) {
|
|
observer.observe(document.getElementById('layanan-section'));
|
|
}
|
|
|
|
const serviceItems = Array.from(document.querySelectorAll(".service-item"));
|
|
let activeService = "Penjemputan e-Waste";
|
|
|
|
function setActiveService(title) {
|
|
serviceItems.forEach((item) => {
|
|
const h2 = item.querySelector("h2");
|
|
const p = item.querySelector("p");
|
|
if (!h2 || !p) return;
|
|
const serviceName = h2.textContent.trim();
|
|
|
|
if (serviceName === title) {
|
|
item.classList.add("active");
|
|
item.style.borderLeft = "4px solid #ed8936";
|
|
item.style.paddingLeft = "1rem";
|
|
h2.classList.remove("text-gray-400");
|
|
h2.classList.add("text-black", "font-bold");
|
|
p.classList.remove("text-gray-400");
|
|
p.classList.add("text-gray-600");
|
|
} else {
|
|
item.classList.remove("active");
|
|
item.style.borderLeft = "none";
|
|
item.style.paddingLeft = "0";
|
|
h2.classList.add("text-gray-400");
|
|
h2.classList.remove("text-black", "font-bold");
|
|
p.classList.add("text-gray-400");
|
|
p.classList.remove("text-gray-600");
|
|
}
|
|
});
|
|
|
|
if (serviceData[title]) {
|
|
centerImage.src = serviceData[title].image;
|
|
centerImage.alt = title;
|
|
centerTitle.textContent = title;
|
|
centerDescription.textContent = serviceData[title].description;
|
|
}
|
|
|
|
activeService = title;
|
|
}
|
|
|
|
serviceItems.forEach((item) => {
|
|
item.addEventListener("mouseenter", () => {
|
|
const h2 = item.querySelector("h2");
|
|
if (!h2) return;
|
|
const hoveredTitle = h2.textContent.trim();
|
|
if (serviceData[hoveredTitle]) setActiveService(hoveredTitle);
|
|
});
|
|
});
|
|
|
|
let autoplayInterval;
|
|
let isHovering = false;
|
|
@*
|
|
function startAutoplay() {
|
|
autoplayInterval = setInterval(() => {
|
|
if (!isHovering) {
|
|
const serviceNames = Object.keys(serviceData);
|
|
const currentIndex = serviceNames.indexOf(activeService);
|
|
const nextIndex = (currentIndex + 1) % serviceNames.length;
|
|
setActiveService(serviceNames[nextIndex]);
|
|
}
|
|
}, 6000);
|
|
} *@
|
|
|
|
serviceItems.forEach((item) => {
|
|
item.addEventListener("mouseenter", () => { isHovering = true; });
|
|
item.addEventListener("mouseleave", () => { isHovering = false; });
|
|
});
|
|
|
|
setActiveService(activeService);
|
|
startAutoplay();
|
|
|
|
const style = document.createElement("style");
|
|
style.innerHTML = `
|
|
.service-item {
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
#left-services, #right-services, #center-image-container {
|
|
transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
|
|
opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
});
|
|
</script>
|
|
</register-block>
|