feat:new landing

app/page.tsx

@@ -1,4 +1,5 @@
 "use client";
+import BannerHumasNew from "@/components/landing/banner-new";
 import BannerHumas from "@/components/landing/BannerHumas";
 import BodyLayout from "@/components/landing/BodyLayout";
 import HeaderNews from "@/components/landing/HeaderNews";
@@ -18,7 +19,7 @@ export default function Home() {
   return (
     <>
       <HumasLayout>
-        <BannerHumas />
+        <BannerHumasNew />
         <HeaderNews />
         <BodyLayout />
       </HumasLayout>

components/icons.tsx

@@ -331,7 +331,7 @@ export const ChevronUpIcon = ({
     {...props}
   >
     <path
-      className="fill-default-400"
+      className={fill}
       d="m6.293 13.293 1.414 1.414L12 10.414l4.293 4.293 1.414-1.414L12 7.586z"
     ></path>
   </svg>

components/landing/BodyLayout.tsx

@@ -1,26 +1,27 @@
 "use client";
-import CategorySatker from "./CategorySatker";
+import AddsCarousel from "./adds-carousel";
-import ENewsPolri from "./ENewsPolri";
-import MediaSocial from "./MediaSocial";
 import MedolUpdate from "./MedolUpdate";
-import PolriApps from "./PolriApps";
+import SocialMediaNew from "./social-media";
-import RegionalNews from "./RegionalNews";
-import SidebarNav from "./SidebarNav";
 
 export default function BodyLayout() {
   return (
     <>
-      <div className="lg:flex bg-white  text-black  p-2 lg:p-8 gap-9">
+      <div className="lg:flex bg-white dark:bg-black  text-black  p-2 lg:p-8 gap-9">
-        <div className="lg:w-[75%] space-y-7">
+        {/* <div className="lg:w-[75%] space-y-7">
           <CategorySatker />
           <RegionalNews />
           <PolriApps />
           <MedolUpdate />
           <MediaSocial />
-          {/* <ENewsPolri /> */}
+          <ENewsPolri />
-        </div>
+        </div> */}
-        <div className="w-full lg:w-[25%]">
+        {/* <div className="w-full lg:w-[25%]">
           <SidebarNav />
+        </div> */}
+        <div className="w-full space-y-5">
+          <AddsCarousel />
+          <MedolUpdate />
+          <SocialMediaNew />
         </div>
       </div>
     </>

components/landing/HeaderNews.tsx

@@ -57,14 +57,15 @@ export default function HeaderNews() {
       limit: "10",
       sortBy: "view_count",
       sort: "desc",
+      isPublish: true,
     };
     const response = await getListArticle(req);
     setHotNews(response?.data?.data);
-    console.log("sadadasdasd", response?.data?.data);
   }
 
   return (
-    <div className="flex flex-col lg:flex-row gap-3 lg:gap-8 bg-white  p-1 lg:p-8 lg:h-[70vh]">
+    <div className="w-full">
+      <div className="flex flex-col lg:flex-row gap-3 lg:gap-8 bg-white dark:bg-black  p-1 lg:p-8 lg:h-[55vh] w-[75%] lg:mx-auto">
         <div className="lg:hidden w-full h-full">
           {article ? (
             <Swiper
@@ -96,7 +97,7 @@ export default function HeaderNews() {
               {article?.map((newsItem: any, index: number) => (
                 <SwiperSlide key={newsItem?.id}>
                   <Card isFooterBlurred radius="lg" className="border-none">
-                  <Image
+                    {/* <Image
                       width={1920}
                       height={1080}
                       alt="headernews"
@@ -106,7 +107,7 @@ export default function HeaderNews() {
                           : newsItem?.thumbnailUrl
                       }
                       className="h-[25vh] object-cover"
-                  />
+                    /> */}
 
                     <CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
                       <div className="text-black dark:text-white">
@@ -134,17 +135,17 @@ export default function HeaderNews() {
             <CircularProgress aria-label="Loading..." size="lg" />
           )}
         </div>
-      <div className="w-auto lg:w-[25%] p-2 dark:bg-stone-800  bg-[#f0f0f0] shadow-lg dark:text-white text-black rounded-xl mb-2 md:mb-0 h-[50vh] lg:h-[67vh]">
+        <div className="w-auto lg:w-[25%] p-2 dark:bg-stone-800  bg-[#f0f0f0] dark:text-white text-black rounded-xl mb-2 md:mb-0 h-[37vh] lg:h-[50vh]">
-        <p className="text-lg font-bold h-10 text-center dark:text-white text-black">
+          <p className="text-base font-bold text-center dark:text-white text-black">
             {t("berita")}
           </p>
-        <ScrollShadow hideScrollBar className="h-[34vh] lg:h-[53vh] ">
+          <ScrollShadow hideScrollBar className="h-[33vh] lg:h-[39vh] ">
             {hotNews?.map((data: any, index: number) => (
               <div
                 className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md flex flex-row gap-2"
                 key={data?.id}
               >
-              <Image
+                {/* <Image
                   height={480}
                   width={480}
                   alt="headernews"
@@ -154,7 +155,7 @@ export default function HeaderNews() {
                       : data?.thumbnailUrl
                   }
                   className="object-cover w-[60px] h-[60px] rounded-md"
-              />
+                /> */}
                 <div>
                   <Link
                     href={`/news/detail/${data?.id}-${data?.slug}`}
@@ -194,7 +195,7 @@ export default function HeaderNews() {
           </div>
         </div>
 
-      <div className="hidden lg:block w-full lg:w-[50%] h-[67vh]">
+        <div className="hidden lg:block w-full lg:w-[50%] h-[50vh]">
           {article ? (
             <Swiper
               centeredSlides={true}
@@ -210,24 +211,24 @@ export default function HeaderNews() {
                   "bg-white/70",
                   "!text-black",
                   "rounded-full",
-                "!w-[48px]",
+                  "!w-[40px]",
-                "!h-[48px]"
+                  "!h-[40px]"
                 );
                 swiper.navigation.prevEl?.classList.add(
                   "bg-white/70",
                   "!text-black",
                   "rounded-full",
-                "!w-[48px]",
+                  "!w-[40px]",
-                "!h-[48px]"
+                  "!h-[40px]"
                 );
               }}
             >
               {article?.map((newsItem: any, index: number) => (
-              <SwiperSlide key={newsItem?.id} className="h-[67vh]">
+                <SwiperSlide key={newsItem?.id} className="h-[50vh]">
                   <Card
                     isFooterBlurred
                     radius="lg"
-                  className="border-none h-[67vh] shadow-none"
+                    className="border-none h-[50vh] shadow-none"
                   >
                     <Image
                       alt="headernews"
@@ -238,7 +239,7 @@ export default function HeaderNews() {
                           ? "/no-image.jpg"
                           : newsItem?.thumbnailUrl
                       }
-                    className="w-full !h-[67vh] object-cover rounded-lg"
+                      className="w-full !h-[50vh] object-cover rounded-lg"
                     />
 
                     <CardFooter className="mb-1 max-h-[20vh] before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
@@ -256,7 +257,9 @@ export default function HeaderNews() {
                           </p>
                           <p className="flex items-center gap-1 text-sm">
                             <EyeIcon />
-                          {newsItem.viewCount === null ? 0 : newsItem.viewCount}
+                            {newsItem.viewCount === null
+                              ? 0
+                              : newsItem.viewCount}
                           </p>
                         </div>
                       </div>
@@ -269,33 +272,28 @@ export default function HeaderNews() {
             <CircularProgress aria-label="Loading..." size="lg" />
           )}
         </div>
-      <div className="lg:w-[25%] h-[67vh]  rounded-md text-white dark:text-black ">
+        <div className="lg:w-[25%] h-[50vh]  rounded-md text-white dark:text-black ">
           {/* <GPRKominfo /> */}
-        <div className="text-[15px] flex flex-row gap-10">
+
+          {selectedTab === "media" ? (
+            <div className="lg:!h-[50vh] p-2 dark:bg-stone-800  bg-[#f0f0f0]  dark:text-white text-black rounded-lg">
+              <div className="text-sm flex flex-row gap-3 mx-2 mb-2">
                 <a
                   onClick={() => setSelectedTab("media")}
                   className={
-              selectedTab === "media"
+                    "text-black border-b-3 border-red-400 cursor-pointer p-0"
-                ? "text-black border-b-3 border-red-400 cursor-pointer py-2"
-                : "text-slate-300 cursor-pointer py-2"
                   }
                 >
                   {t("terkini")}
                 </a>
                 <a
                   onClick={() => setSelectedTab("video")}
-            className={
+                  className={"text-slate-300 cursor-pointer"}
-              selectedTab === "video"
-                ? "text-black border-b-3 border-red-400 cursor-pointer py-2"
-                : "text-slate-300 cursor-pointer py-2"
-            }
                 >
                   Video Virtual
                 </a>
               </div>
-        {selectedTab === "media" ? (
+              <ScrollShadow hideScrollBar className="h-[39vh]">
-          <div className="lg:!h-[62vh] p-2 dark:bg-stone-800  bg-[#f0f0f0]  dark:text-white text-black rounded-lg">
-            <ScrollShadow hideScrollBar className=" h-[54vh]">
                 {article?.map((list: any, index: number) => (
                   <div
                     key={list?.id}
@@ -324,7 +322,23 @@ export default function HeaderNews() {
               </Button>
             </div>
           ) : (
-          <div className="lg:!h-[62vh] dark:bg-stone-800  bg-[#f0f0f0]  dark:text-white text-black rounded-lg flex flex-col p-2 lg:p-8 gap-2 lg:gap-5">
+            <div className="lg:!h-[35vh] dark:bg-stone-800  bg-[#f0f0f0]  dark:text-white text-black rounded-lg flex flex-col p-2 lg:p-8 gap-2 lg:gap-5">
+              <div className="text-[15px] flex flex-row gap-10">
+                <a
+                  onClick={() => setSelectedTab("media")}
+                  className={"text-slate-300 cursor-pointer py-2"}
+                >
+                  {t("terkini")}
+                </a>
+                <a
+                  onClick={() => setSelectedTab("video")}
+                  className={
+                    "text-black border-b-3 border-red-400 cursor-pointer py-2"
+                  }
+                >
+                  Video Virtual
+                </a>
+              </div>
               <Link
                 target="_blank"
                 href="https://www.youtube.com/watch?v=6_g_PyiFcNo"
@@ -338,8 +352,8 @@ export default function HeaderNews() {
                 href="https://www.youtube.com/watch?v=p0AJEwvJ7gU"
                 className="border-b-2 py-2 lg:py-4"
               >
-              ILM DIVHUMAS POLRI - POLRI PRESISI MENGAWAL PROSES VAKSINASI UNTUK
+                ILM DIVHUMAS POLRI - POLRI PRESISI MENGAWAL PROSES VAKSINASI
-              MENGATASI PANDEMI COVID 19
+                UNTUK MENGATASI PANDEMI COVID 19
               </Link>
               <Link
                 target="_blank"
@@ -354,12 +368,13 @@ export default function HeaderNews() {
                 href="https://www.youtube.com/watch?v=umPEo0FYTQk"
                 className="border-b-2 py-2 lg:py-4"
               >
-              IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - BHABINKAMTIBMAS SAHABAT
+                IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - BHABINKAMTIBMAS
-              MASYARAKAT
+                SAHABAT MASYARAKAT
               </Link>
             </div>
           )}
         </div>
       </div>
+    </div>
   );
 }

components/landing/MedolUpdate.tsx

@@ -21,7 +21,7 @@ import {
   topNewsInp,
   topNewsTbn,
 } from "@/service/third-party-service";
-import { convertDateFormatNoTime } from "@/utils/global";
+import { convertDateFormatNoTime, textEllipsis } from "@/utils/global";
 import PolriTvWidget from "../ui/social-media/polri-tv";
 import { useTranslations } from "next-intl";
 
@@ -62,7 +62,6 @@ export default function MedolUpdate() {
     const res = await topNewsInp(resLog?.data?.access_token);
     // setInpUpdate(res?.data);
     setInpUpdate(res?.data?.data);
-    console.log("reelog", res?.data?.data);
 
     // getDataImage(res?.data);
   }
@@ -77,15 +76,47 @@ export default function MedolUpdate() {
     setInpUpdate(temp);
   }
 
+  const formatDate = (dateString: string): string => {
+    const date = new Date(dateString);
+
+    let timeZone = "Asia/Jakarta";
+    let timeZoneAbbr = "WIB";
+
+    if (dateString.includes("+09:00")) {
+      timeZone = "Asia/Jayapura";
+      timeZoneAbbr = "WIT";
+    } else if (dateString.includes("+08:00")) {
+      timeZone = "Asia/Makassar";
+      timeZoneAbbr = "WITA";
+    }
+
+    const options: Intl.DateTimeFormatOptions = {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false,
+      timeZone,
+    };
+
+    // Format tanggal
+    const formattedDate = new Intl.DateTimeFormat("id-ID", options)
+      .format(date)
+      .replace(/\//g, "-"); // Ubah '/' menjadi '-'
+
+    return `${formattedDate} ${timeZoneAbbr}`;
+  };
+
   return (
-    <div className="border-2 rounded-lg py-2">
+    <div className="border-1 rounded-xl py-2 w-[75%] mx-auto">
-      <div className="text-2xl font-semibold underline underline-offset-4 text-center decoration-red-600 ">
+      <div className="text-xl font-semibold w-full">
-        Top 5 News Update
+        <p className="border-b-2 border-red-600 w-fit mx-auto">Media Update</p>
       </div>
       <div className="bg-white text-black p-1 md:p-5 space-y-5">
         <Tabs
           classNames={{
-            tabList: "bg-white shadow-lg border p-2 rounded-md",
+            tabList: "bg-white shadow-lg border p-2 rounded-lg",
             tab: "group-data-[selected=true]:bg-[#bb3523] bg-white p-0 mx-2",
             tabContent: [
               "group-data-[selected=true]:text-[white] text-[#bb3523]",
@@ -107,7 +138,10 @@ export default function MedolUpdate() {
               breakpoints={{
                 // When the window width is less than 640px
                 720: {
-                  slidesPerView: 2, // Set slidesPerView to 1 on mobile
+                  slidesPerView: 3, // Set slidesPerView to 1 on mobile
+                },
+                1080: {
+                  slidesPerView: 4,
                 },
               }}
               pagination={true}
@@ -142,15 +176,17 @@ export default function MedolUpdate() {
                           radius="lg"
                           width="300%"
                           alt="tes"
-                          className="object-cover !h-[30vh]"
+                          className="object-cover !h-[20vh]"
                           src={newsItem.thumbnailLink}
                         />
                       </CardBody>
                       <CardFooter className="flex flex-col items-start text-left">
                         <p className="text-xs">
-                          {convertDateFormatNoTime(newsItem?.createdAt)}
+                          {formatDate(newsItem?.createdAt)}
                         </p>
-                        <b className="">{newsItem?.title}</b>
+                        <b className="text-sm">
+                          {textEllipsis(newsItem?.title, 50)}
+                        </b>
                       </CardFooter>
                     </Card>
                   </Link>
@@ -179,7 +215,10 @@ export default function MedolUpdate() {
               breakpoints={{
                 // When the window width is less than 640px
                 720: {
-                  slidesPerView: 2, // Set slidesPerView to 1 on mobile
+                  slidesPerView: 3, // Set slidesPerView to 1 on mobile
+                },
+                1080: {
+                  slidesPerView: 4,
                 },
               }}
               pagination={true}
@@ -214,13 +253,16 @@ export default function MedolUpdate() {
                           radius="lg"
                           width="300%"
                           alt="tes"
-                          className="object-cover !h-[30vh]"
+                          className="object-cover !h-[20vh]"
                           src={newsItem?.image}
                         />
                       </CardBody>
                       <CardFooter className="flex flex-col items-start text-left">
-                        {convertDateFormatNoTime(newsItem?.date)}
+                        {/* {convertDateFormatNoTime(newsItem?.date)} */}
-                        <b className="">{newsItem?.title}</b>
+                        <p className="text-xs">{formatDate(newsItem?.date)}</p>
+                        <b className="text-sm">
+                          {textEllipsis(newsItem?.title, 50)}
+                        </b>
                       </CardFooter>
                     </Card>
                   </Link>
@@ -249,7 +291,10 @@ export default function MedolUpdate() {
               breakpoints={{
                 // When the window width is less than 640px
                 720: {
-                  slidesPerView: 2, // Set slidesPerView to 1 on mobile
+                  slidesPerView: 3, // Set slidesPerView to 1 on mobile
+                },
+                1080: {
+                  slidesPerView: 4,
                 },
               }}
               pagination={true}
@@ -287,13 +332,16 @@ export default function MedolUpdate() {
                           radius="lg"
                           width="300%"
                           alt="tes"
-                          className="object-cover !h-[30vh]"
+                          className="object-cover !h-[20vh]"
                           src={newsItem?.thumbnail}
                         />
                       </CardBody>
                       <CardFooter className="flex flex-col items-start text-left">
-                        {newsItem?.created_at}
+                        {/* {newsItem?.created_at} */}
-                        <b className="">{newsItem?.judul}</b>
+                        <p className="text-xs">{newsItem?.created_at}</p>
+                        <b className="text-sm">
+                          {textEllipsis(newsItem?.judul, 50)}
+                        </b>
                       </CardFooter>
                     </Card>
                   </Link>

components/landing/NewsTicker.tsx

@@ -51,6 +51,7 @@ export default function NewsTicker() {
         <span className="mr-2"></span> BREAKING NEWS
         <div className="absolute right-0 top-0 h-full w-4 bg-[#bb3523] transform translate-x-full clipPath-triangle"></div>
       </div>
+      {article && (
         <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"
@@ -76,6 +77,7 @@ export default function NewsTicker() {
             {convertDateFormat(article[currentNewsIndex]?.createdAt)}
           </p>
         </div>
+      )}
       <div className="flex flex-row text-white h-full gap-[1px]">
         <a
           className="bg-[#bb3523] h-full flex items-center"

components/landing/adds-carousel.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import Image from "next/image";
+import {
+  Button,
+  Card,
+  CardFooter,
+  CircularProgress,
+  ScrollShadow,
+} from "@heroui/react";
+import { ChevronLeftIcon, ChevronRightIcon, EyeIcon } from "../icons";
+import { Swiper, SwiperSlide, useSwiper } from "swiper/react";
+import "swiper/css";
+import "swiper/css/navigation";
+import Link from "next/link";
+
+import { Autoplay, Pagination, Navigation, Controller } from "swiper/modules";
+const datas = [
+  { id: 1, src: "/props-1.png" },
+  { id: 2, src: "/props-2.png" },
+  { id: 2, src: "/props-3.png" },
+];
+export default function AddsCarousel() {
+  return (
+    <div className="w-[75%] mx-auto">
+      {datas ? (
+        <Swiper
+          centeredSlides={true}
+          autoplay={{
+            delay: 5000,
+            disableOnInteraction: false,
+          }}
+          navigation={true}
+          modules={[Autoplay, Controller, Navigation]}
+          className="mySwiper"
+          onSwiper={(swiper) => {
+            swiper.navigation.nextEl?.classList.add(
+              "bg-white/70",
+              "!text-black",
+              "rounded-full",
+              "!w-[40px]",
+              "!h-[40px]"
+            );
+            swiper.navigation.prevEl?.classList.add(
+              "bg-white/70",
+              "!text-black",
+              "rounded-full",
+              "!w-[40px]",
+              "!h-[40px]"
+            );
+          }}
+        >
+          {datas?.map((newsItem: any, index: number) => (
+            <SwiperSlide key={newsItem?.id} className="h-[50vh]">
+              <Card
+                isFooterBlurred
+                radius="lg"
+                className="border-none h-[50vh] shadow-none"
+              >
+                <Image
+                  alt="headernews"
+                  width={1440}
+                  height={1080}
+                  src={newsItem?.src == "" ? "/no-image.jpg" : newsItem?.src}
+                  className="w-full !h-[50vh] object-cover rounded-lg"
+                />
+              </Card>
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      ) : (
+        <CircularProgress aria-label="Loading..." size="lg" />
+      )}
+    </div>
+  );
+}

components/landing/banner-new.tsx

@@ -0,0 +1,233 @@
+"use client";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+import React, { useEffect, useState } from "react";
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronUpIcon,
+  FbIconNav,
+  IdnIcon,
+  IgIcon,
+  SearchIcon,
+  SearchIcons,
+  TtIcon,
+  TwIcon,
+  UKIcon,
+  YtIcon,
+} from "../icons";
+import Link from "next/link";
+import {
+  Dropdown,
+  DropdownTrigger,
+  DropdownMenu,
+  DropdownItem,
+  Button,
+  Input,
+} from "@heroui/react";
+import storedLanguage from "@/store/language-store";
+import { ThemeSwitch } from "../theme-switch";
+
+const images = [
+  "/landing-1.jpg",
+  "/landing-2.jpg",
+  "/landing-3.jpg",
+  "/landing-4.jpg",
+];
+
+export default function BannerHumasNew() {
+  const t = useTranslations("Banner");
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [resetTimer, setResetTimer] = useState(0);
+  const [onOpen, setOnOpen] = useState(false);
+  const [searchValue, setSearchValue] = useState("");
+  const language = storedLanguage((state) => state.locale);
+  const setLanguage = storedLanguage((state) => state.setLocale);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
+    }, 25000);
+
+    return () => clearInterval(interval);
+  }, [resetTimer]);
+  const nextImage = () => {
+    setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
+    setResetTimer((prev) => prev + 1);
+  };
+
+  const prevImage = () => {
+    setCurrentIndex(
+      (prevIndex) => (prevIndex - 1 + images.length) % images.length
+    );
+    setResetTimer((prev) => prev + 1);
+  };
+
+  return (
+    <div className="h-fit relative text-white overflow-hidden">
+      <div
+        className="flex w-full h-[78vh] lg:h-[60vh] transition-transform duration-700 ease-in-out"
+        style={{ transform: `translateX(-${currentIndex * 100}%)` }}
+      >
+        {images.map((img, index) => (
+          <Link href="" key={index} className="w-full shrink-0">
+            <Image
+              src={img}
+              width={1440}
+              height={1080}
+              alt={`humasbanner-${index}`}
+              className="w-full h-full object-cover object-center opacity-[25] dark:opacity-70"
+            />
+          </Link>
+        ))}
+      </div>
+      <div className="absolute inset-0 bg-black bg-opacity-40" />
+      <div className="absolute z-50 lg:mt-[50px] top-44 left-1/2  transform -translate-x-1/2 -translate-y-1/2 text-center w-full lg:w-[75%]">
+        <div className="flex flex-col gap-3 justify-between">
+          <div className="flex justify-between items-center mb-10">
+            <div className="flex flex-col gap-1 justify-start items-start">
+              <p className="text-5xl font-bold text-left leading-0">
+                SELAMAT DATANG DI WEBSITE RESMI DIVISI HUMAS POLRI
+              </p>
+              <p>OBYEKTIF - DIPERCAYA - PARTISIPASI</p>
+            </div>
+            <Image
+              src="/divhumas.png"
+              width={720}
+              height={720}
+              alt="logo-humas"
+              className="w-[200px]"
+            />
+          </div>
+          <div className="flex justify-between">
+            <div className="flex flex-row gap-6">
+              <Dropdown onOpenChange={setOnOpen}>
+                <DropdownTrigger>
+                  <Button
+                    className="w-[200px] bg-white dark:bg-stone-900"
+                    radius="sm"
+                    endContent={
+                      onOpen ? <ChevronUpIcon /> : <ChevronDownIcon />
+                    }
+                  >
+                    <p className="text-left w-full  font-bold text-md">Menu</p>
+                  </Button>
+                </DropdownTrigger>
+                <DropdownMenu>
+                  <DropdownItem key="pemas">Pelayanan Masyarakat</DropdownItem>
+                  <DropdownItem key="info">Informasi Publik</DropdownItem>
+                  <DropdownItem key="tentang">Tentang</DropdownItem>
+                  <DropdownItem key="apps">Aplikasi Polri</DropdownItem>
+                </DropdownMenu>
+              </Dropdown>
+              <Link href={`https://eppid.polri.go.id/`}>
+                <Button className="bg-white dark:bg-stone-900" radius="sm">
+                  <p className="font-bold w-full ">e-PPID Polri</p>
+                </Button>{" "}
+              </Link>
+            </div>
+            <Input
+              label=""
+              placeholder="Temukkan Informasi Publik Terkini Dari Polri"
+              type="text"
+              value={searchValue}
+              onValueChange={setSearchValue}
+              className="max-w-md"
+              endContent={
+                <Link
+                  href={`/news/all?search=${searchValue}`}
+                  className="text-black"
+                >
+                  <SearchIcons />
+                </Link>
+              }
+            />
+          </div>
+        </div>
+
+        {/* <p className="text-[30px] lg:text-[42px] lg:leading-10 font-bold pb-1 md:pb-5">
+          {t("jumbotron")}
+        </p> */}
+        {/* <p className="text-xs md:text-medium">{`"${t("phrase")}"`}</p> */}
+      </div>
+      <button
+        onClick={prevImage}
+        className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black/50 text-white px-2 py-2 rounded-full hover:bg-black/70 transition"
+      >
+        <ChevronLeftIcon />
+      </button>
+      <button
+        onClick={nextImage}
+        className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black/50 text-white px-2 py-2 rounded-full hover:bg-black/70 transition"
+      >
+        <ChevronRightIcon />
+      </button>
+      <div className="absolute bottom-4 right-60">
+        <div className="flex">
+          <div className="flex gap-1 lg:gap-3 items-center">
+            <Link
+              href="https://www.facebook.com/DivHumasPolri?_rdc=1&_rdr"
+              target="_blank"
+            >
+              <div className="bg-white p-1.5 rounded-md">
+                <FbIconNav size={16} />
+              </div>
+            </Link>
+            <Link
+              href="https://www.instagram.com/divisihumaspolri/"
+              target="_blank"
+            >
+              <div className="bg-white p-0.5 rounded-md">
+                <IgIcon size={24} />
+              </div>
+            </Link>
+            <Link
+              href="https://www.youtube.com/user/pidhumaspolri"
+              target="_blank"
+            >
+              <div className="bg-white p-0.5 rounded-md">
+                <YtIcon size={24} />
+              </div>
+            </Link>
+            <Link href="https://twitter.com/DivHumas_Polri" target="_blank">
+              <div className="bg-white p-1 rounded-md">
+                <TwIcon size={20} />
+              </div>
+            </Link>
+            <Link href="https://www.tiktok.com/@divhumas_polri" target="_blank">
+              <div className="bg-white p-0.5 rounded-md">
+                <TtIcon size={24} />
+              </div>
+            </Link>
+
+            <div className="bg-white rounded-md py-0.5 px-1">
+              <ThemeSwitch />
+            </div>
+            <a
+              className="cursor-pointer"
+              onClick={() =>
+                language === "id" ? setLanguage("en") : setLanguage("id")
+              }
+            >
+              {language === "id" ? <IdnIcon /> : <UKIcon />}
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    // <div
+    //   className={`w-full h-[60vh] bg-cover bg-center rounded-lg shadow-lg`}
+    //   style={{ backgroundImage: `url('/landing-3.jpg')` }}
+    // />
+    // <div
+    //   className={`w-full h-[60vh] bg-cover bg-center rounded-lg shadow-lg relative`}
+    // >
+    //   <div
+    //     className="absolute inset-0 bg-black bg-opacity-100 bg-cover bg-center object-cover"
+    //     style={{ backgroundImage: `url('/landing-3.jpg')` }}
+    //   />
+    //   <div className="flex flex-row p-4">Your Text Here</div>
+    // </div>
+  );
+}

components/landing/footer-new.tsx

@@ -20,7 +20,7 @@ export default function FooterNew() {
 
   return (
     <div className="mb-[60px] relative text-xs leading-4 md:leading-loose lg:leading-8 font-semibold">
-      <div className="py-10 px-36 flex flex-col gap-4 text-white bg-gradient-to-r from-red-400 via-[#bd4434] to-[#bb3523] from-3% via-50% to-70%  ">
+      <div className="py-10 px-36 flex flex-col gap-4 text-white bg-gradient-to-r from-[#A88155] via-[#ad1719] to-[#AA0004] from-3% via-50% to-70%  ">
         <div className="flex justify-center text-2xl">Channel Humas Polri</div>
         <div className="flex flex-row gap-4 justify-around items-center">
           <Link href="">
@@ -159,7 +159,7 @@ export default function FooterNew() {
               <Button className="mt-1 text-black bg-white ">
                 <p className="text-xs">Kontributor Wilayah</p>
               </Button>
-            </Link>{" "}
+            </Link>
           </div>
         </div>
       </div>

components/landing/social-media.tsx

@@ -0,0 +1,75 @@
+"use client";
+import {
+  Button,
+  Card,
+  CardBody,
+  CardFooter,
+  Image,
+  Tab,
+  Tabs,
+} from "@heroui/react";
+import React, { useEffect, useState } from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import { Navigation, Pagination } from "swiper/modules";
+import { topNewsMediahub } from "@/service/medol-news-update";
+import Link from "next/link";
+import {
+  getImageInp,
+  inpLogin,
+  topNewsInp,
+  topNewsTbn,
+} from "@/service/third-party-service";
+import { convertDateFormatNoTime, textEllipsis } from "@/utils/global";
+import PolriTvWidget from "../ui/social-media/polri-tv";
+import { useTranslations } from "next-intl";
+import TwitterWidget from "../ui/social-media/twitter";
+import InstagramWidget from "../ui/social-media/instagram";
+import YoutubeWidget from "../ui/social-media/youtube";
+
+export default function SocialMediaNew() {
+  const [selectedTab, setSelectedTab] = useState<any>("x");
+  const [mediahubUpdate, setMediahubUpdate] = useState<any>([]);
+  const [tbnUpdate, setTbnUpdate] = useState([]);
+  const [inpUpdate, setInpUpdate] = useState([]);
+
+  const t = useTranslations("Landing");
+  return (
+    <div className="border-1 rounded-xl py-2 w-[75%] mx-auto">
+      <div className="text-xl font-semibold w-full">
+        <p className="border-b-2 border-red-600 w-fit mx-auto">
+          Media Sosial Humas
+        </p>
+      </div>
+      <div className="bg-white text-black p-1 md:p-5 space-y-5">
+        <Tabs
+          classNames={{
+            tabList: "bg-white shadow-lg border p-2 rounded-lg",
+            tab: "group-data-[selected=true]:bg-[#bb3523] bg-white p-0 mx-2",
+            tabContent: [
+              "group-data-[selected=true]:text-[white] text-[#bb3523]",
+              "group-data-[selected=true]:bg-[#bb3523] bg-white rounded-md px-4 py-2",
+            ],
+          }}
+          aria-label="Options"
+          // color="[#bb3523]"
+          className="flex justify-center"
+          selectedKey={selectedTab}
+          onSelectionChange={setSelectedTab}
+        >
+          <Tab key="x" title="X">
+            <TwitterWidget />
+          </Tab>
+          <Tab key="ig" title="Instagram">
+            <InstagramWidget />
+          </Tab>
+          <Tab key="yt" title="Youtube">
+            <YoutubeWidget />
+          </Tab>
+        </Tabs>
+      </div>
+    </div>
+  );
+}

components/layout/humas-layout.tsx

@@ -21,8 +21,8 @@ export const HumasLayout = ({ children }: Props) => {
   if (!hasMounted) return null;
   return (
     <section className="flex flex-col">
-      <NavbarHumas size="sm" />
+      {/* <NavbarHumas size="sm" /> */}
-      <NavbarHumas size="lg" />
+      {/* <NavbarHumas size="lg" /> */}
       <NewsTicker />
 
       {children}

components/theme-switch.tsx

@@ -34,7 +34,9 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({
     getWrapperProps,
   } = useSwitch({
     isSelected: theme === "light" || isSSR,
-		"aria-label": `Switch to ${theme === "light" || isSSR ? "dark" : "light"} mode`,
+    "aria-label": `Switch to ${
+      theme === "light" || isSSR ? "dark" : "light"
+    } mode`,
     onChange,
   });
 
@@ -70,7 +72,11 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({
           ),
         })}
       >
-				{!isSelected || isSSR ? <SunFilledIcon size={22} /> : <MoonFilledIcon size={22} />}
+        {!isSelected || isSSR ? (
+          <SunFilledIcon size={16} />
+        ) : (
+          <MoonFilledIcon size={16} />
+        )}
       </div>
     </Component>
   );