diff --git a/components/landing-page/hero-new.tsx b/components/landing-page/hero-new.tsx
index c08a9ca0..90b71e2b 100644
--- a/components/landing-page/hero-new.tsx
+++ b/components/landing-page/hero-new.tsx
@@ -437,6 +437,18 @@ const HeroNew = (props: { group?: string }) => {
       ? Buffer.from(str).toString("base64")
       : window.btoa(str);
 
+  const [scrollIndex, setScrollIndex] = useState(0);
+
+  useEffect(() => {
+    if (!content || content.length < 3) return;
+
+    const interval = setInterval(() => {
+      setScrollIndex((prevIndex) => (prevIndex + 1) % content.length);
+    }, 3000);
+
+    return () => clearInterval(interval);
+  }, [content]);
+
   return (
     <div className="flex items-start justify-center mx-auto w-auto">
       <div className="relative">
@@ -509,122 +521,142 @@ const HeroNew = (props: { group?: string }) => {
           </Carousel> */}
 
           <div className="relative w-full">
-            <Swiper
-              modules={[Autoplay, Navigation]}
-              autoplay={{ delay: 3000, disableOnInteraction: false }}
-              navigation={{
-                nextEl: ".swiper-button-next",
-                prevEl: ".swiper-button-prev",
-              }}
-              loop
-              className="w-full"
-            >
-              {content?.map((list: any) => (
-                <SwiperSlide key={list?.id}>
-                  <div className="relative h-[310px] lg:h-[700px]">
-                    {/* Gambar */}
-                    <Image
-                      priority
-                      src={list?.smallThumbnailLink}
-                      alt="gambar"
-                      fill
-                      className="object-cover w-full h-full"
-                    />
+            {content && content.length > 0 && (
+              <Swiper
+                modules={[Autoplay, Navigation]}
+                autoplay={{
+                  delay: 3000,
+                  disableOnInteraction: false,
+                }}
+                loop={true}
+                navigation={{
+                  nextEl: ".swiper-button-next",
+                  prevEl: ".swiper-button-prev",
+                }}
+                className="w-full"
+              >
+                {content.map((list: any) => (
+                  <SwiperSlide key={list?.id}>
+                    <div className="relative h-[310px] lg:h-[700px]">
+                      {/* Gambar */}
+                      <Image
+                        priority
+                        src={list?.smallThumbnailLink}
+                        alt="gambar"
+                        fill
+                        className="object-cover w-full h-full"
+                      />
 
-                    {/* Overlay hitam transparan */}
-                    <div className="absolute inset-0 bg-black/40 z-10" />
+                      {/* Overlay */}
+                      <div className="absolute inset-0 bg-black/40 z-10" />
 
-                    {/* Konten judul */}
-                    <Link
-                      href={
-                        Number(list?.fileTypeId) === 1
-                          ? `${prefixPath}/image/detail/${list?.slug}`
-                          : Number(list?.fileTypeId) === 2
-                          ? `${prefixPath}/video/detail/${list?.slug}`
-                          : Number(list?.fileTypeId) === 3
-                          ? `${prefixPath}/document/detail/${list?.slug}`
-                          : `${prefixPath}/audio/detail/${list?.slug}`
-                      }
-                      className="absolute bottom-20 left-8 lg:left-32 z-20 text-white w-[85%] lg:w-[45%] cursor-pointer"
-                    >
-                      <span className="text-red-600 text-lg font-bold uppercase">
-                        {list?.categoryName}
-                      </span>
-                      <h2 className="text-xl font-bold">{list?.title}</h2>
-                      <p className="text-sm mt-2">
-                        {formatDateToIndonesian(new Date(list?.createdAt))}{" "}
-                        {list?.timezone || "WIB"} | 👁 {list?.clickCount}
-                      </p>
-                    </Link>
+                      {/* Judul & Link */}
+                      <Link
+                        href={
+                          Number(list?.fileTypeId) === 1
+                            ? `${prefixPath}/image/detail/${list?.slug}`
+                            : Number(list?.fileTypeId) === 2
+                            ? `${prefixPath}/video/detail/${list?.slug}`
+                            : Number(list?.fileTypeId) === 3
+                            ? `${prefixPath}/document/detail/${list?.slug}`
+                            : `${prefixPath}/audio/detail/${list?.slug}`
+                        }
+                        className="absolute bottom-20 left-8 lg:left-32 z-20 text-white w-[85%] lg:w-[45%] cursor-pointer"
+                      >
+                        <span className="text-red-600 text-lg font-bold uppercase">
+                          {list?.categoryName}
+                        </span>
+                        <h2 className="text-xl font-bold">{list?.title}</h2>
+                        <p className="text-sm mt-2">
+                          {formatDateToIndonesian(new Date(list?.createdAt))}{" "}
+                          {list?.timezone || "WIB"} | 👁 {list?.clickCount}
+                        </p>
+                      </Link>
 
-                    {/* Tombol navigasi */}
-                    <div className="swiper-button-prev absolute left-6 top-[45%] z-30 -translate-y-1/2 hover:bg-black/70 text-white p-2 rounded-full">
-                      <ChevronLeft className="w-5 h-5" />
+                      {/* Tombol navigasi */}
+                      <div className="swiper-button-prev absolute left-6 top-[45%] z-30 -translate-y-1/2 hover:bg-black/70 text-white p-2 rounded-full">
+                        <ChevronLeft className="w-5 h-5" />
+                      </div>
+                      <div className="swiper-button-next absolute right-6 top-[45%] z-30 -translate-y-1/2 hover:bg-black/70 text-white p-2 rounded-full">
+                        <ChevronRight className="w-5 h-5" />
+                      </div>
                     </div>
-                    <div className="swiper-button-next absolute right-6 top-[45%] z-30 -translate-y-1/2 hover:bg-black/70 text-white p-2 rounded-full">
-                      <ChevronRight className="w-5 h-5" />
-                    </div>
-                  </div>
-                </SwiperSlide>
-              ))}
-            </Swiper>
+                  </SwiperSlide>
+                ))}
+              </Swiper>
+            )}
           </div>
 
-          <div className="hidden lg:flex flex-col gap-3 absolute bottom-4 right-[38px] w-[520px] bg-black/40 p-4 rounded-lg z-10">
-            {newContent?.slice(0, 3).map((item: any) => (
-              <li key={item?.id} className="flex gap-4 flex-row lg:w-full mx-2">
-                <div className="flex-shrink-0 w-32 rounded-lg">
-                  <Image
-                    priority={true}
-                    placeholder={`data:image/svg+xml;base64,${toBase64(
-                      shimmer(700, 475)
-                    )}`}
-                    width={720}
-                    height={480}
-                    src={item?.smallThumbnailLink}
-                    alt={item?.title}
-                    className="w-full h-[100px] object-cover rounded-lg"
-                  />
-                </div>
-                <div className="w-[280px] lg:w-full">
-                  <Link
-                    href={
-                      Number(item?.fileTypeId) == 1
-                        ? `${prefixPath}/image/detail/${item?.slug}`
-                        : Number(item?.fileTypeId) == 2
-                        ? `${prefixPath}/video/detail/${item?.slug}`
-                        : Number(item?.fileTypeId) == 3
-                        ? `${prefixPath}/document/detail/${item?.slug}`
-                        : `${prefixPath}/audio/detail/${item?.slug}`
-                    }
-                    className="flex flex-col justify-between"
-                  >
-                    <p className="rounded-lg flex text-red-600 font-bold uppercase w-fit">
-                      {item?.categoryName}
-                    </p>
-                    <h3 className="text-base text-white font-bold">
-                      {item?.title}
-                    </h3>
-                    <p className="text-[10px] flex flex-row items-center gap-1 text-white mt-2">
-                      {formatDateToIndonesian(new Date(item?.createdAt))}{" "}
-                      {item?.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"
+          <div className="hidden lg:flex flex-col gap-3 absolute bottom-4 right-[38px] w-[520px] bg-black/40 p-4 rounded-lg z-10 h-[250px] overflow-hidden">
+            <div
+              className="transition-transform duration-500 ease-in-out"
+              style={{
+                transform: "translateY(0%)",
+              }}
+              key={scrollIndex}
+            >
+              {content?.length >= 2 &&
+                [0, 1].map((offset) => {
+                  const item = content[(scrollIndex + offset) % content.length];
+                  return (
+                    <li
+                      key={item?.id}
+                      className="flex gap-4 flex-row lg:w-full mx-2 mb-2"
+                    >
+                      <div className="flex-shrink-0 w-32 rounded-lg">
+                        <Image
+                          priority={true}
+                          placeholder={`data:image/svg+xml;base64,${toBase64(
+                            shimmer(700, 475)
+                          )}`}
+                          width={720}
+                          height={480}
+                          src={item?.smallThumbnailLink}
+                          alt={item?.title}
+                          className="w-full h-[100px] object-cover rounded-lg"
                         />
-                      </svg>{" "}
-                      {item?.clickCount}
-                    </p>
-                  </Link>
-                </div>
-              </li>
-            ))}
+                      </div>
+                      <div className="w-[280px] lg:w-full">
+                        <Link
+                          href={
+                            Number(item?.fileTypeId) == 1
+                              ? `${prefixPath}/image/detail/${item?.slug}`
+                              : Number(item?.fileTypeId) == 2
+                              ? `${prefixPath}/video/detail/${item?.slug}`
+                              : Number(item?.fileTypeId) == 3
+                              ? `${prefixPath}/document/detail/${item?.slug}`
+                              : `${prefixPath}/audio/detail/${item?.slug}`
+                          }
+                          className="flex flex-col justify-between"
+                        >
+                          <p className="rounded-lg flex text-red-600 font-bold uppercase w-fit">
+                            {item?.categoryName}
+                          </p>
+                          <h3 className="text-base text-white font-bold">
+                            {item?.title}
+                          </h3>
+                          <p className="text-[10px] flex flex-row items-center gap-1 text-white mt-2">
+                            {formatDateToIndonesian(new Date(item?.createdAt))}{" "}
+                            {item?.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>{" "}
+                            {item?.clickCount}
+                          </p>
+                        </Link>
+                      </div>
+                    </li>
+                  );
+                })}
+            </div>
           </div>
         </div>
       )}