From fc539c66f7b6138386621a52cc8b2379890357c3 Mon Sep 17 00:00:00 2001
From: Rama Priyanto <priyantorama12@gmail.com>
Date: Wed, 26 Feb 2025 15:34:45 +0700
Subject: [PATCH] fixing landing

---
 app/layout.tsx                                |   2 +-
 app/page.tsx                                  |  14 +-
 .../master-user-level-form.tsx                |  14 +-
 components/icons.tsx                          |  37 +-
 components/landing/HeaderNews.tsx             |  17 +-
 components/landing/MedolUpdate.tsx            | 483 ++++++++++--------
 components/landing/drawer.tsx                 | 108 ++++
 components/layout/humas-layout.tsx            |   4 +-
 components/layout/navbar/NavbarHumas.tsx      | 401 +++++++++++----
 components/main/detail/comment.tsx            |   2 +-
 components/main/detail/new-detail.tsx         |   8 +-
 components/page/detail-news.tsx               |  29 +-
 components/page/related-news.tsx              |   9 +-
 components/page/sidebar-detail.tsx            |  49 +-
 14 files changed, 783 insertions(+), 394 deletions(-)
 create mode 100644 components/landing/drawer.tsx

diff --git a/app/layout.tsx b/app/layout.tsx
index afa9996..ea6067e 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -70,7 +70,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
         className={clsx("bg-background font-sans antialiased", inter.className)}
       >
         <NextIntlClientProvider locale={localeNow} messages={messages}>
-          <Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
+          <Providers themeProps={{ attribute: "class", defaultTheme: "light" }}>
             <main className="">{children}</main>
           </Providers>
         </NextIntlClientProvider>
diff --git a/app/page.tsx b/app/page.tsx
index fe71c97..609fe6b 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,9 +2,12 @@
 import BannerHumasNew from "@/components/landing/banner-new";
 import BannerHumas from "@/components/landing/BannerHumas";
 import BodyLayout from "@/components/landing/BodyLayout";
+import AnalyticDrawer from "@/components/landing/drawer";
+import FooterNew from "@/components/landing/footer-new";
 import HeaderNews from "@/components/landing/HeaderNews";
+import NewsTicker from "@/components/landing/NewsTicker";
 import { HumasLayout } from "@/components/layout/humas-layout";
-import { useEffect, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 
 export default function Home() {
   const [hasMounted, setHasMounted] = useState(false);
@@ -18,11 +21,16 @@ export default function Home() {
 
   return (
     <>
-      <HumasLayout>
+      <section className="flex flex-col">
+        <NewsTicker />
+        <AnalyticDrawer />
         <BannerHumasNew />
         <HeaderNews />
         <BodyLayout />
-      </HumasLayout>
+        <Suspense>
+          <FooterNew />
+        </Suspense>
+      </section>
     </>
   );
 }
diff --git a/components/form/master/master-user-level/master-user-level-form.tsx b/components/form/master/master-user-level/master-user-level-form.tsx
index ed2bd9a..d0594f7 100644
--- a/components/form/master/master-user-level/master-user-level-form.tsx
+++ b/components/form/master/master-user-level/master-user-level-form.tsx
@@ -289,13 +289,6 @@ export default function CreateMasterUserLevelForm() {
         {errors?.name && (
           <p className="text-red-400 text-sm mb-3">{errors.name?.message}</p>
         )}
-
-        <p className="text-sm mt-3">Need Approval</p>
-        <Switch isSelected={needApproval} onValueChange={setNeedApproval}>
-          <p className="text-sm text-black">
-            {needApproval ? "Active" : "Inactive"}
-          </p>
-        </Switch>
         {findSelectedLevel(selectedGroup)?.level === 3 && (
           <>
             <p className="text-sm mt-3">Parent</p>
@@ -319,6 +312,13 @@ export default function CreateMasterUserLevelForm() {
           </>
         )}
 
+        <p className="text-sm mt-3">Need Approval</p>
+        <Switch isSelected={needApproval} onValueChange={setNeedApproval}>
+          <p className="text-sm text-black">
+            {needApproval ? "Active" : "Inactive"}
+          </p>
+        </Switch>
+
         <div className="flex flex-row gap-3 mt-5">
           <Button
             color="primary"
diff --git a/components/icons.tsx b/components/icons.tsx
index fa13b3d..08bcdfd 100644
--- a/components/icons.tsx
+++ b/components/icons.tsx
@@ -427,11 +427,11 @@ export const IgIcon = ({
     width={size || width}
     height={size || height}
     viewBox="0 0 30 30"
-    fill="none"
+    fill="currentColor"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
-    <rect width="30" height="30" rx="8" fill="white" />
+    <rect width="30" height="30" rx="8" fill="currentColor" />
     <path
       d="M15.0037 10.957C12.7678 10.957 10.9643 12.7605 10.9643 14.9965C10.9643 17.2324 12.7678 19.0359 15.0037 19.0359C17.2396 19.0359 19.0432 17.2324 19.0432 14.9965C19.0432 12.7605 17.2396 10.957 15.0037 10.957ZM15.0037 17.6226C13.5588 17.6226 12.3775 16.4449 12.3775 14.9965C12.3775 13.548 13.5553 12.3703 15.0037 12.3703C16.4521 12.3703 17.6299 13.548 17.6299 14.9965C17.6299 16.4449 16.4486 17.6226 15.0037 17.6226ZM20.1506 10.7918C20.1506 11.3156 19.7287 11.734 19.2084 11.734C18.6846 11.734 18.2662 11.3121 18.2662 10.7918C18.2662 10.2715 18.6881 9.8496 19.2084 9.8496C19.7287 9.8496 20.1506 10.2715 20.1506 10.7918ZM22.826 11.748C22.7662 10.4859 22.4779 9.36796 21.5533 8.44686C20.6322 7.52577 19.5143 7.23749 18.2521 7.17421C16.9514 7.10038 13.0525 7.10038 11.7518 7.17421C10.4932 7.23397 9.3752 7.52225 8.45059 8.44335C7.52598 9.36444 7.24121 10.4824 7.17793 11.7445C7.1041 13.0453 7.1041 16.9441 7.17793 18.2449C7.2377 19.507 7.52598 20.625 8.45059 21.5461C9.3752 22.4672 10.4896 22.7555 11.7518 22.8187C13.0525 22.8926 16.9514 22.8926 18.2521 22.8187C19.5143 22.759 20.6322 22.4707 21.5533 21.5461C22.4744 20.625 22.7627 19.507 22.826 18.2449C22.8998 16.9441 22.8998 13.0488 22.826 11.748ZM21.1455 19.6406C20.8713 20.3297 20.3404 20.8605 19.6479 21.1383C18.6107 21.5496 16.1498 21.4547 15.0037 21.4547C13.8576 21.4547 11.3932 21.5461 10.3596 21.1383C9.67051 20.864 9.13965 20.3332 8.86191 19.6406C8.45059 18.6035 8.54551 16.1426 8.54551 14.9965C8.54551 13.8504 8.4541 11.3859 8.86191 10.3523C9.13613 9.66327 9.66699 9.13241 10.3596 8.85468C11.3967 8.44335 13.8576 8.53827 15.0037 8.53827C16.1498 8.53827 18.6143 8.44686 19.6479 8.85468C20.3369 9.12889 20.8678 9.65975 21.1455 10.3523C21.5568 11.3894 21.4619 13.8504 21.4619 14.9965C21.4619 16.1426 21.5568 18.607 21.1455 19.6406Z"
       fill="#C922D8"
@@ -480,10 +480,10 @@ export const YtIcon = ({
     width={size || width}
     height={size || height}
     viewBox="0 0 30 30"
-    fill="none"
+    fill="currentColor"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <rect width="30" height="30" rx="8" fill="white" />
+    <rect width="30" height="30" rx="8" fill="currentColor" />
     <g clipPath="url(#clip0_214_10)">
       <path
         d="M23.1769 10.8776C22.9806 10.1385 22.4023 9.55647 21.668 9.35894C20.337 9 15.0001 9 15.0001 9C15.0001 9 9.66327 9 8.3323 9.35894C7.59802 9.5565 7.0197 10.1385 6.82342 10.8776C6.4668 12.2172 6.4668 15.0121 6.4668 15.0121C6.4668 15.0121 6.4668 17.8071 6.82342 19.1467C7.0197 19.8857 7.59802 20.4435 8.3323 20.6411C9.66327 21 15.0001 21 15.0001 21C15.0001 21 20.337 21 21.668 20.6411C22.4023 20.4435 22.9806 19.8857 23.1769 19.1467C23.5335 17.8071 23.5335 15.0121 23.5335 15.0121C23.5335 15.0121 23.5335 12.2172 23.1769 10.8776ZM13.2547 17.5497V12.4745L17.7153 15.0122L13.2547 17.5497Z"
@@ -617,10 +617,10 @@ export const TwIcon = ({
     width={size || width}
     height={size || height}
     viewBox="0 0 30 30"
-    fill="none"
+    fill="currentColor"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <rect width="30" height="30" rx="8" fill="white" />
+    <rect width="30" height="30" rx="8" fill="currentColor" />
     <path
       fill="black"
       d="M10.488 14.651L15.25 21h7l-7.858-10.478L20.93 3h-2.65l-5.117 5.886L8.75 3h-7l7.51 10.015L2.32 21h2.65zM16.25 19L5.75 5h2l10.5 14z"
@@ -640,10 +640,11 @@ export const TtIcon = ({
     width={size || width}
     height={size || height}
     viewBox="0 0 30 30"
-    fill="none"
+    fill="currentColor"
     xmlns="http://www.w3.org/2000/svg"
+    {...props}
   >
-    <rect width="30" height="30" rx="8" fill="white" />
+    <rect width="30" height="30" rx="8" fill="currentColor" />
     <g clipPath="url(#clip0_214_17)">
       <path
         d="M22.8748 13.3796C21.3271 13.3834 19.8173 12.9007 18.5587 11.9998V18.2829C18.5583 19.4466 18.2026 20.5824 17.5392 21.5385C16.8758 22.4946 15.9363 23.2254 14.8464 23.6332C13.7565 24.0409 12.568 24.1062 11.44 23.8203C10.312 23.5344 9.29811 22.9109 8.53398 22.0332C7.76986 21.1555 7.2919 20.0655 7.16401 18.9088C7.03613 17.7522 7.2644 16.584 7.81833 15.5606C8.37225 14.5372 9.22541 13.7073 10.2637 13.1818C11.3021 12.6564 12.4761 12.4605 13.6287 12.6203V15.7805C13.1013 15.6146 12.5349 15.6196 12.0104 15.7947C11.4859 15.9699 11.0303 16.3064 10.7084 16.756C10.3866 17.2056 10.215 17.7455 10.2183 18.2984C10.2215 18.8513 10.3994 19.3891 10.7265 19.8349C11.0537 20.2807 11.5133 20.6118 12.0398 20.7808C12.5663 20.9498 13.1327 20.9481 13.6582 20.776C14.1836 20.6039 14.6413 20.2701 14.9658 19.8224C15.2903 19.3747 15.465 18.8358 15.4649 18.2829V6H18.5587C18.5565 6.26126 18.5784 6.52216 18.6241 6.77941C18.7316 7.35368 18.9551 7.89999 19.281 8.38491C19.6069 8.86983 20.0283 9.28317 20.5194 9.59965C21.2181 10.0616 22.0372 10.3079 22.8748 10.3077V13.3796Z"
@@ -2581,3 +2582,23 @@ export const LandingPlayStoreIcon = ({
     />
   </svg>
 );
+export const LandingAnalyticIcon = ({
+  size,
+  height = 24,
+  width = 24,
+  fill = "currentColor",
+  ...props
+}: IconSvgProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size || width}
+    height={size || height}
+    {...props}
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2M9 17H7v-7h2zm4 0h-2V7h2zm4 0h-2v-4h2z"
+    />
+  </svg>
+);
diff --git a/components/landing/HeaderNews.tsx b/components/landing/HeaderNews.tsx
index 19a334b..66aa053 100644
--- a/components/landing/HeaderNews.tsx
+++ b/components/landing/HeaderNews.tsx
@@ -66,7 +66,7 @@ export default function HeaderNews() {
   return (
     <div className="w-full">
       <div className="flex flex-col lg:flex-row gap-3 lg:gap-8 bg-white dark:bg-black  p-1 lg:p-8 lg:h-[55vh] w-full lg:w-[75%] lg:mx-auto">
-        <div className="lg:hidden w-[90%] h-[40vh] mx-auto">
+        <div className="lg:hidden w-[90%] h-[300px] mx-auto">
           {article ? (
             <Swiper
               centeredSlides={true}
@@ -96,7 +96,10 @@ export default function HeaderNews() {
             >
               {article?.map((newsItem: any, index: number) => (
                 <SwiperSlide key={newsItem?.id}>
-                  <Card isFooterBlurred radius="lg" className="border-none">
+                  <Card
+                    radius="lg"
+                    className="border-none rounded-xl shadow-none"
+                  >
                     <Image
                       width={720}
                       height={480}
@@ -106,22 +109,22 @@ export default function HeaderNews() {
                           ? "/no-image.jpg"
                           : newsItem?.thumbnailUrl
                       }
-                      className="w-full h-[100px] object-cover"
+                      className="w-[90%] !h-[200px] object-cover"
                     />
 
-                    <CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
+                    <CardFooter className="before:bg-white/10 border-gray-100 border-1 rounded-b-xl shadow-sm bottom-1 w-full">
                       <div className="text-black dark:text-white">
                         <Link
                           href={`news/detail/${newsItem.id}-${newsItem?.slug}`}
                         >
-                          <p className="text-left font-semibold">
+                          <p className="text-left font-semibold text-sm">
                             {textEllipsis(newsItem.title, 40)}
                           </p>
                         </Link>
-                        <p className="py-[2px] text-left text-sm">
+                        <p className="py-[2px] text-left text-xs">
                           {convertDateFormat(newsItem.createdAt)} WIB
                         </p>
-                        <p className="flex items-center gap-1 text-sm">
+                        <p className="flex items-center gap-1 text-xs">
                           <EyeIcon className="text-black dark:text-white" />
                           {newsItem.viewCount === null ? 0 : newsItem.viewCount}
                         </p>
diff --git a/components/landing/MedolUpdate.tsx b/components/landing/MedolUpdate.tsx
index 63171bb..88a25f2 100644
--- a/components/landing/MedolUpdate.tsx
+++ b/components/landing/MedolUpdate.tsx
@@ -4,6 +4,7 @@ import {
   CardBody,
   CardFooter,
   Image,
+  Spinner,
   Tab,
   Tabs,
 } from "@heroui/react";
@@ -130,236 +131,272 @@ export default function MedolUpdate() {
           onSelectionChange={setSelectedTab}
         >
           <Tab key="mediahub" title="MediaHUB Update">
-            <Swiper
-              navigation={true}
-              modules={[Navigation, Pagination]}
-              spaceBetween={40}
-              slidesPerView={1}
-              breakpoints={{
-                // When the window width is less than 640px
-                720: {
-                  slidesPerView: 3, // Set slidesPerView to 1 on mobile
-                },
-                1080: {
-                  slidesPerView: 4,
-                },
-              }}
-              pagination={true}
-              className="mySwiper"
-              onSwiper={(swiper) => {
-                swiper.navigation.nextEl?.classList.add(
-                  "bg-white/70",
-                  "!text-black",
-                  "rounded-full",
-                  "!w-[40px]",
-                  "!h-[40px]"
-                );
-                swiper.navigation.prevEl?.classList.add(
-                  "bg-white/70",
-                  "!text-black",
-                  "rounded-full",
-                  "!w-[40px]",
-                  "!h-[40px]"
-                );
-              }}
-            >
-              {mediahubUpdate?.map((newsItem: any) => (
-                <SwiperSlide key={newsItem.title}>
-                  <Link href={newsItem?.pageUrl} target="_blank">
-                    <Card
-                      isPressable
-                      shadow="sm"
-                      className=" bg-white text-black border-2 w-full"
-                    >
-                      <CardBody className="overflow-visible p-0">
-                        <Image
-                          radius="lg"
-                          width="300%"
-                          alt="tes"
-                          className="object-cover !h-[20vh]"
-                          src={newsItem.thumbnailLink}
-                        />
-                      </CardBody>
-                      <CardFooter className="flex flex-col items-start text-left">
-                        <p className="text-xs">
-                          {formatDate(newsItem?.createdAt)}
-                        </p>
-                        <b className="text-sm">
-                          {textEllipsis(newsItem?.title, 50)}
-                        </b>
-                      </CardFooter>
-                    </Card>
-                  </Link>
-                </SwiperSlide>
-              ))}
-            </Swiper>
-            <div className="text-center pt-6">
-              <Link href="https://mediahub.polri.go.id" target="_blank">
-                <Button
-                  className="bg-white text-[#bb3523] font-bold w-56"
-                  size="sm"
-                  color="danger"
-                  variant="bordered"
+            {mediahubUpdate.length > 1 ? (
+              <>
+                <Swiper
+                  navigation={true}
+                  modules={[Navigation]}
+                  spaceBetween={40}
+                  slidesPerView={1}
+                  breakpoints={{
+                    // When the window width is less than 640px
+                    720: {
+                      slidesPerView: 3, // Set slidesPerView to 1 on mobile
+                    },
+                    1080: {
+                      slidesPerView: 4,
+                    },
+                  }}
+                  pagination={true}
+                  className="mySwiper"
+                  onSwiper={(swiper) => {
+                    swiper.navigation.nextEl?.classList.add(
+                      "bg-white/70",
+                      "!text-black",
+                      "rounded-full",
+                      "!w-[40px]",
+                      "!h-[40px]"
+                    );
+                    swiper.navigation.prevEl?.classList.add(
+                      "bg-white/70",
+                      "!text-black",
+                      "rounded-full",
+                      "!w-[40px]",
+                      "!h-[40px]"
+                    );
+                  }}
                 >
-                  {t("lebihBanyak")}
-                </Button>
-              </Link>
-            </div>
+                  {mediahubUpdate?.map((newsItem: any) => (
+                    <SwiperSlide
+                      key={newsItem.title}
+                      className="hover:shadow-xl hover:opacity-90"
+                    >
+                      <Link href={newsItem?.pageUrl} target="_blank">
+                        <Card
+                          isPressable
+                          shadow="sm"
+                          className=" bg-white text-black border-2 w-full"
+                        >
+                          <CardBody className="overflow-visible p-0">
+                            <Image
+                              radius="lg"
+                              width="300%"
+                              alt="tes"
+                              className="object-cover !h-[20vh]"
+                              src={newsItem.thumbnailLink}
+                            />
+                          </CardBody>
+                          <CardFooter className="flex flex-col items-start text-left">
+                            <p className="text-xs">
+                              {formatDate(newsItem?.createdAt)}
+                            </p>
+                            <b className="text-sm">
+                              {textEllipsis(newsItem?.title, 50)}
+                            </b>
+                          </CardFooter>
+                        </Card>
+                      </Link>
+                    </SwiperSlide>
+                  ))}
+                </Swiper>
+                <div className="text-center pt-6">
+                  <Link href="https://mediahub.polri.go.id" target="_blank">
+                    <Button
+                      className="bg-white text-[#bb3523] font-bold w-56"
+                      size="sm"
+                      color="danger"
+                      variant="bordered"
+                    >
+                      {t("lebihBanyak")}
+                    </Button>
+                  </Link>
+                </div>
+              </>
+            ) : (
+              <div className="w-full flex justify-center items-center">
+                <Spinner size="lg" className="mx-auto" color="default" />
+              </div>
+            )}
           </Tab>
           <Tab key="tbnews" title="Tribrata News Update">
-            <Swiper
-              navigation={true}
-              modules={[Navigation, Pagination]}
-              spaceBetween={40}
-              slidesPerView={1}
-              breakpoints={{
-                // When the window width is less than 640px
-                720: {
-                  slidesPerView: 3, // Set slidesPerView to 1 on mobile
-                },
-                1080: {
-                  slidesPerView: 4,
-                },
-              }}
-              pagination={true}
-              className="mySwiper"
-              onSwiper={(swiper) => {
-                swiper.navigation.nextEl?.classList.add(
-                  "bg-white/70",
-                  "!text-black",
-                  "rounded-full",
-                  "!w-[40px]",
-                  "!h-[40px]"
-                );
-                swiper.navigation.prevEl?.classList.add(
-                  "bg-white/70",
-                  "!text-black",
-                  "rounded-full",
-                  "!w-[40px]",
-                  "!h-[40px]"
-                );
-              }}
-            >
-              {tbnUpdate?.map((newsItem: any) => (
-                <SwiperSlide key={newsItem.title}>
-                  <Link href={newsItem?.source_url} target="_blank">
-                    <Card
-                      isPressable
-                      shadow="sm"
-                      className=" bg-white text-black border-2 w-full"
-                    >
-                      <CardBody className="overflow-visible p-0">
-                        <Image
-                          radius="lg"
-                          width="300%"
-                          alt="tes"
-                          className="object-cover !h-[20vh]"
-                          src={newsItem?.image}
-                        />
-                      </CardBody>
-                      <CardFooter className="flex flex-col items-start text-left">
-                        {/* {convertDateFormatNoTime(newsItem?.date)} */}
-                        <p className="text-xs">{formatDate(newsItem?.date)}</p>
-                        <b className="text-sm">
-                          {textEllipsis(newsItem?.title, 50)}
-                        </b>
-                      </CardFooter>
-                    </Card>
-                  </Link>
-                </SwiperSlide>
-              ))}
-            </Swiper>
-            <div className="text-center pt-6">
-              <Link href="https://tribratanews.polri.go.id" target="_blank">
-                <Button
-                  className="bg-white text-[#bb3523] font-bold w-56"
-                  size="sm"
-                  color="danger"
-                  variant="bordered"
+            {tbnUpdate.length > 1 ? (
+              <>
+                {" "}
+                <Swiper
+                  navigation={true}
+                  modules={[Navigation]}
+                  spaceBetween={40}
+                  slidesPerView={1}
+                  breakpoints={{
+                    // When the window width is less than 640px
+                    720: {
+                      slidesPerView: 3, // Set slidesPerView to 1 on mobile
+                    },
+                    1080: {
+                      slidesPerView: 4,
+                    },
+                  }}
+                  pagination={true}
+                  className="mySwiper"
+                  onSwiper={(swiper) => {
+                    swiper.navigation.nextEl?.classList.add(
+                      "bg-white/70",
+                      "!text-black",
+                      "rounded-full",
+                      "!w-[40px]",
+                      "!h-[40px]"
+                    );
+                    swiper.navigation.prevEl?.classList.add(
+                      "bg-white/70",
+                      "!text-black",
+                      "rounded-full",
+                      "!w-[40px]",
+                      "!h-[40px]"
+                    );
+                  }}
                 >
-                  {t("lebihBanyak")}
-                </Button>
-              </Link>
-            </div>
+                  {tbnUpdate?.map((newsItem: any) => (
+                    <SwiperSlide
+                      key={newsItem.title}
+                      className="hover:shadow-xl hover:opacity-90"
+                    >
+                      <Link href={newsItem?.source_url} target="_blank">
+                        <Card
+                          isPressable
+                          shadow="sm"
+                          className=" bg-white text-black border-2 w-full"
+                        >
+                          <CardBody className="overflow-visible p-0">
+                            <Image
+                              radius="lg"
+                              width="300%"
+                              alt="tes"
+                              className="object-cover !h-[20vh]"
+                              src={newsItem?.image}
+                            />
+                          </CardBody>
+                          <CardFooter className="flex flex-col items-start text-left">
+                            {/* {convertDateFormatNoTime(newsItem?.date)} */}
+                            <p className="text-xs">
+                              {formatDate(newsItem?.date)}
+                            </p>
+                            <b className="text-sm">
+                              {textEllipsis(newsItem?.title, 50)}
+                            </b>
+                          </CardFooter>
+                        </Card>
+                      </Link>
+                    </SwiperSlide>
+                  ))}
+                </Swiper>
+                <div className="text-center pt-6">
+                  <Link href="https://tribratanews.polri.go.id" target="_blank">
+                    <Button
+                      className="bg-white text-[#bb3523] font-bold w-56"
+                      size="sm"
+                      color="danger"
+                      variant="bordered"
+                    >
+                      {t("lebihBanyak")}
+                    </Button>
+                  </Link>
+                </div>
+              </>
+            ) : (
+              <div className="w-full flex justify-center items-center">
+                <Spinner size="lg" className="mx-auto" color="default" />
+              </div>
+            )}
           </Tab>
           <Tab key="inp" title="Indonesia Nasional Police Update">
-            <Swiper
-              navigation={true}
-              modules={[Navigation, Pagination]}
-              spaceBetween={40}
-              slidesPerView={1}
-              breakpoints={{
-                // When the window width is less than 640px
-                720: {
-                  slidesPerView: 3, // Set slidesPerView to 1 on mobile
-                },
-                1080: {
-                  slidesPerView: 4,
-                },
-              }}
-              pagination={true}
-              className="mySwiper"
-              onSwiper={(swiper) => {
-                swiper.navigation.nextEl?.classList.add(
-                  "bg-white/70",
-                  "!text-black",
-                  "rounded-full",
-                  "!w-[40px]",
-                  "!h-[40px]"
-                );
-                swiper.navigation.prevEl?.classList.add(
-                  "bg-white/70",
-                  "!text-black",
-                  "rounded-full",
-                  "!w-[40px]",
-                  "!h-[40px]"
-                );
-              }}
-            >
-              {inpUpdate?.map((newsItem: any) => (
-                <SwiperSlide key={newsItem?.slug}>
-                  <Link
-                    href={`https://inp.polri.go.id/artikel/${newsItem?.slug}`}
-                    target="_blank"
-                  >
-                    <Card
-                      isPressable
-                      shadow="sm"
-                      className=" bg-white text-black border-2 w-full"
-                    >
-                      <CardBody className="overflow-visible p-0">
-                        <Image
-                          radius="lg"
-                          width="300%"
-                          alt="tes"
-                          className="object-cover !h-[20vh]"
-                          src={newsItem?.thumbnail}
-                        />
-                      </CardBody>
-                      <CardFooter className="flex flex-col items-start text-left">
-                        {/* {newsItem?.created_at} */}
-                        <p className="text-xs">{newsItem?.created_at}</p>
-                        <b className="text-sm">
-                          {textEllipsis(newsItem?.judul, 50)}
-                        </b>
-                      </CardFooter>
-                    </Card>
-                  </Link>
-                </SwiperSlide>
-              ))}
-            </Swiper>
-            <div className="text-center pt-6">
-              <a href="https://inp.polri.go.id/" target="_blank">
-                <Button
-                  className="bg-white text-[#bb3523] font-bold w-56"
-                  size="sm"
-                  color="danger"
-                  variant="bordered"
+            {inpUpdate.length > 1 ? (
+              <>
+                <Swiper
+                  navigation={true}
+                  modules={[Navigation]}
+                  spaceBetween={40}
+                  slidesPerView={1}
+                  breakpoints={{
+                    // When the window width is less than 640px
+                    720: {
+                      slidesPerView: 3, // Set slidesPerView to 1 on mobile
+                    },
+                    1080: {
+                      slidesPerView: 4,
+                    },
+                  }}
+                  pagination={true}
+                  className="mySwiper"
+                  onSwiper={(swiper) => {
+                    swiper.navigation.nextEl?.classList.add(
+                      "bg-white/70",
+                      "!text-black",
+                      "rounded-full",
+                      "!w-[40px]",
+                      "!h-[40px]"
+                    );
+                    swiper.navigation.prevEl?.classList.add(
+                      "bg-white/70",
+                      "!text-black",
+                      "rounded-full",
+                      "!w-[40px]",
+                      "!h-[40px]"
+                    );
+                  }}
                 >
-                  {t("lebihBanyak")}
-                </Button>
-              </a>
-            </div>
+                  {inpUpdate?.map((newsItem: any) => (
+                    <SwiperSlide
+                      key={newsItem?.slug}
+                      className="hover:shadow-xl hover:opacity-90"
+                    >
+                      <Link
+                        href={`https://inp.polri.go.id/artikel/${newsItem?.slug}`}
+                        target="_blank"
+                      >
+                        <Card
+                          isPressable
+                          shadow="sm"
+                          className=" bg-white text-black border-2 w-full"
+                        >
+                          <CardBody className="overflow-visible p-0">
+                            <Image
+                              radius="lg"
+                              width="300%"
+                              alt="tes"
+                              className="object-cover !h-[20vh]"
+                              src={newsItem?.thumbnail}
+                            />
+                          </CardBody>
+                          <CardFooter className="flex flex-col items-start text-left">
+                            {/* {newsItem?.created_at} */}
+                            <p className="text-xs">{newsItem?.created_at}</p>
+                            <b className="text-sm">
+                              {textEllipsis(newsItem?.judul, 50)}
+                            </b>
+                          </CardFooter>
+                        </Card>
+                      </Link>
+                    </SwiperSlide>
+                  ))}
+                </Swiper>
+                <div className="text-center pt-6">
+                  <a href="https://inp.polri.go.id/" target="_blank">
+                    <Button
+                      className="bg-white text-[#bb3523] font-bold w-56"
+                      size="sm"
+                      color="danger"
+                      variant="bordered"
+                    >
+                      {t("lebihBanyak")}
+                    </Button>
+                  </a>
+                </div>
+              </>
+            ) : (
+              <div className="w-full flex justify-center items-center">
+                <Spinner size="lg" className="mx-auto" color="default" />
+              </div>
+            )}
           </Tab>
           <Tab key="polritv" title="Polri TV Update">
             <div className="w-full">
diff --git a/components/landing/drawer.tsx b/components/landing/drawer.tsx
new file mode 100644
index 0000000..49bc072
--- /dev/null
+++ b/components/landing/drawer.tsx
@@ -0,0 +1,108 @@
+import { Button } from "@heroui/button";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+} from "@heroui/drawer";
+import { useDisclosure } from "@heroui/react";
+import { ChevronDownIcon, LandingAnalyticIcon, UserIcon } from "../icons";
+import { MasterUsersIcon } from "../icons/sidebar-icon";
+import Image from "next/image";
+export default function AnalyticDrawer() {
+  const { isOpen, onOpen, onOpenChange } = useDisclosure();
+
+  return (
+    <>
+      <div className="fixed bottom-1/3 -translate-y-1/2 right-4 lg:right-9 z-50">
+        <Button
+          className="rotate-90 origin-right rounded-b-md rounded-t-none flex flex-row items-center gap-2 text-white bg-red-600 font-semibold"
+          onPress={onOpen}
+        >
+          <div className="bg-red-950 p-1 rounded-full">
+            <ChevronDownIcon size={12} />
+          </div>{" "}
+          Statistik Kunjungan
+        </Button>
+      </div>
+      <Drawer
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+        motionProps={{
+          variants: {
+            enter: {
+              opacity: 1,
+              x: 0,
+            },
+            exit: {
+              x: 100,
+              opacity: 0,
+            },
+          },
+        }}
+        className="h-[540px] bg-[#BE0106] text-white"
+        size="sm"
+      >
+        <DrawerContent>
+          {(onClose) => (
+            <>
+              <DrawerHeader className="flex flex-col gap-1 ">
+                <p className="text-xl font-semibold"> Statistik Kunjungan</p>
+                <p className="text-sm font-light">
+                  Perhitungan jumlah kunjugan website
+                </p>
+              </DrawerHeader>
+              <DrawerBody className="flex flex-col gap-3">
+                <div className="flex flex-col gap-3 pl-10 pr-4 py-4 bg-[#671B1D] rounded-lg">
+                  <div className="flex justify-between items-center">
+                    <div className="flex flex-col gap-2">
+                      <div className="bg-[#BE0106] rounded-md w-fit py-1 px-1.5">
+                        <MasterUsersIcon size={14} />
+                      </div>
+                      <p className="font-light">Total visitor</p>
+                    </div>
+                    <Image
+                      src="/tribrata.png"
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      className="w-[80px] opacity-30"
+                    />
+                  </div>
+                  <p className="text-5xl font-semibold leading-0 tracking-wide">
+                    199.295
+                  </p>
+                  <div className="flex flex-row gap-3 bg-[#BE0106] py-1 px-2 rounded-md items-center w-fit text-sm font-light">
+                    <div className="w-2 h-2 bg-success-600 rounded-full"></div>
+                    <p>9 Online</p>
+                  </div>
+                </div>
+                <div className="flex flex-col gap-3 pl-10 pr-4 pt-4 pb-10 bg-[#671B1D] rounded-lg">
+                  <div className="flex justify-between items-center">
+                    <div className="flex flex-col gap-2">
+                      <div className="bg-[#BE0106] rounded-md w-fit py-1 px-1.5">
+                        <LandingAnalyticIcon size={14} />
+                      </div>
+                      <p className="font-light">Total View</p>
+                    </div>
+                    <Image
+                      src="/tribrata.png"
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      className="w-[80px] opacity-30"
+                    />
+                  </div>
+                  <p className="text-5xl font-semibold leading-0 tracking-wide">
+                    1.199.295
+                  </p>
+                </div>
+              </DrawerBody>
+            </>
+          )}
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+}
diff --git a/components/layout/humas-layout.tsx b/components/layout/humas-layout.tsx
index 41baae7..cd425cd 100644
--- a/components/layout/humas-layout.tsx
+++ b/components/layout/humas-layout.tsx
@@ -21,8 +21,8 @@ export const HumasLayout = ({ children }: Props) => {
   if (!hasMounted) return null;
   return (
     <section className="flex flex-col">
-      {/* <NavbarHumas size="sm" /> */}
-      {/* <NavbarHumas size="lg" /> */}
+      <NavbarHumas size="sm" />
+      <NavbarHumas size="lg" />
       <NewsTicker />
 
       {children}
diff --git a/components/layout/navbar/NavbarHumas.tsx b/components/layout/navbar/NavbarHumas.tsx
index 252761d..7b11add 100644
--- a/components/layout/navbar/NavbarHumas.tsx
+++ b/components/layout/navbar/NavbarHumas.tsx
@@ -91,6 +91,7 @@ export default function NavbarHumas(props: { size: string }) {
   const searchInput = (
     <Input
       aria-label="search"
+      className="w-full"
       classNames={{
         inputWrapper: "bg-default-100",
         input: "text-sm",
@@ -98,7 +99,7 @@ export default function NavbarHumas(props: { size: string }) {
       labelPlacement="outside"
       placeholder={t("search")}
       startContent={
-        <SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
+        <SearchIcon className="text-base text-default-400 pointer-events-none" />
       }
       type="search"
     />
@@ -152,7 +153,13 @@ export default function NavbarHumas(props: { size: string }) {
             }`}
           >
             <Link href={"/"}>
-              <img src="/logohumas.png" alt="logo" className="w-[95px]" />
+              <Image
+                width={720}
+                height={720}
+                src="/logohumas.png"
+                alt="logo"
+                className="w-[95px]"
+              />
             </Link>
             <Dropdown
               className="bg-white dark:bg-[#1F1A17] "
@@ -194,7 +201,13 @@ export default function NavbarHumas(props: { size: string }) {
                   }
                 >
                   <div className="flex flex-row gap-2 items-center">
-                    <img src="at4.png" className="w-[50px] h-[50px]" />
+                    <Image
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      src="/at4.png"
+                      className="w-[50px] h-[50px]"
+                    />
                     <div className="flex flex-col  ">
                       <p className="text-[16px] font-bold">SP2HP</p>
                       <p className="text-[12px] font-light overflow-hidden">
@@ -206,7 +219,13 @@ export default function NavbarHumas(props: { size: string }) {
                 </DropdownItem>
                 <DropdownItem key="Formulir Permohonan Informasi">
                   <div className="flex flex-row gap-2 items-center">
-                    <img src="pm2.png" className="w-[50px] h-[50px]" />
+                    <Image
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      src="/pm2.png"
+                      className="w-[50px] h-[50px]"
+                    />
                     <div className="flex flex-col  ">
                       <p className="text-[16px] font-bold">
                         Formulir Permohonan Informasi
@@ -227,7 +246,13 @@ export default function NavbarHumas(props: { size: string }) {
                   }
                 >
                   <div className="flex flex-row gap-2 items-center">
-                    <img src="pm3.png" className="w-[50px] h-[50px]" />
+                    <Image
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      src="/pm3.png"
+                      className="w-[50px] h-[50px]"
+                    />
                     <div className="flex flex-col  ">
                       <p className="text-[16px] font-bold">Pelayanan SIM</p>
                       <p className="text-[12px] font-light overflow-hidden">
@@ -242,7 +267,13 @@ export default function NavbarHumas(props: { size: string }) {
                   onPress={() => window.open("https://erikkes.id/", "_blank")}
                 >
                   <div className="flex flex-row gap-2 items-center">
-                    <img src="pm4.png" className="w-[50px] h-[50px]" />
+                    <Image
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      src="/pm4.png"
+                      className="w-[50px] h-[50px]"
+                    />
                     <div className="flex flex-col  ">
                       <p className="text-[16px] font-bold">
                         Pelayanan e-Rikkes SIM
@@ -259,7 +290,13 @@ export default function NavbarHumas(props: { size: string }) {
                   onPress={() => window.open("https://eppsi.id/", "_blank")}
                 >
                   <div className="flex flex-row gap-2 items-center">
-                    <img src="pm5.png" className="w-[50px] h-[50px]" />
+                    <Image
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      src="/pm5.png"
+                      className="w-[50px] h-[50px]"
+                    />
                     <div className="flex flex-col  ">
                       <p className="text-[16px] font-bold">
                         Pelayanan Test Psikologi SIM
@@ -280,7 +317,13 @@ export default function NavbarHumas(props: { size: string }) {
                   }
                 >
                   <div className="flex flex-row gap-2 items-center">
-                    <img src="pm6.png" className="w-[50px] h-[50px]" />
+                    <Image
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      src="/pm6.png"
+                      className="w-[50px] h-[50px]"
+                    />
                     <div className="flex flex-col">
                       <p className="text-[16px] font-bold">Pelayanan e-Avis</p>
                       <p className="text-ellipsis text-[12px] font-light overflow-hidden">
@@ -296,7 +339,13 @@ export default function NavbarHumas(props: { size: string }) {
                   }
                 >
                   <div className="flex flex-row gap-2 items-center">
-                    <img src="pm7.png" className="w-[50px] h-[50px]" />
+                    <Image
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      src="/pm7.png"
+                      className="w-[50px] h-[50px]"
+                    />
                     <div className="flex flex-col">
                       <p className="text-[16px] font-bold">
                         Pelayanan Samsat Digital
@@ -314,7 +363,13 @@ export default function NavbarHumas(props: { size: string }) {
                   }
                 >
                   <div className="flex flex-row gap-2 items-center">
-                    <img src="pm8.png" className="w-[50px] h-[50px]" />
+                    <Image
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      src="/pm8.png"
+                      className="w-[50px] h-[50px]"
+                    />
                     <div className="flex flex-col">
                       <p className="text-[16px] font-bold">Pelayanan SKCK</p>
                       <p className="text-ellipsis text-[12px] font-light overflow-hidden">
@@ -333,7 +388,13 @@ export default function NavbarHumas(props: { size: string }) {
                   }
                 >
                   <div className="flex flex-row gap-2 items-center">
-                    <img src="pm9.png" className="w-[50px] h-[50px] " />
+                    <Image
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      src="/pm9.png"
+                      className="w-[50px] h-[50px] "
+                    />
                     <div className="flex flex-col">
                       <p className="text-[16px] font-bold">
                         Pelayanan Propam Presisi
@@ -352,7 +413,13 @@ export default function NavbarHumas(props: { size: string }) {
                   }
                 >
                   <div className="flex flex-row gap-2 items-center">
-                    <img src="pm10.png" className="w-[50px] h-[50px]" />
+                    <Image
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      src="/pm10.png"
+                      className="w-[50px] h-[50px]"
+                    />
                     <div className="flex flex-col">
                       <p className="text-[16px] font-bold">
                         Pelayanan Dumas Presisi{" "}
@@ -371,7 +438,13 @@ export default function NavbarHumas(props: { size: string }) {
                   }
                 >
                   <div className="flex flex-row gap-2 items-center">
-                    <img src="pm11.png" className="w-[50px] h-[50px]" />
+                    <Image
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      src="/pm11.png"
+                      className="w-[50px] h-[50px]"
+                    />
                     <div className="flex flex-col">
                       <p className="text-[16px] font-bold">Pelayanan Binmas </p>
                       <p className="text-ellipsis text-[12px] font-light overflow-hidden">
@@ -391,7 +464,13 @@ export default function NavbarHumas(props: { size: string }) {
                   }
                 >
                   <div className="flex flex-row gap-2 items-center">
-                    <img src="pm12.png" className="w-[50px] h-[50px]" />
+                    <Image
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      src="/pm12.png"
+                      className="w-[50px] h-[50px]"
+                    />
                     <div className="flex flex-col">
                       <p className="text-[16px] font-bold">
                         Clean & Clear Polri{" "}
@@ -696,7 +775,13 @@ export default function NavbarHumas(props: { size: string }) {
                   }
                 >
                   <div className="flex flex-row gap-2 items-center">
-                    <img src="at1.png" className="w-[50px] h-[50px]" />
+                    <Image
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      src="/at1.png"
+                      className="w-[50px] h-[50px]"
+                    />
                     <div className="flex flex-col  ">
                       <p className="text-[16px] font-bold">Polri Super App</p>
                       <p className="text-ellipsis text-[12px] font-light overflow-hidden">
@@ -716,7 +801,13 @@ export default function NavbarHumas(props: { size: string }) {
                   }
                 >
                   <div className="flex flex-row gap-2 items-center">
-                    <img src="at2.png" className="w-[50px] h-[50px]" />
+                    <Image
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      src="/at2.png"
+                      className="w-[50px] h-[50px]"
+                    />
                     <div className="flex flex-col  ">
                       <p className="text-[16px] font-bold">Media Hub</p>
                       <p className="text-ellipsis text-[12px] font-light overflow-hidden">
@@ -735,7 +826,13 @@ export default function NavbarHumas(props: { size: string }) {
                   }
                 >
                   <div className="flex flex-row gap-2 items-center">
-                    <img src="at3.png" className="w-[50px] h-[50px]" />
+                    <Image
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      src="/at3.png"
+                      className="w-[50px] h-[50px]"
+                    />
                     <div className="flex flex-col  ">
                       <p className="text-[16px] font-bold">Polisiku</p>
                       <p className="text-ellipsis text-[12px] font-light overflow-hidden">
@@ -755,7 +852,13 @@ export default function NavbarHumas(props: { size: string }) {
                   }
                 >
                   <div className="flex flex-row gap-2 items-center">
-                    <img src="at4.png" className="w-[50px] h-[50px]" />
+                    <Image
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      src="/at4.png"
+                      className="w-[50px] h-[50px]"
+                    />
                     <div className="flex flex-col  ">
                       <p className="text-[16px] font-bold">SP2HP</p>
                       <p className="text-ellipsis text-[12px] font-light overflow-hidden">
@@ -774,7 +877,13 @@ export default function NavbarHumas(props: { size: string }) {
                   }
                 >
                   <div className="flex flex-row gap-2 items-center">
-                    <img src="at5.png" className="w-[50px] h-[50px]" />
+                    <Image
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      src="/at5.png"
+                      className="w-[50px] h-[50px]"
+                    />
                     <div className="flex flex-col  ">
                       <p className="text-[16px] font-bold">Polri TV</p>
                       <p className="text-ellipsis text-[12px] font-light overflow-hidden">
@@ -793,7 +902,13 @@ export default function NavbarHumas(props: { size: string }) {
                   }
                 >
                   <div className="flex flex-row gap-2 items-center">
-                    <img src="at6.png" className="w-[50px] h-[50px]" />
+                    <Image
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      src="/at6.png"
+                      className="w-[50px] h-[50px]"
+                    />
                     <div className="flex flex-col  ">
                       <p className="text-[16px] font-bold">Polri Radio</p>
                       <p className="text-ellipsis text-[12px] font-light overflow-hidden">
@@ -812,7 +927,13 @@ export default function NavbarHumas(props: { size: string }) {
                   }
                 >
                   <div className="flex flex-row gap-2 items-center">
-                    <img src="pm6.png" className="w-[50px] h-[50px]" />
+                    <Image
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      src="/pm6.png"
+                      className="w-[50px] h-[50px]"
+                    />
                     <div className="flex flex-col">
                       <p className="text-[16px] font-bold">e-Avis</p>
                       <p className="text-ellipsis text-[12px] font-light overflow-hidden">
@@ -826,7 +947,13 @@ export default function NavbarHumas(props: { size: string }) {
                   onPress={() => window.open("https://erikkes.id/", "_blank")}
                 >
                   <div className="flex flex-row gap-2 items-center">
-                    <img src="pm4.png" className="w-[50px] h-[50px]" />
+                    <Image
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      src="/pm4.png"
+                      className="w-[50px] h-[50px]"
+                    />
                     <div className="flex flex-col  ">
                       <p className="text-[16px] font-bold">e-Rikkes</p>
                       <p className="text-ellipsis text-[12px] font-light overflow-hidden">
@@ -842,7 +969,13 @@ export default function NavbarHumas(props: { size: string }) {
                   onPress={() => window.open("https://eppsi.id/", "_blank")}
                 >
                   <div className="flex flex-row gap-2 items-center">
-                    <img src="pm5.png" className="w-[50px] h-[50px]" />
+                    <Image
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      src="/pm5.png"
+                      className="w-[50px] h-[50px]"
+                    />
                     <div className="flex flex-col  ">
                       <p className="text-[16px] font-bold">e-PPSI</p>
                       <p className="text-ellipsis text-[12px] font-light overflow-hidden">
@@ -858,7 +991,13 @@ export default function NavbarHumas(props: { size: string }) {
                   }
                 >
                   <div className="flex flex-row gap-2 items-center">
-                    <img src="pm11.png" className="w-[50px] h-[50px]" />
+                    <Image
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      src="/pm11.png"
+                      className="w-[50px] h-[50px]"
+                    />
                     <div className="flex flex-col">
                       <p className="text-[16px] font-bold">BOS </p>
                       <p className="text-ellipsis text-[12px] font-light overflow-hidden">
@@ -878,7 +1017,13 @@ export default function NavbarHumas(props: { size: string }) {
                   }
                 >
                   <div className="flex flex-row gap-2 items-center">
-                    <img src="pm7.png" className="w-[50px] h-[50px]" />
+                    <Image
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      src="/pm7.png"
+                      className="w-[50px] h-[50px]"
+                    />
                     <div className="flex flex-col">
                       <p className="text-[16px] font-bold">Signal</p>
                       <p className="text-ellipsis text-[12px] font-light overflow-hidden">
@@ -894,7 +1039,13 @@ export default function NavbarHumas(props: { size: string }) {
                   }
                 >
                   <div className="flex flex-row gap-2 items-center">
-                    <img src="pm8.png" className="w-[50px] h-[50px]" />
+                    <Image
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      src="/pm8.png"
+                      className="w-[50px] h-[50px]"
+                    />
                     <div className="flex flex-col">
                       <p className="text-[16px] font-bold">SKCK Online</p>
                       <p className="text-ellipsis text-[12px] font-light overflow-hidden">
@@ -913,7 +1064,13 @@ export default function NavbarHumas(props: { size: string }) {
                   }
                 >
                   <div className="flex flex-row gap-2 items-center">
-                    <img src="pm9.png" className="w-[50px] h-[50px]" />
+                    <Image
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      src="/pm9.png"
+                      className="w-[50px] h-[50px]"
+                    />
                     <div className="flex flex-col">
                       <p className="text-[16px] font-bold">Propam Presisi</p>
                       <p className="text-ellipsis text-[12px] font-light overflow-hidden">
@@ -933,7 +1090,13 @@ export default function NavbarHumas(props: { size: string }) {
                   }
                 >
                   <div className="flex flex-row gap-2 items-center">
-                    <img src="at14.png" className="w-[50px] h-[50px]" />
+                    <Image
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      src="/at14.png"
+                      className="w-[50px] h-[50px]"
+                    />
                     <div className="flex flex-col">
                       <p className="text-[16px] font-bold">
                         Monitoring Presisi
@@ -952,7 +1115,13 @@ export default function NavbarHumas(props: { size: string }) {
                   }
                 >
                   <div className="flex flex-row gap-2 items-center">
-                    <img src="at15.png" className="w-[50px] h-[50px]" />
+                    <Image
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      src="/at15.png"
+                      className="w-[50px] h-[50px]"
+                    />
                     <div className="flex flex-col">
                       <p className="text-[16px] font-bold">
                         SDM - Penerimaan POLRI
@@ -973,7 +1142,13 @@ export default function NavbarHumas(props: { size: string }) {
                   }
                 >
                   <div className="flex flex-row gap-2 items-center">
-                    <img src="at16.png" className="w-[50px] h-[50px]" />
+                    <Image
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      src="/at16.png"
+                      className="w-[50px] h-[50px]"
+                    />
                     <div className="flex flex-col">
                       <p className="text-[16px] font-bold">
                         Whistle Blowing System{" "}
@@ -994,7 +1169,13 @@ export default function NavbarHumas(props: { size: string }) {
                   }
                 >
                   <div className="flex flex-row gap-2">
-                    <img src="pm10.png" />
+                    <Image
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      src="/pm10.png"
+                      className="w-[50px] h-[50px]"
+                    />
                     <div className="flex flex-col">
                       <p className="text-[16px] font-bold">Dumas Presisi</p>
                       <p className="text-ellipsis text-[12px] font-light overflow-hidden">
@@ -1014,7 +1195,13 @@ export default function NavbarHumas(props: { size: string }) {
                   }
                 >
                   <div className="flex flex-row gap-2 items-center">
-                    <img src="pm12.png" className="w-[50px] h-[50px]" />
+                    <Image
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      src="/pm12.png"
+                      className="w-[50px] h-[50px]"
+                    />
                     <div className="flex flex-col">
                       <p className="text-[16px] font-bold">
                         Clean and Clear POLRI{" "}
@@ -1035,7 +1222,13 @@ export default function NavbarHumas(props: { size: string }) {
                   }
                 >
                   <div className="flex flex-row gap-2 items-center">
-                    <img src="pm3.png" className="w-[50px] h-[50px]" />
+                    <Image
+                      width={360}
+                      height={360}
+                      alt="logo"
+                      src="/pm3.png"
+                      className="w-[50px] h-[50px]"
+                    />
                     <div className="flex flex-col  ">
                       <p className="text-[16px] font-bold">Sinar</p>
                       <p className="text-ellipsis text-[12px] font-light overflow-hidden">
@@ -1047,80 +1240,67 @@ export default function NavbarHumas(props: { size: string }) {
                 </DropdownItem>
               </DropdownMenu>
             </Dropdown>
-            <div className="flex flex-col gap-2">
-              <div className="flex gap-1 lg:gap-3 items-center">
-                <Link
-                  href="https://www.facebook.com/DivHumasPolri?_rdc=1&_rdr"
-                  target="_blank"
-                >
-                  <div className="bg-white p-1.5 rounded-md">
-                    <FbIconNav size={16} />
-                  </div>
-                </Link>
-                <Link
-                  href="https://www.instagram.com/divisihumaspolri/"
-                  target="_blank"
-                >
-                  <IgIcon size={27} />
-                </Link>
-                <Link
-                  href="https://www.youtube.com/user/pidhumaspolri"
-                  target="_blank"
-                >
-                  <YtIcon size={27} />
-                </Link>
-                <Link href="https://twitter.com/DivHumas_Polri" target="_blank">
-                  <TwIcon size={27} />
-                </Link>
-                <Link
-                  href="https://www.tiktok.com/@divhumas_polri"
-                  target="_blank"
-                >
-                  <TtIcon size={27} />
-                </Link>
-                {token ? (
-                  // <Button className="bg-[#DD8306]" onPress={onLogout}>
-                  //   Logout
-                  // </Button>
-                  <Dropdown>
-                    <DropdownTrigger>
-                      <Button variant="bordered">Menu</Button>
-                    </DropdownTrigger>
-                    <DropdownMenu aria-label="Static Actions">
-                      <DropdownItem
-                        key="dashboard"
-                        onPress={() => router.push("/admin/dashboard")}
-                      >
-                        Dashboard
-                      </DropdownItem>
-                      <DropdownItem key="dashboard">Profile</DropdownItem>
-
-                      <DropdownItem
-                        key="logout"
-                        className="text-danger"
-                        color="danger"
-                        onPress={onLogout}
-                      >
-                        Logout
-                      </DropdownItem>
-                    </DropdownMenu>
-                  </Dropdown>
-                ) : (
-                  <Link href="/auth">
-                    <Button
-                      variant="bordered"
-                      className="font-bold text-black border-black dark:border-white dark:text-white px-0 pl-2 rounded-md py-0"
-                      endContent={<ChevronRightIcon />}
-                    >
-                      {t("masuk")}
-                    </Button>
+            <div className="flex flex-col gap-3">
+              <div className="flex">
+                <div className="flex gap-1 lg:gap-3 items-center">
+                  <Link
+                    href="https://www.facebook.com/DivHumasPolri?_rdc=1&_rdr"
+                    target="_blank"
+                  >
+                    <div className="bg-gray-200 dark:bg-default-900 p-1.5 rounded-md">
+                      <FbIconNav size={16} />
+                    </div>
                   </Link>
-                )}
+                  <Link
+                    href="https://www.instagram.com/divisihumaspolri/"
+                    target="_blank"
+                  >
+                    <div className="bg-gray-200 text-gray-200 dark:bg-default-900 dark:text-default-900 p-0.5 rounded-md">
+                      <IgIcon size={24} />
+                    </div>
+                  </Link>
+                  <Link
+                    href="https://www.youtube.com/user/pidhumaspolri"
+                    target="_blank"
+                  >
+                    <div className="bg-gray-200 text-gray-200 dark:bg-default-900 dark:text-default-900 p-0.5 rounded-md">
+                      <YtIcon size={24} />
+                    </div>
+                  </Link>
+                  <Link
+                    href="https://twitter.com/DivHumas_Polri"
+                    target="_blank"
+                  >
+                    <div className="bg-gray-200 text-gray-200 dark:bg-default-900 dark:text-default-900 p-1 rounded-md">
+                      <TwIcon size={20} />
+                    </div>
+                  </Link>
+                  <Link
+                    href="https://www.tiktok.com/@divhumas_polri"
+                    target="_blank"
+                  >
+                    <div className="bg-gray-200 text-gray-200 dark:bg-default-900 dark:text-default-900 p-0.5 rounded-md">
+                      <TtIcon size={24} />
+                    </div>
+                  </Link>
+
+                  <div className="bg-gray-200 dark:bg-default-900 rounded-md py-0.5 px-1">
+                    <ThemeSwitch />
+                  </div>
+                  <a
+                    className="cursor-pointer"
+                    onClick={() =>
+                      language === "id" ? setLanguage("en") : setLanguage("id")
+                    }
+                  >
+                    {language === "id" ? <IdnIcon /> : <UKIcon />}
+                  </a>
+                </div>
               </div>
               <div className="flex items-center gap-3">
-                <div className="hidden lg:block">{searchInput}</div>
+                <div className="hidden lg:block w-full">{searchInput}</div>
 
-                <a
+                {/* <a
                   className="cursor-pointer"
                   onClick={() =>
                     language === "id" ? setLanguage("en") : setLanguage("id")
@@ -1130,7 +1310,7 @@ export default function NavbarHumas(props: { size: string }) {
                 </a>
                 <div>
                   <ThemeSwitch />
-                </div>
+                </div> */}
               </div>
             </div>
           </div>
@@ -1142,7 +1322,13 @@ export default function NavbarHumas(props: { size: string }) {
         >
           <div className="flex justify-between w-full">
             <Link href={"/"}>
-              <img src="/logohumas.png" alt="logo" className="w-[78px]" />
+              <Image
+                width={480}
+                height={480}
+                src="/logohumas.png"
+                alt="logo"
+                className="w-[78px]"
+              />
             </Link>
             <div className="flex flex-row gap-3 items-center">
               <a
@@ -1213,7 +1399,10 @@ export default function NavbarHumas(props: { size: string }) {
                                 className="flex flex-row gap-2 items-center text-sm"
                               >
                                 {subItem.img && (
-                                  <img
+                                  <Image
+                                    width={480}
+                                    height={480}
+                                    alt={subItem.img}
                                     src={subItem.img}
                                     className="w-[35px] h-[35px] object-cover"
                                   />
diff --git a/components/main/detail/comment.tsx b/components/main/detail/comment.tsx
index 7f37e41..5bb3558 100644
--- a/components/main/detail/comment.tsx
+++ b/components/main/detail/comment.tsx
@@ -283,7 +283,7 @@ export default function Comment(props: { id: string | null }) {
   return (
     <div className="px-0 lg:px-3 flex flex-col gap-3">
       <form
-        className="py-3 px-4 flex flex-col gap-3 bg-gray-50 text-black dark:bg-stone-900 dark:text-white rounded-lg shadow-md"
+        className="py-3 px-4 flex flex-col gap-3 bg-gray-50 text-black dark:bg-black dark:text-white rounded-lg shadow-md"
         onSubmit={handleSubmit(onSubmit)}
       >
         {!needOtp ? (
diff --git a/components/main/detail/new-detail.tsx b/components/main/detail/new-detail.tsx
index 8f57a04..e157f9d 100644
--- a/components/main/detail/new-detail.tsx
+++ b/components/main/detail/new-detail.tsx
@@ -55,16 +55,16 @@ export default function NewsDetailPage() {
     const resActivity = await saveActivity(req, token);
   };
   return (
-    <div className="bg-white">
+    <div className="bg-white dark:bg-stone-900">
       <div className="px-5 lg:px-0 lg:w-[75vw] lg:mx-auto py-8">
-        <div className="flex flex-row gap-4 items-end text-black">
+        <div className="flex flex-row gap-4 items-end ">
           <Link href="/" className=" font-semibold text-lg">
             Beranda
           </Link>
           <ChevronRightIcon />
           <p className=" text-lg">Berita</p>
         </div>
-        <div className="text-black lg:flex lg:justify-around bg-white gap-4 lg:gap-16 w-full">
+        <div className=" lg:flex lg:justify-around  gap-4 lg:gap-16 w-full">
           <DetailNews data={detailArticle} listArticle={articles} />
           <div className="w-auto lg:w-[25%] hidden lg:block">
             <SidebarDetail />
@@ -75,7 +75,7 @@ export default function NewsDetailPage() {
           <Comment id={id?.split("-")[0]} />
         </div>
 
-        <div className="bg-gray-50 text-black dark:bg-stone-900 dark:text-white lg:px-24 my-4 lg:my-8 pt-3 lg:pb-4 rounded-lg shadow-md h-fit ">
+        <div className="bg-gray-50 text-black dark:bg-black dark:text-white lg:px-24 my-4 lg:my-8 pt-3 lg:pb-4 rounded-lg shadow-md h-fit ">
           <RelatedNews />
         </div>
         <div className="md:hidden text-black">
diff --git a/components/page/detail-news.tsx b/components/page/detail-news.tsx
index f76c17b..94ae6ab 100644
--- a/components/page/detail-news.tsx
+++ b/components/page/detail-news.tsx
@@ -189,7 +189,32 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
         className="text-sm lg:text-xl lg:leading-8 text-justify space-y-4"
       />
 
-      <div className="grid grid-cols-2  md:grid-cols-4 gap-2 lg:gap-5 my-8">
+      <div className="bg-gray-50 dark:bg-black text-black dark:text-white rounded-lg justify-center items-center p-4 flex flex-col gap-3">
+        <p className="text-lg border-b-3 border-red-600 font-semibold">TAGS</p>
+        <div className="flex flex-wrap gap-2">
+          {data?.categories?.map((category: any) => (
+            <Link href={""} key={category?.id} className="text-sm ">
+              <Button className="bg-[#BE0106] text-white px-2 py-2 rounded-md ">
+                {category?.title}
+              </Button>
+            </Link>
+          ))}
+        </div>
+        <div className="flex flex-wrap gap-2">
+          {data?.tags?.split(",").map((tag: any) => (
+            <Link href={""} key={tag} className="text-xs">
+              <Button
+                className="border-[#BE0106] px-2 py-2 rounded-md "
+                variant="bordered"
+                size="sm"
+              >
+                {tag}
+              </Button>
+            </Link>
+          ))}
+        </div>
+      </div>
+      <div className="grid grid-cols-2  md:flex lg:justify-between gap-2 lg:gap-10 my-8">
         <Button
           variant="solid"
           radius="none"
@@ -235,7 +260,7 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
           <div className="w-3/4 text-xl ">Whatsapp</div>
         </Button>
       </div>
-      <div className="grid grid-cols-2 text-black">
+      <div className="grid grid-cols-2 ">
         {prevArticle === "" ? (
           <p className="flex flex-row items-center gap-3">
             <ChevronLeftIcon /> Sebelumnya
diff --git a/components/page/related-news.tsx b/components/page/related-news.tsx
index e17c132..92f929e 100644
--- a/components/page/related-news.tsx
+++ b/components/page/related-news.tsx
@@ -27,9 +27,8 @@ export default function RelatedNews() {
   return (
     <div className="flex flex-col items-center">
       <div className="text-2xl font-bold flex flex-col items-center mb-3">
-        <div>Berita Terkait</div>
-        <div>
-          <UnderLine />
+        <div className="border-b-3 border-red-600 text-lg font-semibold">
+          Berita Terkait
         </div>
       </div>
       <div className="w-[90vw] lg:w-full">
@@ -67,7 +66,9 @@ export default function RelatedNews() {
             {article?.map((newsItem: any) => (
               <SwiperSlide key={newsItem.id}>
                 <Card isFooterBlurred radius="lg" className="border-none">
-                  <img
+                  <Image
+                    width={480}
+                    height={480}
                     alt="headernews"
                     src={
                       newsItem?.thumbnailUrl == ""
diff --git a/components/page/sidebar-detail.tsx b/components/page/sidebar-detail.tsx
index bed7676..db8bc73 100644
--- a/components/page/sidebar-detail.tsx
+++ b/components/page/sidebar-detail.tsx
@@ -10,6 +10,7 @@ import Link from "next/link";
 import { getListArticle } from "@/service/article";
 import { Card, CardFooter } from "@heroui/react";
 import { convertDateFormat, textEllipsis } from "@/utils/global";
+import Image from "next/image";
 
 export default function SidebarDetail() {
   const [article, setArticle] = useState<any>([]);
@@ -25,18 +26,14 @@ export default function SidebarDetail() {
   }, []);
   return (
     <div className="mt-2 space-y-5">
-      <div className="font-semibold flex flex-col items-center space-y-5">
+      <div className="font-semibold flex flex-col items-center py-3 rounded-lg">
         <div className="flex  flex-col items-center">
-          <div>
-            Humas <b>MABES POLRI</b>
-          </div>
-          <div>
-            <UnderLine />
+          <div className="border-b-2 border-red-600 font-base text-lg">
+            Humas <span className="font-bold">MABES POLRI</span>
           </div>
         </div>
-        <div className="w-full lg:w-[300px] h-[400px] lg:p-4">
+        <div className="w-full mt-3">
           <Swiper
-            direction={"vertical"}
             centeredSlides={false}
             spaceBetween={10}
             mousewheel={true}
@@ -49,24 +46,26 @@ export default function SidebarDetail() {
             }}
             modules={[Autoplay, Pagination, Mousewheel]}
             className="mySwiper"
-            slidesPerView={2}
+            slidesPerView={1}
           >
             {article?.map((newsItem: any) => (
               <SwiperSlide key={newsItem.id}>
-                <div className="h-[230px] lg:h-[180px] flex flex-col gap-2 bg-gray-50 dark:bg-stone-900 p-5 rounded-lg">
-                  <img
+                <div className=" h-[320px] flex flex-col gap-2 bg-gray-100 dark:bg-black p-4 rounded-lg">
+                  <Image
+                    width={480}
+                    height={480}
                     alt="headernews"
                     src={
                       newsItem?.thumbnailUrl == ""
                         ? "/no-image.jpg"
                         : newsItem?.thumbnailUrl
                     }
-                    className="object-cover !h-[70%] rounded-lg"
+                    className="object-cover !h-[200px] rounded-lg"
                   />
                   <div className="text-black dark:text-white flex flex-col">
                     <Link href={`/news/detail/${newsItem.id}-${newsItem.slug}`}>
                       <p className="text-left font-bold text-sm">
-                        {textEllipsis(newsItem.title, 30)}
+                        {textEllipsis(newsItem.title, 45)}
                       </p>
                     </Link>
                     <p className="py-[2px] text-left text-xs">
@@ -81,16 +80,12 @@ export default function SidebarDetail() {
       </div>
       <div className="font-semibold flex flex-col items-center space-y-5">
         <div className="flex  flex-col items-center">
-          <div>
-            Humas <b>POLDA</b>
-          </div>
-          <div>
-            <UnderLine />
+          <div className="border-b-2 border-red-600 font-base text-lg">
+            Humas <span className="font-bold">POLDA</span>
           </div>
         </div>
-        <div className="w-full lg:w-[300px] h-[500px] lg:h-[400px] lg:p-4">
+        <div className="w-full mt-3">
           <Swiper
-            direction={"vertical"}
             centeredSlides={false}
             spaceBetween={10}
             mousewheel={true}
@@ -103,24 +98,26 @@ export default function SidebarDetail() {
             }}
             modules={[Autoplay, Pagination, Mousewheel]}
             className="mySwiper"
-            slidesPerView={2}
+            slidesPerView={1}
           >
             {article?.map((newsItem: any) => (
               <SwiperSlide key={newsItem.id}>
-                <div className="h-[230px] lg:h-[180px] flex flex-col gap-2 bg-gray-50 dark:bg-stone-900 p-5 rounded-lg">
-                  <img
+                <div className=" h-[320px] flex flex-col gap-2 bg-gray-100 dark:bg-black p-4 rounded-lg">
+                  <Image
+                    width={480}
+                    height={480}
                     alt="headernews"
                     src={
                       newsItem?.thumbnailUrl == ""
                         ? "/no-image.jpg"
                         : newsItem?.thumbnailUrl
                     }
-                    className="object-cover !h-[70%] rounded-lg"
+                    className="object-cover !h-[200px] rounded-lg"
                   />
                   <div className="text-black dark:text-white flex flex-col">
                     <Link href={`/news/detail/${newsItem.id}-${newsItem.slug}`}>
-                      <p className="text-left font-semibold text-xs">
-                        {textEllipsis(newsItem.title, 40)}
+                      <p className="text-left font-bold text-sm">
+                        {textEllipsis(newsItem.title, 45)}
                       </p>
                     </Link>
                     <p className="py-[2px] text-left text-xs">