ok

src/components/Boat.jsx

@@ -14,7 +14,7 @@ import useMeasure from 'react-use-measure'
 import { Container } from './Container'
 import { Link } from './link'
 import { Heading, Subheading, H2, P, PS, H3} from './text'
-
+import { Button } from './Button'
 
 const testimonials = [
   {
@@ -99,9 +99,8 @@ function TestimonialCard({
   return (
     <motion.div
       ref={ref}
-      style={{ opacity }}
       {...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">
@@ -120,17 +119,18 @@ function TestimonialCard({
           </H3>
         </blockquote>
         
-        <PS className="mt-2 lg:text-base text-sm text-gray-600 leading-6">
+        <PS className="mt-2 mb-4">
           {subtitle}
         </PS>
         
-        <Link
+        <Button
           href={href}
-          className="mt-2 mb-2 inline-flex items-center gap-2 text-sm font-semibold text-gold-700 hover:text-gold-700"
+          variant="link"
+          color="darkgr"
+          className="mt-2 mb-2 "
         >
           Learn More
-          <ArrowLongRightIcon className="h-4 w-4" />
+        </Button>
-        </Link>
       </div>
     </motion.div>
   )
@@ -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)))
     }
   })
 
@@ -166,6 +172,12 @@ export function Boat() {
             <PS className="mt-4">
               Discover peaceful platforms where every detail ensures a truly memorable stay.
             </PS>
+            <PS className="mt-2 mb-6">
+              Our fleet of traditional dahabiyas combines authentic Nile heritage with modern comfort, offering intimate sailing experiences that connect you with Egypt's timeless river culture.
+            </PS>
+            <Button href="/dahabiyas" variant="link" color="darkgr" className="mt-6">
+            Learn More
+            </Button>
           </div>
           
           {/* Carousel - Right Side */}
@@ -196,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/Button.jsx

@@ -35,7 +35,7 @@ const variantStyles = {
     white:
       'text-white hover:text-slate-300 focus-visible:outline-white border-b border-white hover:border-slate-300',
     darkgr:
-      'text-darkgr-900 hover:text-darkgr-700 focus-visible:outline-darkgr-600 border-b border-darkgr-900 hover:border-darkgr-700',
+      'text-sm tracking-wide text-darkgr-900 hover:text-darkgr-700 focus-visible:outline-darkgr-600 border-b border-darkgr-900 hover:border-darkgr-700',
   },
 }
 

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}
           />
@@ -23,13 +23,13 @@ export function Hero() {
           <H2 className="mt-8">
             Nile Cruises, Reimagined.
           </H2>
-          <P className="mt-4">
+          <P className="mt-4 mb-6">
             Veda welcomes you into her home providing unique wellness cruises blending cultural authentic experiences with unparalleled freedom and privacy.<br/>
             Our organic cuisine, cultural activities and dedicated warm hearted crew will make your veda cruise an unforgettable experience.
           </P>
-          <button className="mt-6 text-sm lg:text-sm tracking-wide" variant="link" color="darkgr">
+          <Button href="/story" variant="link" color="darkgr">
             Learn More
-            </button>
+            </Button>
         </div>
     </div>
   )