caroousel

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,7 +99,6 @@ 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"
     >
@@ -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-4a">
           {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" />
-        </Link>
+        </Button>
       </div>
     </motion.div>
   )
@@ -166,6 +166,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 */}