diff --git a/components/form/content/spit-convert-form.tsx b/components/form/content/spit-convert-form.tsx
index ec3f894e..b7ac6950 100644
--- a/components/form/content/spit-convert-form.tsx
+++ b/components/form/content/spit-convert-form.tsx
@@ -559,7 +559,6 @@ export default function FormConvertSPIT() {
         break;
       }
     }
-    
 
     return temp;
   };
@@ -609,7 +608,8 @@ export default function FormConvertSPIT() {
         icon: "success",
         confirmButtonColor: "#3085d6",
       }).then(() => {
-        router.push("/in/contributor/content/spit");
+        // router.push("/in/contributor/content/spit");
+        router.replace(`${window.location.pathname}?id=${id}`);
       });
     } catch (error) {
       console.error("Failed to save:", error);
diff --git a/components/landing-page/hero-new-polda.tsx b/components/landing-page/hero-new-polda.tsx
index 4ad07e2d..8ab1e9da 100644
--- a/components/landing-page/hero-new-polda.tsx
+++ b/components/landing-page/hero-new-polda.tsx
@@ -2,7 +2,12 @@ import { formatDateToIndonesian, shimmer, toBase64 } from "@/utils/globals";
 import React, { useEffect, useRef, useState } from "react";
 import "swiper/css/bundle";
 import "swiper/css/navigation";
-import { getHeroData, getListContent, listStaticBanner } from "@/service/landing/landing";
+import {
+  getHeroData,
+  getListContent,
+  listPopUp,
+  listStaticBanner,
+} from "@/service/landing/landing";
 import Link from "next/link";
 import { useParams, usePathname, useRouter } from "next/navigation";
 import {
@@ -29,22 +34,183 @@ type HeroModalProps = {
   satkerName?: string;
 };
 
+// const HeroModal = ({
+//   onClose,
+//   group,
+//   poldaName,
+//   satkerName,
+// }: HeroModalProps) => {
+//   const [heroData, setHeroData] = useState<any>();
+//   const params = useParams();
+//   const locale = params?.locale;
+//   const swiperRef = useRef<SwiperClass | null>(null);
+
+//   useEffect(() => {
+//     initFetch();
+//   }, []);
+
+//   useEffect(() => {
+//     document.body.classList.add("overflow-hidden");
+
+//     return () => {
+//       document.body.classList.remove("overflow-hidden");
+//     };
+//   }, []);
+
+//   const initFetch = async () => {
+//     if (group === "polda" && poldaName && String(poldaName).length > 1) {
+//       const response = await listStaticBanner(poldaName, locale == "en");
+
+//       const banners =
+//         response?.data?.data?.map((item: any) => {
+//           const media = item?.mediaUpload;
+//           if (media?.fileType) {
+//             media.fileTypeId = media.fileType.id;
+//           }
+//           return media;
+//         }) || [];
+
+//       console.log("banner Modal", banners);
+//       setHeroData(banners);
+//     } else {
+//       console.log("Test");
+//       setHeroData([]);
+//     }
+//   };
+
+//   return (
+//     <div className="fixed inset-0 flex items-center justify-center backdrop-brightness-50 z-50 ">
+//       <div className="relative dark:bg-gray-900 rounded-lg  w-[90%] md:w-[600px] p-4 shadow-none">
+//         {heroData?.length > 0 && (
+//           <>
+//             <button
+//               className="absolute left-3 top-1/2 z-10 -translate-y-1/2 text-white text-3xl"
+//               onClick={() => swiperRef.current?.slidePrev()}
+//             >
+//               <ChevronLeft />
+//             </button>
+//             <button
+//               className="absolute right-3 top-1/2 z-10 -translate-y-1/2 text-white text-3xl"
+//               onClick={() => swiperRef.current?.slideNext()}
+//             >
+//               <ChevronRight />
+//             </button>
+//           </>
+//         )}
+//         <Swiper
+//           pagination={{ dynamicBullets: true }}
+//           modules={[Pagination, Autoplay]}
+//           onSwiper={(swiper) => (swiperRef.current = swiper)}
+//           autoplay={{ delay: 3000 }}
+//           className="mySwiper w-full"
+//         >
+//           <div className="relative h-[310px] lg:h-[420px]">
+//             <button
+//               onClick={onClose}
+//               className="absolute top-3 right-3 text-gray-700 dark:text-gray-300 hover:text-black dark:hover:text-white border border-white bg-white rounded-full h-8 w-8 z-10"
+//             >
+//               ✕
+//             </button>
+
+//             {heroData && heroData.length > 0 ? (
+//               heroData.map((list: any, index: number) => (
+//                 <SwiperSlide key={list?.id}>
+//                   <div className="relative h-[310px] lg:h-[420px]">
+//                     <Image
+//                       priority={true}
+//                       src={list?.smallThumbnailLink}
+//                       alt="gambar-utama"
+//                       width={1920}
+//                       height={1080}
+//                       placeholder={`data:image/svg+xml;base64,${toBase64(
+//                         shimmer(700, 475)
+//                       )}`}
+//                       className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover"
+//                     />
+
+//                     <div className="absolute bottom-0 left-0 right-0 bg-black/30 backdrop-brightness-50 text-white pb-4 px-4 pt-8 rounded-bl-2xl rounded-tr-2xl mx-3 mb-2">
+//                       <div className="absolute top-0 left-0 bottom-0 w-2 bg-[#bb3523] rounded-bl-lg"></div>
+//                       <span className="absolute top-0 left-0 mt-2 mb-3 mx-3 bg-[#bb3523] text-white text-xs font-semibold uppercase px-2 py-1 rounded">
+//                         {list?.categoryName || "Liputan Kegiatan"}
+//                       </span>
+
+//                       <Link href={`${locale}/image/detail/${list?.slug}`}>
+//                         <h2 className="text-lg leading-tight">{list?.title}</h2>
+//                       </Link>
+
+//                       <p className="text-xs flex items-center gap-1 mt-2 opacity-80">
+//                         {formatDateToIndonesian(new Date(list?.createdAt))}{" "}
+//                         {list?.timezone || "WIB"} |{" "}
+//                         <svg
+//                           xmlns="http://www.w3.org/2000/svg"
+//                           width="1em"
+//                           height="1em"
+//                           viewBox="0 0 24 24"
+//                           className="inline-block"
+//                         >
+//                           <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>
+//                         {list?.clickCount}
+//                       </p>
+//                     </div>
+//                   </div>
+//                 </SwiperSlide>
+//               ))
+//             ) : (
+//               <div className="flex items-center justify-center h-full">
+//                 <Image
+//                   priority={true}
+//                   width={1920}
+//                   height={1080}
+//                   src="/assets/empty-data.png"
+//                   alt="empty"
+//                   className="h-52 w-52 my-4"
+//                 />
+//               </div>
+//             )}
+//           </div>
+
+//           <style jsx global>{`
+//             .swiper-pagination-bullet {
+//               background: white !important;
+//               opacity: 0.7;
+//             }
+//             .swiper-pagination-bullet-active {
+//               background: white !important;
+//               opacity: 1;
+//             }
+//           `}</style>
+//         </Swiper>
+//       </div>
+//     </div>
+//   );
+// };
+
 const HeroModal = ({
   onClose,
   group,
   poldaName,
   satkerName,
 }: HeroModalProps) => {
-  const [heroData, setHeroData] = useState<any>();
+  const [heroData, setHeroData] = useState<any[]>([]);
   const params = useParams();
   const locale = params?.locale;
   const swiperRef = useRef<SwiperClass | null>(null);
+  const pathname = usePathname();
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  let prefixPath = "";
+  if (group === "polda" && poldaName) {
+    prefixPath = `/polda/${poldaName}`;
+  } else if (group === "satker" && satkerName) {
+    prefixPath = `/satker/${satkerName}`;
+  }
 
   useEffect(() => {
     initFetch();
-  }, []);
-
-  useEffect(() => {
     document.body.classList.add("overflow-hidden");
 
     return () => {
@@ -53,29 +219,35 @@ const HeroModal = ({
   }, []);
 
   const initFetch = async () => {
-    if (group === "polda" && poldaName && String(poldaName).length > 1) {
-      const response = await listStaticBanner(poldaName, locale == "en");
+    const response = await listPopUp(
+      group === "mabes"
+        ? ""
+        : group === "polda" && poldaName
+        ? poldaName
+        : group === "satker" && satkerName
+        ? "satker-" + satkerName
+        : "",
+      locale == "en"
+    );
+    const interstitial = response?.data?.data || [];
+    setHeroData(interstitial);
+  };
 
-      const banners =
-        response?.data?.data?.map((item: any) => {
-          const media = item?.mediaUpload;
-          if (media?.fileType) {
-            media.fileTypeId = media.fileType.id;
-          }
-          return media;
-        }) || [];
-
-      console.log("banner Modal", banners);
-      setHeroData(banners);
-    } else {
-      console.log("Test");
-      setHeroData([]);
+  const handleClickOutside = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
+      onClose();
     }
   };
 
   return (
-    <div className="fixed inset-0 flex items-center justify-center backdrop-brightness-50 z-50 ">
-      <div className="relative dark:bg-gray-900 rounded-lg  w-[90%] md:w-[600px] p-4 shadow-none">
+    <div
+      onClick={handleClickOutside}
+      className="fixed inset-0 flex items-center justify-center backdrop-brightness-50 z-50"
+    >
+      <div
+        ref={modalRef}
+        className="relative dark:bg-gray-900 rounded-lg w-[90%] md:w-[600px] p-4 shadow-none"
+      >
         {heroData?.length > 0 && (
           <>
             <button
@@ -99,75 +271,65 @@ const HeroModal = ({
           autoplay={{ delay: 3000 }}
           className="mySwiper w-full"
         >
-          <div className="relative h-[310px] lg:h-[420px]">
-            <button
-              onClick={onClose}
-              className="absolute top-3 right-3 text-gray-700 dark:text-gray-300 hover:text-black dark:hover:text-white border border-white bg-white rounded-full h-8 w-8 z-10"
-            >
-              ✕
-            </button>
-
-            {heroData && heroData.length > 0 ? (
-              heroData.map((list: any, index: number) => (
-                <SwiperSlide key={list?.id}>
-                  <div className="relative h-[310px] lg:h-[420px]">
-                    <Image
-                      priority={true}
-                      src={list?.smallThumbnailLink}
-                      alt="gambar-utama"
-                      width={1920}
-                      height={1080}
-                      placeholder={`data:image/svg+xml;base64,${toBase64(
-                        shimmer(700, 475)
-                      )}`}
-                      className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover"
-                    />
-
-                    <div className="absolute bottom-0 left-0 right-0 bg-black/30 backdrop-brightness-50 text-white pb-4 px-4 pt-8 rounded-bl-2xl rounded-tr-2xl mx-3 mb-2">
-                      <div className="absolute top-0 left-0 bottom-0 w-2 bg-[#bb3523] rounded-bl-lg"></div>
-                      <span className="absolute top-0 left-0 mt-2 mb-3 mx-3 bg-[#bb3523] text-white text-xs font-semibold uppercase px-2 py-1 rounded">
-                        {list?.categoryName || "Liputan Kegiatan"}
-                      </span>
-
-                      <Link href={`${locale}/image/detail/${list?.slug}`}>
-                        <h2 className="text-lg leading-tight">{list?.title}</h2>
-                      </Link>
-
-                      <p className="text-xs flex items-center gap-1 mt-2 opacity-80">
-                        {formatDateToIndonesian(new Date(list?.createdAt))}{" "}
-                        {list?.timezone || "WIB"} |{" "}
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          width="1em"
-                          height="1em"
-                          viewBox="0 0 24 24"
-                          className="inline-block"
-                        >
-                          <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>
-                        {list?.clickCount}
-                      </p>
-                    </div>
-                  </div>
-                </SwiperSlide>
-              ))
-            ) : (
-              <div className="flex items-center justify-center h-full">
+          {heroData.map((list: any) => (
+            <SwiperSlide key={list?.id}>
+              <div className="relative h-[310px] lg:h-[420px]">
+                <button
+                  onClick={onClose}
+                  className="absolute top-3 right-3 text-gray-700 dark:text-gray-300 hover:text-black dark:hover:text-white border border-white bg-white rounded-full h-8 w-8"
+                >
+                  ✕
+                </button>
                 <Image
                   priority={true}
+                  src={list?.smallThumbnailLink}
+                  alt="gambar-utama"
                   width={1920}
                   height={1080}
-                  src="/assets/empty-data.png"
-                  alt="empty"
-                  className="h-52 w-52 my-4"
+                  placeholder={`data:image/svg+xml;base64,${toBase64(
+                    shimmer(700, 475)
+                  )}`}
+                  className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover"
                 />
+                <div className="absolute bottom-0 left-0 right-0 bg-black/30 backdrop-brightness-50 text-white pb-4 px-4 pt-8 rounded-bl-2xl rounded-tr-2xl mx-3 mb-2">
+                  <div className="absolute top-0 left-0 bottom-0 w-2 bg-[#bb3523] rounded-bl-lg"></div>
+                  <span className="absolute top-0 left-0 mt-2 mb-3 mx-3 bg-[#bb3523] text-white text-xs font-semibold uppercase px-2 py-1 rounded">
+                    {list?.categoryName || "Liputan Kegiatan"}
+                  </span>
+                  <Link
+                    href={
+                      Number(list?.fileTypeId) === 1
+                        ? `${prefixPath}/image/detail/${list?.slug}`
+                        : Number(list?.fileTypeId) === 2
+                        ? `${prefixPath}/video/detail/${list?.slug}`
+                        : Number(list?.fileTypeId) === 3
+                        ? `${prefixPath}/document/detail/${list?.slug}`
+                        : `${prefixPath}/audio/detail/${list?.slug}`
+                    }
+                  >
+                    <h2 className="text-lg leading-tight">{list?.title}</h2>
+                  </Link>
+                  <p className="text-xs flex items-center gap-1 mt-2 opacity-80">
+                    {formatDateToIndonesian(new Date(list?.createdAt))}{" "}
+                    {list?.timezone || "WIB"} |{" "}
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="1em"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      className="inline-block"
+                    >
+                      <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>
+                    {list?.clickCount}
+                  </p>
+                </div>
               </div>
-            )}
-          </div>
-
+            </SwiperSlide>
+          ))}
           <style jsx global>{`
             .swiper-pagination-bullet {
               background: white !important;
diff --git a/components/landing-page/hero-new-satker.tsx b/components/landing-page/hero-new-satker.tsx
index 751c1106..f84d8c45 100644
--- a/components/landing-page/hero-new-satker.tsx
+++ b/components/landing-page/hero-new-satker.tsx
@@ -2,21 +2,41 @@ import { formatDateToIndonesian, shimmer, toBase64 } from "@/utils/globals";
 import React, { useEffect, useRef, useState } from "react";
 import "swiper/css/bundle";
 import "swiper/css/navigation";
-import { getHeroData, listStaticBanner } from "@/service/landing/landing";
+import { getHeroData, listPopUp, listStaticBanner } from "@/service/landing/landing";
 import Link from "next/link";
 import { useParams, usePathname, useRouter } from "next/navigation";
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
 import { Skeleton } from "../ui/skeleton";
 import Image from "next/image";
 import Cookies from "js-cookie";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../ui/card";
 import { Label } from "../ui/label";
 import { Input } from "../ui/input";
 import { Button } from "../ui/button";
 import { Textarea } from "../ui/textarea";
 import { Checkbox } from "../ui/checkbox";
-import { Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../ui/dialog";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
 import { Autoplay, Navigation, Pagination } from "swiper/modules";
 import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
 import "swiper/css";
@@ -31,35 +51,155 @@ type HeroModalProps = {
   satkerName?: string;
 };
 
-const HeroModal = ({ onClose, group, poldaName, satkerName }: HeroModalProps) => {
-  const [heroData, setHeroData] = useState<any>();
+// const HeroModal = ({ onClose, group, poldaName, satkerName }: HeroModalProps) => {
+//   const [heroData, setHeroData] = useState<any>();
+//   const params = useParams();
+//   const locale = params?.locale;
+//   const swiperRef = useRef<SwiperClass | null>(null);
+
+//   useEffect(() => {
+//     async function fetchCategories() {
+//       const url = "https://netidhub.com/api/csrf";
+
+//       try {
+//         const response = await fetch(url);
+
+//         if (!response.ok) {
+//           throw new Error(`HTTP error! status: ${response.status}`);
+//         }
+
+//         const data = await response.json();
+//         return data;
+//       } catch (error) {
+//         console.error("Fetch error: ", error);
+//       }
+//     }
+
+//     fetchCategories();
+//     initFetch();
+//   }, []);
+
+//   useEffect(() => {
+//     document.body.classList.add("overflow-hidden");
+
+//     return () => {
+//       document.body.classList.remove("overflow-hidden");
+//     };
+//   }, []);
+
+//   const initFetch = async () => {
+//     if (group === "satker" && satkerName && String(satkerName).length > 1) {
+//       const response = await listStaticBanner(satkerName, locale == "en");
+
+//       const banners =
+//         response?.data?.data?.map((item: any) => {
+//           const media = item?.mediaUpload;
+//           if (media?.fileType) {
+//             media.fileTypeId = media.fileType.id;
+//           }
+//           return media;
+//         }) || [];
+
+//       console.log("banner Modal", banners);
+//       setHeroData(banners);
+//     } else {
+//       console.log("Test");
+//       setHeroData([]);
+//     }
+//   };
+
+//   return (
+//     <div className="fixed inset-0 flex items-center justify-center backdrop-brightness-50 z-50 ">
+//       <div className="relative dark:bg-gray-900 rounded-lg  w-[90%] md:w-[600px] p-4 shadow-none">
+//         {heroData?.length > 0 && (
+//           <>
+//             <button className="absolute left-3 top-1/2 z-10 -translate-y-1/2 text-white text-3xl" onClick={() => swiperRef.current?.slidePrev()}>
+//               <ChevronLeft />
+//             </button>
+//             <button className="absolute right-3 top-1/2 z-10 -translate-y-1/2 text-white text-3xl" onClick={() => swiperRef.current?.slideNext()}>
+//               <ChevronRight />
+//             </button>
+//           </>
+//         )}
+//         <Swiper pagination={{ dynamicBullets: true }} modules={[Pagination, Autoplay]} onSwiper={(swiper) => (swiperRef.current = swiper)} autoplay={{ delay: 3000 }} className="mySwiper w-full">
+//           <div className="relative h-[310px] lg:h-[420px]">
+//             <button onClick={onClose} className="absolute top-3 right-3 text-gray-700 dark:text-gray-300 hover:text-black dark:hover:text-white border border-white bg-white rounded-full h-8 w-8 z-10">
+//               ✕
+//             </button>
+
+//             {heroData && heroData.length > 0 ? (
+//               heroData.map((list: any, index: number) => (
+//                 <SwiperSlide key={list?.id}>
+//                   <div className="relative h-[310px] lg:h-[420px]">
+//                     <Image priority={true} src={list?.smallThumbnailLink} alt="gambar-utama" width={1920} height={1080} placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover" />
+
+//                     <div className="absolute bottom-0 left-0 right-0 bg-black/30 backdrop-brightness-50 text-white pb-4 px-4 pt-8 rounded-bl-2xl rounded-tr-2xl mx-3 mb-2">
+//                       <div className="absolute top-0 left-0 bottom-0 w-2 bg-[#bb3523] rounded-bl-lg"></div>
+//                       <span className="absolute top-0 left-0 mt-2 mb-3 mx-3 bg-[#bb3523] text-white text-xs font-semibold uppercase px-2 py-1 rounded">{list?.categoryName || "Liputan Kegiatan"}</span>
+
+//                       <Link href={`${locale}/image/detail/${list?.slug}`}>
+//                         <h2 className="text-lg leading-tight">{list?.title}</h2>
+//                       </Link>
+
+//                       <p className="text-xs flex items-center gap-1 mt-2 opacity-80">
+//                         {formatDateToIndonesian(new Date(list?.createdAt))} {list?.timezone || "WIB"} |{" "}
+//                         <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" className="inline-block">
+//                           <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>
+//                         {list?.clickCount}
+//                       </p>
+//                     </div>
+//                   </div>
+//                 </SwiperSlide>
+//               ))
+//             ) : (
+//               <div className="flex items-center justify-center h-full">
+//                 <Image priority={true} width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+//               </div>
+//             )}
+//           </div>
+
+//           <style jsx global>{`
+//             .swiper-pagination-bullet {
+//               background: white !important;
+//               opacity: 0.7;
+//             }
+//             .swiper-pagination-bullet-active {
+//               background: white !important;
+//               opacity: 1;
+//             }
+//           `}</style>
+//         </Swiper>
+//       </div>
+//     </div>
+//   );
+// };
+
+const HeroModal = ({
+  onClose,
+  group,
+  poldaName,
+  satkerName,
+}: HeroModalProps) => {
+  const [heroData, setHeroData] = useState<any[]>([]);
   const params = useParams();
   const locale = params?.locale;
   const swiperRef = useRef<SwiperClass | null>(null);
+  const pathname = usePathname();
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  let prefixPath = "";
+  if (group === "polda" && poldaName) {
+    prefixPath = `/polda/${poldaName}`;
+  } else if (group === "satker" && satkerName) {
+    prefixPath = `/satker/${satkerName}`;
+  }
 
   useEffect(() => {
-    async function fetchCategories() {
-      const url = "https://mediahub.polri.go.id/api/v2/csrf";
-
-      try {
-        const response = await fetch(url);
-
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-
-        const data = await response.json();
-        return data;
-      } catch (error) {
-        console.error("Fetch error: ", error);
-      }
-    }
-
-    fetchCategories();
     initFetch();
-  }, []);
-
-  useEffect(() => {
     document.body.classList.add("overflow-hidden");
 
     return () => {
@@ -68,80 +208,117 @@ const HeroModal = ({ onClose, group, poldaName, satkerName }: HeroModalProps) =>
   }, []);
 
   const initFetch = async () => {
-    if (group === "satker" && satkerName && String(satkerName).length > 1) {
-      const response = await listStaticBanner(satkerName, locale == "en");
+    const response = await listPopUp(
+      group === "mabes"
+        ? ""
+        : group === "polda" && poldaName
+        ? poldaName
+        : group === "satker" && satkerName
+        ? "satker-" + satkerName
+        : "",
+      locale == "en"
+    );
+    const interstitial = response?.data?.data || [];
+    setHeroData(interstitial);
+  };
 
-      const banners =
-        response?.data?.data?.map((item: any) => {
-          const media = item?.mediaUpload;
-          if (media?.fileType) {
-            media.fileTypeId = media.fileType.id;
-          }
-          return media;
-        }) || [];
-
-      console.log("banner Modal", banners);
-      setHeroData(banners);
-    } else {
-      console.log("Test");
-      setHeroData([]);
+  const handleClickOutside = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
+      onClose();
     }
   };
 
   return (
-    <div className="fixed inset-0 flex items-center justify-center backdrop-brightness-50 z-50 ">
-      <div className="relative dark:bg-gray-900 rounded-lg  w-[90%] md:w-[600px] p-4 shadow-none">
+    <div
+      onClick={handleClickOutside}
+      className="fixed inset-0 flex items-center justify-center backdrop-brightness-50 z-50"
+    >
+      <div
+        ref={modalRef}
+        className="relative dark:bg-gray-900 rounded-lg w-[90%] md:w-[600px] p-4 shadow-none"
+      >
         {heroData?.length > 0 && (
           <>
-            <button className="absolute left-3 top-1/2 z-10 -translate-y-1/2 text-white text-3xl" onClick={() => swiperRef.current?.slidePrev()}>
+            <button
+              className="absolute left-3 top-1/2 z-10 -translate-y-1/2 text-white text-3xl"
+              onClick={() => swiperRef.current?.slidePrev()}
+            >
               <ChevronLeft />
             </button>
-            <button className="absolute right-3 top-1/2 z-10 -translate-y-1/2 text-white text-3xl" onClick={() => swiperRef.current?.slideNext()}>
+            <button
+              className="absolute right-3 top-1/2 z-10 -translate-y-1/2 text-white text-3xl"
+              onClick={() => swiperRef.current?.slideNext()}
+            >
               <ChevronRight />
             </button>
           </>
         )}
-        <Swiper pagination={{ dynamicBullets: true }} modules={[Pagination, Autoplay]} onSwiper={(swiper) => (swiperRef.current = swiper)} autoplay={{ delay: 3000 }} className="mySwiper w-full">
-          <div className="relative h-[310px] lg:h-[420px]">
-            <button onClick={onClose} className="absolute top-3 right-3 text-gray-700 dark:text-gray-300 hover:text-black dark:hover:text-white border border-white bg-white rounded-full h-8 w-8 z-10">
-              ✕
-            </button>
-
-            {heroData && heroData.length > 0 ? (
-              heroData.map((list: any, index: number) => (
-                <SwiperSlide key={list?.id}>
-                  <div className="relative h-[310px] lg:h-[420px]">
-                    <Image priority={true} src={list?.smallThumbnailLink} alt="gambar-utama" width={1920} height={1080} placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover" />
-
-                    <div className="absolute bottom-0 left-0 right-0 bg-black/30 backdrop-brightness-50 text-white pb-4 px-4 pt-8 rounded-bl-2xl rounded-tr-2xl mx-3 mb-2">
-                      <div className="absolute top-0 left-0 bottom-0 w-2 bg-[#bb3523] rounded-bl-lg"></div>
-                      <span className="absolute top-0 left-0 mt-2 mb-3 mx-3 bg-[#bb3523] text-white text-xs font-semibold uppercase px-2 py-1 rounded">{list?.categoryName || "Liputan Kegiatan"}</span>
-
-                      <Link href={`${locale}/image/detail/${list?.slug}`}>
-                        <h2 className="text-lg leading-tight">{list?.title}</h2>
-                      </Link>
-
-                      <p className="text-xs flex items-center gap-1 mt-2 opacity-80">
-                        {formatDateToIndonesian(new Date(list?.createdAt))} {list?.timezone || "WIB"} |{" "}
-                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" className="inline-block">
-                          <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>
-                        {list?.clickCount}
-                      </p>
-                    </div>
-                  </div>
-                </SwiperSlide>
-              ))
-            ) : (
-              <div className="flex items-center justify-center h-full">
-                <Image priority={true} width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+        <Swiper
+          pagination={{ dynamicBullets: true }}
+          modules={[Pagination, Autoplay]}
+          onSwiper={(swiper) => (swiperRef.current = swiper)}
+          autoplay={{ delay: 3000 }}
+          className="mySwiper w-full"
+        >
+          {heroData.map((list: any) => (
+            <SwiperSlide key={list?.id}>
+              <div className="relative h-[310px] lg:h-[420px]">
+                <button
+                  onClick={onClose}
+                  className="absolute top-3 right-3 text-gray-700 dark:text-gray-300 hover:text-black dark:hover:text-white border border-white bg-white rounded-full h-8 w-8"
+                >
+                  ✕
+                </button>
+                <Image
+                  priority={true}
+                  src={list?.smallThumbnailLink}
+                  alt="gambar-utama"
+                  width={1920}
+                  height={1080}
+                  placeholder={`data:image/svg+xml;base64,${toBase64(
+                    shimmer(700, 475)
+                  )}`}
+                  className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover"
+                />
+                <div className="absolute bottom-0 left-0 right-0 bg-black/30 backdrop-brightness-50 text-white pb-4 px-4 pt-8 rounded-bl-2xl rounded-tr-2xl mx-3 mb-2">
+                  <div className="absolute top-0 left-0 bottom-0 w-2 bg-[#bb3523] rounded-bl-lg"></div>
+                  <span className="absolute top-0 left-0 mt-2 mb-3 mx-3 bg-[#bb3523] text-white text-xs font-semibold uppercase px-2 py-1 rounded">
+                    {list?.categoryName || "Liputan Kegiatan"}
+                  </span>
+                  <Link
+                    href={
+                      Number(list?.fileTypeId) === 1
+                        ? `${prefixPath}/image/detail/${list?.slug}`
+                        : Number(list?.fileTypeId) === 2
+                        ? `${prefixPath}/video/detail/${list?.slug}`
+                        : Number(list?.fileTypeId) === 3
+                        ? `${prefixPath}/document/detail/${list?.slug}`
+                        : `${prefixPath}/audio/detail/${list?.slug}`
+                    }
+                  >
+                    <h2 className="text-lg leading-tight">{list?.title}</h2>
+                  </Link>
+                  <p className="text-xs flex items-center gap-1 mt-2 opacity-80">
+                    {formatDateToIndonesian(new Date(list?.createdAt))}{" "}
+                    {list?.timezone || "WIB"} |{" "}
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="1em"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      className="inline-block"
+                    >
+                      <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>
+                    {list?.clickCount}
+                  </p>
+                </div>
               </div>
-            )}
-          </div>
-
+            </SwiperSlide>
+          ))}
           <style jsx global>{`
             .swiper-pagination-bullet {
               background: white !important;
@@ -232,7 +409,12 @@ const HeroNewSatker = (props: { group?: string }) => {
     let data = response?.data?.data?.content;
     setHeroData(data);
 
-    if (data && props.group === "satker" && satkerName && String(satkerName)?.length > 1) {
+    if (
+      data &&
+      props.group === "satker" &&
+      satkerName &&
+      String(satkerName)?.length > 1
+    ) {
       const resStatic = await listStaticBanner(satkerName, locale == "en");
 
       for (let i = 0; i < resStatic?.data?.data?.length; i++) {
@@ -260,11 +442,18 @@ const HeroNewSatker = (props: { group?: string }) => {
   <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 toBase64 = (str: string) =>
+    typeof window === "undefined"
+      ? Buffer.from(str).toString("base64")
+      : window.btoa(str);
 
   return (
     <div className="flex items-start justify-center mx-auto w-auto">
-      <div className="relative">{showModal && <HeroModal onClose={() => setShowModal(false)} group="satker" />}</div>
+      <div className="relative">
+        {showModal && (
+          <HeroModal onClose={() => setShowModal(false)} group="satker" />
+        )}
+      </div>
       {isLoading ? (
         <div className="flex flex-col space-y-3 mx-auto w-full lg:w-2/3">
           <Skeleton className="h-[310px] lg:h-[420px]" />
@@ -280,7 +469,17 @@ const HeroNewSatker = (props: { group?: string }) => {
               {content?.map((list: any) => (
                 <CarouselItem key={list?.id}>
                   <div className="relative h-[310px] lg:h-[700px] mt-1">
-                    <Image priority={true} src={list?.smallThumbnailLink} alt="gambar-utama" width={1920} height={1080} placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} className="w-full h-[320px] lg:h-[700px] object-cover" />
+                    <Image
+                      priority={true}
+                      src={list?.smallThumbnailLink}
+                      alt="gambar-utama"
+                      width={1920}
+                      height={1080}
+                      placeholder={`data:image/svg+xml;base64,${toBase64(
+                        shimmer(700, 475)
+                      )}`}
+                      className="w-full h-[320px] lg:h-[700px] object-cover"
+                    />
                     <div className="absolute inset-0 bg-black bg-opacity-40" />
 
                     <Link
@@ -295,10 +494,15 @@ const HeroNewSatker = (props: { group?: string }) => {
                       }
                     >
                       <div className="absolute bottom-20 left-32 w-[60%] lg:w-[45%] text-white px-4 pt-10 pb-4">
-                        <span className="absolute top-0 left-3 text-red-600 text-lg font-bold uppercase px-1 py-2 rounded">{list?.categoryName || "Liputan Kegiatan"}</span>
-                        <h2 className="text-xl font-bold leading-tight">{list?.title}</h2>
+                        <span className="absolute top-0 left-3 text-red-600 text-lg font-bold uppercase px-1 py-2 rounded">
+                          {list?.categoryName || "Liputan Kegiatan"}
+                        </span>
+                        <h2 className="text-xl font-bold leading-tight">
+                          {list?.title}
+                        </h2>
                         <p className="text-base flex items-center gap-1 mt-2 opacity-80">
-                          {formatDateToIndonesian(new Date(list?.createdAt))} {list?.timezone || "WIB"} | 👁 {list?.clickCount}
+                          {formatDateToIndonesian(new Date(list?.createdAt))}{" "}
+                          {list?.timezone || "WIB"} | 👁 {list?.clickCount}
                         </p>
                       </div>
                     </Link>
@@ -312,7 +516,17 @@ const HeroNewSatker = (props: { group?: string }) => {
             {heroData?.slice(0, 3).map((item: any) => (
               <li key={item?.id} className="flex gap-4 flex-row lg:w-full mx-2">
                 <div className="flex-shrink-0 w-32 rounded-lg">
-                  <Image priority={true} placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={720} height={480} src={item?.smallThumbnailLink} alt={item?.title} className="w-full h-[100px] object-cover rounded-lg" />
+                  <Image
+                    priority={true}
+                    placeholder={`data:image/svg+xml;base64,${toBase64(
+                      shimmer(700, 475)
+                    )}`}
+                    width={720}
+                    height={480}
+                    src={item?.smallThumbnailLink}
+                    alt={item?.title}
+                    className="w-full h-[100px] object-cover rounded-lg"
+                  />
                 </div>
                 <div className="w-[280px] lg:w-[200px]">
                   <Link
@@ -326,11 +540,21 @@ const HeroNewSatker = (props: { group?: string }) => {
                         : `${locale}/audio/detail/${item?.slug}`
                     }
                   >
-                    <span className="py-1 rounded-lg flex text-red-600 font-bold uppercase w-fit">{item?.categoryName}</span>
-                    <h3 className="text-base text-white font-bold h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{item?.title}</h3>
+                    <span className="py-1 rounded-lg flex text-red-600 font-bold uppercase w-fit">
+                      {item?.categoryName}
+                    </span>
+                    <h3 className="text-base text-white font-bold h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
+                      {item?.title}
+                    </h3>
                     <p className="text-[10px] flex flex-row items-center gap-1 text-white mt-1">
-                      {formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone || "WIB"} |{" "}
-                      <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
+                      {formatDateToIndonesian(new Date(item?.createdAt))}{" "}
+                      {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"
diff --git a/components/landing-page/hero-new.tsx b/components/landing-page/hero-new.tsx
index 022c4db0..c08a9ca0 100644
--- a/components/landing-page/hero-new.tsx
+++ b/components/landing-page/hero-new.tsx
@@ -63,32 +63,22 @@ const HeroModal = ({
   poldaName,
   satkerName,
 }: HeroModalProps) => {
-  const [heroData, setHeroData] = useState<any>();
+  const [heroData, setHeroData] = useState<any[]>([]);
   const params = useParams();
   const locale = params?.locale;
   const swiperRef = useRef<SwiperClass | null>(null);
   const pathname = usePathname();
+  const modalRef = useRef<HTMLDivElement>(null);
 
-  // Remove the early return condition that was preventing modal from showing on polda/satker paths
-  // if (pathname?.includes("/polda") || pathname?.includes("/satker")) {
-  //   return null;
-  // }
-
-  // Fix prefixPath logic to handle all content types properly
   let prefixPath = "";
   if (group === "polda" && poldaName) {
     prefixPath = `/polda/${poldaName}`;
   } else if (group === "satker" && satkerName) {
     prefixPath = `/satker/${satkerName}`;
   }
-  // For mabes group, prefixPath remains empty string
 
   useEffect(() => {
-    console.log("Show modal popup list");
     initFetch();
-  }, []);
-
-  useEffect(() => {
     document.body.classList.add("overflow-hidden");
 
     return () => {
@@ -96,26 +86,58 @@ const HeroModal = ({
     };
   }, []);
 
+  // const initFetch = async () => {
+  //   const response = await listPopUp(
+  //     group === "mabes"
+  //       ? ""
+  //       : group === "polda" && poldaName
+  //       ? poldaName
+  //       : group === "satker" && satkerName
+  //       ? "satker-" + satkerName
+  //       : "",
+  //     locale == "en"
+  //   );
+  //   const interstitial = response?.data?.data || [];
+  //   setHeroData(interstitial);
+  // };
+
   const initFetch = async () => {
-    const response = await listPopUp(
+    const response = await listStaticBanner(
       group === "mabes"
         ? ""
-        : group === "polda" && poldaName && String(poldaName)?.length > 1
+        : group === "polda" && poldaName
         ? poldaName
-        : group === "satker" && satkerName && String(satkerName)?.length > 1
+        : group === "satker" && satkerName
         ? "satker-" + satkerName
         : "",
-      locale == "en"
+      locale === "en"
     );
 
-    const interstitial = response?.data?.data || [];
-    console.log("banner Modal", interstitial);
-    setHeroData(interstitial);
+    const banners = response?.data?.data || [];
+
+    const enrichedData = banners.map((item: any) => ({
+      ...item,
+      fileTypeId: item?.fileType?.id ?? null,
+    }));
+
+    setHeroData(enrichedData);
+  };
+
+  const handleClickOutside = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
+      onClose();
+    }
   };
 
   return (
-    <div className="fixed inset-0 flex items-center justify-center backdrop-brightness-50 z-50 ">
-      <div className="relative dark:bg-gray-900 rounded-lg  w-[90%] md:w-[600px] p-4 shadow-none">
+    <div
+      onClick={handleClickOutside}
+      className="fixed inset-0 flex items-center justify-center backdrop-brightness-50 z-50"
+    >
+      <div
+        ref={modalRef}
+        className="relative dark:bg-gray-900 rounded-lg w-[90%] md:w-[600px] p-4 shadow-none"
+      >
         {heroData?.length > 0 && (
           <>
             <button
@@ -139,7 +161,7 @@ const HeroModal = ({
           autoplay={{ delay: 3000 }}
           className="mySwiper w-full"
         >
-          {heroData?.map((list: any, index: number) => (
+          {heroData.map((list: any) => (
             <SwiperSlide key={list?.id}>
               <div className="relative h-[310px] lg:h-[420px]">
                 <button
@@ -149,7 +171,7 @@ const HeroModal = ({
                   ✕
                 </button>
                 <Image
-                  priority={true} 
+                  priority={true}
                   src={list?.smallThumbnailLink}
                   alt="gambar-utama"
                   width={1920}
@@ -159,27 +181,24 @@ const HeroModal = ({
                   )}`}
                   className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover"
                 />
-
                 <div className="absolute bottom-0 left-0 right-0 bg-black/30 backdrop-brightness-50 text-white pb-4 px-4 pt-8 rounded-bl-2xl rounded-tr-2xl mx-3 mb-2">
                   <div className="absolute top-0 left-0 bottom-0 w-2 bg-[#bb3523] rounded-bl-lg"></div>
                   <span className="absolute top-0 left-0 mt-2 mb-3 mx-3 bg-[#bb3523] text-white text-xs font-semibold uppercase px-2 py-1 rounded">
                     {list?.categoryName || "Liputan Kegiatan"}
                   </span>
-
-                  <Link 
+                  <Link
                     href={
-                      Number(list?.fileTypeId) == 1
+                      Number(list?.fileTypeId) === 1
                         ? `${prefixPath}/image/detail/${list?.slug}`
-                        : Number(list?.fileTypeId) == 2
+                        : Number(list?.fileTypeId) === 2
                         ? `${prefixPath}/video/detail/${list?.slug}`
-                        : Number(list?.fileTypeId) == 3
+                        : Number(list?.fileTypeId) === 3
                         ? `${prefixPath}/document/detail/${list?.slug}`
                         : `${prefixPath}/audio/detail/${list?.slug}`
                     }
                   >
                     <h2 className="text-lg leading-tight">{list?.title}</h2>
                   </Link>
-
                   <p className="text-xs flex items-center gap-1 mt-2 opacity-80">
                     {formatDateToIndonesian(new Date(list?.createdAt))}{" "}
                     {list?.timezone || "WIB"} |{" "}
@@ -386,7 +405,7 @@ const HeroNew = (props: { group?: string }) => {
         locale == "en"
       );
 
-      for (let i = resStatic?.data?.data?.length; i >= 0 ; i--) {
+      for (let i = resStatic?.data?.data?.length; i >= 0; i--) {
         const media = resStatic?.data?.data[i];
         if (!media) continue;
         media.fileTypeId = media?.fileType?.id ?? null;
@@ -422,9 +441,9 @@ const HeroNew = (props: { group?: string }) => {
     <div className="flex items-start justify-center mx-auto w-auto">
       <div className="relative">
         {showModal && (
-          <HeroModal 
-            onClose={() => setShowModal(false)} 
-            group={props.group || "mabes"} 
+          <HeroModal
+            onClose={() => setShowModal(false)}
+            group={props.group || "mabes"}
             poldaName={poldaName as string}
             satkerName={satkerName as string}
           />
@@ -440,12 +459,11 @@ const HeroNew = (props: { group?: string }) => {
         </div>
       ) : (
         <div className="relative w-full h-full">
-          <Carousel className="relative w-full">
+          {/* <Carousel className="relative w-full">
             <CarouselContent>
               {content?.map((list: any) => (
                 <CarouselItem key={list?.id}>
                   <div className="relative h-[310px] lg:h-[700px]">
-                    {/* Gambar */}
                     <Image
                       priority={true}
                       src={list?.smallThumbnailLink}
@@ -454,10 +472,8 @@ const HeroNew = (props: { group?: string }) => {
                       className="object-cover w-full h-full"
                     />
 
-                    {/* Overlay hitam transparan */}
                     <div className="absolute inset-0 bg-black/40 z-10" />
 
-                    {/* Konten judul, dll */}
                     <Link
                       href={
                         Number(list?.fileTypeId) == 1
@@ -480,7 +496,6 @@ const HeroNew = (props: { group?: string }) => {
                       </p>
                     </Link>
 
-                    {/* Tombol navigasi di atas gambar */}
                     <CarouselPrevious className="absolute left-6 top-[45%] z-30 -translate-y-1/2  hover:bg-black/70 text-white p-2 rounded-full">
                       <ChevronLeft className="w-5 h-5" />
                     </CarouselPrevious>
@@ -491,9 +506,71 @@ const HeroNew = (props: { group?: string }) => {
                 </CarouselItem>
               ))}
             </CarouselContent>
-          </Carousel>
+          </Carousel> */}
 
-          <div className="hidden lg:flex flex-col gap-3 absolute bottom-4 right-4 w-[520px] bg-black/40 p-4 rounded-lg z-10">
+          <div className="relative w-full">
+            <Swiper
+              modules={[Autoplay, Navigation]}
+              autoplay={{ delay: 3000, disableOnInteraction: false }}
+              navigation={{
+                nextEl: ".swiper-button-next",
+                prevEl: ".swiper-button-prev",
+              }}
+              loop
+              className="w-full"
+            >
+              {content?.map((list: any) => (
+                <SwiperSlide key={list?.id}>
+                  <div className="relative h-[310px] lg:h-[700px]">
+                    {/* Gambar */}
+                    <Image
+                      priority
+                      src={list?.smallThumbnailLink}
+                      alt="gambar"
+                      fill
+                      className="object-cover w-full h-full"
+                    />
+
+                    {/* Overlay hitam transparan */}
+                    <div className="absolute inset-0 bg-black/40 z-10" />
+
+                    {/* Konten judul */}
+                    <Link
+                      href={
+                        Number(list?.fileTypeId) === 1
+                          ? `${prefixPath}/image/detail/${list?.slug}`
+                          : Number(list?.fileTypeId) === 2
+                          ? `${prefixPath}/video/detail/${list?.slug}`
+                          : Number(list?.fileTypeId) === 3
+                          ? `${prefixPath}/document/detail/${list?.slug}`
+                          : `${prefixPath}/audio/detail/${list?.slug}`
+                      }
+                      className="absolute bottom-20 left-8 lg:left-32 z-20 text-white w-[85%] lg:w-[45%] cursor-pointer"
+                    >
+                      <span className="text-red-600 text-lg font-bold uppercase">
+                        {list?.categoryName}
+                      </span>
+                      <h2 className="text-xl font-bold">{list?.title}</h2>
+                      <p className="text-sm mt-2">
+                        {formatDateToIndonesian(new Date(list?.createdAt))}{" "}
+                        {list?.timezone || "WIB"} | 👁 {list?.clickCount}
+                      </p>
+                    </Link>
+
+                    {/* Tombol navigasi */}
+                    <div className="swiper-button-prev absolute left-6 top-[45%] z-30 -translate-y-1/2 hover:bg-black/70 text-white p-2 rounded-full">
+                      <ChevronLeft className="w-5 h-5" />
+                    </div>
+                    <div className="swiper-button-next absolute right-6 top-[45%] z-30 -translate-y-1/2 hover:bg-black/70 text-white p-2 rounded-full">
+                      <ChevronRight className="w-5 h-5" />
+                    </div>
+                  </div>
+                </SwiperSlide>
+              ))}
+            </Swiper>
+          </div>
+
+          <div className="hidden lg:flex flex-col gap-3 absolute bottom-4 right-[38px] w-[520px] bg-black/40 p-4 rounded-lg z-10">
             {newContent?.slice(0, 3).map((item: any) => (
               <li key={item?.id} className="flex gap-4 flex-row lg:w-full mx-2">
                 <div className="flex-shrink-0 w-32 rounded-lg">
diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx
index 3880617b..a98bfe86 100644
--- a/components/landing-page/navbar.tsx
+++ b/components/landing-page/navbar.tsx
@@ -211,7 +211,7 @@ const Navbar = () => {
         <div className="flex flex-row gap-2">
           <Link href={prefixPath} className="flex items-center">
             <Image
-              priority={true} 
+              priority={true}
               src="/assets/mediahub-logo.gif"
               alt="Media Hub Logo"
               width={2560}
@@ -375,7 +375,7 @@ const Navbar = () => {
           <div className="hidden custom-lg-button:flex items-center w-[100px] h-[120px]">
             <a href="https://tvradio.polri.go.id/">
               <Image
-                priority={true} 
+                priority={true}
                 src="/assets/polriTv.png"
                 width={100}
                 height={120}
@@ -386,7 +386,11 @@ const Navbar = () => {
           </div>
 
           {/* Languange */}
-    <div className={`${isHidden ? "hidden" : "custom-lg-button:flex"} relative text-left`}>
+          <div
+            className={`${
+              isHidden ? "hidden" : "custom-lg-button:flex"
+            } relative text-left`}
+          >
             <LocalSwitcher />
           </div>
 
@@ -532,7 +536,8 @@ const Navbar = () => {
                           aria-selected="false"
                           onClick={() => setIsMessageActive(false)}
                         >
-                          {t("update", { defaultValue: "Update" })}({notificationsUpdate?.length})
+                          {t("update", { defaultValue: "Update" })}(
+                          {notificationsUpdate?.length})
                         </a>
                       </TabsTrigger>
                     </TabsList>
@@ -546,7 +551,7 @@ const Navbar = () => {
                           >
                             <div className="ml-4">
                               <Image
-                                priority={true} 
+                                priority={true}
                                 src="/assets/avatar-profile.png"
                                 alt="avatar"
                                 width={5}
@@ -592,7 +597,7 @@ const Navbar = () => {
                           >
                             <div className="ml-4">
                               <Image
-                                priority={true} 
+                                priority={true}
                                 src="/assets/avatar-profile.png"
                                 alt="..."
                                 width={5}
@@ -638,7 +643,7 @@ const Navbar = () => {
                   {detail !== undefined ? (
                     <div className="flex items-center gap-3 text-default-800">
                       <Image
-                        priority={true} 
+                        priority={true}
                         src={"/assets/avatar-profile.png"}
                         alt={"Image"}
                         width={36}
@@ -665,12 +670,16 @@ const Navbar = () => {
                   <DropdownMenuGroup>
                     {[
                       {
-                        name: t("profileSetting", { defaultValue: "Profile Setting" }),
+                        name: t("profileSetting", {
+                          defaultValue: "Profile Setting",
+                        }),
                         icon: "heroicons:user",
                         href: "/profile",
                       },
                       {
-                        name: t("contentManagement", { defaultValue: "Content Management" }),
+                        name: t("contentManagement", {
+                          defaultValue: "Content Management",
+                        }),
                         icon: "stash:save-ribbon-duotone",
                         href: "/content-management/galery",
                       },
@@ -763,7 +772,8 @@ const Navbar = () => {
                           aria-selected="false"
                           onClick={() => setIsMessageActive(false)}
                         >
-                          {t("update", { defaultValue: "Update" })}({notificationsUpdate?.length})
+                          {t("update", { defaultValue: "Update" })}(
+                          {notificationsUpdate?.length})
                         </a>
                       </TabsTrigger>
                     </TabsList>
@@ -777,7 +787,7 @@ const Navbar = () => {
                       <a className="" href={list.redirectUrl} key={list.id}>
                         <div className="">
                           <Image
-                            priority={true} 
+                            priority={true}
                             src="/assets/avatar-profile.png"
                             alt="..."
                             width={5}
@@ -823,7 +833,7 @@ const Navbar = () => {
                       >
                         <div className="ml-4">
                           <Image
-                            priority={true} 
+                            priority={true}
                             src="/assets/avatar-profile.png"
                             alt="..."
                             width={5}
@@ -866,7 +876,7 @@ const Navbar = () => {
                   {detail !== undefined ? (
                     <div className="flex items-center gap-3 text-default-800">
                       <Image
-                        priority={true} 
+                        priority={true}
                         src={"/assets/avatar-profile.png"}
                         alt={"Image"}
                         width={36}
@@ -938,7 +948,7 @@ const Navbar = () => {
             <div className="hidden custom-lg-button:flex flex-row justify-center items-center gap-5">
               <Link
                 href="/auth"
-                className="w-full lg:w-max px-4 py-1  bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 text-center"
+                className="w-full lg:w-max px-4 py-1  bg-[#bb3523] text-white font-semibold rounded-md hover:bg-white hover:text-[#bb3523] hover:border hover:border-[#bb3523] text-center"
               >
                 {t("logIn", { defaultValue: "Log In" })}
               </Link>
@@ -953,7 +963,9 @@ const Navbar = () => {
                     <p className="text-lg font-semibold text-center">
                       {t("categoryReg", { defaultValue: "Category Reg" })}
                     </p>
-                    <p className="text-base text-center">{t("selectOne", { defaultValue: "Select One" })}</p>
+                    <p className="text-base text-center">
+                      {t("selectOne", { defaultValue: "Select One" })}
+                    </p>
                   </div>
                   <div>
                     {role?.map((row: any) => (
@@ -1192,7 +1204,7 @@ const Navbar = () => {
               <div className="flex items-center space-x-1 mx-3 text-yellow-600 font-medium">
                 <a href="https://tvradio.polri.go.id/">
                   <Image
-                    priority={true} 
+                    priority={true}
                     src="/assets/polriTv.png"
                     width={100}
                     height={120}
@@ -1376,7 +1388,8 @@ const Navbar = () => {
                               aria-selected="false"
                               onClick={() => setIsMessageActive(false)}
                             >
-                              {t("update", { defaultValue: "Update" })}({notificationsUpdate?.length})
+                              {t("update", { defaultValue: "Update" })}(
+                              {notificationsUpdate?.length})
                             </a>
                           </TabsTrigger>
                         </TabsList>
@@ -1390,7 +1403,7 @@ const Navbar = () => {
                               >
                                 <div className="ml-4">
                                   <Image
-                                    priority={true} 
+                                    priority={true}
                                     width={5}
                                     height={10}
                                     src="/assets/avatar-profile.png"
@@ -1436,7 +1449,7 @@ const Navbar = () => {
                               >
                                 <div className="ml-4">
                                   <Image
-                                    priority={true} 
+                                    priority={true}
                                     width={5}
                                     height={10}
                                     src="/assets/avatar-profile.png"
@@ -1484,7 +1497,7 @@ const Navbar = () => {
                       {detail !== undefined ? (
                         <div className="flex items-center gap-3 text-default-800">
                           <Image
-                            priority={true} 
+                            priority={true}
                             src={"/assets/avatar-profile.png"}
                             alt={"Image"}
                             width={36}
@@ -1511,12 +1524,16 @@ const Navbar = () => {
                       <DropdownMenuGroup>
                         {[
                           {
-                            name: t("profileSetting", { defaultValue: "Profile Setting" }),
+                            name: t("profileSetting", {
+                              defaultValue: "Profile Setting",
+                            }),
                             icon: "heroicons:user",
                             href: "/profile",
                           },
                           {
-                            name: t("contentManagement", { defaultValue: "Content Management" }),
+                            name: t("contentManagement", {
+                              defaultValue: "Content Management",
+                            }),
                             icon: "stash:save-ribbon-duotone",
                             href: "/content-management/galery",
                           },
@@ -1612,7 +1629,8 @@ const Navbar = () => {
                               aria-selected="false"
                               onClick={() => setIsMessageActive(false)}
                             >
-                              {t("update", { defaultValue: "Update" })}({notificationsUpdate?.length})
+                              {t("update", { defaultValue: "Update" })}(
+                              {notificationsUpdate?.length})
                             </a>
                           </TabsTrigger>
                         </TabsList>
@@ -1626,7 +1644,7 @@ const Navbar = () => {
                           <a className="" href={list.redirectUrl} key={list.id}>
                             <div className="">
                               <Image
-                                priority={true} 
+                                priority={true}
                                 width={5}
                                 height={10}
                                 src="/assets/avatar-profile.png"
@@ -1672,7 +1690,7 @@ const Navbar = () => {
                           >
                             <div className="ml-4">
                               <Image
-                                priority={true} 
+                                priority={true}
                                 width={5}
                                 height={10}
                                 src="/assets/avatar-profile.png"
@@ -1718,7 +1736,7 @@ const Navbar = () => {
                       {detail !== undefined ? (
                         <div className="flex items-center gap-3 text-default-800">
                           <Image
-                            priority={true} 
+                            priority={true}
                             src={"/assets/avatar-profile.png"}
                             alt={"Image"}
                             width={36}
@@ -1793,7 +1811,7 @@ const Navbar = () => {
                 <div className="flex justify-center items-center mx-3 gap-1 lg:gap-1 xl:gap-5">
                   <Link
                     href="/auth"
-                    className="w-[50%] px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 text-center"
+                    className="w-[50%] px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-white hover:text-[#bb3523] hover:border hover:border-[#bb352 text-center"
                   >
                     {t("logIn", { defaultValue: "Log In" })}
                   </Link>