665 lines
44 KiB
Plaintext
665 lines
44 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 class="px-4 lg:px-28 py-24 bg-white">
|
|
<div class="w-full max-w-[1280px] mx-auto flex flex-col justify-start items-start gap-12">
|
|
<div class="flex flex-col lg:flex-row justify-start items-center gap-12 w-full">
|
|
<!-- 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">Peraturan</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">Regulasi Terkait</h2>
|
|
|
|
<!-- Regulation Items -->
|
|
<div class="flex flex-col justify-start items-start gap-4 w-full">
|
|
<!-- Regulation 1 -->
|
|
<div class="p-6 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-start 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">Permen LHK No 14/2021</h3>
|
|
<p class="text-gray-500 text-base font-normal font-jakarta leading-normal">
|
|
Perturan Menteri Lingkungan Hidup Nomor 14 Tahun 2021
|
|
</p>
|
|
</div>
|
|
<div class="h-14 rounded-full flex flex-col justify-center items-center">
|
|
<svg class="w-8 h-8 text-gray-500" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<p class="text-slate-700 text-base font-normal font-jakarta leading-normal w-full">
|
|
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 justify-start items-start gap-2 w-full flex-wrap">
|
|
<div class="px-3 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-[1px] left-[2px] bg-green-800 rounded-full"></div>
|
|
</div>
|
|
<span class="text-green-800 text-sm font-bold font-jakarta">Ditetapkan: 13 Juli 2020</span>
|
|
</div>
|
|
<div class="px-3 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>
|
|
<span class="text-green-800 text-sm font-bold font-jakarta">Status: Berlaku</span>
|
|
</div>
|
|
<div class="px-3 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-[2px] bg-green-800 rounded-full"></div>
|
|
</div>
|
|
<span class="text-green-800 text-sm font-bold font-jakarta">Unduh PDF</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Regulation 2 -->
|
|
<div class="p-6 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-start 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">Pergub DKI Jakarta No. 77/2020</h3>
|
|
<p class="text-gray-500 text-base font-normal font-jakarta leading-normal">
|
|
Peraturan Gubernur Provinsi KDI Jakarta Nomor 77 Tahun 2020
|
|
</p>
|
|
</div>
|
|
<div class="h-14 rounded-full flex flex-col justify-center items-center">
|
|
<svg class="w-8 h-8 text-gray-500" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Regulation 3 -->
|
|
<div class="p-6 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-start 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">Pergub DKI Jakarta No 33/2021</h3>
|
|
<p class="text-gray-500 text-base font-normal font-jakarta leading-normal">
|
|
Peraturan Gubernur Provinsi KDI Jakarta Nomor 33 Tahun 2021
|
|
</p>
|
|
</div>
|
|
<div class="h-14 rounded-full flex flex-col justify-center items-center">
|
|
<svg class="w-8 h-8 text-gray-500" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Image Section -->
|
|
<div class="w-full lg:w-[592px] h-[400px] lg:h-[592px] relative">
|
|
<div class="w-60 h-[552px] absolute top-0 right-0 bg-green-800"></div>
|
|
<img class="w-80 h-[552px] lg:w-96 lg:h-[552px] absolute top-0 right-10 object-cover" src="/images/regulasi.png" alt="Regulation Image" />
|
|
<div class="w-48 h-48 absolute bottom-[176px] left-[30px] bg-white shadow-lg flex items-center justify-center">
|
|
<img class="w-32 h-32" src="/images/logo.png" alt="Regulation Logo" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Location Map Section -->
|
|
<section class="p-4 lg:p-28 bg-gray-100">
|
|
<div class="max-w-[1280px] mx-auto flex flex-col justify-start items-start gap-10">
|
|
<div class="flex flex-col justify-start items-start gap-8 w-full">
|
|
<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">Bank Sampah</div>
|
|
</div>
|
|
<h2 class="text-gray-900 text-3xl lg:text-4xl font-bold font-jakarta leading-10">Lokasi Bank Sampah</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Map Container -->
|
|
<div class="relative h-[400px] lg:h-[624px] w-full flex justify-center items-start gap-4">
|
|
<div class="flex-1 h-full p-6 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6">
|
|
<!-- Map placeholder with markers -->
|
|
<div class="w-full flex-1 relative bg-gray-200 rounded-lg overflow-hidden">
|
|
<img class="w-full h-full object-cover" src="/images/maps.png" alt="Jakarta Map" />
|
|
|
|
<!-- Map Markers -->
|
|
<div class="absolute inset-0">
|
|
<!-- Sample markers positioned across Jakarta -->
|
|
<div class="absolute top-[30%] left-[15%] p-2 bg-green-800 rounded-full map-marker">
|
|
<svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="absolute top-[25%] left-[35%] p-2 bg-green-800 rounded-full map-marker">
|
|
<svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="absolute top-[40%] left-[50%] p-2 bg-green-800 rounded-full map-marker">
|
|
<svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="absolute top-[55%] left-[25%] p-2 bg-green-800 rounded-full map-marker">
|
|
<svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="absolute top-[35%] left-[70%] p-2 bg-green-800 rounded-full map-marker">
|
|
<svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
|
|
</svg>
|
|
</div>
|
|
<!-- More markers can be added here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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 Scripts {
|
|
<script>
|
|
// 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>
|
|
} |