banksampah
/
bank-sampah
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor (landing): regulation section

main
Yuri Dimas 2025-12-02 00:46:30 +07:00
parent cefa285009
commit b242848f10
No known key found for this signature in database
GPG Key ID: 9FD7E44BC294C68C
4 changed files with 103 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

166
Views/Home/Index.cshtml
View File

@ -297,109 +297,115 @@
</section> </section>
<!-- Regulations Section --> <!-- Regulations Section -->
<section class="px-4 lg:px-28 py-24 bg-white"> <section id="regulations" 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="w-full max-w-7xl 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 --> <!-- 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"> <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 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 --> <!-- Regulation Items -->
<div class="flex flex-col justify-start items-start gap-4 w-full"> <div class="flex flex-col justify-start items-start gap-6 w-full">
<!-- Regulation 1 --> <h2 class="text-gray-900 text-3xl lg:text-4xl font-bold font-jakarta leading-10">
<div class="p-6 bg-white rounded-2xl border border-gray-200 flex flex-col justify-start items-start gap-6 w-full"> Regulasi Terkait
<div class="flex justify-start items-start gap-6 w-full"> </h2>
<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> <div class="bg-base-100 border-base-300 collapse border collapse-arrow">
<p class="text-gray-500 text-base font-normal font-jakarta leading-normal"> <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 Perturan Menteri Lingkungan Hidup Nomor 14 Tahun 2021
</p> </p>
</div> </div>
<div class="h-14 rounded-full flex flex-col justify-center items-center"> <div class="collapse-content peer-checked:bg-neutral peer-checked:text-neutral-content">
<svg class="w-8 h-8 text-gray-500" fill="currentColor" viewBox="0 0 24 24"> <p>Peraturan Gubernur Nomor 77 Tahun 2020 mengatur tentang pengelolaan sampah dari
<path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/> sumbernya melalui peran aktif warga di tingkat RT dan RW, dengan tujuan mengurangi
</svg> volume sampah yang masuk ke TPA.</p>
</div> <div class="flex flex-row gap-3 w-full pt-4">
</div> <button type="button" class="btn btn-outline rounded-full shadow-none">
<p class="text-slate-700 text-base font-normal font-jakarta leading-normal w-full"> <i class="ph-fill ph-calendar-dots text-lg me-1"></i>
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. Ditetapkan: 13 Juli 2020
</p> </button>
<div class="flex justify-start items-start gap-2 w-full flex-wrap"> <button type="button" class="btn btn-outline rounded-full shadow-none">
<div class="px-3 py-2 bg-gray-300 rounded-3xl flex justify-center items-center gap-2"> <i class="ph-fill ph-check-circle text-lg me-1"></i>
<div class="w-4 h-4 relative"> Status: Berlaku
<div class="w-3 h-3 absolute top-[1px] left-[2px] bg-green-800 rounded-full"></div> </button>
</div> <a class="btn btn-outline shadow-none rounded-full" href="#">
<span class="text-green-800 text-sm font-bold font-jakarta">Ditetapkan: 13 Juli 2020</span> <i class="ph-fill ph-download-simple text-lg me-1"></i>
</div> Unduh PDF
<div class="px-3 py-2 bg-gray-300 rounded-3xl flex justify-center items-center gap-2"> </a>
<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> </div>
</div> </div>
<!-- Regulation 2 --> <div class="bg-base-100 border-base-300 collapse collapse-close border collapse-arrow">
<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="collapse-title peer-checked:bg-neutral peer-checked:text-neutral-content">
<div class="flex justify-start items-start gap-6 w-full"> <span class="font-bold text-xl">Pergub DKI Jakarta No. 77/2020</span>
<div class="flex-1 flex flex-col justify-start items-start gap-0.5"> <p class="text-gray-500 peer-checked:text-white">
<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 Peraturan Gubernur Provinsi KDI Jakarta Nomor 77 Tahun 2020
</p> </p>
</div> </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>
<!-- Regulation 3 --> <div class="bg-base-100 border-base-300 collapse collapse-close border collapse-arrow">
<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="collapse-title peer-checked:bg-neutral peer-checked:text-neutral-content">
<div class="flex justify-start items-start gap-6 w-full"> <span class="font-bold text-xl">Pergub DKI Jakarta No 33/2021</span>
<div class="flex-1 flex flex-col justify-start items-start gap-0.5"> <p class="text-gray-500 peer-checked:text-white">
<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 Peraturan Gubernur Provinsi KDI Jakarta Nomor 33 Tahun 2021
</p> </p>
</div> </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>
</div> </div>
<!-- Image Section --> <!-- Cards -->
<div class="w-full lg:w-[592px] h-[400px] lg:h-[592px] relative"> <div class="grid grid-cols-1 lg:grid-cols-3 gap-10 mt-10">
<div class="w-60 h-[552px] absolute top-0 right-0 bg-green-800"></div> <!-- Kumpulkan -->
<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="card bg-base-100 image-full size-96 shadow-sm">
<div class="w-48 h-48 absolute bottom-[176px] left-[30px] bg-white shadow-lg flex items-center justify-center"> <figure>
<img class="w-32 h-32" src="/images/logo.png" alt="Regulation Logo" /> <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>
</div> </div>

BIN
wwwroot/images/regulasi/kelola.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
wwwroot/images/regulasi/kumpulkan.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 542 KiB

BIN
wwwroot/images/regulasi/pilah.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 496 KiB