adjust spacing and layouting

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

@@ -117,9 +117,9 @@ const FilterPage = () => {
             </select>
           </div>
           {/* Card */}
-          <div className=" grid grid-cols-1 gap-6">
+          <div className=" grid grid-cols-1 gap-6 ">
             {dummyDescription.map((description) => (
-              <a href="#" key={description.id} className="flex flex-col  sm:flex-row items-center bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
+              <a href="#" key={description.id} className="flex flex-col sm:flex-row items-center hover:scale-110 transition-transform duration-300 bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
                 <div className="flex items-center justify-center bg-red-500 text-white rounded-lg w-16 h-16">
                   <svg width="32" height="34" viewBox="0 0 32 34" fill="null" xmlns="http://www.w3.org/2000/svg">
                     <path

app/[locale]/(public)/audio/layout.tsx

@@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer";
 import DashCodeHeader from "@/components/partials/header";
 import { auth } from "@/lib/auth";
 import { redirect } from "@/components/navigation";
-import Footer from "@/components/landing-page/Footer";
+import Footer from "@/components/landing-page/footer";
-import Navbar from "@/components/landing-page/Navbar";
+import Navbar from "@/components/landing-page/navbar";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (

app/[locale]/(public)/document/layout.tsx

@@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer";
 import DashCodeHeader from "@/components/partials/header";
 import { auth } from "@/lib/auth";
 import { redirect } from "@/components/navigation";
-import Footer from "@/components/landing-page/Footer";
+import Footer from "@/components/landing-page/footer";
-import Navbar from "@/components/landing-page/Navbar";
+import Navbar from "@/components/landing-page/navbar";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (

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

@@ -130,16 +130,16 @@ const FilterPage = () => {
 
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
             {dummyImage.map((image) => (
-              <Card key={image.id} className="flex">
+              <Card key={image.id} className="hover:scale-110 transition-transform duration-300">
-                <CardContent onClick={() => router.push(generateLocalizedPath(`/image/detail/${image.id}`, String(locale)))} className="flex flex-col text-xs lg:text-sm">
+                <CardContent onClick={() => router.push(generateLocalizedPath(`/image/detail/${image.id}`, String(locale)))} className="flex flex-col text-xs lg:text-sm p-0">
-                  <img src={image.thumbnail} className="h-60 object-cover w-full items-center justify-center cursor-pointer" />
+                  <img src={image.thumbnail} className="h-60 object-cover w-full items-center justify-center cursor-pointer rounded-lg" />
-                  <div className="flex flex-row items-center gap-2">
+                  <div className="flex flex-row items-center gap-2 mx-2">
                     {image.date} {image.time} | <Icon icon="formkit:eye" width="15" height="15" /> 518{" "}
                     <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20">
                       <path fill="#f00" d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z" />
                     </svg>{" "}
                   </div>
-                  <div className="font-semibold w-fit">{image.title}</div>
+                  <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">{image.title}</div>
                 </CardContent>
               </Card>
             ))}

app/[locale]/(public)/image/layout.tsx

@@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer";
 import DashCodeHeader from "@/components/partials/header";
 import { auth } from "@/lib/auth";
 import { redirect } from "@/components/navigation";
-import Footer from "@/components/landing-page/Footer";
+import Footer from "@/components/landing-page/footer";
-import Navbar from "@/components/landing-page/Navbar";
+import Navbar from "@/components/landing-page/navbar";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (

app/[locale]/(public)/indeks/layout.tsx

@@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer";
 import DashCodeHeader from "@/components/partials/header";
 import { auth } from "@/lib/auth";
 import { redirect } from "@/components/navigation";
-import Footer from "@/components/landing-page/Footer";
+import Footer from "@/components/landing-page/footer";
-import Navbar from "@/components/landing-page/Navbar";
+import Navbar from "@/components/landing-page/navbar";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (

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

@@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer";
 import DashCodeHeader from "@/components/partials/header";
 import { auth } from "@/lib/auth";
 import { redirect } from "@/components/navigation";
-import Footer from "@/components/landing-page/Footer";
+import Footer from "@/components/landing-page/footer";
-import Navbar from "@/components/landing-page/Navbar";
+import Navbar from "@/components/landing-page/navbar";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (

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

@@ -52,11 +52,11 @@ const FilterPage = () => {
       </div>
       {/* Left */}
       <div className="flex flex-col lg:flex-row gap-6 p-4">
-        {/* Sidebar Kiri */}
+        
         <div className="lg:w-1/4 w-full bg-white p-4 rounded-lg shadow-md">
           <h2 className="text-lg font-semibold mb-4">Filter</h2>
           <div className="space-y-6">
-            {/* Pencarian */}
+          
             <div>
               <label htmlFor="search" className="block text-sm font-medium text-gray-700">
                 Pencarian
@@ -64,7 +64,7 @@ const FilterPage = () => {
               <input type="text" id="search" placeholder="Cari judul..." className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
             </div>
 
-            {/* Tahun & Bulan */}
+         
             <div>
               <label htmlFor="month" className="block text-sm font-medium text-gray-700">
                 Tahun & Bulan
@@ -72,7 +72,7 @@ const FilterPage = () => {
               <input type="month" id="month" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
             </div>
 
-            {/* Tanggal */}
+            
             <div>
               <label htmlFor="date" className="block text-sm font-medium text-gray-700">
                 Tanggal
@@ -80,7 +80,7 @@ const FilterPage = () => {
               <input type="date" id="date" className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500" />
             </div>
 
-            {/* Kategori */}
+         
             <div>
               <h3 className="text-sm font-medium text-gray-700">Kategori</h3>
               <ul className="mt-2 space-y-2">
@@ -125,16 +125,16 @@ const FilterPage = () => {
 
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
             {dummyImage.map((image) => (
-              <Card key={image.id} className="flex">
+              <Card key={image.id} className="hover:scale-110 transition-transform duration-300">
-                <CardContent className="flex flex-col text-xs lg:text-sm">
+                <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
-                  <img src={image.thumbnail} className="h-60 object-cover w-full items-center justify-center cursor-pointer" />
+                  <img src={image.thumbnail} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg" />
-                  <div className="flex flex-row items-center gap-2">
+                  <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
                     {image.date} {image.time} | <Icon icon="formkit:eye" width="15" height="15" /> 518{" "}
                     <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20">
                       <path fill="#f00" d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z" />
                     </svg>{" "}
                   </div>
-                  <div className="font-semibold w-fit">{image.title}</div>
+                  <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">{image.title}</div>
                 </CardContent>
               </Card>
             ))}

app/[locale]/(public)/video/layout.tsx

@@ -6,8 +6,8 @@ import ThemeCustomize from "@/components/partials/customizer";
 import DashCodeHeader from "@/components/partials/header";
 import { auth } from "@/lib/auth";
 import { redirect } from "@/components/navigation";
-import Footer from "@/components/landing-page/Footer";
+import Footer from "@/components/landing-page/footer";
-import Navbar from "@/components/landing-page/Navbar";
+import Navbar from "@/components/landing-page/navbar";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (

app/[locale]/page.tsx

@@ -5,11 +5,10 @@ import NewContent from "@/components/landing-page/new-content";
 import PopularContent from "@/components/landing-page/popular-content";
 import ContentCategory from "@/components/landing-page/content-category";
 import Coverage from "@/components/landing-page/coverage";
-import Navbar from "@/components/landing-page/navbar";
 import Hero from "@/components/landing-page/hero";
 import Footer from "@/components/landing-page/footer";
 import Division from "@/components/landing-page/division";
-
+import Navbar from "@/components/landing-page/navbar";
 
 const Home = ({ params: { locale } }: { params: { locale: string } }) => {
   return (

components/landing-page/Hero.tsx

@@ -2,9 +2,13 @@ import { formatDateToIndonesian, textEllipsis } from "@/utils/globals";
 import React, { useEffect, useState } from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css/bundle";
+import "swiper/css/navigation";
 import { getHeroData } from "@/service/landing/landing";
 import Link from "next/link";
 import { useParams, usePathname, useRouter } from "next/navigation";
+import { Navigation, Pagination } from "swiper/modules";
+import { Card, CardContent } from "@/components/ui/card";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
 
 const Hero: React.FC = () => {
   const router = useRouter();
@@ -22,36 +26,38 @@ const Hero: React.FC = () => {
     setHeroData(response?.data?.data?.content);
   };
   return (
-    <div className="flex flex-col lg:flex-row items-start gap-4 px-4 lg:px-12 max-w-screen-xl py-4 mx-auto">
+    <div className="flex flex-col lg:flex-row items-start gap-8 px-4 lg:px-20 py-4 mx-auto">
       {/* Section Gambar Utama */}
-      <div className="lg:w-2/3 w-full lg:h-full">
+     
-        <Swiper spaceBetween={50} slidesPerView={1} pagination={{ clickable: true }} onSlideChange={() => console.log("slide change")} onSwiper={(swiper) => console.log(swiper)}>
+        <Carousel className="lg:w-2/3 w-full lg:h-full">
-          {heroData?.map((list: any) => (
+          <CarouselContent>
-            <SwiperSlide key={list?.id}>
+            {heroData?.map((list: any) => (
-              <div className="relative h-[310px] lg:h-[420px]">
+              <CarouselItem key={list?.id}>
-                <img src={list?.thumbnailLink} alt="Gambar Utama" className="w-full h-[310px] lg:h-[420px] rounded-lg" />
+                <div className="relative h-[310px] lg:h-[420px]">
-                <div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white p-4 rounded-b-lg">
+                  <img src={list?.thumbnailLink} alt="Gambar Utama" className="w-full h-[310px] lg:h-[420px] rounded-lg" />
-                  <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{list?.categoryName}</span>
+                  <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-black dark:text-white p-4 rounded-b-lg">
-                  <Link href={`${locale}/image/detail/${list?.slug}`}>
+                    <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{list?.categoryName}</span>
-                    <h2 className="text-lg font-bold mt-2">{list?.title}</h2>
+                    <Link href={`${locale}/image/detail/${list?.slug}`}>
-                  </Link>
+                      <h2 className="text-lg font-bold mt-2">{list?.title}</h2>
-
+                    </Link>
-                  <p className="text-sm flex flex-row items-center gap-1 mt-1">
+                    <p className="text-xs flex flex-row items-center gap-1 mt-1">
-                    {formatDateToIndonesian(new Date(list?.createdAt))} {list?.timezone ? list?.timezone : "WIB"}|{" "}
+                      {formatDateToIndonesian(new Date(list?.createdAt))} {list?.timezone ? list?.timezone : "WIB"}|{" "}
-                    <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
-                      <path
+                        <path
-                        fill="white"
+                          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"
+                          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>{" "}
+                      </svg>{" "}
-                    {list?.clickCount}{" "}
+                      {list?.clickCount}{" "}
-                  </p>
+                    </p>
+                  </div>
                 </div>
-              </div>
+              </CarouselItem>
-            </SwiperSlide>
+            ))}
-          ))}
+          </CarouselContent>
-        </Swiper>
+          <CarouselPrevious />
-      </div>
+          <CarouselNext />
+        </Carousel>
 
       {/* Section Kanan */}
       <div className="lg:w-1/3 w-full">
@@ -59,14 +65,14 @@ 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 object-cover rounded-lg" />
+                <img src={item?.thumbnailLink} alt={item?.title} className="w-full max-h-14 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-xs font-bold uppercase w-fit">{item?.categoryName}</span>
                 <Link href={`${locale}/image/detail/${item?.slug}`}>
                   <h3 className="text-sm font-bold mt-2">{textEllipsis(item?.title, 30)}</h3>
                 </Link>
-                <p className="text-xs flex flex-row items-center gap-1 text-gray-500 mt-1">
+                <p className="text-[10px] flex flex-row items-center gap-1 text-gray-500 mt-1">
                   {formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"} |{" "}
                   <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
                     <path

components/landing-page/Navbar.tsx

@@ -3,12 +3,10 @@
 import React, { useState } from "react";
 import ThemeSwitcher from "@/components/partials/header/theme-switcher";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
-import Link from "next/link";
 import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
 import { useParams, usePathname, useRouter } from "next/navigation";
 import { generateLocalizedPath } from "@/utils/globals";
-import { locale } from "dayjs";
+import { Link } from "@/i18n/routing";
-import router from "next/router";
 
 const Navbar = () => {
   const [menuOpen, setMenuOpen] = useState(false);
@@ -26,11 +24,11 @@ const Navbar = () => {
 
   return (
     <div className="bg-white dark:bg-black shadow-md sticky top-0 z-50">
-      <div className="flex items-center justify-between lg:justify-center px-4 lg:px-23 py-4 ">
+      <div className="flex items-center px-4 lg:px-20 py-4 gap-3">
         {/* Logo */}
-        <a href="/" className="flex items-center px-3">
+        <Link href="/" className="flex items-center">
-          <img src="/assets/mediahub-logo.gif" alt="Media Hub Logo" className="w-30 h-20 lg:max-w-screen-md md:h-24 flex" />
+          <img src="/assets/mediahub-logo.gif" alt="Media Hub Logo" className="w-fit h-20 md:h-24" />
-        </a>
+        </Link>
 
         {/* Mobile Menu Toggle */}
         <button className="text-black dark:text-white size-20 h-10 w-10 lg:hidden" onClick={() => setMenuOpen(!menuOpen)}>
@@ -46,10 +44,10 @@ const Navbar = () => {
         </button>
 
         {/* Desktop Navigation */}
-        <div className="hidden lg:flex items-center space-x-3">
+        <div className="hidden lg:flex items-center gap-5">
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <a className=" dark:text-white text-black flex flex-row justify-center items-center ml-5 cursor-pointer">
+              <a className="dark:text-white text-black flex flex-row justify-center items-center ml-5 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">
                   <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"
@@ -89,7 +87,7 @@ const Navbar = () => {
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
-          <Link href={generateLocalizedPath("/schedule", String(locale))} className="dark:text-white text-black font-medium flex flex-row items-center justify-center hover:text-gray-800">
+          <Link href="/schedule" className="dark:text-white text-black font-medium flex flex-row items-center justify-center hover:text-gray-800">
             <span>
               <svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
@@ -100,7 +98,18 @@ const Navbar = () => {
             </span>
             Jadwal
           </Link>
-          <Link href={pathname?.includes("/in") ? `/indeks` : `${locale}/indeks`} className="dark:text-white text-black flex flex-row items-center justify-center font-medium hover:text-gray-800">
+          {/* <Link href={generateLocalizedPath("/schedule", String(locale))} className="dark:text-white text-black font-medium flex flex-row items-center justify-center hover:text-gray-800">
+            <span>
+              <svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M19.5 4H18.5V3C18.5 2.4 18.1 2 17.5 2C16.9 2 16.5 2.4 16.5 3V4H8.5V3C8.5 2.4 8.1 2 7.5 2C6.9 2 6.5 2.4 6.5 3V4H5.5C3.8 4 2.5 5.3 2.5 7V8H22.5V7C22.5 5.3 21.2 4 19.5 4ZM2.5 19C2.5 20.7 3.8 22 5.5 22H19.5C21.2 22 22.5 20.7 22.5 19V10H2.5V19ZM17.5 12C18.1 12 18.5 12.4 18.5 13C18.5 13.6 18.1 14 17.5 14C16.9 14 16.5 13.6 16.5 13C16.5 12.4 16.9 12 17.5 12ZM17.5 16C18.1 16 18.5 16.4 18.5 17C18.5 17.6 18.1 18 17.5 18C16.9 18 16.5 17.6 16.5 17C16.5 16.4 16.9 16 17.5 16ZM12.5 12C13.1 12 13.5 12.4 13.5 13C13.5 13.6 13.1 14 12.5 14C11.9 14 11.5 13.6 11.5 13C11.5 12.4 11.9 12 12.5 12ZM12.5 16C13.1 16 13.5 16.4 13.5 17C13.5 17.6 13.1 18 12.5 18C11.9 18 11.5 17.6 11.5 17C11.5 16.4 11.9 16 12.5 16ZM7.5 12C8.1 12 8.5 12.4 8.5 13C8.5 13.6 8.1 14 7.5 14C6.9 14 6.5 13.6 6.5 13C6.5 12.4 6.9 12 7.5 12ZM7.5 16C8.1 16 8.5 16.4 8.5 17C8.5 17.6 8.1 18 7.5 18C6.9 18 6.5 17.6 6.5 17C6.5 16.4 6.9 16 7.5 16Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
+            Jadwal
+          </Link> */}
+          <Link href="/indeks" className="dark:text-white text-black flex flex-row items-center justify-center font-medium hover:text-gray-800">
             <span>
               <svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path

components/landing-page/content-category.tsx

@@ -13,8 +13,11 @@ const ContentCategory = () => {
     setCategories(response?.data?.data?.content);
   };
 
+  const [searchTerm, setSearchTerm] = useState("");
+  const [seeAllValue, setSeeAllValue] = useState(false);
+
   return (
-    <div className="mx-auto px-4 lg:px-12 py-10 max-w-screen-xl ">
+    <div className="mx-auto px-4 lg:px-20 py-10 max-w-screen-2xl ">
       <h2 className="text-center text-xl lg:text-2xl font-bold text-[#bb3523] mb-4">
         Kategori <span className="text-black dark:text-white">Konten</span>
       </h2>

components/landing-page/new-content.tsx

@@ -27,7 +27,7 @@ const NewContent = (props: { type: string }) => {
   };
 
   return (
-    <div className="px-4 lg:px-16 ">
+    <div className="px-4 lg:px-16">
       <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">
@@ -72,9 +72,9 @@ const NewContent = (props: { type: string }) => {
                     <CarouselItem key={video?.id} className="md:basis-1/2 lg:basis-1/3">
                       <Link href={generateLocalizedPath(`/video/detail/${video?.id}`, String(locale))} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
                         <img src={video?.thumbnailLink} className="w-full h-32 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
-                        <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-r from-black to-slate-500 text-white p-2">
+                        <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-2">
-                          <h1 className="text-sm font-semibold truncate">{video?.title}</h1>
+                          <h1 className="text-sm 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-sm gap-2">
+                          <p className="flex flex-row items-center text-[10px] gap-2">
                             {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {video.clickCount}{" "}
                           </p>
                         </div>
@@ -109,7 +109,7 @@ const NewContent = (props: { type: string }) => {
                             <div className="text-gray-500 dark:text-gray-400 flex flex-row text-sm">
                               {formatDateToIndonesian(new Date(audio?.createdAt))} {audio?.timezone ? audio?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {audio?.clickCount}{" "}
                             </div>
-                            <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">{textEllipsis(audio.title, 50)}</div>
+                            <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{audio?.title}</div>
                           </div>
                         </a>
                       </div>
@@ -131,7 +131,7 @@ const NewContent = (props: { type: string }) => {
                       <Link href={generateLocalizedPath(`/image/detail/${image?.id}`, String(locale))} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
                         <img src={image?.thumbnailLink} className="w-full h-32 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
                         <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-r from-black to-slate-500 text-white p-2">
-                          <h1 className="text-sm font-semibold truncate">{image?.title}</h1>
+                          <h1 className="text-sm font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{image?.title}</h1>
                           <p className="flex flex-row items-center text-sm gap-2">
                             {formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" /> {image?.clickCount}{" "}
                           </p>
@@ -152,7 +152,7 @@ const NewContent = (props: { type: string }) => {
                 {newContent?.map((text: any) => (
                   <CarouselItem key={text?.id} className="md:basis-1/2 lg:basis-1/3">
                     <div className="md:basis-1/2 lg:basis-1/3">
-                      <a href="#" className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
+                      <a href="#" className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4">
                         <div className="flex items-center justify-center rounded-lg w-16 h-2 lg:h-16">
                           <svg width="28" height="34" viewBox="0 0 28 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path
@@ -162,11 +162,11 @@ const NewContent = (props: { type: string }) => {
                           </svg>
                         </div>
 
-                        <div className="flex flex-col flex-1">
+                        <div className="flex w-full pr-10 flex-col flex-1">
-                          <div className="text-gray-500 dark:text-gray-400 flex flex-row text-sm">
+                          <div className="text-gray-500 dark:text-gray-400 flex flex-row items-center text-sm">
                             {formatDateToIndonesian(new Date(text?.createdAt))} {text?.timezone ? text?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {text?.clickCount}{" "}
                           </div>
-                          <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">{textEllipsis(text?.title, 50)}</div>
+                          <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible ">{text?.title}</div>
                           <div className="flex gap-2 items-center text-sm text-red-500 dark:text-red-500">
                             <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512">
                               <path fill="#f00" d="M224 30v256h-64l96 128l96-128h-64V30zM32 434v48h448v-48z" />

components/landing-page/search-section.tsx

@@ -1,27 +1,17 @@
 import React from "react";
-import {
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "../ui/dropdown-menu";
 import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
 
 const SearchSection = () => {
   return (
     <section className="w-full py-8 px-4 ">
-      <div className="max-w-screen-lg mx-auto text-center">
+      <div className="max-w-screen-xl mx-auto text-center">
         {/* Heading */}
         <h1 className="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white">
-          <span className="text-[#bb3523] dark:text-white">Eksplorasiii</span>{" "}
+          <span className="text-[#bb3523] dark:text-white">Eksplorasi</span> dan <span className="text-[#bb3523] dark:text-white">Download</span> Liputan Resmi Kami
-          dan <span className="text-[#bb3523] dark:text-white">Download</span>{" "}
-          Liputan Resmi Kami
         </h1>
         <div className="w-full 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">
+        <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>
-          Liputan resmi yang bersumber dari kegiatan Polri di Mabes dan Polda
-          seluruh Indonesia
-        </p>
 
         {/* Search Form */}
         <div className="mt-6 flex flex-col md:flex-row justify-center gap-4">
@@ -30,39 +20,19 @@ const SearchSection = () => {
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <a className="text-black dark:text-white flex flex-row justify-center items-center ml-5 cursor-pointer">
-                  <svg
+                  <svg className="mx-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/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"
                     />
                   </svg>
                   Konten
-                  <svg
+                  <svg className="flex items-center justify-center" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
-                    className="flex items-center justify-center"
+                    <path fill="currentColor" fill-rule="evenodd" d="m6 7l6 6l6-6l2 2l-8 8l-8-8z" />
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="1em"
-                    height="1em"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                      d="m6 7l6 6l6-6l2 2l-8 8l-8-8z"
-                    />
                   </svg>
                 </a>
               </DropdownMenuTrigger>
-              <DropdownMenuContent
+              <DropdownMenuContent align="end" className="p-0 rounded-md overflow-hidden">
-                align="end"
-                className="p-0 rounded-md overflow-hidden"
-              >
                 <DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
                   <span className="text-default-700c flex flex-row justify-center items-center group-hover:text-primary-foreground">
                     <FiYoutube className="mr-2" />
@@ -94,29 +64,18 @@ const SearchSection = () => {
           {/* Search Input */}
           <div className="flex items-center flex-1 border border-gray-300 rounded-lg overflow-hidden">
             <span className="material-icons text-black dark:text-white px-4">
-              <svg
+              <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
-                xmlns="http://www.w3.org/2000/svg"
-                width="1em"
-                height="1em"
-                viewBox="0 0 24 24"
-              >
                 <path
                   fill="currentColor"
                   d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3zM9.5 14q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"
                 />
               </svg>
             </span>
-            <input
+            <input type="text" placeholder="Pencarian" className="w-full py-2 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none" />
-              type="text"
-              placeholder="Pencarian"
-              className="w-full py-2 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none"
-            />
           </div>
 
           {/* Button */}
-          <button className="px-6 py-2 bg-[#bb3523] text-white rounded-lg hover:bg-red-700">
+          <button className="px-6 py-2 bg-[#bb3523] text-white rounded-lg hover:bg-red-700">Cari Liputan &gt;</button>
-            Cari Liputan &gt;
-          </button>
         </div>
       </div>
     </section>

components/ui/card.tsx

@@ -10,7 +10,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
     <div
       ref={ref}
       className={cn(
-        "rounded-lg  bg-card text-card-foreground ",
+        "rounded-lg bg-card text-card-foreground ",
         className, {
         'border': config?.skin === 'bordered',
         'shadow-base': config?.skin === 'default'

components/ui/carousel.tsx

@@ -206,17 +206,17 @@ const CarouselPrevious = React.forwardRef<
       variant={variant}
       size={size}
       className={cn(
-        "absolute  h-6 w-6 rounded-full",
+        "absolute h-6 w-6 rounded-full text-white bg-black",
         orientation === "horizontal"
-          ? "-left-12 top-1/2 -translate-y-1/2"
+          ? "-left-0 top-1/2 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+          : "-top-0 left-1/2 -translate-x-1/2 rotate-90",
         className
       )}
       disabled={!canScrollPrev}
       onClick={scrollPrev}
       {...props}
     >
-      <ArrowLeft className="h-4 w-4" />
+      <ArrowLeft className="h-4 w-4 text-white bg-black" />
       <span className="sr-only">Previous slide</span>
     </Button>
   )
@@ -235,17 +235,17 @@ const CarouselNext = React.forwardRef<
       variant={variant}
       size={size}
       className={cn(
-        "absolute h-6 w-6 rounded-full",
+        "absolute h-6 w-6 rounded-full bg-black text-white",
         orientation === "horizontal"
-          ? "-right-12 top-1/2 -translate-y-1/2"
+          ? "-right-0 top-1/2 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+          : "-bottom-0 left-1/2 -translate-x-1/2 rotate-90",
         className
       )}
       disabled={!canScrollNext}
       onClick={scrollNext}
       {...props}
     >
-      <ArrowRight className="h-4 w-4" />
+      <ArrowRight className="h-4 w-4 bg-black text-white" />
       <span className="sr-only">Next slide</span>
     </Button>
   )