From 808301b1c5f7647b869b9ae99ee1389dbf27ed62 Mon Sep 17 00:00:00 2001
From: Kevin Hendrawan <projectkevin97@gmail.com>
Date: Sun, 7 Dec 2025 23:56:08 +0700
Subject: [PATCH] feat(DetailPublikasi): add responsive

---
 Views/Berita/Detail.cshtml | 127 ++++++++++++++++++++++---------------
 1 file changed, 76 insertions(+), 51 deletions(-)

diff --git a/Views/Berita/Detail.cshtml b/Views/Berita/Detail.cshtml
index f2533ce..124b7bf 100644
--- a/Views/Berita/Detail.cshtml
+++ b/Views/Berita/Detail.cshtml
@@ -27,15 +27,27 @@
     </style>
 }
 <!-- Hero Section -->
-<section id="home" class="relative bg-white pt-20 pb-72 px-28 mt-28">
+<section id="home" class="relative bg-white pt-20 pb-20 px-4 sm:px-10 lg:px-28 mt-10 sm:mt-20">
     <div class="flex flex-col gap-20">
-        <div class="flex flex-col gap-4 justfy-center px-28 text-center">
-            <div class="text-green-600 text-lg font-jakarta text-center">Berita</div>
-            <h2 class="font-semibold font-jakarta text-5xl leading-[60px]">Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH Luncurkan Platform</h2>
-            <span class="text-gray-400 text-lg">21 November 2024 | 14:53 WIB</span>
-        </div> 
+       <div class="flex flex-col gap-4 justify-center 
+            px-4 sm:px-10 lg:px-28 
+            text-center">
+            
+            <div class="text-green-600 text-base sm:text-lg font-jakarta">Berita</div>
 
-        <img class="w-full mx-auto" src="/images/publikasi/image-03.png"
+            <h2 class="font-semibold font-jakarta 
+                    text-2xl sm:text-4xl lg:text-5xl 
+                    leading-snug sm:leading-tight lg:leading-[60px]">
+                Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi,<br/>
+                DLH Luncurkan Platform
+            </h2>
+
+            <span class="text-gray-400 text-sm sm:text-lg">
+                21 November 2024 | 14:53 WIB
+            </span>
+        </div>
+
+        <img class="w-full max-w-5xl mx-auto rounded-lg" src="/images/publikasi/image-03.png"
                                 alt="Article Image" />
 
         <div class="flex flex-col gap-8">
@@ -83,54 +95,67 @@
         </div>
 
         <div class="flex flex-col gap-10">
-            <div class="font-bold text-4xl">Berita Lainnya</div>
-            <div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
-                <div class="card bg-base-100 w-96 h-80 overflow-hidden">
-                    <figure class="h-40 overflow-hidden">
-                        <img
-                            src="/images/publikasi/image-03.png"
-                            alt="Article image"
-                            class="w-full h-full object-cover"
-                        />
-                    </figure>
 
-                    <div class="card-body p-4">
-                        <h2 class="card-title line-clamp-2">
-                            Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH Luncurkan Platform
-                        </h2>
-                    </div>
-                </div>
-                <div class="card bg-base-100 w-96 h-80 overflow-hidden">
-                    <figure class="h-40 overflow-hidden">
-                        <img
-                            src="/images/publikasi/image-03.png"
-                            alt="Article image"
-                            class="w-full h-full object-cover"
-                        />
-                    </figure>
+    <!-- Title -->
+    <div class="font-bold text-2xl sm:text-3xl lg:text-4xl">
+        Berita Lainnya
+    </div>
 
-                    <div class="card-body p-4">
-                        <h2 class="card-title line-clamp-2">
-                            Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH Luncurkan Platform
-                        </h2>
-                    </div>
-                </div>
-                <div class="card bg-base-100 w-96 h-80 overflow-hidden">
-                    <figure class="h-40 overflow-hidden">
-                        <img
-                            src="/images/publikasi/image-03.png"
-                            alt="Article image"
-                            class="w-full h-full object-cover"
-                        />
-                    </figure>
+    <!-- Grid -->
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">
+        <!-- Card 1 -->
+        <div class="card bg-base-100 w-full h-auto overflow-hidden rounded-xl shadow-sm">
+            <figure class="h-48 sm:h-52 lg:h-56 overflow-hidden">
+                <img
+                    src="/images/publikasi/image-03.png"
+                    alt="Article image"
+                    class="w-full h-full object-cover"
+                />
+            </figure>
 
-                    <div class="card-body p-4">
-                        <h2 class="card-title line-clamp-2">
-                            Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH Luncurkan Platform
-                        </h2>
-                    </div>
-                </div>
+            <div class="card-body p-4">
+                <h2 class="card-title text-lg sm:text-xl line-clamp-2">
+                    Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH Luncurkan Platform
+                </h2>
             </div>
         </div>
+
+        <!-- Card 2 -->
+        <div class="card bg-base-100 w-full h-auto overflow-hidden rounded-xl shadow-sm">
+            <figure class="h-48 sm:h-52 lg:h-56 overflow-hidden">
+                <img
+                    src="/images/publikasi/image-03.png"
+                    alt="Article image"
+                    class="w-full h-full object-cover"
+                />
+            </figure>
+
+            <div class="card-body p-4">
+                <h2 class="card-title text-lg sm:text-xl line-clamp-2">
+                    Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH Luncurkan Platform
+                </h2>
+            </div>
+        </div>
+
+        <!-- Card 3 -->
+        <div class="card bg-base-100 w-full h-auto overflow-hidden rounded-xl shadow-sm">
+            <figure class="h-48 sm:h-52 lg:h-56 overflow-hidden">
+                <img
+                    src="/images/publikasi/image-03.png"
+                    alt="Article image"
+                    class="w-full h-full object-cover"
+                />
+            </figure>
+
+            <div class="card-body p-4">
+                <h2 class="card-title text-lg sm:text-xl line-clamp-2">
+                    Permudah Warga Jakarta Jadi Nasabah Bank Sampah untuk Pembebasan Retribusi, DLH Luncurkan Platform
+                </h2>
+            </div>
+        </div>
+
+    </div>
+        </div>
+
     </div>
 </section>