Merge branch 'dev-sabda' of https://gitlab.com/hanifsalafi/mediahub_redesign

app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/hero-kaltara.tsx

@@ -16,6 +16,45 @@ const HeroKaltara = () => {
   const [centerPadding, setCenterPadding] = useState<any>();
   const [isBannerLoading, setIsBannerLoading] = useState(true);
 
+  const newContent = [
+    {
+      id: 1,
+      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() {
     //   const res = await listCarousel();
@@ -70,7 +109,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 +119,18 @@ 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">
+              {newContent?.slice(0, 1).map((row: any, index: number) => (
+                <div className="flex flex-col gap-3" key={index}>
+                  <Image src={row?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full h-[310px] lg:h-[520px] 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-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 +175,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 +186,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>

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>

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>

app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx

@@ -49,22 +49,24 @@ 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 */}

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>

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>