src/components/sections/hero/HeroBillboardCarousel.tsx

@@ -2,6 +2,7 @@ import Button from "@/components/ui/Button";
 import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
 import TextAnimation from "@/components/ui/TextAnimation";
 import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import ImageCardCarousel from "@/components/ui/ImageCardCarousel";
 
 type HeroBillboardCarouselProps = {
   tag: string;
@@ -55,18 +56,11 @@ const HeroBillboardCarousel = ({
         </div>
       </div>
 
-      <div className="w-content-width mx-auto overflow-hidden mask-fade-x">
-        <div className="flex w-max animate-marquee-horizontal" style={{ animationDuration: "60s" }}>
-          {duplicated.map((item, i) => (
-            <div key={i} className="shrink-0 w-60 md:w-75 2xl:w-80 aspect-4/5 mr-3 md:mr-5 p-1.5 card rounded-lg overflow-hidden">
-              <ImageOrVideo
-                imageSrc={item.imageSrc}
-                videoSrc={item.videoSrc}
-                className="w-full h-full rounded-lg object-cover"
-              />
-            </div>
-          ))}
-        </div>
+      <div className="w-content-width mx-auto mt-8">
+        <ImageCardCarousel
+          images={items.map(item => item.imageSrc || item.videoSrc || '')}
+          className="aspect-video max-h-[600px]"
+        />
       </div>
     </section>
   );

src/components/ui/ImageCardCarousel.tsx

@@ -0,0 +1,64 @@
+import React, { useState, useEffect } from 'react';
+import { motion } from 'motion';
+import { clsx } from 'clsx';
+
+type ImageCardCarouselProps = {
+  images: string[];
+  interval?: number; // in milliseconds
+  className?: string;
+};
+
+const ImageCardCarousel = ({ images, interval = 3000, className }: ImageCardCarouselProps) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    const imageTimer = setInterval(() => {
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
+      setProgress(0); // Reset progress for the new image
+    }, interval);
+
+    return () => clearInterval(imageTimer);
+  }, [images, interval]);
+
+  useEffect(() => {
+    const progressTimer = setInterval(() => {
+      setProgress((prevProgress) => {
+        const newProgress = prevProgress + (1000 / interval) * 100; // Increment by 100ms worth of progress
+        return newProgress >= 100 ? 100 : newProgress;
+      });
+    }, 100); // Update progress every 100ms
+
+    return () => clearInterval(progressTimer);
+  }, [interval]);
+
+  if (!images || images.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={clsx("relative w-full h-full rounded-lg overflow-hidden", className)}>
+      {images.map((image, index) => (
+        <motion.img
+          key={image}
+          src={image}
+          alt={`Slide ${index + 1}`}
+          className="absolute inset-0 w-full h-full object-cover"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: index === currentIndex ? 1 : 0 }}
+          transition={{ duration: 0.5 }}
+        />
+      ))}
+      <div className="absolute bottom-0 left-0 w-full h-1 bg-white/30">
+        <motion.div
+          className="h-full bg-primary-cta"
+          initial={{ width: 0 }}
+          animate={{ width: `${progress}%` }}
+          transition={{ duration: 0.1, ease: "linear" }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ImageCardCarousel;