src/components/sections/hero/HeroOverlay.tsx

@@ -3,7 +3,8 @@ import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
 import TextAnimation from "@/components/ui/TextAnimation";
 import ImageOrVideo from "@/components/ui/ImageOrVideo";
 import AvatarGroup from "@/components/ui/AvatarGroup";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
+import { motion } from "motion/react";
 
 type HeroOverlayProps = {
   tag: string;
@@ -27,15 +28,36 @@ const HeroOverlay = ({
   avatarsLabel,
 }: HeroOverlayProps) => {
   const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  const [progress, setProgress] = useState(0);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  const imageDuration = 5000; // 5 seconds
+
+  const startProgress = () => {
+    setProgress(0);
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+    intervalRef.current = setInterval(() => {
+      setProgress((prevProgress) => {
+        if (prevProgress >= 100) {
+          setCurrentImageIndex((prevIndex) => (prevIndex + 1) % imageSrcs.length);
+          return 0;
+        }
+        return prevProgress + (100 / (imageDuration / 100)); // Increment based on duration
+      });
+    }, 100); // Update every 100ms
+  };
 
   useEffect(() => {
     if (imageSrcs && imageSrcs.length > 1) {
-      const interval = setInterval(() => {
-        setCurrentImageIndex((prevIndex) => (prevIndex + 1) % imageSrcs.length);
-      }, 5000); // Change image every 5 seconds
-      return () => clearInterval(interval);
+      startProgress();
     }
-  }, [imageSrcs]);
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [imageSrcs, currentImageIndex]);
 
   const currentImageSrc = imageSrcs ? imageSrcs[currentImageIndex] : undefined;
 
@@ -63,6 +85,15 @@ const HeroOverlay = ({
         aria-hidden="true"
       />
 
+      <div className="absolute bottom-0 left-0 w-full h-1 bg-white/20 z-20">
+        <motion.div
+          className="h-full bg-primary-cta"
+          initial={{ width: 0 }}
+          animate={{ width: `${progress}%` }}
+          transition={{ duration: 0.1, ease: "linear" }}
+        />
+      </div>
+
       <div className="relative z-10 w-content-width mx-auto pb-10 md:pb-25">
         <div className="flex flex-col gap-3 w-full md:w-6/10 lg:w-1/2 xl:w-45/100 2xl:w-4/10">
           <div className="w-fit px-3 py-1 mb-1 text-sm card rounded">