ok

next.config.js

@@ -8,6 +8,17 @@ const nextConfig = {
         unoptimized: true
     },
     assetPrefix: process.env.NODE_ENV === 'production' ? '' : '',
+    // Development optimizations
+    experimental: {
+        turbo: {
+            rules: {
+            '*.svg': {
+                loaders: ['@svgr/webpack'],
+                as: '*.js',
+            },
+            },
+        },
+    },
     webpack(config, options) {
       // Add file-loader for .mp4 files
       config.module.rules.push({

src/components/Boat.jsx

@@ -36,7 +36,7 @@ const testimonials = [
     img: '/images/veda3.jpg',
     name: '15 - 25 Years Old',
     title: 'Skills that Earn & Regenerate Vocational paths that equip young people to live with purpose.',
-    subtitle: 'A cozy 18-meter dahabeya offering a serene floating home experience, perfect for private groups seeking tranquility and comfort on the Nile.',
+    subtitle: 'A cozy 18-meter dahabiya offering a serene floating home, perfect for private groups seeking tranquility and comfort on the Nile.',
     quote: 'VEDA 3',
     href: '/phases/phase3',
   },
@@ -44,7 +44,7 @@ const testimonials = [
     img: '/images/veda4.jpg',
     name: 'All Ages',
     title: 'A unique portfolio of impact proven Community-led solutions worth implementing',
-    subtitle: 'A cozy 55-meter dahabeya offering a serene floating home experience, perfect for smaller groups seeking tranquility and comfort on the Nile.',
+    subtitle: 'A spaciou 55-meter dahabeya offering a serene retreat, perfect for bigger groups seeking tranquility and comfort on the Nile.',
     quote: 'VEDA 4',
     href: '/phases/phase4',
   },
@@ -100,7 +100,7 @@ function TestimonialCard({
       ref={ref}
       style={{ opacity }}
       {...props}
-      className="w-72 shrink-0 snap-start scroll-ml-(--scroll-padding) bg-white rounded-3xl shadow-lg overflow-hidden sm:w-96"
+      className="w-72 shrink-0 snap-start scroll-ml-(--scroll-padding) bg-[#fffefa] rounded-3xl shadow-lg overflow-hidden lg:w-96"
     >
       {/* Image Section */}
       <div className="relative aspect-square overflow-hidden">
@@ -114,18 +114,18 @@ function TestimonialCard({
       {/* Content Section Below Image */}
       <div className="p-6">
         <blockquote>
-          <p className="text-2xl font-bold text-gray-900 lg:text-3xl">
+          <p className="text-2xl font-bold text-darkgr lg:text-3xl">
             {children}
           </p>
         </blockquote>
         
-        <p className="mt-4 text-sm text-gray-600 leading-6">
+        <p className="mt-2 lg:text-base text-sm text-gray-600 leading-6">
           {subtitle}
         </p>
         
         <Link
           href={href}
-          className="mt-6 inline-flex items-center gap-2 text-sm font-medium text-gold-600 hover:text-gold-700"
+          className="mt-2 mb-2 inline-flex items-center gap-2 text-sm font-semibold text-gold-700 hover:text-gold-700"
         >
           Learn More
           <ArrowLongRightIcon className="h-4 w-4" />
@@ -154,13 +154,13 @@ export function Boat() {
   }
 
   return (
-    <div className="pt-24 pb-24">
+    <div className="pt-24 pb-12">
       <Container>
         <div ref={setReferenceWindowRef}>
-          <h2 className="font-display mt-2 text-3xl font-semibold tracking-[-0.05em] text-[#1f4922] lg:text-4xl">
+          <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-2xl font-medium tracking-[-0.045em] lg:text-3xl text-[#1f4922]">
+          <p className="mt-4 max-w-5xl text-2xl font-medium tracking-[-0.045em] lg:text-3xl 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>

src/components/CNNVIDEO.jsx

@@ -9,14 +9,14 @@ const CnnVideo = () => {
         <section
       id="testimonials"
       aria-label="What our customers are saying"
-      className="bg-creme-600 pt-6 pb-24"
+      className="bg-transparent pt-6 pb-24"
     >
       <Container>
-        <div className="mx-auto max-w-4xl md:text-center">
-          <h2 className="font-display mt-2 text-3xl font-bold tracking-tight text-gray-800 sm:text-4xl">
+        <div className="mx-auto max-w-5xl md:text-center">
+          <h2 className="font-display text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
           VEDA ON CNN 
           </h2>
-          <p className="mt-4 text-lg pb-6 tracking-tight text-slate-700">
+          <p className="mb-10 mt-4 text-lg font-medium tracking-[-0.001em] lg:text-xl text-darkgr-950">
           CNN Travel visited the Veda boats to give you a first hand impression of what awaits you when cruising the Nile.
           </p>
         </div>

src/components/CallToAction.jsx

@@ -21,7 +21,7 @@ export function CallToAction() {
       <Container className="relative">
         <div className="mx-auto max-w-3xl text-center">
         <div className="flex items-center justify-center">
-          <Image src="/images/logos/veda_icon2.svg" alt="" width={50} height={50} className="h-18 w-auto mt-24" unoptimized />
+          <Image src="/images/logos/veda_icon2.svg" alt="" width={50} height={50} className="h-18 w-auto mt-6" unoptimized />
         </div>
           <h2 className="font-display lg:text-3xl text-xl tracking-tight text-white pt-4 lg:pt-6">
           VEDA provides an unparalleled cruise experience on the Nile, blending authenticity with sophistication. Enjoy private journeys featuring organic cuisine, hollistic activities, and a dedicated, warm-hearted crew. 

src/components/CallToAction2.jsx

@@ -8,20 +8,21 @@ export function CallToAction2() {
   return (
     <section
       id="get-started-today"
-      className="relative overflow-hidden bg-gold-900 py-32"
+      className="relative overflow-hidden bg-transparent py-40 mt-4 mb-2"
     >
       <Image
-        className="absolute left-1/2 top-1/2 max-w-none -translate-x-1/2 -translate-y-1/2"
+        className="absolute  left-1/2 top-1/2 max-w-none -translate-x-1/2 -translate-y-1/2"
         src="/images/background-call-to-action2.png"
         alt=""
         width={2347}
         height={1244}
         unoptimized
       />
-      <Container className="relative">
+      <div className="absolute inset-0 bg-black opacity-20"></div>
+      <Container className="relative ">
         <div className="mx-auto max-w-3xl text-center">
         <div className="flex items-center justify-center">
-          <Image src="/images/logos/veda.svg" alt="" width={120} height={32} className="h-8 w-auto" unoptimized />
+          <Image src="/images/logos/veda_logo_light.svg" alt="" width={120} height={32} className="h-16 w-auto opacity-100" unoptimized />
         </div>
         </div>
       </Container>

src/components/CallToAction3.jsx

@@ -8,7 +8,7 @@ export function CallToAction3() {
   return (
     <section
       id="get-started-today"
-      className="relative overflow-hidden bg-gold-900 py-32"
+      className="relative overflow-hidden bg-transparent py-48 mt-4"
     >
       <Image
         className="absolute left-1/2 top-1/2 max-w-none -translate-x-1/2 -translate-y-1/2"
@@ -18,10 +18,11 @@ export function CallToAction3() {
         height={564}
         unoptimized
       />
-      <Container className="relative">
-        <div className="mx-auto max-w-3xl text-center py-20">
+      <div className="absolute inset-0 bg-black opacity-10"></div>
+      <Container className="relative ">
+        <div className="mx-auto max-w-3xl text-center">
         <div className="flex items-center justify-center">
-          <Image src="/images/logos/veda_logo2.svg" alt="" width={120} height={32} className="h-8 w-auto" />
+          <Image src="/images/logos/veda_logo_light.svg" alt="" width={120} height={32} className="h-16 w-auto opacity-100" unoptimized />
         </div>
         </div>
       </Container>

src/components/Carousel.jsx

@@ -69,14 +69,13 @@ const MultiCardCarousel = () => {
   const displayCards = isMobile ? [cards[currentIndex]] : cards.slice(currentIndex, currentIndex + 3);
 
   return (
-    <div className="flex items-center justify-center min-h-screen py-6 bg-creme-600">
+    <div className="flex items-center justify-center min-h-screen py-6 bg-transparent">
       <div className="w-full max-w-7xl">
-        <div className="text-center mx-auto max-w-3xl">
-          <h2 className="text-base font-semibold leading-7 text-gold-600">MISSION</h2>
-          <h2 className="font-display mt-2 text-3xl font-bold tracking-tight text-gray-800 sm:text-4xl">
-            VEDA ACTIVITIES
+        <div className="text-left mx-auto max-w-7xl px-4 lg:px-6">
+          <h2 className="font-display text-2xl sm:text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
+            Activities
           </h2>
-          <p className="mt-2 text-lg tracking-wide font-normal leading-6 pb-12 text-gray-600">
+          <p className="mt-4 max-w-5xl text-lg sm:text-2xl font-medium tracking-[-0.045em] lg:text-3xl text-darkgr pb-8 sm:pb-12">
             Explore a diverse range of activities designed to elevate your Mind, Body, and Soul, fostering a deeper connection and holistic well-being.
           </p>
         </div>

src/components/Experiences.jsx

@@ -1,71 +1,68 @@
 export function Experiences() {
   return (
-    <div className=" py-12">
-      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8 ">
-        <p className="mt-2 max-w-lg  text-3xl font-semibold tracking-[-0.05em] text-[#1f4922] lg:text-4xl">
-        Experiences
+    <div className="pt-16 sm:pt-24 pb-12">
+      <div className="mx-auto max-w-2xl px-4  lg:max-w-7xl lg:px-6">
+        <p className="mt-2 max-w-lg text-2xl sm:text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
+        Programs
         </p>
         
-        <p className="mt-4 max-w-5xl text-2xl font-medium tracking-[-0.045em] lg:text-3xl text-[#1f4922]">
-          From intimate community gatherings to professional retreats, VEDA offers transformative experiences on the Nile. Each space is thoughtfully designed to foster connection, creativity, and personal growth in an inspiring riverside setting.
+        <p className="mt-4 max-w-5xl text-lg sm:text-2xl font-medium tracking-[-0.045em] lg:text-3xl text-darkgr">
+          From intimate community gatherings to professional retreats, VEDA offers transformative programs on the Nile. Each space is thoughtfully designed to foster connection, creativity, and personal growth in an inspiring riverside setting.
         </p>
-        <div className="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-8 lg:grid-rows-2">
+        <div className="mt-8 sm:mt-16 grid grid-cols-1 gap-4 lg:grid-cols-8 lg:grid-rows-2">
           <div className="flex p-px lg:col-span-5">
-            <div className="w-full overflow-hidden rounded-lg bg-[#3d2704] shadow-sm outline outline-black/5 max-lg:rounded-t-4xl lg:rounded-tl-4xl">
-              <div className="h-80 w-full overflow-hidden">
-                <img
-                  alt=""
-                  src="/images/community.jpg"
-                  className="h-full w-full object-cover object-center"
-                />
-              </div>
+            <div className="w-full overflow-hidden rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-t-4xl lg:rounded-tl-4xl relative isolate flex flex-col justify-end">
+              <img
+                alt=""
+                src="/images/community.jpg"
+                className="absolute inset-0 -z-10 h-full w-full object-cover object-center"
+              />
+              <div className="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40" />
               <div className="px-8 py-4">
                 <p className="mt-2 text-lg font-semibold tracking-normal text-[#FEFFF6]">Community building Space</p>
+                <p className="mt-1 pb-2 text-sm lg:text-base font-medium text-[#FEFFF6]/80">Foster connections and meaningful relationships through shared experiences.</p>
               </div>
             </div>
           </div>
           <div className="flex p-px lg:col-span-3">
-            <div className="w-full overflow-hidden rounded-lg bg-[#3d2704] shadow-sm outline outline-black/5 lg:rounded-tr-4xl">
-              <div className="h-80 w-full overflow-hidden">
-                <img
-                  alt=""
-                  src="/images/private.jpg"
-                  className="h-full w-full object-cover object-center"
-                />
-              </div>
+            <div className="w-full overflow-hidden rounded-lg shadow-sm outline outline-black/5 lg:rounded-tr-4xl relative isolate flex flex-col justify-end h-80">
+              <img
+                alt=""
+                src="/images/private.jpg"
+                className="absolute inset-0 -z-10 h-full w-full object-cover object-center"
+              />
+              <div className="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40" />
               <div className="px-8 py-4">
                 <p className="mt-2 text-lg font-semibold tracking-normal text-[#FEFFF6]">Private Retreats</p>
-
+                <p className="mt-1 text-sm lg:text-base font-medium text-[#FEFFF6]/80">Exclusive experiences tailored for intimate groups and families.</p>
               </div>
             </div>
           </div>
           <div className="flex p-px lg:col-span-3">
-            <div className="w-full overflow-hidden rounded-lg bg-[#3d2704] shadow-sm outline outline-black/5 lg:rounded-bl-4xl">
-              <div className="h-80 w-full overflow-hidden">
-                <img
-                  alt=""
-                  src="/images/events.jpg"
-                  className="h-full w-full object-cover object-center"
-                />
-              </div>
+            <div className="w-full overflow-hidden rounded-lg shadow-sm outline outline-black/5 lg:rounded-bl-4xl relative isolate flex flex-col justify-end h-80">
+              <img
+                alt=""
+                src="/images/events.jpg"
+                className="absolute inset-0 -z-10 h-full w-full object-cover object-center"
+              />
+              <div className="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40" />
               <div className="px-8 py-4">
                 <p className="mt-2 text-lg lg:text-xl font-semibold tracking-normal text-[#FEFFF6]">Events & Conferences</p>
-
+                <p className="mt-1 pb-2 text-sm lg:text-base font-medium text-[#FEFFF6]/80">Professional gatherings in an inspiring riverside setting.</p>
               </div>
             </div>
           </div>
           <div className="flex p-px lg:col-span-5">
-            <div className="w-full overflow-hidden rounded-lg bg-[#3d2704] shadow-sm outline outline-black/5 max-lg:rounded-b-4xl lg:rounded-br-4xl">
-              <div className="h-80 w-full overflow-hidden">
-                <img
-                  alt=""
-                  src="/images/nomads.jpg"
-                  className="h-full w-full object-cover object-center"
-                />
-              </div>
+            <div className="w-full overflow-hidden rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-b-4xl lg:rounded-br-4xl relative isolate flex flex-col justify-end h-80">
+              <img
+                alt=""
+                src="/images/nomads.jpg"
+                className="absolute inset-0 -z-10 h-full w-full object-cover object-center"
+              />
+              <div className="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40" />
               <div className="px-8 py-4">
                 <p className="mt-2 text-lg font-semibold tracking-normal text-[#FEFFF6]">Digital Nomad Hub</p>
-
+                <p className="mt-1 pb-2 text-sm lg:text-base font-medium text-[#FEFFF6]/80">Work remotely while surrounded by the tranquility of the Nile.</p>
               </div>
             </div>
           </div>

src/components/Footer.jsx

@@ -3,9 +3,9 @@ import { Logo } from '@/components/Logo'
 
 export function Footer() {
   return (
-    <footer className="bg-creme-900">
+    <footer className="bg-transparent border-darkgr-950 border-t-4">
       <Container>
-        <div className="flex items-center justify-between py-16">
+        <div className="flex items-center justify-between py-8">
           <Logo className="h-10 w-auto" />
           <p className="text-sm text-slate-500">
             Copyright &copy; {new Date().getFullYear()} VEDA. All rights reserved.

src/components/Hero.jsx

@@ -5,36 +5,42 @@ import { Container } from '@/components/Container'
 
 export function Hero() {
   return (
-    <section className="relative w-full h-screen -mt-24">
+    <section className="relative w-full h-screen lg:mt-0 mt-0">
       {/* Background Video */}
-      <div className="absolute top-0 left-0 w-full h-full z-0">
-        <div style={{padding: '56.25% 0 0 0', position: 'relative', height: '100%'}}>
-          <iframe 
-            src="https://player.vimeo.com/video/1111694092?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&loop=1&muted=1&background=1" 
-            frameBorder="0" 
-            allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share" 
-            referrerPolicy="strict-origin-when-cross-origin" 
-            style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}} 
-            title="hero2"
-          />
-        </div>
-      </div>
+      <video
+        autoPlay
+        loop
+        muted
+        playsInline
+        className="absolute top-0 left-0 w-full h-full object-cover z-0 bg-[#FEFFF6] opacity-20"
+      >
+        <source src="/videos/hero4.mp4" type="video/mp4" />
+        Your browser does not support the video tag.
+      </video>
       
       {/* Welcome Content Overlay */}
-      <div className="bg-[#FEFFF6] py-6 mt-0 absolute -bottom-20 left-0 right-0 z-10">
-        <div className="mx-auto max-w-7xl px-6 lg:px-4">
-          <div className="mx-auto max-w-5xl lg:mx-0">
-            <h2 className="mt-2 text-2xl font-medium tracking-[-0.05em] text-[#1f4922] lg:text-3xl">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.
-</h2>
+      <div className="bg-transparent py-6 mt-0 absolute top-16 sm:top-32 left-0 right-0 z-10">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-4">
+          <div className="flex items-start justify-start mb-4">
+            <Image src="/images/logos/veda_logo_dark.svg" alt="VEDA" width={200} height={60} className="h-8 sm:h-12 w-auto" unoptimized />
+          </div>
+          <div className="mx-auto max-w-5xl lg:mx-0 mt-4 sm:mt-6">
+            <h2 className="text-lg sm:text-2xl font-medium tracking-[-0.05em] text-darkgr-800 lg:text-3xl">
+              Veda welcomes you into her home providing unique wellness cruises blending cultural authentic experiences with unparalleled freedom and privacy.
+            </h2>
+            <h2 className="mt-2 text-lg sm:text-2xl font-medium tracking-[-0.05em] text-darkgr-800 lg:text-3xl">
+              Our organic cuisine, cultural activities and dedicated warm hearted crew will make your veda cruise an unforgettable experience.
+              </h2>
           </div>
            <div className="mx-auto max-w-3xl lg:mx-0">
-            <p className="mt-6 text-2xl font-semibold tracking-[-0.05em] text-[#1f4922] lg:text-3xl">
+            <p className="mt-4 sm:mt-6 text-2xl sm:text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
               Nile Cruises, Reimagined. 
             </p>
-              <p className="mt-4 mb-12  font-normal text-pretty text-gray-950 sm:text-lg">
-              
-            </p>
+            <Button href="/story" color="blue" className="mt-6 sm:mt-8">
+              <span className="font-semibold tracking-wide">
+                Read Our Story
+              </span>
+            </Button>
             </div>
           </div>
         </div>

src/components/HeroCopy.jsx

@@ -0,0 +1,41 @@
+import Image from 'next/image'
+
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+
+export function Hero() {
+  return (
+    <section className="relative w-full h-screen -lg:mt-12 mt-0">
+      {/* Background Video */}
+      <video
+        autoPlay
+        loop
+        muted
+        playsInline
+        className="absolute top-0 left-0 w-full h-full object-cover z-0 bg-white opacity-60"
+      >
+        <source src="/videos/hero.mp4" type="video/mp4" />
+        Your browser does not support the video tag.
+      </video>
+      
+      {/* Welcome Content Overlay */}
+      <div className="bg-[#FEFFF6] py-6 mt-0 absolute -bottom-16 left-0 right-0 z-10">
+        <div className="mx-auto max-w-7xl px-6 lg:px-4">
+          <div className="mx-auto max-w-5xl lg:mx-0">
+            <h2 className="mt-2 text-2xl font-medium tracking-[-0.05em] text-darkgr lg:text-3xl">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.
+</h2>
+          </div>
+           <div className="mx-auto max-w-3xl lg:mx-0">
+            <p className="mt-6 text-3xl font-semibold tracking-[-0.05em] text-darkgr lg:text-4xl">
+              Nile Cruises, Reimagined. 
+            </p>
+              <p className="mt-4 mb-12  font-normal text-pretty text-gray-950 sm:text-lg">
+              
+            </p>
+            </div>
+          </div>
+        </div>
+    </section>
+  )
+}

src/components/NewFeatures.jsx

@@ -1,6 +1,12 @@
 import { CloudArrowUpIcon, LockClosedIcon, ServerIcon, SparklesIcon } from '@heroicons/react/20/solid'
 
 const features = [
+  {
+    name: 'Your journey, your way.',
+    description:
+      "Create a travel experience that suits you perfectly, from the length of your stay to a tailored itinerary. Our expert guidance ensures every detail, from daily activities to dining options, aligns with your vision for a bespoke adventure.",
+    icon: SparklesIcon,
+  },
   {
     name: 'Your journey, your way.',
     description:
@@ -17,8 +23,16 @@ const features = [
 
 export default function NewFeatures() {
   return (
-    <div className="overflow-hidden bg-creme-600 pb-0 pt-12 lg:py-12">
-      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+    <div className="overflow-hidden bg-transparent pb-0 pt-16 pb:12">
+      <div className="mx-auto max-w-7xl px-6 lg:px-6">
+        <div className="mx-auto max-w-2xllg:max-w-7xl  pb-16">
+        <p className="mt-2 max-w-lg  text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
+        Experiences
+        </p>
+        <p className="mt-4 max-w-5xl text-2xl font-medium tracking-[-0.045em] lg:text-3xl text-darkgr">
+        At VEDA, we embrace a transformative journey by aligning with your personal preferences and holistic experiences. Our mission is to offer profound and memorable moments that inspire and uplift, guiding you on a journey within.
+        </p>
+      </div>
         <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
         <div className="flex items-start justify-end lg:justify-start lg:order-first">
           <img
@@ -30,19 +44,14 @@ export default function NewFeatures() {
         </div>
           <div className="lg:ml-auto lg:pl-4 lg:pt-0">
             <div className="lg:max-w-lg">
-              <h2 className="text-base font-semibold leading-7 text-gold-600">WHAT SETS US APART</h2>
-              <p className="mt-2 text-3xl font-bold tracking-tight text-gray-800 sm:text-4xl">VEDA EXPERIENCES</p>
-              <p className="mt-4 text-lg leading-8 font-normal text-gray-600">
-                At VEDA, we embrace a transformative journey by aligning with your personal preferences and holistic experiences. Our mission is to offer profound and memorable moments that inspire and uplift, guiding you on a journey within.
-              </p>
               <dl className="mt-10 max-w-xl space-y-8 text-base leading-7 text-gray-600 lg:max-w-none">
                 {features.map((feature) => (
                   <div key={feature.name} className="relative pl-9">
-                    <dt className="inline font-semibold text-gray-800">
+                    <dt className="inline font-semibold lg:text-xl text-lg text-darkgr-900">
                       <feature.icon aria-hidden="true" className="absolute left-1 top-1 h-5 w-5 text-gold-300" />
                       {feature.name}
                     </dt>{' '}
-                    <dd className='font-display'>{feature.description}</dd>
+                    <dd className='text-sm leading-tight font-medium tracking-[-0.001em] lg:text-base text-darkgr-950'>{feature.description}</dd>
                   </div>
                 ))}
               </dl>

src/components/NewFeatures2.jsx

@@ -23,7 +23,7 @@ const features = [
 
 export default function NewFeatures2() {
   return (
-    <div className="overflow-hidden bg-creme-600 pb-10 pt-0 lg:pt-10 lg:pb-24">
+    <div className="overflow-hidden bg-transparent pt-0 lg:pt-12 lg:pb-24 pb-12">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
           <div className="lg:order-first">
@@ -31,11 +31,11 @@ export default function NewFeatures2() {
               <dl className="mt-10 max-w-xl space-y-8 text-base leading-7 text-gray-600 lg:max-w-none">
                 {features.map((feature) => (
                   <div key={feature.name} className="relative pl-9">
-                    <dt className="inline font-semibold text-gray-800">
+                    <dt className="inline font-semibold lg:text-xl text-lg text-darkgr-900">
                       <feature.icon aria-hidden="true" className="absolute left-1 top-1 h-5 w-5 text-gold-300" />
                       {feature.name}
                     </dt>{' '}
-                    <dd className='font-display'>{feature.description}</dd>
+                    <dd className='text-sm leading-tight font-medium tracking-[-0.001em] lg:text-base text-darkgr-950'>{feature.description}</dd>
                   </div>
                 ))}
               </dl>

src/components/Route.jsx

@@ -11,19 +11,22 @@ import { Container } from '@/components/Container'
 
 export default function Route() {
   return (
-    <div className="overflow-hidden bg-creme-600 pt-6 pb-24">
-      <div className="mx-auto max-w-7xl md:px-6 lg:px-8">
+    <div className="overflow-hidden bg-transparent pt-6 pb-24">
+      <div className="mx-auto max-w-7xl px-4 lg:px-6">
         <div className="grid grid-cols-1 gap-x-8 gap-y-4 lg:gap-y-16 lg:grid-cols-2 lg:items-start">
           <div className="px-6 lg:px-0 lg:pr-4 lg:pt-4">
             <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-lg">
-              <h2 className="text-base font-semibold leading-7 text-gold-600">ITINERARY</h2>
-              <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">THE SACRED RIVER</p>
-              <p className="mt-6 text-lg leading-8 text-gray-600">
+              <p className="font-display text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">Itinerary</p>
+              <p className="mt-4 max-w-5xl text-2xl font-medium tracking-[-0.045em] lg:text-3xl text-darkgr">
               By following the natural flow of the Nile river you will discover some of the most sacred places of the world.</p>
-              <p className="mt-6 text-lg leading-8 text-gray-600">All our trips are designed according to your wishes. Your group's tailored itinerary will lead you to the locations and temples which fit your energy.
+              <p className="my-6 max-w-5xl text-lg font-medium tracking-[-0.001em] lg:text-xl text-darkgr-950">All our trips are designed according to your wishes. Your group's tailored itinerary will lead you to the locations and temples which fit your energy.
               </p>
-              <div className="relative z-10 mt-10 mb-10 lg:mb-40 lg:py-2 xs:mb-20 flex justify-startgap-x-6">
-             <Button className="button-gold" href="/register">Plan Your Visit</Button>
+              <div className="relative z-10 mt-4 mb-10 lg:mb-40 lg:py-2 xs:mb-20 flex justify-startgap-x-6">
+              <Button href="/contact" color="blue">
+              <span className="font-semibold tracking-wide">
+                Book Now
+              </span>
+            </Button>
             </div>
             </div>
           </div>

src/components/Testimonials.jsx

@@ -64,7 +64,7 @@ const testimonials = [
     },
     {
       content:
-        "What struck me most about VEDA was how they seamlessly blend adventure with relaxation. One moment you're exploring ancient tombs, the next you're enjoying a massage while floating down the world's most famous river. The organic meals were exceptional, and the evening discussions under the stars created bonds with fellow travelers that continue today.",
+        "What struck me most about VEDA was how they seamlessly blend adventure with relaxation. One moment you're exploring ancient tombs, the next you're enjoying a massage while floating down the world's most famous river.",
       author: {
         name: 'Sam',
         role: 'Adventure Seeker',
@@ -87,14 +87,14 @@ export function Testimonials() {
     <section
       id="testimonials"
       aria-label="What our customers are saying"
-      className="bg-creme-600 pt-10 pb-24"
+      className="bg-transparent pt-12 pb-24"
     >
       <Container>
-        <div className="mx-auto max-w-3xl md:text-center">
-          <h2 className="font-display mt-2 text-3xl font-bold tracking-tight text-gray-800 sm:text-4xl">
-            LOVED BY COMMUNITIES WORLDWIDE
+        <div className="mx-auto max-w-4xl md:text-center">
+          <h2 className="font-display text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
+            Testimonials
           </h2>
-          <p className="mt-4 text-lg tracking-tight text-slate-700">
+          <p className="mb-8 mt-4 text-lg font-medium tracking-[-0.001em] lg:text-xl text-darkgr-950">
           Discover the heartfelt stories of joy, relaxation, and adventure that make VEDA a cherished choice for travelers seeking unique and sophisticated experiences on the Nile.
           </p>
         </div>
@@ -110,7 +110,7 @@ export function Testimonials() {
                     <figure className="relative rounded-lg bg-white p-6 shadow-xl shadow-slate-900/10">
                       <QuoteIcon className="absolute left-6 top-6 fill-slate-100" />
                       <blockquote className="relative">
-                        <p className="text-lg tracking-tight text-slate-900">
+                        <p className="lg:text-base text-sm tracking-tight text-slate-900">
                           {testimonial.content}
                         </p>
                       </blockquote>

tailwind.config.js

@@ -55,6 +55,20 @@ module.exports = {
           600: '#FEFAF5',
           200: '#fffdfb',
         },
+        darkgr: {
+          DEFAULT: '#1f4922',
+          50: '#f0f9f1',
+          100: '#dcf2de',
+          200: '#bce5c1',
+          300: '#8dd196',
+          400: '#57b464',
+          500: '#359a42',
+          600: '#287d32',
+          700: '#245527',
+          800: '#1f5025',
+          900: '#1f4922',
+          950: '#0f1f11',
+        },
       },
     },
   },