854 lines
49 KiB
Plaintext
854 lines
49 KiB
Plaintext
@{
|
|
ViewData["Title"] = "Beranda";
|
|
}
|
|
|
|
<!-- Hero Section -->
|
|
<section id="home" class="relative min-h-screen bg-cover bg-center overflow-hidden"
|
|
style="background-image: url('/images/bg-landing-page.png');">
|
|
<!-- Background overlay -->
|
|
<div class="absolute inset-0 bg-black/50"></div>
|
|
|
|
<!-- Hero Content -->
|
|
<div class="relative z-10 flex items-center min-h-screen px-4 lg:px-28 py-20">
|
|
<div class="w-full max-w-7xl mx-auto flex flex-col justify-start items-start gap-20">
|
|
<div class="flex justify-start items-center gap-8 w-full">
|
|
<div class="max-w-[800px] pr-10 flex flex-col justify-start items-start gap-8">
|
|
<div class="flex flex-col justify-start items-start gap-8 w-full">
|
|
|
|
<!-- Main Title -->
|
|
<div class="flex flex-col justify-start items-start gap-2 w-full">
|
|
<h1 class="text-white hero-title font-bold font-jakarta w-full">
|
|
E-Bank Sampah Jakarta
|
|
</h1>
|
|
<p class="text-white text-base sm:text-lg font-medium font-jakarta leading-7 w-full">
|
|
Program dari Dinas Lingkungan Hidup Provinsi Jakarta
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA Buttons -->
|
|
<div class="flex flex-col sm:flex-row justify-start items-start gap-8">
|
|
<a href="/Registrasi/RegisterNasabah" class="btn-cta group">
|
|
<span class="font-jakarta tracking-wide">Pendaftaran Nasabah</span>
|
|
<i class="ph ph-arrow-up-right btn-cta__icon"></i>
|
|
</a>
|
|
<a href="/Registrasi/RegisterBankSampah" class="btn-cta group">
|
|
<span class="font-jakarta tracking-wide">Pendaftaran Bank Sampah</span>
|
|
<i class="ph ph-arrow-up-right btn-cta__icon"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About Section -->
|
|
<section id="about" class="px-4 lg:px-28 py-24 bg-gray-50">
|
|
<div class="w-full max-w-7xl mx-auto flex flex-col justify-start items-start gap-20">
|
|
<div class="flex flex-col lg:flex-row justify-start items-center gap-20 w-full">
|
|
<!-- Image Section -->
|
|
<div class="w-full lg:w-[592px] h-[400px] lg:h-[592px] relative">
|
|
<div class="w-60 h-60 absolute bottom-0 left-0 bg-green-800 rounded-full"></div>
|
|
<img class="w-80 h-80 lg:w-96 lg:h-96 absolute top-12 left-10 rounded-full object-cover"
|
|
src="/images/trash-rounded.png" alt="Bank Sampah Image" />
|
|
<div
|
|
class="w-48 h-48 absolute top-1/2 right-10 lg:right-20 bg-white rounded-full shadow-lg flex items-center justify-center">
|
|
<img class="w-36 h-36" src="/images/logo.png" alt="Logo" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content Section -->
|
|
<div class="flex-1 flex flex-col justify-start items-start gap-8">
|
|
<div class="flex flex-col justify-start items-start gap-4 w-full">
|
|
<!-- Badge -->
|
|
<div class="px-4 py-2 bg-gray-300 rounded-3xl flex justify-center items-center gap-2">
|
|
<div class="w-4 h-4 relative">
|
|
<div class="w-3 h-3 absolute top-[1.5px] left-[1.5px] bg-green-800 rounded-full"></div>
|
|
</div>
|
|
<div class="text-green-800 text-base font-bold font-jakarta">Tentang Kami</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col justify-start items-start gap-6 w-full">
|
|
<h2 class="text-gray-900 text-3xl lg:text-4xl font-bold font-jakarta leading-10">e-Bank Sampah
|
|
</h2>
|
|
<p class="text-slate-700 text-lg font-normal font-jakarta leading-7">
|
|
e-Bank Sampah adalah sebuah platform digital berbasis website yang menghimpun data dan
|
|
informasi mengenai aktivitas di Bank Sampah Induk (BSI) dan Bank Sampah Unit (BSU).
|
|
</p>
|
|
<p class="text-slate-700 text-base font-normal font-jakarta leading-normal">
|
|
Website ini bertujuan mempermudah nasabah, BSI, dan BSU dalam melakukan pencatatan dan
|
|
pemantauan transaksi yang terjadi di Bank Sampah. e-Bank Sampah juga memberikan informasi
|
|
mengenai regulasi Bank Sampah, aktivitas Bank Sampah yang menarik dan bermanfaat sehingga
|
|
dapat menginspirasi pegiat Bank Sampah lainnya. Di dalam E-Bank Sampah, masyarakat dapat
|
|
juga mendapatkan informasi mengenai daftar lokasi Bank Sampah yang aktif melakukan
|
|
pengumpulan sampah.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Publications Section -->
|
|
<section id="publications" class="px-4 lg:px-28 py-24 bg-gray-100">
|
|
<div class="w-full flex flex-col justify-start items-start gap-20">
|
|
<div class="flex flex-col justify-start items-start gap-14 w-full">
|
|
<div class="flex flex-col lg:flex-row items-center justify-between gap-6 w-full">
|
|
<div class="flex flex-col justify-start items-start gap-4 w-full">
|
|
<!-- Badge -->
|
|
<div class="text-green-600 text-base font-jakarta">Posting Terkini</div>
|
|
<h2 class="text-gray-900 text-3xl lg:text-4xl font-bold font-jakarta leading-10">Publikasi</h2>
|
|
</div>
|
|
<div class="flex flex-row w-full justify-end items-center gap-3">
|
|
<a href="#" class="btn btn-neutral shadow-none rounded-full">Lihat Semua</a>
|
|
<div class="article-nav-controls flex items-center gap-2 ">
|
|
<button type="button" class="article-nav-btn" data-article-carousel-btn="prev"
|
|
aria-label="Artikel sebelumnya">
|
|
<i class="ph ph-arrow-left"></i>
|
|
</button>
|
|
<button type="button" class="article-nav-btn" data-article-carousel-btn="next"
|
|
aria-label="Artikel selanjutnya">
|
|
<i class="ph ph-arrow-right"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Articles Carousel -->
|
|
<div class="article-carousel-wrapper">
|
|
<div class="article-carousel" data-article-carousel>
|
|
<!-- Article 1 -->
|
|
<article class="carousel-item article-card">
|
|
<figure>
|
|
<img class="w-full h-64 object-cover" src="/images/publikasi/image-01.png"
|
|
alt="Article Image" />
|
|
</figure>
|
|
<div class="card-body">
|
|
<h2 class="card-title line-clamp-2">
|
|
Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH
|
|
Luncurkan
|
|
Platform
|
|
</h2>
|
|
<p class="text-gray-500 line-clamp-3">
|
|
JAKARTA — Dinas Lingkungan Hidup (DLH) DKI Jakarta meluncurkan platform e-Bank Sampah
|
|
Jakarta pada Kamis, (12/12). Platform banksampah.jakarta.go.id ini dirancang untuk
|
|
mempermudah pengelolaan bank sampah sekaligus mendorong warga Jakarta terdaftar sebagai
|
|
nasabah bank sampah sebagai upaya pengurangan sampah. Langkah ini merupakan bagian dari
|
|
upaya mendukung kebijakan pembebasan retribusi kebersihan bagi warga yang aktif memilah
|
|
sampah dan bertransaksi di bank sampah.
|
|
</p>
|
|
<div class="card-actions">
|
|
<a class="text-green-600 text-lg no-underline flex items-center font-semibold" href="#">
|
|
Selengkapnya
|
|
<i class="ph ph-arrow-up-right text-lg ms-2"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Article 2 -->
|
|
<article class="carousel-item article-card">
|
|
<figure>
|
|
<img class="w-full h-64 object-cover" src="/images/publikasi/image-02.png"
|
|
alt="Article Image" />
|
|
</figure>
|
|
<div class="card-body">
|
|
<h2 class="card-title line-clamp-2">
|
|
Menteri LH Dukung Retribusi Pelayanan Kebersihan di Jakarta
|
|
</h2>
|
|
<p class="text-gray-500 line-clamp-3">
|
|
JAKARTA — Menteri Lingkungan Hidup, Hanif Faisol Nurofiq, mendukung penuh langkah
|
|
Pemerintah
|
|
Provinsi DKI Jakarta untuk menerapkan Retribusi Pelayanan Kebersihan mulai 1 Januari
|
|
2025.
|
|
Dukungan ini disampaikan Menteri Hanif dalam acara "Kolaborasi Bersih Sampah Jakarta -
|
|
Indonesia Bersih" yang berlangsung di Hutan Kota GBK, Jakarta, Minggu (17/11).
|
|
</p>
|
|
<div class="card-actions">
|
|
<a class="text-green-600 text-lg no-underline flex items-center font-semibold" href="#">
|
|
Selengkapnya
|
|
<i class="ph ph-arrow-up-right text-lg ms-2"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Article 3 -->
|
|
<article class="carousel-item article-card">
|
|
<figure>
|
|
<img class="w-full h-64 object-cover" src="/images/publikasi/image-03.png"
|
|
alt="Article Image" />
|
|
</figure>
|
|
<div class="card-body">
|
|
<h3 class="card-title line-clamp-2">
|
|
Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH
|
|
Luncurkan
|
|
Platform
|
|
</h3>
|
|
<p class="text-gray-500 text-sm font-normal font-jakarta leading-tight">
|
|
JAKARTA — Dinas Lingkungan Hidup (DLH) DKI Jakarta meluncurkan platform e-Bank Sampah
|
|
Jakarta pada Kamis, (12/12). Platform banksampah.jakarta.go.id ini dirancang untuk
|
|
mempermudah pengelolaan bank sampah sekaligus mendorong warga Jakarta terdaftar sebagai
|
|
nasabah bank sampah sebagai upaya pengurangan sampah. Langkah ini merupakan bagian dari
|
|
upaya mendukung kebijakan pembebasan retribusi kebersihan bagi warga yang aktif memilah
|
|
sampah dan bertransaksi di bank sampah.
|
|
</p>
|
|
<div class="card-actions">
|
|
<a class="text-green-600 text-lg no-underline flex items-center font-semibold" href="#">
|
|
Selengkapnya
|
|
<i class="ph ph-arrow-up-right text-lg ms-2"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Article 4 -->
|
|
<article class="carousel-item article-card">
|
|
<figure>
|
|
<img class="w-full h-64 object-cover" src="/images/publikasi/image-03.png"
|
|
alt="Article Image" />
|
|
</figure>
|
|
<div class="card-body">
|
|
<h3 class="card-title line-clamp-2">
|
|
Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH
|
|
Luncurkan
|
|
Platform
|
|
</h3>
|
|
<p class="text-gray-500 text-sm font-normal font-jakarta leading-tight">
|
|
JAKARTA — Dinas Lingkungan Hidup (DLH) DKI Jakarta meluncurkan platform e-Bank Sampah
|
|
Jakarta pada Kamis, (12/12). Platform banksampah.jakarta.go.id ini dirancang untuk
|
|
mempermudah pengelolaan bank sampah sekaligus mendorong warga Jakarta terdaftar sebagai
|
|
nasabah bank sampah sebagai upaya pengurangan sampah. Langkah ini merupakan bagian dari
|
|
upaya mendukung kebijakan pembebasan retribusi kebersihan bagi warga yang aktif memilah
|
|
sampah dan bertransaksi di bank sampah.
|
|
</p>
|
|
<div class="card-actions">
|
|
<a class="text-green-600 text-lg no-underline flex items-center font-semibold" href="#">
|
|
Selengkapnya
|
|
<i class="ph ph-arrow-up-right text-lg ms-2"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Article 4 -->
|
|
<article class="carousel-item article-card">
|
|
<figure>
|
|
<img class="w-full h-64 object-cover" src="/images/publikasi/image-03.png"
|
|
alt="Article Image" />
|
|
</figure>
|
|
<div class="card-body">
|
|
<h3 class="card-title line-clamp-2">
|
|
Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH
|
|
Luncurkan
|
|
Platform
|
|
</h3>
|
|
<p class="text-gray-500 text-sm font-normal font-jakarta leading-tight">
|
|
JAKARTA — Dinas Lingkungan Hidup (DLH) DKI Jakarta meluncurkan platform e-Bank Sampah
|
|
Jakarta pada Kamis, (12/12). Platform banksampah.jakarta.go.id ini dirancang untuk
|
|
mempermudah pengelolaan bank sampah sekaligus mendorong warga Jakarta terdaftar sebagai
|
|
nasabah bank sampah sebagai upaya pengurangan sampah. Langkah ini merupakan bagian dari
|
|
upaya mendukung kebijakan pembebasan retribusi kebersihan bagi warga yang aktif memilah
|
|
sampah dan bertransaksi di bank sampah.
|
|
</p>
|
|
<div class="card-actions">
|
|
<a class="text-green-600 text-lg no-underline flex items-center font-semibold" href="#">
|
|
Selengkapnya
|
|
<i class="ph ph-arrow-up-right text-lg ms-2"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Article 4 -->
|
|
<article class="carousel-item article-card">
|
|
<figure>
|
|
<img class="w-full h-64 object-cover" src="/images/publikasi/image-03.png"
|
|
alt="Article Image" />
|
|
</figure>
|
|
<div class="card-body">
|
|
<h3 class="card-title line-clamp-2">
|
|
Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH
|
|
Luncurkan
|
|
Platform
|
|
</h3>
|
|
<p class="text-gray-500 text-sm font-normal font-jakarta leading-tight">
|
|
JAKARTA — Dinas Lingkungan Hidup (DLH) DKI Jakarta meluncurkan platform e-Bank Sampah
|
|
Jakarta pada Kamis, (12/12). Platform banksampah.jakarta.go.id ini dirancang untuk
|
|
mempermudah pengelolaan bank sampah sekaligus mendorong warga Jakarta terdaftar sebagai
|
|
nasabah bank sampah sebagai upaya pengurangan sampah. Langkah ini merupakan bagian dari
|
|
upaya mendukung kebijakan pembebasan retribusi kebersihan bagi warga yang aktif memilah
|
|
sampah dan bertransaksi di bank sampah.
|
|
</p>
|
|
<div class="card-actions">
|
|
<a class="text-green-600 text-lg no-underline flex items-center font-semibold" href="#">
|
|
Selengkapnya
|
|
<i class="ph ph-arrow-up-right text-lg ms-2"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Regulations Section -->
|
|
<section id="regulations" class="px-4 lg:px-28 py-24 bg-white">
|
|
<div class="w-full max-w-7xl mx-auto flex flex-col justify-start items-start gap-12">
|
|
<!-- Content Section -->
|
|
<div class="flex flex-col justify-start items-start gap-4 w-full">
|
|
<div class="text-green-800 text-base font-bold font-jakarta">Peraturan</div>
|
|
|
|
<!-- Regulation Items -->
|
|
<div class="flex flex-col justify-start items-start gap-6 w-full">
|
|
<h2 class="text-gray-900 text-3xl lg:text-4xl font-bold font-jakarta leading-10">
|
|
Regulasi Terkait
|
|
</h2>
|
|
|
|
<div class="bg-base-100 border-base-300 collapse border collapse-arrow">
|
|
<input type="checkbox" class="peer" />
|
|
<div class="collapse-title peer-checked:bg-neutral peer-checked:text-neutral-content">
|
|
<span class="font-bold text-xl">Permen LHK No 14/2021</span>
|
|
<p class="text-gray-500 peer-checked:text-white">
|
|
Perturan Menteri Lingkungan Hidup Nomor 14 Tahun 2021
|
|
</p>
|
|
</div>
|
|
<div class="collapse-content peer-checked:bg-neutral peer-checked:text-neutral-content">
|
|
<p>Peraturan Gubernur Nomor 77 Tahun 2020 mengatur tentang pengelolaan sampah dari
|
|
sumbernya melalui peran aktif warga di tingkat RT dan RW, dengan tujuan mengurangi
|
|
volume sampah yang masuk ke TPA.</p>
|
|
<div class="flex flex-row gap-3 w-full pt-4">
|
|
<button type="button" class="btn btn-outline rounded-full shadow-none">
|
|
<i class="ph-fill ph-calendar-dots text-lg me-1"></i>
|
|
Ditetapkan: 13 Juli 2020
|
|
</button>
|
|
<button type="button" class="btn btn-outline rounded-full shadow-none">
|
|
<i class="ph-fill ph-check-circle text-lg me-1"></i>
|
|
Status: Berlaku
|
|
</button>
|
|
<a class="btn btn-outline shadow-none rounded-full" href="#">
|
|
<i class="ph-fill ph-download-simple text-lg me-1"></i>
|
|
Unduh PDF
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-base-100 border-base-300 collapse collapse-close border collapse-arrow">
|
|
<div class="collapse-title peer-checked:bg-neutral peer-checked:text-neutral-content">
|
|
<span class="font-bold text-xl">Pergub DKI Jakarta No. 77/2020</span>
|
|
<p class="text-gray-500 peer-checked:text-white">
|
|
Peraturan Gubernur Provinsi KDI Jakarta Nomor 77 Tahun 2020
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-base-100 border-base-300 collapse collapse-close border collapse-arrow">
|
|
<div class="collapse-title peer-checked:bg-neutral peer-checked:text-neutral-content">
|
|
<span class="font-bold text-xl">Pergub DKI Jakarta No 33/2021</span>
|
|
<p class="text-gray-500 peer-checked:text-white">
|
|
Peraturan Gubernur Provinsi KDI Jakarta Nomor 33 Tahun 2021
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cards -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-10 mt-10">
|
|
<!-- Kumpulkan -->
|
|
<div class="card bg-base-100 image-full size-96 shadow-sm">
|
|
<figure>
|
|
<img src="/images/regulasi/kumpulkan.png" alt="Kumpulkan" class="brightness-100" />
|
|
</figure>
|
|
<div class="card-body">
|
|
<h2 class="card-title">Kumpulkan</h2>
|
|
<p></p>
|
|
<div class="card-actions align-bottom">
|
|
<button class="btn glass text-white shadow-none border-none w-full">
|
|
Lorem Ipsum
|
|
<i class="ph ph-arrow-up-right ms-auto"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Pilah -->
|
|
<div class="card bg-base-100 image-full size-96 shadow-sm">
|
|
<figure>
|
|
<img src="/images/regulasi/pilah.png" alt="Pilah" class="brightness-100" />
|
|
</figure>
|
|
<div class="card-body">
|
|
<h2 class="card-title">Pilah</h2>
|
|
<p></p>
|
|
<div class="card-actions align-bottom">
|
|
<button class="btn glass text-white shadow-none border-none w-full">
|
|
Lorem Ipsum
|
|
<i class="ph ph-arrow-up-right ms-auto"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Kelola -->
|
|
<div class="card bg-base-100 image-full size-96 shadow-sm">
|
|
<figure>
|
|
<img src="/images/regulasi/kelola.png" alt="Kelola" class="brightness-100" />
|
|
</figure>
|
|
<div class="card-body">
|
|
<h2 class="card-title">Kelola</h2>
|
|
<p></p>
|
|
<div class="card-actions align-bottom">
|
|
<button class="btn glass text-white shadow-none border-none w-full">
|
|
Lorem Ipsum
|
|
<i class="ph ph-arrow-up-right ms-auto"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Location Map Section -->
|
|
<section id="location" class="pt-24 bg-white">
|
|
<div class="flex flex-col w-full gap-4">
|
|
<div class="flex flex-col gap-2 w-full max-w-7xl mx-auto px-4 lg:px-0 justify-start">
|
|
<h5 class="text-green-600">Titik Lokasi</h5>
|
|
<h2 class="text-gray-900 text-3xl lg:text-4xl font-bold font-jakarta leading-10">Lokasi Bank Sampah</h2>
|
|
</div>
|
|
|
|
<div class="w-full flex flex-col gap-6 mx-auto items-center p-6 bg-gray-100">
|
|
<div class="grid grid-cols-1 md:grid-cols-5 gap-4 w-full max-w-7xl">
|
|
<div class="flex flex-col gap-2">
|
|
<label class="text-sm font-semibold text-gray-700">Jenis Bank Sampah</label>
|
|
<select class="select select-bordered w-full" data-bank-filter="type">
|
|
<option value="all">Semua Jenis</option>
|
|
<option value="BSI">Bank Sampah Induk (BSI)</option>
|
|
<option value="BSU">Bank Sampah Unit (BSU)</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<label class="text-sm font-semibold text-gray-700">Kota</label>
|
|
<select class="select select-bordered w-full" data-bank-filter="kota">
|
|
<option value="all">Semua Kota</option>
|
|
<option value="Jakarta Pusat">Jakarta Pusat</option>
|
|
<option value="Jakarta Barat">Jakarta Barat</option>
|
|
<option value="Jakarta Selatan">Jakarta Selatan</option>
|
|
<option value="Jakarta Timur">Jakarta Timur</option>
|
|
<option value="Jakarta Utara">Jakarta Utara</option>
|
|
<option value="Kepulauan Seribu">Kepulauan Seribu</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<label class="text-sm font-semibold text-gray-700">Kecamatan</label>
|
|
<select class="select select-bordered w-full" data-bank-filter="kecamatan">
|
|
<option value="all">Semua Kecamatan</option>
|
|
<option value="Kemayoran">Kemayoran</option>
|
|
<option value="Palmerah">Palmerah</option>
|
|
<option value="Mampang Prapatan">Mampang Prapatan</option>
|
|
<option value="Cipayung">Cipayung</option>
|
|
<option value="Pademangan">Pademangan</option>
|
|
<option value="Kepulauan Seribu Selatan">Kepulauan Seribu Selatan</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<label class="text-sm font-semibold text-gray-700">Kelurahan</label>
|
|
<select class="select select-bordered w-full" data-bank-filter="kelurahan">
|
|
<option value="all">Semua Kelurahan</option>
|
|
<option value="Cempaka Baru">Cempaka Baru</option>
|
|
<option value="Slipi">Slipi</option>
|
|
<option value="Tegal Parang">Tegal Parang</option>
|
|
<option value="Cilangkap">Cilangkap</option>
|
|
<option value="Pademangan Timur">Pademangan Timur</option>
|
|
<option value="Pulau Tidung">Pulau Tidung</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<label class="text-sm font-semibold text-gray-700">RW (Rukun Warga)</label>
|
|
<select class="select select-bordered w-full" data-bank-filter="rw">
|
|
<option value="all">Semua RW</option>
|
|
<option value="RW 05">RW 05</option>
|
|
<option value="RW 03">RW 03</option>
|
|
<option value="RW 07">RW 07</option>
|
|
<option value="RW 10">RW 10</option>
|
|
<option value="RW 12">RW 12</option>
|
|
<option value="RW 02">RW 02</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="jakartaMap" class="w-full h-[600px] overflow-hidden"></div>
|
|
</section>
|
|
|
|
<!-- Help Desk Section -->
|
|
<section class="px-4 lg:px-28 py-24 bg-gray-50">
|
|
<div class="w-full max-w-[1280px] mx-auto flex flex-col justify-center items-start gap-20">
|
|
<div class="flex flex-col lg:flex-row justify-start items-center gap-20 w-full">
|
|
<!-- Image Section -->
|
|
<div class="w-full lg:w-[592px] h-[400px] lg:h-[592px] relative">
|
|
<div class="w-60 h-60 absolute bottom-0 left-0 bg-green-800 rounded-full"></div>
|
|
<img class="w-80 h-80 lg:w-96 lg:h-96 absolute bottom-12 right-20 rounded-full object-cover" src="/images/call-center.png" alt="Help Desk Image" />
|
|
<div class="w-48 h-48 absolute top-1/2 right-0 lg:right-0 bg-white rounded-full shadow-lg flex items-center justify-center">
|
|
<img class="w-36 h-36" src="/images/logo.png" alt="Help Desk Logo" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content Section -->
|
|
<div class="flex-1 flex flex-col justify-start items-start gap-8">
|
|
<div class="flex flex-col justify-start items-start gap-4 w-full">
|
|
<!-- Badge -->
|
|
<div class="px-4 py-2 bg-gray-300 rounded-3xl flex justify-center items-center gap-2">
|
|
<div class="w-4 h-4 relative">
|
|
<div class="w-3 h-3 absolute top-[1.5px] left-[1.5px] bg-green-800 rounded-full"></div>
|
|
</div>
|
|
<div class="text-green-800 text-base font-bold font-jakarta">Ada kendala terkait Bank Sampah?</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col justify-start items-start gap-6 w-full">
|
|
<h2 class="text-gray-900 text-3xl lg:text-4xl font-bold font-jakarta leading-10">Hubungi Help Desk kami</h2>
|
|
|
|
<!-- Contact Grid -->
|
|
<div class="flex flex-col lg:flex-row justify-start items-start gap-6 w-full">
|
|
<!-- Left Column -->
|
|
<div class="flex-1 flex flex-col justify-start items-start gap-4">
|
|
<!-- Admin 1 -->
|
|
<div class="px-6 py-4 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6 w-full">
|
|
<div class="flex justify-start items-center gap-6 w-full">
|
|
<div class="flex-1 flex flex-col justify-start items-start gap-0.5">
|
|
<h3 class="text-gray-900 text-xl font-bold font-jakarta leading-loose">Admin 1</h3>
|
|
<p class="text-gray-500 text-base font-normal font-jakarta leading-normal">085283788234</p>
|
|
</div>
|
|
<button class="p-3 bg-gray-300 hover:bg-gray-400 rounded-full flex justify-center items-center gap-2 transition-colors">
|
|
<svg class="w-6 h-6 text-green-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Admin 3 -->
|
|
<div class="px-6 py-4 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6 w-full">
|
|
<div class="flex justify-start items-center gap-6 w-full">
|
|
<div class="flex-1 flex flex-col justify-start items-start gap-0.5">
|
|
<h3 class="text-gray-900 text-xl font-bold font-jakarta leading-loose">Admin 3</h3>
|
|
<p class="text-gray-500 text-base font-normal font-jakarta leading-normal">085283788234</p>
|
|
</div>
|
|
<button class="p-3 bg-gray-300 hover:bg-gray-400 rounded-full flex justify-center items-center gap-2 transition-colors">
|
|
<svg class="w-6 h-6 text-green-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Admin 5 -->
|
|
<div class="px-6 py-4 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6 w-full">
|
|
<div class="flex justify-start items-center gap-6 w-full">
|
|
<div class="flex-1 flex flex-col justify-start items-start gap-0.5">
|
|
<h3 class="text-gray-900 text-xl font-bold font-jakarta leading-loose">Admin 5</h3>
|
|
<p class="text-gray-500 text-base font-normal font-jakarta leading-normal">085283788234</p>
|
|
</div>
|
|
<button class="p-3 bg-gray-300 hover:bg-gray-400 rounded-full flex justify-center items-center gap-2 transition-colors">
|
|
<svg class="w-6 h-6 text-green-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column -->
|
|
<div class="flex-1 flex flex-col justify-start items-start gap-4">
|
|
<!-- Admin 2 -->
|
|
<div class="px-6 py-4 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6 w-full">
|
|
<div class="flex justify-start items-center gap-6 w-full">
|
|
<div class="flex-1 flex flex-col justify-start items-start gap-0.5">
|
|
<h3 class="text-gray-900 text-xl font-bold font-jakarta leading-loose">Admin 2</h3>
|
|
<p class="text-gray-500 text-base font-normal font-jakarta leading-normal">085283788234</p>
|
|
</div>
|
|
<button class="p-3 bg-gray-300 hover:bg-gray-400 rounded-full flex justify-center items-center gap-2 transition-colors">
|
|
<svg class="w-6 h-6 text-green-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Admin 4 -->
|
|
<div class="px-6 py-4 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6 w-full">
|
|
<div class="flex justify-start items-center gap-6 w-full">
|
|
<div class="flex-1 flex flex-col justify-start items-start gap-0.5">
|
|
<h3 class="text-gray-900 text-xl font-bold font-jakarta leading-loose">Admin 4</h3>
|
|
<p class="text-gray-500 text-base font-normal font-jakarta leading-normal">085283788234</p>
|
|
</div>
|
|
<button class="p-3 bg-gray-300 hover:bg-gray-400 rounded-full flex justify-center items-center gap-2 transition-colors">
|
|
<svg class="w-6 h-6 text-green-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Admin 6 -->
|
|
<div class="px-6 py-4 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6 w-full">
|
|
<div class="flex justify-start items-center gap-6 w-full">
|
|
<div class="flex-1 flex flex-col justify-start items-start gap-0.5">
|
|
<h3 class="text-gray-900 text-xl font-bold font-jakarta leading-loose">Admin 6</h3>
|
|
<p class="text-gray-500 text-base font-normal font-jakarta leading-normal">085283788234</p>
|
|
</div>
|
|
<button class="p-3 bg-gray-300 hover:bg-gray-400 rounded-full flex justify-center items-center gap-2 transition-colors">
|
|
<svg class="w-6 h-6 text-green-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Additional Contact Info -->
|
|
<div class="w-full">
|
|
<p class="text-slate-700 text-base font-jakarta">
|
|
<span class="font-semibold">Atau dapat langsung menghubungi:</span><br/>
|
|
<span class="font-normal">Bidang Pengurangan dan Penanganan Sampah<br/>
|
|
Dinas Lingkungan Hidup Provinsi DKI Jakarta<br/>
|
|
Jl. Mandala V Cililitan Kramatjati Jakarta Timur</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
@section Styles {
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
}
|
|
|
|
@section Scripts {
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script>
|
|
// Leaflet map configuration for DKI Jakarta
|
|
(function () {
|
|
if (typeof L === 'undefined') return;
|
|
const mapContainer = document.getElementById('jakartaMap');
|
|
if (!mapContainer) return;
|
|
|
|
const map = L.map('jakartaMap', {
|
|
center: [-6.2, 106.816666],
|
|
zoom: 11,
|
|
scrollWheelZoom: false
|
|
});
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
|
|
}).addTo(map);
|
|
|
|
const bankSampahData = [
|
|
{
|
|
name: 'Bank Sampah Induk Cempaka',
|
|
type: 'BSI',
|
|
kota: 'Jakarta Pusat',
|
|
kecamatan: 'Kemayoran',
|
|
kelurahan: 'Cempaka Baru',
|
|
rw: 'RW 05',
|
|
address: 'Jl. Cempaka Baru No. 8, Kemayoran, Jakarta Pusat',
|
|
phone: '+62 812-3456-7890',
|
|
coords: [-6.1725, 106.8653],
|
|
rates: {
|
|
kardus: 'Rp 2.800/kg',
|
|
botolBersih: 'Rp 3.200/kg',
|
|
botolKotor: 'Rp 2.100/kg'
|
|
}
|
|
},
|
|
{
|
|
name: 'Bank Sampah Unit Slipi Hijau',
|
|
type: 'BSU',
|
|
kota: 'Jakarta Barat',
|
|
kecamatan: 'Palmerah',
|
|
kelurahan: 'Slipi',
|
|
rw: 'RW 03',
|
|
address: 'Jl. KS Tubun II C No. 15, Slipi, Jakarta Barat',
|
|
phone: '+62 813-8899-2211',
|
|
coords: [-6.1973, 106.8029],
|
|
rates: {
|
|
kardus: 'Rp 2.600/kg',
|
|
botolBersih: 'Rp 3.000/kg',
|
|
botolKotor: 'Rp 2.000/kg'
|
|
}
|
|
},
|
|
{
|
|
name: 'Bank Sampah Mandiri Tegal Parang',
|
|
type: 'BSU',
|
|
kota: 'Jakarta Selatan',
|
|
kecamatan: 'Mampang Prapatan',
|
|
kelurahan: 'Tegal Parang',
|
|
rw: 'RW 07',
|
|
address: 'Jl. Mampang Prapatan VI No. 3, Jakarta Selatan',
|
|
phone: '+62 821-9090-4545',
|
|
coords: [-6.2482, 106.8181],
|
|
rates: {
|
|
kardus: 'Rp 2.500/kg',
|
|
botolBersih: 'Rp 2.900/kg',
|
|
botolKotor: 'Rp 1.900/kg'
|
|
}
|
|
},
|
|
{
|
|
name: 'Bank Sampah Cilangkap Berdaya',
|
|
type: 'BSU',
|
|
kota: 'Jakarta Timur',
|
|
kecamatan: 'Cipayung',
|
|
kelurahan: 'Cilangkap',
|
|
rw: 'RW 10',
|
|
address: 'Jl. Cilangkap Raya No. 2, Cipayung, Jakarta Timur',
|
|
phone: '+62 877-4567-1122',
|
|
coords: [-6.3194, 106.9004],
|
|
rates: {
|
|
kardus: 'Rp 2.400/kg',
|
|
botolBersih: 'Rp 2.800/kg',
|
|
botolKotor: 'Rp 1.850/kg'
|
|
}
|
|
},
|
|
{
|
|
name: 'Bank Sampah Laut Pulau Tidung',
|
|
type: 'BSI',
|
|
kota: 'Kepulauan Seribu',
|
|
kecamatan: 'Kepulauan Seribu Selatan',
|
|
kelurahan: 'Pulau Tidung',
|
|
rw: 'RW 02',
|
|
address: 'Pulau Tidung Besar, Kepulauan Seribu',
|
|
phone: '+62 857-8899-7788',
|
|
coords: [-5.7987, 106.5244],
|
|
rates: {
|
|
kardus: 'Rp 3.000/kg',
|
|
botolBersih: 'Rp 3.400/kg',
|
|
botolKotor: 'Rp 2.200/kg'
|
|
}
|
|
}
|
|
];
|
|
|
|
const markersLayer = L.layerGroup().addTo(map);
|
|
const filters = {
|
|
type: 'all',
|
|
kota: 'all',
|
|
kecamatan: 'all',
|
|
kelurahan: 'all',
|
|
rw: 'all'
|
|
};
|
|
|
|
const filterControls = document.querySelectorAll('[data-bank-filter]');
|
|
filterControls.forEach(select => {
|
|
select.addEventListener('change', () => {
|
|
filters[select.dataset.bankFilter] = select.value;
|
|
renderMarkers();
|
|
});
|
|
});
|
|
|
|
const popupTemplate = (data) =>
|
|
`<div class="card w-72 bg-base-100 shadow-xl border border-gray-200 rounded-2xl overflow-hidden">` +
|
|
`<div class="bg-neutral text-neutral-content px-4 py-3">` +
|
|
`<h3 class="text-lg font-semibold">` + data.name + `</h3>` +
|
|
`</div>` +
|
|
`<div class="card-body p-4 text-sm text-gray-700">` +
|
|
|
|
`<div class="flex place-items-center gap-3">` +
|
|
`<span class="text-primary"><i class="ph ph-house-line"></i></span>` +
|
|
`<p>` + data.address + `</p>` +
|
|
`</div>` +
|
|
|
|
`<div class="flex items-center gap-3">` +
|
|
`<span class="text-primary"><i class="ph ph-phone"></i></span>` +
|
|
`<p class="font-medium">` + data.phone + `</p>` +
|
|
`</div>` +
|
|
`<div class="divider my-0 py-0"></div>` +
|
|
`<p class="text-xs font-semibold tracking-wide text-gray-500 mb-2">Kurs Sampah Daur Ulang</p>` +
|
|
`<div class="space-y-1 text-gray-900">` +
|
|
`<div class="flex items-center justify-between"><span>Kardus</span><span class="font-semibold">` + data.rates.kardus + `</span></div>` +
|
|
`<div class="flex items-center justify-between"><span>Botol Bersih</span><span class="font-semibold">` + data.rates.botolBersih + `</span></div>` +
|
|
`<div class="flex items-center justify-between"><span>Botol Kotor</span><span class="font-semibold">` + data.rates.botolKotor + `</span></div>` +
|
|
`</div>` +
|
|
`</div>` +
|
|
`</div>`;
|
|
|
|
function renderMarkers() {
|
|
markersLayer.clearLayers();
|
|
bankSampahData
|
|
.filter(item => {
|
|
return Object.entries(filters).every(([key, value]) => value === 'all' || item[key] === value);
|
|
})
|
|
.forEach(item => {
|
|
const markerIcon = L.divIcon({
|
|
className: '',
|
|
html: '<div class="bank-map-marker"><i class="ph-fill ph-map-pin"></i></div>',
|
|
iconSize: [32, 32],
|
|
iconAnchor: [16, 32]
|
|
});
|
|
|
|
L.marker(item.coords, { icon: markerIcon })
|
|
.bindPopup(popupTemplate(item))
|
|
.addTo(markersLayer);
|
|
});
|
|
}
|
|
|
|
renderMarkers();
|
|
})();
|
|
|
|
// Smooth scrolling untuk anchor links
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// Animation on scroll
|
|
const observerOptions = {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver(function(entries) {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('animate-fade-in');
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
// Observe all sections
|
|
document.querySelectorAll('section').forEach(section => {
|
|
observer.observe(section);
|
|
});
|
|
|
|
// Article carousel controls
|
|
(function () {
|
|
const carousel = document.querySelector('[data-article-carousel]');
|
|
if (!carousel) return;
|
|
|
|
const handleNavClick = (direction) => {
|
|
const distance = carousel.clientWidth;
|
|
carousel.scrollBy({
|
|
left: direction * distance,
|
|
behavior: 'smooth'
|
|
});
|
|
};
|
|
|
|
document.querySelectorAll('[data-article-carousel-btn]').forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
const direction = button.dataset.articleCarouselBtn === 'next' ? 1 : -1;
|
|
handleNavClick(direction);
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
} |