From 1bb6363a69bb1e8b098dd34beeb2ed5bcf53549c Mon Sep 17 00:00:00 2001
From: hanif salafi <hanifsalafi456@gmail.com>
Date: Sun, 6 Jul 2025 21:57:09 +0700
Subject: [PATCH] feat: update image priority

---
 .../landing-page/area-coverage-and-work-units.tsx |  2 ++
 components/landing-page/content-category.tsx      |  1 +
 components/landing-page/coverage.tsx              |  1 +
 components/landing-page/division.tsx              |  1 +
 components/landing-page/dynamic-logo-polda.tsx    |  1 +
 components/landing-page/dynamic-logo-satker.tsx   |  1 +
 components/landing-page/event-calender.tsx        |  7 ++-----
 components/landing-page/header-banner-satker.tsx  |  2 ++
 components/landing-page/header-banner.tsx         |  4 ++--
 components/landing-page/hero-new-polda.tsx        |  4 ++++
 components/landing-page/hero-new-satker.tsx       |  8 ++++----
 components/landing-page/hero-new.tsx              |  5 +++--
 components/landing-page/hero.tsx                  |  5 +++++
 .../landing-polda-kaltara/contact-us-kaltara.tsx  |  4 ++--
 .../content-category-kaltara.tsx                  |  1 +
 .../header-banner-kaltara.tsx                     |  4 ++--
 .../latest-content-kaltara.tsx                    | 10 ++++++----
 .../navbar-polda-kaltara.tsx                      | 10 +++++-----
 components/landing-page/navbar.tsx                | 15 +++++++++++++++
 components/landing-page/new-content.tsx           |  6 ++++++
 components/landing-page/polda-logo.tsx            |  2 +-
 components/landing-page/search-section-new.tsx    |  2 ++
 22 files changed, 69 insertions(+), 27 deletions(-)

diff --git a/components/landing-page/area-coverage-and-work-units.tsx b/components/landing-page/area-coverage-and-work-units.tsx
index 9fa0f7e3..fa54a2e3 100644
--- a/components/landing-page/area-coverage-and-work-units.tsx
+++ b/components/landing-page/area-coverage-and-work-units.tsx
@@ -52,6 +52,7 @@ const AreaCoverageWorkUnits = () => {
                   className="flex flex-col gap-2 justify-center items-center shadow-lg group rounded-xl py-5 w-full border-2 border-transparent hover:border-[#bb3523] transition-all duration-300"
                 >
                   <Image
+                    priority={true}
                     width={1920}
                     height={1080}
                     alt="indo"
@@ -93,6 +94,7 @@ const AreaCoverageWorkUnits = () => {
               <DialogTrigger asChild>
                 <button className="flex flex-col gap-2 justify-center items-center shadow-lg group rounded-xl py-5 w-full border-2 border-transparent hover:border-[#bb3523] transition-all duration-300">
                   <Image
+                    priority={true}
                     width={1920}
                     height={1080}
                     alt="polri"
diff --git a/components/landing-page/content-category.tsx b/components/landing-page/content-category.tsx
index 47a84626..96a045a2 100644
--- a/components/landing-page/content-category.tsx
+++ b/components/landing-page/content-category.tsx
@@ -77,6 +77,7 @@ const ContentCategory = (props: { group?: string; type: string }) => {
                 <div onClick={() => router.push(`${prefixPath}all/filter?category=${category?.id}`)} className="cursor-pointer relative group rounded-md overflow-hidden shadow-md hover:shadow-lg block">
                   {/* Gambar */}
                   <Image
+                    priority={true}
                     placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                     alt="category"
                     width={2560}
diff --git a/components/landing-page/coverage.tsx b/components/landing-page/coverage.tsx
index d6721364..846435c0 100644
--- a/components/landing-page/coverage.tsx
+++ b/components/landing-page/coverage.tsx
@@ -229,6 +229,7 @@ const Coverage: React.FC = () => {
             >
               <div className="mb-1 flex items-center justify-center">
                 <Image
+                  priority={true}
                   placeholder={`data:image/svg+xml;base64,${toBase64(
                     shimmer(700, 475)
                   )}`}
diff --git a/components/landing-page/division.tsx b/components/landing-page/division.tsx
index a1705ac4..6da5f931 100644
--- a/components/landing-page/division.tsx
+++ b/components/landing-page/division.tsx
@@ -255,6 +255,7 @@ const Division = () => {
           >
             <div className="mb-1 flex items-center justify-center">
               <Image
+                priority={true}
                 placeholder={`data:image/svg+xml;base64,${toBase64(
                   shimmer(700, 475)
                 )}`}
diff --git a/components/landing-page/dynamic-logo-polda.tsx b/components/landing-page/dynamic-logo-polda.tsx
index 81429494..48326f5d 100644
--- a/components/landing-page/dynamic-logo-polda.tsx
+++ b/components/landing-page/dynamic-logo-polda.tsx
@@ -12,6 +12,7 @@ export const DynamicLogoPolda = () => {
     <div className="p-2">
       {pathname?.includes("/polda") && (
         <Image
+          priority={true}
           src={`/logo/polda/polda-${polda}.png`}
           alt="Logo"
           width={1920}
diff --git a/components/landing-page/dynamic-logo-satker.tsx b/components/landing-page/dynamic-logo-satker.tsx
index 4744ce9c..f225534f 100644
--- a/components/landing-page/dynamic-logo-satker.tsx
+++ b/components/landing-page/dynamic-logo-satker.tsx
@@ -11,6 +11,7 @@ export const DynamicLogoSatker = () => {
   return <div className="p-2">
       {pathname?.includes("/satker") && (
         <Image
+          priority={true}
           src={`/logo/satker/${satker?.toUpperCase()}.png`}
           alt="Logo"
           width={1920}
diff --git a/components/landing-page/event-calender.tsx b/components/landing-page/event-calender.tsx
index 575e7b6f..151e48ff 100644
--- a/components/landing-page/event-calender.tsx
+++ b/components/landing-page/event-calender.tsx
@@ -1,6 +1,7 @@
 import { getCalendarPagination } from "@/service/schedule/schedule";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { useTranslations } from "next-intl";
+import Image from "next/image";
 import { useParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
 
@@ -240,14 +241,10 @@ const EventCalender = () => {
                           : "bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700"
                       }`}
                     >
-                      <img
+                      <Image
                         src={event.thumbnailUrl || "/images/default-event.png"}
                         alt={event.title}
                         className="w-16 h-12 object-cover rounded flex-shrink-0"
-                        onError={(e) => {
-                          const target = e.target as HTMLImageElement;
-                          target.src = "/images/default-event.png";
-                        }}
                       />
                       <div className="ml-3 flex-1 min-w-0">
                         <div className="text-sm font-semibold text-gray-800 dark:text-gray-200 line-clamp-2">
diff --git a/components/landing-page/header-banner-satker.tsx b/components/landing-page/header-banner-satker.tsx
index 537f3767..fe43b4e1 100644
--- a/components/landing-page/header-banner-satker.tsx
+++ b/components/landing-page/header-banner-satker.tsx
@@ -118,6 +118,7 @@ const HeaderBannerSatker = () => {
                 <CarouselItem key={row?.id}>
                   <div className="relative h-[310px] lg:h-[420px]">
                     <Image
+                      priority={true}
                       src={row?.smallThumbnailLink}
                       alt=""
                       width={1920}
@@ -207,6 +208,7 @@ const HeaderBannerSatker = () => {
                 <li key={item?.id} className="flex gap-4 flex-row lg:w-full ">
                   <div className="flex-shrink-0 w-24 rounded-lg">
                     <Image
+                      priority={true}
                       width={720}
                       height={480}
                       src={item?.smallThumbnailLink}
diff --git a/components/landing-page/header-banner.tsx b/components/landing-page/header-banner.tsx
index 464fc081..87218f5e 100644
--- a/components/landing-page/header-banner.tsx
+++ b/components/landing-page/header-banner.tsx
@@ -98,7 +98,7 @@ const HeaderBanner = () => {
               {content?.map((row: any) => (
                 <CarouselItem key={row?.id}>
                   <div className="relative h-[310px] lg:h-[420px]">
-                    <Image src={row?.smallThumbnailLink} alt="" width={1920} height={1080} className="w-full h-[310px] lg:h-full rounded-lg object-cover" />
+                    <Image priority={true} src={row?.smallThumbnailLink} alt="" width={1920} height={1080} className="w-full h-[310px] lg:h-full rounded-lg object-cover" />
                     <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
                       <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{row?.categoryName}</span>
                       <div onClick={() => router.push(prefixPath + `/image/detail/${row?.slug}`)} className="cursor-pointer">
@@ -163,7 +163,7 @@ const HeaderBanner = () => {
               {content?.map((item: any) => (
                 <li key={item?.id} className="flex gap-4 flex-row lg:w-full ">
                   <div className="flex-shrink-0 w-24 rounded-lg">
-                    <Image width={720} height={480} src={item?.smallThumbnailLink} alt={item?.title} className="w-full h-[73px] object-cover rounded-lg" />
+                    <Image priority={true} width={720} height={480} src={item?.smallThumbnailLink} alt={item?.title} className="w-full h-[73px] object-cover rounded-lg" />
                   </div>
                   <div className="w-[280px] lg:w-auto">
                     <span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg flex text-[8px] font-bold uppercase w-fit">{item?.categoryName}</span>
diff --git a/components/landing-page/hero-new-polda.tsx b/components/landing-page/hero-new-polda.tsx
index 380b9053..c0392412 100644
--- a/components/landing-page/hero-new-polda.tsx
+++ b/components/landing-page/hero-new-polda.tsx
@@ -130,6 +130,7 @@ const HeroModal = ({
                 <SwiperSlide key={list?.id}>
                   <div className="relative h-[310px] lg:h-[420px]">
                     <Image
+                      priority={true}
                       src={list?.smallThumbnailLink}
                       alt="gambar-utama"
                       width={1920}
@@ -174,6 +175,7 @@ const HeroModal = ({
             ) : (
               <div className="flex items-center justify-center h-full">
                 <Image
+                  priority={true}
                   width={1920}
                   height={1080}
                   src="/assets/empty-data.png"
@@ -392,6 +394,7 @@ const HeroNewPolda = (props: { group?: string }) => {
                 <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}
@@ -438,6 +441,7 @@ const HeroNewPolda = (props: { group?: string }) => {
               <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)
                     )}`}
diff --git a/components/landing-page/hero-new-satker.tsx b/components/landing-page/hero-new-satker.tsx
index 6376b4b9..14a5a4c5 100644
--- a/components/landing-page/hero-new-satker.tsx
+++ b/components/landing-page/hero-new-satker.tsx
@@ -111,7 +111,7 @@ const HeroModal = ({ onClose, group, poldaName, satkerName }: HeroModalProps) =>
               heroData.map((list: any, index: number) => (
                 <SwiperSlide key={list?.id}>
                   <div className="relative h-[310px] lg:h-[420px]">
-                    <Image 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" />
+                    <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>
@@ -137,7 +137,7 @@ const HeroModal = ({ onClose, group, poldaName, satkerName }: HeroModalProps) =>
               ))
             ) : (
               <div className="flex items-center justify-center h-full">
-                <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                <Image priority={true} width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
               </div>
             )}
           </div>
@@ -298,7 +298,7 @@ const HeroNewSatker = (props: { group?: string }) => {
               {content?.map((list: any) => (
                 <CarouselItem key={list?.id}>
                   <div className="relative h-[310px] lg:h-[700px] mt-1">
-                    <Image 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
@@ -330,7 +330,7 @@ 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 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
diff --git a/components/landing-page/hero-new.tsx b/components/landing-page/hero-new.tsx
index df6a90af..375dcd96 100644
--- a/components/landing-page/hero-new.tsx
+++ b/components/landing-page/hero-new.tsx
@@ -163,6 +163,7 @@ const HeroModal = ({
                   ✕
                 </button>
                 <Image
+                  priority={true} 
                   src={list?.smallThumbnailLink}
                   alt="gambar-utama"
                   width={1920}
@@ -427,7 +428,7 @@ const HeroNew = (props: { group?: string }) => {
                   <div className="relative h-[310px] lg:h-[700px]">
                     {/* Gambar */}
                     <Image
-                      priority
+                      priority={true}
                       src={list?.smallThumbnailLink}
                       alt="gambar"
                       fill
@@ -478,7 +479,7 @@ const HeroNew = (props: { group?: string }) => {
               <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
+                    priority={true}
                     placeholder={`data:image/svg+xml;base64,${toBase64(
                       shimmer(700, 475)
                     )}`}
diff --git a/components/landing-page/hero.tsx b/components/landing-page/hero.tsx
index beb2074e..46459187 100644
--- a/components/landing-page/hero.tsx
+++ b/components/landing-page/hero.tsx
@@ -113,6 +113,7 @@ const HeroModal = ({ onClose }: { onClose: () => void }) => {
                   ✕
                 </button>
                 <Image
+                  priority={true} 
                   src={list?.smallThumbnailLink}
                   alt="gambar-utama "
                   width={1920}
@@ -182,6 +183,7 @@ const SurveyIntroModal = ({ onNext }: { onNext: () => void }) => {
         </button>
 
         <Image
+          priority={true} 
           src="/assets/survey.jpg"
           alt="Survey Illustration"
           width={300}
@@ -363,6 +365,7 @@ const Hero = (props: { group?: string }) => {
               <CarouselItem key={list?.id}>
                 <div className="relative h-[310px] lg:h-[460px] mt-1">
                   <Image
+                    priority={true} 
                     src={list?.smallThumbnailLink}
                     alt="gambar-utama"
                     width={1920}
@@ -515,6 +518,7 @@ const Hero = (props: { group?: string }) => {
                     >
                       <div className="flex-shrink-0 w-24 rounded-lg">
                         <Image
+                          priority={true} 
                           placeholder={`data:image/svg+xml;base64,${toBase64(
                             shimmer(700, 475)
                           )}`}
@@ -562,6 +566,7 @@ const Hero = (props: { group?: string }) => {
                   >
                     <div className="flex-shrink-0 w-24 rounded-lg">
                       <Image
+                        priority={true} 
                         placeholder={`data:image/svg+xml;base64,${toBase64(
                           shimmer(700, 475)
                         )}`}
diff --git a/components/landing-page/landing-polda-kaltara/contact-us-kaltara.tsx b/components/landing-page/landing-polda-kaltara/contact-us-kaltara.tsx
index a268df70..c7713ccb 100644
--- a/components/landing-page/landing-polda-kaltara/contact-us-kaltara.tsx
+++ b/components/landing-page/landing-polda-kaltara/contact-us-kaltara.tsx
@@ -54,7 +54,7 @@ const ContactUsKaltara = () => {
           {channels.map((channel, index) => (
             <Link key={index} href={channel.url} passHref>
               <div key={index} className="w-16 h-16 sm:w-[170px] sm:h-[80px] relative mx-auto">
-                <Image src={channel.logo} alt={channel.name} width={1920} height={1080} className="object-contain w-full h-full" />
+                <Image  priority={true} src={channel.logo} alt={channel.name} width={1920} height={1080} className="object-contain w-full h-full" />
               </div>
             </Link>
           ))}
@@ -65,7 +65,7 @@ const ContactUsKaltara = () => {
         <div className="flex flex-col md:flex-row items-start gap-4 lg:gap-44">
           {/* Logo */}
           <div className="flex flex-col items-center space-x-4">
-            <Image src="/assets/logo-humas-polri.png" alt="logo" width={1920} height={1080} className="h-[100px] lg:h-[200px] w-[100px] lg:w-[200px]" />
+            <Image  priority={true} src="/assets/logo-humas-polri.png" alt="logo" width={1920} height={1080} className="h-[100px] lg:h-[200px] w-[100px] lg:w-[200px]" />
             {/* <p className="text-[#bb3523] font-bold">Copyright @TribrataNews Kaltara</p> */}
           </div>
 
diff --git a/components/landing-page/landing-polda-kaltara/content-category-kaltara.tsx b/components/landing-page/landing-polda-kaltara/content-category-kaltara.tsx
index caa77efc..bb8005a8 100644
--- a/components/landing-page/landing-polda-kaltara/content-category-kaltara.tsx
+++ b/components/landing-page/landing-polda-kaltara/content-category-kaltara.tsx
@@ -102,6 +102,7 @@ const ContentCategoryKaltara = (props: { group?: string; type: string }) => {
                   <div onClick={() => router.push(prefixPath + `all/filter?category=${category?.id}`)} className="cursor-pointer relative group rounded-md overflow-hidden shadow-md hover:shadow-lg block">
                     {/* Gambar */}
                     <Image
+                      priority={true} 
                       placeholder={`data:image/svg+xml;base64,${toBase64(
                         shimmer(700, 475)
                       )}`}
diff --git a/components/landing-page/landing-polda-kaltara/header-banner-kaltara.tsx b/components/landing-page/landing-polda-kaltara/header-banner-kaltara.tsx
index 35a54fdb..b798853a 100644
--- a/components/landing-page/landing-polda-kaltara/header-banner-kaltara.tsx
+++ b/components/landing-page/landing-polda-kaltara/header-banner-kaltara.tsx
@@ -90,7 +90,7 @@ const HeaderBannerKaltara = () => {
                 {content?.map((row: any) => (
                   <CarouselItem key={row?.id}>
                     <div className="relative h-[310px] lg:h-[580px] overflow-hidden rounded-lg">
-                      <Image src={row?.smallThumbnailLink} alt="" width={1920} height={1080} className="w-full h-[540px] lg:h-full object-cover" />
+                      <Image  priority={true} src={row?.smallThumbnailLink} 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-[10px] lg:text-[14px] px-[10px] py-[5px]">{row?.categoryName}</span>
@@ -156,7 +156,7 @@ const HeaderBannerKaltara = () => {
                 {content?.map((item: any) => (
                   <li key={item?.id} className="flex gap-4 flex-row lg:w-full bg-[#f8f8f8] p-[10px] rounded-lg">
                     <div className="flex-shrink-0 w-24 rounded-lg">
-                      <Image width={720} height={480} src={item?.smallThumbnailLink} alt={item?.title} className="w-full h-[80px] object-cover rounded-lg" />
+                      <Image  priority={true} width={720} height={480} src={item?.smallThumbnailLink} alt={item?.title} className="w-full h-[80px] object-cover rounded-lg" />
                     </div>
                     <div className="w-[280px] lg:w-auto">
                       <span className="text-[#bb3523] border border-[#bb3523] bg-white px-4 py-1 rounded-lg flex text-[8px] font-sans font-semibold uppercase w-fit">{item?.categoryName}</span>
diff --git a/components/landing-page/landing-polda-kaltara/latest-content-kaltara.tsx b/components/landing-page/landing-polda-kaltara/latest-content-kaltara.tsx
index 379c426f..01f506cb 100644
--- a/components/landing-page/landing-polda-kaltara/latest-content-kaltara.tsx
+++ b/components/landing-page/landing-polda-kaltara/latest-content-kaltara.tsx
@@ -151,6 +151,7 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
                           <div onClick={() => router.push(prefixPath + `/image/detail/${image?.slug}`)} className="cursor-pointer relative group overflow-hidden shadow-md hover:shadow-lg">
                             {/* Gambar */}
                             <Image
+                              priority={true} 
                               placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                               alt="video"
                               width={2560}
@@ -177,7 +178,7 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
                   </Carousel>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image  priority={true} width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
                   </p>
                 )
               ) : selectedTab == "audio" ? (
@@ -215,7 +216,7 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
                   </Carousel>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image  priority={true} width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
                   </p>
                 )
               ) : selectedTab == "video" ? (
@@ -227,6 +228,7 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
                           <div onClick={() => router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group overflow-hidden shadow-md hover:shadow-lg">
                             {/* Gambar */}
                             <Image
+                              priority={true} 
                               placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                               alt="video"
                               width={2560}
@@ -253,7 +255,7 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
                   </Carousel>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image  priority={true} width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
                   </p>
                 )
               ) : content.length > 0 ? (
@@ -297,7 +299,7 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
                 </Carousel>
               ) : (
                 <p className="flex items-center justify-center">
-                  <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                  <Image priority={true} width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
                 </p>
               )}
             </div>
diff --git a/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara.tsx b/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara.tsx
index 352a88dc..8b29bcac 100644
--- a/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara.tsx
+++ b/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara.tsx
@@ -29,7 +29,7 @@ const NavbarKaltara = () => {
       <div className="flex items-center justify-between px-4 lg:px-20 py-4 gap-2">
         <div className="flex flex-row gap-8">
           <Link href={prefixPath} className="flex items-center">
-            <Image src="/assets/mediahub-logo.gif" alt="Media Hub Logo" width={200} height={300} className="object-contain" />
+            <Image priority={true} src="/assets/mediahub-logo.gif" alt="Media Hub Logo" width={200} height={300} className="object-contain" />
           </Link>
 
           <div className="hidden lg:flex items-center ml-2 gap-5">
@@ -137,12 +137,12 @@ const NavbarKaltara = () => {
 
         <div className="hidden lg:flex items-center gap-5">
           <Link href="/tbnews/polda-kaltara">
-            <Image src="/assets/polda/logo-tbnews.png" alt="logo" width={1920} height={1080} className="w-[110px] h-[50px]" />
+            <Image priority={true} src="/assets/polda/logo-tbnews.png" alt="logo" width={1920} height={1080} className="w-[110px] h-[50px]" />
           </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 " />
+              <Image priority={true} src="/assets/polriTv.png" width={100} height={120} alt="polritv" className="object-contain flex-auto " />
             </a>
           </div>
 
@@ -270,12 +270,12 @@ const NavbarKaltara = () => {
           <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">
-                <Image src="/assets/polda/logo-tbnews.png" alt="logo" width={1920} height={1080} className="w-[100px] h-[40px]" />
+                <Image priority={true} src="/assets/polda/logo-tbnews.png" alt="logo" width={1920} height={1080} className="w-[100px] h-[40px]" />
               </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 " />
+                  <Image priority={true} src="/assets/polriTv.png" width={100} height={120} alt="polritv" className="object-contain flex-auto " />
                 </a>
               </div>
 
diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx
index 9bea21a4..3880617b 100644
--- a/components/landing-page/navbar.tsx
+++ b/components/landing-page/navbar.tsx
@@ -211,6 +211,7 @@ const Navbar = () => {
         <div className="flex flex-row gap-2">
           <Link href={prefixPath} className="flex items-center">
             <Image
+              priority={true} 
               src="/assets/mediahub-logo.gif"
               alt="Media Hub Logo"
               width={2560}
@@ -374,6 +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} 
                 src="/assets/polriTv.png"
                 width={100}
                 height={120}
@@ -544,6 +546,7 @@ const Navbar = () => {
                           >
                             <div className="ml-4">
                               <Image
+                                priority={true} 
                                 src="/assets/avatar-profile.png"
                                 alt="avatar"
                                 width={5}
@@ -589,6 +592,7 @@ const Navbar = () => {
                           >
                             <div className="ml-4">
                               <Image
+                                priority={true} 
                                 src="/assets/avatar-profile.png"
                                 alt="..."
                                 width={5}
@@ -634,6 +638,7 @@ const Navbar = () => {
                   {detail !== undefined ? (
                     <div className="flex items-center gap-3 text-default-800">
                       <Image
+                        priority={true} 
                         src={"/assets/avatar-profile.png"}
                         alt={"Image"}
                         width={36}
@@ -772,6 +777,7 @@ const Navbar = () => {
                       <a className="" href={list.redirectUrl} key={list.id}>
                         <div className="">
                           <Image
+                            priority={true} 
                             src="/assets/avatar-profile.png"
                             alt="..."
                             width={5}
@@ -817,6 +823,7 @@ const Navbar = () => {
                       >
                         <div className="ml-4">
                           <Image
+                            priority={true} 
                             src="/assets/avatar-profile.png"
                             alt="..."
                             width={5}
@@ -859,6 +866,7 @@ const Navbar = () => {
                   {detail !== undefined ? (
                     <div className="flex items-center gap-3 text-default-800">
                       <Image
+                        priority={true} 
                         src={"/assets/avatar-profile.png"}
                         alt={"Image"}
                         width={36}
@@ -1184,6 +1192,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} 
                     src="/assets/polriTv.png"
                     width={100}
                     height={120}
@@ -1381,6 +1390,7 @@ const Navbar = () => {
                               >
                                 <div className="ml-4">
                                   <Image
+                                    priority={true} 
                                     width={5}
                                     height={10}
                                     src="/assets/avatar-profile.png"
@@ -1426,6 +1436,7 @@ const Navbar = () => {
                               >
                                 <div className="ml-4">
                                   <Image
+                                    priority={true} 
                                     width={5}
                                     height={10}
                                     src="/assets/avatar-profile.png"
@@ -1473,6 +1484,7 @@ const Navbar = () => {
                       {detail !== undefined ? (
                         <div className="flex items-center gap-3 text-default-800">
                           <Image
+                            priority={true} 
                             src={"/assets/avatar-profile.png"}
                             alt={"Image"}
                             width={36}
@@ -1614,6 +1626,7 @@ const Navbar = () => {
                           <a className="" href={list.redirectUrl} key={list.id}>
                             <div className="">
                               <Image
+                                priority={true} 
                                 width={5}
                                 height={10}
                                 src="/assets/avatar-profile.png"
@@ -1659,6 +1672,7 @@ const Navbar = () => {
                           >
                             <div className="ml-4">
                               <Image
+                                priority={true} 
                                 width={5}
                                 height={10}
                                 src="/assets/avatar-profile.png"
@@ -1704,6 +1718,7 @@ const Navbar = () => {
                       {detail !== undefined ? (
                         <div className="flex items-center gap-3 text-default-800">
                           <Image
+                            priority={true} 
                             src={"/assets/avatar-profile.png"}
                             alt={"Image"}
                             width={36}
diff --git a/components/landing-page/new-content.tsx b/components/landing-page/new-content.tsx
index 7e9d12fd..776b0c9f 100644
--- a/components/landing-page/new-content.tsx
+++ b/components/landing-page/new-content.tsx
@@ -210,6 +210,7 @@ const NewContent = (props: { group: string; type: string }) => {
                               transition={{ duration: 0.3 }}
                             >
                               <Image
+                                priority={true} 
                                 placeholder={`data:image/svg+xml;base64,${toBase64(
                                   shimmer(700, 475)
                                 )}`}
@@ -291,6 +292,7 @@ const NewContent = (props: { group: string; type: string }) => {
                 ) : (
                   <p className="flex items-center justify-center">
                     <Image
+                      priority={true} 
                       width={1920}
                       height={1080}
                       src="/assets/empty-data.png"
@@ -371,6 +373,7 @@ const NewContent = (props: { group: string; type: string }) => {
                 ) : (
                   <p className="flex items-center justify-center">
                     <Image
+                      priority={true} 
                       width={1920}
                       height={1080}
                       src="/assets/empty-data.png"
@@ -403,6 +406,7 @@ const NewContent = (props: { group: string; type: string }) => {
                               transition={{ duration: 0.3 }}
                             >
                               <Image
+                                priority={true} 
                                 placeholder={`data:image/svg+xml;base64,${toBase64(
                                   shimmer(700, 475)
                                 )}`}
@@ -480,6 +484,7 @@ const NewContent = (props: { group: string; type: string }) => {
                 ) : (
                   <p className="flex items-center justify-center">
                     <Image
+                      priority={true} 
                       width={1920}
                       height={1080}
                       src="/assets/empty-data.png"
@@ -576,6 +581,7 @@ const NewContent = (props: { group: string; type: string }) => {
               ) : (
                 <p className="flex items-center justify-center">
                   <Image
+                    priority={true} 
                     width={1920}
                     height={1080}
                     src="/assets/empty-data.png"
diff --git a/components/landing-page/polda-logo.tsx b/components/landing-page/polda-logo.tsx
index 7ebd5434..4e62ccbe 100644
--- a/components/landing-page/polda-logo.tsx
+++ b/components/landing-page/polda-logo.tsx
@@ -49,7 +49,7 @@ export default function PoldaLogo() {
 
   return (
     <div className="flex justify-center items-center my-6">
-      <Image src={logoSrc} alt={region?.name || "Logo Polda"} width={128} height={128} className="object-contain" priority />
+      <Image  priority={true} src={logoSrc} alt={region?.name || "Logo Polda"} width={128} height={128} className="object-contain" />
     </div>
   );
 }
diff --git a/components/landing-page/search-section-new.tsx b/components/landing-page/search-section-new.tsx
index 09599778..d1729b4d 100644
--- a/components/landing-page/search-section-new.tsx
+++ b/components/landing-page/search-section-new.tsx
@@ -196,6 +196,7 @@ const ScrollableContent = () => {
                       }
                     >
                       <Image
+                        priority={true} 
                         src={item?.smallThumbnailLink}
                         alt={item?.title}
                         layout="fill"
@@ -312,6 +313,7 @@ const ScrollableContent = () => {
                       }
                     >
                       <Image
+                        priority={true} 
                         src={item?.smallThumbnailLink}
                         alt={item?.title}
                         layout="fill"