OK

src/components/Boat.jsx

@@ -13,7 +13,8 @@ import { useCallback, useLayoutEffect, useRef, useState } from 'react'
 import useMeasure from 'react-use-measure'
 import { Container } from './Container'
 import { Link } from './link'
-import { Heading, Subheading } from './text'
+import { Heading, Subheading, H2, P, PS, H3} from './text'
+
 
 const testimonials = [
   {
@@ -100,7 +101,7 @@ function TestimonialCard({
       ref={ref}
       style={{ opacity }}
       {...props}
-      className="w-72 shrink-0 snap-start scroll-ml-(--scroll-padding) bg-[#fffefa] rounded-3xl shadow-lg overflow-hidden sm:w-80 lg:w-96"
+      className="w-72 shrink-0 snap-start scroll-ml-(--scroll-padding) bg-transparent shadow-sm overflow-hidden sm:w-80 lg:w-96"
     >
       {/* Image Section */}
       <div className="relative aspect-square overflow-hidden">
@@ -112,16 +113,16 @@ function TestimonialCard({
       </div>
       
       {/* Content Section Below Image */}
-      <div className="p-6">
+      <div className="py-2">
         <blockquote>
-          <p className="text-2xl font-bold text-darkgr lg:text-3xl">
+          <H3 className="">
             {children}
-          </p>
+          </H3>
         </blockquote>
         
-        <p className="mt-2 lg:text-base text-sm text-gray-600 leading-6">
+        <PS className="mt-2 lg:text-base text-sm text-gray-600 leading-6">
           {subtitle}
-        </p>
+        </PS>
         
         <Link
           href={href}
@@ -154,17 +155,17 @@ export function Boat() {
   }
 
   return (
-    <div className="pt-16 lg:pt-24 pb-12">
+    <div className="pt-12 pb-12 bg-bg-sand">
       <Container>
         <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">
+            <H2 className="mt-2">
               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>
+            </H2>
+            <PS className="mt-4">
+              Discover peaceful platforms where every detail ensures a truly memorable stay.
+            </PS>
           </div>
           
           {/* Carousel - Right Side */}