fix (landing): indent helpdesk section
parent
4f71b05c28
commit
26eb2f1cef
|
|
@ -485,14 +485,16 @@
|
|||
</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">
|
||||
<section id="helpdesk" class="px-4 lg:px-28 py-24 bg-gray-50">
|
||||
<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">
|
||||
<!-- 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-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>
|
||||
|
|
@ -505,56 +507,79 @@
|
|||
<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 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>
|
||||
<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="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>
|
||||
<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>
|
||||
<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="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>
|
||||
<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>
|
||||
<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="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>
|
||||
<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>
|
||||
<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>
|
||||
|
|
@ -564,45 +589,66 @@
|
|||
<!-- 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="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>
|
||||
<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>
|
||||
<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="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>
|
||||
<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>
|
||||
<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="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>
|
||||
<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>
|
||||
<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>
|
||||
|
|
@ -615,10 +661,10 @@
|
|||
<!-- 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>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue