From 64c7aa89fba697f36121d5c73ce6843cd672e08e Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Wed, 3 Jun 2026 13:51:28 +0000
Subject: [PATCH] Bob AI: i want each images to have their own progress bar and
 they a

---
 src/pages/HomePage/sections/Hero.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/pages/HomePage/sections/Hero.tsx b/src/pages/HomePage/sections/Hero.tsx
index 134c461..e3a7d52 100644
--- a/src/pages/HomePage/sections/Hero.tsx
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -67,11 +67,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>