From 7fb4d52b86598a8f6c1710b7dea9c4ed902ef37d Mon Sep 17 00:00:00 2001
From: ilhamwara <ilhamwara@gmail.com>
Date: Wed, 11 Jun 2025 15:22:36 +0700
Subject: [PATCH] update

---
 resources/views/index.blade.php       | 292 +++++++++++++++-----------
 resources/views/layouts/app.blade.php |   4 +-
 2 files changed, 166 insertions(+), 130 deletions(-)

diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index 5d5deb1..05ed532 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -1,26 +1,28 @@
 @extends('layouts.app')
 @section('content')
-<div class="relative flex flex-col justify-center items-center mx-auto gap-10 bg-gradient-to-r from-cyan-500 to-success mix-blend-multiply blur-3xl  inset-y-0 w-full -z-10" style='min-height:60vh;'>
-    <div>
+<div class="flex flex-col justify-center items-center mx-auto gap-10 bg-gradient-to-r from-cyan-500 to-success mix-blend-multiply blur-3xl  inset-y-0 w-full -z-10" style='min-height:60vh;'>
+    <div class="p-3">
         <h1 class="text-white text-center bold text-4xl">Pencarian Data Menjadi Lebih Sederhana</h1>
     </div>
-    <form action="">
-        <div class="flex flex-row justify-between items-center gap-10 rounded-full bg-white p-3">
-            <div>
-                <select name="" id="" class="form-select border-none">
-                    <option value="">All</option>
-                </select>
+    <div class="px-3">
+        <form action="">
+            <div class="flex flex-row justify-between items-center gap-10 rounded-full bg-white p-3">
+                <div>
+                    <select name="" id="" class="form-select border-none">
+                        <option value="">All</option>
+                    </select>
+                </div>
+                <div class="">
+                    <input type="text" class="px-6 form-input border-none" placeholder="Data apa yang ingin anda cari..">
+                </div>
+                <div class="pl-3">
+                    <button class="btn"><i class="ri-search-line"></i></button>
+                </div>
             </div>
-            <div class="">
-                <input type="text" class="px-6 form-input border-none" placeholder="Data apa yang ingin anda cari..">
-            </div>
-            <div class="pl-3">
-                <button class="btn"><i class="ri-search-line"></i></button>
-            </div>
-        </div>
-    </form>
-    <div class="relative container mx-auto">
-        <div class="flex flex-row -z-10  w-full gap-6 justify-center items-center">
+        </form>
+    </div>
+    <div class="relative container mx-auto p-3">
+        <div class="grid grid-cols-1 lg:flex -z-10  w-full gap-6 justify-center items-center">
             <div class="card rounded-full p-3">
                 <div class="flex flex-row items-center gap-3">
                     <div class="p-3 ">
@@ -55,139 +57,150 @@
 <div class="container mx-auto">
     <div class="px-6 py-10">
         <div class="grid md:grid-cols-3 xl:grid-cols-4 gap-6 justify-center items-center">
-            
-            <div class="card px-6 py-3 rounded-full">
-                <div class="flex flex-row items-center gap-2">
-                    <div class="p-2 ">
-                        <i class="ri-team-line text-xl"></i>
-                    </div>
-                    <div class="">
-                        <h5 class=" text-md">Pekerjaan Umum</h5>
+            <a href="">
+                <div class="card px-6 py-3 rounded-full">
+                    <div class="flex flex-row items-center gap-2">
+                        <div class="p-2 ">
+                            <i class="ri-team-line text-xl"></i>
+                        </div>
+                        <div class="">
+                            <h5 class=" text-md">Pekerjaan Umum</h5>
+                        </div>
                     </div>
                 </div>
-            </div>
-
-            <div class="card px-6 py-3 rounded-full">
-                <div class="flex flex-row items-center gap-2">
-                    <div class="p-2 ">
-                        <i class="ri-earth-line text-xl"></i>
-                    </div>
-                    <div class="">
-                        <h5 class=" text-md">Kehutanan, Pertanian & Ketahanan Pangan</h5>
+            </a>
+            <a href="">
+                <div class="card px-6 py-3 rounded-full">
+                    <div class="flex flex-row items-center gap-2">
+                        <div class="p-2 ">
+                            <i class="ri-earth-line text-xl"></i>
+                        </div>
+                        <div class="">
+                            <h5 class=" text-md">Kehutanan, Pertanian & Ketahanan Pangan</h5>
+                        </div>
                     </div>
                 </div>
-            </div>
-
-            <div class="card px-6 py-3 rounded-full">
-                <div class="flex flex-row items-center gap-2">
-                    <div class="p-2 ">
-                        <i class="ri-book-3-line text-xl"></i>
-                    </div>
-                    <div class="">
-                        <h5 class=" text-md">Perpustakaan & Arsip</h5>
+            </a>
+            <a href="">
+                <div class="card px-6 py-3 rounded-full">
+                    <div class="flex flex-row items-center gap-2">
+                        <div class="p-2 ">
+                            <i class="ri-book-3-line text-xl"></i>
+                        </div>
+                        <div class="">
+                            <h5 class=" text-md">Perpustakaan & Arsip</h5>
+                        </div>
                     </div>
                 </div>
-            </div>
-
-            <div class="card px-6 py-3 rounded-full">
-                <div class="flex flex-row items-center gap-2">
-                    <div class="p-2 ">
-                        <i class="ri-building-4-line text-xl"></i>
-                    </div>
-                    <div class="">
-                        <h5 class=" text-md">Penataan Kota</h5>
+            </a>
+            <a href="">
+                <div class="card px-6 py-3 rounded-full">
+                    <div class="flex flex-row items-center gap-2">
+                        <div class="p-2 ">
+                            <i class="ri-building-4-line text-xl"></i>
+                        </div>
+                        <div class="">
+                            <h5 class=" text-md">Penataan Kota</h5>
+                        </div>
                     </div>
                 </div>
-            </div>
-
-            <div class="card px-6 py-3 rounded-full">
-                <div class="flex flex-row items-center gap-2">
-                    <div class="p-2 ">
-                        <i class="ri-riding-line text-xl"></i>
-                    </div>
-                    <div class="">
-                        <h5 class=" text-md">Olahraga & Pemuda</h5>
+            </a>
+            <a href="">
+                <div class="card px-6 py-3 rounded-full">
+                    <div class="flex flex-row items-center gap-2">
+                        <div class="p-2 ">
+                            <i class="ri-riding-line text-xl"></i>
+                        </div>
+                        <div class="">
+                            <h5 class=" text-md">Olahraga & Pemuda</h5>
+                        </div>
                     </div>
                 </div>
-            </div>
-
-            <div class="card px-6 py-3 rounded-full">
-                <div class="flex flex-row items-center gap-2">
-                    <div class="p-2 ">
-                        <i class="ri-line-chart-line text-xl"></i>
-                    </div>
-                    <div class="">
-                        <h5 class=" text-md">Penanaman Modal</h5>
+            </a>
+            <a href="">
+                <div class="card px-6 py-3 rounded-full">
+                    <div class="flex flex-row items-center gap-2">
+                        <div class="p-2 ">
+                            <i class="ri-line-chart-line text-xl"></i>
+                        </div>
+                        <div class="">
+                            <h5 class=" text-md">Penanaman Modal</h5>
+                        </div>
                     </div>
                 </div>
-            </div>
-
-            <div class="card px-6 py-3 rounded-full">
-                <div class="flex flex-row items-center gap-2">
-                    <div class="p-2 ">
-                        <i class="ri-home-8-line text-xl"></i>
-                    </div>
-                    <div class="">
-                        <h5 class=" text-md">Perumahan dan Kawasan Permikuman</h5>
+            </a>
+            <a href="">
+                <div class="card px-6 py-3 rounded-full">
+                    <div class="flex flex-row items-center gap-2">
+                        <div class="p-2 ">
+                            <i class="ri-home-8-line text-xl"></i>
+                        </div>
+                        <div class="">
+                            <h5 class=" text-md">Perumahan dan Kawasan Permikuman</h5>
+                        </div>
                     </div>
                 </div>
-            </div>
-
-            <div class="card px-6 py-3 rounded-full">
-                <div class="flex flex-row items-center gap-2">
-                    <div class="p-2 ">
-                        <i class="ri-home-office-line text-xl"></i>
-                    </div>
-                    <div class="">
-                        <h5 class=" text-md">Pemerintahan</h5>
+            </a>
+            <a href="">
+                <div class="card px-6 py-3 rounded-full">
+                    <div class="flex flex-row items-center gap-2">
+                        <div class="p-2 ">
+                            <i class="ri-home-office-line text-xl"></i>
+                        </div>
+                        <div class="">
+                            <h5 class=" text-md">Pemerintahan</h5>
+                        </div>
                     </div>
                 </div>
-            </div>
-
-            <div class="card px-6 py-3 rounded-full">
-                <div class="flex flex-row items-center gap-2">
-                    <div class="p-2 ">
-                        <i class="ri-shake-hands-line text-xl"></i>
-                    </div>
-                    <div class="">
-                        <h5 class=" text-md">Kesatuan Bangsa & Politik</h5>
+            </a>
+            <a href="">
+                <div class="card px-6 py-3 rounded-full">
+                    <div class="flex flex-row items-center gap-2">
+                        <div class="p-2 ">
+                            <i class="ri-shake-hands-line text-xl"></i>
+                        </div>
+                        <div class="">
+                            <h5 class=" text-md">Kesatuan Bangsa & Politik</h5>
+                        </div>
                     </div>
                 </div>
-            </div>
-
-            <div class="card px-6 py-3 rounded-full">
-                <div class="flex flex-row items-center gap-2">
-                    <div class="p-2 ">
-                        <i class="ri-group-line text-xl"></i>
-                    </div>
-                    <div class="">
-                        <h5 class=" text-md">Kependudukan</h5>
+            </a>
+            <a href="">
+                <div class="card px-6 py-3 rounded-full">
+                    <div class="flex flex-row items-center gap-2">
+                        <div class="p-2 ">
+                            <i class="ri-group-line text-xl"></i>
+                        </div>
+                        <div class="">
+                            <h5 class=" text-md">Kependudukan</h5>
+                        </div>
                     </div>
                 </div>
-            </div>
-
-            <div class="card px-6 py-3 rounded-full">
-                <div class="flex flex-row items-center gap-2">
-                    <div class="p-2 ">
-                        <i class="ri-plant-line text-xl"></i>
-                    </div>
-                    <div class="">
-                        <h5 class=" text-md">Pertamanan & Pemakaman</h5>
+            </a>
+            <a href="">
+                <div class="card px-6 py-3 rounded-full">
+                    <div class="flex flex-row items-center gap-2">
+                        <div class="p-2 ">
+                            <i class="ri-plant-line text-xl"></i>
+                        </div>
+                        <div class="">
+                            <h5 class=" text-md">Pertamanan & Pemakaman</h5>
+                        </div>
                     </div>
                 </div>
-            </div>
-
-            <div class="card px-6 py-3 rounded-full">
-                <div class="flex flex-row items-center gap-2">
-                    <div class="p-2 ">
-                        <i class="ri-coins-line text-xl"></i>
-                    </div>
-                    <div class="">
-                        <h5 class=" text-md">Perekonomian</h5>
+            </a>
+            <a href="">
+                <div class="card px-6 py-3 rounded-full">
+                    <div class="flex flex-row items-center gap-2">
+                        <div class="p-2 ">
+                            <i class="ri-coins-line text-xl"></i>
+                        </div>
+                        <div class="">
+                            <h5 class=" text-md">Perekonomian</h5>
+                        </div>
                     </div>
                 </div>
-            </div>
-            
+            </a>
         </div>
     </div>
 </div>
@@ -199,7 +212,30 @@
                 <h5 class="bold text-2xl">Dataset Terbaru</h5>
             </div>
             <div>
-                <div class="flex flex-row gap-3">
+                <div class="grid md:grid-cols-2 lg:grid-cols-4 grid-cols-1 gap-3">
+
+                    <div class="card p-6">
+                        <div class="flex flex-col gap-2">
+                            <div class="flex flex-row gap-3">
+                                <div>
+                                    <img src="https://lingkunganhidup.jakarta.go.id/dist/images/logo/logo-dlh-big.png" width="80" alt="">
+                                </div>
+                                <div class="flex flex-col gap-3">
+                                    <h4 class="font-bold text-md">Data Harga dan Pasokan Pangan Jakarta</h4>
+                                    <h4 class="text-xs">Dinas Lingkungan Hidup Provinsi DKI</h4>
+                                </div>
+                            </div>
+                            <div>
+                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae architecto et adipisci, laborum odit deserunt fuga asperiores sed sint! Officiis magni omnis neque.</p>
+                            </div>
+                            <div>
+                                <p><i class="ri-calendar-line"></i>&nbsp;11-09-2025</p>
+                            </div>
+                            <div>
+                                <a href="" class="btn bg-primary mt-4 text-white">Lihat Selengkapnya&nbsp;<i class="ri-arrow-right-line"></i></a>
+                            </div>
+                        </div>
+                    </div>
 
                     <div class="card p-6">
                         <div class="flex flex-col gap-2">
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 26ef622..59b0bd9 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -47,7 +47,7 @@
     
     @yield('content')
 
-    <div class="p-12 text-white" style="background:#309898;">
+    <div class="p-12 text-white bg-gradient-to-r from-cyan-500 to-success mix-blend-multiply blur-3xl">
         <div class="container">
             <div class="flex flex-row justify-between items-center gap-6 mb-5">
                 <div>
@@ -84,7 +84,7 @@
             </div>
         </div>
     </div>
-    <div class="flex flex-row items-center justify-center pb-4 text-white bg-primary" style="background:#309898;">
+    <div class="flex flex-row items-center text-center justify-center p-4 text-white bg-gradient-to-r from-cyan-500 to-success mix-blend-multiply blur-3xl">
         <p>Copyright © {{date('Y')}} Dinas Lingkungan Hidup Provinsi DKI Jakarta. All Right Reserved</p>
     </div>