refactor (landing): regulation section
parent
cefa285009
commit
b242848f10
|
|
@ -297,109 +297,115 @@
|
|||
</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>
|
||||
<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="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 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>
|
||||
|
||||
<!-- 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" />
|
||||
<!-- 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>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 542 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 496 KiB |
Loading…
Reference in New Issue