RM HOME

public/images/components/ContactHero.jsx

@@ -83,7 +83,7 @@ export function ContactHero() {
         <div className="relative bg-gray-100 overflow-hidden px-6 lg:px-8">
           <div className="h-full w-full overflow-hidden">
             <img
-              src="/images/contact/contact.png"
+              src="/images/contact.jpg"
               alt="VEDA contact"
               width={900}
               height={600}

public/images/components/Daha2.jsx

@@ -40,7 +40,7 @@ export default function Example() {
         Choose from our selection of four dahabiyas, each designed to provide a unique and soulful journey.
         </p>
 
-        <div className="mt-10 space-y-12 lg:grid lg:grid-cols-4 lg:gap-x-8 lg:space-y-0">
+        <div className="mt-10 space-y-8  lg:grid lg:grid-cols-4 lg:gap-x-8 lg:space-y-0">
           {categories.map((category) => (
             <a key={category.name} href={category.href} className="group block">
               <div
@@ -54,7 +54,7 @@ export default function Example() {
                 />
               </div>
               <h3 className="mt-4 text-base font-semibold text-gray-900">{category.name}</h3>
-              <p className="mt-2 text-sm text-gray-500">{category.description}</p>
+              <p className="lg:mt-2 mt-0 text-sm text-gray-500">{category.description}</p>
             </a>
           ))}
         </div>

src/app/contact/page.jsx

@@ -1,6 +1,7 @@
 import { ContactHero } from "@/components/ContactHero"
 import { Header } from "@/components/Header"
 import { Footer } from "@/components/Footer"
+import { Testimonials } from "@/components/Testimonials"
 
 export default function Contact() {
   return (
@@ -8,6 +9,7 @@ export default function Contact() {
       <Header />
       <main>
         <ContactHero />
+        <Testimonials />
       </main>
       <Footer />
     </>

src/app/dahabiyas/page.jsx

@@ -36,6 +36,8 @@ export default function Dahabiyas() {
       <main>
         <Daha1 />
         <Daha2 onVedaSelect={setSelectedVeda} selectedVeda={selectedVeda} />
+        {/* Thin brown line separator */}
+        <div className="w-full border-t border-bg-darkbrown/30 mx-auto max-w-7xl"></div>
         {renderSelectedVeda()}
         <Testimonials />
       </main>

src/app/experiences/page.jsx

@@ -39,6 +39,8 @@ export default function ExperiencesPage() {
       <Header />
       <main>
         <Experiences onExperienceSelect={setSelectedExperience} />
+        {/* Thin brown line separator */}
+        <div className="w-full border-t border-bg-darkbrown/30 mx-auto max-w-7xl"></div>
         {renderSelectedComponent()}
         <Carousel />
         <FFVid />

src/components/Carousel.jsx

@@ -71,13 +71,13 @@ const MultiCardCarousel = () => {
   const displayCards = isMobile ? [cards[currentIndex]] : cards.slice(currentIndex, currentIndex + 3);
 
   return (
-    <div className="bg-transparent flex items-center justify-center py-16 px-6">
+    <div className="bg-transparent flex items-center justify-center py-12 px-6">
       <div className="w-full max-w-7xl ">
         <div className="text-left mx-auto max-w-7xl ">
           <H2 className="">
             Activities
           </H2>
-          <P className="max-w-5xl mb-8">
+          <P className="max-w-5xl mt-2 mb-8">
             Explore a diverse range of activities designed to elevate your Mind, Body, and Soul.
           </P>
         </div>

src/components/Community.jsx

@@ -1,3 +1,4 @@
+import { P, H3, H4, PXS, PXXS } from '@/components/text'
 import {
   Tab,
   TabGroup,
@@ -50,8 +51,8 @@ const product = {
 
 export function Community() {
   return (
-    <div className="pb-24">
-      <main className="mx-auto max-w-7xl sm:px-6 sm:pt-24 lg:px-0">
+    <div className="lg:pb-24 pb-12">
+      <main className="mx-auto max-w-7xl sm:px-6 sm:pt-12 lg:px-0">
         <div className="mx-auto max-w-2xl lg:max-w-none">
           {/* Product */}
           <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
@@ -91,22 +92,21 @@ export function Community() {
             <div className="mt-6 px-6 sm:mt-16 sm:px-0 lg:mt-0">
               <H2>{product.name}</H2>
 
-              <div className="mt-4">
-                <h3 className="sr-only">Description</h3>
+              <div className="mt-2">
+
                 <div className="space-y-2 text-base text-gray-700">
                   <PS>{product.description}</PS>
                 </div>
               </div>
 
-              <section aria-labelledby="details-heading" className="mt-8">
-                <div className="space-y-4 border-t border-gray-300 pt-4">
+              <section aria-labelledby="details-heading" className="lg:pt-8 pt-6">
+
+                <div className="lg:space-y-8 space-y-4 border-t border-gray-300 lg:pt-8 pt-6">
                   {product.details.map((detail) => (
                     <div key={detail.name}>
-                      <h3>
-                        <PS className="font-medium text-gray-900 mb-4">
-                          {detail.name}
-                        </PS>
-                      </h3>
+                      <H3 className="font-medium text-gray-900 mb-4">
+                        {detail.name}
+                      </H3>
                       <ul
                         role="list"
                         className="list-disc space-y-2 pl-5 text-sm/6 text-gray-700 marker:text-gray-300"

src/components/ContactHero.jsx

@@ -1,65 +1,28 @@
 'use client'
 
 import { BuildingOffice2Icon, EnvelopeIcon } from '@heroicons/react/24/outline'
-import { Button } from '@/components/Button'
-import { Container } from '@/components/Container'
+
 import { H2, PS } from '@/components/text'
-import { useState } from 'react'
+
 
 export function ContactHero() {
   return (
     <div className="relative isolate">
-      <div className="mx-auto grid max-w-7xl grid-cols-1 lg:grid-cols-2">
+      <div className="mx-auto grid max-w-7xl grid-cols-1 lg:grid-cols-2 py-8 lg:py-12">
         {/* Left container */}
-        <div className="relative px-6 pt-24 pb-20 lg:static lg:px-8 lg:py-32">
+        <div className="relative px-4 lg:px-6 py-8 lg:py-16">
           <div className="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
-            <div className="absolute inset-y-0 left-0 -z-10 w-full overflow-hidden bg-gray-100 ring-1 ring-gray-900/10 lg:w-1/2">
-              <svg
-                aria-hidden="true"
-                className="absolute inset-0 size-full mask-[radial-gradient(100%_100%_at_top_right,white,transparent)] stroke-gray-200"
-              >
-                <defs>
-                  <pattern
-                    x="100%"
-                    y={-1}
-                    id="83fd4e5a-9d52-42fc-97b6-718e5d7ee527"
-                    width={200}
-                    height={200}
-                    patternUnits="userSpaceOnUse"
-                  >
-                    <path d="M130 200V.5M.5 .5H200" fill="none" />
-                  </pattern>
-                </defs>
-                <rect width="100%" height="100%" strokeWidth={0} className="fill-white" />
-                <svg x="100%" y={-1} className="overflow-visible fill-gray-50">
-                  <path d="M-470.5 0h201v201h-201Z" strokeWidth={0} />
-                </svg>
-                <rect fill="url(#83fd4e5a-9d52-42fc-97b6-718e5d7ee527)" width="100%" height="100%" strokeWidth={0} />
-              </svg>
-              <div
-                aria-hidden="true"
-                className="absolute top-[calc(100%-13rem)] -left-56 hidden transform-gpu blur-3xl lg:top-[calc(50%-7rem)] lg:left-[max(-14rem,calc(100%-59rem))]"
-              >
-                <div
-                  style={{
-                    clipPath:
-                      'polygon(74.1% 56.1%, 100% 38.6%, 97.5% 73.3%, 85.5% 100%, 80.7% 98.2%, 72.5% 67.7%, 60.2% 37.8%, 52.4% 32.2%, 47.5% 41.9%, 45.2% 65.8%, 27.5% 23.5%, 0.1% 35.4%, 17.9% 0.1%, 27.6% 23.5%, 76.1% 2.6%, 74.1% 56.1%)',
-                  }}
-                  className="aspect-1155/678 w-288.75 bg-linear-to-br from-[#80caff] to-[#4f46e5] opacity-10"
-                />
-              </div>
-            </div>
-            <H2 className="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">
+            <H2 className="">
               Get in Touch
             </H2>
-            <PS>
+            <PS className="mt-2">
               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.
             </PS>
-            <dl className="mt-10 space-y-4 text-base/7 text-gray-200">
+            <dl className="mt-10 space-y-4 text-base/7 text-gray-600">
               <div className="flex gap-x-4">
                 <dt className="flex-none">
                   <span className="sr-only">Email</span>
-                  <EnvelopeIcon aria-hidden="true" className="h-7 w-6 text-gray-400" />
+                  <EnvelopeIcon aria-hidden="true" className="h-7 w-6 text-gray-800" />
                 </dt>
                 <dd>
                   <a href="mailto:info@veda-egypt.com" className="hover:text-gray-900">
@@ -70,7 +33,7 @@ export function ContactHero() {
               <div className="flex gap-x-4">
                 <dt className="flex-none">
                   <span className="sr-only">Reservations</span>
-                  <EnvelopeIcon aria-hidden="true" className="h-7 w-6 text-gray-400" />
+                  <EnvelopeIcon aria-hidden="true" className="h-7 w-6 text-gray-800" />
                 </dt>
                 <dd>
                   <a href="mailto:reservation@veda-egypt.com" className="hover:text-gray-900">
@@ -83,10 +46,10 @@ export function ContactHero() {
         </div>
 
         {/* Right container (image) */}
-        <div className="relative bg-gray-100 overflow-hidden px-6 lg:px-8">
+        <div className="relative bg-transparent overflow-hidden px-6 lg:px-8">
           <div className="h-full w-full overflow-hidden">
             <img
-              src="/images/contact/contact.png"
+              src="/images/contact.jpg"
               alt="VEDA contact"
               width={900}
               height={600}

src/components/Events.jsx

@@ -1,3 +1,4 @@
+import { P, H3, H4, PXS, PXXS } from '@/components/text'
 import {
   Tab,
   TabGroup,
@@ -52,8 +53,8 @@ const product = {
 
 export function Events() {
   return (
-    <div className="pb-24">
-      <main className="mx-auto max-w-7xl sm:px-6 sm:pt-24 lg:px-0">
+    <div className="lg:pb-24 pb-12">
+      <main className="mx-auto max-w-7xl sm:px-6 sm:pt-12 lg:px-0">
         <div className="mx-auto max-w-2xl lg:max-w-none">
           {/* Product */}
           <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
@@ -93,22 +94,21 @@ export function Events() {
             <div className="mt-6 px-6 sm:mt-16 sm:px-0 lg:mt-0">
               <H2>{product.name}</H2>
 
-              <div className="mt-4">
-                <h3 className="sr-only">Description</h3>
+              <div className="mt-2">
+
                 <div className="space-y-2 text-base text-gray-700">
                   <PS>{product.description}</PS>
                 </div>
               </div>
 
-              <section aria-labelledby="details-heading" className="mt-8">
-                <div className="space-y-4 border-t border-gray-300 pt-4">
+              <section aria-labelledby="details-heading" className="lg:pt-8 pt-6">
+
+                <div className="lg:space-y-8 space-y-4 border-t border-gray-300 lg:pt-8 pt-6">
                   {product.details.map((detail) => (
                     <div key={detail.name}>
-                      <h3>
-                        <PS className="font-medium text-gray-900 mb-4">
-                          {detail.name}
-                        </PS>
-                      </h3>
+                      <H3 className="font-medium text-gray-900 mb-4">
+                        {detail.name}
+                      </H3>
                       <ul
                         role="list"
                         className="list-disc space-y-2 pl-5 text-sm/6 text-gray-700 marker:text-gray-300"

src/components/Experiences.jsx

@@ -4,7 +4,7 @@ import { H1, H2, P , PS, PXS, H3, H4 } from "@/components/text";
 export function Experiences({ onExperienceSelect }) {
   return (           
     <div className="bg-transparent">    
-      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-0 mt-16">
+      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-0 lg:pt-12 pt-6 lg:pb-12 pb-12">
         <div className="grid grid-cols-1 gap-4 lg:grid-cols-6 lg:grid-rows-2">
           {/* Photo 1 - Left large image */}
           <div className="flex lg:col-span-2 lg:row-span-2">

src/components/FreeflowVideo.jsx

@@ -7,34 +7,28 @@ import { H1, H2, H3, H4, P, PS, PXS, PXXS } from '@/components/text'
 
 const FFVid = () => {
     return (
-        <section
-      id="testimonials"
-      aria-label="What our customers are saying"
-      className="bg-transparent py-16"
-    >
       <Container>
-        <div className="mx-auto max-w-5xl md:text-center">
-          <H2 className="">
+        <div className="bg-transparent mx-auto max-w-7xl md:text-center pt-12 lg:pt-24">
+          <H2  className="">
           A Glimpse Into Private Retreats at VEDA
           </H2>
-          <P className="mt-4 mb-8 text-lg pb-6 tracking-tight text-slate-700">
+          <P className="mt-2">
           We were honored to welcome FreeFlow Retreats aboard VEDA, where guests experienced the perfect blend of wellness, culture, and tranquility on the Nile. Watch the video below for a glimpse of how your own retreat could unfold in this unique setting. 
           </P>
         </div>
-      <div className="video-container">
+      <div className="video-container mt-12 bg-transparent">
         <iframe
           src="https://player.vimeo.com/video/725069296?loop=1&muted=1"
           width="100%"
-          height="600"
+          height="300"
           frameBorder="0"
           allow="autoplay; fullscreen; picture-in-picture"
           allowFullScreen
-          className="rounded-lg w-full max-w-7xl mx-auto"
+          className="rounded-lg w-full max-w-6xl mx-auto sm:h-[400px] lg:h-[600px]"
         ></iframe>
       </div>
         </Container>
-        </section>
     );
   };
   
-export default FFVid;
+export default FFVid;

src/components/Header.jsx

@@ -17,7 +17,7 @@ import { NavLink } from '@/components/NavLink'
 
 function MobileNavLink({ href, children }) {
   return (
-    <PopoverButton as={Link} href={href} className="block w-full p-2">
+    <PopoverButton as={Link} href={href} className="block w-full p-3 font-semibold text-base hover:bg-white/10 rounded-md transition-colors duration-200">
       {children}
     </PopoverButton>
   )
@@ -65,14 +65,13 @@ function MobileNavigation() {
       />
       <PopoverPanel
         transition
-        className="absolute inset-x-0 top-full z-50 mt-4 flex origin-top flex-col rounded-lg bg-transparent border border-slate-200/20 p-4 text-lg tracking-tight text-bg-darkbrown shadow-xl ring-1 ring-slate-900/5 data-[closed]:scale-95 data-[closed]:opacity-0 data-[enter]:duration-150 data-[leave]:duration-100 data-[enter]:ease-out data-[leave]:ease-in"
+        className="absolute inset-x-0 top-full z-50 mt-4 flex origin-top flex-col rounded-lg bg-white/95 backdrop-blur-sm border border-slate-200 p-5 text-lg tracking-tight text-bg-darkbrown shadow-2xl ring-1 ring-slate-900/10 data-[closed]:scale-95 data-[closed]:opacity-0 data-[enter]:duration-150 data-[leave]:duration-100 data-[enter]:ease-out data-[leave]:ease-in"
       >
-        <MobileNavLink href="/">HOME</MobileNavLink>
         <MobileNavLink href="/story">STORY</MobileNavLink>
         <MobileNavLink href="/experiences">EXPERIENCES</MobileNavLink>
         <MobileNavLink href="/dahabiyas">DAHABIYAS</MobileNavLink>
         <MobileNavLink href="/itinerary">ITINERARY</MobileNavLink>
-        <hr className="m-2 border-slate-300/40" />
+        <hr className="my-3 border-slate-300/60" />
         <MobileNavLink href="/contact">Book Now</MobileNavLink>
       </PopoverPanel>
     </Popover>
@@ -106,7 +105,6 @@ export function Header() {
             {/* Navigation - Center */}
             <div className="flex-1 flex justify-center">
               <div className="hidden md:flex md:gap-x-4 lg:gap-x-6">
-                <NavLink href="/">HOME</NavLink>
                 <NavLink href="/story">STORY</NavLink>
                 <NavLink href="/experiences">EXPERIENCES</NavLink>
                 <NavLink href="/dahabiyas">DAHABIYAS</NavLink>

src/components/Hero2.jsx

@@ -44,7 +44,7 @@ export function Hero2() {
               <span className="relative">Reimagined</span>
             </span>
           </H1>
-          <P className="mt-3 sm:mt-4 md:mt-6 lg:mt-8 leading-relaxed font-medium text-white text-sm sm:text-base md:text-lg px-1 sm:px-2 md:px-0 max-w-xs sm:max-w-sm md:max-w-2xl mx-auto">
+          <P className="mt-6 lg:mt-8 leading-relaxed font-medium text-white text-sm sm:text-base md:text-lg px-1 sm:px-2 md:px-0 max-w-xs sm:max-w-sm md:max-w-2xl mx-auto">
             VEDA welcomes you into her home providing unique wellness cruises blending cultural authentic experiences with unparalleled freedom and privacy.
             Our organic cuisine, cultural activities and dedicated warm hearted crew will make your VEDA cruise an unforgettable experience.
           </P>

src/components/Hero3.jsx

@@ -17,31 +17,39 @@ export function Hero3() {
       id="section-1"
       data-story-section
       data-image="/images/hero_story1.jpg"
-      className="relative w-full overflow-hidden mt-0"
+      className="relative w-full overflow-hidden h-screen lg:h-auto mt-0"
     >
       {/* Background Image - stays for mobile, hidden on lg (sticky column takes over) */}
       <img
         src="/images/hero_story1.jpg"
         alt="Hero Story Background"
-        className="w-full h-auto object-cover block relative z-0 lg:hidden"
+        className="absolute inset-0 w-full h-full object-cover z-0 lg:hidden"
       />
 
       {/* Black Overlay (mobile only) */}
-      <div className="absolute inset-0 bg-black opacity-50 lg:hidden"></div>
+      <div className="absolute inset-0 bg-black opacity-70 lg:hidden z-10"></div>
 
       {/* Content */}
-      <div className="absolute inset-0 lg:static lg:inset-auto lg:top-0 flex items-start justify-start text-start px-4 lg:px-0 z-20">
-        <div className="max-w-xs sm:max-w-md md:max-w-2xl lg:max-w-2xl w-full lg:pt-0">
+      <div className="absolute inset-0 lg:static lg:inset-auto lg:top-0 flex items-center lg:items-start justify-start text-start px-4 lg:px-0 z-20">
+        <div className="max-w-xs sm:max-w-md md:max-w-2xl lg:max-w-2xl w-full lg:pt-0 py-12">
           <H2 className="text-white lg:text-black">Our Story</H2>
           <P className="mt-4 text-white lg:text-neutral-800">THE TALE OF SACRED ENERGIES OF THE NILE</P>
-          <PS className="mt-6 text-white lg:text-neutral-700">
+          <PS className="mt-6 text-white lg:text-neutral-700 lg:text-base text-sm">
             Our founders, Isabelle Peeters and Kristof De Spiegeleer fell in love with the Nile and envisioned creating authentic, zen, art dahabeya to feel and experience in a unique way the mystical and the deep wisdom of the Nile.
           </PS>
-          <PS className="mt-4 text-white lg:text-neutral-700">
+          <PS className="mt-4 text-white lg:text-neutral-700 lg:text-base text-sm">
             Their dream was to offer a sanctuary for the body, mind, and soul, a safe space to open yourself to new experiences, and allow the sacredness of the Nile to flow through you, to step back in the past, to align with the now helping you to reconnect with your true essence. A sanctuary for the body, mind, and soul, a safe space.
           </PS>
         </div>
       </div>
+      
+      {/* Chevron Down Button - Mobile Only */}
+      <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 lg:hidden z-30">
+        <ChevronDownIcon 
+          onClick={scrollDown}
+          className="h-10 w-10 text-white animate-pulse cursor-pointer hover:text-gray-300 transition-colors duration-200"
+        />
+      </div>
     </div>
   )
 }

src/components/Hero4.jsx

@@ -17,26 +17,34 @@ export function Hero4() {
       id="section-2"
       data-story-section
       data-image="/images/hero_story2.jpg"
-      className="relative w-full overflow-hidden mt-0"
+      className="relative w-full overflow-hidden h-screen lg:h-auto mt-0"
     >
       <img
         src="/images/hero_story2.jpg"
         alt="Hero Story Background"
-        className="w-full h-auto object-cover block relative z-0 lg:hidden"
+        className="absolute inset-0 w-full h-full object-cover z-0 lg:hidden"
       />
 
-      <div className="absolute inset-0 bg-black opacity-50 lg:hidden"></div>
+      <div className="absolute inset-0 bg-black opacity-50 lg:hidden z-10"></div>
 
-      <div className="absolute inset-0 lg:static lg:inset-auto lg:top-0 flex items-start justify-start text-start px-4 lg:px-0 z-20">
+      <div className="absolute inset-0 lg:static lg:inset-auto lg:top-0 flex items-center lg:items-start justify-start text-start px-4 lg:px-0 z-20">
         <div className="max-w-xs sm:max-w-md md:max-w-2xl lg:max-w-2xl w-full lg:pt-4">
-          <PS className="text-white lg:text-neutral-700">
+          <PS className="text-white lg:text-neutral-700 lg:text-base text-sm">
             We are unique in the market as the cruises are designed to provide for a private, personalised and wellness experience on the River Nile. Families, communities or dedicated groups up to sixty people can sail the Nile together discovering her hidden treasures. The Nile is a powerful natural energy source, and the boats are designed to help you align with its frequencies to feel the magic carried by sacred waters of the Nile.
           </PS>
-          <PS className="mt-6 text-white lg:text-neutral-700">
+          <PS className="mt-6 text-white lg:text-neutral-700 lg:text-base text-sm">
             Frequencies are the new currency. Our mission is to help you recognize and align with different frequencies, creating a deeply fulfilling life in tune with your soul's gifts. Self-knowledge and self-mastery are the keys to fully opening your heart. By understanding and resonating with these frequencies, you can achieve a life of harmony and fulfillment.
           </PS>
         </div>
       </div>
+      
+      {/* Chevron Down Button - Mobile Only */}
+      <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 lg:hidden z-30">
+        <ChevronDownIcon 
+          onClick={scrollDown}
+          className="h-10 w-10 text-white animate-pulse cursor-pointer hover:text-gray-300 transition-colors duration-200"
+        />
+      </div>
     </div>
   )
 }

src/components/Hero5.jsx

@@ -8,22 +8,22 @@ export function Hero5() {
       id="section-3"
       data-story-section
       data-image="/images/hero_story3.jpg"
-      className="relative w-full overflow-hidden mt-0"
+      className="relative w-full overflow-hidden  h-[60vh] cha lg:h-auto mt-0"
     >
       <img
         src="/images/hero_story3.jpg"
         alt="Hero Story Background"
-        className="w-full h-auto object-cover block relative z-0 lg:hidden"
+        className="absolute inset-0 w-full h-full object-cover z-0 lg:hidden"
       />
 
-      <div className="absolute inset-0 bg-black opacity-50 lg:hidden"></div>
+      <div className="absolute inset-0 bg-black opacity-50 lg:hidden z-10"></div>
 
-      <div className="absolute inset-0 lg:static lg:inset-auto lg:top-0 flex items-start justify-start text-start px-4 lg:px-0 z-20">
+      <div className="absolute inset-0 lg:static lg:inset-auto lg:top-0 flex items-center lg:items-start justify-start text-start px-4 lg:px-0 z-20">
         <div className="max-w-xs sm:max-w-md md:max-w-2xl lg:max-w-2xl w-full lg:pt-4">
-          <PS className="text-white lg:text-neutral-700">
+          <PS className="text-white lg:text-neutral-700 lg:text-base text-sm">
             Are you ready to step out of your comfort zone and embrace these changes? Can you let the new energies flow through you and break free from outdated programs to welcome new wisdom?
           </PS>
-          <PS className="mt-6 text-white lg:text-neutral-700">
+          <PS className="mt-6 text-white lg:text-neutral-700 lg:text-base text-sm">
             Together, let us open new gates of consciousness and expand the flow of unconditional love. The magical energy of the Nile is ready to flow through us, uniting us in a heartbeat. Home is calling you, inviting you to a journey of inner discovery and profound connection.
           </PS>
           <H4 className="text-base mt-8 font-semibold leading-7 italic text-gold-600">With Love,</H4>

src/components/Itinerary.jsx

@@ -109,27 +109,27 @@ export function Itinerary() {
   }
 
   return (
-    <div className="relative bg-transparent mb-0">
+    <div className="relative bg-transparent mb-0 px-4 sm:px-6 lg:px-0 pt-0">
       <div className="relative mx-auto max-w-8xl lg:grid lg:grid-cols-2 lg:items-stretch">
         {/* Left column with changeable day content */}
-        <div className="relative min-h-80">
+        <div className="relative lg:min-h-80 min-h-[80vh]">
           <img
             alt={`Journey Image ${currentDay}`}
             src={dayData.image}
-            className="w-full h-full object-cover"
+            className="w-full lg:h-full h-[80vh] object-cover"
           />
           {/* Black overlay */}
           <div className="absolute inset-0 bg-black opacity-60"></div>
           {/* paragraphs */}
-          <div className="absolute inset-0 flex items-start justify-center mx-auto max-w-lg flex-col text-start px-10">
-            <H2 className="">{dayData.title}</H2>
+          <div className="absolute inset-0 flex items-start justify-center mx-auto max-w-lg flex-col lg:text-start text-center px-4 sm:px-6 lg:px-10 pt-20 lg:pt-0">
+            <H2 className="text-white">{dayData.title}</H2>
             {dayData.content.map((paragraph, index) => (
-              <PS key={index} className="mt-2">{paragraph}</PS>
+              <PS key={index} className="mt-2 text-white">{paragraph}</PS>
             ))}
             <div className="mt-6 flex justify-center items-center ">
               <ChevronDownIcon 
                 onClick={handleManualAdvance}
-                className="h-8 w-8 text-white animate-bounce cursor-pointer hover:text-gray-300 transition-colors duration-200 animate-pulse"
+                className="h-8 w-8 text-white cursor-pointer hover:text-gray-300 transition-colors duration-200 animate-pulse"
               />
             </div>
           </div>

src/components/Nomads.jsx

@@ -1,3 +1,4 @@
+import { P, H3, H4, PXS, PXXS } from '@/components/text'
 import {
   Tab,
   TabGroup,
@@ -51,8 +52,8 @@ const product = {
 
 export function Nomads() {
   return (
-    <div className="pb-24">
-      <main className="mx-auto max-w-7xl sm:px-6 sm:pt-24 lg:px-0">
+    <div className="lg:pb-24 pb-12">
+      <main className="mx-auto max-w-7xl sm:px-6 sm:pt-12 lg:px-0">
         <div className="mx-auto max-w-2xl lg:max-w-none">
           {/* Product */}
           <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
@@ -92,22 +93,21 @@ export function Nomads() {
             <div className="mt-6 px-6 sm:mt-16 sm:px-0 lg:mt-0">
               <H2>{product.name}</H2>
 
-              <div className="mt-4">
-                <h3 className="sr-only">Description</h3>
+              <div className="mt-2">
+
                 <div className="space-y-2 text-base text-gray-700">
                   <PS>{product.description}</PS>
                 </div>
               </div>
 
-              <section aria-labelledby="details-heading" className="mt-8">
-                <div className="space-y-4 border-t border-gray-300 pt-4">
+              <section aria-labelledby="details-heading" className="lg:pt-8 pt-6">
+
+                <div className="lg:space-y-8 space-y-4 border-t border-gray-300 lg:pt-8 pt-6">
                   {product.details.map((detail) => (
                     <div key={detail.name}>
-                      <h3>
-                        <PS className="font-medium text-gray-900 mb-4">
-                          {detail.name}
-                        </PS>
-                      </h3>
+                      <H3 className="font-medium text-gray-900 mb-4">
+                        {detail.name}
+                      </H3>
                       <ul
                         role="list"
                         className="list-disc space-y-2 pl-5 text-sm/6 text-gray-700 marker:text-gray-300"

src/components/Retreats.jsx

@@ -61,7 +61,7 @@ function classNames(...classes) {
 
 export function Retreats() {
   return (
-    <div className="pb-24">
+    <div className="lg:pb-24 pb-12">
       <main className="mx-auto max-w-7xl sm:px-6 sm:pt-12 lg:px-0">
         <div className="mx-auto max-w-2xl lg:max-w-none">
           {/* Product */}
@@ -102,36 +102,21 @@ export function Retreats() {
             <div className="mt-6 px-6 sm:mt-16 sm:px-0 lg:mt-0">
               <H2 className="">{product.name}</H2>
 
-              <div className="mt-3">
-                <H2 className="sr-only">Product information</H2>
-              </div>
-
-              {/* Reviews */}
-              <div className="mt-3">
-                <h3 className="sr-only">Reviews</h3>
-              </div>
-
-              <div className="mt-4">
-                <h3 className="sr-only">Description</h3>
+              <div className="mt-2">
 
                 <div className="space-y-2 text-base text-gray-700">
                   <PS>{product.description}</PS>
                 </div>
               </div>
 
-              <section aria-labelledby="details-heading" className="mt-12">
-                <H2 id="details-heading" className="sr-only">
-                  Additional details
-                </H2>
+              <section aria-labelledby="details-heading" className="lg:pt-8 pt-6">
 
-                <div className="space-y-8 border-t border-gray-300 pt-8">
+                <div className="lg:space-y-8 space-y-4 border-t border-gray-300 lg:pt-8 pt-6">
                   {product.details.map((detail) => (
                     <div key={detail.name}>
-                      <h3>
-                        <PS className="font-medium text-gray-900 mb-4">
-                          {detail.name}
-                        </PS>
-                      </h3>
+                      <H3 className="font-medium text-gray-900 mb-4">
+                        {detail.name}
+                      </H3>
                       <ul
                         role="list"
                         className="list-disc space-y-2 pl-5 text-sm/6 text-gray-700 marker:text-gray-300"

src/components/Team.jsx

@@ -29,20 +29,20 @@ const people = [
   
   export default function Team() {
     return (
-      <div className="relative py-12 lg:py-24">
+      <div className="relative py-12 lg:pt-24 pt-0 lg:pb-12 pb-0">
         {/* Dark overlay for better text readability */}
         <div className="absolute inset-0"></div>
         <div className="relative z-10">
-          <div className="mx-auto grid max-w-8xl grid-cols-1 gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3">
+          <div className="mx-auto grid max-w-8xl grid-cols-1 gap-x-8 lg:gap-y-20 gap-y-10  px-6 lg:px-8 xl:grid-cols-3">
             <div className="mx-auto max-w-2xl lg:mx-0">
               <H2 className=" ">Our People</H2>
-              <PS className="mt-4  ">
+              <PS className="mt-2">
               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.
               </PS>
             </div>
             <ul
               role="list"
-              className="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-20 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:gap-x-8 xl:col-span-2"
+              className="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 lg:gap-y-20 gap-y-10 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:gap-x-8 xl:col-span-2"
             >
               {people.map((person) => (
                 <li key={person.name}>
@@ -51,10 +51,10 @@ const people = [
                     <H3 className="flex-1  ">{person.name}</H3>
                   </div>
                   <div className="w-5/6">
-                    <PS className="font-medium  ">{person.role}</PS>
-                    <PXXS className="mt-4  ">{person.bio}</PXXS>
-                    <PXXS className="mt-2  ">{person.bio2}</PXXS>
-                    <PXXS className="mt-2  ">{person.bio3}</PXXS>
+                    <PS className="font-medium">{person.role}</PS>
+                    <PXXS className="mt-4">{person.bio}</PXXS>
+                    <PXXS className="mt-2">{person.bio2}</PXXS>
+                    <PXXS className="mt-2">{person.bio3}</PXXS>
                   </div>
                 </li>
               ))}

src/components/Testimonials.jsx

@@ -121,7 +121,7 @@ export function Testimonials() {
     <section
       id="testimonials"
       aria-label="What our customers are saying"
-      className="bg-transparent py-2 mt-24 mb-0"
+      className="bg-transparent py-2 lg:mt-12 mt-12 mb-0"
       style={{
         backgroundImage: `url("/images/cta_bg.jpg")`,
         backgroundSize: 'cover',

src/components/Veda1.jsx

@@ -129,7 +129,7 @@ export default function Example() {
 
   return (
     <div className="bg-transparent">
-      <div className="mx-auto max-w-2xl px-6 py-12 sm:px-6 lg:max-w-7xl lg:px-0">
+      <div className="mx-auto max-w-2xl px-6 py-12  lg:max-w-7xl lg:px-0">
         <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
           {/* Image gallery */}
           <TabGroup className="flex flex-col-reverse">
@@ -168,7 +168,7 @@ export default function Example() {
           </TabGroup>
 
           {/* Product info */}
-          <div className="mt-10 px-6 sm:px-0 lg:mt-0">
+          <div className="mt-10  sm:px-0 lg:mt-0">
             <H2 className="">{product.name}</H2>
 
             <div className="mt-2">