fix (landing): indent helpdesk section

main
Yuri Dimas 2025-12-02 00:47:59 +07:00
parent 4f71b05c28
commit 26eb2f1cef
No known key found for this signature in database
GPG Key ID: 9FD7E44BC294C68C
1 changed files with 92 additions and 46 deletions

View File

@ -485,14 +485,16 @@
</section> </section>
<!-- Help Desk Section --> <!-- Help Desk Section -->
<section class="px-4 lg:px-28 py-24 bg-gray-50"> <section id="helpdesk" 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="w-full max-w-7xl 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"> <div class="flex flex-col lg:flex-row justify-start items-center gap-20 w-full">
<!-- Image Section --> <!-- Image Section -->
<div class="w-full lg:w-[592px] h-[400px] lg:h-[592px] relative"> <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> <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" /> <img class="w-80 h-80 lg:w-96 lg:h-96 absolute bottom-12 right-20 rounded-full object-cover"
<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"> 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" /> <img class="w-36 h-36" src="/images/logo.png" alt="Help Desk Logo" />
</div> </div>
</div> </div>
@ -505,56 +507,79 @@
<div class="w-4 h-4 relative"> <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 class="w-3 h-3 absolute top-[1.5px] left-[1.5px] bg-green-800 rounded-full"></div>
</div> </div>
<div class="text-green-800 text-base font-bold font-jakarta">Ada kendala terkait Bank Sampah?</div> <div class="text-green-800 text-base font-bold font-jakarta">Ada kendala terkait Bank Sampah?
</div>
</div> </div>
<div class="flex flex-col justify-start items-start gap-6 w-full"> <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> <h2 class="text-gray-900 text-3xl lg:text-4xl font-bold font-jakarta leading-10">Hubungi Help
Desk kami</h2>
<!-- Contact Grid --> <!-- Contact Grid -->
<div class="flex flex-col lg:flex-row justify-start items-start gap-6 w-full"> <div class="flex flex-col lg:flex-row justify-start items-start gap-6 w-full">
<!-- Left Column --> <!-- Left Column -->
<div class="flex-1 flex flex-col justify-start items-start gap-4"> <div class="flex-1 flex flex-col justify-start items-start gap-4">
<!-- Admin 1 --> <!-- 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="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 justify-start items-center gap-6 w-full">
<div class="flex-1 flex flex-col justify-start items-start gap-0.5"> <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> <h3 class="text-gray-900 text-xl font-bold font-jakarta leading-loose">Admin
<p class="text-gray-500 text-base font-normal font-jakarta leading-normal">085283788234</p> 1</h3>
<p class="text-gray-500 text-base font-normal font-jakarta leading-normal">
085283788234</p>
</div> </div>
<button class="p-3 bg-gray-300 hover:bg-gray-400 rounded-full flex justify-center items-center gap-2 transition-colors"> <button
<svg class="w-6 h-6 text-green-800" fill="none" stroke="currentColor" viewBox="0 0 24 24"> class="p-3 bg-gray-300 hover:bg-gray-400 rounded-full flex justify-center items-center gap-2 transition-colors">
<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 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> </svg>
</button> </button>
</div> </div>
</div> </div>
<!-- Admin 3 --> <!-- 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="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 justify-start items-center gap-6 w-full">
<div class="flex-1 flex flex-col justify-start items-start gap-0.5"> <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> <h3 class="text-gray-900 text-xl font-bold font-jakarta leading-loose">Admin
<p class="text-gray-500 text-base font-normal font-jakarta leading-normal">085283788234</p> 3</h3>
<p class="text-gray-500 text-base font-normal font-jakarta leading-normal">
085283788234</p>
</div> </div>
<button class="p-3 bg-gray-300 hover:bg-gray-400 rounded-full flex justify-center items-center gap-2 transition-colors"> <button
<svg class="w-6 h-6 text-green-800" fill="none" stroke="currentColor" viewBox="0 0 24 24"> class="p-3 bg-gray-300 hover:bg-gray-400 rounded-full flex justify-center items-center gap-2 transition-colors">
<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 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> </svg>
</button> </button>
</div> </div>
</div> </div>
<!-- Admin 5 --> <!-- 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="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 justify-start items-center gap-6 w-full">
<div class="flex-1 flex flex-col justify-start items-start gap-0.5"> <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> <h3 class="text-gray-900 text-xl font-bold font-jakarta leading-loose">Admin
<p class="text-gray-500 text-base font-normal font-jakarta leading-normal">085283788234</p> 5</h3>
<p class="text-gray-500 text-base font-normal font-jakarta leading-normal">
085283788234</p>
</div> </div>
<button class="p-3 bg-gray-300 hover:bg-gray-400 rounded-full flex justify-center items-center gap-2 transition-colors"> <button
<svg class="w-6 h-6 text-green-800" fill="none" stroke="currentColor" viewBox="0 0 24 24"> class="p-3 bg-gray-300 hover:bg-gray-400 rounded-full flex justify-center items-center gap-2 transition-colors">
<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 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> </svg>
</button> </button>
</div> </div>
@ -564,45 +589,66 @@
<!-- Right Column --> <!-- Right Column -->
<div class="flex-1 flex flex-col justify-start items-start gap-4"> <div class="flex-1 flex flex-col justify-start items-start gap-4">
<!-- Admin 2 --> <!-- 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="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 justify-start items-center gap-6 w-full">
<div class="flex-1 flex flex-col justify-start items-start gap-0.5"> <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> <h3 class="text-gray-900 text-xl font-bold font-jakarta leading-loose">Admin
<p class="text-gray-500 text-base font-normal font-jakarta leading-normal">085283788234</p> 2</h3>
<p class="text-gray-500 text-base font-normal font-jakarta leading-normal">
085283788234</p>
</div> </div>
<button class="p-3 bg-gray-300 hover:bg-gray-400 rounded-full flex justify-center items-center gap-2 transition-colors"> <button
<svg class="w-6 h-6 text-green-800" fill="none" stroke="currentColor" viewBox="0 0 24 24"> class="p-3 bg-gray-300 hover:bg-gray-400 rounded-full flex justify-center items-center gap-2 transition-colors">
<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 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> </svg>
</button> </button>
</div> </div>
</div> </div>
<!-- Admin 4 --> <!-- 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="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 justify-start items-center gap-6 w-full">
<div class="flex-1 flex flex-col justify-start items-start gap-0.5"> <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> <h3 class="text-gray-900 text-xl font-bold font-jakarta leading-loose">Admin
<p class="text-gray-500 text-base font-normal font-jakarta leading-normal">085283788234</p> 4</h3>
<p class="text-gray-500 text-base font-normal font-jakarta leading-normal">
085283788234</p>
</div> </div>
<button class="p-3 bg-gray-300 hover:bg-gray-400 rounded-full flex justify-center items-center gap-2 transition-colors"> <button
<svg class="w-6 h-6 text-green-800" fill="none" stroke="currentColor" viewBox="0 0 24 24"> class="p-3 bg-gray-300 hover:bg-gray-400 rounded-full flex justify-center items-center gap-2 transition-colors">
<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 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> </svg>
</button> </button>
</div> </div>
</div> </div>
<!-- Admin 6 --> <!-- 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="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 justify-start items-center gap-6 w-full">
<div class="flex-1 flex flex-col justify-start items-start gap-0.5"> <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> <h3 class="text-gray-900 text-xl font-bold font-jakarta leading-loose">Admin
<p class="text-gray-500 text-base font-normal font-jakarta leading-normal">085283788234</p> 6</h3>
<p class="text-gray-500 text-base font-normal font-jakarta leading-normal">
085283788234</p>
</div> </div>
<button class="p-3 bg-gray-300 hover:bg-gray-400 rounded-full flex justify-center items-center gap-2 transition-colors"> <button
<svg class="w-6 h-6 text-green-800" fill="none" stroke="currentColor" viewBox="0 0 24 24"> class="p-3 bg-gray-300 hover:bg-gray-400 rounded-full flex justify-center items-center gap-2 transition-colors">
<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 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> </svg>
</button> </button>
</div> </div>
@ -615,10 +661,10 @@
<!-- Additional Contact Info --> <!-- Additional Contact Info -->
<div class="w-full"> <div class="w-full">
<p class="text-slate-700 text-base font-jakarta"> <p class="text-slate-700 text-base font-jakarta">
<span class="font-semibold">Atau dapat langsung menghubungi:</span><br/> <span class="font-semibold">Atau dapat langsung menghubungi:</span><br />
<span class="font-normal">Bidang Pengurangan dan Penanganan Sampah<br/> <span class="font-normal">Bidang Pengurangan dan Penanganan Sampah<br />
Dinas Lingkungan Hidup Provinsi DKI Jakarta<br/> Dinas Lingkungan Hidup Provinsi DKI Jakarta<br />
Jl. Mandala V Cililitan Kramatjati Jakarta Timur</span> Jl. Mandala V Cililitan Kramatjati Jakarta Timur</span>
</p> </p>
</div> </div>
</div> </div>