From 836c84d699207d4166b81c318b6256c6eb3600e3 Mon Sep 17 00:00:00 2001
From: Anang Yusman <anangyusman23@gmail.com>
Date: Fri, 21 Nov 2025 01:36:28 +0800
Subject: [PATCH] update landing

---
 .gitlab-ci.yml                                |   5 +-
 app/page.tsx                                  |   4 +
 components/landing-page/development.tsx       | 233 +++---------
 components/landing-page/footer.tsx            |  85 +++--
 components/landing-page/header.tsx            | 248 +++++++++----
 components/landing-page/health.tsx            | 335 +++++++-----------
 components/landing-page/latest-news.tsx       | 164 +++------
 components/landing-page/navbar.tsx            | 236 ++++++------
 components/landing-page/opinion-news.tsx      | 125 +++++++
 components/landing-page/youtube-selection.tsx | 151 ++++++++
 components/landing-page/youtube.tsx           | 193 ++++++++++
 11 files changed, 1049 insertions(+), 730 deletions(-)
 create mode 100644 components/landing-page/opinion-news.tsx
 create mode 100644 components/landing-page/youtube-selection.tsx
 create mode 100644 components/landing-page/youtube.tsx

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 345bc4a..fb4c956 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -7,9 +7,10 @@ build-dev:
   when: on_success
   only:
     - main
-  image: docker:stable
+  image:
+    name: docker:25.0.3-cli
   services:
-    - name: docker:dind
+    - name: docker:25.0.3-dind
       command: ["--insecure-registry=103.82.242.92:8900"]
   script:
     - docker logout
diff --git a/app/page.tsx b/app/page.tsx
index dab2afd..c4e5205 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,6 +4,8 @@ import Header from "@/components/landing-page/header";
 import Health from "@/components/landing-page/health";
 import LatestNews from "@/components/landing-page/latest-news";
 import Navbar from "@/components/landing-page/navbar";
+import OpinionNews from "@/components/landing-page/opinion-news";
+import YouTubeSection from "@/components/landing-page/youtube-selection";
 
 export default function Home() {
   return (
@@ -15,7 +17,9 @@ export default function Home() {
       </div>
       <LatestNews />
       <Development />
+      <OpinionNews />
       <Health />
+      <YouTubeSection />
       <Footer />
     </div>
   );
diff --git a/components/landing-page/development.tsx b/components/landing-page/development.tsx
index 1e17434..8bca529 100644
--- a/components/landing-page/development.tsx
+++ b/components/landing-page/development.tsx
@@ -67,183 +67,68 @@ export default function Development() {
 
   return (
     <section className="max-w-7xl mx-auto px-4">
-      <h2 className="text-lg font-bold text-white bg-red-600 inline-block px-4 py-2 border-b-2">
-        PEMBANGUNAN
-      </h2>
-      <h2 className="border-b-2 mb-4"></h2>
+      <div className="bg-white ">
+        <div className="mb-4">
+          <h2 className="text-xl font-black text-[#000]">JAGA NEGERI</h2>
 
-      {articles.length === 0 ? (
-        <p className="text-center text-gray-500 py-10">Memuat berita...</p>
-      ) : (
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          {/* === LEFT COLUMN === */}
-          {leftMain && (
-            <div className="w-full">
-              <Link href={`/details/${leftMain.slug}`}>
-                <div className="relative w-full aspect-video mb-2">
-                  <Image
-                    src={leftMain.thumbnailUrl || "/placeholder.jpg"}
-                    alt={leftMain.title}
-                    fill
-                    className="object-cover"
-                  />
-                  <span className="absolute bottom-2 left-2 bg-yellow-400 text-black text-xs px-2 py-1">
-                    {leftMain.categories?.[0]?.title}
-                  </span>
-                </div>
-                <h3 className="font-semibold text-base mb-2">
-                  {leftMain.title}
-                </h3>
-                <p className="text-xs text-[#999999] mb-2 flex items-center gap-2">
-                  by {leftMain.customCreatorName || leftMain.createdByName} ·{" "}
-                  {formatDate(leftMain.createdAt)}
-                </p>
-                <p className="text-[#999999] text-sm font-serif mb-8 line-clamp-3">
-                  {leftMain.description}
-                </p>
-              </Link>
-              <div className="space-y-8">
-                {leftList.map((item) => (
-                  <div key={item.id}>
-                    <Link className="flex gap-3" href={`/details/${item.slug}`}>
-                      <div className="relative w-[120px] h-[86px] shrink-0">
-                        <Image
-                          src={item.thumbnailUrl || "/placeholder.jpg"}
-                          alt={item.title}
-                          fill
-                          className="object-cover"
-                        />
-                      </div>
-                      <div>
-                        <h4 className="text-sm font-semibold mb-3 line-clamp-2">
-                          {item.title}
-                        </h4>
-                        <p className="text-xs text-gray-500">
-                          {formatDate(item.createdAt)}
-                        </p>
-                      </div>
-                    </Link>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* === CENTER COLUMN === */}
-          {centerMain && (
-            <div className="w-full">
-              <Link href={`/details/${centerMain.slug}`}>
-                <div className="relative w-full aspect-video mb-2">
-                  <Image
-                    src={centerMain.thumbnailUrl || "/placeholder.jpg"}
-                    alt={centerMain.title}
-                    fill
-                    className="object-cover"
-                  />
-                  <span className="absolute bottom-2 left-2 bg-yellow-400 text-black text-xs px-2 py-1">
-                    {centerMain.categories?.[0]?.title}
-                  </span>
-                </div>
-                <h3 className="font-semibold text-base mb-2">
-                  {centerMain.title}
-                </h3>
-                <p className="text-xs text-[#999999] mb-2 flex items-center gap-2">
-                  by {centerMain.customCreatorName || centerMain.createdByName}{" "}
-                  · {formatDate(centerMain.createdAt)}
-                </p>
-                <p className="text-[#999999] text-sm font-serif mb-8 line-clamp-3">
-                  {centerMain.description}
-                </p>
-              </Link>
-              <div className="space-y-8">
-                {centerList.map((item) => (
-                  <div key={item.id}>
-                    <Link className="flex gap-3" href={`/details/${item.slug}`}>
-                      <div className="relative w-[120px] h-[86px] shrink-0">
-                        <Image
-                          src={item.thumbnailUrl || "/placeholder.jpg"}
-                          alt={item.title}
-                          fill
-                          className="object-cover"
-                        />
-                      </div>
-                      <div>
-                        <h4 className="text-sm font-semibold mb-3 line-clamp-2">
-                          {item.title}
-                        </h4>
-                        <p className="text-xs text-gray-500">
-                          {formatDate(item.createdAt)}
-                        </p>
-                      </div>
-                    </Link>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* === RIGHT COLUMN === */}
-          {rightMain && (
-            <div className="w-full">
-              <Link href={`/details/${rightMain.slug}`}>
-                <div className="relative w-full aspect-video mb-2">
-                  <Image
-                    src={rightMain.thumbnailUrl || "/placeholder.jpg"}
-                    alt={rightMain.title}
-                    fill
-                    className="object-cover"
-                  />
-                  <span className="absolute bottom-2 left-2 bg-yellow-400 text-black text-xs px-2 py-1">
-                    {rightMain.categories?.[0]?.title}
-                  </span>
-                </div>
-                <h3 className="font-semibold text-base mb-2">
-                  {rightMain.title}
-                </h3>
-                <p className="text-xs text-[#999999] mb-2 flex items-center gap-2">
-                  by {rightMain.customCreatorName || rightMain.createdByName} ·{" "}
-                  {formatDate(rightMain.createdAt)}
-                </p>
-                <p className="text-[#999999] text-sm font-serif mb-8 line-clamp-3">
-                  {rightMain.description}
-                </p>
-              </Link>
-              <div className="space-y-8">
-                {rightList.map((item) => (
-                  <div key={item.id}>
-                    <Link className="flex gap-3" href={`/details/${item.slug}`}>
-                      <div className="relative w-[120px] h-[86px] shrink-0">
-                        <Image
-                          src={item.thumbnailUrl || "/placeholder.jpg"}
-                          alt={item.title}
-                          fill
-                          className="object-cover"
-                        />
-                      </div>
-                      <div>
-                        <h4 className="text-sm font-semibold mb-3 line-clamp-2">
-                          {item.title}
-                        </h4>
-                        <p className="text-xs text-gray-500">
-                          {formatDate(item.createdAt)}
-                        </p>
-                      </div>
-                    </Link>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
+          <div className="w-10 h-1 bg-green-600 mt-1 rounded"></div>
         </div>
-      )}
 
-      <div className="relative my-8 h-[188px] overflow-hidden flex items-center mx-auto border">
-        <Image
-          src="/image-kolom.png"
-          alt="Berita Utama"
-          fill
-          className="object-contain"
-        />
+        <div className="border-b border-gray-300 mb-5"></div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {articles.slice(0, 6).map((item) => (
+            <Link
+              href={`/details/${item.slug}`}
+              key={item.id}
+              className="flex gap-4 pb-4 border-b border-gray-200"
+            >
+              <div className="relative w-28 h-28 rounded-md overflow-hidden flex-shrink-0">
+                <Image
+                  src={item.thumbnailUrl || "/placeholder.jpg"}
+                  alt={item.title}
+                  fill
+                  className="object-cover"
+                />
+              </div>
+
+              <div className="flex flex-col">
+                <p className="text-[11px] font-bold text-black">
+                  <span className="border-b-2 border-green-600 pb-[1px]">
+                    BERITA OPINI
+                  </span>
+                </p>
+
+                <h3 className="font-semibold text-[15px] leading-tight mt-1 line-clamp-2">
+                  {item.title}
+                </h3>
+
+                <p className="text-[11px] text-gray-600 mt-2">
+                  By{" "}
+                  <span className="font-semibold">
+                    {item.customCreatorName}
+                  </span>
+                </p>
+
+                <p className="text-[11px] text-gray-600">
+                  {new Date(item.createdAt).toLocaleDateString("id-ID", {
+                    day: "numeric",
+                    month: "long",
+                    year: "numeric",
+                  })}
+                </p>
+              </div>
+            </Link>
+          ))}
+        </div>
+        <div className="relative h-[140px] w-full overflow-hidden rounded-none my-5">
+          <Image
+            src="/image-kolom.png"
+            alt="Berita Utama"
+            fill
+            className="object-fill"
+          />
+        </div>
       </div>
     </section>
   );
diff --git a/components/landing-page/footer.tsx b/components/landing-page/footer.tsx
index 2ab112e..6c79897 100644
--- a/components/landing-page/footer.tsx
+++ b/components/landing-page/footer.tsx
@@ -1,39 +1,66 @@
 // components/Footer.tsx
+import Image from "next/image";
+import { Facebook, Twitter, Instagram, Youtube } from "lucide-react";
 
 export default function Footer() {
   return (
-    <footer className="bg-[#002C5B] text-[#FFFFFFCC] text-sm font-sans border-t border-gray-200">
-      <div className="max-w-[1350px] mx-auto py-6">
-        {/* Top Menu Links */}
-        <div className="flex flex-col md:flex-row justify-center md:justify-between gap-3">
-          <div className="flex flex-wrap justify-center md:justify-start gap-2 md:gap-3 text-xs text-[#FFFFFFCC]">
-            {[
-              "Kode Etik Jurnalistik",
-              "Kebijakan Privasi",
-              "Tentang Kami",
-              "Disclaimer",
-              "Pedoman Pemberitaan Media Siber",
-            ].map((item, idx, arr) => (
-              <span
-                key={idx}
-                className="flex items-center gap-2 whitespace-nowrap"
-              >
-                <a href="#" className="hover:underline">
-                  {item}
-                </a>
-                {idx !== arr.length - 1 && (
-                  <span className="text-gray-400">/</span>
-                )}
-              </span>
-            ))}
-          </div>
-          <div className="flex flex-wrap justify-center md:justify-end gap-2 md:gap-3 text-xs text-[#FFFFFF]">
-            <p className="text-xs font-bold text-[#FFFFFF] mb-2 md:mb-0 w-10/12 text-right">
-              © Copyright Arahnegeri Team All Rights Reserved
-            </p>
+    <footer className="bg-[#ECEFF5] pt-20 pb-10 w-full">
+      <div className="max-w-screen-xl mx-auto px-6 grid grid-cols-1 md:grid-cols-2 ">
+        {/* Logo */}
+        <div className="flex justify-center md:justify-end">
+          <Image
+            src="/arah-negeri.png"
+            alt="Logo"
+            width={230}
+            height={230}
+            className="object-contain"
+          />
+        </div>
+
+        {/* Subscribe Box */}
+        <div className="flex justify-center md:justify-end">
+          <div className="  p-8  w-full md:w-[420px]">
+            <h2 className="text-2xl font-semibold text-gray-800 leading-snug">
+              Subscribe us to get <br />
+              the latest news!
+            </h2>
+
+            <label className="block mt-6 mb-1 text-sm text-gray-600">
+              Email address:
+            </label>
+
+            <input
+              type="email"
+              placeholder="Your email address"
+              className="w-full border border-gray-300 rounded-md px-4 py-3 outline-none"
+            />
+
+            <button className="mt-4 bg-green-600 hover:bg-green-500 text-black px-6 py-3 rounded-md font-medium">
+              SIGN UP
+            </button>
           </div>
         </div>
       </div>
+
+      <div className="flex flex-wrap justify-center gap-8 mt-16 text-gray-600 text-sm">
+        <a href="#">About Us</a>
+        <a href="#">Contact</a>
+        <a href="#">Kode Etik Jurnalistik</a>
+        <a href="#">Kebijakan Privasi</a>
+        <a href="#">Disclaimer</a>
+        <a href="#">Pedoman Media Siber</a>
+      </div>
+
+      <div className="flex justify-center gap-8 mt-8 text-gray-700">
+        <Facebook className="w-5 h-5 cursor-pointer" />
+        <Twitter className="w-5 h-5 cursor-pointer" />
+        <Instagram className="w-5 h-5 cursor-pointer" />
+        <Youtube className="w-5 h-5 cursor-pointer" />
+      </div>
+
+      <p className="text-start text-gray-500 text-sm mt-8 pl-5">
+        © 2025 Arah Negeri - All Rights Reserved.
+      </p>
     </footer>
   );
 }
diff --git a/components/landing-page/header.tsx b/components/landing-page/header.tsx
index b0e3d48..50fc79f 100644
--- a/components/landing-page/header.tsx
+++ b/components/landing-page/header.tsx
@@ -24,107 +24,207 @@ export default function Header() {
 
   useEffect(() => {
     const fetchArticles = async () => {
-      try {
-        const req = {
-          limit: "2",
-          page: 1,
-          search: "",
-          categorySlug: "",
-          sort: "desc",
-          isPublish: true,
-          sortBy: "created_at",
-        };
+      const req = {
+        limit: "10",
+        page: 1,
+        search: "",
+        categorySlug: "",
+        sort: "desc",
+        isPublish: true,
+        sortBy: "created_at",
+      };
 
-        const res = await getListArticle(req);
-        setArticles(res?.data?.data || []);
-      } catch (err) {
-        console.error("Error fetching articles:", err);
-      }
+      const res = await getListArticle(req);
+      setArticles(res?.data?.data || []);
     };
 
     fetchArticles();
   }, []);
 
+  const flashArticles = articles.slice(0, 8);
+  const mainArticle = articles[8] || articles[0];
+  const recentPosts = articles.slice(1, 5);
+
   return (
-    <section className="max-w-7xl mx-auto bg-white">
-      {/* Header Banner */}
-      <div className="relative my-5 h-[188px] overflow-hidden flex items-center mx-auto border">
-        <Image
-          src="/image-kolom.png"
-          alt="Berita Utama"
-          fill
-          className="object-contain"
-        />
+    <section className="max-w-7xl mx-auto bg-white px-4">
+      {/* FLASH STRIP */}
+      <div className="flex items-center justify-between mt-6 mb-3">
+        <div className="flex items-center gap-3">
+          <h4 className="text-green-600 font-semibold">Flash</h4>
+          <span className="text-red-500">⚡</span>
+        </div>
+        <div className="text-xs text-gray-500 hidden md:block">LOAD MORE ➜</div>
       </div>
 
-      <p className="text-xl font-serif font-semibold border-b-2 my-6 mx-4">
-        BERITA UTAMA
-      </p>
-
-      {/* Grid Artikel */}
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-screen-xl mx-auto px-4">
-        {articles.length > 0 ? (
-          articles.map((item, index) => (
-            <div key={item.id} className="relative h-[410px] w-full">
-              <Link href={`/details/${item.slug}`}>
+      <div className="overflow-x-auto no-scrollbar py-2">
+        <div className="flex gap-4">
+          {flashArticles.map((item) => (
+            <Link
+              href={`/details/${item.slug}`}
+              key={`flash-${item.id}`}
+              className="min-w-[200px] md:min-w-[220px] bg-gray-800 rounded-lg overflow-hidden relative shadow"
+            >
+              <div className="relative w-[200px] md:w-[220px] h-[140px]">
                 <Image
                   src={
                     item.thumbnailUrl ||
                     item.files?.[0]?.fileUrl ||
                     "/placeholder.jpg"
                   }
-                  alt={item.files?.[0]?.file_alt || item.title}
+                  alt={item.title}
                   fill
-                  className="object-cover rounded-md"
+                  className="object-cover"
                 />
+              </div>
 
-                {/* Overlay gradient */}
-                <div
-                  className={`absolute inset-0 ${
-                    index % 2 === 0
-                      ? "bg-gradient-to-r from-indigo-900/80 to-red-500/60"
-                      : "bg-gradient-to-r from-green-900/80 to-yellow-500/60"
-                  }`}
-                />
-
-                {/* Text content */}
-                <div className="absolute inset-0 flex flex-col items-center justify-center text-center text-white px-4 z-20">
-                  <span className="text-[10px] bg-yellow-400 text-black px-2 py-1 mb-3 uppercase">
+              {/* dark overlay with text */}
+              <div className="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/80 to-transparent text-white">
+                <p className="text-xs line-clamp-2">{item.title}</p>
+                <div className="flex items-center justify-between mt-2 text-[11px] text-gray-300">
+                  <span className="text-yellow-300 bg-black/30 px-1 rounded-sm">
                     {item.categoryName ||
                       item.categories?.[0]?.title ||
                       "Berita"}
                   </span>
-                  <h2 className="text-xl md:text-2xl font-semibold leading-snug w-7/12">
-                    {item.title}
-                  </h2>
-                  <div className="flex flex-row items-center mt-2">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="16"
-                      height="16"
-                      viewBox="0 0 24 24"
-                      fill="currentColor"
-                      className="mr-1"
-                    >
-                      <path d="M12 1.75a10.25 10.25 0 1 0 0 20.5a10.25 10.25 0 0 0 0-20.5Zm0 1.5a8.75 8.75 0 1 1 0 17.5a8.75 8.75 0 0 1 0-17.5Zm.75 4a.75.75 0 0 0-1.5 0v5.25a.75.75 0 0 0 .313.613l3 2.25a.75.75 0 0 0 .874-1.222l-2.687-2.016V7.25Z" />
-                    </svg>
-                    <p className="text-xs text-white">
-                      {new Date(item.createdAt).toLocaleDateString("id-ID", {
+                  <span>●</span>
+                </div>
+              </div>
+
+              {/* play icon */}
+              <div className="absolute top-3 right-3 w-8 h-8 bg-white/80 rounded-full flex items-center justify-center">
+                <svg
+                  className="w-4 h-4 text-black"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                >
+                  <path d="M8 5v14l11-7z" />
+                </svg>
+              </div>
+            </Link>
+          ))}
+        </div>
+      </div>
+
+      {/* Main Layout */}
+      <div className="grid grid-cols-1 md:grid-cols-[2.2fr_1fr] gap-6">
+        {/* LEFT SIDE – MAIN ARTICLE */}
+        {mainArticle ? (
+          <div className="relative h-[500px] w-full rounded-xl overflow-hidden shadow-md">
+            <Link href={`/details/${mainArticle.slug}`}>
+              <Image
+                src={
+                  mainArticle.thumbnailUrl ||
+                  mainArticle.files?.[0]?.fileUrl ||
+                  "/placeholder.jpg"
+                }
+                alt={mainArticle.files?.[0]?.file_alt || mainArticle.title}
+                fill
+                className="object-cover"
+              />
+
+              {/* White Card Overlay */}
+              <div className="absolute bottom-6 left-6 bg-white bg-opacity-95 backdrop-blur-sm p-6  shadow-lg max-w-lg">
+                <span className="text-[11px] bg-green-700 text-white px-2 py-1 rounded-sm">
+                  {mainArticle.categoryName ||
+                    mainArticle.categories?.[0]?.title ||
+                    "Berita"}
+                </span>
+
+                <h2 className="text-xl md:text-2xl font-bold text-gray-900 mt-2 leading-snug">
+                  {mainArticle.title}
+                </h2>
+
+                <div className="flex items-center gap-2 text-gray-600 text-xs mt-3">
+                  <span>
+                    By{" "}
+                    {mainArticle.customCreatorName ||
+                      mainArticle.createdByName ||
+                      "Admin"}
+                  </span>
+                  <span>•</span>
+                  <span>
+                    {new Date(mainArticle.createdAt).toLocaleDateString(
+                      "id-ID",
+                      {
                         day: "2-digit",
                         month: "long",
                         year: "numeric",
-                      })}
-                    </p>
-                  </div>
+                      }
+                    )}
+                  </span>
+                </div>
+              </div>
+            </Link>
+          </div>
+        ) : (
+          <p className="text-gray-500">Loading...</p>
+        )}
+
+        {/* RIGHT SIDE – RECENT POSTS */}
+        <div>
+          <h3 className="text-lg font-semibold mb-3">Recent Posts</h3>
+
+          <div className="space-y-4">
+            {recentPosts.map((item) => (
+              <Link
+                key={item.id}
+                href={`/details/${item.slug}`}
+                className="flex gap-3"
+              >
+                <div className="relative w-35 h-25 rounded-md overflow-hidden">
+                  <Image
+                    src={
+                      item.thumbnailUrl ||
+                      item.files?.[0]?.fileUrl ||
+                      "/placeholder.jpg"
+                    }
+                    alt={item.title}
+                    fill
+                    className="object-cover"
+                  />
+                </div>
+
+                <div className="flex flex-col">
+                  <p className="text-sm font-semibold line-clamp-2">
+                    {item.title}
+                  </p>
+                  <span className="text-xs text-gray-500 mt-1">
+                    {new Date(item.createdAt).toLocaleDateString("id-ID", {
+                      day: "2-digit",
+                      month: "long",
+                      year: "numeric",
+                    })}
+                  </span>
                 </div>
               </Link>
-            </div>
-          ))
-        ) : (
-          <p className="text-center col-span-2 text-gray-500">
-            Tidak ada artikel tersedia.
-          </p>
-        )}
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* LOAD MORE */}
+      <div className="flex justify-center my-6">
+        <button className="text-gray-600 text-sm flex items-center gap-2 border-b pb-1">
+          <span>LOAD MORE</span>
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
+            <path
+              d="M12 5v14M5 12h14"
+              stroke="#9CA3AF"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+            />
+          </svg>
+        </button>
+      </div>
+
+      {/* KOLOM PPS BOTTOM BANNER */}
+      <div className="relative h-[140px] w-full overflow-hidden rounded-none my-5 border rounded-md">
+        <Image
+          src="/image-kolom.png"
+          alt="Kolom PPS Bottom Banner"
+          fill
+          className="object-contain"
+        />
       </div>
     </section>
   );
diff --git a/components/landing-page/health.tsx b/components/landing-page/health.tsx
index 66b9a57..07f9874 100644
--- a/components/landing-page/health.tsx
+++ b/components/landing-page/health.tsx
@@ -1,8 +1,9 @@
 "use client";
+
 import { useEffect, useState } from "react";
 import Image from "next/image";
-import { getListArticle } from "@/service/article";
 import Link from "next/link";
+import { getListArticle } from "@/service/article";
 
 type Article = {
   id: number;
@@ -12,246 +13,172 @@ type Article = {
   createdAt: string;
   slug: string;
   createdByName: string;
-  categories: { title: string }[];
   customCreatorName?: string;
   thumbnailUrl?: string;
-  files?: { fileUrl: string; file_alt: string }[];
+  categories?: { title: string }[];
 };
 
-export default function Health() {
+export default function NewsTerkini() {
   const [articles, setArticles] = useState<Article[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
+  const [popular, setPopular] = useState<Article[]>([]);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    fetchArticles();
+    loadData();
   }, []);
 
-  async function fetchArticles() {
-    setIsLoading(true);
+  async function loadData() {
+    setLoading(true);
+
     try {
       const res = await getListArticle({
-        limit: "12",
+        limit: "20",
         page: 1,
         search: "",
-        categorySlug: "", // ubah sesuai slug kategori kamu
         isPublish: true,
-        sortBy: "created_at",
         sort: "desc",
+        sortBy: "created_at",
       });
-      setArticles(res?.data?.data || []);
-    } catch (error) {
-      console.error("Error fetching Health articles:", error);
-    } finally {
-      setIsLoading(false);
+
+      const data = res?.data?.data || [];
+      setArticles(data.slice(0, 5));
+      setPopular(data.slice(0, 5));
+    } catch (err) {
+      console.log(err);
     }
+
+    setLoading(false);
   }
 
-  // Format tanggal Indonesia
-  const formatDate = (dateString: string) => {
-    const date = new Date(dateString);
-    return date.toLocaleDateString("id-ID", {
-      day: "2-digit",
+  const formatDate = (d: string) =>
+    new Date(d).toLocaleDateString("id-ID", {
+      day: "numeric",
       month: "long",
       year: "numeric",
     });
-  };
 
-  // Mapping artikel ke posisi layout
-  const leftMain = articles[0];
-  const leftList = articles.slice(1, 4);
-  const centerMain = articles[4];
-  const centerList = articles.slice(5, 8);
-  const rightMain = articles[8];
-  const rightList = articles.slice(9, 12);
-
-  if (isLoading)
+  if (loading)
     return (
-      <p className="text-center text-gray-500 py-10">
-        Memuat berita kesehatan...
+      <p className="text-center py-10 text-gray-500">
+        Memuat berita terbaru...
       </p>
     );
 
   return (
-    <section className="max-w-7xl mx-auto px-4">
-      <h2 className="text-lg font-bold text-white bg-red-600 inline-block px-4 py-2 border-b-2">
-        KESEHATAN
-      </h2>
-      <h2 className="border-b-2 mb-4"></h2>
+    <section className="max-w-7xl mx-auto px-4 grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-6">
+      <div>
+        <h2 className="text-lg font-bold text-gray-900">BERITA TERKINI</h2>
+        <div className="w-14 h-1 bg-green-600 mt-1 mb-4"></div>
 
-      {articles.length === 0 ? (
-        <p className="text-gray-500 text-center py-10">
-          Belum ada berita di kategori kesehatan.
-        </p>
-      ) : (
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          {/* === LEFT COLUMN === */}
-          {leftMain && (
-            <div className="w-full">
-              <Link href={`/details/${leftMain.slug}`}>
-                <div className="relative w-full aspect-video mb-2">
+        <div className="space-y-6">
+          {articles.map((item) => (
+            <Link
+              key={item.id}
+              href={`/details/${item.slug}`}
+              className="block border-b pb-6"
+            >
+              <div className="flex gap-4">
+                <div className="flex-1">
+                  {/* CATEGORY */}
+                  <p className="text-[11px] text-green-700 font-semibold mb-1">
+                    {item.categoryName || "Kategori"}
+                  </p>
+
+                  {/* JUDUL */}
+                  <h3 className="font-bold text-base leading-snug line-clamp-2">
+                    {item.title}
+                  </h3>
+
+                  {/* DESKRIPSI */}
+                  <p className="text-sm text-gray-600 line-clamp-2 mt-1">
+                    {item.description}
+                  </p>
+
+                  {/* AUTHOR + DATE */}
+                  <p className="text-xs text-gray-400 mt-2">
+                    By {item.customCreatorName || item.createdByName} —{" "}
+                    {formatDate(item.createdAt)}
+                  </p>
+                </div>
+                <div className="relative w-40 h-28 rounded overflow-hidden flex-shrink-0">
                   <Image
-                    src={leftMain.thumbnailUrl || "/placeholder.jpg"}
-                    alt={leftMain.title}
+                    src={item.thumbnailUrl || "/placeholder.jpg"}
+                    alt={item.title}
                     fill
                     className="object-cover"
                   />
-                  <span className="absolute bottom-2 left-2 bg-yellow-400 text-black text-xs px-2 py-1">
-                    {leftMain.categories?.[0]?.title}
-                  </span>
                 </div>
-                <h3 className="font-semibold text-base mb-2">
-                  {leftMain.title}
-                </h3>
-                <p className="text-xs text-[#999999] mb-2 flex items-center gap-2">
-                  by {leftMain.customCreatorName || leftMain.createdByName} ·{" "}
-                  {formatDate(leftMain.createdAt)}
-                </p>
-                <p className="text-[#999999] text-sm font-serif mb-8 line-clamp-3">
-                  {leftMain.description}
-                </p>
-              </Link>
-              <div className="space-y-8">
-                {leftList.map((item) => (
-                  <div key={item.id}>
-                    <Link className="flex gap-3" href={`/details/${item.slug}`}>
-                      <div className="relative w-[120px] h-[86px] shrink-0">
-                        <Image
-                          src={item.thumbnailUrl || "/placeholder.jpg"}
-                          alt={item.title}
-                          fill
-                          className="object-cover"
-                        />
-                      </div>
-                      <div>
-                        <h4 className="text-sm font-semibold mb-3 line-clamp-2">
-                          {item.title}
-                        </h4>
-                        <p className="text-xs text-gray-500">
-                          {formatDate(item.createdAt)}
-                        </p>
-                      </div>
-                    </Link>
-                  </div>
-                ))}
               </div>
-            </div>
-          )}
-
-          {/* === CENTER COLUMN === */}
-          {centerMain && (
-            <div className="w-full">
-              <Link href={`/details/${centerMain.slug}`}>
-                <div className="relative w-full aspect-video mb-2">
-                  <Image
-                    src={centerMain.thumbnailUrl || "/placeholder.jpg"}
-                    alt={centerMain.title}
-                    fill
-                    className="object-cover"
-                  />
-                  <span className="absolute bottom-2 left-2 bg-yellow-400 text-black text-xs px-2 py-1">
-                    {centerMain.categories?.[0]?.title}
-                  </span>
-                </div>
-                <h3 className="font-semibold text-base mb-2">
-                  {centerMain.title}
-                </h3>
-                <p className="text-xs text-[#999999] mb-2 flex items-center gap-2">
-                  by {centerMain.customCreatorName || centerMain.createdByName}{" "}
-                  · {formatDate(centerMain.createdAt)}
-                </p>
-                <p className="text-[#999999] text-sm font-serif mb-8 line-clamp-3">
-                  {centerMain.description}
-                </p>
-              </Link>
-              <div className="space-y-8">
-                {centerList.map((item) => (
-                  <div key={item.id}>
-                    <Link className="flex gap-3" href={`/details/${item.slug}`}>
-                      <div className="relative w-[120px] h-[86px] shrink-0">
-                        <Image
-                          src={item.thumbnailUrl || "/placeholder.jpg"}
-                          alt={item.title}
-                          fill
-                          className="object-cover"
-                        />
-                      </div>
-                      <div>
-                        <h4 className="text-sm font-semibold mb-3 line-clamp-2">
-                          {item.title}
-                        </h4>
-                        <p className="text-xs text-gray-500">
-                          {formatDate(item.createdAt)}
-                        </p>
-                      </div>
-                    </Link>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* === RIGHT COLUMN === */}
-          {rightMain && (
-            <div className="w-full">
-              <Link href={`/details/${rightMain.slug}`}>
-                <div className="relative w-full aspect-video mb-2">
-                  <Image
-                    src={rightMain.thumbnailUrl || "/placeholder.jpg"}
-                    alt={rightMain.title}
-                    fill
-                    className="object-cover"
-                  />
-                  <span className="absolute bottom-2 left-2 bg-yellow-400 text-black text-xs px-2 py-1">
-                    {rightMain.categories?.[0]?.title}
-                  </span>
-                </div>
-                <h3 className="font-semibold text-base mb-2">
-                  {rightMain.title}
-                </h3>
-                <p className="text-xs text-[#999999] mb-2 flex items-center gap-2">
-                  by {rightMain.customCreatorName || rightMain.createdByName} ·{" "}
-                  {formatDate(rightMain.createdAt)}
-                </p>
-                <p className="text-[#999999] text-sm font-serif mb-8 line-clamp-3">
-                  {rightMain.description}
-                </p>
-              </Link>
-              <div className="space-y-8">
-                {rightList.map((item) => (
-                  <div key={item.id}>
-                    <Link className="flex gap-3" href={`/details/${item.slug}`}>
-                      <div className="relative w-[120px] h-[86px] shrink-0">
-                        <Image
-                          src={item.thumbnailUrl || "/placeholder.jpg"}
-                          alt={item.title}
-                          fill
-                          className="object-cover"
-                        />
-                      </div>
-                      <div>
-                        <h4 className="text-sm font-semibold mb-3 line-clamp-2">
-                          {item.title}
-                        </h4>
-                        <p className="text-xs text-gray-500">
-                          {formatDate(item.createdAt)}
-                        </p>
-                      </div>
-                    </Link>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
+            </Link>
+          ))}
         </div>
-      )}
 
-      <div className="relative my-8 h-[188px] overflow-hidden flex items-center mx-auto border">
-        <Image
-          src="/image-kolom.png"
-          alt="Berita Utama"
-          fill
-          className="object-contain"
-        />
+        {/* LOAD MORE */}
+        <div className="text-center mt-4 text-green-600 text-sm cursor-pointer">
+          LOAD MORE ↓
+        </div>
+      </div>
+
+      <div className="lg:col-span-1">
+        <h2 className="text-lg font-bold text-gray-900">TERBANYAK DIBAGIKAN</h2>
+        <div className="w-14 h-1 bg-green-600 mt-1 mb-4"></div>
+
+        <div className="space-y-4">
+          {popular.map((item, index) => (
+            <Link
+              key={item.id}
+              href={`/details/${item.slug}`}
+              className="flex gap-3 border-b pb-4"
+            >
+              {/* NOMOR */}
+              <div className="text-green-600 font-extrabold text-3xl leading-none">
+                {(index + 1).toString().padStart(2, "0")}
+              </div>
+
+              <div className="flex-1">
+                <p className="text-[10px] text-gray-500">
+                  {item.categories?.[0]?.title || "Kategori"}
+                </p>
+                <h4 className="font-semibold text-sm leading-snug line-clamp-2">
+                  {item.title}
+                </h4>
+                <p className="text-[10px] text-gray-400 mt-1">
+                  {formatDate(item.createdAt)}
+                </p>
+              </div>
+
+              {/* THUMBNAIL KECIL */}
+              <div className="relative w-16 h-14 rounded overflow-hidden">
+                <Image
+                  src={item.thumbnailUrl || "/placeholder.jpg"}
+                  alt={item.title}
+                  fill
+                  className="object-cover"
+                />
+              </div>
+            </Link>
+          ))}
+        </div>
+
+        <div className="mt-6">
+          <div className="relative h-[180px] border rounded-lg overflow-hidden mb-6">
+            <Image
+              src="/image-kolom.png"
+              alt="Kolom PPS"
+              fill
+              className="object-contain bg-white"
+            />
+          </div>
+
+          <div className="relative h-[180px] border rounded-lg overflow-hidden">
+            <Image
+              src="/image-kolom.png"
+              alt="Kolom PPS"
+              fill
+              className="object-contain bg-white"
+            />
+          </div>
+        </div>
       </div>
     </section>
   );
diff --git a/components/landing-page/latest-news.tsx b/components/landing-page/latest-news.tsx
index 05543d6..7e50705 100644
--- a/components/landing-page/latest-news.tsx
+++ b/components/landing-page/latest-news.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { getListArticle } from "@/service/article";
+import { ChevronDown } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { useEffect, useState } from "react";
@@ -31,7 +32,6 @@ export default function News() {
     endDate: null,
   });
 
-  // Fetch data setiap kali page berubah
   useEffect(() => {
     initState();
   }, [page, showData, startDateValue, selectedCategories]);
@@ -56,126 +56,70 @@ export default function News() {
     }
   }
 
-  const handlePrev = () => {
-    if (page > 1) setPage((prev) => prev - 1);
-  };
-
-  const handleNext = () => {
-    if (page < totalPage) setPage((prev) => prev + 1);
-  };
-
   return (
     <section className="max-w-screen-xl mx-auto px-4 py-10">
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {/* Berita Terbaru */}
-        <div className="lg:col-span-2">
-          <div className="flex flex-row items-center gap-2 mb-4">
-            <h2 className="text-lg font-semibold">Berita Terbaru</h2>
-            <div className="flex-grow border-t-2 border-gray-300 rounded-md" />
-          </div>
+      <div className="">
+        {/* TITLE */}
+        <div className="mb-4">
+          <h2 className="text-xl font-black text-[#000]">BERITA POPULER</h2>
+          <div className="w-10 h-1 bg-green-600 mt-1 rounded"></div>
+        </div>
 
-          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-            {articles.length > 0 ? (
-              articles.map((item) => (
-                <div key={item.id} className="group cursor-pointer">
-                  <Link href={`/details/${item.slug}`}>
-                    <div className="relative w-full aspect-[3/2] overflow-hidden">
-                      <Image
-                        src={
-                          item.thumbnailUrl ||
-                          item.files?.[0]?.fileUrl ||
-                          "/placeholder.jpg"
-                        }
-                        alt={item.files?.[0]?.file_alt || item.title}
-                        fill
-                        className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-300"
-                      />
-                      <span className="absolute bottom-2 left-2 bg-yellow-400 text-black text-[10px] px-2 py-1">
-                        {item.categoryName ||
-                          item.categories?.[0]?.title ||
-                          "Umum"}
-                      </span>
-                    </div>
+        {/* GRID 4 KOLOM */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
+          {articles.slice(0, 4).map((item) => (
+            <Link href={`/details/${item.slug}`} key={item.id}>
+              <div>
+                {/* GAMBAR */}
+                <div className="relative w-full h-56 rounded-lg overflow-hidden">
+                  <Image
+                    src={item.thumbnailUrl || "/placeholder.jpg"}
+                    alt={item.title}
+                    fill
+                    className="object-cover"
+                  />
 
-                    <h3 className="mt-3 font-bold leading-snug line-clamp-2">
-                      {item.title}
-                    </h3>
-
-                    <p className="text-xs text-[#A0A0A0] mt-1 flex items-center gap-1">
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="16"
-                        height="16"
-                        viewBox="0 0 24 24"
-                        className="text-gray-400"
-                      >
-                        <path
-                          fill="currentColor"
-                          d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m0 2a8 8 0 1 0 0 16a8 8 0 0 0 0-16m0 2a1 1 0 0 1 .993.883L13 7v4.586l2.707 2.707a1 1 0 0 1-1.32 1.497l-.094-.083l-3-3a1 1 0 0 1-.284-.576L11 12V7a1 1 0 0 1 1-1"
-                        />
-                      </svg>
-                      {new Date(item.createdAt).toLocaleDateString("id-ID", {
-                        day: "2-digit",
-                        month: "long",
-                        year: "numeric",
-                      })}
-                    </p>
-                  </Link>
+                  {/* BADGE CATEGORY DI DALAM GAMBAR */}
+                  <div className="absolute bottom-2 left-2">
+                    <span className="px-3 py-1 text-[10px] font-semibold bg-green-600 text-white rounded">
+                      {item.categoryName || "Kategori"}
+                    </span>
+                  </div>
                 </div>
-              ))
-            ) : (
-              <p className="col-span-3 text-center text-gray-500">
-                Tidak ada artikel tersedia.
-              </p>
-            )}
-          </div>
 
-          {/* Pagination */}
-          <div className="mt-8 flex flex-wrap gap-2 justify-start">
-            <button
-              onClick={handlePrev}
-              disabled={page === 1}
-              className={`border px-3 py-1 text-xs rounded-sm ${
-                page === 1
-                  ? "opacity-50 cursor-not-allowed"
-                  : "hover:bg-gray-100"
-              }`}
-            >
-              ‹ PREV
-            </button>
+                {/* JUDUL */}
+                <h3 className="mt-2 text-base font-bold leading-snug line-clamp-2">
+                  {item.title}
+                </h3>
 
-            <button
-              onClick={handleNext}
-              disabled={page >= totalPage}
-              className={`border px-3 py-1 text-xs rounded-sm ${
-                page >= totalPage
-                  ? "opacity-50 cursor-not-allowed"
-                  : "hover:bg-gray-100"
-              }`}
-            >
-              NEXT ›
-            </button>
-          </div>
+                {/* AUTHOR + DATE */}
+                <div className="text-[11px] mt-2 flex items-center gap-1 text-gray-700">
+                  <span className="font-semibold">
+                    By {item.customCreatorName || item.createdByName || "Admin"}
+                  </span>
+                  <span className="text-yellow-500">-</span>
+                  <span>
+                    {new Date(item.createdAt).toLocaleDateString("id-ID", {
+                      day: "numeric",
+                      month: "long",
+                      year: "numeric",
+                    })}
+                  </span>
+                </div>
+              </div>
+            </Link>
+          ))}
         </div>
 
-        {/* Twitter Section */}
-        <div>
-          <h3 className="text-xl font-semibold border-b-2 border-gray-300 mb-4">
-            Twitter @ArahNegeri
-          </h3>
-          {/* Embed atau konten lain */}
+        <div className="relative h-[160px] w-full overflow-hidden rounded-xl mt-6">
+          <Image
+            src="/image-kolom.png"
+            alt="Kolom PPS"
+            fill
+            className="object-contain bg-white"
+          />
         </div>
       </div>
-
-      {/* Banner bawah */}
-      <div className="relative my-5 h-[188px] overflow-hidden flex items-center mx-auto border">
-        <Image
-          src="/image-kolom.png"
-          alt="Berita Utama"
-          fill
-          className="object-contain"
-        />
-      </div>
     </section>
   );
 }
diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx
index 536c77b..ee4753e 100644
--- a/components/landing-page/navbar.tsx
+++ b/components/landing-page/navbar.tsx
@@ -1,164 +1,126 @@
 "use client";
-import { useState } from "react";
-import Link from "next/link";
-import { Menu, Lock, Search } from "lucide-react";
-import { Input } from "../ui/input";
+
+import { Search } from "lucide-react";
 import Image from "next/image";
+import Link from "next/link";
 
-const Navbar = () => {
-  const [isOpen, setIsOpen] = useState(false);
-  const toggleMenu = () => setIsOpen(!isOpen);
-
+export default function Navbar() {
   return (
-    <nav className="w-full bg-[#002B5A]">
-      {/* Top Bar */}
-      <div className=" max-w-7xl mx-auto text-white py-3 px-4 flex flex-col md:flex-row justify-between items-center gap-y-2">
-        {/* Logo */}
-        <div className="flex flex-row items-center gap-4">
-          <div className="flex items-center gap-4">
+    <div className="w-full bg-white py-4 border-b">
+      <div className="max-w-screen-xl mx-auto flex flex-col justify-between px-4">
+        {/* Left: Logo */}
+        <div className="flex flex-row justify-between mb-3">
+          <div className="flex items-center">
             <Image
               src="/arah-negeri.png"
-              alt="Logo"
-              width={130}
-              height={92}
-              className="w-[130px] h-[92px]"
+              alt="Kritik Tajam Logo"
+              width={140}
+              height={100}
             />
           </div>
+          <div className="flex items-center gap-6">
+            {/* Social Icons */}
+            <div className="hidden md:flex items-center gap-5 text-black text-xl">
+              <Link href="#">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="18"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="currentColor"
+                    d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4z"
+                  />
+                </svg>
+              </Link>
 
-          {/* Search Box */}
-          <div className="flex-grow w-full px-4 max-w-xl mx-auto">
-            <div className="relative w-full max-w-md">
-              <Input
-                type="text"
-                placeholder="Search..."
-                className="pr-10 bg-white text-black rounded-sm w-full"
-              />
-              <Search className="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-500" />
+              <Link href="#">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="18"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="currentColor"
+                    d="M7.91 20.889c8.302 0 12.845-6.885 12.845-12.845c0-.193 0-.387-.009-.58A9.2 9.2 0 0 0 23 5.121a9.2 9.2 0 0 1-2.597.713a4.54 4.54 0 0 0 1.99-2.5a9 9 0 0 1-2.87 1.091A4.5 4.5 0 0 0 16.23 3a4.52 4.52 0 0 0-4.516 4.516c0 .352.044.696.114 1.03a12.82 12.82 0 0 1-9.305-4.718a4.526 4.526 0 0 0 1.4 6.03a4.6 4.6 0 0 1-2.043-.563v.061a4.524 4.524 0 0 0 3.62 4.428a4.4 4.4 0 0 1-1.189.159q-.435 0-.845-.08a4.51 4.51 0 0 0 4.217 3.135a9.05 9.05 0 0 1-5.608 1.936A9 9 0 0 1 1 18.873a12.84 12.84 0 0 0 6.91 2.016"
+                  />
+                </svg>
+              </Link>
+
+              <Link href="#">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="18"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="currentColor"
+                    d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"
+                  />
+                </svg>
+              </Link>
+
+              <Link href="#">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="18"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="currentColor"
+                    d="M12.244 4c.534.003 1.87.016 3.29.073l.504.022c1.429.067 2.857.183 3.566.38c.945.266 1.687 1.04 1.938 2.022c.4 1.56.45 4.602.456 5.339l.001.152v.174c-.007.737-.057 3.78-.457 5.339c-.254.985-.997 1.76-1.938 2.022c-.709.197-2.137.313-3.566.38l-.504.023c-1.42.056-2.756.07-3.29.072l-.235.001h-.255c-1.13-.007-5.856-.058-7.36-.476c-.944-.266-1.687-1.04-1.938-2.022c-.4-1.56-.45-4.602-.456-5.339v-.326c.006-.737.056-3.78.456-5.339c.254-.985.997-1.76 1.939-2.021c1.503-.419 6.23-.47 7.36-.476zM9.999 8.5v7l6-3.5z"
+                  />
+                </svg>
+              </Link>
             </div>
           </div>
         </div>
-
-        {/* Date & Login */}
-        <div className="flex items-center gap-4 text-sm whitespace-nowrap">
-          <span className="text-[#B2C0CD]">Kamis, Maret 27, 2025</span>
-          <div className="flex items-center gap-1 font-bold">
-            <Lock className="w-4 h-4" />
-            <Link href="/auth" className="font-medium hover:underline">
-              Login
+        {/* Middle Menu */}
+        <div className="flex flex-row justify-between">
+          <nav className="hidden md:flex items-center gap-10 text-sm font-semibold">
+            <Link href="/" className="text-blue-500 underline">
+              Beranda
             </Link>
-          </div>
-        </div>
-      </div>
+            <Link href="/category/citizen-news">Berita Warga</Link>
+            <Link href="/category/development">Pembangunan</Link>
+            <Link href="/category/health">Kesehatan</Link>
+            {/* <Link href="/category/opinion-news">Berita Opini</Link> */}
+          </nav>
 
-      {/* Bottom Navigation */}
-      <div className="bg-[#001c47] text-white px-4 py-2">
-        <div className="flex items-center justify-between max-w-7xl mx-auto">
-          {/* Kiri: Burger + Menu */}
-          <div className="flex items-center gap-6">
-            {/* Burger button (mobile only) */}
-            <button onClick={toggleMenu} className="text-white ">
-              <Menu className="h-6 w-6" />
+          <div className="flex items-center gap-2">
+            <button
+              // onClick={() => document.documentElement.classList.toggle("dark")}
+              className="w-10 h-5 rounded-full bg-gray-300 dark:bg-gray-700 relative transition-all"
+            >
+              <div className="w-5 h-5 bg-white dark:bg-black rounded-full shadow absolute top-0 left-0 dark:left-5 transition-all"></div>
             </button>
 
-            {/* Nav Menu (hidden on mobile) */}
-            <div className="hidden md:flex gap-6 font-semibold text-sm">
-              <Link href="/" className="text-yellow-400">
-                BERANDA
-              </Link>
-              <Link
-                href="/category/citizen-news"
-                className="hover:text-yellow-400"
-              >
-                BERITA WARGA
-              </Link>
-              <Link
-                href="/category/development"
-                className="hover:text-yellow-400"
-              >
-                PEMBANGUNAN
-              </Link>
-              <Link href="/category/health" className="hover:text-yellow-400">
-                KESEHATAN
-              </Link>
-            </div>
-          </div>
-
-          {/* Kanan: Sosmed */}
-          <div className="flex gap-4 text-white text-lg">
-            <Link href="#" className="text-white">
+            {/* BURGER BUTTON (mobile menu) */}
+            <button className="md:hidden p-2 rounded-lg border">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
-                width="20"
-                height="20"
+                fill="none"
                 viewBox="0 0 24 24"
+                strokeWidth={2}
+                stroke="currentColor"
+                className="w-6 h-6"
               >
                 <path
-                  fill="currentColor"
-                  d="M7.91 20.889c8.302 0 12.845-6.885 12.845-12.845c0-.193 0-.387-.009-.58A9.2 9.2 0 0 0 23 5.121a9.2 9.2 0 0 1-2.597.713a4.54 4.54 0 0 0 1.99-2.5a9 9 0 0 1-2.87 1.091A4.5 4.5 0 0 0 16.23 3a4.52 4.52 0 0 0-4.516 4.516c0 .352.044.696.114 1.03a12.82 12.82 0 0 1-9.305-4.718a4.526 4.526 0 0 0 1.4 6.03a4.6 4.6 0 0 1-2.043-.563v.061a4.524 4.524 0 0 0 3.62 4.428a4.4 4.4 0 0 1-1.189.159q-.435 0-.845-.08a4.51 4.51 0 0 0 4.217 3.135a9.05 9.05 0 0 1-5.608 1.936A9 9 0 0 1 1 18.873a12.84 12.84 0 0 0 6.91 2.016"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M4 6h16M4 12h16M4 18h16"
                 />
               </svg>
-            </Link>
-            <Link href="#" className="text-white">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="20"
-                height="20"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  fill="currentColor"
-                  // fill-rule="evenodd"
-                  d="M22.54 6.42a2.77 2.77 0 0 0-1.945-1.957C18.88 4 12 4 12 4s-6.88 0-8.595.463A2.77 2.77 0 0 0 1.46 6.42C1 8.148 1 11.75 1 11.75s0 3.602.46 5.33a2.77 2.77 0 0 0 1.945 1.958C5.121 19.5 12 19.5 12 19.5s6.88 0 8.595-.462a2.77 2.77 0 0 0 1.945-1.958c.46-1.726.46-5.33.46-5.33s0-3.602-.46-5.33M9.75 8.479v6.542l5.75-3.271z"
-                  // clip-rule="evenodd"
-                />
-              </svg>
-            </Link>
-            <Link href="#" className="text-white">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="20"
-                height="20"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  fill="currentColor"
-                  d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4z"
-                />
-              </svg>
-            </Link>
-            <Link href="#" className="text-white">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="20"
-                height="20"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  fill="currentColor"
-                  d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"
-                />
-              </svg>
-            </Link>
-            <Link href="#" className="text-white">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="20"
-                height="20"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  fill="currentColor"
-                  // fill-rule="evenodd"
-                  d="M23.45 5.948c.166-.546 0-.948-.795-.948H20.03c-.668 0-.976.347-1.143.73c0 0-1.335 3.196-3.226 5.272c-.612.602-.89.793-1.224.793c-.167 0-.418-.191-.418-.738V5.948c0-.656-.184-.948-.74-.948H9.151c-.417 0-.668.304-.668.593c0 .621.946.765 1.043 2.513v3.798c0 .833-.153.984-.487.984c-.89 0-3.055-3.211-4.34-6.885C4.45 5.288 4.198 5 3.527 5H.9c-.75 0-.9.347-.9.73c0 .682.89 4.07 4.145 8.551C6.315 17.341 9.37 19 12.153 19c1.669 0 1.875-.368 1.875-1.003v-2.313c0-.737.158-.884.687-.884c.39 0 1.057.192 2.615 1.667C19.11 18.216 19.403 19 20.405 19h2.625c.75 0 1.126-.368.91-1.096c-.238-.724-1.088-1.775-2.215-3.022c-.612-.71-1.53-1.475-1.809-1.858c-.389-.491-.278-.71 0-1.147c0 0 3.2-4.426 3.533-5.929"
-                  // clip-rule="evenodd"
-                />
-              </svg>
-            </Link>
+            </button>
+            <button className="p-2 border rounded-full">
+              <Search size={15} />
+            </button>
+            <button className="bg-green-600 text-white px-5 py-2 rounded-full  text-sm font-semibold">
+              LOGIN
+            </button>
           </div>
         </div>
       </div>
-    </nav>
+    </div>
   );
-};
-
-export default Navbar;
+}
diff --git a/components/landing-page/opinion-news.tsx b/components/landing-page/opinion-news.tsx
new file mode 100644
index 0000000..8e76e72
--- /dev/null
+++ b/components/landing-page/opinion-news.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+import { getListArticle } from "@/service/article";
+import { ChevronDown } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+type Article = {
+  id: number;
+  title: string;
+  description: string;
+  categoryName: string;
+  slug: string;
+  createdAt: string;
+  createdByName: string;
+  customCreatorName: string;
+  thumbnailUrl: string;
+  categories: { title: string }[];
+  files: { fileUrl: string; file_alt: string }[];
+};
+
+export default function OpinionNews() {
+  const [page, setPage] = useState(1);
+  const [totalPage, setTotalPage] = useState(1);
+  const [articles, setArticles] = useState<Article[]>([]);
+  const [showData, setShowData] = useState("6");
+  const [search] = useState("");
+  const [selectedCategories] = useState<any>("");
+  const [startDateValue] = useState({
+    startDate: null,
+    endDate: null,
+  });
+
+  useEffect(() => {
+    initState();
+  }, [page, showData, startDateValue, selectedCategories]);
+
+  async function initState() {
+    const req = {
+      limit: showData,
+      page,
+      search,
+      categorySlug: Array.from(selectedCategories).join(","),
+      sort: "desc",
+      isPublish: true,
+      sortBy: "created_at",
+    };
+
+    try {
+      const res = await getListArticle(req);
+      setArticles(res?.data?.data || []);
+      setTotalPage(res?.data?.meta?.totalPage || 1);
+    } catch (err) {
+      console.error("Error fetching articles:", err);
+    }
+  }
+
+  return (
+    <section className="max-w-screen-xl mx-auto px-4 py-10">
+      <div className="">
+        {/* TITLE */}
+        <div className="mb-4">
+          <h2 className="text-xl font-black text-[#000]">BERITA OPINI</h2>
+          <div className="w-10 h-1 bg-green-600 mt-1 rounded"></div>
+        </div>
+
+        {/* GRID 4 KOLOM */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
+          {articles.slice(0, 4).map((item) => (
+            <Link href={`/details/${item.slug}`} key={item.id}>
+              <div>
+                {/* GAMBAR */}
+                <div className="relative w-full h-56 rounded-lg overflow-hidden">
+                  <Image
+                    src={item.thumbnailUrl || "/placeholder.jpg"}
+                    alt={item.title}
+                    fill
+                    className="object-cover"
+                  />
+
+                  {/* BADGE CATEGORY DI DALAM GAMBAR */}
+                  <div className="absolute bottom-2 left-2">
+                    <span className="px-3 py-1 text-[10px] font-semibold bg-green-600 text-white rounded">
+                      {item.categoryName || "Kategori"}
+                    </span>
+                  </div>
+                </div>
+
+                {/* JUDUL */}
+                <h3 className="mt-2 text-base font-bold leading-snug line-clamp-2">
+                  {item.title}
+                </h3>
+
+                {/* AUTHOR + DATE */}
+                <div className="text-[11px] mt-2 flex items-center gap-1 text-gray-700">
+                  <span className="font-semibold">
+                    By {item.customCreatorName || item.createdByName || "Admin"}
+                  </span>
+                  <span className="text-yellow-500">-</span>
+                  <span>
+                    {new Date(item.createdAt).toLocaleDateString("id-ID", {
+                      day: "numeric",
+                      month: "long",
+                      year: "numeric",
+                    })}
+                  </span>
+                </div>
+              </div>
+            </Link>
+          ))}
+        </div>
+
+        <div className="relative h-[160px] w-full overflow-hidden rounded-xl mt-6">
+          <Image
+            src="/image-kolom.png"
+            alt="Kolom PPS"
+            fill
+            className="object-contain bg-white"
+          />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/landing-page/youtube-selection.tsx b/components/landing-page/youtube-selection.tsx
new file mode 100644
index 0000000..88e6f80
--- /dev/null
+++ b/components/landing-page/youtube-selection.tsx
@@ -0,0 +1,151 @@
+import { Eye, Heart, MessageCircle } from "lucide-react";
+import Image from "next/image";
+
+interface VideoItem {
+  id: number;
+  title: string;
+  thumbnail: string;
+  duration: string;
+  publishedAt: string;
+  views: string;
+  likes: string;
+  comments: string;
+}
+
+const sampleVideos: VideoItem[] = [
+  {
+    id: 1,
+    title: "Cuplikan Kegiatan Presiden di IKN",
+    thumbnail: "/yt/thumb1.jpg",
+    duration: "12:30",
+    publishedAt: "2 jam yang lalu",
+    views: "12K",
+    likes: "230",
+    comments: "45",
+  },
+  {
+    id: 2,
+    title: "Pembangunan MRT Fase Berikutnya Resmi Dimulai",
+    thumbnail: "/yt/thumb2.jpg",
+    duration: "08:12",
+    publishedAt: "5 jam yang lalu",
+    views: "9.4K",
+    likes: "180",
+    comments: "30",
+  },
+  {
+    id: 3,
+    title: "Wilayah Indonesia Siap Hadapi Cuaca Ekstrem",
+    thumbnail: "/yt/thumb3.jpg",
+    duration: "05:50",
+    publishedAt: "1 hari lalu",
+    views: "21K",
+    likes: "540",
+    comments: "121",
+  },
+  {
+    id: 4,
+    title: "Peningkatan Ekonomi Regional Terus Dijaga",
+    thumbnail: "/yt/thumb4.jpg",
+    duration: "10:44",
+    publishedAt: "2 hari lalu",
+    views: "18K",
+    likes: "420",
+    comments: "88",
+  },
+  {
+    id: 5,
+    title: "Laporan Khusus Perkembangan Industri Kreatif",
+    thumbnail: "/yt/thumb5.jpg",
+    duration: "14:02",
+    publishedAt: "3 hari lalu",
+    views: "30K",
+    likes: "830",
+    comments: "200",
+  },
+  {
+    id: 6,
+    title: "Paparan Menteri Perhubungan Soal Transportasi",
+    thumbnail: "/yt/thumb6.jpg",
+    duration: "07:21",
+    publishedAt: "4 hari lalu",
+    views: "9K",
+    likes: "114",
+    comments: "26",
+  },
+];
+
+export default function YouTubeSection() {
+  return (
+    <section className="max-w-7xl mx-auto px-4 py-8">
+      {/* Header Channel */}
+      <div className="flex items-center gap-4 mb-6">
+        <Image
+          src="/yt/channel-logo.png"
+          alt="Logo Channel"
+          width={70}
+          height={70}
+          className="rounded-full"
+        />
+        <div>
+          <h2 className="text-xl font-semibold">YouTube • Channel Resmi</h2>
+          <p className="text-sm text-gray-600">
+            Lebih dari 3.5 juta pengikut • 12k video
+          </p>
+        </div>
+
+        <a
+          href="#"
+          className="ml-auto bg-red-600 text-white px-4 py-2 rounded-lg font-semibold"
+        >
+          Subscribe
+        </a>
+      </div>
+
+      {/* Grid Video */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        {sampleVideos.map((v) => (
+          <div key={v.id} className="cursor-pointer">
+            <div className="relative w-full h-44">
+              <Image
+                src={v.thumbnail}
+                alt={v.title}
+                fill
+                className="rounded-lg object-cover"
+              />
+
+              <span className="absolute bottom-1 right-1 bg-black/80 text-white text-xs px-2 py-1 rounded">
+                {v.duration}
+              </span>
+            </div>
+
+            <h3 className="font-semibold mt-2 leading-tight line-clamp-2">
+              {v.title}
+            </h3>
+
+            <p className="text-sm text-gray-600">{v.publishedAt}</p>
+
+            <div className="flex items-center gap-4 text-sm text-gray-700 mt-1">
+              <span className="flex items-center gap-1">
+                <Eye size={16} /> {v.views}
+              </span>
+              <span className="flex items-center gap-1">
+                <Heart size={16} /> {v.likes}
+              </span>
+              <span className="flex items-center gap-1">
+                <MessageCircle size={16} /> {v.comments}
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Pagination */}
+      <div className="flex justify-center mt-8">
+        <button className="px-5 py-2 rounded-lg border hover:bg-gray-100">
+          Lihat Selanjutnya →
+        </button>
+      </div>
+    </section>
+  );
+}
diff --git a/components/landing-page/youtube.tsx b/components/landing-page/youtube.tsx
new file mode 100644
index 0000000..b5f6a94
--- /dev/null
+++ b/components/landing-page/youtube.tsx
@@ -0,0 +1,193 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { getListArticle } from "@/service/article";
+
+type Article = {
+  id: number;
+  title: string;
+  description: string;
+  categoryName: string;
+  createdAt: string;
+  slug: string;
+  createdByName: string;
+  customCreatorName?: string;
+  thumbnailUrl?: string;
+  categories?: { title: string }[];
+};
+
+export default function NewsTerkini() {
+  const [articles, setArticles] = useState<Article[]>([]);
+  const [popular, setPopular] = useState<Article[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  async function loadData() {
+    setLoading(true);
+
+    try {
+      const res = await getListArticle({
+        limit: "20",
+        page: 1,
+        search: "",
+        isPublish: true,
+        sort: "desc",
+        sortBy: "created_at",
+      });
+
+      const data = res?.data?.data || [];
+      setArticles(data.slice(0, 5));
+      setPopular(data.slice(0, 5)); // 5 teratas sebagai "TERBANYAK DIBAGIKAN"
+    } catch (err) {
+      console.log(err);
+    }
+
+    setLoading(false);
+  }
+
+  const formatDate = (d: string) =>
+    new Date(d).toLocaleDateString("id-ID", {
+      day: "numeric",
+      month: "long",
+      year: "numeric",
+    });
+
+  if (loading)
+    return (
+      <p className="text-center py-10 text-gray-500">
+        Memuat berita terbaru...
+      </p>
+    );
+
+  return (
+    <section className="max-w-7xl mx-auto px-4 grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-6">
+      <div>
+        <h2 className="text-lg font-bold text-gray-900">BERITA TERKINI</h2>
+        <div className="w-14 h-1 bg-green-600 mt-1 mb-4"></div>
+
+        <div className="space-y-6">
+          {articles.map((item) => (
+            <Link
+              key={item.id}
+              href={`/details/${item.slug}`}
+              className="block border-b pb-6"
+            >
+              <div className="flex gap-4">
+                <div className="flex-1">
+                  {/* CATEGORY */}
+                  <p className="text-[11px] text-green-700 font-semibold mb-1">
+                    {item.categoryName || "Kategori"}
+                  </p>
+
+                  {/* JUDUL */}
+                  <h3 className="font-bold text-base leading-snug line-clamp-2">
+                    {item.title}
+                  </h3>
+
+                  {/* DESKRIPSI */}
+                  <p className="text-sm text-gray-600 line-clamp-2 mt-1">
+                    {item.description}
+                  </p>
+
+                  {/* AUTHOR + DATE */}
+                  <p className="text-xs text-gray-400 mt-2">
+                    By {item.customCreatorName || item.createdByName} —{" "}
+                    {formatDate(item.createdAt)}
+                  </p>
+                </div>
+                <div className="relative w-40 h-28 rounded overflow-hidden flex-shrink-0">
+                  <Image
+                    src={item.thumbnailUrl || "/placeholder.jpg"}
+                    alt={item.title}
+                    fill
+                    className="object-cover"
+                  />
+                </div>
+              </div>
+            </Link>
+          ))}
+        </div>
+
+        {/* LOAD MORE */}
+        <div className="text-center mt-4 text-green-600 text-sm cursor-pointer">
+          LOAD MORE ↓
+        </div>
+      </div>
+
+      {/* ========================== */}
+      {/*   KOLOM KANAN - POPULER    */}
+      {/* ========================== */}
+
+      <div className="lg:col-span-1">
+        <h2 className="text-lg font-bold text-gray-900">TERBANYAK DIBAGIKAN</h2>
+        <div className="w-14 h-1 bg-green-600 mt-1 mb-4"></div>
+
+        <div className="space-y-4">
+          {popular.map((item, index) => (
+            <Link
+              key={item.id}
+              href={`/details/${item.slug}`}
+              className="flex gap-3 border-b pb-4"
+            >
+              {/* NOMOR */}
+              <div className="text-green-600 font-extrabold text-3xl leading-none">
+                {(index + 1).toString().padStart(2, "0")}
+              </div>
+
+              <div className="flex-1">
+                <p className="text-[10px] text-gray-500">
+                  {item.categories?.[0]?.title || "Kategori"}
+                </p>
+                <h4 className="font-semibold text-sm leading-snug line-clamp-2">
+                  {item.title}
+                </h4>
+                <p className="text-[10px] text-gray-400 mt-1">
+                  {formatDate(item.createdAt)}
+                </p>
+              </div>
+
+              {/* THUMBNAIL KECIL */}
+              <div className="relative w-16 h-14 rounded overflow-hidden">
+                <Image
+                  src={item.thumbnailUrl || "/placeholder.jpg"}
+                  alt={item.title}
+                  fill
+                  className="object-cover"
+                />
+              </div>
+            </Link>
+          ))}
+        </div>
+
+        {/* ========================== */}
+        {/*     BANNER KANAN PPS       */}
+        {/* ========================== */}
+
+        <div className="mt-6">
+          <div className="relative h-[180px] border rounded-lg overflow-hidden mb-6">
+            <Image
+              src="/image-kolom.png"
+              alt="Kolom PPS"
+              fill
+              className="object-contain bg-white"
+            />
+          </div>
+
+          <div className="relative h-[180px] border rounded-lg overflow-hidden">
+            <Image
+              src="/image-kolom.png"
+              alt="Kolom PPS"
+              fill
+              className="object-contain bg-white"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}