feat:update bahasa, filter limit

app/[locale]/(public)/(polda)/polda/[polda_name]/audio/layout.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import LayoutProvider from "@/providers/layout.provider";
 import LayoutContentProvider from "@/providers/content.provider";
 import DashCodeSidebar from "@/components/partials/sidebar";
@@ -8,11 +10,26 @@ import DashCodeHeader from "@/components/partials/header";
 import { redirect } from "@/components/navigation";
 import Footer from "@/components/landing-page/footer";
 import Navbar from "@/components/landing-page/navbar";
+import NavbarKaltara from "@/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara";
+import { useParams } from "next/navigation";
+import ContactUsKaltara from "@/components/landing-page/landing-polda-kaltara/contact-us-kaltara";
+import NewsTickerKaltara from "../../../tbnews/[polda_name]/components/news-tickers-kaltara";
 
-const layout = async ({ children }: { children: React.ReactNode }) => {
+const layout = ({ children }: { children: React.ReactNode }) => {
-  return (
+  const params = useParams();
+  const poldaName: any = params?.polda_name;
+  return poldaName === "kaltara" ? (
     <>
+      <NavbarKaltara />
       {children}
+      <ContactUsKaltara />
+      <NewsTickerKaltara />
+    </>
+  ) : (
+    <>
+      <Navbar />
+      {children}
+      <Footer />
     </>
   );
 };

app/[locale]/(public)/(polda)/polda/[polda_name]/document/layout.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import LayoutProvider from "@/providers/layout.provider";
 import LayoutContentProvider from "@/providers/content.provider";
 import DashCodeSidebar from "@/components/partials/sidebar";
@@ -8,11 +10,26 @@ import DashCodeHeader from "@/components/partials/header";
 import { redirect } from "@/components/navigation";
 import Footer from "@/components/landing-page/footer";
 import Navbar from "@/components/landing-page/navbar";
+import NavbarKaltara from "@/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara";
+import { useParams } from "next/navigation";
+import ContactUsKaltara from "@/components/landing-page/landing-polda-kaltara/contact-us-kaltara";
+import NewsTickerKaltara from "../../../tbnews/[polda_name]/components/news-tickers-kaltara";
 
-const layout = async ({ children }: { children: React.ReactNode }) => {
+const layout = ({ children }: { children: React.ReactNode }) => {
-  return (
+  const params = useParams();
+  const poldaName: any = params?.polda_name;
+  return poldaName === "kaltara" ? (
     <>
+      <NavbarKaltara />
       {children}
+      <ContactUsKaltara />
+      <NewsTickerKaltara />
+    </>
+  ) : (
+    <>
+      <Navbar />
+      {children}
+      <Footer />
     </>
   );
 };

app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/page.tsx

@@ -7,11 +7,19 @@ import { Icon } from "@iconify/react/dist/iconify.js";
 import NewContent from "@/components/landing-page/new-content";
 import { useToast } from "@/components/ui/use-toast";
 import { getCookiesDecrypt } from "@/lib/utils";
-import { close, error, loading } from "@/config/swal";
+import { close, error, loading, warning } from "@/config/swal";
-import { checkWishlistStatus, deleteWishlist, getDetail, saveWishlist } from "@/service/landing/landing";
+import { checkWishlistStatus, createPublicSuggestion, deletePublicSuggestion, deleteWishlist, getDetail, getPublicSuggestionList, saveWishlist } from "@/service/landing/landing";
 import { Link, useRouter } from "@/i18n/routing";
+import Image from "next/image";
+import { useTranslations } from "next-intl";
+import { checkMaliciousText, formatDateToIndonesian, getPublicLocaleTimestamp } from "@/utils/globals";
+import withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
+import { useSearchParams } from "next/navigation";
+import parse from "html-react-parser";
 
 const DetailInfo = () => {
+  const MySwal = withReactContent(Swal);
   const [selectedSize, setSelectedSize] = useState<string>("L");
   const [selectedTab, setSelectedTab] = useState("video");
   const router = useRouter();
@@ -29,8 +37,22 @@ const DetailInfo = () => {
   const [main, setMain] = useState<any>();
   const [resolutionSelected, setResolutionSelected] = useState("720");
   const [imageSizeSelected, setImageSizeSelected] = useState("l");
-
   const userId = getCookiesDecrypt("uie");
+  const [content, setContent] = useState<any>([]);
+  const [emailShareList, setEmailShareList] = useState<any>();
+  const [emailShareInput, setEmailShareInput] = useState<any>();
+  const [emailMessageInput, setEmailMessageInput] = useState();
+  const searchParams = useSearchParams();
+  const [width, setWidth] = useState<any>();
+  const userRoleId = getCookiesDecrypt("urie");
+  const [message, setMessage] = useState("");
+  const [listSuggestion, setListSuggestion] = useState<any>();
+  const [isLoading, setIsLoading] = useState<any>(true);
+  const [visibleInput, setVisibleInput] = useState(null);
+  let typeString = "image";
+  const t = useTranslations("LandingPage");
+  const poldaName = params?.polda_name;
+  const satkerName = params?.satker_name;
 
   useEffect(() => {
     initFetch();
@@ -112,6 +134,12 @@ const DetailInfo = () => {
     }
   };
 
+  const getInputValue = (e: any) => {
+    const message = e.target.value;
+    console.log(message);
+    setMessage(message);
+  };
+
   const sizes = [
     { label: "XL", value: "3198 x 1798 px" },
     { label: "L", value: "2399 x 1349 px" },
@@ -131,6 +159,10 @@ const DetailInfo = () => {
     // console.log(response);
   }
 
+  function addDefaultProfile(ev: any) {
+    ev.target.src = "/assets/avatar-profile.png";
+  }
+
   const handleDownload = () => {
     if (downloadProgress === 0) {
       if (!userId) {
@@ -219,6 +251,135 @@ const DetailInfo = () => {
     xhr.send();
   };
 
+  const showInput = (e: any) => {
+    console.log(document.querySelector(`#${e}`)?.classList);
+    document.querySelector(`#${e}`)?.classList.toggle("none");
+    setVisibleInput(visibleInput === e ? null : e);
+  };
+
+  async function sendSuggestionParent() {
+    if (message?.length > 3) {
+      loading();
+      const data = {
+        mediaUploadId: slug?.split("-")?.[0],
+        message,
+        parentId: null,
+      };
+
+      const response = await createPublicSuggestion(data);
+
+      console.log(response);
+      setMessage("");
+
+      const responseGet = await getPublicSuggestionList(slug?.split("-")?.[0]);
+      console.log(responseGet?.data?.data);
+      setListSuggestion(responseGet?.data?.data);
+
+      // Hapus nilai semua input secara manual jika perlu
+      const inputs = document.querySelectorAll("input");
+      inputs.forEach((input) => {
+        input.value = "";
+      });
+
+      close();
+    }
+  }
+
+  async function sendSuggestionChild(parentId: any) {
+    const inputElement = document.querySelector(`#input-comment-${parentId}`) as HTMLInputElement;
+
+    if (inputElement && inputElement.value.length > 3) {
+      loading();
+      const data = {
+        mediaUploadId: slug?.split("-")?.[0],
+        message: inputElement.value,
+        parentId,
+      };
+
+      console.log(data);
+      const response = await createPublicSuggestion(data);
+      console.log(response);
+      const responseGet: any = await getPublicSuggestionList(slug?.split("-")?.[0]);
+      console.log(responseGet.data?.data);
+      setListSuggestion(responseGet.data?.data);
+
+      // Reset input field
+      inputElement.value = "";
+
+      // document.querySelector("#comment-id-" + parentId)?.style.display = "none";
+
+      close();
+    }
+  }
+
+  const postData = () => {
+    const checkMessage = checkMaliciousText(message);
+    if (checkMessage == "") {
+      if (Number(userRoleId) < 1 || userRoleId == undefined) {
+        router.push("/auth");
+      } else {
+        sendSuggestionParent();
+      }
+    } else {
+      warning(checkMessage);
+    }
+  };
+
+  const postDataChild = (id: any) => {
+    const checkMessage = checkMaliciousText(message);
+    if (checkMessage == "") {
+      if (Number(userRoleId) < 1 || userRoleId == undefined) {
+        router.push("/auth");
+      } else {
+        sendSuggestionChild(id);
+      }
+    } else {
+      warning(checkMessage);
+    }
+  };
+
+  async function deleteDataSuggestion(dataId: any) {
+    loading();
+    const response = await deletePublicSuggestion(dataId);
+    console.log(response);
+    const responseGet = await getPublicSuggestionList(slug.split("-")?.[0]);
+    console.log(responseGet.data?.data);
+    setListSuggestion(responseGet.data?.data);
+    close();
+  }
+
+  const deleteData = (dataId: any) => {
+    MySwal.fire({
+      title: "Delete Comment",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#3085d6",
+      confirmButtonColor: "#d33",
+      confirmButtonText: "Delete",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        deleteDataSuggestion(dataId);
+        console.log(dataId);
+      }
+    });
+  };
+
+  const shimmer = (w: number, h: number) => `
+  <svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+      <linearGradient id="g">
+        <stop stop-color="#bcbcbd" offset="20%" />
+        <stop stop-color="#f9fafb" offset="50%" />
+        <stop stop-color="#bcbcbd" offset="70%" />
+      </linearGradient>
+    </defs>
+    <rect width="${w}" height="${h}" fill="#bcbcbd" />
+    <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
+    <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
+  </svg>`;
+
+  const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
+
   return (
     <>
       <div className="min-h-screen px-4 md:px-24 py-4">
@@ -227,7 +388,7 @@ const DetailInfo = () => {
           <div className="md:w-3/4">
             {/* Gambar Besar */}
             <div className="relative">
-              <img src={detailDataImage?.files[selectedImage]?.url} alt="Main" className="rounded-lg w-auto h-fit" />
+              <Image width={1920} height={1080} src={detailDataImage?.files?.length > 0 ? detailDataImage.files[selectedImage]?.url : detailDataImage?.thumbnailLink} alt="Main" className="rounded-lg w-auto h-fit" />
               <div className="absolute top-4 left-4"></div>
             </div>
 
@@ -235,25 +396,43 @@ const DetailInfo = () => {
             <div className="py-4 flex flex-row gap-3">
               {detailDataImage?.files?.map((file: any, index: number) => (
                 <a onClick={() => setSelectedImage(index)} key={file?.id}>
-                  <img src={file?.url} className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600" />
+                  <Image alt="imgae-small" width={1920} height={1080} src={file?.url} className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600" />
                 </a>
               ))}
             </div>
 
             {/* Footer Informasi */}
-            <div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4">
+            <div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4">
-              <div className="flex flex-row items-center mt-3 justify-between">
+              <div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between">
-                oleh&nbsp;<span className="font-semibold text-black">{detailDataImage?.uploadedBy?.userLevel?.name}</span>&nbsp; | &nbsp;Diupdate pada {detailDataImage?.updatedAt} WIB &nbsp;|&nbsp;
+                <p className="text-xs lg:text-sm">
-                <Icon icon="formkit:eye" width="15" height="15" />
+                  {t("by")}&nbsp;<span className="font-semibold text-black dark:text-white">{detailDataImage?.uploadedBy?.userLevel?.name}</span>
-                &nbsp; {detailDataImage?.clickCount} &nbsp;
+                </p>
-                <p className="flex text-end">Kreator: {detailDataImage?.creatorName}</p>
+                {/* <p className="text-xs lg:text-sm">
+                             &nbsp;|&nbsp;{t("updatedOn")}
+                             {detailDataImage?.updatedAt} WIB &nbsp;|&nbsp;
+                           </p> */}
+                <p className="text-xs lg:text-sm">
+                  &nbsp;|&nbsp;{t("updatedOn")}&nbsp;
+                  {formatDateToIndonesian(new Date(detailDataImage?.updatedAt))} {"WIB"}
+                </p>
+                <p className="text-xs lg:text-sm flex justify-center items-center">
+                  &nbsp;|&nbsp;
+                  <Icon icon="formkit:eye" width="15" height="15" />
+                  &nbsp; {detailDataImage?.clickCount} &nbsp;
+                </p>
+              </div>
+              <div className="mt-3">
+                <p className="flex text-end text-xs lg:text-sm font-semibold">
+                  {t("creator")}
+                  {detailDataImage?.creatorName}
+                </p>
               </div>
             </div>
 
             {/* Keterangan */}
             <div className="w-full">
               <h1 className="flex flex-row font-bold text-2xl my-8">{detailDataImage?.title}</h1>
-              <div className="font-light text-justify" dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }} />
+              <div className="font-light text-justify mb-4" dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }} />
             </div>
           </div>
 
@@ -325,20 +504,214 @@ const DetailInfo = () => {
         </div>
       </div>
 
-      <div className="w-full mb-8">
+      <div className="w-full">
         {/* Comment */}
-        <div className="flex flex-col my-16 p-10 bg-[#f7f7f7]">
+        <div className="flex flex-col mt-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
           <div className="gap-5 flex flex-col px-4 lg:px-14">
-            <p className="flex items-start text-lg">Berikan Komentar</p>
+            <p className="flex items-start text-lg">{t("comment")}</p>
-            <Textarea placeholder="Type your comments here." className="flex w-full" />
+            <Textarea placeholder={t("leaveComment")} className="flex w-full pb-12" onChange={getInputValue} />
-            <button className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">Kirim</button>
+            <button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
+              {t("send")}
+            </button>
+            <div className="border-b-2  border-slate-300 mt-4 w-full self-center"></div>
+          </div>
+
+          <div>
+            {listSuggestion?.map((data: any) => (
+              <div className="flex flex-col">
+                <div className="flex flex-row mt-2 px-4 lg:px-14">
+                  <Image
+                    placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                    width={1080}
+                    height={1080}
+                    src={data?.suggestionFrom?.profilePictureUrl}
+                    className="h-12 lg:h-16 w-12 lg:w-16 mr-2"
+                    onError={addDefaultProfile}
+                    alt=""
+                  />
+                  <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
+                    <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
+                      {Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
+                      {getPublicLocaleTimestamp(new Date(data.createdAt))}
+                    </p>
+                    <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{data?.message}</p>
+                    <div>
+                      <a
+                        style={
+                          Number(data.suggestionFrom?.id) == Number(userId)
+                            ? {
+                                display: "none",
+                              }
+                            : {}
+                        }
+                        onClick={() => showInput(`comment-id-${data.id}`)}
+                        className="mr-2"
+                      >
+                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                      </a>
+                      {Number(data.suggestionFrom?.id) == Number(userId) || Number(userRoleId) == 2 ? (
+                        <a onClick={() => deleteData(data.id)}>
+                          <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                        </a>
+                      ) : (
+                        ""
+                      )}
+                    </div>
+                  </div>
+                </div>
+                {visibleInput === `comment-id-${data.id}` && (
+                  <div id={`comment-id-${data.id}`} className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 ">
+                    <Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder={t("enterReply")} />
+                    <div className="flex flex-row gap-3">
+                      <a onClick={() => postDataChild(data.id)}>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">{t("send")}</small>
+                      </a>
+                      <a onClick={() => showInput(`comment-id-${data.id}`)}>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                      </a>
+                    </div>
+                  </div>
+                )}
+
+                {data.children.length > 0
+                  ? data.children?.map((child1: any) => (
+                      <div className="flex flex-col">
+                        <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
+                          <Image
+                            placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                            width={1080}
+                            height={1080}
+                            src={child1.suggestionFrom?.profilePictureUrl}
+                            onError={addDefaultProfile}
+                            alt=""
+                            className="h-10 lg:h-16 w-10 lg:w-16 mr-2"
+                          />
+                          <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
+                            <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
+                              {" "}
+                              <b>{Number(child1.suggestionFrom?.roleId) == 2 || Number(child1.suggestionFrom?.roleId) == 3 || Number(child1.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.suggestionFrom?.fullname}</b>{" "}
+                              {getPublicLocaleTimestamp(new Date(child1.createdAt))}
+                            </p>
+                            <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{parse(String(child1?.message))}</p>
+                            <div>
+                              <a
+                                style={
+                                  Number(child1.suggestionFrom?.id) == Number(userId)
+                                    ? {
+                                        display: "none",
+                                      }
+                                    : {}
+                                }
+                                onClick={() => showInput(`comment-id-${child1.id}`)}
+                              >
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white  px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                              </a>
+                              <a
+                                style={
+                                  Number(child1.suggestionFrom?.id) == Number(userId)
+                                    ? {}
+                                    : {
+                                        display: "none",
+                                      }
+                                }
+                                onClick={() => deleteData(child1.id)}
+                              >
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                              </a>
+                            </div>
+                          </div>
+                        </div>
+
+                        {visibleInput === `comment-id-${child1.id}` && (
+                          <div id={`comment-id-${child1.id}`} className="px-4 lg:px-14 pl-28 lg:pl-[200px]">
+                            <Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder={t("enterReply")} />
+                            <div className="flex flex-row mt-2 gap-3">
+                              <a onClick={() => postDataChild(child1.id)}>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
+                              </a>
+                              <a onClick={() => showInput(`comment-id-${child1.id}`)}>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                              </a>
+                            </div>
+                          </div>
+                        )}
+
+                        {child1.children.length > 0
+                          ? child1.children?.map((child2: any) => (
+                              <div className="">
+                                <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
+                                  <Image
+                                    placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                                    width={1080}
+                                    height={1080}
+                                    src={child2.suggestionFrom?.profilePictureUrl}
+                                    className="h-9 lg:h-16 w-9 lg:w-16 mr-2"
+                                    onError={addDefaultProfile}
+                                    alt=""
+                                  />
+                                  <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
+                                    <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
+                                      {" "}
+                                      <b>{Number(child2.suggestionFrom?.roleId) == 2 || Number(child2.suggestionFrom?.roleId) == 3 || Number(child2.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.suggestionFrom?.fullname}</b>{" "}
+                                      {getPublicLocaleTimestamp(new Date(child2.createdAt))}
+                                    </p>
+                                    <p className="text-slate-500 text-sm mb-4">{parse(String(child2?.message))}</p>
+                                    <div>
+                                      <a
+                                        style={
+                                          Number(child2.suggestionFrom?.id) == Number(userId)
+                                            ? {
+                                                display: "none",
+                                              }
+                                            : {}
+                                        }
+                                        onClick={() => showInput(`comment-id-${child2.id}`)}
+                                      >
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                                      </a>
+                                      <a
+                                        style={
+                                          Number(child2.suggestionFrom?.id) == Number(userId)
+                                            ? {}
+                                            : {
+                                                display: "none",
+                                              }
+                                        }
+                                        onClick={() => deleteData(child2.id)}
+                                      >
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                                      </a>
+                                    </div>
+                                  </div>
+                                </div>
+                                {visibleInput === `comment-id-${child2.id}` && (
+                                  <div id={`comment-id-${child2.id}`} className="px-4 lg:px-14 pl-40 lg:pl-[265px]">
+                                    <Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" />
+                                    <div className="flex flex-row gap-3">
+                                      <a onClick={() => postDataChild(child2.id)}>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
+                                      </a>
+                                      <a onClick={() => showInput(`comment-id-${child2.id}`)}>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                                      </a>
+                                    </div>
+                                  </div>
+                                )}
+                              </div>
+                            ))
+                          : ""}
+                      </div>
+                    ))
+                  : ""}
+              </div>
+            ))}
           </div>
         </div>
 
         {/* Konten Serupa */}
-        <div className="">
+        {/* <div className="">
-          <NewContent group="polda" type={"similar"} />
+               <NewContent group="mabes" type={"similar"} />
-        </div>
+             </div> */}
       </div>
     </>
   );

app/[locale]/(public)/(polda)/polda/[polda_name]/image/filter/page.tsx

@@ -15,6 +15,7 @@ import ReactDatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import { close, loading } from "@/config/swal";
 import { useTranslations } from "next-intl";
+import Image from "next/image";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -348,11 +349,27 @@ const FilterPage = () => {
     clearTimeout(typingTimer);
   };
 
+  const shimmer = (w: number, h: number) => `
+    <svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <defs>
+        <linearGradient id="g">
+          <stop stop-color="#bcbcbd" offset="20%" />
+          <stop stop-color="#f9fafb" offset="50%" />
+          <stop stop-color="#bcbcbd" offset="70%" />
+        </linearGradient>
+      </defs>
+      <rect width="${w}" height="${h}" fill="#bcbcbd" />
+      <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
+      <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
+    </svg>`;
+
+  const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
+
   return (
     <div className="flex flex-col">
       {/* Header */}
 
-      <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black">
+      <div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black px-4 lg:px-20">
         <p>
           {" "}
           {t("image")} {">"} <span className="font-bold">{t("allImage")}</span>
@@ -361,9 +378,9 @@ const FilterPage = () => {
         <p>{`${t("thereIs")} ${totalContent} ${t("downloadableImage")}`}</p>
       </div>
 
-      {/* Left */}
+      <div className="flex flex-col lg:flex-row gap-6 p-4 px-4 lg:px-20">
-      <div className="flex flex-col lg:flex-row gap-6 p-4">
+        {/* Left */}
-        <div className="lg:w-[25%] h-fit w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
+        <div className="lg:w-[20%] h-fit w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
           <h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
             <Icon icon="stash:filter-light" fontSize={30} />
             Filter
@@ -465,48 +482,84 @@ const FilterPage = () => {
         </div>
 
         {/* Konten Kanan */}
-        <Reveal>
+        {/* <>
-          <div className="flex-1">
+          <Reveal> */}
-            <div className="flex flex-col items-end mb-4">
+        <div className="w-[80%]">
-              <h2 className="text-lg font-semibold">{t("sortBy")}</h2>
+          <div className="flex flex-col items-end mb-4">
-              <select defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} onChange={(e) => handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
+            <h2 className="text-lg font-semibold">{t("sortBy")}</h2>
-                <option value="latest">{t("latest")}</option>
+            <select defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} onChange={(e) => handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
-                <option value="popular">{t("mostPopular")}</option>
+              <option value="latest">{t("latest")}</option>
-              </select>
+              <option value="popular">{t("mostPopular")}</option>
-            </div>
+            </select>
-
-            {imageData?.length > 0 ? (
-              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-                {imageData?.map((image: any) => (
-                  <Card key={image?.id} className="hover:scale-110 transition-transform duration-300">
-                    <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
-                      <Link href={`${prefixPath}/image/detail/${image?.slug}`}>
-                        <img src={image?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" />
-                        <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
-                          {formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" />
-                          {image?.clickCount}{" "}
-                          <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20">
-                            <path
-                              fill="#f00"
-                              d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z"
-                            />
-                          </svg>{" "}
-                        </div>
-                        <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">{image?.title}</div>
-                      </Link>
-                    </CardContent>
-                  </Card>
-                ))}
-              </div>
-            ) : (
-              <p className="flex items-center justify-center text-black">
-                <img src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" />
-              </p>
-            )}
-
-            <LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
           </div>
-        </Reveal>
+
+          {imageData?.length > 0 ? (
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+              {imageData?.map((image: any) => (
+                // <Card key={image?.id} className="hover:scale-110 transition-transform duration-300 h-full lg:h-[300px] w-full lg:w-[342px]">
+                //   <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
+                //     <Link href={`${prefixPath}/image/detail/${image?.slug}`}>
+                //       <Image
+                //         width={2560}
+                //         height={1440}
+                //         alt="filter-image"
+                //         placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                //         src={image?.thumbnailLink}
+                //         className="h-full lg:h-[300px] w-full lg:w-[342px] object-cover items-center justify-center cursor-pointer rounded-lg"
+                //       />
+
+                //       {/* <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
+                //         {formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" />
+                //         {image?.clickCount}{" "}
+                //         <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20">
+                //           <path
+                //             fill="#f00"
+                //             d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z"
+                //           />
+                //         </svg>{" "}
+                //       </div> */}
+                //       <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">{image?.title}</div>
+                //     </Link>
+                //   </CardContent>
+                // </Card>
+                <Card key={image?.id} className="relative overflow-hidden hover:scale-105 transition-transform duration-300 h-full lg:h-[300px] w-full shadow-md hover:shadow-lg rounded-lg">
+                  <CardContent className="flex flex-col w-full p-0">
+                    <Link href={`${prefixPath}/image/detail/${image?.slug}`} className="relative">
+                      {/* Gambar */}
+                      <Image
+                        width={2560}
+                        height={1440}
+                        alt="filter-image"
+                        placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                        src={image?.thumbnailLink}
+                        className="h-full lg:h-[300px] w-full  object-cover rounded-lg transition-transform duration-300"
+                      />
+
+                      {/* Overlay Gelap */}
+                      <div className="absolute inset-0 bg-black bg-opacity-40  rounded-lg"></div>
+
+                      {/* Gradient Bawah */}
+                      {/* <div className="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-black/50 via-black/20 to-transparent"></div> */}
+
+                      {/* Judul */}
+                      <div className="absolute bottom-3 left-3 right-3  text-white p-3 rounded-md z-10">
+                        <h3 className="text-[20px] font-semibold truncate hover:whitespace-normal hover:overflow-visible">{image?.title}</h3>
+                      </div>
+                    </Link>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          ) : (
+            <p className="flex items-center justify-center text-black">
+              <img src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" />
+            </p>
+          )}
+
+          <LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
+        </div>
+        {/* </Reveal>
+        </> */}
       </div>
     </div>
   );

app/[locale]/(public)/(polda)/polda/[polda_name]/image/layout.tsx

@@ -1,10 +1,35 @@
+"use client";
+
+import LayoutProvider from "@/providers/layout.provider";
+import LayoutContentProvider from "@/providers/content.provider";
+import DashCodeSidebar from "@/components/partials/sidebar";
+import DashCodeFooter from "@/components/partials/footer";
+import ThemeCustomize from "@/components/partials/customizer";
+import DashCodeHeader from "@/components/partials/header";
+
+import { redirect } from "@/components/navigation";
 import Footer from "@/components/landing-page/footer";
 import Navbar from "@/components/landing-page/navbar";
+import NavbarKaltara from "@/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara";
+import { useParams } from "next/navigation";
+import ContactUsKaltara from "@/components/landing-page/landing-polda-kaltara/contact-us-kaltara";
+import NewsTickerKaltara from "../../../tbnews/[polda_name]/components/news-tickers-kaltara";
 
-const layout = async ({ children }: { children: React.ReactNode }) => {
+const layout = ({ children }: { children: React.ReactNode }) => {
-  return (
+  const params = useParams();
+  const poldaName: any = params?.polda_name;
+  return poldaName === "kaltara" ? (
     <>
+      <NavbarKaltara />
       {children}
+      <ContactUsKaltara />
+      <NewsTickerKaltara />
+    </>
+  ) : (
+    <>
+      <Navbar />
+      {children}
+      <Footer />
     </>
   );
 };

app/[locale]/(public)/(polda)/polda/[polda_name]/video/layout.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import LayoutProvider from "@/providers/layout.provider";
 import LayoutContentProvider from "@/providers/content.provider";
 import DashCodeSidebar from "@/components/partials/sidebar";
@@ -8,11 +10,26 @@ import DashCodeHeader from "@/components/partials/header";
 import { redirect } from "@/components/navigation";
 import Footer from "@/components/landing-page/footer";
 import Navbar from "@/components/landing-page/navbar";
+import NavbarKaltara from "@/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara";
+import { useParams } from "next/navigation";
+import ContactUsKaltara from "@/components/landing-page/landing-polda-kaltara/contact-us-kaltara";
+import NewsTickerKaltara from "../../../tbnews/[polda_name]/components/news-tickers-kaltara";
 
-const layout = async ({ children }: { children: React.ReactNode }) => {
+const layout = ({ children }: { children: React.ReactNode }) => {
-  return (
+  const params = useParams();
+  const poldaName: any = params?.polda_name;
+  return poldaName === "kaltara" ? (
     <>
+      <NavbarKaltara />
       {children}
+      <ContactUsKaltara />
+      <NewsTickerKaltara />
+    </>
+  ) : (
+    <>
+      <Navbar />
+      {children}
+      <Footer />
     </>
   );
 };

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

@@ -167,7 +167,7 @@ const HeroKaltara = () => {
             //     </div>
             //   ))}
             // </div>
-            <Carousel className="lg:w-2/3 lg:h-full ">
+            <Carousel className="w-full lg:w-2/3 lg:h-full ">
               <CarouselContent>
                 {content?.map((row: any) => (
                   <CarouselItem key={row?.id}>
@@ -175,7 +175,7 @@ const HeroKaltara = () => {
                       <Link href={`${locale}/image/detail/${row?.slug}`}>
                         <Image src={row?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full h-[200px] lg:h-[500px] rounded-sm object-cover" />
                       </Link>
-                      <h1 className="font-bold font-sans text-[30px]">{row.title}</h1>
+                      <h1 className="font-bold font-sans text-[15px] lg:text-[30px]">{row.title}</h1>
                       <div className="flex flex-row gap-3">
                         <p className="text-[#c03724] font-sans text-[16px]">{row?.categoryName}</p>
                         <p className="text-[16px] font-sans flex flex-row items-center text-slate-500 dark:text-white gap-1">

app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/pps-section.tsx

@@ -29,7 +29,7 @@ const PpsSection = () => {
             {image?.map((news: any, index) => (
               <CarouselItem key={news?.id} className="grid grid-cols-1">
                 <Card key={index} className="w-full overflow-hidden shadow-lg h-full">
-                  <Image src={news.src} alt="pps" width={2560} height={1440} className="w-full h-[60vh] object-cover rounded-md" />
+                  <Image src={news.src} alt="pps" width={2560} height={1440} className="w-full h-full lg:h-[60vh] object-cover rounded-md" />
 
                   <CardContent className="p-4">
                     {/* <div className="flex items-center gap-2 text-white text-xs font-bold">

app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/regional-news.tsx

@@ -129,7 +129,7 @@ const RegionalNews = () => {
             <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-20">
+        <div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-20 mb-4 lg:mb-10">
           {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" />

app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/social-media.tsx

@@ -107,9 +107,9 @@ const SocialMedia = () => {
               </TabsList>
             </Tabs>
           </div>
-          <div className="flex flex-col lg:flex-row">
+          <div className="flex flex-col lg:flex-row w-full">
             {selectedTab == "x" ? (
-              <div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">
+              <div className="flex flex-row justify-between gap-5 ">
                 {/* <div className="border border-slate-300 rounded-lg mt-4 w-[350px] h-[500px]">
                   <div className="mt-2 flex flex-row gap-2 mx-1">
                     <div className="h-full">
@@ -140,7 +140,7 @@ const SocialMedia = () => {
                   </div>
                 </div> */}
                 <Carousel className="w-full mx-auto">
-                  <CarouselContent className="gap-[20px] w-full">
+                  <CarouselContent className="gap-[20px] pl-5">
                     {twitter?.map((image: any) => (
                       <CarouselItem key={image?.id} className="md:basis-1/2 lg:basis-1/4 border border-slate-300 rounded-lg mt-4">
                         <div className="mt-2 flex flex-row gap-2 mx-1">
@@ -175,7 +175,7 @@ const SocialMedia = () => {
                 </Carousel>
               </div>
             ) : selectedTab == "instagram" ? (
-              <div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">
+              <div className="flex flex-row justify-between gap-5">
                 <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">
@@ -207,7 +207,7 @@ const SocialMedia = () => {
                 </div>
               </div>
             ) : selectedTab == "facebook" ? (
-              <div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">
+              <div className="flex flex-row justify-between gap-5">
                 <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">
@@ -239,7 +239,7 @@ const SocialMedia = () => {
                 </div>
               </div>
             ) : selectedTab == "tiktok" ? (
-              <div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">
+              <div className="flex flex-row justify-between gap-5">
                 <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">
@@ -271,7 +271,7 @@ const SocialMedia = () => {
                 </div>
               </div>
             ) : selectedTab == "youtube" ? (
-              <div className="flex flex-row justify-between gap-5 w-[90%] mx-auto">
+              <div className="flex flex-row justify-between gap-5">
                 <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">

app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/page.tsx

@@ -811,10 +811,9 @@ const DetailInfo = () => {
             <button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
               {t("send")}
             </button>
+            <div className="border-b-2  border-slate-300 mt-4 w-full self-center"></div>
           </div>
 
-          <div className="border-b-2  border-slate-300 mt-4 w-auto"></div>
-
           <div>
             {listSuggestion?.map((data: any) => (
               <div className="flex flex-col">

components/landing-page/content-category.tsx

@@ -47,14 +47,13 @@ const ContentCategory = (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="mx-auto px-4 lg:px-24 py-10 max-w-screen-2xl ">
+    <div className="px-4 lg:px-24 py-10">
       <Reveal>
-        <h2 className="text-center text-xl lg:text-2xl font-bold text-[#bb3523] mb-4">
+        <h2 className="bg-[#c03724] rounded-md p-3 w-fit text-white">
-          {pathname?.split("/")[1] == "in" ? (
+          {/* {pathname?.split("/")[1] == "in" ? (
             <>
               <span className="text-black dark:text-white">{t("category")}&nbsp;</span>
               {t("content")}
@@ -64,17 +63,44 @@ const ContentCategory = (props: { group?: string }) => {
               <span className="text-black dark:text-white">{t("content")}&nbsp;</span>
               {t("category")}
             </>
-          )}
+          )} */}
+          Kategori Konten
         </h2>
-        <div className="h-1 w-48 bg-[#bb3523] mx-auto mb-6 rounded"></div>
+        {/* <div className="h-1 w-48 bg-[#bb3523] mx-auto mb-6 rounded"></div> */}
 
-        <div className="grid my-3 grid-cols-2 lg:grid-cols-4 gap-4">
+        <div className="grid my-8 grid-cols-1 lg:grid-cols-4 gap-4">
           {categories?.map((category: any, index: number) =>
             !seeAllValue ? (
               index < 4 ? (
+                // <Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
+                //   <Image
+                //     placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                //     alt="category"
+                //     width={2560}
+                //     height={1440}
+                //     src={category?.thumbnailLink}
+                //     className="w-full lg:w-[315px] lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
+                //   />
+                //   <div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523]">
+                //     <h3 className="text-sm font-semibold truncate">{category?.name}</h3>
+                //   </div>
+                // </Link>
                 <Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
-                  <Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} alt="category" width={2560} height={1440} src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
+                  {/* Gambar */}
-                  <div className="absolute  bottom-0 rounded-lg left-0 right-0 bg-gray-400 border-l-4 mb-4 border-[#bb3523] text-white p-2">
+                  <Image
+                    placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                    alt="category"
+                    width={2560}
+                    height={1440}
+                    src={category?.thumbnailLink}
+                    className="w-full lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
+                  />
+
+                  {/* Overlay gelap */}
+                  <div className="absolute inset-0 bg-black bg-opacity-25 group-hover:bg-opacity-35 transition-all duration-300 rounded-md"></div>
+
+                  {/* Judul */}
+                  <div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523] z-10">
                     <h3 className="text-sm font-semibold truncate">{category?.name}</h3>
                   </div>
                 </Link>
@@ -82,9 +108,35 @@ const ContentCategory = (props: { group?: string }) => {
                 ""
               )
             ) : (
+              // <Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
+              //   <Image
+              //     placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+              //     alt="category"
+              //     width={2560}
+              //     height={1440}
+              //     src={category?.thumbnailLink}
+              //     className="w-fulllg:w-[315px] lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
+              //   />
+              //   <div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523]">
+              //     <h3 className="text-sm font-semibold truncate">{category?.name}</h3>
+              //   </div>
+              // </Link>
               <Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
-                <Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} alt="category" width={2560} height={1440} src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
+                {/* Gambar */}
-                <div className="absolute bottom-0 left-0 right-0 bg-gray-400 border-l-4 mb-4 border-[#bb3523] rounded-lg text-white p-2">
+                <Image
+                  placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                  alt="category"
+                  width={2560}
+                  height={1440}
+                  src={category?.thumbnailLink}
+                  className="w-full lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
+                />
+
+                {/* Overlay Gelap */}
+                <div className="absolute inset-0 bg-black bg-opacity-25 group-hover:bg-opacity-35 transition-all duration-300"></div>
+
+                {/* Judul */}
+                <div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523] z-10">
                   <h3 className="text-sm font-semibold truncate">{category?.name}</h3>
                 </div>
               </Link>

components/landing-page/landing-polda-kaltara/contact-us-kaltara.tsx

@@ -5,7 +5,7 @@ import React from "react";
 
 const ContactUsKaltara = () => {
   return (
-    <div className="bg-[#E7E7E7] h-[150px] lg:h-[300px] text-black px-4 lg:px-20 mb-10 mt-10">
+    <div className="bg-[#E7E7E7] h-full lg:h-[300px] text-black px-4 lg:px-20 mb-10">
       <div className="container mx-auto py-8">
         <div className="flex flex-col md:flex-row justify-between items-start gap-4">
           {/* Logo */}

components/landing-page/landing-polda-kaltara/header-banner-kaltara.tsx

@@ -85,18 +85,19 @@ const HeaderBannerKaltara = () => {
               </div>
             </div>
           ) : (
-            <Carousel className="lg:w-2/3 lg:h-full ">
+            <Carousel className="w-full lg:w-2/3 lg:h-full ">
               <CarouselContent>
                 {content?.map((row: any) => (
                   <CarouselItem key={row?.id}>
-                    <div className="relative h-[310px] lg:h-[580px]">
+                    <div className="relative h-[310px] lg:h-[580px] overflow-hidden rounded-lg">
-                      <Image src={row?.thumbnailLink} alt="" width={1920} height={1080} className="w-full h-[540px] lg:h-full rounded-lg object-cover" />
+                      <Image src={row?.thumbnailLink} alt="" width={1920} height={1080} className="w-full h-[540px] lg:h-full object-cover" />
+                      <div className="absolute inset-0 bg-black bg-opacity-30"></div> {/* Overlay */}
                       <div className="absolute bottom-5 left-5 right-5 bg-black bg-opacity-50  text-white p-4 rounded-r-lg border-l-2 border-[#bb3523]">
-                        <span className="text-[#bb3523] font-sans bg-[#b0b0af] border border-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-[14px] px-[10px] py-[5px]">{row?.categoryName}</span>
+                        <span className="text-[#bb3523] font-sans bg-[#b0b0af] border border-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-[10px] lg:text-[14px] px-[10px] py-[5px]">{row?.categoryName}</span>
-                        <div onClick={() => router.push(prefixPath + `/image/detail/${row?.slug}`)} className="cursor-pointer">
+                        <div onClick={() => router.push(prefixPath + `/image/detail/${row?.slug}`)} className="cursor-pointer mt-2 lg:mt-0">
-                          <h3 className="text-[42px] font-sans text-white">{row.title}</h3>
+                          <h3 className="text-[17px] lg:text-[42px] font-sans text-white">{row.title}</h3>
                         </div>
-                        <p className="text-[12px] font-sans flex flex-row items-center gap-1 mt-1 text-white">
+                        <p className="text-[9px] lg:text-[12px] font-sans flex flex-row items-center gap-1 mt-1 text-white">
                           {getPublicLocaleTimestamp(new Date(row?.createdAt))} WIB {" | "}
                           <Icon icon="formkit:eye" width="15" height="15" /> {row?.clickCount}
                         </p>
@@ -105,8 +106,8 @@ const HeaderBannerKaltara = () => {
                   </CarouselItem>
                 ))}
               </CarouselContent>
-              <CarouselPrevious />
+              <CarouselPrevious className="left-6" />
-              <CarouselNext />
+              <CarouselNext className="right-6" />
             </Carousel>
           )}
 

components/landing-page/landing-polda-kaltara/latest-content-kaltara.tsx

@@ -75,7 +75,7 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
       <Reveal>
         <div className="px-4 lg:px-20 my-10">
           <div className="bg-[#c03724] rounded-md p-3 w-fit text-white">Berita {props.type == "popular" ? "Terpopuler" : props.type == "latest" ? t("new") : "Serupa"}</div>
-          <div className="mx-auto w-full max-w-7xl justify-center flex px-5 flex-col lg:flex-row gap-5 mb-4">
+          <div className="mx-auto w-full  justify-center flex px-5 flex-col lg:flex-row gap-5 mb-4">
             <Tabs value={selectedTab} onValueChange={setSelectedTab}>
               <TabsList className="grid grid-cols-2 lg:flex lg:flex-row">
                 <TabsTrigger
@@ -130,40 +130,70 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
             <div className="">
               {selectedTab == "image" ? (
                 content?.length > 0 ? (
-                  <Carousel className="w-[90%] mx-auto">
+                  // <Carousel className="">
+                  //   <CarouselContent>
+                  //     {content?.map((image: any) => (
+                  //       <CarouselItem key={image?.id} className="basis-1/2 md:basis-1/3 lg:basis-1/4">
+                  //         <div onClick={() => router.push(prefixPath + `/video/detail/${image?.slug}`)} className="cursor-pointer relative group rounded-md overflow-hidden">
+                  //           {/* Gambar */}
+                  //           <Image
+                  //             placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                  //             alt="image"
+                  //             width={2560}
+                  //             height={1440}
+                  //             src={image?.thumbnailLink}
+                  //             className="w-full lg:w-[390px] h-48 md:h-56 lg:h-[490px] object-cover rounded-md"
+                  //           />
+
+                  //           {/* Kategori - Sekarang Berada di Atas */}
+                  //           <span className="absolute top-2 left-2 z-10 text-xs md:text-sm font-sans font-semibold uppercase px-2 py-1 bg-white bg-opacity-20 border border-[#c03724] text-[#c03724] rounded-md">{image?.categoryName}</span>
+
+                  //           {/* Overlay Konten (Informasi di Bawah) */}
+                  //           <div className="absolute bottom-0 left-0 right-0 p-4 bg-transparent rounded-md">
+                  //             {/* Judul */}
+                  //             <p className="text-white text-sm md:text-[20px] font-sans font-semibold mb-2">{image?.title}</p>
+
+                  //             {/* Info Tambahan */}
+                  //             {/* <p className="flex items-center text-xs md:text-sm text-white mt-1 gap-2">
+                  //           {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {video?.clickCount}
+                  //         </p> */}
+                  //           </div>
+                  //         </div>
+                  //       </CarouselItem>
+                  //     ))}
+                  //   </CarouselContent>
+                  //   {/* <CarouselPrevious className="hover:bg-black" />
+                  //   <CarouselNext className="hover:bg-black -mr-6" /> */}
+                  // </Carousel>
+                  <Carousel className="">
                     <CarouselContent>
-                      {content?.map((video: any) => (
+                      {content?.map((image: any) => (
-                        <CarouselItem key={video?.id} className="basis-1/2 md:basis-1/3 lg:basis-1/4">
+                        <CarouselItem key={image?.id} className="md:basis-1/3 lg:basis-1/4">
-                          <div onClick={() => router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group rounded-md overflow-hidden">
+                          <div onClick={() => router.push(prefixPath + `/image/detail/${image?.slug}`)} className="cursor-pointer relative group rounded-md overflow-hidden">
                             {/* Gambar */}
                             <Image
                               placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                               alt="video"
                               width={2560}
                               height={1440}
-                              src={video?.thumbnailLink}
+                              src={image?.thumbnailLink}
-                              className="w-full lg:w-[390px] h-48 md:h-56 lg:h-[490px] object-cover rounded-md"
+                              className="w-full lg:w-[400px] h-48 md:h-56 lg:h-[490px] object-cover rounded-md"
                             />
 
-                            {/* Kategori - Sekarang Berada di Atas */}
+                            {/* Overlay gelap */}
-                            <span className="absolute top-2 left-2 z-10 text-xs md:text-sm font-sans font-semibold uppercase px-2 py-1 bg-white bg-opacity-20 border border-[#c03724] text-[#c03724] rounded-md">{video?.categoryName}</span>
+                            <div className="absolute inset-0 bg-black bg-opacity-30  rounded-md"></div>
 
-                            {/* Overlay Konten (Informasi di Bawah) */}
+                            {/* Kategori */}
-                            <div className="absolute bottom-0 left-0 right-0 p-4 bg-transparent rounded-md">
+                            <span className="absolute top-2 left-2 z-10 text-xs md:text-sm font-sans font-semibold uppercase px-2 py-1 bg-white bg-opacity-20 border border-[#c03724] text-[#c03724] rounded-md">{image?.categoryName}</span>
-                              {/* Judul */}
-                              <p className="text-white text-sm md:text-[20px] font-sans font-semibold mb-2">{video?.title}</p>
 
-                              {/* Info Tambahan */}
+                            {/* Konten Informasi */}
-                              {/* <p className="flex items-center text-xs md:text-sm text-white mt-1 gap-2">
+                            <div className="absolute bottom-0 left-0 right-0 p-4 z-10">
-                            {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {video?.clickCount}
+                              <p className="text-white text-sm md:text-[20px] font-sans font-semibold mb-2">{image?.title}</p>
-                          </p> */}
                             </div>
                           </div>
                         </CarouselItem>
                       ))}
                     </CarouselContent>
-                    <CarouselPrevious className="hover:bg-black" />
-                    <CarouselNext className="hover:bg-black -mr-6" />
                   </Carousel>
                 ) : (
                   <p className="flex items-center justify-center">
@@ -200,8 +230,8 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
                         </CarouselItem>
                       ))}
                     </CarouselContent>
-                    <CarouselPrevious />
+                    {/* <CarouselPrevious />
-                    <CarouselNext />
+                    <CarouselNext /> */}
                   </Carousel>
                 ) : (
                   <p className="flex items-center justify-center">
@@ -210,11 +240,46 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
                 )
               ) : selectedTab == "video" ? (
                 content?.length > 0 ? (
-                  <Carousel className="w-[90%] mx-auto">
+                  // <Carousel className="">
+                  //   <CarouselContent>
+                  //     {content?.map((video: any) => (
+                  //       <CarouselItem key={video?.id} className=" md:basis-1/3 lg:basis-1/4">
+                  //         <div onClick={() => router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group rounded-lg overflow-hidden">
+                  //           {/* Gambar */}
+                  //           <Image
+                  //             placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                  //             alt="video"
+                  //             width={2560}
+                  //             height={1440}
+                  //             src={video?.thumbnailLink}
+                  //             className="w-full lg:w-[315px] h-48 md:h-56 lg:h-[490px] object-cover rounded-lg transition-transform duration-300"
+                  //           />
+
+                  //           {/* Kategori - Sekarang Berada di Atas */}
+                  //           <span className="absolute top-2 left-2 z-10 text-xs md:text-sm font-sans font-semibold uppercase px-2 py-1 bg-white bg-opacity-20 border border-[#c03724] text-[#c03724] rounded-md">{video?.categoryName}</span>
+
+                  //           {/* Overlay Konten (Informasi di Bawah) */}
+                  //           <div className="absolute bottom-0 left-0 right-0 p-4 bg-transparent rounded-lg">
+                  //             {/* Judul */}
+                  //             <p className="text-white text-sm md:text-[20px] font-sans font-semibold mb-2">{video?.title}</p>
+
+                  //             {/* Info Tambahan */}
+                  //             {/* <p className="flex items-center text-xs md:text-sm text-white mt-1 gap-2">
+                  //           {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {video?.clickCount}
+                  //         </p> */}
+                  //           </div>
+                  //         </div>
+                  //       </CarouselItem>
+                  //     ))}
+                  //   </CarouselContent>
+                  //   {/* <CarouselPrevious className="hover:bg-black" />
+                  //   <CarouselNext className="hover:bg-black -mr-6" /> */}
+                  // </Carousel>
+                  <Carousel className="">
                     <CarouselContent>
                       {content?.map((video: any) => (
-                        <CarouselItem key={video?.id} className="basis-1/2 md:basis-1/3 lg:basis-1/4">
+                        <CarouselItem key={video?.id} className="md:basis-1/3 lg:basis-1/4">
-                          <div onClick={() => router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group rounded-lg overflow-hidden">
+                          <div onClick={() => router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group rounded-md overflow-hidden">
                             {/* Gambar */}
                             <Image
                               placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
@@ -222,28 +287,23 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
                               width={2560}
                               height={1440}
                               src={video?.thumbnailLink}
-                              className="w-full lg:w-[315px] h-48 md:h-56 lg:h-[490px] object-cover rounded-lg transition-transform duration-300"
+                              className="w-full lg:w-[400px] h-48 md:h-56 lg:h-[490px] object-cover rounded-md"
                             />
 
-                            {/* Kategori - Sekarang Berada di Atas */}
+                            {/* Overlay Gelap */}
+                            <div className="absolute inset-0 bg-black bg-opacity-30 rounded-lg"></div>
+
+                            {/* Kategori */}
                             <span className="absolute top-2 left-2 z-10 text-xs md:text-sm font-sans font-semibold uppercase px-2 py-1 bg-white bg-opacity-20 border border-[#c03724] text-[#c03724] rounded-md">{video?.categoryName}</span>
 
-                            {/* Overlay Konten (Informasi di Bawah) */}
+                            {/* Overlay Konten (Judul) */}
-                            <div className="absolute bottom-0 left-0 right-0 p-4 bg-transparent rounded-lg">
+                            <div className="absolute bottom-0 left-0 right-0 p-4 z-10">
-                              {/* Judul */}
+                              <p className="text-white text-sm md:text-[20px] font-sans font-semibold mb-2 line-clamp-2">{video?.title}</p>
-                              <p className="text-white text-sm md:text-[20px] font-sans font-semibold mb-2">{video?.title}</p>
-
-                              {/* Info Tambahan */}
-                              {/* <p className="flex items-center text-xs md:text-sm text-white mt-1 gap-2">
-                            {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {video?.clickCount}
-                          </p> */}
                             </div>
                           </div>
                         </CarouselItem>
                       ))}
                     </CarouselContent>
-                    <CarouselPrevious className="hover:bg-black" />
-                    <CarouselNext className="hover:bg-black -mr-6" />
                   </Carousel>
                 ) : (
                   <p className="flex items-center justify-center">
@@ -286,8 +346,8 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
                       </CarouselItem>
                     ))}
                   </CarouselContent>
-                  <CarouselPrevious />
+                  {/* <CarouselPrevious />
-                  <CarouselNext />
+                  <CarouselNext /> */}
                 </Carousel>
               ) : (
                 <p className="flex items-center justify-center">

components/landing-page/landing-polda-kaltara/navbar-polda-kaltara.tsx

@@ -135,7 +135,7 @@ const NavbarKaltara = () => {
           )}
         </button>
 
-        <div className="flex flex-row items-center gap-3">
+        <div className="hidden lg:flex items-center gap-5">
           <Link href="/tbnews/polda-kaltara" className="text-white">
             TBNews
           </Link>
@@ -184,6 +184,151 @@ const NavbarKaltara = () => {
           </Link>
         </div>
       </div>
+
+      {/* mobile menu */}
+      {menuOpen && (
+        <div className="lg:hidden absolute bg-[#c03724] dark:bg-slate-600 px-4 py-3 w-full space-y-3 z-50">
+          <NavigationMenu>
+            <NavigationMenuList className="gap-10">
+              <NavigationMenuItem>
+                <NavigationMenuTrigger className="bg-[#c03724] text-white hover:bg-[#c03724] hover:text-white">
+                  {/* <a className="text-white flex flex-row justify-center items-center cursor-pointer"> */}
+                  {/* <svg className="mx-2 dark:" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                          d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z"
+                          fill="currentColor"
+                        />
+                      </svg> */}
+                  {t("content")}
+                  {/* </a> */}
+                </NavigationMenuTrigger>
+                <NavigationMenuContent className="flex flex-col place-content-start rounded-md overflow-hidden">
+                  <NavigationMenuLink onClick={() => router.push(prefixPath + "/image/filter")} className="flex place-items-start gap-1.5 p-2 w-36">
+                    <p className="text-slate-600  dark:text-white hover:text-[#bb3523] flex flex-row items-center py-2 cursor-pointer">
+                      <FiImage className="mr-2" />
+                      {t("image")}
+                    </p>
+                  </NavigationMenuLink>
+                  <NavigationMenuLink onClick={() => router.push(prefixPath + "/video/filter")} className="flex items-start gap-1.5 p-2 ">
+                    {pathname?.split("/")[1] == "in" ? (
+                      <>
+                        <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
+                          <FiYoutube className="mr-2" />
+                          {t("video")}
+                        </p>
+                      </>
+                    ) : (
+                      <>
+                        <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
+                          <FiYoutube className="mr-2" />
+                          {t("video")}
+                        </p>
+                      </>
+                    )}
+                  </NavigationMenuLink>
+                  <NavigationMenuLink onClick={() => router.push(prefixPath + "/document/filter")} className="flex place-items-start gap-1.5 p-2">
+                    <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
+                      <FiFile className="mr-2" />
+                      {t("text")}
+                    </p>
+                  </NavigationMenuLink>
+                  <NavigationMenuLink onClick={() => router.push(prefixPath + "/audio/filter")} className="flex place-items-start gap-1.5 p-2 ">
+                    <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
+                      <FiMusic className="mr-2" />
+                      {t("audio")}{" "}
+                    </p>
+                  </NavigationMenuLink>
+                </NavigationMenuContent>
+              </NavigationMenuItem>
+              <NavigationMenuItem>
+                <Link href={prefixPath + "/schedule"} legacyBehavior passHref>
+                  <NavigationMenuLink className="bg-[#c03724] text-white">
+                    {/* <span>
+                        <svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                          <path
+                            d="M19.5 4H18.5V3C18.5 2.4 18.1 2 17.5 2C16.9 2 16.5 2.4 16.5 3V4H8.5V3C8.5 2.4 8.1 2 7.5 2C6.9 2 6.5 2.4 6.5 3V4H5.5C3.8 4 2.5 5.3 2.5 7V8H22.5V7C22.5 5.3 21.2 4 19.5 4ZM2.5 19C2.5 20.7 3.8 22 5.5 22H19.5C21.2 22 22.5 20.7 22.5 19V10H2.5V19ZM17.5 12C18.1 12 18.5 12.4 18.5 13C18.5 13.6 18.1 14 17.5 14C16.9 14 16.5 13.6 16.5 13C16.5 12.4 16.9 12 17.5 12ZM17.5 16C18.1 16 18.5 16.4 18.5 17C18.5 17.6 18.1 18 17.5 18C16.9 18 16.5 17.6 16.5 17C16.5 16.4 16.9 16 17.5 16ZM12.5 12C13.1 12 13.5 12.4 13.5 13C13.5 13.6 13.1 14 12.5 14C11.9 14 11.5 13.6 11.5 13C11.5 12.4 11.9 12 12.5 12ZM12.5 16C13.1 16 13.5 16.4 13.5 17C13.5 17.6 13.1 18 12.5 18C11.9 18 11.5 17.6 11.5 17C11.5 16.4 11.9 16 12.5 16ZM7.5 12C8.1 12 8.5 12.4 8.5 13C8.5 13.6 8.1 14 7.5 14C6.9 14 6.5 13.6 6.5 13C6.5 12.4 6.9 12 7.5 12ZM7.5 16C8.1 16 8.5 16.4 8.5 17C8.5 17.6 8.1 18 7.5 18C6.9 18 6.5 17.6 6.5 17C6.5 16.4 6.9 16 7.5 16Z"
+                            fill="currentColor"
+                          />
+                        </svg>
+                      </span> */}
+                    {t("schedule")}
+                  </NavigationMenuLink>
+                </Link>
+              </NavigationMenuItem>
+              <NavigationMenuItem>
+                <Link href={prefixPath + "/indeks"} legacyBehavior passHref>
+                  <NavigationMenuLink className="bg-[#c03724] text-white">
+                    {/* <span>
+                        <svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                          <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M2.5 6C2.5 5.20435 2.81607 4.44129 3.37868 3.87868C3.94129 3.31607 4.70435 3 5.5 3H19.5C20.2956 3 21.0587 3.31607 21.6213 3.87868C22.1839 4.44129 22.5 5.20435 22.5 6V18C22.5 18.7956 22.1839 19.5587 21.6213 20.1213C21.0587 20.6839 20.2956 21 19.5 21H5.5C4.70435 21 3.94129 20.6839 3.37868 20.1213C2.81607 19.5587 2.5 18.7956 2.5 18V6ZM7.5 7C7.23478 7 6.98043 7.10536 6.79289 7.29289C6.60536 7.48043 6.5 7.73478 6.5 8V12C6.5 12.2652 6.60536 12.5196 6.79289 12.7071C6.98043 12.8946 7.23478 13 7.5 13H11.5C11.7652 13 12.0196 12.8946 12.2071 12.7071C12.3946 12.5196 12.5 12.2652 12.5 12V8C12.5 7.73478 12.3946 7.48043 12.2071 7.29289C12.0196 7.10536 11.7652 7 11.5 7H7.5ZM8.5 11V9H10.5V11H8.5ZM15.5 7C15.2348 7 14.9804 7.10536 14.7929 7.29289C14.6054 7.48043 14.5 7.73478 14.5 8C14.5 8.26522 14.6054 8.51957 14.7929 8.70711C14.9804 8.89464 15.2348 9 15.5 9H17.5C17.7652 9 18.0196 8.89464 18.2071 8.70711C18.3946 8.51957 18.5 8.26522 18.5 8C18.5 7.73478 18.3946 7.48043 18.2071 7.29289C18.0196 7.10536 17.7652 7 17.5 7H15.5ZM15.5 11C15.2348 11 14.9804 11.1054 14.7929 11.2929C14.6054 11.4804 14.5 11.7348 14.5 12C14.5 12.2652 14.6054 12.5196 14.7929 12.7071C14.9804 12.8946 15.2348 13 15.5 13H17.5C17.7652 13 18.0196 12.8946 18.2071 12.7071C18.3946 12.5196 18.5 12.2652 18.5 12C18.5 11.7348 18.3946 11.4804 18.2071 11.2929C18.0196 11.1054 17.7652 11 17.5 11H15.5ZM7.5 15C7.23478 15 6.98043 15.1054 6.79289 15.2929C6.60536 15.4804 6.5 15.7348 6.5 16C6.5 16.2652 6.60536 16.5196 6.79289 16.7071C6.98043 16.8946 7.23478 17 7.5 17H17.5C17.7652 17 18.0196 16.8946 18.2071 16.7071C18.3946 16.5196 18.5 16.2652 18.5 16C18.5 15.7348 18.3946 15.4804 18.2071 15.2929C18.0196 15.1054 17.7652 15 17.5 15H7.5Z"
+                            fill="currentColor"
+                          />
+                        </svg>
+                      </span> */}
+                    {t("index")}
+                  </NavigationMenuLink>
+                </Link>
+              </NavigationMenuItem>
+            </NavigationMenuList>
+          </NavigationMenu>
+
+          <div className="flex lg:hidden flex-col items-center gap-1">
+            <div className="flex flex-row justify-between items-center gap-2">
+              <Link href="/tbnews/polda-kaltara" className="text-white">
+                TBNews
+              </Link>
+
+              <div className="flex items-center">
+                <a href="https://tvradio.polri.go.id/">
+                  <Image src="/assets/polriTv.png" width={100} height={120} alt="polritv" className="object-contain flex-auto " />
+                </a>
+              </div>
+
+              {/* Languange */}
+              <div className="relative inline-block text-left">
+                <LocalSwitcher />
+              </div>
+            </div>
+
+            <div className="flex flex-row gap-10 items-center py-3">
+              <div className="relative text-gray-600 dark:text-white">
+                <input
+                  value={onSearch}
+                  onChange={(e) => setOnSearch(e.target.value)}
+                  onKeyPress={() => router.push(`/all/filter?title=${onSearch}`)}
+                  type="text"
+                  placeholder={t("search")}
+                  className="pl-8 pr-4 py-1 w-28 text-[13px] border rounded-full focus:outline-none dark:text-white"
+                />
+                <span className="absolute left-4 top-1/2 transform -translate-y-1/2">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24">
+                    <path
+                      fill="currentColor"
+                      fill-rule="evenodd"
+                      d="M14.385 15.446a6.751 6.751 0 1 1 1.06-1.06l5.156 5.155a.75.75 0 1 1-1.06 1.06zM6.46 13.884a5.25 5.25 0 1 1 7.43-.005l-.005.005l-.005.004a5.25 5.25 0 0 1-7.42-.004"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                </span>
+              </div>
+
+              {/* Dark Mode */}
+              <ThemeSwitcher />
+
+              {/* login */}
+              <Link href="/auth">
+                <Button className="hidden lg:flex justify-center items-center bg-white rounded-full gap-3 p-2 w-fit h-fit">
+                  <Icon icon="material-symbols:lock" className="text-[#c03724]" />
+                  <p className="text-[#c03724]">Login</p>
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };

components/landing-page/landing-polda-kaltara/search-section-kaltara.tsx

@@ -14,11 +14,11 @@ const SearchSectionKaltara = () => {
       <Reveal>
         <div className="flex flex-col items-center text-center py-12 px-4 md:py-16">
           {/* Heading */}
-          <h2 className="text-[32px] font-sans md:text-3xl font-bold text-black">Liputan apa yang sedang anda cari?</h2>
+          <h2 className="text-[15px] lg:text-[32px] font-sans md:text-3xl font-bold text-black">Liputan apa yang sedang anda cari?</h2>
-          <p className="text-gray-600 mt-2 max-w-lg text-[16px] font-sans md:text-base">Liputan terkini yang bersumber langsung dari kegiatan Polri di Mabes, Polda dan Polres di seluruh Indonesia</p>
+          <p className="text-gray-600 mt-2 max-w-lg text-[10px] lg:text-[16px] font-sans md:text-base">Liputan terkini yang bersumber langsung dari kegiatan Polri di Mabes, Polda dan Polres di seluruh Indonesia</p>
 
           {/* Subjudul */}
-          <h3 className="text-sm md:text-[20px] font-sans font-semibold mt-6">Temukan Liputan Anda</h3>
+          <h3 className="text-[10px] md:text-[20px] font-sans font-semibold mt-6">Temukan Liputan Anda</h3>
 
           {/* Search Bar */}
           <div className="relative mt-4 w-full max-w-sm md:max-w-md">