webdlh-net/Views/Components/Home/_Layanan.cshtml

<section class="container mx-auto px-4 py-4 max-w-6xl">
    <h2 class="text-3xl font-bold mb-4">Layanan Kami</h2>
    <p class="text-gray-600 mb-12 text-balance">
        Beragam layanan DLH DKI Jakarta, dari pengelolaan sampah, pengujian lingkungan, hingga pengaduan pelanggaran untuk Jakarta yang lebih hijau.
    </p>

    <!-- tab Mobile -->
   <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-orange-500 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>
    </div>
    <div class="grid grid-cols-2 gap-3 mb-4" id="mobile-tabs-middle">
        <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>
    </div>
    <div class="grid grid-cols-2 gap-3 mb-4" id="mobile-tabs-third">
        <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="box"></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>
    </div>
    <div class="grid grid-cols-2 gap-3" id="mobile-tabs-bottom">
        <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">
                <LucideIcon Name="database" class="w-4 h-4 inline" />
                <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="shield-check"></i>
                <span>Whistleblowing</span>
            </div>

        </button>
    </div>
</div>

    <!-- Mobile Card Display -->
    <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" 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>

    <!-- Desktop Grid -->
    <div class="hidden md:grid grid-cols-1 md:grid-cols-3 gap-8">
        <!-- Kiri Mobile, Tengah desktop -->
        <div class="md:col-span-1 md:order-2">
            <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 transition-transform duration-700 group-hover:scale-105">
                <div class="absolute bottom-0 left-0 right-0 p-6 z-20 transition-all duration-300">
                    <a href="#" class="block">
                        <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">Penjemputan e-Waste</h3>
                                <p class="text-white/80 text-sm max-w-xs hidden group-hover:block transition-all duration-300">
                                    Layanan pengumpulan sampah elektronik.
                                </p>
                            </div>
                            <div class="bg-orange-500 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>
                    </a>
                </div>
            </div>
        </div>

        <!-- kiri desktop, keduua on mobile -->
        <div class="flex flex-col gap-8 md:order-1">
            <div class="flex flex-col service-item cursor-pointer">
                <div class="flex flex-row items-center mb-4">
                    <div>
                        <div class="bg-orange-600 w-2 h-16 mr-4 rounded-full hidden"></div>
                    </div>
                    <div>
                        <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>
            </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>

        <!-- kanan desktop, ketiga mobile -->
        <div class="flex flex-col gap-8 md:order-3">
            <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>
</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("jemput.jpg"),
      description: "Layanan pengumpulan sampah elektronik.",
    },
    "Uji Sampel Laboratorium": {
      image: asset("lab.jpg"),
      description: "Pengujian kualitas lingkungan hidup.",
    },
    "Bus Toilet": {
      image: asset("lab.jpg"),
      description: "Fasilitas toilet keliling untuk kegiatan umum.",
    },
    AMDAL: {
      image: asset("lab.jpg"),
      description: "Proses Analisis Mengenai Dampak Lingkungan.",
    },
    "Bulky Waste": {
      image: asset("lab.jpg"),
      description: "Layanan khusus pengangkutan sampah besar.",
    },
    "Permohonan Informasi Publik": {
      image: asset("lab.jpg"),
      description: "Saluran pengaduan pelanggaran lingkungan.",
    },
    "BPS-RW": {
      image: asset("lab.jpg"),
      description: "Basis data lingkungan hidup tingkat Rukun Warga",
    },
    "Whistleblowing System": {
      image: asset("lab.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-orange-500", "text-white");
        t.classList.add("bg-gray-200", "text-gray-600");
      });

      this.classList.remove("bg-gray-200", "text-gray-600");
      this.classList.add("bg-orange-500", "text-white");

      if (serviceData[serviceName]) {
        mobileServiceImage.src = serviceData[serviceName].image;
        mobileServiceTitle.textContent = serviceName;
        mobileServiceDescription.textContent =
          serviceData[serviceName].description;
      }
    });
  });

  const serviceItems = Array.from(document.querySelectorAll(".service-item"));
  const imageCard = document.querySelector(".md\\:col-span-1 .rounded-lg img");
  const serviceTitle = document.querySelector(
    ".md\\:col-span-1 .rounded-lg h3"
  );
  const cardContainer = document.querySelector(".md\\:col-span-1 .rounded-lg");

  let activeService = "Penjemputan e-Waste";

  const style = document.createElement("style");
  style.innerHTML = `
    .service-item {
        position: relative;
        transition: all 0.3s ease-in-out;
        border-left: 0px solid #ed8936;
        overflow: hidden;
    }
    .service-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 0;
        background-color: rgba(237, 137, 54, 0.1);
        transition: width 0.3s ease-in-out;
        z-index: -1;
    }
    .service-item.active::before {
        width: 100%;
    }
    .service-item h2, .service-item p {
        transition: all 0.3s ease-in-out;
    }
    .rounded-lg.overflow-hidden {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .rounded-lg.overflow-hidden:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
                    0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
    .rounded-lg.overflow-hidden img {
        transition: transform 0.6s ease;
    }
    .image-fade {
        animation: imageFade 0.4s ease-in-out;
    }
    @@keyframes imageFade {
        0% { opacity: 0.6; transform: scale(0.95); }
        100% { opacity: 1; transform: scale(1); }
    }
  `;
  document.head.appendChild(style);

  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 (imageCard && serviceData[title]) {
      imageCard.classList.add("image-fade");
      imageCard.src = serviceData[title].image;
      imageCard.alt = title;
      setTimeout(() => imageCard.classList.remove("image-fade"), 400);
    }

    if (serviceTitle) {
      serviceTitle.textContent = title;
    }

    activeService = title;
  }

  let autoplayInterval;
  let isHovering = false;

  serviceItems.forEach((item) => {
    item.addEventListener("mouseenter", () => {
      isHovering = true;
      const h2 = item.querySelector("h2");
      if (!h2) return;
      const hoveredTitle = h2.textContent.trim();
      if (serviceData[hoveredTitle]) setActiveService(hoveredTitle);
    });

    item.addEventListener("mouseleave", () => {
      isHovering = false;
    });
  });

  if (cardContainer) {
    cardContainer.addEventListener("mouseenter", () => {
      if (imageCard) imageCard.style.transform = "scale(1.05)";
    });

    cardContainer.addEventListener("mouseleave", () => {
      if (imageCard) imageCard.style.transform = "scale(1)";
    });
  }

  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]);
      }
    }, 4000);
  }

  setActiveService(activeService);
  startAutoplay();
});

    </script>
</register-block>