ok

src/components/Boat.jsx

@@ -156,41 +156,48 @@ export function Boat() {
   return (
     <div className="pt-16 lg:pt-24 pb-12">
       <Container>
-        <div ref={setReferenceWindowRef}>
-          <h2 className="font-display mt-2 text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
-            Dahabiyas
-          </h2>
-          <p className="mt-4 max-w-5xl text-xl/5 font-medium tracking-[-0.045em] lg:tracking-[-0.02em] leading-[1.3] lg:leading-[1.4] lg:text-2xl text-darkgr">
-            Discover peaceful platforms where every detail ensures a truly memorable stay. 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. 
-          </p>
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-start">
+          {/* Text Content - Left Side */}
+          <div ref={setReferenceWindowRef} className="lg:col-span-4">
+            <h2 className="font-display mt-2 text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
+              Dahabiyas
+            </h2>
+            <p className="mt-4 text-xl/5 font-medium tracking-[-0.045em] lg:tracking-[-0.02em] leading-[1.3] lg:leading-[1.4] lg:text-2xl text-darkgr">
+              Discover peaceful platforms where every detail ensures a truly memorable stay. 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. 
+            </p>
+          </div>
+          
+          {/* Carousel - Right Side */}
+          <div className="lg:col-span-8">
+            <div
+              ref={scrollRef}
+              className={clsx([
+                'flex gap-8 pl-6 pr-6 lg:pl-0 lg:pr-8',
+                '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+                'snap-x snap-mandatory overflow-x-scroll overscroll-x-contain scroll-smooth',
+                'pb-8',
+              ])}
+            >
+              {testimonials.map(({ img, name, title, quote, href, subtitle }, testimonialIndex) => (
+                <TestimonialCard
+                  key={testimonialIndex}
+                  subtitle={subtitle}
+                  name={name}
+                  title={title}
+                  href={href}
+                  img={img}
+                  bounds={bounds}
+                  scrollX={scrollX}
+                  onClick={() => scrollTo(testimonialIndex)}
+                >
+                  {quote}
+                </TestimonialCard>
+              ))}
+              <div className="w-8 shrink-0" />
+            </div>
+          </div>
         </div>
       </Container>
-      <div
-        ref={scrollRef}
-        className={clsx([
-          'mt-16 flex gap-8 pl-6 pr-6 lg:pl-8 lg:ml-12 ml-4',
-          '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
-          'snap-x snap-mandatory overflow-x-scroll overscroll-x-contain scroll-smooth',
-          'pb-8',
-        ])}
-      >
-        {testimonials.map(({ img, name, title, quote, href, subtitle }, testimonialIndex) => (
-          <TestimonialCard
-            key={testimonialIndex}
-            subtitle={subtitle}
-            name={name}
-            title={title}
-            href={href}
-            img={img}
-            bounds={bounds}
-            scrollX={scrollX}
-            onClick={() => scrollTo(testimonialIndex)}
-          >
-            {quote}
-          </TestimonialCard>
-        ))}
-        <div className="w-8 shrink-0" />
-      </div>
     </div>
   )
 }