update domain

.gitlab-ci.yml

@@ -7,15 +7,16 @@ 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"]
+      command: ["--insecure-registry=38.47.185.86:8900"]
   script:
     - docker logout
-    - docker login -u $DEPLOY_USERNAME -p $DEPLOY_TOKEN 103.82.242.92:8900
+    - docker login -u $DEPLOY_USERNAME -p $DEPLOY_TOKEN 38.47.185.86:8900
-    - docker build -t 103.82.242.92:8900/medols/web-info-kreasi:dev .
+    - docker build -t 38.47.185.86:8900/medols/web-info-kreasi:dev .
-    - docker push 103.82.242.92:8900/medols/web-info-kreasi:dev
+    - docker push 38.47.185.86:8900/medols/web-info-kreasi:dev
 
 auto-deploy:
   stage: deploy
@@ -26,4 +27,4 @@ auto-deploy:
   services:
     - docker:dind
   script:
-    - curl --user admin:$JENKINS_PWD http://38.47.180.165:8080/job/auto-deploy-info-kreasi/build?token=autodeploymedols
+    - curl --user admin:$JENKINS_PWD http://38.47.185.86:8080/job/auto-deploy-info-kreasi/build?token=autodeploymedols

app/page.tsx

@@ -1,19 +1,24 @@
-import BottomArticlesSection from "@/components/landing-page/bottom-article";
+import Development from "@/components/landing-page/development";
 import Footer from "@/components/landing-page/footer";
 import Header from "@/components/landing-page/header";
-
+import NewsTerkini from "@/components/landing-page/health";
 import Navbar from "@/components/landing-page/navbar";
 import News from "@/components/landing-page/news";
+import OpinionNews from "@/components/landing-page/opinion-news";
+import YouTubeSection from "@/components/landing-page/youtube-selection";
 
 export default function Home() {
   return (
-    <div className="flex min-h-screen flex-col font-[family-name:var(--font-geist-sans)] bg-white">
+    <div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
       <Navbar />
       <div className="flex-1">
         <Header />
-        <BottomArticlesSection />
       </div>
       <News />
+      <Development />
+      <OpinionNews />
+      <NewsTerkini />
+      <YouTubeSection />
       <Footer />
     </div>
   );

components/details/details-content.tsx

@@ -21,6 +21,7 @@ import {
 } from "@/service/master-user";
 import { saveActivity } from "@/service/activity-log";
 import { Badge } from "../ui/badge";
+import { formatTextToHtmlTag } from "@/utils/global";
 
 type TabKey = "trending" | "comments" | "latest";
 
@@ -80,7 +81,7 @@ export default function DetailContent() {
   const [diseId, setDiseId] = useState(0);
   const [thumbnailImg, setThumbnailImg] = useState<File[]>([]);
   const [selectedMainImage, setSelectedMainImage] = useState<number | null>(
-    null
+    null,
   );
 
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -312,7 +313,7 @@ export default function DetailContent() {
     close();
   }
 
-  if (!articleDetail?.files || articleDetail.files.length === 0) {
+  if (!articleDetail?.files || articleDetail?.files.length === 0) {
     return (
       <div className="w-full h-[400px] bg-gray-100 flex items-center justify-center rounded-lg">
         <p className="text-gray-400 text-sm">Gambar tidak tersedia</p>
@@ -320,6 +321,16 @@ export default function DetailContent() {
     );
   }
 
+  function removeImgTags(htmlString?: { __html: string }) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(String(htmlString?.__html), "text/html");
+
+    const images = doc.querySelectorAll("img");
+    images.forEach((img) => img.remove());
+
+    return { __html: doc.body.innerHTML };
+  }
+
   return (
     <>
       <div className="bg-white grid grid-cols-1 md:grid-cols-3 gap-6 px-8 py-8">
@@ -329,7 +340,7 @@ export default function DetailContent() {
             {articleDetail?.title}
           </h1>
           <div className="flex items-center space-x-2 text-sm text-gray-500 mb-4">
-            <div className="text-orange-400">
+            <div className="text-blue-400">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="24"
@@ -349,21 +360,23 @@ export default function DetailContent() {
               </svg>
             </div>
 
-            <span className="text-orange-400 font-medium">
+            <span className="text-blue-400 font-medium">
               {articleDetail?.customCreatorName || articleDetail?.createdByName}
             </span>
             <span>•</span>
             <span>
-              <span>
+              {new Date(articleDetail?.publishedAt ?? articleDetail?.createdAt)
-                {new Date(articleDetail?.publishedAt).toLocaleDateString(
+                .toLocaleString("id-ID", {
-                  "id-ID",
+                  day: "numeric",
-                  {
+                  month: "long",
-                    day: "numeric",
+                  year: "numeric",
-                    month: "long",
+                  hour: "2-digit",
-                    year: "numeric",
+                  minute: "2-digit",
-                  }
+                  hour12: false,
-                )}
+                  timeZone: "Asia/Jakarta",
-              </span>
+                })
+                .replace("pukul ", "")}{" "}
+              WIB
             </span>
             <span>•</span>
             <span>{articleDetail?.categories?.[0]?.title}</span>
@@ -373,8 +386,8 @@ export default function DetailContent() {
             {/* Gambar utama */}
             <div className="w-full">
               <Image
-                src={articleDetail.files[selectedIndex].fileUrl}
+                src={articleDetail?.files[selectedIndex].fileUrl}
-                alt={articleDetail.files[selectedIndex].fileAlt || "Berita"}
+                alt={articleDetail?.files[selectedIndex].fileAlt || "Berita"}
                 width={800}
                 height={400}
                 className="rounded-lg w-full object-cover"
@@ -478,9 +491,10 @@ export default function DetailContent() {
             <div className="flex-1 overflow-y-auto">
               <div className="text-gray-700 leading-relaxed text-justify">
                 <div
-                  dangerouslySetInnerHTML={{
+                  dangerouslySetInnerHTML={removeImgTags(
-                    __html: articleDetail?.htmlDescription || "",
+                    formatTextToHtmlTag(articleDetail?.htmlDescription),
-                  }}
+                  )}
+                  className="text-sm lg:text-xl lg:leading-8 text-justify space-y-4"
                 />
               </div>
               {/* <Author /> */}
@@ -591,11 +605,11 @@ export default function DetailContent() {
                       htmlFor="komentar"
                       className="block text-sm font-medium mb-1"
                     >
-                      Komentar <span className="text-green-600">*</span>
+                      Komentar <span className="text-blue-600">*</span>
                     </label>
                     <textarea
                       id="komentar"
-                      className="w-full border border-gray-300 rounded-md p-3 h-40 focus:outline-none focus:ring-2 focus:ring-green-600"
+                      className="w-full border border-gray-300 rounded-md p-3 h-40 focus:outline-none focus:ring-2 focus:ring-blue-600"
                       {...register("comment", { required: true })}
                     />
                   </div>
@@ -606,7 +620,7 @@ export default function DetailContent() {
                       htmlFor="nama"
                       className="block text-sm font-medium mb-1"
                     >
-                      Nama <span className="text-green-600">*</span>
+                      Nama <span className="text-blue-600">*</span>
                     </label>
                     <input
                       type="text"
@@ -622,7 +636,7 @@ export default function DetailContent() {
                       htmlFor="email"
                       className="block text-sm font-medium mb-1"
                     >
-                      Email <span className="text-green-600">*</span>
+                      Email <span className="text-blue-600">*</span>
                     </label>
                     <input
                       type="email"
@@ -634,7 +648,7 @@ export default function DetailContent() {
 
                   <button
                     type="submit"
-                    className="bg-green-600 hover:bg-green-700 text-white font-semibold px-6 py-2 rounded-md transition mt-2 w-full"
+                    className="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-2 rounded-md transition mt-2 w-full"
                   >
                     KIRIM KOMENTAR
                   </button>
@@ -667,7 +681,7 @@ export default function DetailContent() {
                   </div>
                   <button
                     type="submit"
-                    className="bg-green-600 hover:bg-green-700 text-white font-semibold px-6 py-2 rounded-md transition mt-4 w-full"
+                    className="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-2 rounded-md transition mt-4 w-full"
                   >
                     Kirim
                   </button>
@@ -736,7 +750,7 @@ export default function DetailContent() {
                     onClick={() => setActiveTab(tab.id)}
                     className={`pb-2 text-sm font-medium ${
                       activeTab === tab.id
-                        ? "border-b-2 border-green-600 text-green-600"
+                        ? "border-b-2 border-blue-600 text-blue-600"
                         : "text-gray-600"
                     }`}
                   >
@@ -802,7 +816,7 @@ export default function DetailContent() {
             </div>
 
             <div className="mt-6">
-              <h3 className="text-base font-semibold mb-2 text-gray-800 border-b pb-1 border-green-600 inline-block">
+              <h3 className="text-base font-semibold mb-2 text-gray-800 border-b pb-1 border-blue-600 inline-block">
                 Recommended
               </h3>
 
@@ -829,7 +843,7 @@ export default function DetailContent() {
                             day: "2-digit",
                             month: "long",
                             year: "numeric",
-                          }
+                          },
                         )}
                       </p>
                     </div>
@@ -859,7 +873,7 @@ export default function DetailContent() {
                               day: "2-digit",
                               month: "long",
                               year: "numeric",
-                            }
+                            },
                           )}
                         </p>
                       </div>

components/editor/custom-editor.js

@@ -1,7 +1,7 @@
-// components/custom-editor.js
+import React, { useCallback, useEffect, useRef, useState } from "react";
-
-import React from "react";
 import { CKEditor } from "@ckeditor/ckeditor5-react";
+
+import "@/styles/custom-editor.css";
 import Editor from "@/vendor/ckeditor5/build/ckeditor";
 
 function CustomEditor(props) {
@@ -47,7 +47,7 @@ function CustomEditor(props) {
               padding: 1rem;
             }
             p {
-              margin: 0.5em 0;
+              margin: 0.5em 0 !important;
             }
             h1, h2, h3, h4, h5, h6 {
               margin: 1em 0 0.5em 0;
@@ -72,98 +72,6 @@ function CustomEditor(props) {
           },
         }}
       />
-      <style jsx>{`
-        .ckeditor-wrapper {
-          border-radius: 6px;
-          overflow: hidden;
-          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
-            0 1px 2px 0 rgba(0, 0, 0, 0.06);
-        }
-
-        .ckeditor-wrapper :global(.ck.ck-editor__main) {
-          min-height: ${props.height || 400}px;
-          max-height: ${maxHeight}px;
-        }
-
-        .ckeditor-wrapper :global(.ck.ck-editor__editable) {
-          min-height: ${(props.height || 400) - 50}px;
-          max-height: ${maxHeight - 50}px;
-          overflow-y: auto !important;
-          scrollbar-width: thin;
-          scrollbar-color: #cbd5e1 #f1f5f9;
-          background: #fff !important;
-          color: #111 !important;
-        }
-
-        /* Dark mode support */
-        :global(.dark) .ckeditor-wrapper :global(.ck.ck-editor__editable) {
-          background: #111 !important;
-          color: #f9fafb !important;
-        }
-
-        :global(.dark) .ckeditor-wrapper :global(.ck.ck-editor__editable h1),
-        :global(.dark) .ckeditor-wrapper :global(.ck.ck-editor__editable h2),
-        :global(.dark) .ckeditor-wrapper :global(.ck.ck-editor__editable h3),
-        :global(.dark) .ckeditor-wrapper :global(.ck.ck-editor__editable h4),
-        :global(.dark) .ckeditor-wrapper :global(.ck.ck-editor__editable h5),
-        :global(.dark) .ckeditor-wrapper :global(.ck.ck-editor__editable h6) {
-          color: #f9fafb !important;
-        }
-
-        :global(.dark)
-          .ckeditor-wrapper
-          :global(.ck.ck-editor__editable blockquote) {
-          background-color: #1f2937 !important;
-          border-left-color: #374151 !important;
-          color: #f3f4f6 !important;
-        }
-
-        /* Custom scrollbar styling for webkit browsers */
-        .ckeditor-wrapper :global(.ck.ck-editor__editable::-webkit-scrollbar) {
-          width: 8px;
-        }
-
-        .ckeditor-wrapper
-          :global(.ck.ck-editor__editable::-webkit-scrollbar-track) {
-          background: #f1f5f9;
-          border-radius: 4px;
-        }
-
-        .ckeditor-wrapper
-          :global(.ck.ck-editor__editable::-webkit-scrollbar-thumb) {
-          background: #cbd5e1;
-          border-radius: 4px;
-        }
-
-        .ckeditor-wrapper
-          :global(.ck.ck-editor__editable::-webkit-scrollbar-thumb:hover) {
-          background: #94a3b8;
-        }
-
-        /* Dark mode scrollbar */
-        :global(.dark)
-          .ckeditor-wrapper
-          :global(.ck.ck-editor__editable::-webkit-scrollbar-track) {
-          background: #1f2937;
-        }
-
-        :global(.dark)
-          .ckeditor-wrapper
-          :global(.ck.ck-editor__editable::-webkit-scrollbar-thumb) {
-          background: #4b5563;
-        }
-
-        :global(.dark)
-          .ckeditor-wrapper
-          :global(.ck.ck-editor__editable::-webkit-scrollbar-thumb:hover) {
-          background: #6b7280;
-        }
-
-        /* Ensure content doesn't overflow */
-        .ckeditor-wrapper :global(.ck.ck-editor__editable .ck-content) {
-          overflow: hidden;
-        }
-      `}</style>
     </div>
   );
 }

components/editor/view-editor.js

@@ -48,7 +48,8 @@ function ViewEditor(props) {
         .ckeditor-view-wrapper {
           border-radius: 6px;
           overflow: hidden;
-          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
+          box-shadow:
+            0 1px 3px 0 rgba(0, 0, 0, 0.1),
             0 1px 2px 0 rgba(0, 0, 0, 0.06);
         }
 

components/landing-page/development.tsx

@@ -0,0 +1,136 @@
+"use client";
+import { useEffect, useState } from "react";
+import Image from "next/image";
+import { getListArticle } from "@/service/article";
+import Link from "next/link";
+
+type Article = {
+  id: number;
+  title: string;
+  description: string;
+  categoryName: string;
+  slug: string;
+  createdAt: string;
+  publishedAt: string;
+  createdByName: string;
+  customCreatorName: string;
+  thumbnailUrl: string;
+  categories: { title: string }[];
+  files: { fileUrl: string; file_alt: string }[];
+};
+
+export default function Development() {
+  const [articles, setArticles] = useState<Article[]>([]);
+  const [page, setPage] = useState(1);
+  const [totalPage, setTotalPage] = useState(1);
+
+  useEffect(() => {
+    initState();
+  }, [page]);
+
+  async function initState() {
+    const req = {
+      limit: "10",
+      page,
+      search: "",
+      categorySlug: "",
+      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);
+    }
+  }
+
+  // Format tanggal ke gaya lokal
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString("id-ID", {
+      day: "2-digit",
+      month: "long",
+      year: "numeric",
+    });
+  };
+
+  // Mapping struktur seperti dummy sebelumnya
+  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);
+
+  return (
+    <section className="max-w-7xl mx-auto px-4">
+      <div className="bg-white ">
+        <div className="mb-4">
+          <h2 className="text-xl font-black text-[#000]">JAGA NEGERI</h2>
+
+          <div className="w-10 h-1 bg-blue-600 mt-1 rounded"></div>
+        </div>
+
+        <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-blue-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.publishedAt).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>
+  );
+}

components/landing-page/footer.tsx

@@ -1,93 +1,66 @@
 // components/Footer.tsx
 import Image from "next/image";
-import Link from "next/link";
+import { Facebook, Twitter, Instagram, Youtube } from "lucide-react";
 
 export default function Footer() {
   return (
-    <footer className="bg-[#071E2F] text-white text-sm font-sans">
+    <footer className="bg-[#ECEFF5] pt-20 pb-10 w-full">
-      <div className="flex flex-col items-center justify-center py-10 px-4 space-y-10">
+      <div className="max-w-screen-xl mx-auto px-6 grid grid-cols-1 md:grid-cols-2 ">
-        <div className="relative w-48 h-48">
+        {/* Logo */}
+        <div className="flex justify-center md:justify-end">
           <Image
-            src="/infokreasi.png"
+            src="/infokreasi-logo.png"
             alt="Logo"
-            fill
+            width={230}
+            height={230}
             className="object-contain"
           />
         </div>
 
-        <div className="flex space-x-6 text-white text-xl">
+        {/* Subscribe Box */}
-          <div className="flex items-center gap-4 text-lg">
+        <div className="flex justify-center md:justify-end">
-            <Link href="#" aria-label="Facebook">
+          <div className="  p-8  w-full md:w-[420px]">
-              <svg
+            <h2 className="text-2xl font-semibold text-gray-800 leading-snug">
-                xmlns="http://www.w3.org/2000/svg"
+              Subscribe us to get <br />
-                width="15"
+              the latest news!
-                height="15"
+            </h2>
-                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="#" aria-label="Twitter">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="14"
-                height="14"
-                viewBox="0 0 14 14"
-              >
-                <g fill="none">
-                  <g
-                  // clip-path="url(#primeTwitter0)"
-                  >
-                    <path
-                      fill="currentColor"
-                      d="M11.025.656h2.147L8.482 6.03L14 13.344H9.68L6.294 8.909l-3.87 4.435H.275l5.016-5.75L0 .657h4.43L7.486 4.71zm-.755 11.4h1.19L3.78 1.877H2.504z"
-                    />
-                  </g>
-                  <defs>
-                    <clipPath id="primeTwitter0">
-                      <path fill="#fff" d="M0 0h14v14H0z" />
-                    </clipPath>
-                  </defs>
-                </g>
-              </svg>
-            </Link>
-            <Link href="#" aria-label="Instagram">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="15"
-                height="15"
-                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="#" aria-label="YouTube">
+            <label className="block mt-6 mb-1 text-sm text-gray-600">
-              <svg
+              Email address:
-                xmlns="http://www.w3.org/2000/svg"
+            </label>
-                width="15"
+
-                height="15"
+            <input
-                viewBox="0 0 24 24"
+              type="email"
-              >
+              placeholder="Your email address"
-                <path
+              className="w-full border border-gray-300 rounded-md px-4 py-3 outline-none"
-                  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"
+
-                />
+            <button className="mt-4 bg-blue-600 hover:bg-blue-500 text-white px-6 py-3 rounded-md font-medium">
-              </svg>
+              SIGN UP
-            </Link>
+            </button>
           </div>
         </div>
-
-        <p className="text-white text-xs opacity-60">
-          © 2025 InfoKreasi - All Rights Reserved.
-        </p>
       </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 Mikul News - All Rights Reserved.
+      </p>
     </footer>
   );
 }

components/landing-page/header.tsx

@@ -1,19 +1,20 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import Image from "next/image";
 import { getListArticle } from "@/service/article";
-import { Calendar } 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;
+  slug: string;
   createdByName: string;
+  publishedAt: string;
+  customCreatorName: string;
   thumbnailUrl: string;
   categories: { title: string }[];
   files: { fileUrl: string; file_alt: string }[];
@@ -21,16 +22,11 @@ type Article = {
 
 export default function Header() {
   const [articles, setArticles] = useState<Article[]>([]);
-  const [showData] = useState("5"); // default ambil 5 artikel
 
   useEffect(() => {
-    fetchArticles();
+    const fetchArticles = async () => {
-  }, []);
-
-  async function fetchArticles() {
-    try {
       const req = {
-        limit: showData,
+        limit: "10",
         page: 1,
         search: "",
         categorySlug: "",
@@ -41,105 +37,196 @@ export default function Header() {
 
       const res = await getListArticle(req);
       setArticles(res?.data?.data || []);
-    } catch (error) {
+    };
-      console.error("Gagal memuat artikel:", error);
+
-    }
+    fetchArticles();
-  }
+  }, []);
+
+  const flashArticles = articles.slice(0, 8);
+  const mainArticle = articles[8] || articles[0];
+  const recentPosts = articles.slice(1, 5);
 
   return (
-    <section
+    <section className="max-w-7xl mx-auto bg-white px-4">
-      className="py-6 px-4 md:px-8 bg-cover bg-center bg-no-repeat"
+      {/* FLASH STRIP */}
-      style={{
+      <div className="flex items-center justify-between mt-6 mb-3">
-        backgroundImage: "url('/bg.jpg')",
+        <div className="flex items-center gap-3">
-      }}
+          <h4 className="text-blue-600 font-semibold">Flash</h4>
-    >
+          <span className="text-red-500">⚡</span>
-      <div className="max-w-[1350px] mx-auto flex flex-col gap-6">
+        </div>
-        {/* Bagian atas (2 artikel pertama) */}
+        <div className="text-xs text-gray-500 hidden md:block">LOAD MORE ➜</div>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+      </div>
-          {articles.slice(0, 2).map((item) => (
+
-            <div
+      <div className="overflow-x-auto no-scrollbar py-2">
-              key={item.id}
+        <div className="flex gap-4">
-              className="relative w-full h-[220px] md:h-[400px] overflow-hidden"
+          {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"
             >
-              <Link href={`/details/${item?.slug}`}>
+              <div className="relative w-[200px] md:w-[220px] h-[140px]">
                 <Image
-                  src={item.thumbnailUrl || "/default.jpg"}
+                  src={
+                    item.thumbnailUrl ||
+                    item.files?.[0]?.fileUrl ||
+                    "/placeholder.jpg"
+                  }
                   alt={item.title}
                   fill
                   className="object-cover"
                 />
-                <div className="absolute inset-0 bg-black/10 p-4 flex flex-col justify-end text-white">
+              </div>
-                  <span className="text-xs font-medium tracking-wide">
+
-                    {item.categoryName}
+              {/* 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-base md:text-xl font-semibold leading-tight">
+                  <span>●</span>
-                    {item.title}
+                </div>
-                  </h2>
+              </div>
-                  <div className="flex flex-row item-center gap-3">
+
-                    <div className="text-sm  text-white/70">
+              {/* play icon */}
-                      {item.createdByName}{" "}
+              <div className="absolute top-3 right-3 w-8 h-8 bg-white/80 rounded-full flex items-center justify-center">
-                    </div>
+                <svg
-                    <div className="text-blue-400 mt-1">
+                  className="w-4 h-4 text-black"
-                      <Calendar size={14} />
+                  viewBox="0 0 24 24"
-                    </div>
+                  fill="currentColor"
-                    <div className="text-sm">
+                >
-                      {new Date(item.createdAt).toLocaleDateString("en-GB", {
+                  <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-blue-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.publishedAt).toLocaleDateString(
+                      "id-ID",
+                      {
                         day: "2-digit",
                         month: "long",
                         year: "numeric",
-                      })}
+                      },
-                    </div>
+                    )}
-                  </div>
+                  </span>
                 </div>
-              </Link>
+              </div>
-            </div>
+            </Link>
-          ))}
+          </div>
-        </div>
+        ) : (
+          <p className="text-gray-500">Loading...</p>
+        )}
 
-        {/* Bagian bawah (2 artikel selanjutnya) */}
+        {/* RIGHT SIDE – RECENT POSTS */}
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div>
-          {articles.slice(2, 4).map((item) => (
+          <h3 className="text-lg font-semibold mb-3">Recent Posts</h3>
-            <div
+
-              key={item.id}
+          <div className="space-y-4">
-              className="flex flex-col md:flex-row gap-4 overflow-hidden"
+            {recentPosts.map((item) => (
-            >
+              <Link
-              <Link href={`/details/${item?.slug}`}>
+                key={item.id}
-                <div className="relative w-full md:w-[200px] h-[180px] md:h-[175px] shrink-0">
+                href={`/details/${item.slug}`}
+                className="flex gap-3"
+              >
+                <div className="relative w-35 h-25 rounded-md overflow-hidden">
                   <Image
-                    src={item.thumbnailUrl || "/default.jpg"}
+                    src={
+                      item.thumbnailUrl ||
+                      item.files?.[0]?.fileUrl ||
+                      "/placeholder.jpg"
+                    }
                     alt={item.title}
                     fill
                     className="object-cover"
                   />
                 </div>
-                <div className="flex flex-col justify-center gap-2 px-1 md:px-0">
+
-                  <span className="text-xs font-medium text-white">
+                <div className="flex flex-col">
-                    {item.categoryName}
+                  <p className="text-sm font-semibold line-clamp-2">
-                  </span>
-                  <h3 className="text-base md:text-xl font-semibold leading-snug text-white font-serif">
                     {item.title}
-                  </h3>
+                  </p>
-                  <div className="flex flex-row item-center gap-3">
+                  <span className="text-xs text-gray-500 mt-1">
-                    <div className="text-sm  text-white">
+                    {new Date(item.publishedAt).toLocaleDateString("id-ID", {
-                      {item.createdByName}{" "}
+                      day: "2-digit",
-                    </div>
+                      month: "long",
-                    <div className="text-blue-400 mt-1">
+                      year: "numeric",
-                      <Calendar size={12} />
+                    })}
-                    </div>
+                  </span>
-                    <div className="text-sm text-white">
-                      {new Date(item.createdAt).toLocaleDateString("en-GB", {
-                        day: "2-digit",
-                        month: "long",
-                        year: "numeric",
-                      })}
-                    </div>
-                  </div>
                 </div>
               </Link>
-            </div>
+            ))}
-          ))}
+          </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>
   );
 }

components/landing-page/headers-latest.tsx

@@ -96,7 +96,7 @@ export default function HeaderLatest() {
                       height={400}
                       className="w-full h-[250px] object-cover rounded-md"
                     />
-                    <p className="text-xs font-semibold text-yellow-600 mt-4 uppercase">
+                    <p className="text-xs font-semibold text-blue-600 mt-4 uppercase">
                       {article.categories?.[0]?.title ||
                         article.categoryName ||
                         "BERITA"}
@@ -115,7 +115,7 @@ export default function HeaderLatest() {
                     </p>
                     <Link
                       href={`/details/${article.slug}`}
-                      className="mt-2 inline-block text-sm text-yellow-600 font-semibold hover:underline"
+                      className="mt-2 inline-block text-sm text-blue-600 font-semibold hover:underline"
                     >
                       READ MORE &gt;
                     </Link>
@@ -131,7 +131,7 @@ export default function HeaderLatest() {
                   onClick={() => setPage(i + 1)}
                   className={`w-9 h-9 rounded-full border border-gray-300 text-sm ${
                     page === i + 1
-                      ? "bg-yellow-400 text-white font-bold"
+                      ? "bg-blue-400 text-white font-bold"
                       : "text-gray-700 hover:bg-gray-200"
                   }`}
                 >
@@ -154,7 +154,7 @@ export default function HeaderLatest() {
                     className="w-20 h-20 object-cover rounded-md"
                   />
                   <div className="flex-1">
-                    <p className="text-xs font-semibold text-yellow-600 uppercase">
+                    <p className="text-xs font-semibold text-blue-600 uppercase">
                       {post.categories?.[0]?.title ||
                         post.categoryName ||
                         "BERITA"}
@@ -170,7 +170,7 @@ export default function HeaderLatest() {
                       })}
                     </p>
                   </div>
-                  <div className="text-3xl font-bold text-yellow-300 leading-none">
+                  <div className="text-3xl font-bold text-blue-300 leading-none">
                     {String(index + 1).padStart(2, "0")}
                   </div>
                 </Link>
@@ -200,11 +200,11 @@ export default function HeaderLatest() {
                   id="email"
                   type="email"
                   placeholder="Your email address"
-                  className="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                  className="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
                 />
               </div>
 
-              <button className="w-full bg-yellow-400 hover:bg-yellow-500 text-white font-semibold py-2 rounded transition">
+              <button className="w-full bg-blue-400 hover:bg-blue-500 text-white font-semibold py-2 rounded transition">
                 SIGN UP
               </button>
             </div>

components/landing-page/health.tsx

@@ -0,0 +1,186 @@
+"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;
+  publishedAt: 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));
+    } 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-blue-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-blue-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.publishedAt)}
+                  </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-blue-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-blue-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-blue-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>
+  );
+}

components/landing-page/latest-news.tsx

@@ -0,0 +1,126 @@
+"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;
+  publishedAt: string;
+  createdByName: string;
+  customCreatorName: string;
+  thumbnailUrl: string;
+  categories: { title: string }[];
+  files: { fileUrl: string; file_alt: string }[];
+};
+
+export default function News() {
+  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 POPULER</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.publishedAt).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>
+  );
+}

components/landing-page/navbar.tsx

@@ -1,266 +1,190 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { Search } from "lucide-react";
 import Image from "next/image";
-import {
-  Menu,
-  Search,
-  Facebook,
-  Instagram,
-  Youtube,
-  Twitter,
-  X,
-} from "lucide-react";
-import { Button } from "../ui/button";
 import Link from "next/link";
-import { cn } from "@/lib/utils";
 import { usePathname } from "next/navigation";
 
-const navItems = [
-  { label: "BERANDA", href: "/", active: true },
-  { label: "BERITA TERKINI", href: "/category/latest-news" },
-  { label: "BERITA POPULER", href: "/category/popular-news" },
-  { label: "DAMAI INDONESIAKU", href: "/category/peace-indonesia" },
-  { label: "JAGA NEGERI", href: "/category/protect" },
-  { label: "BERITA OPINI", href: "/category/opinion-news" },
-];
-
 export default function Navbar() {
   const pathname = usePathname();
-  const [isMobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const isActive = (href: any) => {
-
+    return pathname === href || pathname.startsWith(href + "/");
-  const handleMenuClick = () => {
-    if (typeof window !== "undefined" && window.innerWidth < 768) {
-      setMobileMenuOpen(true);
-    }
   };
 
   return (
-    <nav className="w-full bg-white z-50 relative">
+    <div className="w-full bg-white py-4 border-b">
-      <div className="w-full border-b border-gray-200">
+      <div className="max-w-screen-xl mx-auto flex flex-col justify-between px-4">
-        <div className="max-w-[1350px] mx-auto">
+        {/* Left: Logo */}
-          <div className="flex justify-between items-center px-6 py-4 bg-white">
+        <div className="flex flex-row justify-between mb-3">
-            <div className="flex items-center space-x-2">
+          <div className="flex items-center">
-              <Image src="/infokreasi.png" alt="Logo" width={98} height={98} />
+            <Image
-            </div>
+              src="/infokreasi-logo.png"
+              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>
 
-            <div className="hidden md:flex items-center gap-4">
+              <Link href="#">
-              <div className="flex space-x-6 text-black text-xl">
+                <svg
-                <div className="flex items-center gap-4 text-lg">
+                  xmlns="http://www.w3.org/2000/svg"
-                  <Link href="#" aria-label="Facebook">
+                  width="18"
-                    <svg
+                  viewBox="0 0 24 24"
-                      xmlns="http://www.w3.org/2000/svg"
+                >
-                      width="15"
+                  <path
-                      height="15"
+                    fill="currentColor"
-                      viewBox="0 0 24 24"
+                    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"
-                    >
+                  />
-                      <path
+                </svg>
-                        fill="currentColor"
+              </Link>
-                        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="#" aria-label="Twitter">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="14"
-                      height="14"
-                      viewBox="0 0 14 14"
-                    >
-                      <g fill="none">
-                        <g
-                        // clip-path="url(#primeTwitter0)"
-                        >
-                          <path
-                            fill="currentColor"
-                            d="M11.025.656h2.147L8.482 6.03L14 13.344H9.68L6.294 8.909l-3.87 4.435H.275l5.016-5.75L0 .657h4.43L7.486 4.71zm-.755 11.4h1.19L3.78 1.877H2.504z"
-                          />
-                        </g>
-                        <defs>
-                          <clipPath id="primeTwitter0">
-                            <path fill="#fff" d="M0 0h14v14H0z" />
-                          </clipPath>
-                        </defs>
-                      </g>
-                    </svg>
-                  </Link>
-                  <Link href="#" aria-label="Instagram">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="15"
-                      height="15"
-                      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="#" aria-label="YouTube">
+              <Link href="#">
-                    <svg
+                <svg
-                      xmlns="http://www.w3.org/2000/svg"
+                  xmlns="http://www.w3.org/2000/svg"
-                      width="15"
+                  width="18"
-                      height="15"
+                  viewBox="0 0 24 24"
-                      viewBox="0 0 24 24"
+                >
-                    >
+                  <path
-                      <path
+                    fill="currentColor"
-                        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"
-                        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>
-                    </svg>
+              </Link>
-                  </Link>
+
-                </div>
+              <Link href="#">
-              </div>
+                <svg
-              <Search
+                  xmlns="http://www.w3.org/2000/svg"
-                className="text-black hover:opacity-80 cursor-pointer"
+                  width="18"
-                size={16}
+                  viewBox="0 0 24 24"
-              />
+                >
-              <Button className="bg-[#2481D3] text-white px-4 py-2 rounded hover:bg-blue-700">
+                  <path
-                Subscribe Us!
+                    fill="currentColor"
-              </Button>
+                    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"
-              <Link href={"/auth"}>
+                  />
-                <Button className="bg-black text-white rounded-md px-5 py-2 hover:bg-yellow-500">
+                </svg>
-                  Login
-                </Button>
               </Link>
             </div>
           </div>
         </div>
+        {/* 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={
+                isActive("/")
+                  ? "text-blue-500 underline"
+                  : "text-black hover:text-blue-500"
+              }
+            >
+              Beranda
+            </Link>
 
-        <div className="bg-[#247ED1]">
+            <Link
-          <div className="max-w-[1350px] mx-auto px-6 py-3 flex justify-between items-center text-white">
+              href="/category/latest-news"
-            <div className="hidden md:flex gap-6 text-sm font-semibold">
+              className={
-              <div className="flex gap-5">
+                isActive("/category/latest-news")
-                {navItems.map((item) => {
+                  ? "text-blue-500 underline"
-                  const isActive = pathname === item.href;
+                  : "text-black hover:text-blue-500"
-                  return (
+              }
-                    <Link
+            >
-                      key={item.label}
+              Berita Terkini
-                      href={item.href}
+            </Link>
-                      className={cn(
+
-                        "transition-colors",
+            <Link
-                        isActive ? "text-white" : "text-black"
+              href="/category/popular-news"
-                      )}
+              className={
-                    >
+                isActive("/category/popular-news")
-                      {item.label}
+                  ? "text-blue-500 underline"
-                    </Link>
+                  : "text-black hover:text-blue-500"
-                  );
+              }
-                })}
+            >
-              </div>
+              Berita populer
-            </div>
+            </Link>
-            <div className="block">
+
-              <Menu
+            <Link
-                className="text-white cursor-pointer"
+              href="/category/peace-indonesia"
-                onClick={handleMenuClick}
+              className={
-              />
+                isActive("/category/peace-indonesia")
-            </div>
+                  ? "text-blue-500 underline"
-            <div className="md:hidden" />{" "}
+                  : "text-black hover:text-blue-500"
+              }
+            >
+              Damai Indonesiaku
+            </Link>
+            <Link
+              href="/category/protect"
+              className={
+                isActive("/category/protect")
+                  ? "text-blue-500 underline"
+                  : "text-black hover:text-blue-500"
+              }
+            >
+              Jaga Negeri
+            </Link>
+            <Link
+              href="/category/opinion-news"
+              className={
+                isActive("/category/opinion-news")
+                  ? "text-blue-500 underline"
+                  : "text-black hover:text-blue-500"
+              }
+            >
+              Berita Opini
+            </Link>
+          </nav>
+
+          <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>
+
+            {/* BURGER BUTTON (mobile menu) */}
+            <button className="md:hidden p-2 rounded-lg border">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={2}
+                stroke="currentColor"
+                className="w-6 h-6"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M4 6h16M4 12h16M4 18h16"
+                />
+              </svg>
+            </button>
+            <button className="p-2 border rounded-full">
+              <Search size={15} />
+            </button>
+            <Link href={"/auth"}>
+              <button className="bg-blue-600 text-white px-5 py-2 rounded-full  text-sm font-semibold">
+                LOGIN
+              </button>
+            </Link>
           </div>
         </div>
       </div>
-
+    </div>
-      {isMobileMenuOpen && (
-        <div className="fixed top-0 left-0 w-full h-[450px] overflow-y-auto bg-white z-50 flex flex-col p-6">
-          <div className="flex justify-between items-center mb-6">
-            <Image src="/infokreasi.png" alt="Logo" width={80} height={80} />
-            <X
-              className="text-black w-6 h-6 cursor-pointer"
-              onClick={() => setMobileMenuOpen(false)}
-            />
-          </div>
-
-          <nav className="flex flex-col gap-4 text-base font-semibold">
-            {navItems.map((item) => {
-              const isActive = pathname === item.href;
-              return (
-                <Link
-                  key={item.label}
-                  href={item.href}
-                  className={cn(
-                    "transition-colors",
-                    isActive ? "text-blue-500" : "text-black"
-                  )}
-                >
-                  {item.label}
-                </Link>
-              );
-            })}
-          </nav>
-
-          <div className="flex gap-4 mt-8">
-            <Link href="#" aria-label="Facebook">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="15"
-                height="15"
-                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="#" aria-label="Twitter">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="14"
-                height="14"
-                viewBox="0 0 14 14"
-              >
-                <g fill="none">
-                  <g
-                  // clip-path="url(#primeTwitter0)"
-                  >
-                    <path
-                      fill="currentColor"
-                      d="M11.025.656h2.147L8.482 6.03L14 13.344H9.68L6.294 8.909l-3.87 4.435H.275l5.016-5.75L0 .657h4.43L7.486 4.71zm-.755 11.4h1.19L3.78 1.877H2.504z"
-                    />
-                  </g>
-                  <defs>
-                    <clipPath id="primeTwitter0">
-                      <path fill="#fff" d="M0 0h14v14H0z" />
-                    </clipPath>
-                  </defs>
-                </g>
-              </svg>
-            </Link>
-            <Link href="#" aria-label="Instagram">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="15"
-                height="15"
-                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="#" aria-label="YouTube">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="15"
-                height="15"
-                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>
-
-          <Button className="bg-[#2481D3] text-white mt-6 w-full">
-            Subscribe Us!
-          </Button>
-        </div>
-      )}
-    </nav>
   );
 }

components/landing-page/news.tsx

@@ -13,6 +13,7 @@ type Article = {
   title: string;
   description: string;
   categoryName: string;
+  slug: string;
   createdAt: string;
   createdByName: string;
   thumbnailUrl: string;

components/landing-page/opinion-news.tsx

@@ -0,0 +1,126 @@
+"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;
+  publishedAt: 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-blue-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-blue-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.publishedAt).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>
+  );
+}

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-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>
+  );
+}

components/table/article-table.tsx

@@ -316,7 +316,7 @@ export default function ArticleTable() {
           return cellValue;
       }
     },
-    [article, page]
+    [article, page],
   );
 
   let typingTimer: NodeJS.Timeout;
@@ -445,8 +445,8 @@ export default function ArticleTable() {
             </div>
           </div>
           <div className="w-full overflow-x-hidden">
-            <div className="w-full mx-auto overflow-x-hidden">
+            <div className="w-full overflow-x-auto">
-              <Table className="w-full table-fixed border text-sm">
+              <Table className="min-w-[1000px] w-full table-auto border text-sm">
                 <TableHeader>
                   <TableRow>
                     {(username === "admin-mabes"
@@ -455,7 +455,18 @@ export default function ArticleTable() {
                     ).map((column) => (
                       <TableHead
                         key={column.uid}
-                        className="truncate bg-white dark:bg-black text-black dark:text-white border-b text-md"
+                        className={`bg-white dark:bg-black text-black dark:text-white 
+    text-sm font-semibold border-b px-3 py-3
+    ${
+      column.uid === "no"
+        ? "min-w-[60px] text-center"
+        : column.uid === "title"
+          ? "min-w-[280px]"
+          : column.uid === "actions"
+            ? "min-w-[100px] text-center"
+            : "min-w-[160px]"
+    }
+  `}
                       >
                         {column.name}
                       </TableHead>
@@ -472,7 +483,17 @@ export default function ArticleTable() {
                         ).map((column) => (
                           <TableCell
                             key={column.uid}
-                            className="truncate text-black dark:text-white max-w-[200px]"
+                            className={`text-black dark:text-white text-sm px-3 py-3 align-top
+    ${
+      column.uid === "no"
+        ? "min-w-[60px] text-center font-medium"
+        : column.uid === "title"
+          ? "min-w-[280px] whitespace-normal break-words leading-snug"
+          : column.uid === "actions"
+            ? "min-w-[100px] text-center"
+            : "min-w-[160px] whitespace-normal break-words"
+    }
+  `}
                           >
                             {renderCell(item, column.uid)}
                           </TableCell>

next.config.ts

@@ -1,13 +1,11 @@
-import type { NextConfig } from "next";
+/** @type {import('next').NextConfig} */
-
+const nextConfig = {
-const nextConfig: NextConfig = {
   images: {
     domains: ["mikulnews.com", "dev.mikulnews.com"],
   },
   eslint: {
     ignoreDuringBuilds: true,
   },
-  // Add experimental features for better chunk handling
   experimental: {
     optimizePackageImports: ["@ckeditor/ckeditor5-react", "react-apexcharts"],
   },

package.json

@@ -21,37 +21,37 @@
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-radio-group": "^1.3.7",
+    "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tooltip": "^1.2.7",
     "@tinymce/tinymce-react": "^6.3.0",
     "@types/js-cookie": "^3.0.6",
     "apexcharts": "^4.7.0",
     "axios": "^1.10.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "dompurify": "^3.2.6",
     "framer-motion": "^12.20.1",
     "js-cookie": "^3.0.5",
     "lightningcss": "^1.30.1",
+    "lucide-react": "^0.525.0",
+    "next": "^16.1.1",
+    "react": "^19.2.3",
     "react-apexcharts": "^1.7.0",
     "react-datepicker": "^8.4.0",
     "react-day-picker": "^9.7.0",
+    "react-dom": "^19.2.4",
     "react-dropzone": "^14.3.8",
     "react-hook-form": "^7.59.0",
     "react-password-checklist": "^1.8.1",
     "react-select": "^5.10.1",
     "sweetalert2": "^11.22.2",
     "sweetalert2-react-content": "^5.1.0",
-    "zod": "^3.25.67",
+    "tailwind-merge": "^3.3.1",
-    "@radix-ui/react-scroll-area": "^1.2.9",
+    "zod": "^3.25.67"
-    "@radix-ui/react-slot": "^1.2.3",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^0.525.0",
-    "next": "15.3.5",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

service/http-config/axios-base-instance.ts

@@ -1,6 +1,6 @@
 import axios from "axios";
 
-const baseURL = "https://dev.mikulnews.com/api";
+const baseURL = "https://infokreasi.com/api";
 
 const axiosBaseInstance = axios.create({
   baseURL,

service/http-config/axios-interceptor-instance.ts

@@ -2,7 +2,7 @@ import axios from "axios";
 import { postSignIn } from "../master-user";
 import Cookies from "js-cookie";
 
-const baseURL = "https://dev.mikulnews.com/api";
+const baseURL = "https://infokreasi.com/api";
 
 const refreshToken = Cookies.get("refresh_token");
 
@@ -28,7 +28,7 @@ axiosInterceptorInstance.interceptors.request.use(
   },
   (error) => {
     return Promise.reject(error);
-  }
+  },
 );
 
 // Response interceptor
@@ -66,7 +66,7 @@ axiosInterceptorInstance.interceptors.response.use(
     }
 
     return Promise.reject(error);
-  }
+  },
 );
 
 export default axiosInterceptorInstance;

styles/custom-editor.css

@@ -0,0 +1,121 @@
+/* ========== CKEditor Wrapper ========== */
+.ckeditor-wrapper {
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.06);
+}
+
+/* ========== Main Editor Container ========== */
+.ckeditor-wrapper .ck.ck-editor__main {
+  min-height: var(--editor-min-height, 400px);
+  max-height: var(--editor-max-height, 600px);
+}
+
+/* ========== Editable Content Area (ClassicEditor) ========== */
+.ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline {
+  min-height: calc(var(--editor-min-height, 400px) - 50px);
+  max-height: calc(var(--editor-max-height, 600px) - 50px);
+  overflow-y: auto !important;
+  scrollbar-width: thin;
+  scrollbar-color: #cbd5e1 #f1f5f9;
+  background: #fff !important;
+  color: #111 !important;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-size: 14px;
+  line-height: 1.6;
+  padding: 1rem;
+  border: none !important;
+}
+
+/* ========== Headings and Text Formatting ========== */
+.ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline h1,
+.ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline h2,
+.ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline h3,
+.ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline h4,
+.ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline h5,
+.ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline h6 {
+  margin: 1em 0 0.5em 0;
+  color: inherit !important;
+}
+
+.ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline p {
+  margin: 0.5em 0 !important;
+}
+
+.ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline ul,
+.ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline ol {
+  margin: 0.5em 0;
+  padding-left: 2em;
+}
+
+.ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline blockquote {
+  margin: 1em 0;
+  padding: 0.5em 1em;
+  border-left: 4px solid #d1d5db;
+  background-color: #f9fafb;
+  color: inherit !important;
+}
+
+/* ========== Dark Mode Support ========== */
+.dark .ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline {
+  background: #111 !important;
+  color: #f9fafb !important;
+}
+
+.dark .ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline h1,
+.dark .ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline h2,
+.dark .ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline h3,
+.dark .ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline h4,
+.dark .ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline h5,
+.dark .ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline h6 {
+  color: #f9fafb !important;
+}
+
+.dark .ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline blockquote {
+  background-color: #1f2937 !important;
+  border-left-color: #374151 !important;
+  color: #f3f4f6 !important;
+}
+
+/* ========== Custom Scrollbars (Light & Dark) ========== */
+.ckeditor-wrapper .ck.ck-content.ck-editor__editable_inline::-webkit-scrollbar {
+  width: 8px;
+}
+
+.ckeditor-wrapper
+  .ck.ck-content.ck-editor__editable_inline::-webkit-scrollbar-track {
+  background: #f1f5f9;
+  border-radius: 4px;
+}
+
+.ckeditor-wrapper
+  .ck.ck-content.ck-editor__editable_inline::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 4px;
+}
+
+.ckeditor-wrapper
+  .ck.ck-content.ck-editor__editable_inline::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+.dark
+  .ckeditor-wrapper
+  .ck.ck-content.ck-editor__editable_inline::-webkit-scrollbar-track {
+  background: #1f2937;
+}
+
+.dark
+  .ckeditor-wrapper
+  .ck.ck-content.ck-editor__editable_inline::-webkit-scrollbar-thumb {
+  background: #4b5563;
+}
+
+.dark
+  .ckeditor-wrapper
+  .ck.ck-content.ck-editor__editable_inline::-webkit-scrollbar-thumb:hover {
+  background: #6b7280;
+}

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -11,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -19,9 +23,19 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"]
+      "@/*": [
+        "./*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
-  "exclude": ["node_modules"]
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }