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>

src/components/CallToAction.jsx

@@ -9,7 +9,7 @@ export function CallToAction() {
   return (
     <section
       id="about"
-      className="relative overflow-hidden bg-bg-sand py-24"
+      className="relative overflow-hidden bg-bg-sand py-16"
     >
       <Container className="relative">
         <div className="mx-auto max-w-3xl text-center">

src/components/Hero.jsx

@@ -8,12 +8,12 @@ import Image from 'next/image'
 export function Hero() {
   return (
     <div className=" max-w-8xl px-6 lg:px-8 -z-10 -mt-5 mx-0 bg-bg-sand pb-12">
-      {/* Background Image with opacity to show sand background */}
+      {/* Background Image with opacity to show sand background i changed the src for now bc its not uploaded to server*/}
       <div className="relative overflow-hidden">
         <div className="mx-auto max-w-7xl">
           <img
             alt="App screenshot"
-            src="/images/hero.jpg"
+            src="https://i.postimg.cc/y1HZZFQP/hero.jpg"
             width={1360}
             height={600}
           />