Bob AI: Fix carousel skipping images by removing state setter from u

Merge version_6_1780494606830 into main

src/pages/HomePage.tsx

@@ -13,6 +13,9 @@ import SocialProofSection from './HomePage/sections/SocialProof';
 import FaqSection from './HomePage/sections/Faq';
 import ContactSection from './HomePage/sections/Contact';
 
+
+{/* webild-stub @2026-06-03T13:49:00.110Z: change the hero section so each image in the carousel has its own progress bar, and all progress bars are visible at the same time */}
+
 export default function HomePage(): React.JSX.Element {
   return (
     <>

src/pages/HomePage/sections/Hero.tsx

@@ -24,16 +24,20 @@ export default function HeroSection(): React.JSX.Element {
 
     const timer = setInterval(() => {
       setProgress((prev) => {
-        if (prev >= 100) {
-          setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
-          return 0;
-        }
+        if (prev >= 100) return 100;
         return prev + step;
       });
     }, updateInterval);
 
     return () => clearInterval(timer);
-  }, [images.length]);
+  }, []);
+
+  useEffect(() => {
+    if (progress >= 100) {
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
+      setProgress(0);
+    }
+  }, [progress, images.length]);
 
   return (
     <div id="hero" data-webild-section="hero" className="w-full pt-32 pb-16 px-4 md:px-8 bg-background">
@@ -67,11 +71,17 @@ export default function HeroSection(): React.JSX.Element {
                             </div>
                         ))}
                     </div>
-                    <div className="absolute bottom-0 left-0 h-1.5 bg-white/30 w-full z-20">
-                        <div 
-                            className="h-full bg-white transition-all duration-75 ease-linear"
-                            style={{ width: `${progress}%` }}
-                        />
+                    <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex gap-3 w-full max-w-md px-4 z-20">
+                        {images.map((_, index) => (
+                            <div key={index} className="h-1.5 flex-1 bg-white/30 rounded-full overflow-hidden cursor-pointer" onClick={() => { setCurrentIndex(index); setProgress(0); }}>
+                                <div 
+                                    className="h-full bg-white transition-all duration-75 ease-linear"
+                                    style={{ 
+                                        width: index === currentIndex ? `${progress}%` : (index < currentIndex ? '100%' : '0%') 
+                                    }}
+                                />
+                            </div>
+                        ))}
                     </div>
                 </div>
             </div>