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>
+            </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">
+            <PS className="mt-4">
-              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. 
+              Discover peaceful platforms where every detail ensures a truly memorable stay.
-            </p>
+            </PS>
           </div>
           
           {/* Carousel - Right Side */}

src/components/CallToAction.jsx

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

src/components/ContactHero.jsx

@@ -1,6 +1,9 @@
 'use client'
 
 import { BuildingOffice2Icon, EnvelopeIcon } from '@heroicons/react/24/outline'
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+import { H2 } from '@/components/text'
 import { useState } from 'react'
 
 export function ContactHero() {
@@ -46,9 +49,9 @@ export function ContactHero() {
                 />
               </div>
             </div>
-            <h2 className="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">
+            <H2 className="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">
               Get in Touch
-            </h2>
+            </H2>
             <p className="mt-6 text-lg/8 text-gray-600">
               At VEDA, we welcome your questions, ideas, and collaborations. Whether you’re curious about our retreats, interested in hosting a private gathering, or exploring partnership opportunities, we’re here to connect. Reach out to us today and let’s create transformative experiences along the timeless Nile.
             </p>

src/components/Hero.jsx

@@ -1,6 +1,8 @@
 
 import { Button } from '@/components/Button'
 import { Container } from '@/components/Container'
+import { H2 } from '@/components/text'
+import { P } from '@/components/text'
 import Image from 'next/image'
 
 export function Hero() {
@@ -18,18 +20,16 @@ export function Hero() {
         </div>
       </div> 
       <div className="max-w-7xl ml-3 px-6 lg:px-8 mx-0">
-          <h2 className="mt-8 text-2xl font-medium tracking-tight text-bg-darkbrown sm:text-3xl">
+          <H2 className="mt-8">
             Nile Cruises, Reimagined.
-          </h2>
+          </H2>
-          <p className="mt-4 text-lg/8 text-gray-600 font-extralight leading-tight">
+          <P className="mt-4">
             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>
+          </P>
-          <button className="mt-4 text-sm lg:text-sm tracking-wide">
+          <button className="mt-6 text-sm lg:text-sm tracking-wide" variant="link" color="darkgr">
-            <Button variant="link" color="darkgr">
+            Learn More
-              Learn More
+            </button>
-            </Button>
-          </button>
         </div>
     </div>
   )

src/components/PrimaryFeatures.jsx

@@ -5,6 +5,17 @@ import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
 import clsx from 'clsx'
 
 import { Container } from '@/components/Container'
+import { PhoneFrame } from '@/components/PhoneFrame'
+import { AppScreen } from '@/components/AppScreen'
+import { H2 } from '@/components/text'
+import logoBbc from '@/images/logos/bbc.svg'
+import logoCbs from '@/images/logos/cbs.svg'
+import logoCnn from '@/images/logos/cnn.svg'
+import logoFastCompany from '@/images/logos/fast-company.svg'
+import logoForbes from '@/images/logos/forbes.svg'
+import logoHuffpost from '@/images/logos/huffpost.svg'
+import logoTechcrunch from '@/images/logos/techcrunch.svg'
+import logoWired from '@/images/logos/wired.svg'
 
 const features = [
   {
@@ -61,9 +72,9 @@ export function PrimaryFeatures() {
       />
       <Container className="relative">
         <div className="max-w-2xl md:mx-auto md:text-center xl:max-w-none">
-          <h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl md:text-5xl">
+          <H2 className="font-display text-3xl tracking-tight text-white sm:text-4xl md:text-5xl">
           What makes VEDA different?
-          </h2>
+          </H2>
           <p className="mt-6 text-lg tracking-tight text-blue-100">
             Well everything you need if you aren’t that picky about minor
             details like tax compliance.

src/components/SecondaryFeatures.jsx

@@ -2,9 +2,8 @@
 
 import { useId } from 'react'
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
-import clsx from 'clsx'
+
-import { Button } from '@/components/Button'
+import { H2 } from '@/components/text'
-import { Container } from '@/components/Container'
 
 const features = [
   {
@@ -264,10 +263,10 @@ export function SecondaryFeatures() {
     >
       <Container>
         <div className="mx-auto max-w-3xl md:text-center">
-          <h2 className="text-base font-semibold leading-7 text-gold-600">OUR OFFERS</h2>
+          <H2 className="text-base font-semibold leading-7 text-gold-600">OUR OFFERS</H2>
-          <h2 className="font-display mt-2 text-3xl font-bold tracking-tight text-gray-800 sm:text-4xl">
+          <H2 className="font-display mt-2 text-3xl font-bold tracking-tight text-gray-800 sm:text-4xl">
             VEDA DAHABIYAS
-          </h2>
+          </H2>
           <p className="mt-6 max-w-3xl text-lg leading-8 text-gray-600">
             Discover peaceful platforms where every detail ensures a truly memorable stay.
           </p>

src/components/Team.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Button } from '@/components/Button'
 import { Container } from '@/components/Container'
+import { H2 } from '@/components/text'
 
 const people = [
     {
@@ -31,7 +32,7 @@ const people = [
       <div className="bg-creme-600 py-12 md:py-32 lg:py-12">
         <div className="mx-auto grid max-w-7xl grid-cols-1 gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3">
           <div className="mx-auto max-w-2xl lg:mx-0">
-            <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">OUR PEOPLE</h2>
+            <H2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">OUR PEOPLE</H2>
             <p className="mt-6 text-lg leading-8 text-gray-600">
             We are a dynamic family of individuals from diverse cultural backgrounds and varied expertise, united by our passion in spirituality and dedication delivering heartfelt and authentic Nile experiences for our guests.
             </p>

src/components/text.jsx

@@ -14,6 +14,62 @@ export function Heading({ as: Component = 'h1', className, children, ...props })
   )
 }
 
+export function H2({ className, children, ...props }) {
+  return (
+    <h2
+      className={clsx(
+        'mt-8 text-2xl font-medium tracking-tight text-bg-darkbrown sm:text-3xl',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </h2>
+  )
+}
+
+export function H3({ className, children, ...props }) {
+  return (
+    <h2
+      className={clsx(
+        'mt-8 text-xl font-medium tracking-tight text-bg-darkbrown sm:text-2xl',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </h2>
+  )
+}
+
+export function P({ className, children, ...props }) {
+  return (
+    <p
+      className={clsx(
+        'mt-4 text-lg/8 text-gray-700 font-extralight leading-tight',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </p>
+  )
+}
+
+export function PS({ className, children, ...props }) {
+  return (
+    <p
+      className={clsx(
+        'mt-4 text-base text-gray-700 font-extralight leading-snug',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </p>
+  )
+}
+
 export function Subheading({ className, children, ...props }) {
   return (
     <h3