diff --git a/next.config.js b/next.config.js
index fb2edfa..d1d5181 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,9 +1,12 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    output: 'export',
-    trailingSlash: true,
-    skipTrailingSlashRedirect: true,
-    distDir: 'out',
+    // Only use export mode for production builds
+    ...(process.env.NODE_ENV === 'production' && {
+        output: 'export',
+        trailingSlash: true,
+        skipTrailingSlashRedirect: true,
+        distDir: 'out',
+    }),
     basePath: process.env.NEXT_PUBLIC_BASE_PATH || '',
     images: {
         unoptimized: true
diff --git a/public/images/journey1.jpg b/public/images/journey1.jpg
new file mode 100644
index 0000000..6ae058a
Binary files /dev/null and b/public/images/journey1.jpg differ
diff --git a/public/images/journey2.jpg b/public/images/journey2.jpg
new file mode 100644
index 0000000..7ab4e5b
Binary files /dev/null and b/public/images/journey2.jpg differ
diff --git a/src/app/page.jsx b/src/app/page.jsx
index 9e4b2f9..83fb8ca 100644
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
@@ -21,7 +21,8 @@ import CnnVideo from '@/components/CNNVIDEO'
 import { CallToAction4 } from '@/components/CallToAction4'
 import { Logos } from '@/components/Logos'
 import { Hero2 } from '@/components/Hero2'
-import { Cta } from '@/components/CTA'
+import { Callto } from '@/components/Callto'
+import { Journey } from '@/components/Journey'
 
 
 export default function Home() {
@@ -31,12 +32,9 @@ export default function Home() {
       <main>
       <Hero2 />
       <Logos />
-      <Cta />
-      <CallToAction />
+      <Callto />
       <Boat />
-      <CallToAction4 />
-      <Experiences />
-      <Carousel />
+     <Journey />
       <Route />
       <CnnVideo />
       <Testimonials />
diff --git a/src/components/Boat.jsx b/src/components/Boat.jsx
index 2c5e979..449c08d 100644
--- a/src/components/Boat.jsx
+++ b/src/components/Boat.jsx
@@ -162,18 +162,18 @@ export function Boat() {
   }
 
   return (
-    <div className="pt-16 pb-12 bg-transparent">
+    <div className="pt-24 pb-12 bg-transparent">
       <Container>
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-start">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-center">
           {/* Text Content - Left Side */}
           <div ref={setReferenceWindowRef} className="lg:col-span-4">
             <H2 className="">
               Dahabiyas
             </H2>
-            <PS className="">
+            <PS className="mt-4">
               Discover peaceful platforms where every detail ensures a truly memorable stay.
             </PS  >
-            <PS className="mb-6">
+            <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">
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
index 36c21a3..623534d 100644
--- a/src/components/Button.jsx
+++ b/src/components/Button.jsx
@@ -3,11 +3,11 @@ import clsx from 'clsx'
 
 const baseStyles = {
   solid:
-    'group inline-flex items-center justify-center rounded-xl py-1.5 px-2  text-xs lg:text-sm font-medium focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2',
+    'group inline-flex items-center justify-center  py-1.5 px-2  text-xs lg:text-sm font-medium focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2',
   solidNoRounded:
     'group inline-flex items-center justify-center py-1.5 px-3.5 lg:py-2 lg:px-4 text-xs lg:text-sm font-light focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2',
   outline:
-    'group inline-flex ring-1 items-center justify-center rounded-xl py-1.5 px-3.5 lg:py-2 lg:px-2 text-xs lg:text-sm font-medium focus:outline-none',
+    'group inline-flex ring-1 items-center justify-center  py-1.5 px-3.5 lg:py-1.5 lg:px-3 text-xs lg:text-sm font-medium focus:outline-none',
 }
 
 const variantStyles = {
@@ -25,9 +25,9 @@ const variantStyles = {
   },
   outline: {
     slate:
-      'ring-slate-200 text-slate-200 hover:text-slate-300 hover:ring-slate-300 active:bg-slate-100 active:text-slate-200 focus-visible:outline-gold-600 focus-visible:ring-slate-300',
+      'ring-white text-white hover:text-slate-300 hover:ring-slate-300 active:bg-slate-100 active:text-slate-200 focus-visible:outline-gold-600 focus-visible:ring-slate-300',
     white:
-      'ring-slate-700 text-white hover:ring-slate-300 active:ring-slate-200 active:text-slate-100 focus-visible:outline-white',
+      'ring-white text-white hover:ring-slate-300 active:ring-slate-200 active:text-slate-100 focus-visible:outline-white',
   },
   link: {
     slate:
diff --git a/src/components/Cta.jsx b/src/components/Callto.jsx
similarity index 82%
rename from src/components/Cta.jsx
rename to src/components/Callto.jsx
index 4373472..ea55a03 100644
--- a/src/components/Cta.jsx
+++ b/src/components/Callto.jsx
@@ -6,7 +6,7 @@ import { Logo } from '@/components/Logo'
 import { H2, PS, H3, H4 } from '@/components/text'
   
 
-export function Cta() {
+export function Callto() {
   return (
     <section
       id="about"
@@ -16,7 +16,7 @@ export function Cta() {
       }}
     >
       {/* Background overlay */}
-      <div className="absolute inset-0 bg-black opacity-20"></div>
+      <div className="absolute inset-0 bg-black opacity-10"></div>
       
       <Container className="relative z-10">
         <div className="mx-auto max-w-3xl text-center text-white">
@@ -32,11 +32,11 @@ export function Cta() {
           <H3 className="!text-white mb-6">
           VEDA provides an unparalleled cruise experience on the Nile, blending authenticity with sophistication. Enjoy private journeys featuring organic cuisine, holistic activities, and a dedicated, warm-hearted crew. 
           </H3>
-          <H3 className="!text-white">
+          <H3 className="!text-gold-600">
           Discover a cruise like no other with us on the Nile.
           </H3>
           <br/>
-          <Button className="mt-6 !text-gold-400 !border-gold-400 hover:!text-gold-300 hover:!border-gold-300" href="/story" variant="link" color="white">
+          <Button className="mt-4" href="/story" variant="outline" color="white">
            Read Our Story
           </Button>
         </div>
diff --git a/src/components/Carousel.jsx b/src/components/Carousel.jsx
index dabae1f..8e13604 100644
--- a/src/components/Carousel.jsx
+++ b/src/components/Carousel.jsx
@@ -71,7 +71,7 @@ const MultiCardCarousel = () => {
   const displayCards = isMobile ? [cards[currentIndex]] : cards.slice(currentIndex, currentIndex + 3);
 
   return (
-    <div className="bg-transparent flex items-center justify-center py-16 lg:py-24 px-6">
+    <div className="bg-transparent flex items-center justify-center py-16 lg:py-12 px-6">
       <div className="w-full max-w-7xl ">
         <div className="text-left mx-auto max-w-7xl ">
           <H2 className="">
diff --git a/src/components/Hero2.jsx b/src/components/Hero2.jsx
index 4c53dfb..d88e60e 100644
--- a/src/components/Hero2.jsx
+++ b/src/components/Hero2.jsx
@@ -23,11 +23,11 @@ export function Hero2() {
         <div className="max-w-xs sm:max-w-md md:max-w-2xl lg:max-w-4xl w-full">
           <H1 className="text-creme-200 text-3xl sm:text-4xl md:text-5xl lg:text-6xl">
             Nile Cruises,{' '}
-            <span className="relative whitespace-nowrap text-gold-100">
+            <span className="relative whitespace-nowrap text-gold-500">
               <svg
                 aria-hidden="true"
                 viewBox="0 0 418 42"
-                className="absolute top-2/3 left-0 h-[0.45em] sm:h-[0.5em] md:h-[0.55em] lg:h-[0.58em] w-full fill-gold-100/80"
+                className="absolute top-2/3 left-0 h-[0.45em] sm:h-[0.5em] md:h-[0.55em] lg:h-[0.58em] w-full fill-gold-500/80"
                 preserveAspectRatio="none"
               >
                 <path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z" />
diff --git a/src/components/Journey.jsx b/src/components/Journey.jsx
new file mode 100644
index 0000000..1793242
--- /dev/null
+++ b/src/components/Journey.jsx
@@ -0,0 +1,45 @@
+import { H1, H2, H3, H4, P, PS, PXS, PXXS } from '@/components/text'
+import { Button } from './Button'
+
+
+export  function Journey() {
+  return (
+    <div className="relative bg-transparent my-12">
+      <div className="relative mx-auto max-w-8xl lg:grid lg:grid-cols-2">
+        {/* Left column with journey1.jpg */}
+        <div className="relative h-80 lg:h-full">
+          <img
+            alt="Journey Image 1"
+            src="/images/journey1.jpg"
+            className="size-full object-cover"
+          />
+          {/* Black overlay */}
+          <div className="absolute inset-0 bg-black opacity-50 hover:opacity-20"></div>
+          {/* paragraphs */}
+          <div className="absolute inset-0 flex items-center justify-center mx-auto max-w-lg flex-col text-center px-10">
+            <H2 className=" text-white text-3xl font-semibold">Experiences</H2>
+            <PS className=" mt-4 text-white text-center ">From intimate community gatherings to professional retreats, VEDA offers transformative programs on the Nile.</PS>
+            <Button className="mt-6" href="/experiences" variant="outline" color="white">Learn More</Button>
+          </div>
+        </div>
+        
+        {/* Right column with journey2.jpg */}
+        <div className="relative h-80 lg:h-full">
+          <img
+            alt="Journey Image 2"
+            src="/images/journey2.jpg"
+            className="size-full object-cover"
+          />
+          {/* Black overlay */}
+          <div className="absolute inset-0 bg-black opacity-50 hover:opacity-20"></div>
+          {/* Learn More button */}
+          <div className="absolute inset-0 flex items-center justify-center mx-auto max-w-lg flex-col text-center px-10">
+            <H2 className=" text-white text-3xl font-semibold">Activities</H2>
+            <PS className=" mt-4 text-white text-center ">Explore a diverse range of activities designed to elevate your mind, body, and soul.</PS>
+            <Button className="mt-6" href="/experiences" variant="outline" color="white">Learn More</Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/Route.jsx b/src/components/Route.jsx
index 6bef4f8..7825915 100644
--- a/src/components/Route.jsx
+++ b/src/components/Route.jsx
@@ -13,7 +13,7 @@ export default function Route() {
   return (
     <div className="bg-transparent overflow-hidden pt-12 pb-24 px-6 lg:px-8">
       <div className="mx-auto max-w-7xl ">
-        <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="grid grid-cols-1 gap-x-8 gap-y-4 lg:gap-y-16 lg:grid-cols-2 lg:items-center">
           <div className="lg:pr-4 lg:pt-4">
             <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-lg">
               <H2 className="">Itinerary</H2>