feat: add and adjust ui and api

app/[locale]/(public)/audio/detail/[slug]/page.tsx

@@ -49,10 +49,25 @@ const DetailAudio = () => {
               <BarWave color="#ffc831" width="60px" height="25px" duration="2s" />
               <div className="absolute top-4 left-4"></div>
             </div>
+            {/* Footer Informasi */}
+            <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
+              <p className="flex flex-row items-center">
+                oleh&nbsp;<span className="font-semibold text-black">{detailDataAudio?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataAudio?.updatedAt} WIB&nbsp;|&nbsp;
+                <Icon icon="formkit:eye" width="15" height="15" />
+                &nbsp;
+                {detailDataAudio?.clickCount}
+              </p>
+              <p>Kreator: {detailDataAudio?.creatorName}</p>
+            </div>
+            {/* Keterangan */}
+            <div className="md:w-3/4">
+              <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataAudio?.title}</h1>
+              <div className="font-light text-justify" dangerouslySetInnerHTML={{ __html: detailDataAudio?.htmlDescription }} />
+            </div>
           </div>
 
           {/* Bagian Kanan */}
-          <div className="md:w-1/4 p-4 bg-gray-300 rounded-lg mx-4">
+          <div className="md:w-1/4 p-4 h-fit bg-gray-300 rounded-lg mx-4">
             <div className="flex flex-col mb-3 items-center justify-center cursor-pointer">
               <svg xmlns="http://www.w3.org/2000/svg" width="2.5em" height="2.5em" viewBox="0 0 24 24">
                 <path fill="black" d="m17 18l-5-2.18L7 18V5h10m0-2H7a2 2 0 0 0-2 2v16l7-3l7 3V5a2 2 0 0 0-2-2" />
@@ -106,24 +121,8 @@ const DetailAudio = () => {
             </button>
           </div>
         </div>
-
-        {/* Footer Informasi */}
-        <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
-          <p className="flex flex-row items-center">
-            oleh&nbsp;<span className="font-semibold text-black">{detailDataAudio?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataAudio?.updatedAt} WIB&nbsp;|&nbsp;
-            <Icon icon="formkit:eye" width="15" height="15" />
-            &nbsp;
-            {detailDataAudio?.clickCount}
-          </p>
-          <p>Kreator: {detailDataAudio?.creatorName}</p>
-        </div>
-
-        {/* Keterangan */}
-        <div className="md:w-3/4">
-          <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataAudio?.title}</h1>
-          <div dangerouslySetInnerHTML={{ __html: detailDataAudio?.htmlDescription }} />
-        </div>
       </div>
+
       <div className="w-full mb-8">
         {/* Comment */}
         <div className="flex flex-col my-16 gap-5 p-10 bg-gray-300">

app/[locale]/(public)/document/detail/[slug]/page.tsx

@@ -4,11 +4,9 @@ import { useParams, usePathname, useRouter } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import { getDetail } from "@/service/landing/landing";
-import VideoPlayer from "@/utils/video-player";
 import NewContent from "@/components/landing-page/new-content";
 import { Link } from "@/i18n/routing";
 import { Textarea } from "@/components/ui/textarea";
-import { BarWave } from "react-cssfx-loading";
 
 const DetailDocument = () => {
   const [selectedSize, setSelectedSize] = useState<string>("L");
@@ -49,19 +47,19 @@ const DetailDocument = () => {
               <div className="absolute top-4 left-4"></div>
             </div>
             {/* Footer Informasi */}
-            <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
-              <p className="flex flex-row items-center">
+            <div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4">
+              <p className="flex flex-row items-center mt-3">
                 oleh&nbsp;<span className="font-semibold text-black">{detailDataDocument?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataDocument?.updatedAt} WIB&nbsp;|&nbsp;
                 <Icon icon="formkit:eye" width="15" height="15" />
                 &nbsp;
                 {detailDataDocument?.clickCount}
               </p>
-              <p>Kreator: {detailDataDocument?.creatorName}</p>
+              <p className="mt-3">Kreator: {detailDataDocument?.creatorName}</p>
             </div>
 
             {/* Keterangan */}
             <div className="md:w-3/4">
-              <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataDocument?.title}</h1>
+              <h1 className="flex flex-row font-bold text-2xl my-8">{detailDataDocument?.title}</h1>
               <div dangerouslySetInnerHTML={{ __html: detailDataDocument?.htmlDescription }} />
             </div>
           </div>
@@ -123,15 +121,15 @@ const DetailDocument = () => {
       <div className="w-full mb-8">
         {/* Comment */}
         <div className="flex flex-col my-16 p-10 bg-[#f7f7f7]">
-          <div className="gap-5 flex flex-col px-4 lg:px-20">
+          <div className="gap-5 flex flex-col px-4 lg:px-16">
             <p className="flex items-start text-lg">Berikan Komentar</p>
             <Textarea placeholder="Type your comments here." className="flex w-full" />
-            <button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button>
+            <button className="flex items-start bg-[#bb3523] rounded-lg text-white w-fit px-4 py-1">Kirim</button>
           </div>
         </div>
 
         {/* Konten Serupa */}
-        <div className="px-4">
+        <div className="">
           <NewContent type={"similar"} />
         </div>
       </div>

app/[locale]/(public)/image/detail/[slug]/page.tsx

@@ -49,17 +49,17 @@ const DetailInfo = () => {
             </div>
 
             {/* Gambar bawah Kecil */}
-            <div className="p-4 grid grid-cols-4 gap-2">
+            <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-full h-fit object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600" />
+                  <img src={file?.url} className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600" />
                 </a>
               ))}
             </div>
 
             {/* Footer Informasi */}
-            <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
-              <div className="flex flex-row items-center">
+            <div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4">
+              <div className="flex flex-row items-center mt-3 justify-between">
                 oleh&nbsp;<span className="font-semibold text-black">{detailDataImage?.uploadedBy?.userLevel?.name}</span>&nbsp; | &nbsp;Diupdate pada {detailDataImage?.updatedAt} WIB &nbsp;|&nbsp;
                 <Icon icon="formkit:eye" width="15" height="15" />
                 &nbsp; {detailDataImage?.clickCount} &nbsp;
@@ -69,8 +69,8 @@ const DetailInfo = () => {
 
             {/* Keterangan */}
             <div className="w-full">
-              <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataImage?.title}</h1>
-              <div dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }} />
+              <h1 className="flex flex-row font-bold text-2xl my-8">{detailDataImage?.title}</h1>
+              <div className="font-light text-justify" dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }} />
             </div>
           </div>
 
@@ -134,15 +134,15 @@ const DetailInfo = () => {
       <div className="w-full mb-8">
         {/* Comment */}
         <div className="flex flex-col my-16 p-10 bg-[#f7f7f7]">
-          <div className="gap-5 flex flex-col px-4 lg:px-16">
+          <div className="gap-5 flex flex-col px-4 lg:px-14">
             <p className="flex items-start text-lg">Berikan Komentar</p>
             <Textarea placeholder="Type your comments here." className="flex w-full" />
-            <button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button>
+            <button className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">Kirim</button>
           </div>
         </div>
 
         {/* Konten Serupa */}
-        <div className="px-4">
+        <div className="">
           <NewContent type={"similar"} />
         </div>
       </div>

app/[locale]/(public)/indeks/detail/[slug]/page.tsx

@@ -2,69 +2,91 @@
 import { Textarea } from "@/components/ui/textarea";
 import { useParams, usePathname, useRouter } from "next/navigation";
 import React, { useEffect, useState } from "react";
-import NewContent from "@/components/landing-page/new-content";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
 import { Link } from "@/i18n/routing";
-import { getDetailIndeks } from "@/service/landing/landing";
+import { getDetailIndeks, publicDetailBlog } from "@/service/landing/landing";
 import { formatDateToIndonesian } from "@/utils/globals";
+import { Icon } from "@iconify/react/dist/iconify.js";
 
 const IndeksDetail = () => {
   const [indeksData, setIndeksData] = useState<any>();
   const params = useParams();
   const slug = params?.slug;
+  const [relatedPost, setRelatedPost] = useState<any>();
 
   useEffect(() => {
     initFetch();
+    detailFetch();
   }, []);
   const initFetch = async () => {
     const response = await getDetailIndeks();
     console.log(response);
-    setIndeksData(response?.data?.data?.content);
+    setRelatedPost(response?.data?.data?.content);
+  };
+  const detailFetch = async () => {
+    const response = await publicDetailBlog(slug);
+    console.log(response);
+    setIndeksData(response?.data?.data);
   };
 
   return (
     <>
       <div className="p-4 lg:px-60 lg:p-12">
         {/* Judul */}
-        <div className="flex justify-center mb-5">
+        <div className="flex flex-col mb-5">
+          <h1 className="text-lg mb-2">Indeks / Detail</h1>
           <h1 className="flex flex-row font-bold text-center text-2xl">{indeksData?.title}</h1>
         </div>
         {/* Gambar Utama */}
         <div className="flex items-center justify-center">
-          <img src={indeksData?.thumbnailLink} alt="Main" className="h-[500px] w-full rounded-lg" />
+          <img src={indeksData?.thumbnailLink} alt="Main" className="h-[550px] w-full rounded-lg" />
         </div>
         {/* Footer Informasi */}
-        <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
-          <p className="items-end">
-            {formatDateToIndonesian(new Date(indeksData?.createdAt))} {indeksData?.timezone ? indeksData?.timezone : "WIB"}|{" "}
-            <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
-              <path
-                fill="currentColor"
-                d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
-              />
-            </svg>{" "}
-            {indeksData?.clickCount}
-          </p>
+        <div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4">
+          <div className="flex flex-row items-center mt-3 justify-between">
+            oleh&nbsp;<span className="font-semibold text-black">{indeksData?.uploaderName}</span>&nbsp; | &nbsp;Diupdate pada {indeksData?.createdAt} WIB &nbsp;
+          </div>
         </div>
 
         {/* Keterangan */}
         <div className="w-auto">
-          <p dangerouslySetInnerHTML={{ __html: indeksData?.description }} />
+          <p className="font-light text-justify" dangerouslySetInnerHTML={{ __html: indeksData?.description }} />
         </div>
       </div>
 
+      {/* Comment */}
       <div className="w-full">
-        {/* Comment */}
-        <div className="flex flex-col my-16 p-10 bg-[#f7f7f7]">
+        <div className="flex flex-col py-5 p-10 bg-[#f7f7f7]">
           <div className="gap-5 flex flex-col px-4 lg:px-16">
             <p className="flex items-start text-lg">Berikan Komentar</p>
             <Textarea placeholder="Type your comments here." className="flex w-full" />
-            <button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button>
+            <button className="flex items-start bg-[#bb3523] text-white rounded-lg w-fit px-4 py-1">Kirim</button>
           </div>
         </div>
 
         {/* Konten Serupa */}
-        <div className="space-x-5 flex flex-col p-4">
-          <NewContent type={"similar"} />
+        <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>
+          <Carousel>
+            <CarouselContent className="w-full max-w-7xl">
+              {relatedPost?.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" />
+                    <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>
+                      <p className="flex flex-row items-center text-[10px] gap-2">
+                        {formatDateToIndonesian(new Date(relate?.createdAt))} {relate?.timezone ? relate?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {relate.clickCount}{" "}
+                      </p>
+                    </div>
+                  </Link>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+            <CarouselPrevious />
+            <CarouselNext />
+          </Carousel>
         </div>
       </div>
     </>

app/[locale]/(public)/schedule/page.tsx

@@ -9,11 +9,11 @@ import { format } from "date-fns";
 import { cn } from "@/lib/utils";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Icon } from "@iconify/react/dist/iconify.js";
-import { listSchedule, listScheduleNextPublic, listSchedulePrevPublic, listScheduleTodayPublic } from "@/service/schedule/schedule";
+import { detailSchedule, listSchedule, listScheduleNextPublic, listSchedulePrevPublic, listScheduleTodayPublic } from "@/service/schedule/schedule";
 import { useRouter } from "@/i18n/routing";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import { close, loading } from "@/config/swal";
 
 const timeList = [
   {
@@ -114,7 +114,7 @@ const timeList = [
   },
 ];
 
-const Schedule = () => {
+const Schedule = (props: any) => {
   const router = useRouter();
   const [startDate, setStartDate] = useState<Date | undefined>(new Date());
   const [dateAWeek, setDateAWeek] = useState<string[]>([]);
@@ -125,6 +125,19 @@ const Schedule = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [schedules, setSchedules] = useState([]);
   const [openDialog, setOpenDialog] = useState(false);
+  const [detail, setDetail] = useState<any>();
+  const [content, setContent] = useState();
+  const { id } = props;
+
+  useEffect(() => {
+    async function getDataSchedule() {
+      const response = await detailSchedule(id);
+      setDetail(response.data?.data);
+      setContent(response.data?.data?.files);
+    }
+
+    getDataSchedule();
+  }, [id]);
 
   useEffect(() => {
     async function initState() {
@@ -256,7 +269,13 @@ const Schedule = () => {
     }
   };
 
-  const getItem = (itemFound: any) => {
+  const getItem = async (itemFound: any) => {
+    loading();
+    const response = await detailSchedule(itemFound?.id);
+    setDetail(response.data?.data);
+    setContent(response.data?.data?.files);
+    console.log("item Found", itemFound);
+    close();
     setOpenDialog(true);
   };
 
@@ -687,29 +706,31 @@ const Schedule = () => {
       <AlertDialog open={openDialog} onOpenChange={setOpenDialog}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Test Event</AlertDialogTitle>
+            <AlertDialogTitle>
+              <h1 className="my-4 font-light">JADWAL / {detail?.isYoutube == true ? "LIVE STREAMING" : "DETAIL"}</h1>
+              <p className="font-bold">{detail?.title}</p>
+            </AlertDialogTitle>
             <AlertDialogDescription>
               <p className="flex flex-row items-center gap-2">
                 <Icon icon="iconamoon:clock-thin" />
-                08.00 - 12.00 WIB
+                {detail?.date} {detail?.startTime} - {detail?.endTime} {detail?.timezone ? detail.timezone : "WIB"}
               </p>
             </AlertDialogDescription>
             <AlertDialogDescription>
               <p className="flex flex-row items-start gap-2 ">
                 <Icon icon="bxs:map" width={30} />
-                Jl. Trunojoyo No.3 2, RT.2/RW.1, Selong, Kec. Kby. Baru, Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12110, Indonesia.
+                {detail?.address}
               </p>
             </AlertDialogDescription>
             <AlertDialogDescription>
               <p className="flex flex-row items-center gap-2">
                 <Icon icon="ic:round-person" />
-                Hanif Salafi
+                {detail?.speakerTitle || ""} {detail?.speakerName || ""}{" "}
               </p>
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction>Continue</AlertDialogAction>
+            <AlertDialogAction>Close</AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>

app/[locale]/(public)/video/detail/[slug]/page.tsx

@@ -49,20 +49,20 @@ const DetailVideo = () => {
             </div>
 
             {/* Footer Informasi */}
-            <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
-              <p className="flex flex-row items-center">
+            <div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4">
+              <p className="flex flex-row items-center mt-3">
                 oleh&nbsp;<span className="font-semibold text-black">{detailDataVideo?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataVideo?.updatedAt} WIB&nbsp;|&nbsp;
                 <Icon icon="formkit:eye" width="15" height="15" />
                 &nbsp;
                 {detailDataVideo?.clickCount}
               </p>
-              <p>Kreator: {detailDataVideo?.creatorName}</p>
+              <p className="mt-3">Kreator: {detailDataVideo?.creatorName}</p>
             </div>
 
             {/* Keterangan */}
             <div className="w-full">
-              <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataVideo?.title}</h1>
-              <div dangerouslySetInnerHTML={{ __html: detailDataVideo?.htmlDescription }} />
+              <h1 className="flex flex-row font-bold text-2xl my-8">{detailDataVideo?.title}</h1>
+              <div className="font-light text-justify" dangerouslySetInnerHTML={{ __html: detailDataVideo?.htmlDescription }} />
             </div>
           </div>
 
@@ -125,15 +125,15 @@ const DetailVideo = () => {
       <div className="w-full mb-8">
         {/* Comment */}
         <div className="flex flex-col my-16 p-10 bg-[#f7f7f7]">
-          <div className="gap-5 flex flex-col px-4 lg:px-16">
+          <div className="gap-5 flex flex-col px-4 lg:px-14">
             <p className="flex items-start text-lg">Berikan Komentar</p>
             <Textarea placeholder="Type your comments here." className="flex w-full" />
-            <button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button>
+            <button className="flex items-start bg-[#bb3523] text-white rounded-lg w-fit px-4 py-1">Kirim</button>
           </div>
         </div>
 
         {/* Konten Serupa */}
-        <div className="px-4">
+        <div className="">
           <NewContent type={"similar"} />
         </div>
       </div>

components/landing-page/navbar.tsx

@@ -193,7 +193,7 @@ const Navbar = () => {
               <NavigationMenuItem>
                 <NavigationMenuTrigger>
                   <a className="dark:text-white text-black flex flex-row justify-center items-center cursor-pointer">
-                    <svg className="mx-2 dark:" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <svg className="mx-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path
                         d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z"
                         fill="currentColor"
@@ -308,11 +308,12 @@ const Navbar = () => {
           <div className=" py-1 flex items-center mx-3">
             <input type="text" placeholder="Pencarian" className="border rounded-full w-full text-sm text-center text-gray-600" />
           </div>
-          <div className="flex flex-row justify-between items-center space-y-2 mx-3">
-            <Link href="/auth" className="w-fit px-4 py-1  bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 md:flex">
+
+          <div className="flex flex-row justify-between items-center my-2 mx-3 gap-2">
+            <Link href="/auth" className="w-full px-4 py-1  bg-[#bb3523] text-white text-center font-semibold rounded-md hover:bg-red-700 md:flex">
               Masuk
             </Link>
-            <Link href="#" className="w-fit px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] md:flex hover:text-white">
+            <Link href="#" className="w-full px-4 py-1 border border-[#bb3523] text-center text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] md:flex hover:text-white">
               Daftar
             </Link>
           </div>

components/landing-page/new-content.tsx

@@ -33,11 +33,11 @@ const NewContent = (props: { type: string }) => {
   };
 
   return (
-    <div className="px-4 lg:px-16">
+    <div className="px-4 lg:px-16 py-4">
       <Reveal>
         <div className="flex flex-col p-4">
           <div className="mx-auto w-full max-w-7xl justify-start flex px-5 flex-col lg:flex-row gap-5 mb-4">
-            <h2 className="flex items-center text-sm lg:text-xl w-fit font-bold bg-[#bb3523] px-4 py-1 rounded-lg text-white">
+            <h2 className="flex items-center text-xl lg:text-2xl w-fit font-bold bg-[#bb3523] px-4 py-1 rounded-lg text-white">
               <span className="text-black ">Konten&nbsp;</span>
               {props.type == "popular" ? "Populer" : props.type == "latest" ? "Terbaru" : "Serupa"}
             </h2>
@@ -73,7 +73,7 @@ const NewContent = (props: { type: string }) => {
               </TabsList>
             </Tabs>
           </div>
-          <div className="px-10">
+          <div className="px-0 lg:px-10">
             {selectedTab == "video" ? (
               newContent?.length > 0 ? (
                 <Carousel className="w-full max-w-7xl mx-auto">
@@ -81,7 +81,7 @@ const NewContent = (props: { 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 overflow-hidden shadow-md hover:shadow-lg">
-                          <img src={video?.thumbnailLink} className="w-full rounded-lg h-40 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
+                          <img src={video?.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">{video?.title}</h1>
                             <p className="flex flex-row items-center text-[10px] gap-2">

components/landing-page/search-section.tsx

@@ -11,7 +11,7 @@ const SearchSection = () => {
         <h1 className="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white">
           <span className="text-[#bb3523] dark:text-white">Eksplorasi</span> dan <span className="text-[#bb3523] dark:text-white">Download</span> Liputan Resmi Kami
         </h1>
-        <div className="w-auto h-1 bg-[#bb3523] mx-auto mt-2"></div>
+        <div className="w-[80%] h-1 bg-[#bb3523] mx-auto mt-2"></div>
         <p className="text-sm md:text-base text-gray-500 dark:text-gray-100 mt-4">Liputan resmi yang bersumber dari kegiatan Polri di Mabes dan Polda seluruh Indonesia</p>
 
         {/* Search Form */}
@@ -76,7 +76,7 @@ const SearchSection = () => {
           {/* Search Input */}
 
           {/* Button */}
-          <button className="px-6 lg:w-[20%] py-2 bg-[#bb3523] flex justify-center items-center gap-2 text-white rounded-lg hover:bg-red-700">
+          <button className="flex justify-center items-center px-6 w-full lg:w-[20%] py-2 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700">
             Cari Liputan <Icon icon="ri:arrow-right-s-line" fontSize={20} />
           </button>
         </div>

service/landing/landing.ts

@@ -42,4 +42,6 @@ export async function listCategory(type = "") {
   return await httpGetInterceptor(`media/categories/list/enable?enablePage=1&sort=desc&sortBy=updatedAt&size=12&type=${type}`);
 }
 
-
+export async function publicDetailBlog(slug: any) {
+  return await httpGetInterceptor(`blog/public/read/${slug}`);
+}