ok

src/components/Boat.jsx

@@ -100,7 +100,7 @@ function TestimonialCard({
     <motion.div
       ref={ref}
       {...props}
-      className="w-72 shrink-0 snap-start scroll-ml-(--scroll-padding) bg-transparent shadow-sm overflow-hidden sm:w-80 lg:w-96"
+      className="w-72 shrink-0 snap-start scroll-ml-(--scroll-padding) bg-transparent  overflow-hidden sm:w-80 lg:w-96"
     >
       {/* Image Section */}
       <div className="relative aspect-square overflow-hidden">
@@ -119,7 +119,7 @@ function TestimonialCard({
           </H3>
         </blockquote>
         
-        <PS className="mt-2 mb-4a">
+        <PS className="mt-2 mb-4">
           {subtitle}
         </PS>
         
@@ -141,10 +141,16 @@ export function Boat() {
   let { scrollX } = useScroll({ container: scrollRef })
   let [setReferenceWindowRef, bounds] = useMeasure()
   let [activeIndex, setActiveIndex] = useState(0)
+  let [scrollProgress, setScrollProgress] = useState(0)
 
   useMotionValueEvent(scrollX, 'change', (x) => {
     if (scrollRef.current && scrollRef.current.children[0]) {
       setActiveIndex(Math.floor(x / scrollRef.current.children[0].clientWidth))
+      
+      // Calculate scroll progress
+      const maxScroll = scrollRef.current.scrollWidth - scrollRef.current.clientWidth
+      const progress = maxScroll > 0 ? (x / maxScroll) * 100 : 0
+      setScrollProgress(Math.min(100, Math.max(0, progress)))
     }
   })
 
@@ -202,6 +208,19 @@ export function Boat() {
               ))}
               <div className="w-8 shrink-0" />
             </div>
+            
+            {/* Progress Bar */}
+            <div className="mt-6 mx-6 lg:mx-0 flex justify-center">
+              <div className="w-32 bg-gray-500 rounded-full h-0.5 relative">
+                <div 
+                  className="bg-darkgr-900 h-0.5 rounded-full transition-all duration-300 ease-out"
+                  style={{ width: `${scrollProgress}%` }}
+                />
+                {/* Progress dots for visual clarity */}
+                <div className="absolute -top-1 left-0 w-2 h-2 bg-darkgr-900 rounded-full transform -translate-x-1"></div>
+                <div className="absolute -top-1 right-0 w-2 h-2 bg-gray-400 rounded-full transform translate-x-1"></div>
+              </div>
+            </div>
           </div>
         </div>
       </Container>