diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/contact-us.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/contact-us.tsx
index 9c65ba11..f3935010 100644
--- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/contact-us.tsx
+++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/contact-us.tsx
@@ -88,7 +88,7 @@ const ContactUs = () => {
                 </svg>
                 Pedoman Media Siber
               </Link>
-              <Link href="https://mediahub.polri.go.id/" className="flex items-center mt-2 text-sm gap-2">
+              <Link href="https://new.netidhub.com/" className="flex items-center mt-2 text-sm gap-2">
                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
                   <path
                     fill="#000"
diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/hero-kaltara.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/hero-kaltara.tsx
index 5cd55cb9..9067dd2d 100644
--- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/hero-kaltara.tsx
+++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/hero-kaltara.tsx
@@ -3,6 +3,7 @@
 import { Reveal } from "@/components/landing-page/Reveal";
 import { Icon } from "@/components/ui/icon";
 import { Skeleton } from "@/components/ui/skeleton";
+import { Link } from "@/i18n/routing";
 import { listData } from "@/service/landing/landing";
 import { formatDateToIndonesian, getPublicLocaleTimestamp } from "@/utils/globals";
 import Image from "next/image";
@@ -11,10 +12,53 @@ import React, { useEffect, useState } from "react";
 
 const HeroKaltara = () => {
   const params = useParams();
-  const poldaName: any = params?.polda_name;
   const [content, setContent] = useState([]);
   const [centerPadding, setCenterPadding] = useState<any>();
   const [isBannerLoading, setIsBannerLoading] = useState(true);
+  const poldaName: any = params?.polda_name;
+  const satkerName = params?.satker_name;
+
+  let prefixPath = poldaName ? `/tbnews/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/";
+
+  const newContent = [
+    {
+      id: 1,
+      slug: "Brigjen-Pol-Wibowo",
+      thumbnailLink: "/assets/tbnews/image-hero1.png",
+      title: "Brigjen Pol Wibowo Resmi Dilantik sebagai Dirregident Korlantas Polri",
+      categoryName: "NASIONAL",
+      createdAt: "16 FEBRUARI 2025 | 16:18 WIB",
+      description:
+        "Jakarta – Kepala Korps Lalu Lintas (Kakorlantas) Polri Irjen Pol Aan Suhanan memimpin upacara pelantikan Direktur Registrasi dan Identifikasi (Dirregident) Korlantas Polri yang baru, Brigjen Pol Wibowo, di Gedung NTMC, Jakarta, pada Selasa (8/1). Pelantikan ini menandai pergantian jabatan di lingkungan Korlantas Polri. Sebelumnya, Brigjen Pol Wibowo menjabat sebagai Wakapolda Jawa Barat, dan menggantikan Brigjen Pol Yusri Yunus yang memasuki masa purna tugas pada Desember 2024 lalu.",
+    },
+    {
+      id: 2,
+      thumbnailLink: "/assets/tbnews/image-hero2.png",
+      title: "KPK dan Polri Tingkatkan Sinergi untuk Pemberantasan Korupsi",
+      categoryName: "NASIONAL",
+      createdAt: "16 FEBRUARI 2025 | 16:18 WIB",
+      description:
+        "Jakarta – Kepala Korps Lalu Lintas (Kakorlantas) Polri Irjen Pol Aan Suhanan memimpin upacara pelantikan Direktur Registrasi dan Identifikasi (Dirregident) Korlantas Polri yang baru, Brigjen Pol Wibowo, di Gedung NTMC, Jakarta, pada Selasa (8/1). Pelantikan ini menandai pergantian jabatan di lingkungan Korlantas Polri. Sebelumnya, Brigjen Pol Wibowo menjabat sebagai Wakapolda Jawa Barat, dan menggantikan Brigjen Pol Yusri Yunus yang memasuki masa purna tugas pada Desember 2024 lalu.",
+    },
+    {
+      id: 3,
+      thumbnailLink: "/assets/tbnews/image-hero3.png",
+      title: "Polda Kaltara Menerima Surprise Dari Gubernur Kaltara dan Unsur TNI Dalam Hari Jadi Polda Kaltara ke 7",
+      categoryName: "NASIONAL",
+      createdAt: "16 FEBRUARI 2025 | 16:18 WIB",
+      description:
+        "Jakarta – Kepala Korps Lalu Lintas (Kakorlantas) Polri Irjen Pol Aan Suhanan memimpin upacara pelantikan Direktur Registrasi dan Identifikasi (Dirregident) Korlantas Polri yang baru, Brigjen Pol Wibowo, di Gedung NTMC, Jakarta, pada Selasa (8/1). Pelantikan ini menandai pergantian jabatan di lingkungan Korlantas Polri. Sebelumnya, Brigjen Pol Wibowo menjabat sebagai Wakapolda Jawa Barat, dan menggantikan Brigjen Pol Yusri Yunus yang memasuki masa purna tugas pada Desember 2024 lalu.",
+    },
+    {
+      id: 4,
+      thumbnailLink: "/assets/tbnews/image-hero4.png",
+      title: "Kapolda Kaltara Resmikan Gedung Pelayanan SKCK Polres Tana Tidung: Langkah Meningkatkan Pelayanan Publik",
+      categoryName: "NASIONAL",
+      createdAt: "16 FEBRUARI 2025 | 16:18 WIB",
+      description:
+        "Jakarta – Kepala Korps Lalu Lintas (Kakorlantas) Polri Irjen Pol Aan Suhanan memimpin upacara pelantikan Direktur Registrasi dan Identifikasi (Dirregident) Korlantas Polri yang baru, Brigjen Pol Wibowo, di Gedung NTMC, Jakarta, pada Selasa (8/1). Pelantikan ini menandai pergantian jabatan di lingkungan Korlantas Polri. Sebelumnya, Brigjen Pol Wibowo menjabat sebagai Wakapolda Jawa Barat, dan menggantikan Brigjen Pol Yusri Yunus yang memasuki masa purna tugas pada Desember 2024 lalu.",
+    },
+  ];
 
   useEffect(() => {
     // async function initState() {
@@ -70,7 +114,7 @@ const HeroKaltara = () => {
   return (
     <>
       <Reveal>
-        <div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-10 py-4 w-auto mt-36">
+        <div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-20 py-4 mt-36">
           {isBannerLoading ? (
             <div className="flex flex-col space-y-3 mx-auto w-full lg:w-2/3">
               <Skeleton className="h-[310px] lg:h-[420px]  rounded-xl" />
@@ -80,18 +124,21 @@ const HeroKaltara = () => {
               </div>
             </div>
           ) : (
-            <div className="w-full lg:w-2/3 lg:h-full">
-              {content?.map((row: any) => (
-                <div className="flex flex-col gap-3" key={row?.id}>
-                  <Image src={row?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full lg:w-[950px] h-[310px] lg:h-[420px] rounded-sm object-cover" /> <h1 className="font-bold text-xl">{row.title}</h1>
+            <div className="w-full lg:h-full">
+              {content?.map((row: any, index: number) => (
+                <div className="flex flex-col gap-3" key={index}>
+                  <Link href={prefixPath + `/video/detail/${row.slug}`}>
+                    <Image src={row?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full h-[310px] lg:h-[520px] rounded-sm object-cover" />
+                  </Link>
+                  <h1 className="font-bold text-xl">{row.title}</h1>
                   <div className="flex flex-row gap-3">
                     <p className="text-[#c03724] text-sm">{row?.categoryName}</p>
                     <p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
-                      {getPublicLocaleTimestamp(new Date(row?.createdAt))} WIB {" | "}
-                      <Icon icon="formkit:eye" width="15" height="15" /> {row?.clickCount}
+                      {getPublicLocaleTimestamp(new Date(row?.createdAt))}  
+                      {/* {row?.createdAt} */}
                     </p>
                   </div>
-                  <p className="text-light text-justify hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{row?.description}</p>
+                  <p className="text-light text-justify" dangerouslySetInnerHTML={{ __html: row?.description }} />
                 </div>
               ))}
             </div>
@@ -136,9 +183,9 @@ const HeroKaltara = () => {
               </div>
             </div>
           ) : (
-            <div className="py-4 lg:py-0 flex flex-col gap-4 flex-nowrap w-[95vw] lg:w-auto overflow-x-auto">
-              {content?.map((item: any) => (
-                <div className="flex gap-3 flex-col lg:w-full">
+            <div className="py-4 lg:py-0 flex flex-col gap-4 flex-nowrap w-[95vw] lg:w-[30%] overflow-x-auto">
+              {newContent?.slice(1).map((item: any, index: number) => (
+                <div className="flex gap-3 flex-col lg:w-full" key={index}>
                   <div className="flex-shrink-0 rounded-lg">
                     <Image width={720} height={480} src={item?.thumbnailLink} alt="" className="w-full h-[105px] object-cover rounded-sm" />
                   </div>
@@ -147,14 +194,8 @@ const HeroKaltara = () => {
                     <div className="flex flex-row gap-5">
                       <p className="text-[#c03724] text-sm">{item?.categoryName}</p>
                       <p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
-                        {formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"}|{" "}
-                        <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
-                          <path
-                            fill="currentColor"
-                            d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
-                          />
-                        </svg>{" "}
-                        {item?.clickCount}{" "}
+                        {/* {formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"} */}
+                        {item?.createdAt}
                       </p>
                     </div>
                   </div>
diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/latest-news.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/latest-news.tsx
index 5bc1fbcf..15420056 100644
--- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/latest-news.tsx
+++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/latest-news.tsx
@@ -18,6 +18,63 @@ const LatestNews = (props: { type: string }) => {
   const poldaName: any = params?.polda_name;
   const t = useTranslations("LandingPage");
 
+  const newContent = [
+    {
+      id: 1,
+      thumbnailLink: "/assets/tbnews/latest1.png",
+      title: "Tokoh Agama Papua Apresiasi Makan Bergizi Gratis: Investasi Masa Depan Anak-anak Papua",
+      categoryName: "NASIONAL",
+      createdAt: "17 Feb 2025 - 09:23 WIB",
+      description:
+        "Jayapura – Sekretaris Sinode Gereja Kemah Injil Masehi Kingmi Indonesia di Tanah Papua, Pendeta Yones Wenda, mengimbau seluruh masyarakat Papua untuk mendukung program Makan Bergizi Gratis (MBG). Menurutnya, program ini sangat penting bagi anak-anak Papua untuk meningkatkan gizi dan kesehatan mereka dalam menunjang pendidikan di sekolah.",
+    },
+    {
+      id: 2,
+      thumbnailLink: "/assets/tbnews/image-hero2.png",
+      title: "Kesal, Ibu di Sidoarjo Siram Anaknya Usia 3 Tahun dengan Air Mendidih",
+      categoryName: "NASIONAL",
+      createdAt: "17 Feb 2025 - 09:23 WIB",
+      description:
+        "Jakarta – Kepala Korps Lalu Lintas (Kakorlantas) Polri Irjen Pol Aan Suhanan memimpin upacara pelantikan Direktur Registrasi dan Identifikasi (Dirregident) Korlantas Polri yang baru, Brigjen Pol Wibowo, di Gedung NTMC, Jakarta, pada Selasa (8/1). Pelantikan ini menandai pergantian jabatan di lingkungan Korlantas Polri. Sebelumnya, Brigjen Pol Wibowo menjabat sebagai Wakapolda Jawa Barat, dan menggantikan Brigjen Pol Yusri Yunus yang memasuki masa purna tugas pada Desember 2024 lalu.",
+    },
+    {
+      id: 3,
+      thumbnailLink: "/assets/tbnews/image-hero3.png",
+      title: "Hari Kedua Tour of Kemala 2025 Meriah, 1.794 Peserta Ramaikan Lintasan di Yogyakarta",
+      categoryName: "NASIONAL",
+      createdAt: "17 Feb 2025 - 09:23 WIB",
+      description:
+        "Jakarta – Kepala Korps Lalu Lintas (Kakorlantas) Polri Irjen Pol Aan Suhanan memimpin upacara pelantikan Direktur Registrasi dan Identifikasi (Dirregident) Korlantas Polri yang baru, Brigjen Pol Wibowo, di Gedung NTMC, Jakarta, pada Selasa (8/1). Pelantikan ini menandai pergantian jabatan di lingkungan Korlantas Polri. Sebelumnya, Brigjen Pol Wibowo menjabat sebagai Wakapolda Jawa Barat, dan menggantikan Brigjen Pol Yusri Yunus yang memasuki masa purna tugas pada Desember 2024 lalu.",
+    },
+    {
+      id: 4,
+      thumbnailLink: "/assets/tbnews/image-hero4.png",
+      title: "Polda Bali Amankan Kegiatan GFNY 2025",
+      categoryName: "NASIONAL",
+      createdAt: "17 Feb 2025 - 09:23 WIB",
+      description:
+        "Jakarta – Kepala Korps Lalu Lintas (Kakorlantas) Polri Irjen Pol Aan Suhanan memimpin upacara pelantikan Direktur Registrasi dan Identifikasi (Dirregident) Korlantas Polri yang baru, Brigjen Pol Wibowo, di Gedung NTMC, Jakarta, pada Selasa (8/1). Pelantikan ini menandai pergantian jabatan di lingkungan Korlantas Polri. Sebelumnya, Brigjen Pol Wibowo menjabat sebagai Wakapolda Jawa Barat, dan menggantikan Brigjen Pol Yusri Yunus yang memasuki masa purna tugas pada Desember 2024 lalu.",
+    },
+    {
+      id: 5,
+      thumbnailLink: "/assets/tbnews/image-hero4.png",
+      title: "Korban Banjir di Makassar Diberikan Bantuan Langsung Oleh Kapolres",
+      categoryName: "NASIONAL",
+      createdAt: "17 Feb 2025 - 09:23 WIB",
+      description:
+        "Jakarta – Kepala Korps Lalu Lintas (Kakorlantas) Polri Irjen Pol Aan Suhanan memimpin upacara pelantikan Direktur Registrasi dan Identifikasi (Dirregident) Korlantas Polri yang baru, Brigjen Pol Wibowo, di Gedung NTMC, Jakarta, pada Selasa (8/1). Pelantikan ini menandai pergantian jabatan di lingkungan Korlantas Polri. Sebelumnya, Brigjen Pol Wibowo menjabat sebagai Wakapolda Jawa Barat, dan menggantikan Brigjen Pol Yusri Yunus yang memasuki masa purna tugas pada Desember 2024 lalu.",
+    },
+    {
+      id: 6,
+      thumbnailLink: "/assets/tbnews/image-hero4.png",
+      title: "Kurang dari 24 Jam, Pelaku Penculikan Balita di Tangsel Berhasil Diringkus",
+      categoryName: "NASIONAL",
+      createdAt: "17 Feb 2025 - 09:23 WIB",
+      description:
+        "Jakarta – Kepala Korps Lalu Lintas (Kakorlantas) Polri Irjen Pol Aan Suhanan memimpin upacara pelantikan Direktur Registrasi dan Identifikasi (Dirregident) Korlantas Polri yang baru, Brigjen Pol Wibowo, di Gedung NTMC, Jakarta, pada Selasa (8/1). Pelantikan ini menandai pergantian jabatan di lingkungan Korlantas Polri. Sebelumnya, Brigjen Pol Wibowo menjabat sebagai Wakapolda Jawa Barat, dan menggantikan Brigjen Pol Yusri Yunus yang memasuki masa purna tugas pada Desember 2024 lalu.",
+    },
+  ];
+
   useEffect(() => {
     const timer = setTimeout(() => {
       setIsLoading(false);
@@ -77,12 +134,12 @@ const LatestNews = (props: { type: string }) => {
   return (
     <>
       <Reveal>
-        <div className="my-5 px-4 lg:px-28 gap-3">
+        <div className="my-10 px-4 lg:px-20 gap-3">
           <div className="bg-[#c03724] rounded-md p-3 w-fit">
             <p className="text-white font-semibold">Berita {props.type == "popular" ? "Terpopuler" : props.type == "latest" ? t("new") : "Serupa"}</p>
           </div>
         </div>
-        <div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-11 w-auto">
+        <div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-20">
           {isLoading ? (
             <div className="flex flex-col space-y-3 mx-auto w-full lg:w-2/3">
               <Skeleton className="h-[310px] lg:h-[420px]  rounded-xl" />
@@ -93,23 +150,17 @@ const LatestNews = (props: { type: string }) => {
             </div>
           ) : (
             <div className="w-full lg:w-2/3 lg:h-full">
-              {content?.map((row: any) => (
+              {newContent?.slice(0, 1).map((row: any) => (
                 <div className="flex flex-col gap-3" key={row?.id}>
-                  <Image src={row?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full lg:w-[950px] h-[310px] lg:h-[420px] rounded-sm object-cover" /> <h1 className="font-bold text-xl">{row?.title}</h1>
+                  <Image src={row?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full h-[310px] lg:h-[420px] rounded-sm object-cover" /> <h1 className="font-bold text-xl">{row?.title}</h1>
                   <div className="flex flex-row gap-3">
                     <p className="text-[#c03724] text-xs">{row?.categoryName}</p>
                     <p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
-                      {formatDateToIndonesian(new Date(row?.createdAt))} {row?.timezone ? row?.timezone : "WIB"}|{" "}
-                      <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
-                        <path
-                          fill="currentColor"
-                          d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
-                        />
-                      </svg>{" "}
-                      {row?.clickCount}{" "}
+                      {/* {formatDateToIndonesian(new Date(row?.createdAt))} {row?.timezone ? row?.timezone : "WIB"}|{" "} */}
+                      {row?.createdAt}
                     </p>
                   </div>
-                  <p className="text-light text-justify hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{row?.description}</p>
+                  <p className="text-light text-justify">{row?.description}</p>
                 </div>
               ))}
             </div>
@@ -154,25 +205,19 @@ const LatestNews = (props: { type: string }) => {
               </div>
             </div>
           ) : (
-            <div className="py-4 lg:py-0 flex flex-col gap-4 flex-nowrap w-[95vw] lg:w-auto overflow-x-auto">
-              {content?.map((item: any) => (
+            <div className="py-4 lg:py-0 flex flex-col gap-4 flex-nowrap w-[95vw] lg:w-[30%] overflow-x-auto">
+              {newContent?.slice(1).map((item: any) => (
                 <div className="flex gap-3 flex-col lg:w-full">
                   {/* <div className="flex-shrink-0 rounded-lg">
                   <Image width={720} height={480} src={item?.thumbnailLink} alt="" className="w-full h-[105px] object-cover rounded-sm" />
-                </div> */}
-                  <div className="w-[280px] lg:w-auto flex flex-col">
+                  </div> */}
+                  <div className="w-[280px] lg:w-auto flex flex-col gap-5">
                     <h3 className="font-bold text-lg">{item?.title}</h3>
                     <div className="flex flex-row gap-5">
                       <p className="text-[#c03724] text-sm">{item?.categoryName}</p>
                       <p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
-                        {formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"}|{" "}
-                        <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
-                          <path
-                            fill="currentColor"
-                            d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
-                          />
-                        </svg>{" "}
-                        {item?.clickCount}{" "}
+                        {/* {formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"}|{" "} */}
+                        {item?.createdAt}
                       </p>
                     </div>
                   </div>
diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/national-news.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/national-news.tsx
index fda14bf1..aee57687 100644
--- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/national-news.tsx
+++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/national-news.tsx
@@ -16,6 +16,63 @@ const NationalNews = () => {
   const [centerPadding, setCenterPadding] = useState<any>();
   const [isBannerLoading, setIsBannerLoading] = useState(true);
 
+  const newContent = [
+    {
+      id: 1,
+      thumbnailLink: "/assets/tbnews/nasional1.png",
+      title: "Wakapolda Papua Berikan Penghargaan Kapolri Kepada Anggota Yang Berprestasi saat Upacara Hari Kesadaran Nasional",
+      categoryName: "NASIONAL",
+      createdAt: "16 FEBRUARI 2025 - 16:18 WIB",
+      description:
+        "Puncak Jaya. Polda Papua menggelar Upacara Hari Kesadaran Nasional yang dipimpin langsung oleh Brigjen Pol. Dr. Faizal Ramadhani, S.Sos., S.I.K., M.H., dilaksanakan di Polda Papua Koya Koso, Distrik Muara Tami, Kota Jayapura, Senin (17/02/25)",
+    },
+    {
+      id: 2,
+      thumbnailLink: "/assets/tbnews/image-hero2.png",
+      title: "Kabid Humas Polda NTT Apresiasi Respon Cepat Tim Buser Polres Ngada yang Berhasil Ringkus Terduga Pelaku Pemerkosaan",
+      categoryName: "NASIONAL",
+      createdAt: "16 FEBRUARI 2025 - 16:18 WIB",
+      description:
+        "Jakarta – Kepala Korps Lalu Lintas (Kakorlantas) Polri Irjen Pol Aan Suhanan memimpin upacara pelantikan Direktur Registrasi dan Identifikasi (Dirregident) Korlantas Polri yang baru, Brigjen Pol Wibowo, di Gedung NTMC, Jakarta, pada Selasa (8/1). Pelantikan ini menandai pergantian jabatan di lingkungan Korlantas Polri. Sebelumnya, Brigjen Pol Wibowo menjabat sebagai Wakapolda Jawa Barat, dan menggantikan Brigjen Pol Yusri Yunus yang memasuki masa purna tugas pada Desember 2024 lalu.",
+    },
+    {
+      id: 3,
+      thumbnailLink: "/assets/tbnews/image-hero3.png",
+      title: "Korlantas Polri Tegaskan Bakal Tertibkan Klakson Telolet",
+      categoryName: "NASIONAL",
+      createdAt: "16 FEBRUARI 2025 - 16:18 WIB",
+      description:
+        "Jakarta – Kepala Korps Lalu Lintas (Kakorlantas) Polri Irjen Pol Aan Suhanan memimpin upacara pelantikan Direktur Registrasi dan Identifikasi (Dirregident) Korlantas Polri yang baru, Brigjen Pol Wibowo, di Gedung NTMC, Jakarta, pada Selasa (8/1). Pelantikan ini menandai pergantian jabatan di lingkungan Korlantas Polri. Sebelumnya, Brigjen Pol Wibowo menjabat sebagai Wakapolda Jawa Barat, dan menggantikan Brigjen Pol Yusri Yunus yang memasuki masa purna tugas pada Desember 2024 lalu.",
+    },
+    {
+      id: 4,
+      thumbnailLink: "/assets/tbnews/image-hero4.png",
+      title: "Gempa Bumi Bermagnitudo 5.0 Guncang Wilayah Sarmi, Papua",
+      categoryName: "NASIONAL",
+      createdAt: "16 FEBRUARI 2025 - 16:18 WIB",
+      description:
+        "Jakarta – Kepala Korps Lalu Lintas (Kakorlantas) Polri Irjen Pol Aan Suhanan memimpin upacara pelantikan Direktur Registrasi dan Identifikasi (Dirregident) Korlantas Polri yang baru, Brigjen Pol Wibowo, di Gedung NTMC, Jakarta, pada Selasa (8/1). Pelantikan ini menandai pergantian jabatan di lingkungan Korlantas Polri. Sebelumnya, Brigjen Pol Wibowo menjabat sebagai Wakapolda Jawa Barat, dan menggantikan Brigjen Pol Yusri Yunus yang memasuki masa purna tugas pada Desember 2024 lalu.",
+    },
+    {
+      id: 5,
+      thumbnailLink: "/assets/tbnews/image-hero4.png",
+      title: "Gempa Bumi Bermagnitudo 3.3 Guncang Wilayah Kabupaten Kupang, Nusa Tenggara Timur",
+      categoryName: "NASIONAL",
+      createdAt: "16 FEBRUARI 2025 - 16:18 WIB",
+      description:
+        "Jakarta – Kepala Korps Lalu Lintas (Kakorlantas) Polri Irjen Pol Aan Suhanan memimpin upacara pelantikan Direktur Registrasi dan Identifikasi (Dirregident) Korlantas Polri yang baru, Brigjen Pol Wibowo, di Gedung NTMC, Jakarta, pada Selasa (8/1). Pelantikan ini menandai pergantian jabatan di lingkungan Korlantas Polri. Sebelumnya, Brigjen Pol Wibowo menjabat sebagai Wakapolda Jawa Barat, dan menggantikan Brigjen Pol Yusri Yunus yang memasuki masa purna tugas pada Desember 2024 lalu.",
+    },
+    {
+      id: 6,
+      thumbnailLink: "/assets/tbnews/image-hero4.png",
+      title: "Berbagi Kasih kepada Masyarakat Kurang Mampu",
+      categoryName: "NASIONAL",
+      createdAt: "16 FEBRUARI 2025 - 16:18 WIB",
+      description:
+        "Jakarta – Kepala Korps Lalu Lintas (Kakorlantas) Polri Irjen Pol Aan Suhanan memimpin upacara pelantikan Direktur Registrasi dan Identifikasi (Dirregident) Korlantas Polri yang baru, Brigjen Pol Wibowo, di Gedung NTMC, Jakarta, pada Selasa (8/1). Pelantikan ini menandai pergantian jabatan di lingkungan Korlantas Polri. Sebelumnya, Brigjen Pol Wibowo menjabat sebagai Wakapolda Jawa Barat, dan menggantikan Brigjen Pol Yusri Yunus yang memasuki masa purna tugas pada Desember 2024 lalu.",
+    },
+  ];
+
   useEffect(() => {
     const timer = setTimeout(() => {
       setIsLoading(false);
@@ -74,12 +131,12 @@ const NationalNews = () => {
   return (
     <>
       <Reveal>
-        <div className="my-5 px-4 lg:px-28 gap-3">
+        <div className="mt-10 mb-5 px-4 lg:px-20 gap-3">
           <div className="bg-[#c03724] rounded-md p-3 w-fit">
             <p className="text-white font-semibold">Berita Nasional</p>
           </div>
         </div>
-        <div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-11 w-auto">
+        <div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-20">
           {isLoading ? (
             <div className="flex flex-col space-y-3 mx-auto w-full lg:w-2/3">
               <Skeleton className="h-[310px] lg:h-[420px]  rounded-xl" />
@@ -90,23 +147,17 @@ const NationalNews = () => {
             </div>
           ) : (
             <div className="w-full lg:w-2/3 lg:h-full">
-              {content?.map((row: any) => (
+              {newContent?.slice(0, 1).map((row: any) => (
                 <div className="flex flex-col gap-3">
-                  <Image src={row?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full lg:w-[950px] h-[310px] lg:h-[420px] rounded-sm object-cover" /> <h1 className="font-bold text-xl">{row?.title}</h1>
+                  <Image src={row?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full h-[310px] lg:h-[420px] rounded-sm object-cover" /> <h1 className="font-bold text-xl">{row?.title}</h1>
                   <div className="flex flex-row gap-3">
                     <p className="text-[#c03724] text-xs">{row?.categoryName}</p>
                     <p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
-                      {formatDateToIndonesian(new Date(row?.createdAt))} {row?.timezone ? row?.timezone : "WIB"}|{" "}
-                      <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
-                        <path
-                          fill="currentColor"
-                          d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
-                        />
-                      </svg>{" "}
-                      {row?.clickCount}{" "}
+                      {/* {formatDateToIndonesian(new Date(row?.createdAt))} {row?.timezone ? row?.timezone : "WIB"}|{" "} */}
+                      {row?.createdAt}
                     </p>
                   </div>
-                  <p className="text-light text-justify hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{row?.description}</p>
+                  <p className="text-light text-justify">{row?.description}</p>
                 </div>
               ))}
             </div>
@@ -151,25 +202,19 @@ const NationalNews = () => {
               </div>
             </div>
           ) : (
-            <div className="py-4 lg:py-0 flex flex-col gap-4 flex-nowrap w-[95vw] lg:w-auto overflow-x-auto">
-              {content?.map((item: any) => (
+            <div className="py-4 lg:py-0 flex flex-col gap-4 flex-nowrap w-[95vw] lg:w-[30%] overflow-x-auto">
+              {newContent?.slice(1).map((item: any) => (
                 <div className="flex gap-3 flex-col lg:w-full">
                   {/* <div className="flex-shrink-0 rounded-lg">
                   <Image width={720} height={480} src={item?.thumbnailLink} alt="" className="w-full h-[105px] object-cover rounded-sm" />
                 </div> */}
-                  <div className="w-[280px] lg:w-auto flex flex-col">
+                  <div className="w-[280px] lg:w-auto flex flex-col gap-5">
                     <h3 className="font-bold text-lg">{item?.title}</h3>
                     <div className="flex flex-row gap-5">
                       <p className="text-[#c03724] text-sm">{item?.categoryName}</p>
                       <p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
-                        {formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"}|{" "}
-                        <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
-                          <path
-                            fill="currentColor"
-                            d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
-                          />
-                        </svg>{" "}
-                        {item?.clickCount}{" "}
+                        {/* {formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"}|{" "} */}
+                        {item?.createdAt}
                       </p>
                     </div>
                   </div>
diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx
index c0e91c70..cb59f6d7 100644
--- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx
+++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Button } from "@/components/ui/button";
 import { Icon } from "@/components/ui/icon";
 import { Link } from "@/i18n/routing";
@@ -42,29 +44,31 @@ const categoryLinks: any = {
   Kesehatan: "https://tribratanews.kaltara.polri.go.id/category/kesehatan/",
   Olahraga: "https://tribratanews.kaltara.polri.go.id/category/olahraga/",
   PPA: "https://tribratanews.kaltara.polri.go.id/category/ppa/",
-  MediaHub: "https://mediahub.polri.go.id/",
+  MediaHub: "https://new.netidhub.com/",
 };
 
 const NavbarKaltara = () => {
   const [menuOpen, setMenuOpen] = useState(false);
 
   return (
-    <div className="bg-[#c03724] w-full py-3 px-4 lg:px-20 flex justify-between items-center fixed top-0 z-50">
-      <div className="flex flex-row items-center">
+    <div className="bg-[#c03724] w-full py-3 px-4 lg:px-20 items-center fixed top-0 z-50">
+      <div className="flex flex-row justify-between items-center">
         <Image width={2560} height={1440} src="/assets/img/logo-new-tbnews.png" alt="image" className="h-28 w-72" />
-        <div className="text-white font-semibold hidden lg:flex flex-row gap-14 items-center">
-          {category?.map((data: any) => (
-            <Link key={data?.id} href={categoryLinks[data?.name] || "#"}>
-              {data?.name}
-            </Link>
-          ))}
+        <div className="flex flex-row">
+          <div className="text-white font-semibold hidden lg:flex flex-row gap-14 items-center">
+            {category?.map((data: any) => (
+              <Link key={data?.id} href={categoryLinks[data?.name] || "#"}>
+                {data?.name}
+              </Link>
+            ))}
+          </div>
+          <Link href="/auth">
+            <Button className="hidden lg:flex justify-center items-center bg-white rounded-full gap-3 ml-7 p-2 w-fit h-fit">
+              <Icon icon="material-symbols:lock" className="text-[#c03724]" />
+              <p className="text-[#c03724]">Login</p>
+            </Button>
+          </Link>
         </div>
-        <Link href="/auth">
-          <Button className="hidden lg:flex justify-center items-center bg-white rounded-full gap-3 ml-7 p-2 w-fit h-fit">
-            <Icon icon="material-symbols:lock" className="text-[#c03724]" />
-            <p className="text-[#c03724]">Login</p>
-          </Button>
-        </Link>
       </div>
 
       {/* Mobile Menu Toggle */}
diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/regional-news.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/regional-news.tsx
index 3cddef02..dfdd98f4 100644
--- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/regional-news.tsx
+++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/regional-news.tsx
@@ -18,6 +18,54 @@ const RegionalNews = () => {
   const [centerPadding, setCenterPadding] = useState<any>();
   const [isBannerLoading, setIsBannerLoading] = useState(true);
 
+  const newContent = [
+    {
+      id: 1,
+      thumbnailLink: "/assets/tbnews/wilayah1.png",
+      title: "Rotasi Jabatan, Kapolres Malinau Pimpin Upacara Serah Terima Jabatan Wakapolres Malinau Dan Kabagops Polres Malinau",
+      categoryName: "KALTARA",
+      createdAt: "17 Feb 2025 - 09:23 WIB",
+      description:
+        "Kepala Kepolisian Resor (Kapolres) Malinau AKBP Heru Eko Wibowo, S.H., S.I.K., M.H., memimpin upacara serah terima jabatan Wakapolres dan Kabagops Polres Malinau yang berlangsung khidmat. Jabatan Wakapolres Malinau resmi diserahterimakan dari KOMPOL Satya Chusur Ramadhana, S.H., kepada AKP Alamsyah Nugraha, S.T.K., S.I.K., M.H.",
+    },
+    {
+      id: 2,
+      thumbnailLink: "/assets/tbnews/image-hero2.png",
+      title: "Dansat Brimob Polda Kaltara Turun Tangan Angkat Dani dan Saudara-Saudaranya sebagai Anak Asuhnya",
+      categoryName: "KALTARA",
+      createdAt: "17 Feb 2025 - 09:23 WIB",
+      description:
+        "Jakarta – Kepala Korps Lalu Lintas (Kakorlantas) Polri Irjen Pol Aan Suhanan memimpin upacara pelantikan Direktur Registrasi dan Identifikasi (Dirregident) Korlantas Polri yang baru, Brigjen Pol Wibowo, di Gedung NTMC, Jakarta, pada Selasa (8/1). Pelantikan ini menandai pergantian jabatan di lingkungan Korlantas Polri. Sebelumnya, Brigjen Pol Wibowo menjabat sebagai Wakapolda Jawa Barat, dan menggantikan Brigjen Pol Yusri Yunus yang memasuki masa purna tugas pada Desember 2024 lalu.",
+    },
+    {
+      id: 3,
+      thumbnailLink: "/assets/tbnews/image-hero3.png",
+      title: "Polda Kaltara Gelar Operasi Pekat Kayan 2025 Guna Menjaga Situasi Kamtibmas Menjelang Bulan Suci Ramadhan",
+      categoryName: "KALTARA",
+      createdAt: "17 Feb 2025 - 09:23 WIB",
+      description:
+        "Jakarta – Kepala Korps Lalu Lintas (Kakorlantas) Polri Irjen Pol Aan Suhanan memimpin upacara pelantikan Direktur Registrasi dan Identifikasi (Dirregident) Korlantas Polri yang baru, Brigjen Pol Wibowo, di Gedung NTMC, Jakarta, pada Selasa (8/1). Pelantikan ini menandai pergantian jabatan di lingkungan Korlantas Polri. Sebelumnya, Brigjen Pol Wibowo menjabat sebagai Wakapolda Jawa Barat, dan menggantikan Brigjen Pol Yusri Yunus yang memasuki masa purna tugas pada Desember 2024 lalu.",
+    },
+    {
+      id: 4,
+      thumbnailLink: "/assets/tbnews/image-hero4.png",
+      title: "Motoris Speed Boat IQZZA EKSPRES 01 Ditetapkan sebagai Tersangka",
+      categoryName: "KALTARA",
+      createdAt: "17 Feb 2025 - 09:23 WIB",
+      description:
+        "Jakarta – Kepala Korps Lalu Lintas (Kakorlantas) Polri Irjen Pol Aan Suhanan memimpin upacara pelantikan Direktur Registrasi dan Identifikasi (Dirregident) Korlantas Polri yang baru, Brigjen Pol Wibowo, di Gedung NTMC, Jakarta, pada Selasa (8/1). Pelantikan ini menandai pergantian jabatan di lingkungan Korlantas Polri. Sebelumnya, Brigjen Pol Wibowo menjabat sebagai Wakapolda Jawa Barat, dan menggantikan Brigjen Pol Yusri Yunus yang memasuki masa purna tugas pada Desember 2024 lalu.",
+    },
+    {
+      id: 5,
+      thumbnailLink: "/assets/tbnews/image-hero4.png",
+      title: "51 anggota satpam ikuti penutupan diksar yang dipimpin langsung oleh Dirbinmas Polda kalatar.",
+      categoryName: "KALTARA",
+      createdAt: "17 Feb 2025 - 09:23 WIB",
+      description:
+        "Jakarta – Kepala Korps Lalu Lintas (Kakorlantas) Polri Irjen Pol Aan Suhanan memimpin upacara pelantikan Direktur Registrasi dan Identifikasi (Dirregident) Korlantas Polri yang baru, Brigjen Pol Wibowo, di Gedung NTMC, Jakarta, pada Selasa (8/1). Pelantikan ini menandai pergantian jabatan di lingkungan Korlantas Polri. Sebelumnya, Brigjen Pol Wibowo menjabat sebagai Wakapolda Jawa Barat, dan menggantikan Brigjen Pol Yusri Yunus yang memasuki masa purna tugas pada Desember 2024 lalu.",
+    },
+  ];
+
   useEffect(() => {
     const timer = setTimeout(() => {
       setIsLoading(false);
@@ -76,12 +124,12 @@ const RegionalNews = () => {
   return (
     <>
       <Reveal>
-        <div className="my-5 px-4 lg:px-28 gap-3">
+        <div className="mt-10 mb-5 px-4 lg:px-20 gap-3">
           <div className="bg-[#c03724] rounded-md p-3 w-fit">
             <p className="text-white font-semibold">Berita Wilayah</p>
           </div>
         </div>
-        <div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-11 w-auto">
+        <div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-20">
           {isLoading ? (
             <div className="flex flex-col space-y-3 mx-auto w-full lg:w-2/3">
               <Skeleton className="h-[310px] lg:h-[420px]  rounded-xl" />
@@ -92,23 +140,17 @@ const RegionalNews = () => {
             </div>
           ) : (
             <div className="w-full lg:w-2/3 lg:h-full">
-              {content?.map((row: any) => (
+              {newContent?.slice(0, 1).map((row: any) => (
                 <div className="flex flex-col gap-3">
-                  <Image src={row?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full lg:w-[950px] h-[310px] lg:h-[420px] rounded-sm object-cover" /> <h1 className="font-bold text-xl">{row?.title}</h1>
+                  <Image src={row?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full h-[310px] lg:h-[420px] rounded-sm object-cover" /> <h1 className="font-bold text-xl">{row?.title}</h1>
                   <div className="flex flex-row gap-3">
                     <p className="text-[#c03724] text-xs">{row?.categoryName}</p>
                     <p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
-                      {formatDateToIndonesian(new Date(row?.createdAt))} {row?.timezone ? row?.timezone : "WIB"}|{" "}
-                      <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
-                        <path
-                          fill="currentColor"
-                          d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
-                        />
-                      </svg>{" "}
-                      {row?.clickCount}{" "}
+                      {/* {formatDateToIndonesian(new Date(row?.createdAt))} {row?.timezone ? row?.timezone : "WIB"}|{" "} */}
+                      {row?.createdAt}
                     </p>
                   </div>
-                  <p className="text-light text-justify hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{row?.description}</p>
+                  <p className="text-light text-justify">{row?.description}</p>
                 </div>
               ))}
             </div>
@@ -153,25 +195,19 @@ const RegionalNews = () => {
               </div>
             </div>
           ) : (
-            <div className="py-4 lg:py-0 flex flex-col gap-4 flex-nowrap w-[95vw] lg:w-auto overflow-x-auto">
-              {content?.map((item: any) => (
+            <div className="py-4 lg:py-0 flex flex-col gap-4 flex-nowrap w-[95vw] lg:w-[30%] overflow-x-auto">
+              {newContent?.map((item: any) => (
                 <div className="flex gap-3 flex-col lg:w-full">
                   {/* <div className="flex-shrink-0 rounded-lg">
                   <Image width={720} height={480} src={item?.thumbnailLink} alt="" className="w-full h-[105px] object-cover rounded-sm" />
                 </div> */}
-                  <div className="w-[280px] lg:w-auto flex flex-col">
+                  <div className="w-[280px] lg:w-auto flex flex-col gap-5">
                     <h3 className="font-bold text-lg">{item?.title}</h3>
                     <div className="flex flex-row gap-5">
                       <p className="text-[#c03724] text-sm">{item?.categoryName}</p>
                       <p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
-                        {formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"}|{" "}
-                        <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
-                          <path
-                            fill="currentColor"
-                            d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
-                          />
-                        </svg>{" "}
-                        {item?.clickCount}{" "}
+                        {/* {formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"}|{" "} */}
+                        {item?.createdAt}
                       </p>
                     </div>
                   </div>
diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/social-media.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/social-media.tsx
index 9a3e2dad..22fb1726 100644
--- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/social-media.tsx
+++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/social-media.tsx
@@ -11,7 +11,7 @@ const SocialMedia = () => {
   return (
     <>
       <Reveal>
-        <div className="px-4 lg:px-28 mt-5">
+        <div className="px-4 lg:px-20 my-10">
           <div className="bg-[#c03724] rounded-md p-3 w-fit text-white">Media Sosial</div>
           <div className="mx-auto w-full max-w-7xl justify-center flex px-5 flex-col lg:flex-row gap-5 mb-4">
             <Tabs value={selectedTab} onValueChange={setSelectedTab}>
@@ -53,34 +53,127 @@ const SocialMedia = () => {
               </TabsList>
             </Tabs>
           </div>
-          <div className="flex flex-col lg:flex-row px-0 lg:px-10">
+          <div className="flex flex-col lg:flex-row ">
             {selectedTab == "x" ? (
-              <div className="border border-slate-300 rounded-lg mt-4 w-[330px]">
-                <div className="mt-2 flex flex-row gap-2 mx-1">
-                  <div className="h-full">
-                    {" "}
-                    <Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
-                  </div>
-                  <div className="flex flex-col">
-                    <div className="flex flex-row gap-2">
-                      <p className="font-bold">Humas_PoldaKaltara</p>
-                      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
-                        <path
-                          fill="#53b0ff"
-                          d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
-                        />
-                      </svg>
+              <div className="flex flex-row justify-between gap-20">
+                <div className="border border-slate-300 rounded-lg mt-4 w-[350px] h-[450px]">
+                  <div className="mt-2 flex flex-row gap-2 mx-1">
+                    <div className="h-full">
+                      {" "}
+                      <Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
+                    </div>
+                    <div className="flex flex-col">
+                      <div className="flex flex-row gap-2">
+                        <p className="font-bold">Humas_PoldaKaltara</p>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
+                          <path
+                            fill="#53b0ff"
+                            d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
+                          />
+                        </svg>
+                      </div>
+                      <p className="text-slate-500 text-sm">@HumasKaltara</p>
+                    </div>
+                  </div>
+                  <div className="flex flex-col w-full px-3">
+                    <div className="my-3">
+                      <p className="text-sm text-justify">
+                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et
+                        dolor ut ullam tempora deserunt dolore consequatur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati sint et sunt quis, eius fuga aliquid, officia possimus quidem adipisci repudiandae voluptate
+                        deserunt dolores dolor minima, earum similique eligendi quaerat.
+                      </p>
+                      <Image alt="" src="/assets/img/gbr-contoh.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
                     </div>
-                    <p className="text-slate-500 text-sm">@HumasKaltara</p>
                   </div>
                 </div>
-                <div className="flex flex-col w-full px-3">
-                  <div className="my-3">
-                    <p className="text-sm text-justify">
-                      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et dolor
-                      ut ullam tempora deserunt dolore consequatur!
-                    </p>
-                    <Image alt="" src="/assets/img/gbr-contoh.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
+                <div className="border border-slate-300 rounded-lg mt-4 w-[350px]">
+                  <div className="mt-2 flex flex-row gap-2 mx-1">
+                    <div className="h-full">
+                      {" "}
+                      <Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
+                    </div>
+                    <div className="flex flex-col">
+                      <div className="flex flex-row gap-2">
+                        <p className="font-bold">Humas_PoldaKaltara</p>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
+                          <path
+                            fill="#53b0ff"
+                            d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
+                          />
+                        </svg>
+                      </div>
+                      <p className="text-slate-500 text-sm">@HumasKaltara</p>
+                    </div>
+                  </div>
+                  <div className="flex flex-col w-full px-3">
+                    <div className="my-3">
+                      <p className="text-sm text-justify">
+                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et
+                        dolor ut ullam tempora deserunt dolore consequatur! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima repellat corrupti ipsa cumque obcaecati sed ipsum libero, excepturi officia amet, sequi ullam
+                        dolores accusantium vero suscipit aut vel temporibus fugit.
+                      </p>
+                      <Image alt="" src="/assets/tbnews/medsos1.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
+                    </div>
+                  </div>
+                </div>
+                <div className="border border-slate-300 rounded-lg mt-4 w-[350px]">
+                  <div className="mt-2 flex flex-row gap-2 mx-1">
+                    <div className="h-full">
+                      {" "}
+                      <Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
+                    </div>
+                    <div className="flex flex-col">
+                      <div className="flex flex-row gap-2">
+                        <p className="font-bold">Humas_PoldaKaltara</p>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
+                          <path
+                            fill="#53b0ff"
+                            d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
+                          />
+                        </svg>
+                      </div>
+                      <p className="text-slate-500 text-sm">@HumasKaltara</p>
+                    </div>
+                  </div>
+                  <div className="flex flex-col w-full px-3">
+                    <div className="my-3">
+                      <p className="text-sm text-justify">
+                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et
+                        dolor ut ullam tempora deserunt dolore consequatur! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem, eveniet sint modi, cupiditate pariatur quod voluptas minus commodi molestiae, natus dolores
+                        asperiores debitis provident error odio eaque id? Iste, enim?
+                      </p>
+                      <Image alt="" src="/assets/tbnews/medsos3.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
+                    </div>
+                  </div>
+                </div>
+                <div className="border border-slate-300 rounded-lg mt-4 w-[350px]">
+                  <div className="mt-2 flex flex-row gap-2 mx-1">
+                    <div className="h-full">
+                      {" "}
+                      <Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
+                    </div>
+                    <div className="flex flex-col">
+                      <div className="flex flex-row gap-2">
+                        <p className="font-bold">Humas_PoldaKaltara</p>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
+                          <path
+                            fill="#53b0ff"
+                            d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
+                          />
+                        </svg>
+                      </div>
+                      <p className="text-slate-500 text-sm">@HumasKaltara</p>
+                    </div>
+                  </div>
+                  <div className="flex flex-col w-full px-3">
+                    <div className="my-3">
+                      <p className="text-sm text-justify">
+                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et
+                        dolor ut ullam tempora deserunt dolore consequatur! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore quibusdam doloribus magni nisi consectetur reiciendis cumque eius exercitationem. Adipisci ipsam
+                        dolor accusamus quibusdam.
+                      </p>
+                      <Image alt="" src="/assets/tbnews/medsos2.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
+                    </div>
                   </div>
                 </div>
               </div>
@@ -210,7 +303,7 @@ const SocialMedia = () => {
               </p>
             )}
           </div>
-          <div className="flex items-center flex-row justify-center">
+          <div className="flex items-center flex-row justify-center mt-4">
             <Link href="#" className="border text-[#bb3523] rounded-lg text-sm lg:text-md px-4 py-1 border-[#bb3523]">
               Lihat Semua
             </Link>
diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/video/detail/[slug]/layout.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/video/detail/[slug]/layout.tsx
new file mode 100644
index 00000000..f7fff9e8
--- /dev/null
+++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/video/detail/[slug]/layout.tsx
@@ -0,0 +1,16 @@
+import NavbarKaltara from "../../../components/navbar-kaltara";
+import ContactUs from "../../../components/contact-us";
+import NewsTickerKaltara from "../../../components/news-tickers-kaltara";
+
+const layout = async ({ children }: { children: React.ReactNode }) => {
+  return (
+    <>
+      <NavbarKaltara />
+      {children}
+      <ContactUs />
+      <NewsTickerKaltara />
+    </>
+  );
+};
+
+export default layout;
diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/video/detail/[slug]/page.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/video/detail/[slug]/page.tsx
new file mode 100644
index 00000000..a00047f4
--- /dev/null
+++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/video/detail/[slug]/page.tsx
@@ -0,0 +1,1010 @@
+// "use client";
+
+// import { Skeleton } from "@/components/ui/skeleton";
+// import Image from "next/image";
+// import React, { useEffect, useState } from "react";
+// import { useParams, usePathname, useSearchParams } from "next/navigation";
+// import { useRouter } from "@/i18n/routing";
+// import { useTranslations } from "next-intl";
+// import { formatDateToIndonesian } from "@/utils/globals";
+// import { Icon } from "@iconify/react/dist/iconify.js";
+
+// const page = () => {
+//   const [isLoading, setIsLoading] = useState<any>(true);
+//   const [selectedImage, setSelectedImage] = useState(0);
+//   const router = useRouter();
+//   const pathname = usePathname();
+//   const params = useParams();
+//   const slug = String(params?.slug);
+//   const t = useTranslations("LandingPage");
+//   const poldaName = params?.polda_name;
+//   const satkerName = params?.satker_name;
+
+//   let prefixPath = poldaName ? `/polda/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/";
+
+//   useEffect(() => {
+//     const timer = setTimeout(() => {
+//       setIsLoading(false);
+//     }, 3000);
+
+//     return () => clearTimeout(timer);
+//   }, []);
+//   const shimmer = (w: number, h: number) => `
+//   <svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+//     <defs>
+//       <linearGradient id="g">
+//         <stop stop-color="#bcbcbd" offset="20%" />
+//         <stop stop-color="#f9fafb" offset="50%" />
+//         <stop stop-color="#bcbcbd" offset="70%" />
+//       </linearGradient>
+//     </defs>
+//     <rect width="${w}" height="${h}" fill="#bcbcbd" />
+//     <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
+//     <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
+//   </svg>`;
+
+//   const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
+
+//   const dataDummy: any = [
+//     {
+//       id: 1,
+//       image: "/assets/tbnews/image-hero1.png",
+//       uploadedBy: "MABES POLRI",
+//       updatedAt: "15 Januari 2025 - 09:27 WIB",
+//       clickCount: "61",
+//       creatBy: "Humas Polri",
+//       htmlDescription:
+//         "Jakarta – Kepala Korps Lalu Lintas (Kakorlantas) Polri Irjen Pol Aan Suhanan memimpin upacara pelantikan Direktur Registrasi dan Identifikasi (Dirregident) Korlantas Polri yang baru, Brigjen Pol Wibowo, di Gedung NTMC, Jakarta, pada Selasa (8/1). Pelantikan ini menandai pergantian jabatan di lingkungan Korlantas Polri.Sebelumnya, Brigjen Pol Wibowo menjabat sebagai Wakapolda Jawa Barat, dan menggantikan Brigjen Pol Yusri Yunus yang memasuki masa purna tugas pada Desember 2024 lalu.Dalam prosesi pelantikan, Kakorlantas Irjen Pol Aan Suhanan mengucapkan sumpah jabatan, yang kemudian diikuti oleh Brigjen Pol Wibowo. Demi Allah saya bersumpah akan setia kepada Negara Kesatuan Republik Indonesia yang berdasarkan Pancasila dan Undang-Undang Dasar 1945, serta akan menjalankan segala peraturan perundang-undangan dengan selurus-lurusnya demi dharma bakti saya kepada bangsa dan negara. ujar Kakorlantas saat memimpin prosesi, diikuti oleh Dirregident yang baru dilantik. Selanjutnya, dilaksanakan penandatanganan pakta integritas sebagai bagian dari proses serah terima jabatan (sertijab). Dalam kesempatan tersebut, turut hadir para pejabat tinggi Korlantas Polri, di antaranya Dirkamsel Korlantas Polri Brigjen Pol Bakharuddin Muhammad Syah, Dirgakkum Korlantas Polri Brigjen Pol Raden Slamet Santoso, serta para pejabat utama Korlantas Polri lainnya.",
+//       title: "Brigjen Pol Wibowo Resmi Dilantik sebagai Dirregident Korlantas Polri",
+//       polda_name: "polda-kaltara",
+//     },
+//   ];
+
+//   return (
+//     <>
+//       <div className="min-h-screen px-4 md:px-24 py-4">
+//         <div className="rounded-md overflow-hidden md:flex">
+//           {/* Bagian Kiri */}
+//           <div className="md:w-3/4">
+//             {/* Gambar Besar */}
+//             {isLoading ? (
+//               <div className="relative">
+//                 <Skeleton className="rounded-lg h-[300px] w-screen lg:h-[600px] lg:w-[900px]" />
+//               </div>
+//             ) : (
+//               <div className="relative">
+//                 <Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={2560} height={1440} src={dataDummy?.image} alt="Main" className="rounded-lg w-auto h-fit" />
+//                 <div className="absolute top-4 left-4"></div>
+//               </div>
+//             )}
+
+//             {/* Gambar bawah Kecil */}
+//             {/* {isLoading ? (
+//                           <div className="py-4 flex flex-row gap-3">
+//                             <Skeleton className="rounded-lg w-[120px] h-[90px]" />
+//                             <Skeleton className="rounded-lg w-[120px] h-[90px]" />
+//                             <Skeleton className="rounded-lg w-[120px] h-[90px]" />
+//                           </div>
+//                         ) : (
+//                           <div className="py-4 flex flex-row gap-3">
+//                             {detailDataImage?.files?.map((file: any, index: number) => (
+//                               <a onClick={() => setSelectedImage(index)} key={file?.id}>
+//                                 <Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={1920} height={1080} alt="image-small" src={file?.url} className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600" />
+//                               </a>
+//                             ))}
+//                           </div>
+//                         )} */}
+
+//             {/* Footer Informasi */}
+//             <div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4">
+//               <div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between">
+//                 <p className="text-xs lg:text-sm">
+//                   {t("by")}&nbsp;<span className="font-semibold text-black dark:text-white">{dataDummy?.uploadedBy}</span>
+//                 </p>
+//                 {/* <p className="text-xs lg:text-sm">
+//                                           &nbsp;|&nbsp;{t("updatedOn")}
+//                                           {detailDataImage?.updatedAt} WIB &nbsp;|&nbsp;
+//                                         </p> */}
+//                 <p className="text-xs lg:text-sm">
+//                   &nbsp;|&nbsp;{t("updatedOn")}&nbsp;
+//                   {formatDateToIndonesian(new Date(dataDummy?.updatedAt))} {"WIB"}
+//                 </p>
+//                 <p className="text-xs lg:text-sm flex justify-center items-center">
+//                   &nbsp;|&nbsp;
+//                   <Icon icon="formkit:eye" width="15" height="15" />
+//                   &nbsp; {dataDummy?.clickCount} &nbsp;
+//                 </p>
+//               </div>
+//               <div className="mt-3">
+//                 <p className="flex text-end text-xs lg:text-sm font-semibold">
+//                   {t("creator")}
+//                   {dataDummy?.creatorName}
+//                 </p>
+//               </div>
+//             </div>
+
+//             {/* Keterangan */}
+//             <div className="w-full">
+//               <h1 className="flex flex-row font-bold text-lg lg:text-2xl my-8">{dataDummy?.title}</h1>
+//               <div className="font-light text-justify mb-5 space-y-4 lg:mb-0" dangerouslySetInnerHTML={{ __html: dataDummy?.htmlDescription }} />
+//             </div>
+//           </div>
+//         </div>
+//       </div>
+//     </>
+//   );
+// };
+
+// export default page;
+
+"use client";
+
+import { Textarea } from "@/components/ui/textarea";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
+import React, { useEffect, useState } from "react";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import NewContent from "@/components/landing-page/new-content";
+import { useToast } from "@/components/ui/use-toast";
+import { getCookiesDecrypt } from "@/lib/utils";
+import { close, error, loading, successCallback, warning } from "@/config/swal";
+import { checkWishlistStatus, createPublicSuggestion, deletePublicSuggestion, deleteWishlist, getDetail, getPublicSuggestionList, saveWishlist } from "@/service/landing/landing";
+import { Link, useRouter } from "@/i18n/routing";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
+import { checkMaliciousText, formatDateToIndonesian, getPublicLocaleTimestamp } from "@/utils/globals";
+import withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
+import parse from "html-react-parser";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+
+interface Size {
+  label: string;
+  value: string;
+}
+
+const DetailInfo = () => {
+  const MySwal = withReactContent(Swal);
+  const [selectedSize, setSelectedSize] = useState<string>("L");
+  const [selectedTab, setSelectedTab] = useState("video");
+  const router = useRouter();
+  const pathname = usePathname();
+  const params = useParams();
+  const slug = String(params?.slug);
+  const [detailDataImage, setDetailDataImage] = useState<any>();
+  const [selectedImage, setSelectedImage] = useState(0);
+  const [isSaved, setIsSaved] = useState(false);
+  const [wishlistId, setWishlistId] = useState();
+  const { toast } = useToast();
+  const [isDownloadAll, setIsDownloadAll] = useState(false);
+  const [downloadProgress, setDownloadProgress] = useState(0);
+  const [isFromSPIT, setIsFromSPIT] = useState(false);
+  const [main, setMain] = useState<any>();
+  const [resolutionSelected, setResolutionSelected] = useState("720");
+  const [imageSizeSelected, setImageSizeSelected] = useState("l");
+  const userId = getCookiesDecrypt("uie");
+  const [content, setContent] = useState<any>([]);
+  const [emailShareList, setEmailShareList] = useState<any>();
+  const [emailShareInput, setEmailShareInput] = useState<any>();
+  const [emailMessageInput, setEmailMessageInput] = useState();
+  const searchParams = useSearchParams();
+  const [width, setWidth] = useState<any>();
+  const userRoleId = getCookiesDecrypt("urie");
+  const [message, setMessage] = useState("");
+  const [listSuggestion, setListSuggestion] = useState<any>();
+  const [isLoading, setIsLoading] = useState<any>(true);
+  const [visibleInput, setVisibleInput] = useState(null);
+  let typeString = "image";
+  const t = useTranslations("LandingPage");
+  const poldaName = params?.polda_name;
+  const satkerName = params?.satker_name;
+
+  let prefixPath = poldaName ? `/polda/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/";
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 3000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  useEffect(() => {
+    initFetch();
+    checkWishlist();
+  }, []);
+
+  const initFetch = async () => {
+    const response = await getDetail(String(slug));
+    console.log("detailImage", response);
+    const responseGet = await getPublicSuggestionList(slug?.split("-")?.[0]);
+
+    setIsFromSPIT(response?.data?.data?.isFromSPIT);
+    setWidth(window.innerWidth);
+    setContent(response?.data.data);
+    setListSuggestion(responseGet.data?.data);
+    setMain({
+      id: response?.data?.data?.files[0]?.id,
+      type: response?.data?.data?.fileType.name,
+      url:
+        Number(response?.data?.data?.fileType?.id) == 4
+          ? response?.data?.data?.files[0]?.secondaryUrl
+          : Number(response?.data?.data?.fileType?.id) == 2
+          ? `${process.env.NEXT_PUBLIC_API}/media/view?id=${response?.data?.data?.files[0]?.id}&operation=file&type=video`
+          : response?.data?.data?.files[0]?.url,
+      thumbnailFileUrl: response?.data?.data?.files[0]?.thumbnailFileUrl,
+      names: response?.data?.data?.files[0]?.fileName,
+      format: response?.data?.data?.files[0]?.format,
+      widthPixel: response?.data?.data?.files[0]?.widthPixel,
+      heightPixel: response?.data?.data?.files[0]?.heightPixel,
+      size: response?.data?.data?.files[0]?.size,
+      caption: response?.data?.data?.files[0]?.caption,
+    });
+    setDetailDataImage(response?.data?.data);
+  };
+
+  const doBookmark = async () => {
+    if (userId) {
+      const data = {
+        mediaUploadId: slug?.split("-")?.[0],
+      };
+
+      loading();
+      const res = await saveWishlist(data);
+      if (res?.error) {
+        error(res.message);
+        return false;
+      }
+      close();
+      toast({
+        title: "Konten berhasil disimpan",
+      });
+      checkWishlist();
+    } else {
+      router.push("/auth");
+    }
+  };
+  async function checkWishlist() {
+    if (userId) {
+      const res = await checkWishlistStatus(slug.split("-")?.[0]);
+      console.log(res?.data?.data);
+      const isAlreadyOnWishlist = res?.data?.data !== "-1";
+      setWishlistId(res?.data?.data);
+      setIsSaved(isAlreadyOnWishlist);
+    }
+  }
+
+  const handleDeleteWishlist = async () => {
+    if (userId) {
+      loading();
+      const res = await deleteWishlist(wishlistId);
+
+      if (res?.error) {
+        error(res.message);
+        return false;
+      }
+
+      toast({
+        title: "Konten berhasil dihapus",
+      });
+      close();
+      checkWishlist();
+    } else {
+      router.push("/auth");
+    }
+  };
+
+  // const sizes = [
+  //   { label: "XL", value: "3198 x 1798 px" },
+  //   { label: "L", value: "2399 x 1349 px" },
+  //   { label: "M", value: "1599 x 899 px" },
+  //   { label: "S", value: "1066 x 599 px" },
+  //   { label: "XS", value: "800 x 450 px" },
+  // ];
+
+  const scaleFactors = {
+    XL: 2,
+    L: 1.5,
+    M: 1.25,
+    S: 1,
+    XS: 0.75,
+  };
+  const sizes: Size[] = Object.entries(scaleFactors).map(([label, factor]) => {
+    const width = Number(main?.widthPixel);
+    const height = Number(main?.heightPixel);
+
+    if (isNaN(width) || isNaN(height) || width === 0) {
+      return { label, value: "Invalid size" };
+    }
+
+    const newWidth = Math.round(width * factor);
+    const newHeight = Math.round((width * factor) / (width / height));
+
+    return { label, value: `${newWidth} x ${newHeight} px` };
+  });
+
+  async function sendActivityLog(activityTypeId: number) {
+    const data = {
+      activityTypeId,
+      mediaId: slug.split("-")?.[0],
+      url: window.location.href,
+    };
+    // set activity
+    // const response = await postActivityLog(data, token);
+    // console.log(response);
+  }
+
+  const handleDownload = () => {
+    if (downloadProgress === 0) {
+      if (!userId) {
+        router.push("/auth/login");
+      } else {
+        sendActivityLog(2);
+        sendActivityLog(3);
+
+        if (isDownloadAll) {
+          let url: string;
+          const baseId = slug.split("-")?.[0];
+
+          // if (type === "1") {
+          // url = `${process.env.NEXT_PUBLIC_API}/media/file/download-zip?id=${baseId}&resolution=${resolutionSelected}`;
+          // } else if (type === "2") {
+          url = `${process.env.NEXT_PUBLIC_API}/media/file/download-zip?id=${baseId}&resolution=${imageSizeSelected}`;
+          // } else {
+          //   url = `${process.env.NEXT_PUBLIC_API}/media/file/download-zip?id=${baseId}`;
+          // }
+
+          downloadFile(url, "FileDownload.zip");
+        } else {
+          if (isFromSPIT && main?.url?.includes("spit.humas")) {
+            downloadFile(`${main?.url}`, `${main.names}`);
+          } else {
+            // const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=video&resolution=${resolutionSelected}p`;
+            // downloadFile(url, `${main.names}`);
+            const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=image&resolution=${imageSizeSelected}`;
+            downloadFile(url, `${main.names}`);
+          }
+        }
+        // } else if (type === "1" && resolutionSelected?.length > 0) {
+        //   if (isFromSPIT && main?.url?.includes("spit.humas")) {
+        //     downloadFile(`${main?.url}`, `${main.names}`);
+        //   } else {
+        //     const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=video&resolution=${resolutionSelected}p`;
+        //     downloadFile(url, `${main.names}`);
+        //   }
+        // } else if (type === "2" && imageSizeSelected?.length > 0) {
+        // const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=image&resolution=${imageSizeSelected}`;
+        // downloadFile(url, `${main.names}`);
+        // } else if (type === "3" || type === "4") {
+        //   downloadFile(`${main?.url}`, `${main.names}`);
+        // }
+      }
+    }
+  };
+
+  const downloadFile = (fileUrl: string, name: string) => {
+    const xhr = new XMLHttpRequest();
+
+    xhr.open("GET", fileUrl, true);
+    xhr.responseType = "blob";
+
+    xhr.addEventListener("progress", (event) => {
+      if (event.lengthComputable) {
+        const percentCompleted = Math.round((event.loaded / event.total) * 100);
+        setDownloadProgress(percentCompleted);
+      }
+    });
+
+    xhr.addEventListener("readystatechange", () => {
+      if (xhr.readyState === 4 && xhr.status === 200) {
+        const contentType = xhr.getResponseHeader("content-type") || "application/octet-stream";
+        const extension = contentType.split("/")[1];
+        const filename = `${name}.${extension}`;
+
+        const blob = new Blob([xhr.response], {
+          type: contentType,
+        });
+        const downloadUrl = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+
+        a.href = downloadUrl;
+        a.download = filename;
+        document.body.append(a);
+        a.click();
+        a.remove();
+      }
+    });
+
+    xhr.onloadend = () => {
+      setDownloadProgress(0);
+    };
+
+    xhr.send();
+  };
+
+  const handleShare = (type: any, url: any) => {
+    if (Number(userRoleId) < 1 || userRoleId == undefined) {
+      router.push("/auth/login");
+    } else {
+      sendActivityLog(2);
+      sendActivityLog(4);
+      if (type == "wa" && width <= 768) {
+        window.open(`whatsapp://send?${url}`, "_blank");
+      } else if (type == "wa" && width > 768) {
+        window.open(`https://web.whatsapp.com/send?${url}`, "_blank", "noreferrer");
+      } else {
+        window.open(url);
+      }
+    }
+  };
+
+  async function shareToEmail() {
+    if (Number(userRoleId) < 1 || userRoleId == undefined) {
+      router.push("/auth/login");
+    } else {
+      const data = {
+        mediaUploadId: slug?.split("-")?.[0],
+        email: emailShareList || [emailShareInput],
+        message: emailMessageInput,
+        url: window.location.href,
+      };
+      loading();
+      const res = await sendMediaUploadToEmail(data);
+      if (res?.error) {
+        error(res.message);
+        return false;
+      }
+      close();
+      successCallback("Konten Telah Dikirim");
+    }
+  }
+
+  const handleEmailList = (e: any) => {
+    const arrayEmail: any = [];
+    for (let i = 0; i < emailShareList?.length; i += 1) {
+      arrayEmail.push(emailShareList[i]);
+    }
+    if (e.which == 13) {
+      if (e.target.value) {
+        arrayEmail.push(e.target.value);
+        setEmailShareList(arrayEmail);
+        setEmailShareInput("");
+      }
+      e.preventDefault();
+    }
+    return false;
+  };
+
+  function addDefaultProfile(ev: any) {
+    ev.target.src = "/assets/avatar-profile.png";
+  }
+
+  const showInput = (e: any) => {
+    console.log(document.querySelector(`#${e}`)?.classList);
+    document.querySelector(`#${e}`)?.classList.toggle("none");
+    setVisibleInput(visibleInput === e ? null : e);
+  };
+
+  const getInputValue = (e: any) => {
+    const message = e.target.value;
+    console.log(message);
+    setMessage(message);
+  };
+
+  async function sendSuggestionParent() {
+    if (message?.length > 3) {
+      loading();
+      const data = {
+        mediaUploadId: slug?.split("-")?.[0],
+        message,
+        parentId: null,
+      };
+
+      const response = await createPublicSuggestion(data);
+
+      console.log(response);
+      setMessage("");
+
+      const responseGet = await getPublicSuggestionList(slug?.split("-")?.[0]);
+      console.log(responseGet?.data?.data);
+      setListSuggestion(responseGet?.data?.data);
+
+      // Hapus nilai semua input secara manual jika perlu
+      const inputs = document.querySelectorAll("input");
+      inputs.forEach((input) => {
+        input.value = "";
+      });
+
+      close();
+    }
+  }
+
+  async function sendSuggestionChild(parentId: any) {
+    const inputElement = document.querySelector(`#input-comment-${parentId}`) as HTMLInputElement;
+
+    if (inputElement && inputElement.value.length > 3) {
+      loading();
+      const data = {
+        mediaUploadId: slug?.split("-")?.[0],
+        message: inputElement.value,
+        parentId,
+      };
+
+      console.log(data);
+      const response = await createPublicSuggestion(data);
+      console.log(response);
+      const responseGet: any = await getPublicSuggestionList(slug?.split("-")?.[0]);
+      console.log(responseGet.data?.data);
+      setListSuggestion(responseGet.data?.data);
+
+      // Reset input field
+      inputElement.value = "";
+
+      // document.querySelector("#comment-id-" + parentId)?.style.display = "none";
+
+      close();
+    }
+  }
+
+  const postData = () => {
+    const checkMessage = checkMaliciousText(message);
+    if (checkMessage == "") {
+      if (Number(userRoleId) < 1 || userRoleId == undefined) {
+        router.push("/auth");
+      } else {
+        sendSuggestionParent();
+      }
+    } else {
+      warning(checkMessage);
+    }
+  };
+
+  const postDataChild = (id: any) => {
+    const checkMessage = checkMaliciousText(message);
+    if (checkMessage == "") {
+      if (Number(userRoleId) < 1 || userRoleId == undefined) {
+        router.push("/auth");
+      } else {
+        sendSuggestionChild(id);
+      }
+    } else {
+      warning(checkMessage);
+    }
+  };
+
+  async function deleteDataSuggestion(dataId: any) {
+    loading();
+    const response = await deletePublicSuggestion(dataId);
+    console.log(response);
+    const responseGet = await getPublicSuggestionList(slug.split("-")?.[0]);
+    console.log(responseGet.data?.data);
+    setListSuggestion(responseGet.data?.data);
+    close();
+  }
+
+  const deleteData = (dataId: any) => {
+    MySwal.fire({
+      title: "Delete Comment",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#3085d6",
+      confirmButtonColor: "#d33",
+      confirmButtonText: "Delete",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        deleteDataSuggestion(dataId);
+        console.log(dataId);
+      }
+    });
+  };
+
+  const shimmer = (w: number, h: number) => `
+  <svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+      <linearGradient id="g">
+        <stop stop-color="#bcbcbd" offset="20%" />
+        <stop stop-color="#f9fafb" offset="50%" />
+        <stop stop-color="#bcbcbd" offset="70%" />
+      </linearGradient>
+    </defs>
+    <rect width="${w}" height="${h}" fill="#bcbcbd" />
+    <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
+    <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
+  </svg>`;
+
+  const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
+
+  return (
+    <>
+      <div className="min-h-screen px-4 md:px-24 py-4 my-0 lg:my-[150px]">
+        <div className="rounded-md overflow-hidden md:flex">
+          {/* Bagian Kiri */}
+          <div className="md:w-3/4">
+            {/* Gambar Besar */}
+            {isLoading ? (
+              <div className="relative">
+                <Skeleton className="rounded-lg h-[300px] w-screen lg:h-[600px] lg:w-[900px]" />
+              </div>
+            ) : (
+              <div className="relative">
+                <Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={2560} height={1440} src={detailDataImage?.files[selectedImage]?.url} alt="Main" className="rounded-lg w-auto h-fit" />
+                <div className="absolute top-4 left-4"></div>
+              </div>
+            )}
+
+            {/* Gambar bawah Kecil */}
+            {isLoading ? (
+              <div className="py-4 flex flex-row gap-3">
+                <Skeleton className="rounded-lg w-[120px] h-[90px]" />
+                <Skeleton className="rounded-lg w-[120px] h-[90px]" />
+                <Skeleton className="rounded-lg w-[120px] h-[90px]" />
+              </div>
+            ) : (
+              <div className="py-4 flex flex-row gap-3">
+                {detailDataImage?.files?.map((file: any, index: number) => (
+                  <a onClick={() => setSelectedImage(index)} key={file?.id}>
+                    <Image
+                      placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                      width={1920}
+                      height={1080}
+                      alt="image-small"
+                      src={file?.url}
+                      className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600"
+                    />
+                  </a>
+                ))}
+              </div>
+            )}
+
+            {/* Footer Informasi */}
+            <div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4">
+              <div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between">
+                <p className="text-xs lg:text-sm">
+                  {t("by")}&nbsp;<span className="font-semibold text-black dark:text-white">{detailDataImage?.uploadedBy?.userLevel?.name}</span>
+                </p>
+                {/* <p className="text-xs lg:text-sm">
+                  &nbsp;|&nbsp;{t("updatedOn")}
+                  {detailDataImage?.updatedAt} WIB &nbsp;|&nbsp;
+                </p> */}
+                <p className="text-xs lg:text-sm">
+                  &nbsp;|&nbsp;{t("updatedOn")}&nbsp;
+                  {formatDateToIndonesian(new Date(detailDataImage?.updatedAt))} {"WIB"}
+                </p>
+                <p className="text-xs lg:text-sm flex justify-center items-center">
+                  &nbsp;|&nbsp;
+                  <Icon icon="formkit:eye" width="15" height="15" />
+                  &nbsp; {detailDataImage?.clickCount} &nbsp;
+                </p>
+              </div>
+              <div className="mt-3">
+                <p className="flex text-end text-xs lg:text-sm font-semibold">
+                  {t("creator")}
+                  {detailDataImage?.creatorName}
+                </p>
+              </div>
+            </div>
+
+            {/* Keterangan */}
+            <div className="w-full">
+              <h1 className="flex flex-row font-bold text-lg lg:text-2xl my-8">{detailDataImage?.title}</h1>
+              <div className="font-light text-justify mb-5 space-y-4 lg:mb-0" dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }} />
+            </div>
+          </div>
+
+          {/* Bagian Kanan */}
+          <div className="md:w-1/4 p-4 bg-[#f7f7f7] dark:bg-slate-600 h-fit rounded-lg mx-4">
+            {isSaved ? (
+              <a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
+                <Icon icon="material-symbols:bookmark" width={40} />
+                <p className="text-base lg:text-lg">{t("delete")}</p>
+              </a>
+            ) : (
+              <a onClick={() => doBookmark()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
+                <Icon icon="material-symbols:bookmark-outline" width={40} />
+                <p className="text-base lg:text-lg">{t("save")}</p>
+              </a>
+            )}
+
+            {/* garis */}
+            <div className="border-t border-black my-4"></div>
+
+            <Link href={`/all/filter?title=polda&category=${detailDataImage?.category.id}`} className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded">
+              {detailDataImage?.category?.name}
+            </Link>
+
+            <div className="flex justify-center flex-wrap gap-2 mb-4">
+              {detailDataImage?.tags?.split(",").map((tag: string) => (
+                <a onClick={() => router.push(`/all/filter?tag=${tag}`)} key={tag} className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500">
+                  {tag}
+                </a>
+              ))}
+            </div>
+
+            <div className="border-t border-black my-4"></div>
+
+            {/* Opsi Ukuran Foto */}
+            <h4 className="flex text-lg justify-center items-center font-semibold my-3">{t("imageSize")}</h4>
+            <div className="border-t border-black my-4"></div>
+
+            <div className="space-y-2">
+              {sizes.map((size: any) => (
+                <div className="flex flex-row justify-between">
+                  <div key={size?.label} className="items-center flex flex-row  gap-2 cursor-pointer">
+                    <input type="radio" name="size" value={size?.label} checked={selectedSize === size?.label} onChange={(e) => setImageSizeSelected(e.target.value)} className="text-red-600 focus:ring-red-600" />
+                    <div className="text-sm">{size?.label}</div>
+                  </div>
+                  <div className="text-sm">{size?.value}</div>
+                </div>
+              ))}
+            </div>
+
+            {/* Download Semua */}
+            <div className="mt-4">
+              <label className="flex items-center space-x-2 text-sm">
+                <input type="checkbox" className="text-red-600 focus:ring-red-600" onChange={() => setIsDownloadAll(!isDownloadAll)} />
+                <span>{t("downloadAll")}</span>
+              </label>
+            </div>
+
+            {/* Tombol Download */}
+            <button onClick={handleDownload} className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700">
+              <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+                <path fill="white" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
+              </svg>
+              {t("download")}
+            </button>
+
+            {/* Tombol Bagikan */}
+            <div className="flex flex-row mt-5 justify-center">
+              <p className="text-base font-semibold">{t("share")}</p>
+              <a className="ml-8 cursor-pointer" onClick={() => handleShare("fb", `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`)}>
+                <Icon icon="brandico:facebook" height="20" className="px-auto text-red-600 text-center" />
+              </a>
+              <a className="ml-5 cursor-pointer" onClick={() => handleShare("tw", `https://twitter.com/share?url=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&text=${content?.title}`)}>
+                <Icon icon="mdi:twitter" width="23" className="text-red-600 text-center" />
+              </a>
+              <a className="ml-5 cursor-pointer" onClick={() => handleShare("wa", `text=${content?.title}%0D%0A%0D%0Ahttps%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}`)}>
+                <Icon icon="ri:whatsapp-fill" width="23" className="text-red-600 text-center" />
+              </a>
+              <Popover>
+                <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
+                  <a className="ml-5 cursor-pointer" data-toggle="dropdown" href="#" aria-expanded="false">
+                    <Icon icon="material-symbols-light:mail" width="23" className="text-red-600 text-center" />
+                  </a>
+                </PopoverTrigger>
+                <PopoverContent>
+                  <div className="flex flex-col">
+                    <h1 className="mb-2">{t("shareTo")}</h1>
+                    <div className="flex flex-col mb-2">
+                      <p className="text-base font-semibold mb-1">{t("destinationEmail")}</p>
+                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter")} />
+                    </div>
+                    <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                      {t("send")}
+                    </Button>
+                  </div>
+                </PopoverContent>
+              </Popover>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="w-full mb-8">
+        {/* Comment */}
+        <div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
+          <div className="gap-5 flex flex-col px-4 lg:px-14">
+            <p className="flex items-start text-lg">{t("comment")}</p>
+            <Textarea placeholder={t("leaveComment")} className="flex w-full pb-12" onChange={getInputValue} />
+            <button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
+              {t("send")}
+            </button>
+          </div>
+
+          <div className="border-b-2  border-slate-300 mt-4 w-auto"></div>
+
+          <div>
+            {listSuggestion?.map((data: any) => (
+              <div className="flex flex-col">
+                <div className="flex flex-row mt-2 px-4 lg:px-14">
+                  <Image
+                    placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                    width={1080}
+                    height={1080}
+                    src={data?.suggestionFrom?.profilePictureUrl}
+                    className="h-12 lg:h-16 w-12 lg:w-16 mr-2"
+                    onError={addDefaultProfile}
+                    alt=""
+                  />
+                  <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
+                    <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
+                      {Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
+                      {getPublicLocaleTimestamp(new Date(data.createdAt))}
+                    </p>
+                    <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{data?.message}</p>
+                    <div>
+                      <a
+                        style={
+                          Number(data.suggestionFrom?.id) == Number(userId)
+                            ? {
+                                display: "none",
+                              }
+                            : {}
+                        }
+                        onClick={() => showInput(`comment-id-${data.id}`)}
+                        className="mr-2"
+                      >
+                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                      </a>
+                      {Number(data.suggestionFrom?.id) == Number(userId) || Number(userRoleId) == 2 ? (
+                        <a onClick={() => deleteData(data.id)}>
+                          <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                        </a>
+                      ) : (
+                        ""
+                      )}
+                    </div>
+                  </div>
+                </div>
+                {visibleInput === `comment-id-${data.id}` && (
+                  <div id={`comment-id-${data.id}`} className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 ">
+                    <Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder={t("enterReply")} />
+                    <div className="flex flex-row gap-3">
+                      <a onClick={() => postDataChild(data.id)}>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">{t("send")}</small>
+                      </a>
+                      <a onClick={() => showInput(`comment-id-${data.id}`)}>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                      </a>
+                    </div>
+                  </div>
+                )}
+
+                {data.children.length > 0
+                  ? data.children?.map((child1: any) => (
+                      <div className="flex flex-col">
+                        <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
+                          <Image
+                            placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                            width={1080}
+                            height={1080}
+                            src={child1.suggestionFrom?.profilePictureUrl}
+                            onError={addDefaultProfile}
+                            alt=""
+                            className="h-10 lg:h-16 w-10 lg:w-16 mr-2"
+                          />
+                          <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
+                            <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
+                              {" "}
+                              <b>{Number(child1.suggestionFrom?.roleId) == 2 || Number(child1.suggestionFrom?.roleId) == 3 || Number(child1.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.suggestionFrom?.fullname}</b>{" "}
+                              {getPublicLocaleTimestamp(new Date(child1.createdAt))}
+                            </p>
+                            <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{parse(String(child1?.message))}</p>
+                            <div>
+                              <a
+                                style={
+                                  Number(child1.suggestionFrom?.id) == Number(userId)
+                                    ? {
+                                        display: "none",
+                                      }
+                                    : {}
+                                }
+                                onClick={() => showInput(`comment-id-${child1.id}`)}
+                              >
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white  px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                              </a>
+                              <a
+                                style={
+                                  Number(child1.suggestionFrom?.id) == Number(userId)
+                                    ? {}
+                                    : {
+                                        display: "none",
+                                      }
+                                }
+                                onClick={() => deleteData(child1.id)}
+                              >
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                              </a>
+                            </div>
+                          </div>
+                        </div>
+
+                        {visibleInput === `comment-id-${child1.id}` && (
+                          <div id={`comment-id-${child1.id}`} className="px-4 lg:px-14 pl-28 lg:pl-[200px]">
+                            <Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder={t("enterReply")} />
+                            <div className="flex flex-row mt-2 gap-3">
+                              <a onClick={() => postDataChild(child1.id)}>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
+                              </a>
+                              <a onClick={() => showInput(`comment-id-${child1.id}`)}>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                              </a>
+                            </div>
+                          </div>
+                        )}
+
+                        {child1.children.length > 0
+                          ? child1.children?.map((child2: any) => (
+                              <div className="">
+                                <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
+                                  <Image
+                                    placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                                    width={1080}
+                                    height={1080}
+                                    src={child2.suggestionFrom?.profilePictureUrl}
+                                    className="h-9 lg:h-16 w-9 lg:w-16 mr-2"
+                                    onError={addDefaultProfile}
+                                    alt=""
+                                  />
+                                  <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
+                                    <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
+                                      {" "}
+                                      <b>{Number(child2.suggestionFrom?.roleId) == 2 || Number(child2.suggestionFrom?.roleId) == 3 || Number(child2.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.suggestionFrom?.fullname}</b>{" "}
+                                      {getPublicLocaleTimestamp(new Date(child2.createdAt))}
+                                    </p>
+                                    <p className="text-slate-500 text-sm mb-4">{parse(String(child2?.message))}</p>
+                                    <div>
+                                      <a
+                                        style={
+                                          Number(child2.suggestionFrom?.id) == Number(userId)
+                                            ? {
+                                                display: "none",
+                                              }
+                                            : {}
+                                        }
+                                        onClick={() => showInput(`comment-id-${child2.id}`)}
+                                      >
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                                      </a>
+                                      <a
+                                        style={
+                                          Number(child2.suggestionFrom?.id) == Number(userId)
+                                            ? {}
+                                            : {
+                                                display: "none",
+                                              }
+                                        }
+                                        onClick={() => deleteData(child2.id)}
+                                      >
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                                      </a>
+                                    </div>
+                                  </div>
+                                </div>
+                                {visibleInput === `comment-id-${child2.id}` && (
+                                  <div id={`comment-id-${child2.id}`} className="px-4 lg:px-14 pl-40 lg:pl-[265px]">
+                                    <Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" />
+                                    <div className="flex flex-row gap-3">
+                                      <a onClick={() => postDataChild(child2.id)}>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
+                                      </a>
+                                      <a onClick={() => showInput(`comment-id-${child2.id}`)}>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                                      </a>
+                                    </div>
+                                  </div>
+                                )}
+                              </div>
+                            ))
+                          : ""}
+                      </div>
+                    ))
+                  : ""}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Konten Serupa */}
+        {/* <div className="">
+          <NewContent group="mabes" type={"similar"} />
+        </div> */}
+      </div>
+    </>
+  );
+};
+
+export default DetailInfo;
diff --git a/components/landing-page/hero.tsx b/components/landing-page/hero.tsx
index 2158b29f..2a3804ef 100644
--- a/components/landing-page/hero.tsx
+++ b/components/landing-page/hero.tsx
@@ -115,7 +115,7 @@ const Hero: React.FC = () => {
                     placeholder={`data:image/svg+xml;base64,${toBase64(
                       shimmer(700, 475)
                     )}`}
-                    className="w-full lg:w-[850px] h-[310px] lg:h-[420px] rounded-lg object-cover"
+                    className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover"
                   />
 
                   <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-black dark:text-white p-4 rounded-b-lg">
diff --git a/public/assets/tbnews/image-hero1.png b/public/assets/tbnews/image-hero1.png
new file mode 100644
index 00000000..3c261ae5
Binary files /dev/null and b/public/assets/tbnews/image-hero1.png differ
diff --git a/public/assets/tbnews/image-hero2.png b/public/assets/tbnews/image-hero2.png
new file mode 100644
index 00000000..c02db6a1
Binary files /dev/null and b/public/assets/tbnews/image-hero2.png differ
diff --git a/public/assets/tbnews/image-hero3.png b/public/assets/tbnews/image-hero3.png
new file mode 100644
index 00000000..b663acd4
Binary files /dev/null and b/public/assets/tbnews/image-hero3.png differ
diff --git a/public/assets/tbnews/image-hero4.png b/public/assets/tbnews/image-hero4.png
new file mode 100644
index 00000000..355bda66
Binary files /dev/null and b/public/assets/tbnews/image-hero4.png differ
diff --git a/public/assets/tbnews/latest1.png b/public/assets/tbnews/latest1.png
new file mode 100644
index 00000000..d7d09678
Binary files /dev/null and b/public/assets/tbnews/latest1.png differ
diff --git a/public/assets/tbnews/medsos1.png b/public/assets/tbnews/medsos1.png
new file mode 100644
index 00000000..889bd87b
Binary files /dev/null and b/public/assets/tbnews/medsos1.png differ
diff --git a/public/assets/tbnews/medsos2.png b/public/assets/tbnews/medsos2.png
new file mode 100644
index 00000000..40c3af0f
Binary files /dev/null and b/public/assets/tbnews/medsos2.png differ
diff --git a/public/assets/tbnews/medsos3.png b/public/assets/tbnews/medsos3.png
new file mode 100644
index 00000000..87342458
Binary files /dev/null and b/public/assets/tbnews/medsos3.png differ
diff --git a/public/assets/tbnews/nasional1.png b/public/assets/tbnews/nasional1.png
new file mode 100644
index 00000000..8a4317ec
Binary files /dev/null and b/public/assets/tbnews/nasional1.png differ
diff --git a/public/assets/tbnews/wilayah1.png b/public/assets/tbnews/wilayah1.png
new file mode 100644
index 00000000..96b5bfe1
Binary files /dev/null and b/public/assets/tbnews/wilayah1.png differ