Remove duplicate imports and implement fading image carousel with navigation dots in HeroBillboardCarousel.tsx

src/components/sections/hero/HeroBillboardCarousel.tsx

@@ -2,6 +2,8 @@ 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 { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "motion/react";
 
 type HeroBillboardCarouselProps = {
   tag: string;
@@ -20,15 +22,41 @@ const HeroBillboardCarousel = ({
   secondaryButton,
   items,
 }: HeroBillboardCarouselProps) => {
-  const duplicated = [...items, ...items, ...items, ...items];
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % items.length);
+    }, 5000); // Change image every 5 seconds
+    return () => clearInterval(interval);
+  }, [items.length]);
 
   return (
     <section
       aria-label="Hero section"
-      className="relative flex flex-col items-center justify-center gap-8 w-full min-h-svh py-25"
+      className="relative flex flex-col items-center justify-center gap-8 w-full min-h-svh py-25 overflow-hidden"
     >
       <HeroBackgroundSlot />
-      <div className="flex flex-col items-center gap-2 w-content-width mx-auto text-center">
+      <div className="absolute inset-0 z-0">
+        <AnimatePresence initial={false}>
+          <motion.div
+            key={currentIndex}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 1.5, ease: "easeInOut" }}
+            className="absolute inset-0"
+          >
+            <ImageOrVideo
+              imageSrc={items[currentIndex].imageSrc}
+              videoSrc={items[currentIndex].videoSrc}
+              className="w-full h-full object-cover"
+            />
+          </motion.div>
+        </AnimatePresence>
+      </div>
+
+      <div className="relative z-10 flex flex-col items-center gap-2 w-content-width mx-auto text-center">
         <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
           <p>{tag}</p>
         </div>
@@ -55,18 +83,17 @@ 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="relative z-10 flex justify-center gap-2 mt-4">
+        {items.map((_, index) => (
+          <button
+            key={index}
+            onClick={() => setCurrentIndex(index)}
+            className={`h-2 w-2 rounded-full transition-colors ${
+              currentIndex === index ? "bg-primary-cta" : "bg-muted"
+            }`}
+            aria-label={`Go to slide ${index + 1}`}
+          />
+        ))}
       </div>
     </section>
   );