From a7808c832f45ccbc3584ac438624bc90be361a5a Mon Sep 17 00:00:00 2001
From: Rama Priyanto <priyantorama12@gmail.com>
Date: Sun, 25 May 2025 12:34:42 +0700
Subject: [PATCH] fix:ui

---
 components/landing/MedolUpdate.tsx       | 19 +++--
 components/landing/banner-new.tsx        |  2 +-
 components/landing/digital-services.tsx  | 12 +---
 components/landing/footer-new.tsx        | 21 ++----
 components/layout/navbar/NavbarHumas.tsx | 92 +++---------------------
 5 files changed, 30 insertions(+), 116 deletions(-)

diff --git a/components/landing/MedolUpdate.tsx b/components/landing/MedolUpdate.tsx
index e8ed5ee..71e360f 100644
--- a/components/landing/MedolUpdate.tsx
+++ b/components/landing/MedolUpdate.tsx
@@ -182,8 +182,11 @@ export default function MedolUpdate() {
                           <CardBody className="overflow-visible p-0">
                             <Image
                               alt="thumbnail"
-                              className="object-cover !h-[20vh]"
-                              // src={newsItem.thumbnailLink}
+                              className="object-cover !h-[20vh] !w-full"
+                              classNames={{
+                                wrapper: "!w-full !max-w-full",
+                                img: "!w-full",
+                              }} // src={newsItem.thumbnailLink}
                               src={`https://mediahub.polri.go.id/api/media/view?id=${newsItem?.id}&operation=thumbnail&isSmall=true`}
                             />
                           </CardBody>
@@ -271,7 +274,11 @@ export default function MedolUpdate() {
                           <CardBody className="overflow-visible p-0">
                             <Image
                               alt="thumbnail"
-                              className="object-cover !h-[20vh]"
+                              classNames={{
+                                wrapper: "!w-full !max-w-full",
+                                img: "!w-full",
+                              }}
+                              className="object-cover !h-[20vh] w-full"
                               src={newsItem?.image}
                             />
                           </CardBody>
@@ -362,7 +369,11 @@ export default function MedolUpdate() {
                           <CardBody className="overflow-visible p-0">
                             <Image
                               alt="thumnail"
-                              className="object-cover !h-[20vh]"
+                              classNames={{
+                                wrapper: "!w-full !max-w-full",
+                                img: "!w-full",
+                              }}
+                              className="object-cover !h-[20vh] w-full"
                               src={newsItem?.thumbnail}
                             />
                           </CardBody>
diff --git a/components/landing/banner-new.tsx b/components/landing/banner-new.tsx
index 40c48b6..054b0af 100644
--- a/components/landing/banner-new.tsx
+++ b/components/landing/banner-new.tsx
@@ -347,7 +347,7 @@ export default function BannerHumasNew() {
             </div>
             <Input
               label=""
-              placeholder="Temukkan Informasi Publik Terkini Dari Polri"
+              placeholder="Temukan Informasi Publik Terkini Dari Polri"
               type="text"
               value={searchValue}
               onValueChange={setSearchValue}
diff --git a/components/landing/digital-services.tsx b/components/landing/digital-services.tsx
index edfa454..bd57e4e 100644
--- a/components/landing/digital-services.tsx
+++ b/components/landing/digital-services.tsx
@@ -5,7 +5,7 @@ import CategorySatker from "./CategorySatker";
 import PolriApps from "./PolriApps";
 import Link from "next/link";
 import SuggestionsModal from "./suggestions";
-import Image from "next/image";
+import { Image } from "@heroui/react";
 
 export default function DigitalServices() {
   const [isPoldaOpen, setIsPoldaOpen] = useState(false);
@@ -26,8 +26,6 @@ export default function DigitalServices() {
           className="group shadow-lg rounded-lg w-full h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
         >
           <Image
-            width={480}
-            height={480}
             src="/indonesia-map.png"
             alt="indonesia"
             className="w-[100px] group-hover:scale-125 transition duration-300 ease-in-out"
@@ -44,8 +42,6 @@ export default function DigitalServices() {
           className="group shadow-lg rounded-lg w-full h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
         >
           <Image
-            width={480}
-            height={480}
             src="/satker.png"
             alt="satker"
             className="w-[100px] group-hover:scale-125 transition duration-300 ease-in-out"
@@ -62,8 +58,6 @@ export default function DigitalServices() {
           className="group shadow-lg rounded-lg w-full h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
         >
           <Image
-            width={480}
-            height={480}
             src="/presisi.png"
             alt="presisi"
             className="w-[100px] group-hover:scale-125 transition duration-300 ease-in-out"
@@ -80,8 +74,6 @@ export default function DigitalServices() {
           className="group shadow-lg rounded-lg w-full h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
         >
           <Image
-            width={480}
-            height={480}
             src="/kritik-saran.png"
             alt="kritik-saran"
             className="w-[100px] group-hover:scale-125 transition duration-300 ease-in-out"
@@ -98,8 +90,6 @@ export default function DigitalServices() {
           className="group shadow-lg rounded-lg w-full h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
         >
           <Image
-            width={480}
-            height={480}
             src="/survey.png"
             alt="survey"
             className="w-[100px] group-hover:scale-125 transition duration-300 ease-in-out"
diff --git a/components/landing/footer-new.tsx b/components/landing/footer-new.tsx
index f5f6d34..caf5b53 100644
--- a/components/landing/footer-new.tsx
+++ b/components/landing/footer-new.tsx
@@ -13,9 +13,9 @@ import {
 import Link from "next/link";
 import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
-import Image from "next/image";
 import { error, success } from "@/config/swal";
 import { subscription } from "@/services/subscribe";
+import { Image } from "@heroui/react";
 
 export default function FooterNew(props: { margin?: boolean }) {
   const [emailValue, setEmailValue] = useState("");
@@ -57,8 +57,6 @@ export default function FooterNew(props: { margin?: boolean }) {
           >
             <Image
               src="/assets/portal-humas.png"
-              width={480}
-              height={480}
               alt="portal-humas"
               className="w-[50px] lg:w-[100px]"
             />
@@ -69,24 +67,21 @@ export default function FooterNew(props: { margin?: boolean }) {
           >
             <Image
               src="/assets/mediahub.png"
-              width={480}
-              height={480}
               alt="mediahub"
               className="w-[80px] lg:w-[200px]"
             />
           </Link>
-          <Link href="" className="flex justify-center">
+          <Link
+            href="https://spit.humas.polri.go.id"
+            className="flex justify-center"
+          >
             <Image
               src="/assets/spit.png"
-              width={480}
-              height={480}
               alt="spit"
               className="w-[85px] lg:w-[170px] hidden dark:block"
             />
             <Image
               src="/assets/spit-blackline.png"
-              width={480}
-              height={480}
               alt="spit"
               className="w-[85px] lg:w-[170px] dark:hidden"
             />
@@ -97,8 +92,6 @@ export default function FooterNew(props: { margin?: boolean }) {
           >
             <Image
               src="/assets/polri-tv.png"
-              width={480}
-              height={480}
               alt="polritv"
               className="w-[85px] lg:w-[170px]"
             />
@@ -109,8 +102,6 @@ export default function FooterNew(props: { margin?: boolean }) {
           >
             <Image
               src="/assets/tb-news.png"
-              width={480}
-              height={480}
               alt="tbn"
               className="w-[85px] lg:w-[170px]"
             />
@@ -118,8 +109,6 @@ export default function FooterNew(props: { margin?: boolean }) {
           <Link href="https://inp.polri.go.id/" className="flex justify-center">
             <Image
               src="/assets/inp.png"
-              width={480}
-              height={480}
               alt="inp"
               className="w-[85px] lg:w-[170px]"
             />
diff --git a/components/layout/navbar/NavbarHumas.tsx b/components/layout/navbar/NavbarHumas.tsx
index b1566bb..d70649d 100644
--- a/components/layout/navbar/NavbarHumas.tsx
+++ b/components/layout/navbar/NavbarHumas.tsx
@@ -15,8 +15,8 @@ import {
   DropdownItem,
   DropdownMenu,
   DropdownTrigger,
+  Image,
 } from "@heroui/react";
-import Image from "next/image";
 import Link from "next/link";
 import { useEffect, useRef, useState } from "react";
 import {
@@ -153,13 +153,7 @@ export default function NavbarHumas(props: { size: string }) {
             }`}
           >
             <Link href={"/"}>
-              <Image
-                width={720}
-                height={720}
-                src="/logohumas.png"
-                alt="logo"
-                className="w-[95px]"
-              />
+              <Image src="/logohumas.png" alt="logo" className="w-[95px]" />
             </Link>
             <Dropdown
               className="bg-white dark:bg-[#1F1A17] "
@@ -203,8 +197,6 @@ export default function NavbarHumas(props: { size: string }) {
                 >
                   <div className="flex flex-row gap-2 items-center">
                     <Image
-                      width={360}
-                      height={360}
                       alt="logo"
                       src="/at4.png"
                       className="w-[50px] h-[50px]"
@@ -221,8 +213,6 @@ export default function NavbarHumas(props: { size: string }) {
                 <DropdownItem key="Formulir Permohonan Informasi">
                   <div className="flex flex-row gap-2 items-center">
                     <Image
-                      width={360}
-                      height={360}
                       alt="logo"
                       src="/pm2.png"
                       className="w-[50px] h-[50px]"
@@ -248,8 +238,6 @@ export default function NavbarHumas(props: { size: string }) {
                 >
                   <div className="flex flex-row gap-2 items-center">
                     <Image
-                      width={360}
-                      height={360}
                       alt="logo"
                       src="/pm3.png"
                       className="w-[50px] h-[50px]"
@@ -269,13 +257,11 @@ export default function NavbarHumas(props: { size: string }) {
                 >
                   <div className="flex flex-row gap-2 items-center">
                     <Image
-                      width={360}
-                      height={360}
                       alt="logo"
                       src="/pm4.png"
-                      className="w-[50px] h-[50px]"
+                      className="w-[65px] h-[55px]"
                     />
-                    <div className="flex flex-col  ">
+                    <div className="flex flex-col">
                       <p className="text-[16px] font-bold">
                         Pelayanan e-Rikkes SIM
                       </p>
@@ -292,8 +278,6 @@ export default function NavbarHumas(props: { size: string }) {
                 >
                   <div className="flex flex-row gap-2 items-center">
                     <Image
-                      width={360}
-                      height={360}
                       alt="logo"
                       src="/pm5.png"
                       className="w-[50px] h-[50px]"
@@ -319,8 +303,6 @@ export default function NavbarHumas(props: { size: string }) {
                 >
                   <div className="flex flex-row gap-2 items-center">
                     <Image
-                      width={360}
-                      height={360}
                       alt="logo"
                       src="/pm6.png"
                       className="w-[50px] h-[50px]"
@@ -341,8 +323,6 @@ export default function NavbarHumas(props: { size: string }) {
                 >
                   <div className="flex flex-row gap-2 items-center">
                     <Image
-                      width={360}
-                      height={360}
                       alt="logo"
                       src="/pm7.png"
                       className="w-[50px] h-[50px]"
@@ -365,8 +345,6 @@ export default function NavbarHumas(props: { size: string }) {
                 >
                   <div className="flex flex-row gap-2 items-center">
                     <Image
-                      width={360}
-                      height={360}
                       alt="logo"
                       src="/pm8.png"
                       className="w-[50px] h-[50px]"
@@ -390,11 +368,9 @@ export default function NavbarHumas(props: { size: string }) {
                 >
                   <div className="flex flex-row gap-2 items-center">
                     <Image
-                      width={360}
-                      height={360}
                       alt="logo"
                       src="/pm9.png"
-                      className="w-[50px] h-[50px] "
+                      className="w-[55px] h-[55px] "
                     />
                     <div className="flex flex-col">
                       <p className="text-[16px] font-bold">
@@ -415,8 +391,6 @@ export default function NavbarHumas(props: { size: string }) {
                 >
                   <div className="flex flex-row gap-2 items-center">
                     <Image
-                      width={360}
-                      height={360}
                       alt="logo"
                       src="/pm10.png"
                       className="w-[50px] h-[50px]"
@@ -440,11 +414,9 @@ export default function NavbarHumas(props: { size: string }) {
                 >
                   <div className="flex flex-row gap-2 items-center">
                     <Image
-                      width={360}
-                      height={360}
                       alt="logo"
                       src="/pm11.png"
-                      className="w-[50px] h-[50px]"
+                      className="w-[55px] h-[50px]"
                     />
                     <div className="flex flex-col">
                       <p className="text-[16px] font-bold">Pelayanan Binmas </p>
@@ -466,8 +438,6 @@ export default function NavbarHumas(props: { size: string }) {
                 >
                   <div className="flex flex-row gap-2 items-center">
                     <Image
-                      width={360}
-                      height={360}
                       alt="logo"
                       src="/pm12.png"
                       className="w-[50px] h-[50px]"
@@ -784,8 +754,6 @@ export default function NavbarHumas(props: { size: string }) {
                 >
                   <div className="flex flex-row gap-2 items-center">
                     <Image
-                      width={360}
-                      height={360}
                       alt="logo"
                       src="/at1.png"
                       className="w-[50px] h-[50px]"
@@ -810,8 +778,6 @@ export default function NavbarHumas(props: { size: string }) {
                 >
                   <div className="flex flex-row gap-2 items-center">
                     <Image
-                      width={360}
-                      height={360}
                       alt="logo"
                       src="/at2.png"
                       className="w-[50px] h-[50px]"
@@ -835,8 +801,6 @@ export default function NavbarHumas(props: { size: string }) {
                 >
                   <div className="flex flex-row gap-2 items-center">
                     <Image
-                      width={360}
-                      height={360}
                       alt="logo"
                       src="/at3.png"
                       className="w-[50px] h-[50px]"
@@ -861,8 +825,6 @@ export default function NavbarHumas(props: { size: string }) {
                 >
                   <div className="flex flex-row gap-2 items-center">
                     <Image
-                      width={360}
-                      height={360}
                       alt="logo"
                       src="/at4.png"
                       className="w-[50px] h-[50px]"
@@ -886,8 +848,6 @@ export default function NavbarHumas(props: { size: string }) {
                 >
                   <div className="flex flex-row gap-2 items-center">
                     <Image
-                      width={360}
-                      height={360}
                       alt="logo"
                       src="/at5.png"
                       className="w-[50px] h-[50px]"
@@ -911,8 +871,6 @@ export default function NavbarHumas(props: { size: string }) {
                 >
                   <div className="flex flex-row gap-2 items-center">
                     <Image
-                      width={360}
-                      height={360}
                       alt="logo"
                       src="/at6.png"
                       className="w-[50px] h-[50px]"
@@ -936,8 +894,6 @@ export default function NavbarHumas(props: { size: string }) {
                 >
                   <div className="flex flex-row gap-2 items-center">
                     <Image
-                      width={360}
-                      height={360}
                       alt="logo"
                       src="/pm6.png"
                       className="w-[50px] h-[50px]"
@@ -956,11 +912,9 @@ export default function NavbarHumas(props: { size: string }) {
                 >
                   <div className="flex flex-row gap-2 items-center">
                     <Image
-                      width={360}
-                      height={360}
                       alt="logo"
                       src="/pm4.png"
-                      className="w-[50px] h-[50px]"
+                      className="w-[56px] h-[56px]"
                     />
                     <div className="flex flex-col  ">
                       <p className="text-[16px] font-bold">e-Rikkes</p>
@@ -978,8 +932,6 @@ export default function NavbarHumas(props: { size: string }) {
                 >
                   <div className="flex flex-row gap-2 items-center">
                     <Image
-                      width={360}
-                      height={360}
                       alt="logo"
                       src="/pm5.png"
                       className="w-[50px] h-[50px]"
@@ -1000,8 +952,6 @@ export default function NavbarHumas(props: { size: string }) {
                 >
                   <div className="flex flex-row gap-2 items-center">
                     <Image
-                      width={360}
-                      height={360}
                       alt="logo"
                       src="/pm11.png"
                       className="w-[50px] h-[50px]"
@@ -1026,8 +976,6 @@ export default function NavbarHumas(props: { size: string }) {
                 >
                   <div className="flex flex-row gap-2 items-center">
                     <Image
-                      width={360}
-                      height={360}
                       alt="logo"
                       src="/pm7.png"
                       className="w-[50px] h-[50px]"
@@ -1048,8 +996,6 @@ export default function NavbarHumas(props: { size: string }) {
                 >
                   <div className="flex flex-row gap-2 items-center">
                     <Image
-                      width={360}
-                      height={360}
                       alt="logo"
                       src="/pm8.png"
                       className="w-[50px] h-[50px]"
@@ -1073,8 +1019,6 @@ export default function NavbarHumas(props: { size: string }) {
                 >
                   <div className="flex flex-row gap-2 items-center">
                     <Image
-                      width={360}
-                      height={360}
                       alt="logo"
                       src="/pm9.png"
                       className="w-[50px] h-[50px]"
@@ -1099,8 +1043,6 @@ export default function NavbarHumas(props: { size: string }) {
                 >
                   <div className="flex flex-row gap-2 items-center">
                     <Image
-                      width={360}
-                      height={360}
                       alt="logo"
                       src="/at14.png"
                       className="w-[50px] h-[50px]"
@@ -1124,8 +1066,6 @@ export default function NavbarHumas(props: { size: string }) {
                 >
                   <div className="flex flex-row gap-2 items-center">
                     <Image
-                      width={360}
-                      height={360}
                       alt="logo"
                       src="/at15.png"
                       className="w-[50px] h-[50px]"
@@ -1151,8 +1091,6 @@ export default function NavbarHumas(props: { size: string }) {
                 >
                   <div className="flex flex-row gap-2 items-center">
                     <Image
-                      width={360}
-                      height={360}
                       alt="logo"
                       src="/at16.png"
                       className="w-[50px] h-[50px]"
@@ -1178,8 +1116,6 @@ export default function NavbarHumas(props: { size: string }) {
                 >
                   <div className="flex flex-row gap-2">
                     <Image
-                      width={360}
-                      height={360}
                       alt="logo"
                       src="/pm10.png"
                       className="w-[50px] h-[50px]"
@@ -1204,8 +1140,6 @@ export default function NavbarHumas(props: { size: string }) {
                 >
                   <div className="flex flex-row gap-2 items-center">
                     <Image
-                      width={360}
-                      height={360}
                       alt="logo"
                       src="/pm12.png"
                       className="w-[50px] h-[50px]"
@@ -1231,8 +1165,6 @@ export default function NavbarHumas(props: { size: string }) {
                 >
                   <div className="flex flex-row gap-2 items-center">
                     <Image
-                      width={360}
-                      height={360}
                       alt="logo"
                       src="/pm3.png"
                       className="w-[50px] h-[50px]"
@@ -1330,13 +1262,7 @@ export default function NavbarHumas(props: { size: string }) {
         >
           <div className="flex justify-between w-full">
             <Link href={"/"}>
-              <Image
-                width={480}
-                height={480}
-                src="/logohumas.png"
-                alt="logo"
-                className="w-[78px]"
-              />
+              <Image src="/logohumas.png" alt="logo" className="w-[78px]" />
             </Link>
             <div className="flex flex-row gap-3 items-center">
               {/* <a
@@ -1408,8 +1334,6 @@ export default function NavbarHumas(props: { size: string }) {
                               >
                                 {subItem.img && (
                                   <Image
-                                    width={480}
-                                    height={480}
                                     alt={subItem.img}
                                     src={subItem.img}
                                     className="w-[35px] h-[35px] object-cover"