From 2e03a6ecdc5b415a97644692c270c98bc424b8ea Mon Sep 17 00:00:00 2001
From: sabdayagra <msabdayagra@gmail.com>
Date: Tue, 4 Feb 2025 13:30:30 +0700
Subject: [PATCH 1/3] feat: eng language

---
 .../(public)/audio/detail/[slug]/page.tsx     | 72 +++++++++---------
 .../(public)/document/detail/[slug]/page.tsx  | 76 ++++++++++---------
 .../(public)/image/detail/[slug]/page.tsx     |  2 +-
 .../(public)/indeks/detail/[slug]/page.tsx    | 38 +++++-----
 .../(public)/video/detail/[slug]/page.tsx     |  8 +-
 messages/en.json                              |  7 +-
 messages/in.json                              |  7 +-
 7 files changed, 115 insertions(+), 95 deletions(-)

diff --git a/app/[locale]/(public)/audio/detail/[slug]/page.tsx b/app/[locale]/(public)/audio/detail/[slug]/page.tsx
index 9e2a89f8..826cc7dc 100644
--- a/app/[locale]/(public)/audio/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/audio/detail/[slug]/page.tsx
@@ -20,6 +20,7 @@ import Swal from "sweetalert2";
 import { checkMaliciousText, getPublicLocaleTimestamp } from "@/utils/globals";
 import parse from "html-react-parser";
 import $ from "jquery";
+import { useTranslations } from "next-intl";
 
 const formWaveSurferOptions = (ref: any) => ({
   container: ref,
@@ -66,6 +67,8 @@ const DetailAudio = () => {
   const [listSuggestion, setListSuggestion] = useState<any>();
   const MySwal = withReactContent(Swal);
   const [visibleInput, setVisibleInput] = useState<string | null>(null);
+  const t = useTranslations("LandingPage");
+
   let typeString = "audio";
 
   useEffect(() => {
@@ -250,11 +253,8 @@ const DetailAudio = () => {
   };
 
   const sizes = [
-    { label: "XL", value: "3198 x 1798 px" },
-    { label: "L", value: "2399 x 1349 px" },
-    { label: "M", value: "1599 x 899 px" },
-    { label: "S", value: "1066 x 599 px" },
-    { label: "XS", value: "800 x 450 px" },
+    { label: "MP3", value: "... MB" },
+    { label: "WAV", value: "... MB" },
   ];
 
   const handleShare = (type: any, url: any) => {
@@ -592,16 +592,20 @@ const DetailAudio = () => {
             <div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4">
               <div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between">
                 <p className="text-xs lg:text-sm">
-                  oleh&nbsp;<span className="font-semibold text-black">{detailDataAudio?.uploadedBy?.userLevel?.name}</span>
+                  {t("by")}&nbsp;<span className="font-semibold text-black">{detailDataAudio?.uploadedBy?.userLevel?.name}</span>
+                </p>
+                <p className="text-xs lg:text-sm">
+                  &nbsp;|&nbsp;{t("updatedOn")} {detailDataAudio?.updatedAt} WIB &nbsp;|&nbsp;
                 </p>
-                <p className="text-xs lg:text-sm">&nbsp;|&nbsp;Diupdate pada {detailDataAudio?.updatedAt} WIB &nbsp;|&nbsp;</p>
                 <p className="text-xs lg:text-sm flex justify-center items-center">
                   <Icon icon="formkit:eye" width="15" height="15" />
                   &nbsp; {detailDataAudio?.clickCount} &nbsp;
                 </p>
               </div>
               <div className="mt-3">
-                <p className="flex text-end text-xs lg:text-sm font-semibold">Kreator: {detailDataAudio?.creatorName}</p>
+                <p className="flex text-end text-xs lg:text-sm font-semibold">
+                  {t("creator")} {detailDataAudio?.creatorName}
+                </p>
               </div>
             </div>
             {/* Keterangan */}
@@ -616,12 +620,12 @@ const DetailAudio = () => {
             {isSaved ? (
               <a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
                 <Icon icon="material-symbols:bookmark" width={40} />
-                <p className="text-base lg:text-lg">Hapus</p>
+                <p className="text-base lg:text-lg">{t("delete")}</p>
               </a>
             ) : (
               <a onClick={() => doBookmark()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
                 <Icon icon="material-symbols:bookmark-outline" width={40} />
-                <p className="text-base lg:text-lg">Simpan</p>
+                <p className="text-base lg:text-lg">{t("save")}</p>
               </a>
             )}
 
@@ -643,7 +647,7 @@ const DetailAudio = () => {
             <div className="border-t border-black my-4"></div>
 
             {/* Opsi Ukuran Foto */}
-            <h4 className="flex text-lg justify-center items-center font-semibold my-3">Opsi Ukuran Audio</h4>
+            <h4 className="flex text-lg justify-center items-center font-semibold my-3">{t("audioSize")}</h4>
 
             <div className="border-t border-black my-4"></div>
 
@@ -665,7 +669,7 @@ const DetailAudio = () => {
             <div className="mt-4">
               <label className="flex items-center space-x-2 text-sm">
                 <input type="checkbox" className="text-red-600 focus:ring-red-600" onChange={() => setIsDownloadAll(!isDownloadAll)} />
-                <span>Download Semua File?</span>
+                <span>{t("downloadAll")}</span>
               </label>
             </div>
 
@@ -674,12 +678,12 @@ const DetailAudio = () => {
               <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                 <path fill="white" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
               </svg>
-              Download
+              {t("download")}
             </button>
 
             {/* Tombol Bagikan */}
             <div className="flex flex-row py-3">
-              <p className="text-base font-semibold">Bagikan</p>
+              <p className="text-base font-semibold">{t("share")}</p>
               <a className="ml-8 cursor-pointer" onClick={() => handleShare("fb", `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`)}>
                 <Icon icon="brandico:facebook" height="20" className="px-auto text-red-600 text-center" />
               </a>
@@ -697,13 +701,13 @@ const DetailAudio = () => {
                 </PopoverTrigger>
                 <PopoverContent>
                   <div className="flex flex-col">
-                    <h1 className="mb-2">Share Ke Email</h1>
+                    <h1 className="mb-2">{t("shareTo")}</h1>
                     <div className="flex flex-col mb-2">
-                      <p className="text-base font-semibold mb-1">Email Tujuan :</p>
-                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
+                      <p className="text-base font-semibold mb-1">{t("destinationEmail")}</p>
+                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter")} />
                     </div>
                     <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
-                      Kirim
+                      {t("send")}
                     </Button>
                   </div>
                 </PopoverContent>
@@ -717,10 +721,10 @@ const DetailAudio = () => {
         {/* Comment */}
         <div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7]">
           <div className="gap-5 flex flex-col px-4 lg:px-14">
-            <p className="flex items-start text-lg">Berikan Komentar</p>
+            <p className="flex items-start text-lg">{t("comment")}</p>
             <Textarea placeholder="Type your comments here." className="flex w-full pb-12" onChange={getInputValue} />
             <button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
-              Kirim
+            {t("send")}
             </button>
           </div>
 
@@ -749,11 +753,11 @@ const DetailAudio = () => {
                         onClick={() => showInput(`comment-id-${data.id}`)}
                         className="mr-2"
                       >
-                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Balas</small>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
                       </a>
                       {Number(data.suggestionFrom?.id) == Number(userId) || Number(userRoleId) == 2 ? (
                         <a onClick={() => deleteData(data.id)}>
-                          <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Hapus</small>
+                          <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
                         </a>
                       ) : (
                         ""
@@ -763,13 +767,13 @@ const DetailAudio = () => {
                 </div>
                 {visibleInput === `comment-id-${data.id}` && (
                   <div id={`comment-id-${data.id}`} className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 ">
-                    <Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" />
+                    <Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder={t("enterReply")} />
                     <div className="flex flex-row gap-3">
                       <a onClick={() => postDataChild(data.id)}>
-                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">Kirim</small>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">{t("send")}</small>
                       </a>
                       <a onClick={() => showInput(`comment-id-${data.id}`)}>
-                        <small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
                       </a>
                     </div>
                   </div>
@@ -798,7 +802,7 @@ const DetailAudio = () => {
                                 }
                                 onClick={() => showInput(`comment-id-${child1.id}`)}
                               >
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white  px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Balas</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white  px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
                               </a>
                               <a
                                 style={
@@ -810,7 +814,7 @@ const DetailAudio = () => {
                                 }
                                 onClick={() => deleteData(child1.id)}
                               >
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Hapus</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
                               </a>
                             </div>
                           </div>
@@ -818,13 +822,13 @@ const DetailAudio = () => {
 
                         {visibleInput === `comment-id-${child1.id}` && (
                           <div id={`comment-id-${child1.id}`} className="px-4 lg:px-14 pl-28 lg:pl-[200px]">
-                            <Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder="Masukkan balasan anda" />
+                            <Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder={t("enterReply")} />
                             <div className="flex flex-row mt-2 gap-3">
                               <a onClick={() => postDataChild(child1.id)}>
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Kirim</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
                               </a>
                               <a onClick={() => showInput(`comment-id-${child1.id}`)}>
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
                               </a>
                             </div>
                           </div>
@@ -853,7 +857,7 @@ const DetailAudio = () => {
                                         }
                                         onClick={() => showInput(`comment-id-${child2.id}`)}
                                       >
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Balas</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
                                       </a>
                                       <a
                                         style={
@@ -865,7 +869,7 @@ const DetailAudio = () => {
                                         }
                                         onClick={() => deleteData(child2.id)}
                                       >
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Hapus</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
                                       </a>
                                     </div>
                                   </div>
@@ -875,10 +879,10 @@ const DetailAudio = () => {
                                     <Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" />
                                     <div className="flex flex-row gap-3">
                                       <a onClick={() => postDataChild(child2.id)}>
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Kirim</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
                                       </a>
                                       <a onClick={() => showInput(`comment-id-${child2.id}`)}>
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
                                       </a>
                                     </div>
                                   </div>
diff --git a/app/[locale]/(public)/document/detail/[slug]/page.tsx b/app/[locale]/(public)/document/detail/[slug]/page.tsx
index 07f35072..4293008e 100644
--- a/app/[locale]/(public)/document/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/document/detail/[slug]/page.tsx
@@ -18,6 +18,7 @@ import { checkMaliciousText, getPublicLocaleTimestamp } from "@/utils/globals";
 import withReactContent from "sweetalert2-react-content";
 import Swal from "sweetalert2";
 import parse from "html-react-parser";
+import { useTranslations } from "next-intl";
 
 const DetailDocument = () => {
   const [selectedSize, setSelectedSize] = useState<string>("L");
@@ -50,6 +51,7 @@ const DetailDocument = () => {
   const [listSuggestion, setListSuggestion] = useState<any>();
   const MySwal = withReactContent(Swal);
   const [visibleInput, setVisibleInput] = useState<string | null>(null);
+  const t = useTranslations("LandingPage");
 
   let typeString = "document";
 
@@ -139,11 +141,9 @@ const DetailDocument = () => {
   };
 
   const sizes = [
-    { label: "XL", value: "3198 x 1798 px" },
-    { label: "L", value: "2399 x 1349 px" },
-    { label: "M", value: "1599 x 899 px" },
-    { label: "S", value: "1066 x 599 px" },
-    { label: "XS", value: "800 x 450 px" },
+    { label: "DOC", value: "...KB" },
+    { label: "PPT", value: "...KB" },
+    { label: "PDF", value: "...KB" },
   ];
 
   async function sendActivityLog(activityTypeId: number) {
@@ -433,14 +433,22 @@ const DetailDocument = () => {
               <p className="mt-3">Kreator: {detailDataDocument?.creatorName}</p> */}
               <div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between">
                 <p className="text-xs lg:text-sm">
-                  oleh&nbsp;<span className="font-semibold text-black">{detailDataDocument?.uploadedBy?.userLevel?.name}</span>
+                  {t("by")}&nbsp;<span className="font-semibold text-black">{detailDataDocument?.uploadedBy?.userLevel?.name}</span>
+                </p>
+                <p className="text-xs lg:text-sm">
+                  &nbsp;|&nbsp; {t("updatedOn")} {detailDataDocument?.updatedAt} WIB &nbsp;|&nbsp;
                 </p>
-                <p className="text-xs lg:text-sm">&nbsp;|&nbsp;Diupdate pada {detailDataDocument?.updatedAt} WIB &nbsp;|&nbsp;</p>
                 <p className="text-xs lg:text-sm flex justify-center items-center">
                   <Icon icon="formkit:eye" width="15" height="15" />
                   &nbsp; {detailDataDocument?.clickCount} &nbsp;
                 </p>
               </div>
+              <div className="mt-3">
+                <p className="flex text-end text-xs lg:text-sm font-semibold">
+                  {t("creator")}
+                  {detailDataDocument?.creatorName}
+                </p>
+              </div>
             </div>
 
             {/* Keterangan */}
@@ -455,12 +463,12 @@ const DetailDocument = () => {
             {isSaved ? (
               <a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
                 <Icon icon="material-symbols:bookmark" width={40} />
-                <p className="text-base lg:text-lg">Hapus</p>
+                <p className="text-base lg:text-lg">{t("delete")}</p>
               </a>
             ) : (
               <a onClick={() => doBookmark()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
                 <Icon icon="material-symbols:bookmark-outline" width={40} />
-                <p className="text-base lg:text-lg">Simpan</p>
+                <p className="text-base lg:text-lg">{t("save")}</p>
               </a>
             )}
 
@@ -482,7 +490,7 @@ const DetailDocument = () => {
             <div className="border-t border-black my-4"></div>
 
             {/* Opsi Ukuran Foto */}
-            <h4 className="flex text-lg justify-center items-center font-semibold my-3">Opsi Ukuran Foto</h4>
+            <h4 className="flex text-lg justify-center items-center font-semibold my-3">{t("docSize")}</h4>
             <div className="border-t border-black my-4"></div>
             <div className="space-y-2">
               {sizes.map((size: any) => (
@@ -502,7 +510,7 @@ const DetailDocument = () => {
             <div className="mt-4">
               <label className="flex items-center space-x-2 text-sm">
                 <input type="checkbox" className="text-red-600 focus:ring-red-600" onChange={() => setIsDownloadAll(!isDownloadAll)} />
-                <span>Download Semua File?</span>
+                <span>{t("downloadAll")}</span>
               </label>
             </div>
 
@@ -511,12 +519,12 @@ const DetailDocument = () => {
               <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                 <path fill="white" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
               </svg>
-              Download
+              {t("download")}
             </button>
 
             {/* Tombol Bagikan */}
             <div className="flex flex-row py-3">
-              <p className="text-base font-semibold">Bagikan</p>
+              <p className="text-base font-semibold">{t("share")}</p>
               <a className="ml-8 cursor-pointer" onClick={() => handleShare("fb", `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`)}>
                 <Icon icon="brandico:facebook" height="20" className="px-auto text-red-600 text-center" />
               </a>
@@ -534,13 +542,13 @@ const DetailDocument = () => {
                 </PopoverTrigger>
                 <PopoverContent>
                   <div className="flex flex-col">
-                    <h1 className="mb-2">Share Ke Email</h1>
+                    <h1 className="mb-2">{t("shareTo")}</h1>
                     <div className="flex flex-col mb-2">
-                      <p className="text-base font-semibold mb-1">Email Tujuan :</p>
-                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
+                      <p className="text-base font-semibold mb-1">{t("destinationEmail")}</p>
+                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter")} />
                     </div>
                     <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
-                      Kirim
+                      {t("send")}
                     </Button>
                   </div>
                 </PopoverContent>
@@ -554,10 +562,10 @@ const DetailDocument = () => {
         {/* Comment */}
         <div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7]">
           <div className="gap-5 flex flex-col px-4 lg:px-14">
-            <p className="flex items-start text-lg">Berikan Komentar</p>
+            <p className="flex items-start text-lg">{t("comment")}</p>
             <Textarea placeholder="Type your comments here." className="flex w-full pb-12" onChange={getInputValue} />
             <button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
-              Kirim
+              {t("send")}
             </button>
           </div>
 
@@ -586,11 +594,11 @@ const DetailDocument = () => {
                         onClick={() => showInput(`comment-id-${data.id}`)}
                         className="mr-2"
                       >
-                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Balas</small>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
                       </a>
                       {Number(data.suggestionFrom?.id) == Number(userId) || Number(userRoleId) == 2 ? (
                         <a onClick={() => deleteData(data.id)}>
-                          <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Hapus</small>
+                          <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
                         </a>
                       ) : (
                         ""
@@ -600,13 +608,13 @@ const DetailDocument = () => {
                 </div>
                 {visibleInput === `comment-id-${data.id}` && (
                   <div id={`comment-id-${data.id}`} className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 ">
-                    <Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" />
+                    <Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder={t("enterReply")} />
                     <div className="flex flex-row gap-3">
                       <a onClick={() => postDataChild(data.id)}>
-                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">Kirim</small>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">{t("send")}</small>
                       </a>
                       <a onClick={() => showInput(`comment-id-${data.id}`)}>
-                        <small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
                       </a>
                     </div>
                   </div>
@@ -635,7 +643,7 @@ const DetailDocument = () => {
                                 }
                                 onClick={() => showInput(`comment-id-${child1.id}`)}
                               >
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white  px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Balas</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white  px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
                               </a>
                               <a
                                 style={
@@ -647,7 +655,7 @@ const DetailDocument = () => {
                                 }
                                 onClick={() => deleteData(child1.id)}
                               >
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Hapus</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
                               </a>
                             </div>
                           </div>
@@ -655,13 +663,13 @@ const DetailDocument = () => {
 
                         {visibleInput === `comment-id-${child1.id}` && (
                           <div id={`comment-id-${child1.id}`} className="px-4 lg:px-14 pl-28 lg:pl-[200px]">
-                            <Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder="Masukkan balasan anda" />
+                            <Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder={t("enterReply")} />
                             <div className="flex flex-row mt-2 gap-3">
                               <a onClick={() => postDataChild(child1.id)}>
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Kirim</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
                               </a>
                               <a onClick={() => showInput(`comment-id-${child1.id}`)}>
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
                               </a>
                             </div>
                           </div>
@@ -690,7 +698,7 @@ const DetailDocument = () => {
                                         }
                                         onClick={() => showInput(`comment-id-${child2.id}`)}
                                       >
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Balas</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
                                       </a>
                                       <a
                                         style={
@@ -702,20 +710,20 @@ const DetailDocument = () => {
                                         }
                                         onClick={() => deleteData(child2.id)}
                                       >
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Hapus</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
                                       </a>
                                     </div>
                                   </div>
                                 </div>
                                 {visibleInput === `comment-id-${child2.id}` && (
                                   <div id={`comment-id-${child2.id}`} className="px-4 lg:px-14 pl-40 lg:pl-[265px]">
-                                    <Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" />
+                                    <Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder={t("enterReply")} />
                                     <div className="flex flex-row gap-3">
                                       <a onClick={() => postDataChild(child2.id)}>
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Kirim</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
                                       </a>
                                       <a onClick={() => showInput(`comment-id-${child2.id}`)}>
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
                                       </a>
                                     </div>
                                   </div>
diff --git a/app/[locale]/(public)/image/detail/[slug]/page.tsx b/app/[locale]/(public)/image/detail/[slug]/page.tsx
index afbc9f97..9a119d3e 100644
--- a/app/[locale]/(public)/image/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/image/detail/[slug]/page.tsx
@@ -473,7 +473,7 @@ const DetailInfo = () => {
                   {t("by")}&nbsp;<span className="font-semibold text-black">{detailDataImage?.uploadedBy?.userLevel?.name}</span>
                 </p>
                 <p className="text-xs lg:text-sm">
-                  &nbsp;|&nbsp;{t("updateOn")}
+                  &nbsp;|&nbsp;{t("updatedOn")}
                   {detailDataImage?.updatedAt} WIB &nbsp;|&nbsp;
                 </p>
                 <p className="text-xs lg:text-sm flex justify-center items-center">
diff --git a/app/[locale]/(public)/indeks/detail/[slug]/page.tsx b/app/[locale]/(public)/indeks/detail/[slug]/page.tsx
index f9a96517..af0d0358 100644
--- a/app/[locale]/(public)/indeks/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/indeks/detail/[slug]/page.tsx
@@ -10,6 +10,7 @@ import { Icon } from "@iconify/react/dist/iconify.js";
 import { getCookiesDecrypt } from "@/lib/utils";
 import { close, loading } from "@/config/swal";
 import { Input } from "@/components/ui/input";
+import { useTranslations } from "next-intl";
 
 const IndeksDetail = () => {
   const searchParams = useSearchParams();
@@ -24,6 +25,7 @@ const IndeksDetail = () => {
   const userRoleId = getCookiesDecrypt("urie");
   const router: any = useRouter();
   const [listComments, setListComments] = useState([]);
+  const t = useTranslations("LandingPage");
 
   useEffect(() => {
     initFetch();
@@ -154,7 +156,7 @@ const IndeksDetail = () => {
       <div className="p-4 lg:px-60 lg:p-12">
         {/* Judul */}
         <div className="flex flex-col mb-5">
-          <h1 className="text-base lg:text-lg mb-2">Indeks / Detail</h1>
+          <h1 className="text-base lg:text-lg mb-2">Index / Detail</h1>
           <h1 className="flex flex-row font-bold text-center text-lg lg:text-2xl">{indeksData?.title}</h1>
         </div>
         {/* Gambar Utama */}
@@ -164,8 +166,8 @@ const IndeksDetail = () => {
         {/* Footer Informasi */}
         <div className="text-gray-500 flex border-t mt-4">
           <div className="flex mt-2">
-            <p className="text-sm lg:text-base mb-2">
-              oleh&nbsp;<span className="font-semibold text-black">{indeksData?.uploaderName}</span>&nbsp; | &nbsp;Diupdate pada {indeksData?.createdAt} WIB &nbsp;
+            <p className="text-xs lg:text-sm mb-2">
+              {t("by")}&nbsp;<span className="font-semibold text-black">{indeksData?.uploaderName}</span>&nbsp; | &nbsp;{t("updatedOn")} {indeksData?.createdAt} WIB &nbsp;
             </p>
           </div>
         </div>
@@ -180,10 +182,10 @@ const IndeksDetail = () => {
       <div className="w-full">
         <div className="flex flex-col py-5 p-0 lg:p-10 bg-[#f7f7f7]">
           <div className="gap-5 flex flex-col px-4 lg:px-16">
-            <p className="flex items-start text-bases lg:text-lg">Berikan Komentar</p>
+            <p className="flex items-start text-bases lg:text-lg">{t("comment")}</p>
             <Textarea placeholder="Type your comments here." className="flex w-full" onChange={getInputValue} value={message} />
             <button className="flex items-start bg-[#bb3523] text-white rounded-lg text-sm lg:text-base w-fit px-3 lg:px-4 py-1" onClick={() => postData()}>
-              Kirim
+              {t("send")}
             </button>
           </div>
 
@@ -202,7 +204,7 @@ const IndeksDetail = () => {
                     <p className="text-slate-500 text-sm lg:text-base mb-4">{data.message}</p>
                     <div className="gap-3">
                       <a href="javascript:void(0)" className="text-xs lg:text-sm mr-2 bg-blue-500 text-white py-1 px-2 hover:bg-blue-300 hover:text-black rounded-md" onClick={() => showInput(`comment-id-${data.id}`)}>
-                        Balas
+                        {t("reply")}
                       </a>
                       <a
                         href="javascript:void(0)"
@@ -216,15 +218,15 @@ const IndeksDetail = () => {
                         className="text-xs lg:text-sm bg-red-500 text-white py-1 px-2 hover:bg-red-300 hover:text-black rounded-md"
                         onClick={() => deleteData(data.id)}
                       >
-                        Hapus
+                        {t("delete")}
                       </a>
                     </div>
                   </div>
                 </div>
                 <div className="flex flex-row px-4 pl-[55px] lg:px-14 lg:pl-[135px] mt-2" id={`comment-id-${data.id}`}>
-                  <Input type="text" id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" />
+                  <Input type="text" id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder={t("enterReply")} />
                   <a href="javascript:void(0)" className="flex py-1 px-2 rounded-md items-center ml-2 bg-[#f7b357] text-white text-sm lg:text-base" onClick={() => postDataChild(data.id)}>
-                    Send
+                    {t("send")}
                   </a>
                 </div>
                 {data.children.length > 0
@@ -242,7 +244,7 @@ const IndeksDetail = () => {
                             <p className="text-slate-500 text-sm mb-4">{child1.message}</p>
                             <div className="gap-3">
                               <a href="javascript:void(0)" className="mr-2 text-xs lg:text-sm bg-blue-500 text-white py-1 px-2 hover:bg-blue-300 hover:text-black rounded-md" onClick={() => showInput(`comment-id-${child1.id}`)}>
-                                Balas
+                                {t("reply")}
                               </a>
                               <a
                                 href="javascript:void(0)"
@@ -256,15 +258,15 @@ const IndeksDetail = () => {
                                 }
                                 onClick={() => deleteData(child1.id)}
                               >
-                                Hapus
+                                {t("delete")}
                               </a>
                             </div>
                           </div>
                         </div>
                         <div className="flex flex-row justify-center px-4 pl-[87px] lg:px-14 lg:pl-[205px] mt-2" id={`comment-id-${child1.id}`}>
-                          <Input type="text" id={`input-comment-${child1.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" />
+                          <Input type="text" id={`input-comment-${child1.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder={t("enterReply")} />
                           <a href="javascript:void(0)" className="flex text-sm lg:text-base py-1 px-2 rounded-md items-center ml-2 bg-[#f7b357] text-white" onClick={() => postDataChild(child1.id)}>
-                            Send
+                            {t("send")}
                           </a>
                         </div>
                         {child1.children.length > 0
@@ -282,7 +284,7 @@ const IndeksDetail = () => {
                                     <p className="text-slate-500 text-sm mb-4">{child2.message}</p>
                                     <div>
                                       <a href="javascript:void(0)" className="mr-2 text-xs lg:text-sm bg-blue-500 text-white py-1 px-2 hover:bg-blue-300 hover:text-black rounded-md" onClick={() => showInput("comment-id-" + child2.id)}>
-                                        Balas
+                                        {t("reply")}
                                       </a>
                                       <a
                                         href="javascript:void(0)"
@@ -296,15 +298,15 @@ const IndeksDetail = () => {
                                         }
                                         onClick={() => deleteData(child2.id)}
                                       >
-                                        Hapus
+                                        {t("delete")}
                                       </a>
                                     </div>
                                   </div>
                                 </div>
                                 <div className="flex flex-row px-4 pl-[120px] lg:px-14 lg:pl-[270px] mt-2" id={`comment-id-${child2.id}`}>
-                                  <Input type="text" id={`comment-id-${child2.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" />
+                                  <Input type="text" id={`comment-id-${child2.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder={t("enterReply")} />
                                   <a href="javascript:void(0)" className="flex text-sm lg:text-base py-1 px-2 rounded-md items-center ml-2 bg-[#f7b357] text-white" onClick={() => postDataChild(child1.id)}>
-                                    Send
+                                    {t("send")}
                                   </a>
                                 </div>
                               </div>
@@ -320,7 +322,7 @@ const IndeksDetail = () => {
 
         {/* Konten Serupa */}
         <div className="space-x-5 flex flex-col px-4 lg:px-16 py-16 gap-5">
-          <h1 className="font-bold text-base lg:text-xl px-4 lg:px-8">Post Terkait</h1>
+          <h1 className="font-bold text-base lg:text-xl px-4 lg:px-8"> {t("relatedPosts")}</h1>
           <Carousel>
             <CarouselContent className="w-full max-w-7xl">
               {indexData?.map((relate: any) => (
diff --git a/app/[locale]/(public)/video/detail/[slug]/page.tsx b/app/[locale]/(public)/video/detail/[slug]/page.tsx
index bc54bb23..f0f17197 100644
--- a/app/[locale]/(public)/video/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/video/detail/[slug]/page.tsx
@@ -440,7 +440,7 @@ const DetailVideo = () => {
                   {t("by")}&nbsp;<span className="font-semibold text-black">{detailDataVideo?.uploadedBy?.userLevel?.name}</span>
                 </p>
                 <p className="text-xs lg:text-sm">
-                  &nbsp;|&nbsp;{t("updateOn")}
+                  &nbsp;|&nbsp;{t("updatedOn")}
                   {detailDataVideo?.updatedAt} WIB &nbsp;|&nbsp;
                 </p>
                 <p className="text-xs lg:text-sm flex justify-center items-center">
@@ -536,7 +536,7 @@ const DetailVideo = () => {
 
             {/* Tombol Bagikan */}
             <div className="flex flex-row justify-center py-3">
-              <p className="text-base font-semibold">Bagikan</p>
+              <p className="text-base font-semibold">{t("share")}</p>
               <a className="ml-8 cursor-pointer" onClick={() => handleShare("fb", `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`)}>
                 <Icon icon="brandico:facebook" height="20" className="px-auto text-red-600 text-center" />
               </a>
@@ -557,7 +557,7 @@ const DetailVideo = () => {
                     <h1 className="mb-2">{t("shareTo")}</h1>
                     <div className="flex flex-col mb-2">
                       <p className="text-base font-semibold mb-1">{t("destinationEmail")}</p>
-                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
+                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter")} />
                     </div>
                     <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
                       {t("send")}
@@ -720,7 +720,7 @@ const DetailVideo = () => {
                                         }
                                         onClick={() => deleteData(child2.id)}
                                       >
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
                                       </a>
                                     </div>
                                   </div>
diff --git a/messages/en.json b/messages/en.json
index 57ea1d12..3124deeb 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -366,7 +366,7 @@
     "previousSchedule": "Previous Schedule",
     "speaker": "Speaker :",
     "nextSchedule": "Next Schedule",
-    "by": "By",
+    "by": "Uploaded By",
     "updatedOn": "Update On",
     "creator": "Creator :",
     "delete": "Delete",
@@ -382,7 +382,10 @@
     "leaveComment": "Leave your comments here.",
     "reply": "Reply",
     "cancel": "Cancel",
-    "enterReply": "Enter Your Replay"
+    "enterReply": "Enter Your Replay",
+    "docSize": "Document Size Options",
+    "audioSize": "Audio Size Options",
+    "relatedPosts": "Related Posts"
   },
   "FilterPage": {
     "image": "Image",
diff --git a/messages/in.json b/messages/in.json
index e82fa2d9..74cb5032 100644
--- a/messages/in.json
+++ b/messages/in.json
@@ -366,7 +366,7 @@
     "previousSchedule": "Jadwal Sebelumnya",
     "speaker": "Pembicara :",
     "nextSchedule": "Jadwal Selanjutnya",
-    "by": "Oleh",
+    "by": "Diunggah Oleh",
     "updatedOn": "Diupdate pada",
     "creator": "Kreator :",
     "delete": "Hapus",
@@ -382,7 +382,10 @@
     "reply": "Balas",
     "cancel": "Batal",
     "videoSize": "Opsi Ukuran Audio Visual",
-    "enterReply": "Masukkan balasan Anda"
+    "enterReply": "Masukkan balasan Anda",
+    "docSize": "Opsi Ukuran Teks",
+    "audioSize": "Opsi Ukuran Audio",
+    "relatedPosts": "Post Terkait"
   },
   "FilterPage": {
     "image": "Foto",

From 2bb97c5a24efa5edc98c30c2fac1765f2f8eda0e Mon Sep 17 00:00:00 2001
From: sabdayagra <msabdayagra@gmail.com>
Date: Wed, 5 Feb 2025 21:33:18 +0700
Subject: [PATCH 2/3] feat: eng language

---
 app/[locale]/auth/registration/page.tsx  | 144 ++++++++++++-----------
 app/[locale]/page.tsx                    |  24 ++--
 components/landing-page/news-tickers.tsx |   4 +-
 messages/en.json                         |  58 ++++++++-
 messages/in.json                         |  59 +++++++++-
 5 files changed, 208 insertions(+), 81 deletions(-)

diff --git a/app/[locale]/auth/registration/page.tsx b/app/[locale]/auth/registration/page.tsx
index c596cfda..4d84dcfc 100644
--- a/app/[locale]/auth/registration/page.tsx
+++ b/app/[locale]/auth/registration/page.tsx
@@ -88,16 +88,16 @@ const page = () => {
   };
 
   const validationSchema = Yup.object().shape({
-    firstName: Yup.string().required("Nama Lengkap tidak boleh kosong"),
-    username: Yup.string().required("Username tidak boleh kosong"),
-    phoneNumber: Yup.string().required("Nomor Telepon tidak boleh kosong"),
-    address: Yup.string().required("Alamat tidak boleh kosong"),
-    email: Yup.string().required("Email tidak boleh kosong"),
-    provinsi: Yup.string().required("Provinsi tidak boleh kosong"),
-    kota: Yup.string().required("Kota tidak boleh kosong"),
-    kecamatan: Yup.string().required("Kecamatan tidak boleh kosong"),
-    password: Yup.string().required("Kata Sandi tidak boleh kosong"),
-    passwordConf: Yup.string().required("Konfirmasi Kata Sandi tidak boleh kosong"),
+    firstName: Yup.string().required(t("nameEmpty")),
+    username: Yup.string().required(t("usernameEmpty")),
+    phoneNumber: Yup.string().required(t("numberEmpty")),
+    address: Yup.string().required(t("addressEmpty")),
+    email: Yup.string().required(t("emailEmpty")),
+    provinsi: Yup.string().required(t("provinceEmpty")),
+    kota: Yup.string().required(t("cityEmpty")),
+    kecamatan: Yup.string().required(t("subdistrictEmpty")),
+    password: Yup.string().required(t("passwordEmpty")),
+    passwordConf: Yup.string().required(t("confirmEmpty")),
   });
 
   const formOptions = {
@@ -358,7 +358,7 @@ const page = () => {
       setEmailValidate("");
       setEmail(e);
     } else {
-      setEmailValidate("Email tidak valid");
+      setEmailValidate(t("emailValid"));
       setEmail("");
     }
   };
@@ -562,7 +562,7 @@ const page = () => {
                   : {}
               }
             >
-              <p className="text-2xl lg:text-4xl px-0 lg:px-12 font-bold ">{stepThreeActive ? "Silahkan lengkapi data pengguna" : "Silahkan registrasi terlebih dahulu"}</p>
+              <p className="text-2xl lg:text-4xl px-0 lg:px-12 font-bold ">{stepThreeActive ? t("userData") : t("registerFirst")}</p>
               <p className="px-0 lg:px-12 text-sm lg:text-base mt-2">
                 {t("alreadyHave")}{" "}
                 <Link href="/auth" className="text-red-500">
@@ -580,14 +580,14 @@ const page = () => {
                   : {}
               }
             >
-              <p className="text-black text-2xl px-0 lg:px-20 font-semibold">Masukkan Kode OTP</p>
-              <p className="text-red-500 text-sm px-0 lg:px-20">Silahkan cek inbox atau kotak spam pada email Anda.</p>
+              <p className="text-black text-2xl px-0 lg:px-20 font-semibold">{t("enterOTP")}</p>
+              <p className="text-red-500 text-sm px-0 lg:px-20">{t("checkInbox")}</p>
             </div>
           </div>
 
           <div className={`flex flex-col gap-3 px-8 lg:px-12 ${formProfile == true || stepTwoActive ? "hidden" : ""}`}>
             <div
-              className="flex flex-col"
+              className="flex flex-col px-0 lg:px-8"
               style={
                 Number(category) == 6
                   ? {}
@@ -597,11 +597,16 @@ const page = () => {
               }
             >
               <Label htmlFor="association" className="mb-2">
-                Jenis Keanggotaan <span className="text-red-500">*</span>
+                {t("member")} <span className="text-red-500">*</span>
               </Label>
-              <select className={`py-2 px-1 rounded-md border border-slate-300 bg-white ${errors.association ? "block" : ""}`} {...register("association")} id="association" onChange={(e) => setAssociation(e.target.value)}>
+              <select
+                className={`py-2 px-1 rounded-md border text-sm text-slate-400 border-slate-300 bg-white ${errors.association ? "block" : ""}`}
+                {...register("association")}
+                id="association"
+                onChange={(e) => setAssociation(e.target.value)}
+              >
                 <option disabled selected>
-                  Pilih Asosiasi
+                  {t("association")}
                 </option>
                 <option value="PWI" key="1">
                   PWI (Persatuan Wartawan Indonesia)
@@ -616,7 +621,7 @@ const page = () => {
                   AJI (Asosiasi Jurnalis Indonesia)
                 </option>
                 <option value="Wartawan" key="5">
-                  Identitas Lainnya
+                  {t("otherIdentity")}
                 </option>
               </select>
               <div className="hidden w-full mt-[0.25rem] text-lg text-[#dc3545]">{errors.association?.message}</div>
@@ -625,7 +630,7 @@ const page = () => {
             {Number(category) == 7 ? (
               <div className="px-0 lg:px-[34px]">
                 <label htmlFor="userIdentity" className="mb-3">
-                  <b>Nomor Registrasi Polri (NRP)</b> <span className="text-red-500">*</span>
+                  <b>{t("policeNumber")}</b> <span className="text-red-500">*</span>
                 </label>
                 <Input className="mt-3" autoComplete="off" placeholder="Masukan Nomor Registrasi Polri Anda" type="text" onChange={(event: any) => setPersonilNRP(event.target.value)} />
                 <p className="text-red-500">{userIdentityValidate}</p>
@@ -645,9 +650,9 @@ const page = () => {
                 }
               >
                 <Label htmlFor="journalistCertificate">
-                  Nomor Sertifikasi Wartawan <span className="text-red-500">*</span>
+                  {t("journalistNumber")} <span className="text-red-500">*</span>
                 </Label>
-                <Input className="rounded-md py-3" autoComplete="off" placeholder="Masukan Nomor Sertifikasi" type="text" onChange={(event: any) => setJournalistCertificate(event.target.value)} />
+                <Input className="rounded-md py-3" autoComplete="off" placeholder={t("inputJournalist")} type="text" onChange={(event: any) => setJournalistCertificate(event.target.value)} />
               </div>
             ) : (
               ""
@@ -656,7 +661,7 @@ const page = () => {
               <label htmlFor="email">
                 <b>Email</b> <span className="text-red-500">*</span>
               </label>
-              <Input className="w-full" autoComplete="off" placeholder="Masukkan Email Anda" type="email" onChange={(event) => checkEmail(event.target.value)} />
+              <Input className="w-full" autoComplete="off" placeholder={t("inputEmail")} type="email" onChange={(event) => checkEmail(event.target.value)} />
               <p className="text-sm text-red-500 mt-1">{emailValidate}</p>
             </div>
           </div>
@@ -685,10 +690,10 @@ const page = () => {
             </p>
             <div className="flex flex-row px-0 lg:px-28 justify-between items-center my-4">
               <a className="bg-slate-300 text-center rounded-lg mr-1 w-[200px] py-2 text-base cursor-pointer" onClick={() => handleResendOTP()}>
-                Kirim Ulang ({convertMilisecondsToHour(timerCount)})
+                {t("resending")} ({convertMilisecondsToHour(timerCount)})
               </a>
               <a className="bg-red-700 w-[200px] py-2 text-center text-white rounded-lg ml-1  cursor-pointer" onClick={() => handleVerifyOTP()}>
-                Lanjut
+                {t("next")}
               </a>
             </div>
           </div>
@@ -698,7 +703,7 @@ const page = () => {
               {Number(category) == 6 || Number(category) == 7 ? (
                 <div className="px-0 lg:px-[34px]">
                   <Label className="mb-2">
-                    {`${Number(category) == 6 ? "Nomor Sertifikasi Wartawan" : "NRP"}`}
+                    {`${Number(category) == 6 ? t("journalistNumber") : "NRP"}`}
                     <span className="text-red-500">*</span>
                   </Label>
                   <Input
@@ -706,7 +711,7 @@ const page = () => {
                     autoComplete="off"
                     className={`mb-3 ${errors.memberIdentity ? "block" : ""}`}
                     {...register("memberIdentity")}
-                    placeholder="Masukan Nomor Identitas"
+                    placeholder={t("inputNumberIdentity")}
                     onChange={(e) => handleIdentity(e.target.value)}
                     disabled
                   />
@@ -717,9 +722,9 @@ const page = () => {
               )}
               <div className="mb-4 px-0 lg:px-[34px]">
                 <Label className="mb-2">
-                  Nama Lengkap <span className="text-red-500">*</span>
+                  {t("fullName")} <span className="text-red-500">*</span>
                 </Label>
-                <Input type="text" autoComplete="off" className={` ${errors.firstName ? "block" : ""}`} {...register("firstName")} placeholder="Masukan Nama Lengkap Anda" />
+                <Input type="text" autoComplete="off" className={` ${errors.firstName ? "block" : ""}`} {...register("firstName")} placeholder={t("enterFullName")} />
                 <div className="text-red-500">{errors.firstName?.message}</div>
               </div>
               <div className="mb-4 px-0 lg:px-[34px]">
@@ -731,7 +736,7 @@ const page = () => {
                   type="text"
                   autoComplete="off"
                   className={`${errors.username ? "block" : ""}`}
-                  placeholder="Masukan Username"
+                  placeholder={t("enterUsername")}
                   onChange={(e) => {
                     setValUsername(e.target.value.trim());
                   }}
@@ -754,27 +759,27 @@ const page = () => {
             </div>
             <div className="flex flex-col px-0 lg:px-[34px]">
               <Label className="mb-2">
-                No. HP<span className="text-red-500">*</span>
+                {t("number")} <span className="text-red-500">*</span>
               </Label>
-              <Input type="number" autoComplete="off" className={`mb-3 ${errors.phoneNumber ? "block" : ""}`} {...register("phoneNumber")} placeholder="Masukan Nomor Telepon Anda" />
+              <Input type="number" autoComplete="off" className={`mb-3 ${errors.phoneNumber ? "block" : ""}`} {...register("phoneNumber")} placeholder={t("enterNumber")} />
               <div className="text-red-500">{errors.phoneNumber?.message}</div>
             </div>
             <div className="mb-4 px-0 lg:px-[34px]">
               <Label htmlFor="address" className="mb-2">
-                Alamat <span className="text-red-500">*</span>
+                {t("address")} <span className="text-red-500">*</span>
               </Label>
-              <Textarea className={` ${errors.address ? "block" : ""}`} {...register("address")} placeholder="Masukan Alamat Lengkap Anda" rows={3} />
+              <Textarea className={` ${errors.address ? "block" : ""}`} {...register("address")} placeholder={t("insertAddress")} rows={3} />
               <div className="text-red-500">{errors.address?.message}</div>
             </div>
             {Number(category) == 6 ? (
               <div className="flex flex-col gap-3 px-0 lg:px-[34px]">
                 <div className="flex flex-col mb-2">
-                  <Label htmlFor="provinsi">
-                    Institusi <span className="text-red-500">*</span>
+                  <Label htmlFor="provinsi" className="mb-2">
+                    {t("institutions")} <span className="text-red-500">*</span>
                   </Label>
-                  <select className="mb-3 p-2 border rounded-md border-slate-300 bg-white cursor-pointer" id="provinsi" onChange={(event) => handleInstituteOption(event)}>
+                  <select className="mb-3 p-2 border text-sm text-slate-400 rounded-md border-slate-300 bg-white cursor-pointer" id="provinsi" onChange={(event) => handleInstituteOption(event)}>
                     <option disabled selected>
-                      Pilih Institusi
+                      {t("selectInst")}
                     </option>
                     {institution.map((row: any) => (
                       <option value={row.id} key={row.id}>
@@ -782,7 +787,7 @@ const page = () => {
                       </option>
                     ))}
                     <option value="0" key="0">
-                      Nama Institusi Lainnya
+                      {t("otherInst")}
                     </option>
                   </select>
                 </div>
@@ -797,33 +802,33 @@ const page = () => {
                   }
                 >
                   <Label htmlFor="alamat" className="mb-2">
-                    Nama Institusi <span className="text-red-500">*</span>
+                    {t("instName")} <span className="text-red-500">*</span>
                   </Label>
                   <Input className="mb-3" autoComplete="off" placeholder="Masukan Nama Lengkap Institusi Anda" type="text" onChange={(event) => setCustomInstituteName(event.target.value)} />
                 </div>
                 <div>
                   <Label htmlFor="alamat" className="mb-2">
-                    Alamat Institusi <span className="text-red-500">*</span>
+                    {t("instAddress")} <span className="text-red-500">*</span>
                   </Label>
-                  <Textarea className="mb-3" placeholder="Masukan Alamat Lengkap Institusi Anda" rows={3} value={institusiAddress} onChange={(event) => setInstitusiAddress(event.target.value)} />
+                  <Textarea className="mb-3" placeholder={t("addressInst")} rows={3} value={institusiAddress} onChange={(event) => setInstitusiAddress(event.target.value)} />
                 </div>
               </div>
             ) : (
               ""
             )}
             <div className="flex flex-col px-0 lg:px-[34px]">
-              <label htmlFor="provinsi" className="mb-2">
-                Provinsi <span className="text-red-500">*</span>
+              <label htmlFor="provinsi" className="mb-2 ">
+                {t("province")} <span className="text-red-500">*</span>
               </label>
               <select
-                className={`mb-3 p-2 border rounded-md border-slate-300 bg-white cursor-pointer ${errors.provinsi ? "block" : ""}`}
+                className={`mb-3 p-2 border rounded-md text-sm text-slate-400 border-slate-300 bg-white cursor-pointer ${errors.provinsi ? "block" : ""}`}
                 {...register("provinsi")}
                 id="provinsi"
                 name="provinsi"
                 onChange={(event) => getCity(event.target.value)}
               >
                 <option disabled selected>
-                  Pilih Provinsi
+                  {t("selectProv")}
                 </option>
                 {province?.map((row: any) => (
                   <option value={row.id} key={row.id}>
@@ -835,11 +840,16 @@ const page = () => {
             </div>
             <div className="flex flex-col px-0 lg:px-[34px]">
               <label htmlFor="kota" className="mb-2">
-                Kota/Kabupaten <span className="text-red-500">*</span>
+                {t("city")} <span className="text-red-500">*</span>
               </label>
-              <select className={`mb-3 p-2 border rounded-md border-slate-300 bg-white cursor-pointer ${errors.kota ? "block" : ""}`} {...register("kota")} id="kota" onChange={(event) => getDistricts(event.target.value)}>
+              <select
+                className={`mb-3 p-2 border text-sm text-slate-400 rounded-md border-slate-300 bg-white cursor-pointer ${errors.kota ? "block" : ""}`}
+                {...register("kota")}
+                id="kota"
+                onChange={(event) => getDistricts(event.target.value)}
+              >
                 <option disabled selected>
-                  Pilih Kota/Kabupaten
+                  {t("selectCity")}
                 </option>
                 {city?.map((row: any) => (
                   <option value={row.id} key={row.id}>
@@ -851,11 +861,11 @@ const page = () => {
             </div>
             <div className="flex flex-col px-0 lg:px-[34px]">
               <label htmlFor="kecamatan" className="mb-2">
-                Kecamatan <span className="text-red-500">*</span>
+                {t("subdistrict")} <span className="text-red-500">*</span>
               </label>
-              <select className={`p-2 border rounded-md border-slate-300 bg-white cursor-pointer ${errors.kecamatan ? "block" : ""}`} {...register("kecamatan")} id="kecamatan">
+              <select className={`p-2 border text-sm text-slate-400 rounded-md border-slate-300 bg-white cursor-pointer ${errors.kecamatan ? "block" : ""}`} {...register("kecamatan")} id="kecamatan">
                 <option disabled selected>
-                  Pilih Kecamatan
+                  {t("selectSub")}
                 </option>
                 {districts?.map((row: any) => (
                   <option value={row.id} key={row.id}>
@@ -896,7 +906,7 @@ const page = () => {
             </div> */}
             <div className="mt-3.5 space-y-2 px-0 lg:px-[34px]">
               <Label htmlFor="password" className="mb-2 font-medium text-default-600">
-                Kata Sandi <span className="text-red-500">*</span>
+                {t("password")} <span className="text-red-500">*</span>
               </Label>
               <div className="relative">
                 <Input
@@ -905,7 +915,7 @@ const page = () => {
                   autoComplete="off"
                   className={` ${errors.password ? "block" : ""}`}
                   {...register("password")}
-                  placeholder="Masukan Kata Sandi"
+                  placeholder={t("inputPass")}
                   onChange={(e) => {
                     setValPassword(e.target.value.trim());
                   }}
@@ -954,7 +964,7 @@ const page = () => {
             </div> */}
             <div className="mt-3.5 space-y-2 px-0 lg:px-[34px]">
               <Label htmlFor="password" className="mb-2 font-medium text-default-600">
-                Konfirmasi Kata Sandi <span className="text-red-500">*</span>
+                {t("confirmPass")} <span className="text-red-500">*</span>
               </Label>
               <div className="relative">
                 <Input
@@ -963,7 +973,7 @@ const page = () => {
                   autoComplete="off"
                   className={` ${errors.passwordConf ? "block" : ""}`}
                   {...register("passwordConf")}
-                  placeholder="Masukan Kata Sandi yang Sama"
+                  placeholder={t("samePass")}
                   onChange={(e) => {
                     setValPasswordConf(e.target.value.trim());
                   }}
@@ -991,11 +1001,11 @@ const page = () => {
                   setIsValidPassword(isValid);
                 }}
                 messages={{
-                  minLength: "Password harus lebih dari 8 karakter",
-                  specialChar: "Password harus memiliki spesial karakter",
-                  number: "Password harus memiliki angka",
-                  capital: "Password harus memiliki huruf kapital",
-                  match: "Password sama",
+                  minLength: t("passCharacter"),
+                  specialChar: t("passSpecial"),
+                  number: t("passNumber"),
+                  capital: t("passCapital"),
+                  match: t("passSame"),
                 }}
               />
             </div>
@@ -1013,13 +1023,13 @@ const page = () => {
           >
             <div className="text-center mb-2 px-[34px]">
               <p className="text-sm lg:text-base">
-                Dengan mendaftar, saya telah menyetujui <br />{" "}
+                {t("byRegis")} <br />{" "}
                 <a href="/privacy" target="_blank" className="text-red-500">
-                  <b>Syarat dan Ketentuan</b>
+                  <b>{t("terms")}</b>
                 </a>{" "}
-                serta{" "}
+                {t("and")}{" "}
                 <a href="/privacy" target="_blank" className="text-red-500">
-                  <b>Kebijakan Privasi</b>
+                  <b>{t("privacy")}</b>
                 </a>
               </p>
             </div>
@@ -1032,7 +1042,7 @@ const page = () => {
                   setStepTwoActive(true);
                 }}
               >
-                Kirim OTP
+                {t("send")} OTP
               </a>
             </div>
           </div>
@@ -1047,7 +1057,7 @@ const page = () => {
             }
           >
             <Button type="submit" className="border w-[550px] text-center bg-red-700 text-white hover:bg-white hover:text-red-700 ">
-              Daftar
+              {t("register")}
             </Button>
           </div>
         </div>
diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index 1e9bb1ec..a9562683 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -17,17 +17,19 @@ const Home = ({ params: { locale } }: { params: { locale: string } }) => {
   return (
     <MountedProvider isProtected={false}>
       <ReactLenis root>
-        <Navbar />
-        <NewsTicker />
-        <Hero />
-        <SearchSection />
-        <NewContent group="mabes" type="latest" />
-        <NewContent group="mabes" type="popular" />
-        {/* <PopularContent /> */}
-        <ContentCategory group="mabes" />
-        <Coverage />
-        <Division />
-        <Footer />
+        <div className="pb-14">
+          <Navbar />
+          <Hero />
+          <SearchSection />
+          <NewContent group="mabes" type="latest" />
+          <NewContent group="mabes" type="popular" />
+          {/* <PopularContent /> */}
+          <ContentCategory group="mabes" />
+          <Coverage />
+          <Division />
+          <Footer />
+          <NewsTicker />
+        </div>
       </ReactLenis>
     </MountedProvider>
   );
diff --git a/components/landing-page/news-tickers.tsx b/components/landing-page/news-tickers.tsx
index b1458c60..13171697 100644
--- a/components/landing-page/news-tickers.tsx
+++ b/components/landing-page/news-tickers.tsx
@@ -4,11 +4,13 @@ import { getHeroData, listCarousel } from "@/service/landing/landing";
 import { formatDateToIndonesian, textEllipsis } from "@/utils/globals";
 import { useEffect, useState } from "react";
 import { Icon } from "../ui/icon";
+import { useTranslations } from "next-intl";
 
 export default function NewsTicker() {
   const [article, setArticle] = useState<any>([]);
   const [currentNewsIndex, setCurrentNewsIndex] = useState(0);
   const [animate, setAnimate] = useState(false);
+  const t = useTranslations("LandingPage");
 
   useEffect(() => {
     async function getArticle() {
@@ -47,7 +49,7 @@ export default function NewsTicker() {
   return (
     <div className="fixed bottom-0 z-50 flex flex-row h-[60px] gap-3 w-full justify-between dark:bg-stone-800 bg-gray-50">
       <div className="relative px-4 py-2 font-semibold text-xs lg:text-sm flex items-center bg-[#bb3523] text-white w-[30%] lg:w-[10%]">
-        <span className="mr-2"></span> BREAKING NEWS
+        <span className="mr-2"></span> {t("breakingNews")}
         <div className="absolute right-0 top-0 h-full w-4 bg-[#bb3523] transform translate-x-full clip-path-triangle"></div>
       </div>
       <div className={`w-full  px-5 py-1 flex flex-col gap-1 transition-transform duration-300 ${animate ? "opacity-0 translate-y-5" : "opacity-100 translate-y-0"}`}>
diff --git a/messages/en.json b/messages/en.json
index bcce9f33..d45e8ccb 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -398,7 +398,63 @@
     "next": "Next",
     "categoryReg": "Registration Category",
     "selectOne": "Please Select One",
-    "alreadyHave": "Already have an account?"
+    "alreadyHave": "Already have an account?",
+    "userData": "Please Complete the User Data",
+    "registerFirst": "Please Register First",
+    "byRegis": "By registering, I have agreed to the",
+    "terms": "Terms and Conditions",
+    "enterOTP": "Enter OTP Code",
+    "checkInbox": "Please check your email inbox or spam box.",
+    "resending": "Resending",
+    "fullName": "Full Name",
+    "enterFullName": "Insert your full name",
+    "enterUsername": "Insert your Username",
+    "number": "Mobile phone number",
+    "enterNumber": "Insert Your Phone Number",
+    "enterEmail": "Insert your Email",
+    "address": "Address",
+    "insertAddress": "Insert Your Address",
+    "province": "Province",
+    "selectProv": "Select Province",
+    "city": "City / District",
+    "selectCity": "Select City / District",
+    "subdistrict": "Subdistrict",
+    "selectSub": "Select Subdistrict",
+    "confirmPass": "Confirm Password",
+    "inputPass": "Input Password",
+    "samePass": "Input Same Password",
+    "passCharacter": "Password must be more than 8 characters",
+    "passSpecial": "Password must have special characters",
+    "passNumber": "Password must have numbers",
+    "passCapital": "Password must have capital letters",
+    "passSame": "Passwords are the same",
+    "member": "Membership Types",
+    "association": "Select Association",
+    "journalistNumber": "Journalist Certification Number",
+    "otherIdentity": "Other Identities",
+    "inputJournalist": "Input Certification Number",
+    "inputNumberIdentity": "Input Identity Number",
+    "institutions": "Institutions",
+    "selectInst": "Select Institutions",
+    "otherInst": "Other Institution Names",
+    "instAddress": "Institutions Address",
+    "instName": "Institution Name",
+    "inputEmail": "Input your Email",
+    "emailValid": "Invalid Email",
+    "nameEmpty": "Full Name Cannot be Empty",
+    "usernameEmpty": "Username Cannot be Empty",
+    "numberEmpty": "Phone Number cannot be empty",
+    "addressEmpty": "Address cannot be empty",
+    "emailEmpty": "Email cannot be empty",
+    "provinceEmpty": "Province cannot be empty",
+    "cityEmpty": "City/district cannot be empty",
+    "subdistrictEmpty": "Subdistrict cannot be empty",
+    "passwordEmpty": "Password cannot be empty",
+    "confirmEmpty": "Confirm Password cannot be empty",
+    "addressInst": "Input the complete address of your institution",
+    "identityEmpty": "Identity number cannot be empty",
+    "policeNumber": "Police Registration Number",
+    "breakingNews": "BREAKING NEWS"
   },
   "FilterPage": {
     "image": "Image",
diff --git a/messages/in.json b/messages/in.json
index e9631cc1..9a0fba6d 100644
--- a/messages/in.json
+++ b/messages/in.json
@@ -398,7 +398,64 @@
     "next": "Selanjutnya",
     "categoryReg": "Kategori Registrasi",
     "selectOne": "Silahkan Pilih Salah Satu",
-    "alreadyHave": "Sudah Memiliki Akun?"
+    "alreadyHave": "Sudah Memiliki Akun?",
+    "userData": "Silahkan Lengkapi Data Pengguna",
+    "registerFirst": "Silahkan Daftar terlebih Dahulu",
+    "byRegis": "Dengan mendaftar, saya telah menyetujui",
+    "terms": "Syarat dan Ketentuan",
+    "enterOTP": "Masukkan kode OTP",
+    "checkInbox": "Silahkan cek inbox atau kotak spam pada email Anda.",
+    "resending": "Kirim Ulang",
+    "fullName": "Nama Lengkap",
+    "enterFullName": "Masukkan Nama Lengkap Anda",
+    "enterUsername": "Masukkan Username Anda",
+    "number": "Nomor Telepon",
+    "enterNumber": "Masukkan Nomor Telepon Anda",
+    "enterEmail": "Masukkan Email Anda",
+    "address": "Alamat",
+    "insertAddress": "Masukkan Alamat Lengkap Anda",
+    "province": "Provinsi",
+    "selectProv": "Pilih Provinsi",
+    "city": "Kota / Kabupaten",
+    "selectCity": "Pilih Kota / Kabupaten",
+    "subdistrict": "Kecamatan",
+    "selectSub": "Pilih Kecamatan",
+    "confirmPass": "Konfirmasi Kata Sandi",
+    "inputPass": "Masukkan Kata Sandi",
+    "samePass": "Masukkan Kata Sandi yang Sama",
+    "passCharacter": "Kata Sandi harus lebih dari 8 karakter",
+    "passSpecial": "Kata Sandi harus memiliki spesial karakter",
+    "passNumber": "Kata Sandi harus memiliki angka",
+    "passCapital": "Kata Sandi harus memiliki huruf kapital",
+    "passSame": "Kata Sandi Sama",
+    "member": "Jenis Keanggotaan",
+    "association": "Pilih Asosiasi",
+    "otherIdentity": "Identitas Lainnya",
+    "inputJournalist": "Masukkan Nomor Sertifikasi",
+    "journalistNumber": "Nomor Sertifikasi Wartawan",
+    "inputNumberIdentity": "Masukkan Nomor Identitas",
+    "institutions": "Institusi",
+    "selectInst": "Pilih Institusi",
+    "otherInst": "Nama Institusi Lainnya",
+    "instAddress": "Alamat Institusi",
+    "instName": "Nama Institusi",
+    "inputEmail": "Masukkan Email Anda",
+    "emailValid": "Email Tidak Valid",
+    "nameEmpty": "Nama Lengkap Tidak Boleh Kosong",
+    "usernameEmpty": "Username Tidak Boleh Kosong",
+    "numberEmpty": "Nomor Telepon Tidak Boleh Kosong",
+    "addressEmpty": "Alamat Tidak boleh Kosong",
+    "emailEmpty": "Email Tidak Boleh Kosong",
+    "provinceEmpty": "Provinsi Tidak Boleh Kosong",
+    "cityEmpty": "Kota/Kabupaten tidak boleh kosong",
+    "subdistrictEmpty": "Kecamatan tidak boleh kosong",
+    "passwordEmpty": "Kata Sandi tidak boleh kosong",
+    "confirmEmpty": "Konfirmasi Kata Sandi tidak boleh kosong",
+    "addressInst": "Masukkan Alamat lengkap institusi anda",
+    "identityEmpty": "Nomor identitas tidak boleh kosong",
+    "policeNumber": "Nomor Registrasi Polri (NRP)",
+    "breakingNews": "BERITA TERKINI"
+
   },
   "FilterPage": {
     "image": "Foto",

From 50ca7cfc59fc36645a28a401bc161caea32fc8c3 Mon Sep 17 00:00:00 2001
From: sabdayagra <msabdayagra@gmail.com>
Date: Thu, 6 Feb 2025 17:34:22 +0700
Subject: [PATCH 3/3] fix: change img to Image

---
 .../content-management/download/page.tsx      |  9 ++--
 .../content-management/galery/page.tsx        |  9 ++--
 .../content-management/rewrite/page.tsx       |  3 +-
 .../(public)/image/detail/[slug]/page.tsx     | 11 ++---
 app/[locale]/(public)/image/filter/page.tsx   |  3 +-
 .../(public)/indeks/detail/[slug]/page.tsx    | 11 ++---
 app/[locale]/(public)/indeks/page.tsx         | 11 ++---
 .../(public)/profile/change-profile/page.tsx  | 41 ++++---------------
 .../(public)/video/detail/[slug]/page.tsx     |  7 ++--
 app/[locale]/(public)/video/filter/page.tsx   |  3 +-
 components/landing-page/content-category.tsx  |  5 ++-
 components/landing-page/hero.tsx              |  5 ++-
 components/landing-page/navbar.tsx            | 22 +++++-----
 components/landing-page/new-content.tsx       | 17 ++++----
 14 files changed, 72 insertions(+), 85 deletions(-)

diff --git a/app/[locale]/(public)/content-management/download/page.tsx b/app/[locale]/(public)/content-management/download/page.tsx
index d13b7b27..729e70dc 100644
--- a/app/[locale]/(public)/content-management/download/page.tsx
+++ b/app/[locale]/(public)/content-management/download/page.tsx
@@ -18,6 +18,7 @@ import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
 import ImageBlurry from "@/components/ui/image-blurry";
+import Image from "next/image";
 
 const Galery = (props: any) => {
   const [profile, setProfile] = useState<any>();
@@ -376,7 +377,7 @@ const Galery = (props: any) => {
                   </div>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
                   </p>
                 )
               ) : selectedTab == "audio" ? (
@@ -456,7 +457,7 @@ const Galery = (props: any) => {
                   </div>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
                   </p>
                 )
               ) : selectedTab == "image" ? (
@@ -517,7 +518,7 @@ const Galery = (props: any) => {
                   </div>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
                   </p>
                 )
               ) : contentDocument.length > 0 ? (
@@ -588,7 +589,7 @@ const Galery = (props: any) => {
                 </div>
               ) : (
                 <p className="flex items-center justify-center">
-                  <img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                  <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
                 </p>
               )}
             </div>
diff --git a/app/[locale]/(public)/content-management/galery/page.tsx b/app/[locale]/(public)/content-management/galery/page.tsx
index 774adc29..adedbe35 100644
--- a/app/[locale]/(public)/content-management/galery/page.tsx
+++ b/app/[locale]/(public)/content-management/galery/page.tsx
@@ -20,6 +20,7 @@ import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
 import ImageBlurry from "@/components/ui/image-blurry";
+import Image from "next/image";
 
 const Galery = (props: any) => {
   const [profile, setProfile] = useState<any>();
@@ -382,7 +383,7 @@ const Galery = (props: any) => {
                   </div>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
                   </p>
                 )
               ) : selectedTab == "audio" ? (
@@ -460,7 +461,7 @@ const Galery = (props: any) => {
                   </div>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
                   </p>
                 )
               ) : selectedTab == "image" ? (
@@ -521,7 +522,7 @@ const Galery = (props: any) => {
                   </div>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
                   </p>
                 )
               ) : contentDocument.length > 0 ? (
@@ -592,7 +593,7 @@ const Galery = (props: any) => {
                 </div>
               ) : (
                 <p className="flex items-center justify-center">
-                  <img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                  <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
                 </p>
               )}
             </div>
diff --git a/app/[locale]/(public)/content-management/rewrite/page.tsx b/app/[locale]/(public)/content-management/rewrite/page.tsx
index c599c737..74230f44 100644
--- a/app/[locale]/(public)/content-management/rewrite/page.tsx
+++ b/app/[locale]/(public)/content-management/rewrite/page.tsx
@@ -17,6 +17,7 @@ import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
 import ImageBlurry from "@/components/ui/image-blurry";
+import Image from "next/image";
 
 const page = () => {
   const [, setProfile] = useState();
@@ -259,7 +260,7 @@ const page = () => {
               </div>
             ) : (
               <p className="flex items-center justify-center">
-                <img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
               </p>
             )}
           </div>
diff --git a/app/[locale]/(public)/image/detail/[slug]/page.tsx b/app/[locale]/(public)/image/detail/[slug]/page.tsx
index 9a119d3e..15442eff 100644
--- a/app/[locale]/(public)/image/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/image/detail/[slug]/page.tsx
@@ -20,6 +20,7 @@ import Swal from "sweetalert2";
 import parse from "html-react-parser";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useTranslations } from "next-intl";
+import Image from "next/image";
 
 const DetailInfo = () => {
   const MySwal = withReactContent(Swal);
@@ -444,7 +445,7 @@ const DetailInfo = () => {
               </div>
             ) : (
               <div className="relative">
-                <img src={detailDataImage?.files[selectedImage]?.url} alt="Main" className="rounded-lg w-auto h-fit" />
+                <Image width={2560} height={1440} src={detailDataImage?.files[selectedImage]?.url} alt="Main" className="rounded-lg w-auto h-fit" />
                 <div className="absolute top-4 left-4"></div>
               </div>
             )}
@@ -460,7 +461,7 @@ const DetailInfo = () => {
               <div className="py-4 flex flex-row gap-3">
                 {detailDataImage?.files?.map((file: any, index: number) => (
                   <a onClick={() => setSelectedImage(index)} key={file?.id}>
-                    <img src={file?.url} className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600" />
+                    <Image width={1920} height={1080} alt="image-small" src={file?.url} className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600" />
                   </a>
                 ))}
               </div>
@@ -614,7 +615,7 @@ const DetailInfo = () => {
             {listSuggestion?.map((data: any) => (
               <div className="flex flex-col">
                 <div className="flex flex-row mt-2 px-4 lg:px-14">
-                  <img src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
+                  <Image width={1080} height={1080} src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
                   <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                     <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                       {Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
@@ -663,7 +664,7 @@ const DetailInfo = () => {
                   ? data.children?.map((child1: any) => (
                       <div className="flex flex-col">
                         <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
-                          <img src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" />
+                          <Image width={1080} height={1080} src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" />
                           <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                             <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                               {" "}
@@ -718,7 +719,7 @@ const DetailInfo = () => {
                           ? child1.children?.map((child2: any) => (
                               <div className="">
                                 <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
-                                  <img src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
+                                  <Image width={1080} height={1080} src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
                                   <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                                     <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                                       {" "}
diff --git a/app/[locale]/(public)/image/filter/page.tsx b/app/[locale]/(public)/image/filter/page.tsx
index 50723aef..4e4e24b9 100644
--- a/app/[locale]/(public)/image/filter/page.tsx
+++ b/app/[locale]/(public)/image/filter/page.tsx
@@ -17,6 +17,7 @@ import { close, loading } from "@/config/swal";
 import { useTranslations } from "next-intl";
 import ImageBlurry from "@/components/ui/image-blurry";
 import { Skeleton } from "@/components/ui/skeleton";
+import Image from "next/image";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -537,7 +538,7 @@ const FilterPage = () => {
                     </div>
                   ) : (
                     <p className="flex items-center justify-center text-black">
-                      <img src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" />
+                      <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" />
                     </p>
                   )}
                 </>
diff --git a/app/[locale]/(public)/indeks/detail/[slug]/page.tsx b/app/[locale]/(public)/indeks/detail/[slug]/page.tsx
index af0d0358..4cc35e68 100644
--- a/app/[locale]/(public)/indeks/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/indeks/detail/[slug]/page.tsx
@@ -11,6 +11,7 @@ import { getCookiesDecrypt } from "@/lib/utils";
 import { close, loading } from "@/config/swal";
 import { Input } from "@/components/ui/input";
 import { useTranslations } from "next-intl";
+import Image from "next/image";
 
 const IndeksDetail = () => {
   const searchParams = useSearchParams();
@@ -161,7 +162,7 @@ const IndeksDetail = () => {
         </div>
         {/* Gambar Utama */}
         <div className="flex items-center justify-center">
-          <img src={indeksData?.thumbnailLink} alt="Main" className="h-fit lg:h-[550px] w-full rounded-lg" />
+          <Image width={2560} height={1440} src={indeksData?.thumbnailLink} alt="Main" className="h-fit lg:h-[550px] w-full rounded-lg" />
         </div>
         {/* Footer Informasi */}
         <div className="text-gray-500 flex border-t mt-4">
@@ -195,7 +196,7 @@ const IndeksDetail = () => {
             {listComments?.map((data: any) => (
               <div className="flex flex-col">
                 <div className="flex flex-row mt-2 px-4 lg:px-14">
-                  <img className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" />
+                  <Image width={512} height={512} className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" />
                   <div className="border border-slate-300 w-full p-4 bg-white gap-1">
                     <p className="flex justify-between text-sm text-slate-500 lg:text-base border-b-2 border-slate-200 mb-2">
                       <b>{Number(data.commentFrom?.roleId) == 2 || Number(data.commentFrom?.roleId) == 3 || Number(data.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : data.commentFrom?.fullname}</b>
@@ -233,7 +234,7 @@ const IndeksDetail = () => {
                   ? data.children?.map((child1: any) => (
                       <div className="flex flex-col">
                         <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-12 lg:pl-32">
-                          <img className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" />
+                          <Image width={512} height={512} className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" />
                           <div className="border border-slate-300 w-full p-4 bg-white gap-1">
                             <p className="flex justify-between text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                               <b>{Number(child1.commentFrom?.roleId) == 2 || Number(child1.commentFrom?.roleId) == 3 || Number(child1.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.commentFrom?.fullname}</b>
@@ -273,7 +274,7 @@ const IndeksDetail = () => {
                           ? child1.children?.map((child2: any) => (
                               <div className="flex flex-col">
                                 <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-20 lg:pl-48">
-                                  <img className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" />
+                                  <Image width={512} height={512} className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" />
                                   <div className="border border-slate-300 w-full p-4 bg-white gap-2">
                                     <p className="flex justify-between text-slate-500 text-xs lg:text-base border-b-2 border-slate-200 mb-2">
                                       <b>{Number(child2.commentFrom?.roleId) == 2 || Number(child2.commentFrom?.roleId) == 3 || Number(child2.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.commentFrom?.fullname}</b>
@@ -328,7 +329,7 @@ const IndeksDetail = () => {
               {indexData?.map((relate: any) => (
                 <CarouselItem key={relate?.id} className="md:basis-1/2 lg:basis-1/3">
                   <Link href={`/indeks/detail/${relate?.slug}`} className="relative group overflow-hidden shadow-md hover:shadow-lg">
-                    <img src={relate?.thumbnailLink} className="w-full rounded-lg h-40 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
+                    <Image alt="" width={2560} height={1440} src={relate?.thumbnailLink} className="w-full rounded-lg h-40 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
                     <div className="absolute bottom-0 left-0 right-0 bg-gray-600 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2">
                       <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{relate?.categoryName}</span>
                       <h1 className="text-sm lg:text-lg mb-2 font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{relate?.title}</h1>
diff --git a/app/[locale]/(public)/indeks/page.tsx b/app/[locale]/(public)/indeks/page.tsx
index 596c1401..2e471bdc 100644
--- a/app/[locale]/(public)/indeks/page.tsx
+++ b/app/[locale]/(public)/indeks/page.tsx
@@ -4,6 +4,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { Link } from "@/i18n/routing";
 import { getIndeksData } from "@/service/landing/landing";
 import { formatDateToIndonesian } from "@/utils/globals";
+import Image from "next/image";
 import { usePathname } from "next/navigation";
 import React, { useEffect, useState } from "react";
 
@@ -53,14 +54,14 @@ const Indeks: React.FC = () => {
               (indeks: any, index: number) =>
                 index == count && (
                   <div key={indeks?.id} className="relative h-[310px] lg:h-[435px]">
-                    <img src={indeks?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[435px] rounded-lg object-cover" />
+                    <Image width={2560} height={1440} src={indeks?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[435px] rounded-lg object-cover" />
                     <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
                       <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">{indeks?.categoryName}</span>
                       <Link href={`/indeks/detail/${indeks?.slug}`}>
                         <h2 className="text-2xl font-bold mt-2">{indeks?.title}</h2>
                       </Link>
-                      <p className="text-xs flex flex-row items-center gap-1 mt-1 ml-2">
-                        {formatDateToIndonesian(new Date(indeks?.createdAt))} {indeks?.timezone ? indeks?.timezone : "WIB"}|{" "}
+                      <p className="text-xs flex flex-row items-center gap-1 mt-1">
+                        {formatDateToIndonesian(new Date(indeks?.createdAt))} {indeks?.timezone ? indeks?.timezone : "WIB"} | {" "}
                         <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
                           <path
                             fill="currentColor"
@@ -91,7 +92,7 @@ const Indeks: React.FC = () => {
                 (indeksRight: any, index: number) =>
                   (index == count + 1 || index == count + 2) && (
                     <div key={indeksRight?.id} className="relative h-[310px] lg:h-[215px]">
-                      <img src={indeksRight?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[215px] rounded-lg " />
+                      <Image width={1920} height={1080} src={indeksRight?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[215px] rounded-lg " />
                       <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
                         <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">{indeksRight?.categoryName}</span>
                         <Link href={`/indeks/detail/${indeksRight?.slug}`}>
@@ -148,7 +149,7 @@ const Indeks: React.FC = () => {
               (indeksBottom: any, index: number) =>
                 index < 3 && (
                   <div key={indeksBottom?.id} className="flex flex-col md:flex-row items-start p-4 gap-4">
-                    <img src={indeksBottom?.thumbnailLink} alt="" className="h-40 object-cover rounded-lg w-full lg:w-full lg:h-[300px]" />
+                    <Image width={2560} height={1440} src={indeksBottom?.thumbnailLink} alt="" className="h-40 object-cover rounded-lg w-full lg:w-full lg:h-[300px]" />
                     <div className="flex flex-col justify-between w-full">
                       <p className="text-sm">{indeksBottom?.date}</p>
                       <Link href={`/indeks/detail/${indeksBottom?.slug}`} className="text-2xl font-semibold text-gray-800">
diff --git a/app/[locale]/(public)/profile/change-profile/page.tsx b/app/[locale]/(public)/profile/change-profile/page.tsx
index f5c8688f..a546960b 100644
--- a/app/[locale]/(public)/profile/change-profile/page.tsx
+++ b/app/[locale]/(public)/profile/change-profile/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 import { Link } from "@/components/navigation";
+import Image from "next/image";
 import React, { useState } from "react";
 
 const ChangeProfile: React.FC = () => {
@@ -36,55 +37,29 @@ const ChangeProfile: React.FC = () => {
 
       <div className="flex justify-center gap-4 mb-8">
         <Link href={"/profile"}>
-          <button className="border border-red-700 text-red-700 px-4 py-2 rounded">
-            User Profile
-          </button>
+          <button className="border border-red-700 text-red-700 px-4 py-2 rounded">User Profile</button>
         </Link>
         <Link href={"/profile/change-profile"}>
-          <button className="bg-red-700 text-white px-4 py-2 rounded">
-            Ubah Foto
-          </button>
+          <button className="bg-red-700 text-white px-4 py-2 rounded">Ubah Foto</button>
         </Link>
         <Link href={"/profile/change-password"}>
-          <button className="border border-red-700 text-red-700 px-4 py-2 rounded">
-            Ubah Password
-          </button>
+          <button className="border border-red-700 text-red-700 px-4 py-2 rounded">Ubah Password</button>
         </Link>
       </div>
 
       <div className="w-80 mx-auto bg-gray-900 text-white shadow-md p-8 rounded">
         <div className="flex justify-center mb-6">
           <div className="w-40 h-40 rounded-full border border-gray-300 flex items-center justify-center">
-            {selectedImage ? (
-              <img
-                src={URL.createObjectURL(selectedImage)}
-                alt="Preview"
-                className="w-full h-full rounded-full object-cover"
-              />
-            ) : (
-              <span className="text-gray-500">No Image</span>
-            )}
+            {selectedImage ? <Image width={1920} height={1080} src={URL.createObjectURL(selectedImage)} alt="Preview" className="w-full h-full rounded-full object-cover" /> : <span className="text-gray-500">No Image</span>}
           </div>
         </div>
 
         <div className="flex justify-center gap-4">
-          <input
-            type="file"
-            id="upload"
-            accept="image/*"
-            className="hidden"
-            onChange={handleImageChange}
-          />
-          <label
-            htmlFor="upload"
-            className="bg-blue-600 text-white px-4 py-2 rounded cursor-pointer"
-          >
+          <input type="file" id="upload" accept="image/*" className="hidden" onChange={handleImageChange} />
+          <label htmlFor="upload" className="bg-blue-600 text-white px-4 py-2 rounded cursor-pointer">
             Ganti Foto
           </label>
-          <button
-            onClick={handleDelete}
-            className="border border-red-700 text-red-700 px-4 py-2 rounded"
-          >
+          <button onClick={handleDelete} className="border border-red-700 text-red-700 px-4 py-2 rounded">
             Hapus Foto
           </button>
         </div>
diff --git a/app/[locale]/(public)/video/detail/[slug]/page.tsx b/app/[locale]/(public)/video/detail/[slug]/page.tsx
index f0f17197..da19244c 100644
--- a/app/[locale]/(public)/video/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/video/detail/[slug]/page.tsx
@@ -20,6 +20,7 @@ import withReactContent from "sweetalert2-react-content";
 import Swal from "sweetalert2";
 import parse from "html-react-parser";
 import { useTranslations } from "next-intl";
+import Image from "next/image";
 
 const DetailVideo = () => {
   const [selectedSize, setSelectedSize] = useState<string>("L");
@@ -586,7 +587,7 @@ const DetailVideo = () => {
             {listSuggestion?.map((data: any) => (
               <div className="flex flex-col">
                 <div className="flex flex-row mt-2 px-4 lg:px-14">
-                  <img src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
+                  <Image width={1080} height={1080} src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
                   <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                     <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                       {Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
@@ -635,7 +636,7 @@ const DetailVideo = () => {
                   ? data.children?.map((child1: any) => (
                       <div className="flex flex-col">
                         <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
-                          <img src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" />
+                          <Image width={1080} height={1080} src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" />
                           <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                             <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                               {" "}
@@ -689,7 +690,7 @@ const DetailVideo = () => {
                           ? child1.children?.map((child2: any) => (
                               <div className="">
                                 <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
-                                  <img src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
+                                  <Image width={1080} height={1080} src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
                                   <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                                     <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                                       {" "}
diff --git a/app/[locale]/(public)/video/filter/page.tsx b/app/[locale]/(public)/video/filter/page.tsx
index 1552cc5a..2d711740 100644
--- a/app/[locale]/(public)/video/filter/page.tsx
+++ b/app/[locale]/(public)/video/filter/page.tsx
@@ -17,6 +17,7 @@ import { close, loading } from "@/config/swal";
 import { useTranslations } from "next-intl";
 import ImageBlurry from "@/components/ui/image-blurry";
 import { Skeleton } from "@/components/ui/skeleton";
+import Image from "next/image";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -562,7 +563,7 @@ const FilterPage = () => {
                   </div>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <img src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" />
+                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" />
                   </p>
                 )}
               </>
diff --git a/components/landing-page/content-category.tsx b/components/landing-page/content-category.tsx
index f764863a..61dc8707 100644
--- a/components/landing-page/content-category.tsx
+++ b/components/landing-page/content-category.tsx
@@ -6,6 +6,7 @@ import { Reveal } from "./Reveal";
 import { useTranslations } from "next-intl";
 import { usePathname } from "next/navigation";
 import { useParams } from "next/navigation";
+import Image from "next/image";
 
 const ContentCategory = (props: { group?: string }) => {
   const [categories, setCategories] = useState<any>();
@@ -55,7 +56,7 @@ const ContentCategory = (props: { group?: string }) => {
             !seeAllValue ? (
               index < 4 ? (
                 <Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
-                  <img src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
+                  <Image alt="category" width={2560} height={1440} src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
                   <div className="absolute  bottom-0 rounded-lg left-0 right-0 bg-gray-400 border-l-4 mb-4 border-[#bb3523] text-white p-2">
                     <h3 className="text-sm font-semibold truncate">{category?.name}</h3>
                   </div>
@@ -65,7 +66,7 @@ const ContentCategory = (props: { group?: string }) => {
               )
             ) : (
               <Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
-                <img src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
+                <Image alt="category" width={2560} height={1440} src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
                 <div className="absolute bottom-0 left-0 right-0 bg-gray-400 border-l-4 mb-4 border-[#bb3523] rounded-lg text-white p-2">
                   <h3 className="text-sm font-semibold truncate">{category?.name}</h3>
                 </div>
diff --git a/components/landing-page/hero.tsx b/components/landing-page/hero.tsx
index 76f5d65c..301da675 100644
--- a/components/landing-page/hero.tsx
+++ b/components/landing-page/hero.tsx
@@ -7,6 +7,7 @@ import Link from "next/link";
 import { useParams, usePathname, useRouter } from "next/navigation";
 import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
 import { Skeleton } from "../ui/skeleton";
+import Image from "next/image";
 
 const Hero: React.FC = () => {
   const router = useRouter();
@@ -67,7 +68,7 @@ const Hero: React.FC = () => {
             {heroData?.map((list: any) => (
               <CarouselItem key={list?.id}>
                 <div className="relative h-[310px] lg:h-[420px]">
-                  <img src={list?.thumbnailLink} alt="Gambar Utama" className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover" />
+                  <Image src={list?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover" />
                   <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-black dark:text-white p-4 rounded-b-lg">
                     <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">{list?.categoryName}</span>
                     <Link href={`${locale}/image/detail/${list?.slug}`}>
@@ -138,7 +139,7 @@ const Hero: React.FC = () => {
             {heroData?.map((item: any) => (
               <li key={item?.id} className="flex gap-4 flex-row lg:w-full ">
                 <div className="flex-shrink-0 w-24 rounded-lg">
-                  <img src={item?.thumbnailLink} alt={item?.title} className="w-full h-[73px] object-cover rounded-lg" />
+                  <Image width={720} height={480} src={item?.thumbnailLink} alt={item?.title} className="w-full h-[73px] object-cover rounded-lg" />
                 </div>
                 <div className="w-[280px] lg:w-auto">
                   <span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg flex text-[8px] font-bold uppercase w-fit">{item?.categoryName}</span>
diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx
index 669c007a..f42dd6e6 100644
--- a/components/landing-page/navbar.tsx
+++ b/components/landing-page/navbar.tsx
@@ -146,7 +146,7 @@ const Navbar = () => {
       <div className="flex items-center justify-between px-4 lg:px-20 py-4 gap-3">
         {/* Logo */}
         <Link href={prefixPath} className="flex items-center">
-          <img src="/assets/mediahub-logo.gif" alt="Media Hub Logo" className="object-contain h-20" />
+          <Image src="/assets/mediahub-logo.gif" alt="Media Hub Logo" width={200} height={300} className="object-contain" />
         </Link>
 
         {/* Mobile Menu Toggle */}
@@ -294,7 +294,7 @@ const Navbar = () => {
           </Link> */}
           <div className="flex items-center space-x-1  ">
             <a href="https://tvradio.polri.go.id/">
-              <img src="/assets/polriTv.png" className="object-contain h-10 flex-auto " />
+              <Image src="/assets/polriTv.png" width={100} height={120} alt="polritv" className="object-contain flex-auto " />
             </a>
           </div>
 
@@ -417,7 +417,7 @@ const Navbar = () => {
                         {notifications?.map((list: any) => (
                           <a className="flex flex-row" href={list.redirectUrl} key={list.id}>
                             <div className="ml-4">
-                              <img src="/assets/avatar-profile.png" alt="..." className="w-8 items-center mr-3" />
+                              <Image src="/assets/avatar-profile.png" alt="avatar" width={5} height={10} className="items-center mr-3" />
                             </div>
                             <div className="text-wrap text-left">{list?.message}</div>
                             <div>
@@ -441,7 +441,7 @@ const Navbar = () => {
                         {notificationsUpdate?.map((list: any) => (
                           <a className="flex flex-row" href={list.redirectUrl} key={list.id}>
                             <div className="ml-4">
-                              <img src="/assets/avatar-profile.png" alt="..." className="w-8 items-center mr-3" />
+                              <Image src="/assets/avatar-profile.png" alt="..." width={5} height={10} className="w-8 items-center mr-3" />
                             </div>
                             <div className="">
                               <div className="text-wrap text-left">{list?.message}</div>
@@ -563,7 +563,7 @@ const Navbar = () => {
                     {notifications?.map((list: any) => (
                       <a className="" href={list.redirectUrl} key={list.id}>
                         <div className="">
-                          <img src="/assets/avatar-profile.png" alt="..." className="" />
+                          <Image src="/assets/avatar-profile.png" alt="..." width={5} height={10} />
                         </div>
                         <div className="">
                           <div className="text-wrap text-left">{list?.message}</div>
@@ -587,7 +587,7 @@ const Navbar = () => {
                     {notificationsUpdate?.map((list: any) => (
                       <a className="flex flex-row" href={list.redirectUrl} key={list.id}>
                         <div className="ml-4">
-                          <img src="/assets/avatar-profile.png" alt="..." className="w-8 items-center mr-3" />
+                          <Image src="/assets/avatar-profile.png" alt="..." width={5} height={10} className="items-center mr-3" />
                         </div>
                         <div className="">
                           <div className="text-wrap text-left">{list?.message}</div>
@@ -834,7 +834,7 @@ const Navbar = () => {
             </div> */}
             <div className="flex items-center space-x-1 mx-3 text-yellow-600 font-medium">
               <a href="https://tvradio.polri.go.id/">
-                <img src="/assets/polriTv.png" className="object-contain h-11 flex items-center" />
+                <Image src="/assets/polriTv.png" width={100} height={120} alt="polritv" className="object-contain flex items-center" />
               </a>
             </div>
 
@@ -989,7 +989,7 @@ const Navbar = () => {
                           {notifications?.map((list: any) => (
                             <a className="flex flex-row" href={list.redirectUrl} key={list.id}>
                               <div className="ml-4">
-                                <img src="/assets/avatar-profile.png" alt="..." className="w-8 items-center mr-3" />
+                                <Image width={5} height={10} src="/assets/avatar-profile.png" alt="..." className="items-center mr-3" />
                               </div>
                               <div className="text-wrap text-left">{list?.message}</div>
                               <div>
@@ -1013,7 +1013,7 @@ const Navbar = () => {
                           {notificationsUpdate?.map((list: any) => (
                             <a className="flex flex-row" href={list.redirectUrl} key={list.id}>
                               <div className="ml-4">
-                                <img src="/assets/avatar-profile.png" alt="..." className="w-8 items-center mr-3" />
+                                <Image width={5} height={10} src="/assets/avatar-profile.png" alt="..." className="items-center mr-3" />
                               </div>
                               <div className="">
                                 <div className="text-wrap text-left">{list?.message}</div>
@@ -1135,7 +1135,7 @@ const Navbar = () => {
                       {notifications?.map((list: any) => (
                         <a className="" href={list.redirectUrl} key={list.id}>
                           <div className="">
-                            <img src="/assets/avatar-profile.png" alt="..." className="" />
+                            <Image width={5} height={10} src="/assets/avatar-profile.png" alt="..." />
                           </div>
                           <div className="">
                             <div className="text-wrap text-left">{list?.message}</div>
@@ -1159,7 +1159,7 @@ const Navbar = () => {
                       {notificationsUpdate?.map((list: any) => (
                         <a className="flex flex-row" href={list.redirectUrl} key={list.id}>
                           <div className="ml-4">
-                            <img src="/assets/avatar-profile.png" alt="..." className="w-8 items-center mr-3" />
+                            <Image width={5} height={10} src="/assets/avatar-profile.png" alt="..." className="items-center mr-3" />
                           </div>
                           <div className="">
                             <div className="text-wrap text-left">{list?.message}</div>
diff --git a/components/landing-page/new-content.tsx b/components/landing-page/new-content.tsx
index 1192ba7e..3301eecf 100644
--- a/components/landing-page/new-content.tsx
+++ b/components/landing-page/new-content.tsx
@@ -11,6 +11,7 @@ import { Link } from "@/i18n/routing";
 import { Reveal } from "./Reveal";
 import { useTranslations } from "next-intl";
 import { Skeleton } from "../ui/skeleton";
+import Image from "next/image";
 
 const NewContent = (props: { group: string; type: string }) => {
   const [newContent, setNewContent] = useState<any>();
@@ -117,9 +118,9 @@ const NewContent = (props: { group: string; type: string }) => {
                       {newContent?.map((image: any) => (
                         <CarouselItem key={image?.id} className="md:basis-1/2 lg:basis-1/3">
                           <Link href={`/image/detail/${image?.slug}`} className="relative group overflow-hidden shadow-md hover:shadow-lg">
-                            <img src={image?.thumbnailLink} className="w-full rounded-lg h-48 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
+                            <Image width={2560} height={1440} alt="image" src={image?.thumbnailLink} className="w-full rounded-lg h-48 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
                             <div className="absolute bottom-0 left-0 right-0 bg-gray-600 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2">
-                              <h1 className="text-sm lg:text-lg mb-2 font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{image?.title}</h1>
+                              <p className="text-sm lg:text-base mb-2 font-semibold h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{image?.title}</p>
                               <p className="flex flex-row items-center text-[10px] gap-2">
                                 {formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {image.clickCount}{" "}
                               </p>
@@ -133,7 +134,7 @@ const NewContent = (props: { group: string; type: string }) => {
                   </Carousel>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
                   </p>
                 )
               ) : selectedTab == "audio" ? (
@@ -171,7 +172,7 @@ const NewContent = (props: { group: string; type: string }) => {
                   </Carousel>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
                   </p>
                 )
               ) : selectedTab == "video" ? (
@@ -181,9 +182,9 @@ const NewContent = (props: { group: string; type: string }) => {
                       {newContent?.map((video: any) => (
                         <CarouselItem key={video?.id} className="md:basis-1/2 lg:basis-1/3">
                           <Link href={`/video/detail/${video?.slug}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
-                            <img src={video?.thumbnailLink} className="w-full h-40 lg:h-60 object-cover rounded-lg group-hover:scale-100 transition-transform duration-300" />
+                            <Image alt="video" width={2560} height={1440} src={video?.thumbnailLink} className="w-full h-40 lg:h-60 object-cover rounded-lg group-hover:scale-100 transition-transform duration-300" />
                             <div className="absolute bottom-0 rounded-lg left-0 right-0 border-l-4 border-[#bb3523] bg-gray-600 text-white p-2">
-                              <h1 className="text-sm font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{video?.title}</h1>
+                              <p className="text-sm lg:text-base mb-2 font-semibold h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{video?.title}</p>
                               <p className="flex flex-row items-center text-sm gap-2">
                                 {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" /> {video?.clickCount}{" "}
                               </p>
@@ -197,7 +198,7 @@ const NewContent = (props: { group: string; type: string }) => {
                   </Carousel>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
                   </p>
                 )
               ) : newContent.length > 0 ? (
@@ -241,7 +242,7 @@ const NewContent = (props: { group: string; type: string }) => {
                 </Carousel>
               ) : (
                 <p className="flex items-center justify-center">
-                  <img src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                  <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
                 </p>
               )}
             </div>