feat: auto change in right bottom banner

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,17 +521,21 @@ const HeroNew = (props: { group?: string }) => {
           </Carousel> */}
 
           <div className="relative w-full">
+            {content && content.length > 0 && (
               <Swiper
                 modules={[Autoplay, Navigation]}
-              autoplay={{ delay: 3000, disableOnInteraction: false }}
+                autoplay={{
+                  delay: 3000,
+                  disableOnInteraction: false,
+                }}
+                loop={true}
                 navigation={{
                   nextEl: ".swiper-button-next",
                   prevEl: ".swiper-button-prev",
                 }}
-              loop
                 className="w-full"
               >
-              {content?.map((list: any) => (
+                {content.map((list: any) => (
                   <SwiperSlide key={list?.id}>
                     <div className="relative h-[310px] lg:h-[700px]">
                       {/* Gambar */}
@@ -531,10 +547,10 @@ const HeroNew = (props: { group?: string }) => {
                         className="object-cover w-full h-full"
                       />
 
-                    {/* Overlay hitam transparan */}
+                      {/* Overlay */}
                       <div className="absolute inset-0 bg-black/40 z-10" />
 
-                    {/* Konten judul */}
+                      {/* Judul & Link */}
                       <Link
                         href={
                           Number(list?.fileTypeId) === 1
@@ -568,11 +584,25 @@ const HeroNew = (props: { group?: string }) => {
                   </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">
+          <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">
-            {newContent?.slice(0, 3).map((item: any) => (
+            <div
-              <li key={item?.id} className="flex gap-4 flex-row lg:w-full mx-2">
+              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}
@@ -624,7 +654,9 @@ const HeroNew = (props: { group?: string }) => {
                         </Link>
                       </div>
                     </li>
-            ))}
+                  );
+                })}
+            </div>
           </div>
         </div>
       )}