add new content

2025-08-13 18:37:34 +02:00
commit 127bf9c83b
350 changed files with 63539 additions and 0 deletions
--- a/src/components/Activities.jsx
+++ b/src/components/Activities.jsx
@@ -0,0 +1,79 @@
+import act1 from '@/images/act1.png'
+import act2 from '@/images/act2.png'
+import act3 from '@/images/act3.png'
+
+
+const posts = [
+    {
+      id: 1,
+      title: 'Yoga',
+      href: '#',
+      description:
+        'Step fully into your body. The perfect start to the morning.',
+      image:
+        'images/act1.png',
+    },
+    {
+        id: 2,
+        title: 'Meditation',
+        href: '#',
+        description:
+          'Open your mind, enter a  deeper state of awareness.',
+        image:
+          'images/act3.png',
+        },
+      {
+        id: 3,
+        title: 'Nutrition',
+        href: '#',
+        description:
+          'Gluten-free, vegetarian, vegan, detox diets, & more.',
+        image:
+          'images/act2.png',
+      },
+  ]
+  
+  
+  export default function activities() {
+    return (
+      <div className="bg-creme-200 py-12 lg:py-12">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <div className="mx-auto max-w-2xl text-center">
+            <p className="mt-2 text-lg leading-8 text-gray-600 italic font-semibold">
+            Mind, Body, and Soul: For a Deeper Connection.
+            </p>
+          </div>
+          <div className="mx-auto mt-10 grid max-w-2xl auto-rows-fr grid-cols-1 gap-8 lg:mt-8 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+            {posts.map((post) => (
+              <article
+                key={post.id}
+                className="relative isolate shadow-xl flex flex-col justify-end overflow-hidden rounded-lg bg-gray-900 px-8 pb-8 pt-60 sm:pt-48 lg:pt-60"
+              >
+                <img alt="" src={post.image} className="absolute inset-0 -z-10 h-full w-full object-cover" />
+                <div className="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40" />
+                <div className="absolute inset-0 -z-10 rounded-lg ring-1 ring-inset ring-gray-900/10" />
+  
+                <div className="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm leading-6 text-gray-300">
+                  <div className="-ml-4 flex items-center gap-x-4">
+                  </div>
+                </div>
+                <h3 className="mt-3 text-lg font-semibold leading-6 text-white">
+                  <a href={post.href}>
+                    <span className="absolute inset-0" />
+                    {post.title}
+                  </a>
+                </h3>
+                <p className="mt-3 text-base font-medium leading-6 text-white">
+                  <a href={post.href}>
+                    <span className="absolute inset-0" />
+                    {post.description}
+                  </a>
+                </p>
+              </article>
+            ))}
+          </div>
+        </div>
+      </div>
+    )
+  }
+  
--- a/src/components/Boats.jsx
+++ b/src/components/Boats.jsx
@@ -0,0 +1,101 @@
+import { useId } from 'react';
+import Image from 'next/image';
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react';
+import clsx from 'clsx';
+
+import { Container } from '@/components/Container';
+import veda1 from '@/images/dahabiyas/veda1.jpg';
+import veda2 from '@/images/dahabiyas/veda2.jpg';
+import veda3 from '@/images/dahabiyas/veda3.jpg';
+import veda4 from '@/images/dahabiyas/veda4.jpg';
+
+const people = [
+    {
+        name: 'VEDA I',
+        role: 'The ideal retreat for luxury and privacy, perfect for intimate gatherings.',
+        image: veda1,
+        bio: [
+            '6 rooms & 4 suites with balconies.',
+            'Hosts up to 20 people.',
+            'Private bathroom ensuites.'
+        ],
+        xUrl: '#',
+        linkedinUrl: '#',
+    },
+    {
+        name: 'VEDA II',
+        role: 'The perfect spacious space for larger groups seeking comfort',
+        image: veda2,
+        bio: [
+            '8 rooms & 2 suites with balconies.',
+            'Hosts up to 20 people.',
+            'Private bathroom ensuites.'
+        ],
+        xUrl: '#',
+        linkedinUrl: '#',
+    },
+    {
+        name: 'VEDA III',
+        role: 'Senior Developer',
+        image: veda3,
+        bio: [
+            '5 rooms with balconies.',
+            'Hosts up to 10 people.',
+            'Private bathroom ensuites.'
+        ],
+        xUrl: '#',
+        linkedinUrl: '#',
+    },
+    {
+        name: 'VEDA IV',
+        role: 'Senior Developer',
+        image: veda4,
+        bio: [
+            '10 rooms & 4 suites with balconies.',
+            'Hosts up to 28 people.',
+            'Private bathroom ensuites.'
+        ],
+        xUrl: '#',
+        linkedinUrl: '#',
+    },
+    // More people...
+];
+
+export default function Boats() {
+    return (
+        <div className="bg-creme-600 py-24">
+            <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-800 sm:text-4xl">Our team</h2>
+                    <p className="mt-6 text-lg leading-8 text-gray-600">
+                        We’re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the
+                        best results for our clients.
+                    </p>
+                </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"
+                >
+                    {people.map((person) => (
+                        <li key={person.name}>
+                            <div className="relative aspect-[3/2] w-full rounded-lg overflow-hidden">
+                                <Image
+                                    src={person.image}
+                                    alt={person.name}
+                                    layout="fill"
+                                    objectFit="cover"
+                                />
+                            </div>
+                            <h3 className="mt-6 text-lg font-semibold leading-8 text-gray-800">{person.name}</h3>
+                            <ul className="mt-4 text-base leading-7 text-gray-600 list-disc pl-5 space-y-1">
+                                {person.bio.map((item, index) => (
+                                    <li key={index}>{item}</li>
+                                ))}
+                            </ul>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </div>
+    )
+}
--- a/src/components/Button.jsx
+++ b/src/components/Button.jsx
@@ -0,0 +1,46 @@
+import Link from 'next/link'
+import clsx from 'clsx'
+
+const baseStyles = {
+  solid:
+    'group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2',
+  outline:
+    'group inline-flex ring-1 items-center justify-center rounded-full py-2 px-4 text-sm focus:outline-none',
+}
+
+const variantStyles = {
+  solid: {
+    slate:
+      'bg-gold-900 text-white hover:bg-gold-800 hover:text-slate-100 active:bg-gold-800 active:text-gold-300 focus-visible:outline-gold-900',
+    blue: 'bg-gold-600 text-white hover:text-slate-100 hover:bg-gold-500 active:bg-gold-800 active:text-slate-100 focus-visible:outline-gold-600',
+    white:
+      'bg-white text-slate-100 hover:bg-gold-50 active:bg-gold-200 active:text-slate-100 focus-visible:outline-white',
+  },
+  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',
+    white:
+      'ring-slate-700 text-white hover:ring-slate-300 active:ring-slate-200 active:text-slate-100 focus-visible:outline-white',
+  },
+}
+
+export function Button({ className, ...props }) {
+  props.variant ??= 'solid'
+  props.color ??= 'slate'
+
+  className = clsx(
+    baseStyles[props.variant],
+    props.variant === 'outline'
+      ? variantStyles.outline[props.color]
+      : props.variant === 'solid'
+        ? variantStyles.solid[props.color]
+        : undefined,
+    className,
+  )
+
+  return typeof props.href === 'undefined' ? (
+    <button className={className} {...props} />
+  ) : (
+    <Link className={className} {...props} />
+  )
+}
--- a/src/components/CNNVIDEO.jsx
+++ b/src/components/CNNVIDEO.jsx
@@ -0,0 +1,34 @@
+import Image from 'next/image'
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+import React from 'react'
+
+
+const CNNVIDEO = () => {
+    return (
+        <section
+      id="testimonials"
+      aria-label="What our customers are saying"
+      className="bg-creme-600 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">
+          VEDA ON CNN 
+          </h2>
+          <p className="mt-4 text-lg pb-6 tracking-tight text-slate-700">
+          CNN Travel visited the Veda boats to give you a first hand impression of what awaits you when cruising the Nile.
+          </p>
+        </div>
+      <div className="video-container">
+        <video className="video-player" autoPlay muted loop>
+          <source src="/videos/veda_cnn.mp4" type="video/mp4" />
+          Your browser does not support the video tag.
+        </video>
+      </div>
+        </Container>
+        </section>
+    );
+  };
+  
+  export default CNNVIDEO;
--- a/src/components/CallToAction.jsx
+++ b/src/components/CallToAction.jsx
@@ -0,0 +1,57 @@
+import Image from 'next/image'
+
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+import backgroundImage from '@/images/background-call-to-action.jpg'
+import logoVeda from '@/images/logos/veda.svg'  
+
+export function CallToAction() {
+  return (
+    <section
+      id="about"
+      className="relative overflow-hidden bg-gold-900 py-24"
+    >
+      <Image
+        className="absolute left-1/2 top-1/2 max-w-none -translate-x-1/2 -translate-y-1/2"
+        src={backgroundImage}
+        alt=""
+        width={2347}
+        height={1244}
+        unoptimized
+      />
+      <Container className="relative">
+        <div className="mx-auto max-w-3xl text-center">
+        <ul
+          role="list"
+          className=" flex items-center justify-center gap-x-8 sm:flex-col sm:gap-x-0 sm:gap-y-2 xl:flex-row xl:gap-x-12 xl:gap-y-0"
+        >
+          {[
+            [
+              { name: 'veda', logo: logoVeda },
+            ],
+          ].map((group, groupIndex) => (
+            <li key={groupIndex}>
+              <ul
+                role="list"
+                className="flex flex-col items-center gap-y-2 sm:flex-row sm:gap-x-12 sm:gap-y-0"
+              >
+                {group.map((company) => (
+                  <li key={company.name} className="flex">
+                    <Image src={company.logo} alt={company.name} unoptimized />
+                  </li>
+                ))}
+              </ul>
+            </li>
+          ))}
+        </ul>
+          <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. 
+          </h2>
+          <p className="mt-4 text-xl lg:text-2xl italic tracking-tight text-gold-200">
+          Discover a cruise like no other with us on the Nile.
+          </p>
+        </div>
+      </Container>
+    </section>
+  )
+}
--- a/src/components/CallToAction2.jsx
+++ b/src/components/CallToAction2.jsx
@@ -0,0 +1,51 @@
+import Image from 'next/image'
+
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+import backgroundImage from '@/images/background-call-to-action2.png'
+import logoVeda from '@/images/logos/veda.svg'  
+
+export function CallToAction2() {
+  return (
+    <section
+      id="get-started-today"
+      className="relative overflow-hidden bg-gold-900 py-32"
+    >
+      <Image
+        className="absolute left-1/2 top-1/2 max-w-none -translate-x-1/2 -translate-y-1/2"
+        src={backgroundImage}
+        alt=""
+        width={2347}
+        height={1244}
+        unoptimized
+      />
+      <Container className="relative">
+        <div className="mx-auto max-w-3xl text-center">
+        <ul
+          role="list"
+          className=" flex items-center justify-center gap-x-8 sm:flex-col sm:gap-x-0 sm:gap-y-2 xl:flex-row xl:gap-x-12 xl:gap-y-0"
+        >
+          {[
+            [
+              { name: 'veda', logo: logoVeda },
+            ],
+          ].map((group, groupIndex) => (
+            <li key={groupIndex}>
+              <ul
+                role="list"
+                className="flex flex-col items-center gap-y-2 sm:flex-row sm:gap-x-12 sm:gap-y-0"
+              >
+                {group.map((company) => (
+                  <li key={company.name} className="flex">
+                    <Image src={company.logo} alt={company.name} unoptimized />
+                  </li>
+                ))}
+              </ul>
+            </li>
+          ))}
+        </ul>
+        </div>
+      </Container>
+    </section>
+  )
+}
--- a/src/components/CallToAction3.jsx
+++ b/src/components/CallToAction3.jsx
@@ -0,0 +1,51 @@
+import Image from 'next/image'
+
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+import backgroundImage from '@/images/background-call-to-action4.png'
+import logoVeda from '@/images/logos/logo_name.svg'  
+
+export function CallToAction3() {
+  return (
+    <section
+      id="get-started-today"
+      className="relative overflow-hidden bg-gold-900 py-32"
+    >
+      <Image
+        className="absolute left-1/2 top-1/2 max-w-none -translate-x-1/2 -translate-y-1/2"
+        src={backgroundImage}
+        alt=""
+        width={1440}
+        height={564}
+        unoptimized
+      />
+      <Container className="relative">
+        <div className="mx-auto max-w-3xl text-center py-20">
+        <ul
+          role="list"
+          className=" flex items-center justify-center gap-x-8 sm:flex-col sm:gap-x-0 sm:gap-y-2 xl:flex-row xl:gap-x-12 xl:gap-y-0"
+        >
+          {[
+            [
+              { name: 'veda', logo: logoVeda },
+            ],
+          ].map((group, groupIndex) => (
+            <li key={groupIndex}>
+              <ul
+                role="list"
+                className="flex flex-col items-center gap-y-2 sm:flex-row sm:gap-x-12 sm:gap-y-0"
+              >
+                {group.map((company) => (
+                  <li key={company.name} className="flex">
+                    <Image src={company.logo} alt={company.name}  width={300} height={84} unoptimized />
+                  </li>
+                ))}
+              </ul>
+            </li>
+          ))}
+        </ul>
+        </div>
+      </Container>
+    </section>
+  )
+}
--- a/src/components/Carousel.jsx
+++ b/src/components/Carousel.jsx
@@ -0,0 +1,122 @@
+"use client"; // <-- This line is crucial
+
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+
+const cards = [
+  {
+    image: 'images/act1.png',
+    title: 'Yoga',
+    description: 'Step fully into your body. The perfect start to the morning.',
+  },
+  {
+    image: 'images/act2.png',
+    title: 'Nutrition',
+    description: 'Discover a variety of dietary options tailored to your health and wellness needs.',
+  },
+  {
+    image: 'images/act3.png',
+    title: 'Meditation',
+    description: 'Enhance your mental clarity and inner peace through guided meditation practices.',
+  },
+  {
+    image: 'images/act4.png',
+    title: 'Massage',
+    description: 'Profound relaxation through massage sessions, harmonizing with the high energies of Egypt.',
+  },
+  {
+    image: 'images/act5.png',
+    title: 'Workshops',
+    description: 'Healing sessions and workshops designed to enrich your well-being',
+  },
+  {
+    image: 'images/act6.png',
+    title: 'Excursions',
+    description: 'Experience unforgettable adventures with our curated Nile excursions.',
+  },
+];
+
+const MultiCardCarousel = () => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isMobile, setIsMobile] = useState(window.innerWidth < 640);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 640);
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    // Clean up the event listener on component unmount
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const handleNext = () => {
+    setCurrentIndex((prevIndex) => {
+      const nextIndex = (prevIndex + (isMobile ? 1 : 3)) % cards.length;
+      return nextIndex;
+    });
+  };
+
+  const handlePrev = () => {
+    setCurrentIndex((prevIndex) => {
+      const prevIndexAdjusted = (prevIndex - (isMobile ? 1 : 3) + cards.length) % cards.length;
+      return prevIndexAdjusted;
+    });
+  };
+
+  // Determine the number of cards to display based on screen size
+  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="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
+          </h2>
+          <p className="mt-2 text-lg tracking-wide font-normal leading-6 pb-12 text-gray-600">
+            Explore a diverse range of activities designed to elevate your Mind, Body, and Soul, fostering a deeper connection and holistic well-being.
+          </p>
+        </div>
+        <div className="relative">
+          <div className={`flex ${isMobile ? 'w-full' : 'space-x-2 overflow-x-auto'}`}>
+            {displayCards.map((card, index) => (
+              <div
+                className={`flex-none ${isMobile ? 'w-full' : 'w-1/3'} relative overflow-hidden rounded-lg`}
+                key={index}
+              >
+                <img
+                  className="h-full w-full object-cover"
+                  src={card.image}
+                  alt={card.title}
+                />
+                <div className="absolute inset-x-0 bottom-0 bg-black bg-opacity-40 flex flex-col justify-end items-start text-left p-4">
+                  <h3 className="text-lg font-semibold text-white mb-2">{card.title}</h3>
+                  <p className="text-white">{card.description}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="absolute inset-x-0 bottom-1/2 flex justify-between px-4 transform -translate-y-1/2">
+            <button
+              className="w-10 h-10 rounded-full text-white font-semibold bg-gold-600"
+              onClick={handlePrev}
+            >
+              &lt;
+            </button>
+            <button
+              className="w-10 h-10 rounded-full text-white font-semibold bg-gold-600"
+              onClick={handleNext}
+            >
+              &gt;
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MultiCardCarousel;
--- a/src/components/Container.jsx
+++ b/src/components/Container.jsx
@@ -0,0 +1,10 @@
+import clsx from 'clsx'
+
+export function Container({ className, ...props }) {
+  return (
+    <div
+      className={clsx('mx-auto max-w-7xl px-4 sm:px-6 lg:px-8', className)}
+      {...props}
+    />
+  )
+}
--- a/src/components/Daha1.jsx
+++ b/src/components/Daha1.jsx
@@ -0,0 +1,23 @@
+export default function Example() {
+    return (
+      <div className="relative isolate overflow-hidden bg-creme-600 py-24 sm:py-32">
+        <img
+          alt=""
+          src="/images/daha1.jpg"
+          className="absolute inset-0 -z-10 h-full w-full object-cover"
+        />
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <div className="mx-auto max-w-2xl lg:mx-0">
+            <h2 className="lg:text-4xl font-semibold tracking-tight text-white text-xl">VEDA DAHABIYAS</h2>
+            <p className="mt-2 text-xl leading-12 text-gray-300">
+            Embark on a Transformative Journey Along the Nile
+            </p>
+            <p className="mt-6 text-lg leading-8 text-gray-300">
+            Discover the heart of Egypt on our specially designed dahabiyas, crafted to elevate your energy and frequency through unique experiences. These elegant vessels are perfect for spiritual work and mystical exploration, offering a harmonious setting to connect with the essence of the Nile. Drift past ancient wonders and immerse yourself in the tranquil rhythm of the river, embarking on a journey of self-discovery and rejuvenation.
+            </p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+  
--- a/src/components/Exp.jsx
+++ b/src/components/Exp.jsx
@@ -0,0 +1,42 @@
+const features = [
+    { name: 'Mind and Body Practices', description: 'Activities that enhance physical well-being and mental clarity through mindful movement and meditation.' },
+    { name: 'Healing and Wellness Therapies', description: 'Therapeutic activities designed to promote relaxation, rejuvenation, and overall well-being.' },
+    { name: 'Holistic Health and Nutrition', description: 'Programs focused on nourishing the body and promoting health through mindful eating and natural remedies.' },
+    { name: 'Creative and Expressive Workshops', description: 'Opportunities for self-expression and exploration through artistic and creative endeavors.' },
+    { name: 'Relaxation and Reflection', description: 'Activities that encourage rest, introspection, and a deeper connection with oneself and the natural world.' },
+    { name: 'Entertainment and Performance Arts', description: 'Experiences that offer enjoyment and inspiration through music, dance, and captivating performances.' },
+  ]
+  
+  export default function Example() {
+    return (
+      <div className="bg-creme-600">
+        <div aria-hidden="true" className="relative">
+          <img
+            alt=""
+            src="/images/exp.jpg"
+            className="h-96 w-full object-cover object-center"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-creme-600" />
+        </div>
+  
+        <div className="relative mx-auto -mt-12 max-w-7xl px-4 pb-16 sm:px-6 sm:pb-24 lg:px-8">
+          <div className="mx-auto max-w-2xl text-center lg:max-w-4xl">
+            <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">VEDA EXPERIENCES</h2>
+            <p className="mt-4 text-gray-900">
+              Join us for transformative journeys of wellness, creativity, and connection on the tranquil and sacred Nile.
+            </p>
+          </div>
+  
+          <dl className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 sm:gap-y-16 lg:max-w-none lg:grid-cols-3 lg:gap-x-8">
+            {features.map((feature) => (
+              <div key={feature.name} className="border-t border-gray-200 pt-4">
+                <dt className="font-medium text-gray-900">{feature.name}</dt>
+                <dd className="mt-2 text-sm text-gray-500">{feature.description}</dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </div>
+    )
+  }
+  
--- a/src/components/Exp1.jsx
+++ b/src/components/Exp1.jsx
@@ -0,0 +1,23 @@
+export default function Example() {
+    return (
+      <div className="relative isolate overflow-hidden bg-creme-600 py-24 sm:py-32">
+        <img
+          alt=""
+          src="/images/daha1.jpg"
+          className="absolute inset-0 -z-10 h-full w-full object-cover"
+        />
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <div className="mx-auto max-w-2xl lg:mx-0">
+            <h2 className="lg:text-4xl font-semibold tracking-tight text-white text-xl">VEDA DAHABIYAS</h2>
+            <p className="mt-2 text-xl leading-12 text-gray-300">
+            Embark on a Transformative Journey Along the Nile
+            </p>
+            <p className="mt-6 text-lg leading-8 text-gray-300">
+            Discover the heart of Egypt on our specially designed dahabiyas, crafted to elevate your energy and frequency through unique experiences. These elegant vessels are perfect for spiritual work and mystical exploration, offering a harmonious setting to connect with the essence of the Nile. Drift past ancient wonders and immerse yourself in the tranquil rhythm of the river, embarking on a journey of self-discovery and rejuvenation.
+            </p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+  
--- a/src/components/Faqs.jsx
+++ b/src/components/Faqs.jsx
@@ -0,0 +1,110 @@
+import Image from 'next/image'
+
+import { Container } from '@/components/Container'
+import backgroundImage from '@/images/background-faqs.jpg'
+
+const faqs = [
+  [
+    {
+      question: 'Does TaxPal handle VAT?',
+      answer:
+        'Well no, but if you move your company offshore you can probably ignore it.',
+    },
+    {
+      question: 'Can I pay for my subscription via purchase order?',
+      answer: 'Absolutely, we are happy to take your money in all forms.',
+    },
+    {
+      question: 'How do I apply for a job at TaxPal?',
+      answer:
+        'We only hire our customers, so subscribe for a minimum of 6 months and then let’s talk.',
+    },
+  ],
+  [
+    {
+      question: 'What was that testimonial about tax fraud all about?',
+      answer:
+        'TaxPal is just a software application, ultimately your books are your responsibility.',
+    },
+    {
+      question:
+        'TaxPal sounds horrible but why do I still feel compelled to purchase?',
+      answer:
+        'This is the power of excellent visual design. You just can’t resist it, no matter how poorly it actually functions.',
+    },
+    {
+      question:
+        'I found other companies called TaxPal, are you sure you can use this name?',
+      answer:
+        'Honestly not sure at all. We haven’t actually incorporated or anything, we just thought it sounded cool and made this website.',
+    },
+  ],
+  [
+    {
+      question: 'How do you generate reports?',
+      answer:
+        'You just tell us what data you need a report for, and we get our kids to create beautiful charts for you using only the finest crayons.',
+    },
+    {
+      question: 'Can we expect more inventory features?',
+      answer: 'In life it’s really better to never expect anything at all.',
+    },
+    {
+      question: 'I lost my password, how do I get into my account?',
+      answer:
+        'Send us an email and we will send you a copy of our latest password spreadsheet so you can find your information.',
+    },
+  ],
+]
+
+export function Faqs() {
+  return (
+    <section
+      id="faq"
+      aria-labelledby="faq-title"
+      className="relative overflow-hidden bg-slate-50 py-20 sm:py-32"
+    >
+      <Image
+        className="absolute left-1/2 top-0 max-w-none -translate-y-1/4 translate-x-[-30%]"
+        src={backgroundImage}
+        alt=""
+        width={1558}
+        height={946}
+        unoptimized
+      />
+      <Container className="relative">
+        <div className="mx-auto max-w-2xl lg:mx-0">
+          <h2
+            id="faq-title"
+            className="font-display text-3xl tracking-tight text-slate-900 sm:text-4xl"
+          >
+            Frequently asked questions
+          </h2>
+          <p className="mt-4 text-lg tracking-tight text-slate-700">
+            If you can’t find what you’re looking for, email our support team
+            and if you’re lucky someone will get back to you.
+          </p>
+        </div>
+        <ul
+          role="list"
+          className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-8 lg:max-w-none lg:grid-cols-3"
+        >
+          {faqs.map((column, columnIndex) => (
+            <li key={columnIndex}>
+              <ul role="list" className="flex flex-col gap-y-8">
+                {column.map((faq, faqIndex) => (
+                  <li key={faqIndex}>
+                    <h3 className="font-display text-lg leading-7 text-slate-900">
+                      {faq.question}
+                    </h3>
+                    <p className="mt-4 text-sm text-slate-700">{faq.answer}</p>
+                  </li>
+                ))}
+              </ul>
+            </li>
+          ))}
+        </ul>
+      </Container>
+    </section>
+  )
+}
--- a/src/components/Fields.jsx
+++ b/src/components/Fields.jsx
@@ -0,0 +1,38 @@
+import { useId } from 'react'
+import clsx from 'clsx'
+
+const formClasses =
+  'block w-full appearance-none rounded-md border border-gray-200 bg-gray-50 px-3 py-2 text-gray-800 placeholder-gray-400 focus:border-blue-500 focus:bg-white focus:outline-none focus:ring-blue-500 sm:text-sm'
+
+function Label({ id, children }) {
+  return (
+    <label
+      htmlFor={id}
+      className="mb-3 block text-sm font-medium text-gray-700"
+    >
+      {children}
+    </label>
+  )
+}
+
+export function TextField({ label, type = 'text', className, ...props }) {
+  let id = useId()
+
+  return (
+    <div className={className}>
+      {label && <Label id={id}>{label}</Label>}
+      <input id={id} type={type} {...props} className={formClasses} />
+    </div>
+  )
+}
+
+export function SelectField({ label, className, ...props }) {
+  let id = useId()
+
+  return (
+    <div className={className}>
+      {label && <Label id={id}>{label}</Label>}
+      <select id={id} {...props} className={clsx(formClasses, 'pr-8')} />
+    </div>
+  )
+}
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -0,0 +1,50 @@
+import Link from 'next/link'
+
+import { Container } from '@/components/Container'
+import { Logo } from '@/components/Logo'
+import { NavLink } from '@/components/NavLink'
+
+export function Footer() {
+  return (
+    <footer className="bg-creme-900">
+      <Container>
+        <div className="py-16">
+          <Logo className="mx-auto h-10 w-auto" />
+          <nav className="mt-10 text-sm" aria-label="quick links">
+            <div className="-my-1 flex justify-center gap-x-6">
+              <NavLink href="#features">Features</NavLink>
+              <NavLink href="#testimonials">Testimonials</NavLink>
+              <NavLink href="#pricing">Pricing</NavLink>
+            </div>
+          </nav>
+        </div>
+        <div className="flex flex-col items-center border-t border-slate-400/10 py-10 sm:flex-row-reverse sm:justify-between">
+          <div className="flex gap-x-6">
+            <Link href="#" className="group" aria-label="VEDA on X">
+              <svg
+                className="h-6 w-6 fill-slate-500 group-hover:fill-slate-700"
+                aria-hidden="true"
+                viewBox="0 0 24 24"
+              >
+                <path d="M13.3174 10.7749L19.1457 4H17.7646L12.7039 9.88256L8.66193 4H4L10.1122 12.8955L4 20H5.38119L10.7254 13.7878L14.994 20H19.656L13.3171 10.7749H13.3174ZM11.4257 12.9738L10.8064 12.0881L5.87886 5.03974H8.00029L11.9769 10.728L12.5962 11.6137L17.7652 19.0075H15.6438L11.4257 12.9742V12.9738Z" />
+              </svg>
+            </Link>
+            <Link href="#" className="group" aria-label="VEDA on GitHub">
+              <svg
+                className="h-6 w-6 fill-slate-500 group-hover:fill-slate-700"
+                aria-hidden="true"
+                viewBox="0 0 24 24"
+              >
+                <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z" />
+              </svg>
+            </Link>
+          </div>
+          <p className="mt-6 text-sm text-slate-500 sm:mt-0">
+            Copyright &copy; {new Date().getFullYear()} VEDA. All rights
+            reserved.
+          </p>
+        </div>
+      </Container>
+    </footer>
+  )
+}
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -0,0 +1,114 @@
+'use client'
+
+import Link from 'next/link'
+import {
+  Popover,
+  PopoverButton,
+  PopoverBackdrop,
+  PopoverPanel,
+} from '@headlessui/react'
+import clsx from 'clsx'
+
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+import { Logo } from '@/components/Logo'
+import { NavLink } from '@/components/NavLink'
+
+function MobileNavLink({ href, children }) {
+  return (
+    <PopoverButton as={Link} href={href} className="block w-full p-2">
+      {children}
+    </PopoverButton>
+  )
+}
+
+function MobileNavIcon({ open }) {
+  return (
+    <svg
+      aria-hidden="true"
+      className="h-3.5 w-3.5 overflow-visible stroke-slate-700"
+      fill="none"
+      strokeWidth={2}
+      strokeLinecap="round"
+    >
+      <path
+        d="M0 1H14M0 7H14M0 13H14"
+        className={clsx(
+          'origin-center transition',
+          open && 'scale-90 opacity-0',
+        )}
+      />
+      <path
+        d="M2 2L12 12M12 2L2 12"
+        className={clsx(
+          'origin-center transition',
+          !open && 'scale-90 opacity-0',
+        )}
+      />
+    </svg>
+  )
+}
+
+function MobileNavigation() {
+  return (
+    <Popover>
+      <PopoverButton
+        className="relative z-10 flex h-8 w-8 items-center justify-center ui-not-focus-visible:outline-none"
+        aria-label="Toggle Navigation"
+      >
+        {({ open }) => <MobileNavIcon open={open} />}
+      </PopoverButton>
+      <PopoverBackdrop
+        transition
+        className="fixed inset-0 bg-slate-300/50 duration-150 data-[closed]:opacity-0 data-[enter]:ease-out data-[leave]:ease-in"
+      />
+      <PopoverPanel
+        transition
+        className="absolute inset-x-0 top-full mt-4 flex origin-top flex-col rounded-lg bg-white p-4 text-lg tracking-tight text-slate-900 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"
+      >
+        <MobileNavLink href="/">HOME</MobileNavLink>
+        <MobileNavLink href="/story">STORY</MobileNavLink>
+        <MobileNavLink href="/dahabiyas">DAHABIYAS</MobileNavLink>
+        <MobileNavLink href="/experiences">EXPERIENCES</MobileNavLink>
+        <NavLink href="/itinerary">ITINERARY</NavLink>
+        <MobileNavLink href="#pricing">GALLERY</MobileNavLink>
+        <hr className="m-2 border-slate-300/40" />
+        <MobileNavLink href="/login">BOOK NOW</MobileNavLink>
+      </PopoverPanel>
+    </Popover>
+  )
+}
+
+export function Header() {
+  return (
+    <header className="py-10">
+      <Container>
+        <nav className="relative z-50 flex justify-between">
+          <div className="flex items-center md:gap-x-12">
+            <Link href="#" aria-label="Home">
+              <Logo className="h-10 w-auto" />
+            </Link>
+            <div className="hidden md:flex md:gap-x-6">
+              <NavLink href="/">HOME</NavLink>
+              <NavLink href="/story">STORY</NavLink>
+              <NavLink href="/dahabiyas">DAHABIYAS</NavLink>
+              <NavLink href="/experiences">EXPERIENCES</NavLink>
+              <NavLink href="/itinerary">ITINERARY</NavLink>
+              <NavLink href="#pricing">GALLERY</NavLink>
+            </div>
+          </div>
+          <div className="flex items-center gap-x-5 md:gap-x-8">
+            <Button href="/register" color="blue">
+              <span className="font-semibold tracking-wide">
+                Book Now
+              </span>
+            </Button>
+            <div className="-mr-1 md:hidden">
+              <MobileNavigation />
+            </div>
+          </div>
+        </nav>
+      </Container>
+    </header>
+  )
+}
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -0,0 +1,99 @@
+import Image from 'next/image'
+
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+import logoLaravel from '@/images/logos/laravel.svg'
+import logoMirage from '@/images/logos/mirage.svg'
+import logoStatamic from '@/images/logos/statamic.svg'
+import logoStaticKit from '@/images/logos/statickit.svg'
+import logoTransistor from '@/images/logos/transistor.svg'
+import logoTuple from '@/images/logos/tuple.svg'
+import logo1 from '@/images/logos/1.svg'
+import logo2 from '@/images/logos/2.svg'
+import logo3 from '@/images/logos/3.svg'
+import logo4 from '@/images/logos/4.svg'
+import logo5 from '@/images/logos/5.svg'
+import logo6 from '@/images/logos/6.svg'
+
+export function Hero() {
+  return (
+    <Container className="pb-16 pt-20 text-center lg:pt-32 ">
+      {/* Background Video */}
+      <video
+        autoPlay
+        loop
+        muted
+        playsInline
+        className="absolute inset-0 top-0 left-0 w-full h-full object-cover -z-10"
+      >
+        <source src="/videos/hero.mp4" type="video/mp4" />
+        Your browser does not support the video tag.
+      </video>
+      <h1 className="relative z-10 mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight text-white sm:text-7xl">
+        NILE CRUISES{' '}
+        <span className="relative whitespace-nowrap text-gold-400">
+          <svg
+            aria-hidden="true"
+            viewBox="0 0 418 42"
+            className="absolute left-0 top-2/3 h-[0.58em] w-full fill-gold-900"
+            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" />
+          </svg>
+          <span className="relative">REIMAGINED</span>
+        </span>{' '}
+      </h1>
+      <p className="relative z-10 mx-auto mt-6 max-w-2xl lg:text-xl text-sm tracking-wide font-normal text-slate-300">
+      Discover ancient Egypt and feel its special energies across the enchanting Nile river with our sophisticated cruises, boat rentals, healing packages, corporate retreats, private holidays, & more.
+      </p>
+      <div className="relative z-10 mt-10 mb-96 lg:mb-40 lg:py-2 xs:mb-20 flex justify-center gap-x-6 relative z-10">
+        <Button
+          href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+          variant="outline"
+        >
+        <span className="text-white">VEDA Boats</span>
+        </Button>
+        <Button className="button-gold" href="/register">Plan Your Visit</Button>
+      </div>
+      
+
+      {/* SECOND SECTION */}
+
+      <div className="relative z-10 lg:pt-10">
+        <p className="font-display text-large lg:text-2xl font-semibold italic text-slate-900">
+          As seen and featured on
+        </p>
+        <ul
+          role="list"
+          className="mt-8 flex items-center flex-wrap justify-center gap-x-8 sm:flex-col sm:gap-x-0 sm:gap-y-10 xl:flex-row xl:gap-x-12 xl:gap-y-0"
+        >
+          {[
+            [
+              { name: 'CNN', logo: logo1 },
+              { name: 'HLS', logo: logo2 },
+              { name: 'Bookretreats', logo: logo3 },
+            ],
+            [
+              { name: 'Beaviajera', logo: logo4 },
+              { name: 'Egytalloyd', logo: logo5 },
+              { name: 'AST', logo: logo6 },
+            ],
+          ].map((group, groupIndex) => (
+            <li key={groupIndex}>
+              <ul
+                role="list"
+                className="flex flex-col items-center gap-y-8 sm:flex-row sm:gap-x-12 sm:gap-y-0"
+              >
+                {group.map((company) => (
+                  <li key={company.name} className="flex">
+                    <Image src={company.logo} alt={company.name} unoptimized />
+                  </li>
+                ))}
+              </ul>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </Container>
+  )
+}
--- a/src/components/Iti1.jsx
+++ b/src/components/Iti1.jsx
@@ -0,0 +1,23 @@
+export default function Example() {
+    return (
+      <div className="relative isolate overflow-hidden bg-creme-600 py-24 sm:py-32">
+        <img
+          alt=""
+          src="/images/iti.jpg"
+          className="absolute inset-0 -z-10 h-full w-full object-cover"
+        />
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <div className="mx-auto max-w-2xl lg:mx-0">
+            <h2 className="lg:text-4xl font-semibold tracking-tight text-white text-xl">ITINERARY</h2>
+            <p className="mt-2 text-xl leading-12 text-gray-300">
+            Journey Through Ancient Egypt
+            </p>
+            <p className="mt-6 text-lg leading-8 text-gray-300">
+            Set sail on a transformative journey where the timeless magic of Egypt unfolds along the serene waters of the Nile. The VEDA Retreat offers an immersive experience, guiding you through the heart of Egypt's legendary past and vibrant present. Discover ancient temples, majestic landscapes, and the unique culture that thrives along the riverbanks, all from the comfort of a luxurious dahabiya. Join us as we sail through history and serenity, creating unforgettable memories in the cradle of civilization.
+            </p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+  
--- a/src/components/Logo.jsx
+++ b/src/components/Logo.jsx
--- a/src/components/NavLink.jsx
+++ b/src/components/NavLink.jsx
@@ -0,0 +1,12 @@
+import Link from 'next/link'
+
+export function NavLink({ href, children }) {
+  return (
+    <Link
+      href={href}
+      className="inline-block rounded-lg px-2 py-1 text-sm text-gray-400 hover:bg-gold-600 hover:text-slate-900"
+    >
+      {children}
+    </Link>
+  )
+}
--- a/src/components/NewFeatures.jsx
+++ b/src/components/NewFeatures.jsx
@@ -0,0 +1,56 @@
+import { CloudArrowUpIcon, LockClosedIcon, ServerIcon, SparklesIcon } from '@heroicons/react/20/solid'
+import Newfeaturesimg from '@/images/newfeatures0.png'
+
+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: 'Experience the extraordinary.',
+    description:
+      "Engage in exclusive activities like private barbecues on pristine islands or moments in ancient temples. Our VEDA crew will guide you to the Nile’s most stunning locations, tailored to your interests for an unforgettable experience.",
+    icon: SparklesIcon,
+  },
+]
+
+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="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
+             alt="New Features"
+              src="images/newfeatures3.png"
+            className="w-full max-w-[40rem] rounded-xl shadow-xl ring-1 ring-gray-400/10 object-cover"
+            style={{ maxWidth: '40rem', height: 'auto' }}
+          />
+        </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">
+                      <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>
+                  </div>
+                ))}
+              </dl>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/src/components/NewFeatures2.jsx
+++ b/src/components/NewFeatures2.jsx
@@ -0,0 +1,57 @@
+import { SparklesIcon } from '@heroicons/react/20/solid'
+import Newfeaturesimg from '@/images/newfeatures3.png'
+
+const features = [
+  {
+    name: 'Eco-Friendly & Organic.',
+    description:
+      "Enjoy the finest local cuisine, fresh juices, and detox smoothies while supporting environmental responsibility. With natural cleaning products and solar-powered boats, VEDA offers a sophisticated, eco-friendly journey on the Nile.",
+    icon: SparklesIcon,
+  },
+  {
+    name: 'Nurture Your Mind, Body, and Spirit',
+    description:
+      "Participate in yoga, breathwork, meditation, and wellness workshops in serene surroundings. Our holistic approach ensures your journey is enriching and rejuvenating, leaving you with a sense of balance and inner peace.",
+    icon: SparklesIcon,
+  },
+  {
+    name: 'Immersive Cultural Experiences',
+    description:
+      "Explore the wonders of ancient Egypt with exclusive guided tours and in-depth cultural experiences. Gain unique insights into Egypt’s rich history and traditions, deepening your understanding of this timeless civilization.",
+    icon: SparklesIcon,
+  },
+]
+
+export default function NewFeatures2() {
+  return (
+    <div className="overflow-hidden bg-creme-600 pb-10 pt-0 lg:pt-10 lg:pb-24">
+      <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">
+            <div className="lg:max-w-lg">
+              <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">
+                      <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>
+                  </div>
+                ))}
+              </dl>
+            </div>
+          </div>
+          <div className="flex items-start justify-end lg:justify-start lg:order-last">
+              <img
+              alt="New Features"
+             src="/images/newfeatures0.png"
+             className="w-full max-w-[35rem] rounded-xl shadow-xl ring-1 ring-gray-400/10 object-cover"
+             style={{ height: 'auto' }}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/src/components/Pricing.jsx
+++ b/src/components/Pricing.jsx
@@ -0,0 +1,165 @@
+import clsx from 'clsx'
+
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+
+function SwirlyDoodle(props) {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 281 40"
+      preserveAspectRatio="none"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M240.172 22.994c-8.007 1.246-15.477 2.23-31.26 4.114-18.506 2.21-26.323 2.977-34.487 3.386-2.971.149-3.727.324-6.566 1.523-15.124 6.388-43.775 9.404-69.425 7.31-26.207-2.14-50.986-7.103-78-15.624C10.912 20.7.988 16.143.734 14.657c-.066-.381.043-.344 1.324.456 10.423 6.506 49.649 16.322 77.8 19.468 23.708 2.65 38.249 2.95 55.821 1.156 9.407-.962 24.451-3.773 25.101-4.692.074-.104.053-.155-.058-.135-1.062.195-13.863-.271-18.848-.687-16.681-1.389-28.722-4.345-38.142-9.364-15.294-8.15-7.298-19.232 14.802-20.514 16.095-.934 32.793 1.517 47.423 6.96 13.524 5.033 17.942 12.326 11.463 18.922l-.859.874.697-.006c2.681-.026 15.304-1.302 29.208-2.953 25.845-3.07 35.659-4.519 54.027-7.978 9.863-1.858 11.021-2.048 13.055-2.145a61.901 61.901 0 0 0 4.506-.417c1.891-.259 2.151-.267 1.543-.047-.402.145-2.33.913-4.285 1.707-4.635 1.882-5.202 2.07-8.736 2.903-3.414.805-19.773 3.797-26.404 4.829Zm40.321-9.93c.1-.066.231-.085.29-.041.059.043-.024.096-.183.119-.177.024-.219-.007-.107-.079ZM172.299 26.22c9.364-6.058 5.161-12.039-12.304-17.51-11.656-3.653-23.145-5.47-35.243-5.576-22.552-.198-33.577 7.462-21.321 14.814 12.012 7.205 32.994 10.557 61.531 9.831 4.563-.116 5.372-.288 7.337-1.559Z"
+      />
+    </svg>
+  )
+}
+
+function CheckIcon({ className, ...props }) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={clsx(
+        'h-6 w-6 flex-none fill-current stroke-current',
+        className,
+      )}
+      {...props}
+    >
+      <path
+        d="M9.307 12.248a.75.75 0 1 0-1.114 1.004l1.114-1.004ZM11 15.25l-.557.502a.75.75 0 0 0 1.15-.043L11 15.25Zm4.844-5.041a.75.75 0 0 0-1.188-.918l1.188.918Zm-7.651 3.043 2.25 2.5 1.114-1.004-2.25-2.5-1.114 1.004Zm3.4 2.457 4.25-5.5-1.187-.918-4.25 5.5 1.188.918Z"
+        strokeWidth={0}
+      />
+      <circle
+        cx={12}
+        cy={12}
+        r={8.25}
+        fill="none"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+function Plan({ name, price, description, href, features, featured = false }) {
+  return (
+    <section
+      className={clsx(
+        'flex flex-col rounded-3xl px-6 sm:px-8',
+        featured ? 'order-first bg-blue-600 py-8 lg:order-none' : 'lg:py-8',
+      )}
+    >
+      <h3 className="mt-5 font-display text-lg text-white">{name}</h3>
+      <p
+        className={clsx(
+          'mt-2 text-base',
+          featured ? 'text-white' : 'text-slate-400',
+        )}
+      >
+        {description}
+      </p>
+      <p className="order-first font-display text-5xl font-light tracking-tight text-white">
+        {price}
+      </p>
+      <ul
+        role="list"
+        className={clsx(
+          'order-last mt-10 flex flex-col gap-y-3 text-sm',
+          featured ? 'text-white' : 'text-slate-200',
+        )}
+      >
+        {features.map((feature) => (
+          <li key={feature} className="flex">
+            <CheckIcon className={featured ? 'text-white' : 'text-slate-400'} />
+            <span className="ml-4">{feature}</span>
+          </li>
+        ))}
+      </ul>
+      <Button
+        href={href}
+        variant={featured ? 'solid' : 'outline'}
+        color="white"
+        className="mt-8"
+        aria-label={`Get started with the ${name} plan for ${price}`}
+      >
+        Get started
+      </Button>
+    </section>
+  )
+}
+
+export function Pricing() {
+  return (
+    <section
+      id="pricing"
+      aria-label="Pricing"
+      className="bg-slate-900 py-20 sm:py-32"
+    >
+      <Container>
+        <div className="md:text-center">
+          <h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
+            <span className="relative whitespace-nowrap">
+              <SwirlyDoodle className="absolute left-0 top-1/2 h-[1em] w-full fill-blue-400" />
+              <span className="relative">Simple pricing,</span>
+            </span>{' '}
+            for everyone.
+          </h2>
+          <p className="mt-4 text-lg text-slate-400">
+            It doesn’t matter what size your business is, our software won’t
+            work well for you.
+          </p>
+        </div>
+        <div className="-mx-4 mt-16 grid max-w-2xl grid-cols-1 gap-y-10 sm:mx-auto lg:-mx-8 lg:max-w-none lg:grid-cols-3 xl:mx-0 xl:gap-x-8">
+          <Plan
+            name="Starter"
+            price="$9"
+            description="Good for anyone who is self-employed and just getting started."
+            href="/register"
+            features={[
+              'Send 10 quotes and invoices',
+              'Connect up to 2 bank accounts',
+              'Track up to 15 expenses per month',
+              'Manual payroll support',
+              'Export up to 3 reports',
+            ]}
+          />
+          <Plan
+            featured
+            name="Small business"
+            price="$15"
+            description="Perfect for small / medium sized businesses."
+            href="/register"
+            features={[
+              'Send 25 quotes and invoices',
+              'Connect up to 5 bank accounts',
+              'Track up to 50 expenses per month',
+              'Automated payroll support',
+              'Export up to 12 reports',
+              'Bulk reconcile transactions',
+              'Track in multiple currencies',
+            ]}
+          />
+          <Plan
+            name="Enterprise"
+            price="$39"
+            description="For even the biggest enterprise companies."
+            href="/register"
+            features={[
+              'Send unlimited quotes and invoices',
+              'Connect up to 15 bank accounts',
+              'Track up to 200 expenses per month',
+              'Automated payroll support',
+              'Export up to 25 reports, including TPS',
+            ]}
+          />
+        </div>
+      </Container>
+    </section>
+  )
+}
--- a/src/components/PrimaryFeatures.jsx
+++ b/src/components/PrimaryFeatures.jsx
@@ -0,0 +1,150 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import Image from 'next/image'
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
+import clsx from 'clsx'
+
+import { Container } from '@/components/Container'
+import backgroundImage from '@/images/background-features.png'
+import screenshotExpenses from '@/images/screenshots/expenses.png'
+import screenshotPayroll from '@/images/screenshots/payroll.png'
+import screenshotReporting from '@/images/screenshots/reporting.png'
+import screenshotVatReturns from '@/images/screenshots/vat-returns.png'
+
+const features = [
+  {
+    title: 'Tailored to Your Preferences',
+    description:
+      "From your trip's duration to the daily itinerary and dining choices, everything is customized to your liking. We offer expert advice to align with your group's preferences, ensuring a journey that fits your vision perfectly.",
+    image: screenshotPayroll,
+  },
+  {
+    title: 'Unique & Memorable Adventures',
+    description:
+      "Experience exclusive activities like a barbeque on a secluded island or private moments in ancient temples. The VEDA crew can also lead you to the Nile’s most remarkable and energetic spots, tailored to your interests.",
+    image: screenshotExpenses,
+  },
+  {
+    title: 'Eco-Friendly & Organic',
+    description:
+      "Savor local dishes, fresh juices, and detox smoothies while using natural cleaning products and sailing on solar-powered boats. With VEDA, you're traveling on the Nile’s first genuinely green boat, combining sustainability with luxury.",
+    image: screenshotReporting,
+  },
+]
+
+export function PrimaryFeatures() {
+  let [tabOrientation, setTabOrientation] = useState('horizontal')
+
+  useEffect(() => {
+    let lgMediaQuery = window.matchMedia('(min-width: 1024px)')
+
+    function onMediaQueryChange({ matches }) {
+      setTabOrientation(matches ? 'vertical' : 'horizontal')
+    }
+
+    onMediaQueryChange(lgMediaQuery)
+    lgMediaQuery.addEventListener('change', onMediaQueryChange)
+
+    return () => {
+      lgMediaQuery.removeEventListener('change', onMediaQueryChange)
+    }
+  }, [])
+
+  return (
+    <section
+      id="features"
+      aria-label="What makes us different"
+      className="relative overflow-hidden bg-blue-600 pb-28 pt-20 sm:py-32"
+    >
+      <Image
+        className="absolute left-1/2 top-1/2 max-w-none translate-x-[-44%] translate-y-[-42%]"
+        src={backgroundImage}
+        alt=""
+        width={2245}
+        height={1636}
+        unoptimized
+      />
+      <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">
+          What makes VEDA different?
+          </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.
+          </p>
+        </div>
+        <TabGroup
+          className="mt-16 grid grid-cols-1 items-center gap-y-2 pt-10 sm:gap-y-6 md:mt-20 lg:grid-cols-12 lg:pt-0"
+          vertical={tabOrientation === 'vertical'}
+        >
+          {({ selectedIndex }) => (
+            <>
+              <div className="-mx-4 flex overflow-x-auto pb-4 sm:mx-0 sm:overflow-visible sm:pb-0 lg:col-span-5">
+                <TabList className="relative z-10 flex gap-x-4 whitespace-nowrap px-4 sm:mx-auto sm:px-0 lg:mx-0 lg:block lg:gap-x-0 lg:gap-y-1 lg:whitespace-normal">
+                  {features.map((feature, featureIndex) => (
+                    <div
+                      key={feature.title}
+                      className={clsx(
+                        'group relative rounded-full px-4 py-1 lg:rounded-l-xl lg:rounded-r-none lg:p-6',
+                        selectedIndex === featureIndex
+                          ? 'bg-white lg:bg-white/10 lg:ring-1 lg:ring-inset lg:ring-white/10'
+                          : 'hover:bg-white/10 lg:hover:bg-white/5',
+                      )}
+                    >
+                      <h3>
+                        <Tab
+                          className={clsx(
+                            'font-display text-lg ui-not-focus-visible:outline-none',
+                            selectedIndex === featureIndex
+                              ? 'text-blue-600 lg:text-white'
+                              : 'text-blue-100 hover:text-white lg:text-white',
+                          )}
+                        >
+                          <span className="absolute inset-0 rounded-full lg:rounded-l-xl lg:rounded-r-none" />
+                          {feature.title}
+                        </Tab>
+                      </h3>
+                      <p
+                        className={clsx(
+                          'mt-2 hidden text-sm lg:block',
+                          selectedIndex === featureIndex
+                            ? 'text-white'
+                            : 'text-blue-100 group-hover:text-white',
+                        )}
+                      >
+                        {feature.description}
+                      </p>
+                    </div>
+                  ))}
+                </TabList>
+              </div>
+              <TabPanels className="lg:col-span-7">
+                {features.map((feature) => (
+                  <TabPanel key={feature.title} unmount={false}>
+                    <div className="relative sm:px-6 lg:hidden">
+                      <div className="absolute -inset-x-4 bottom-[-4.25rem] top-[-6.5rem] bg-white/10 ring-1 ring-inset ring-white/10 sm:inset-x-0 sm:rounded-t-xl" />
+                      <p className="relative mx-auto max-w-2xl text-base text-white sm:text-center">
+                        {feature.description}
+                      </p>
+                    </div>
+                    <div className="mt-10 w-[45rem] overflow-hidden rounded-xl bg-slate-50 shadow-xl shadow-blue-900/20 sm:w-auto lg:mt-0 lg:w-[67.8125rem]">
+                      <Image
+                        className="w-full"
+                        src={feature.image}
+                        alt=""
+                        priority
+                        sizes="(min-width: 1024px) 67.8125rem, (min-width: 640px) 100vw, 45rem"
+                      />
+                    </div>
+                  </TabPanel>
+                ))}
+              </TabPanels>
+            </>
+          )}
+        </TabGroup>
+      </Container>
+    </section>
+  )
+}
--- a/src/components/Route.jsx
+++ b/src/components/Route.jsx
@@ -0,0 +1,51 @@
+"use client"
+
+import { CloudArrowUpIcon, LockClosedIcon, ServerIcon } from '@heroicons/react/20/solid'
+import { useId } from 'react'
+import Image from 'next/image'
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
+import clsx from 'clsx'
+import { Button } from '@/components/Button'
+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="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">
+              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>
+              <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>
+            </div>
+          </div>
+          <div className="sm:px-6 lg:px-0">
+            <div className="relative overflow-hidden sm:mx-auto sm:max-w-2xl sm:rounded-3xl lg:mx-0 lg:max-w-none">
+              <div className="mx-auto max-w-2xl sm:mx-0 sm:max-w-none">
+                <img
+                  alt="trip map"
+                  src="images/map.png"
+                  width={500}
+                  height={500}
+                  className="w-full max-w-full rounded-tl-xl bg-gray-800 ring-1 ring-white/10"
+                />
+              </div>
+              <div
+                aria-hidden="true"
+                className="pointer-events-none absolute inset-0 ring-1 ring-inset ring-black/10 sm:rounded-3xl"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/src/components/SecondaryFeatures.jsx
+++ b/src/components/SecondaryFeatures.jsx
@@ -0,0 +1,285 @@
+'use client'
+
+import { useId } from 'react'
+import Image from 'next/image'
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
+import clsx from 'clsx'
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+import veda1 from '@/images/dahabiyas/veda1.jpg'
+import veda2 from '@/images/dahabiyas/veda2.jpg'
+import veda3 from '@/images/dahabiyas/veda3.jpg'
+import veda4 from '@/images/dahabiyas/veda4.jpg'
+
+const features = [
+  {
+    name: 'VEDA 1',
+    summary: 'The ideal retreat for luxury and privacy, perfect for intimate gatherings.',
+    description: [
+      '6 rooms & 4 suites with balconies.',
+      'Hosts up to 20 people.',
+      'Private bathroom ensuites.'
+    ],
+    button: 'Learn More',
+    href: '/dahabiyas',
+    image: veda1,
+    icon: function ReportingIcon() {
+      let id = useId()
+      return (
+        <>
+          <defs>
+            <linearGradient
+              id={id}
+              x1="11.5"
+              y1={18}
+              x2={36}
+              y2="15.5"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop offset=".194" stopColor="#fff" />
+              <stop offset={1} stopColor="#c6892d" />
+            </linearGradient>
+          </defs>
+          <path
+            d="m30 15-4 5-4-11-4 18-4-11-4 7-4-5"
+            stroke={`url(#${id})`}
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </>
+      )
+    },
+  },
+  {
+    name: 'VEDA 2',
+    summary: 'The perfect spacious space for larger groups seeking comfort.',
+    description: [
+      '8 rooms & 2 suites with balconies.',
+      'Hosts up to 20 people.',
+      'Private bathroom ensuites.'
+    ],
+    button: 'Learn More',
+    href: '/dahabiyas',
+    image: veda2,
+    icon: function InventoryIcon() {
+      return (
+        <>
+          <path
+            opacity=".5"
+            d="M8 17a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2Z"
+            fill="#fff"
+          />
+          <path
+            opacity=".3"
+            d="M8 24a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2Z"
+            fill="#fff"
+          />
+          <path
+            d="M8 10a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2Z"
+            fill="#fff"
+          />
+        </>
+      )
+    },
+  },
+  {
+    name: 'VEDA 3',
+    summary: 'An ideal choice for small groups valuing intimacy in a cozy setting.',
+    description: [
+      '5 rooms with balconies.',
+      'Hosts up to 10 people.',
+      'Private bathroom ensuites.'
+    ],
+    button: 'Learn More',
+    href: '/dahabiyas',
+    image: veda3,
+    icon: function ContactsIcon() {
+      return (
+        <>
+          <path
+            opacity=".5"
+            d="M25.778 25.778c.39.39 1.027.393 1.384-.028A11.952 11.952 0 0 0 30 18c0-6.627-5.373-12-12-12S6 11.373 6 18c0 2.954 1.067 5.659 2.838 7.75.357.421.993.419 1.384.028.39-.39.386-1.02.036-1.448A9.959 9.959 0 0 1 8 18c0-5.523 4.477-10 10-10s10 4.477 10 10a9.959 9.959 0 0 1-2.258 6.33c-.35.427-.354 1.058.036 1.448Z"
+            fill="#fff"
+          />
+          <path
+            d="M12 28.395V28a6 6 0 0 1 12 0v.395A11.945 11.945 0 0 1 18 30c-2.186 0-4.235-.584-6-1.605ZM21 16.5c0-1.933-.5-3.5-3-3.5s-3 1.567-3 3.5 1.343 3.5 3 3.5 3-1.567 3-3.5Z"
+            fill="#fff"
+          />
+        </>
+      )
+    },
+  },
+  {
+    name: 'VEDA 4',
+    summary: 'The perfect choice for accommodating larger gatherings with ease.',
+    description: [
+      '10 rooms & 4 suites with balconies.',
+      'Hosts up to 28 people.',
+      'Private bathroom ensuites.'
+    ],
+    button: 'Learn More',
+    href: '/dahabiyas',
+    image: veda4,
+    icon: function ContactsIcon() {
+      return (
+        <>
+          <path
+            opacity=".5"
+            d="M25.778 25.778c.39.39 1.027.393 1.384-.028A11.952 11.952 0 0 0 30 18c0-6.627-5.373-12-12-12S6 11.373 6 18c0 2.954 1.067 5.659 2.838 7.75.357.421.993.419 1.384.028.39-.39.386-1.02.036-1.448A9.959 9.959 0 0 1 8 18c0-5.523 4.477-10 10-10s10 4.477 10 10a9.959 9.959 0 0 1-2.258 6.33c-.35.427-.354 1.058.036 1.448Z"
+            fill="#fff"
+          />
+          <path
+            d="M12 28.395V28a6 6 0 0 1 12 0v.395A11.945 11.945 0 0 1 18 30c-2.186 0-4.235-.584-6-1.605ZM21 16.5c0-1.933-.5-3.5-3-3.5s-3 1.567-3 3.5 1.343 3.5 3 3.5 3-1.567 3-3.5Z"
+            fill="#fff"
+          />
+        </>
+      )
+    },
+  },
+]
+
+function Feature({ feature, isActive, className, ...props }) {
+  return (
+    <div
+      className={clsx(className, !isActive && 'opacity-75 hover:opacity-100')}
+      {...props}
+    >
+      <div
+        className={clsx(
+          'w-9 rounded-lg',
+          isActive ? 'bg-gold-600' : 'bg-slate-500',
+        )}
+      >
+        {/* Render icon here if needed */}
+      </div>
+      <h3
+        className={clsx(
+          'mt-6 text-sm font-medium',
+          isActive ? 'text-gold-600' : 'text-slate-600',
+        )}
+      >
+        {feature.name}
+      </h3>
+      <p className="mt-2 font-display text-xl text-slate-900">
+        {feature.summary}
+      </p>
+      <ul className="mt-4 text-sm text-slate-600 list-disc list-inside">
+        {feature.description.map((item, index) => (
+          <li key={index}>{item}</li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+function FeaturesMobile() {
+  return (
+    <div className="-mx-4 mt-20 flex flex-col gap-y-10 overflow-hidden px-4 sm:-mx-6 sm:px-6 lg:hidden">
+      {features.map((feature) => (
+        <div key={feature.summary} className="relative mx-auto max-w-full">
+          <div className="relative overflow-hidden rounded-xl bg-creme-900">
+            <Image
+              className="w-full h-auto object-cover"
+              src={feature.image}
+              alt={feature.name}
+              layout="responsive"
+              width={1000}
+              height={600}
+            />
+          </div>
+          <Feature feature={feature} className="mx-auto max-w-2xl" isActive />
+          <div className="mx-auto max-w-2xl mt-4">
+            <Button href={feature.href} variant="primary" className="rounded-2xl bg-gold-900 mt-4 lg:text-base text-xs px-3 py-2 text-white">
+            {feature.button}
+            </Button>
+          </div>
+          <div className="relative mt-10 pb-10">
+            <div className="absolute -inset-x-4 bottom-0 top-8 bg-slate-200 sm:-inset-x-6" />
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function FeaturesDesktop() {
+  return (
+    <TabGroup className="hidden lg:mt-10 lg:block">
+      {({ selectedIndex }) => (
+        <>
+          <TabList className="grid grid-cols-4 gap-x-4">
+            {features.map((feature, featureIndex) => (
+              <Tab
+                key={feature.summary}
+                className={clsx(
+                  'relative flex flex-col items-center text-center shadow-lg p-4 border border-gold-200 bg-white rounded-lg',
+                  featureIndex === selectedIndex ? 'text-gold-900' : 'text-slate-600'
+                )}
+              >
+                <div className="w-full mb-2">
+                  <Image
+                    className="w-full h-auto rounded-lg"
+                    src={feature.image}
+                    alt={feature.name}
+                    layout="responsive"
+                    width={300}
+                    height={200}
+                  />
+                </div>
+                <span className="mt-2 text-lg font-semibold">{feature.name}</span>
+                <p className="mt-4 text-sm text-slate-600">{feature.summary}</p>
+                <ul className="mt-4 mb-2 text-sm text-slate-600 list-disc list-inside">
+                  {feature.description.map((item, index) => (
+                    <li key={index}>{item}</li>
+                  ))}
+                </ul>
+                <Button href={feature.href} variant="primary" className="rounded-2xl mb-4 bg-gold-900 mt-4 text-base lg:text-xs px-3 py-1 text-white">
+                  {feature.button}
+                </Button>
+              </Tab>
+            ))}
+          </TabList>
+          <TabPanels className="relative mt-10">
+            {features.map((feature, featureIndex) => (
+              <TabPanel
+                key={feature.summary}
+                className={clsx(
+                  'transition-opacity duration-500 ease-in-out',
+                  featureIndex === selectedIndex ? 'opacity-100' : 'opacity-0'
+                )}
+                aria-hidden={featureIndex !== selectedIndex}
+              >
+                {/* Content of the selected tab can go here */}
+              </TabPanel>
+            ))}
+          </TabPanels>
+        </>
+      )}
+    </TabGroup>
+  )
+}
+
+export function SecondaryFeatures() {
+  return (
+    <section
+      id="secondary-features"
+      aria-label="Features for simplifying everyday business tasks"
+      className="pb-14 pt-14 lg:pt-20 lg:pb-20"
+    >
+      <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="font-display mt-2 text-3xl font-bold tracking-tight text-gray-800 sm:text-4xl">
+            VEDA DAHABIYAS
+          </h2>
+          <p className="mt-2 text-lg tracking-wide font-normal leading-8 text-gray-600">
+            Discover peaceful platforms where every detail ensures a truly memorable stay.
+          </p>
+        </div>
+        <FeaturesMobile />
+        <FeaturesDesktop />
+      </Container>
+    </section>
+  )
+}
--- a/src/components/SlimLayout.jsx
+++ b/src/components/SlimLayout.jsx
@@ -0,0 +1,25 @@
+import Image from 'next/image'
+
+import backgroundImage from '@/images/background-auth.jpg'
+
+export function SlimLayout({ children }) {
+  return (
+    <>
+      <div className="relative flex min-h-full shrink-0 justify-center md:px-12 lg:px-0">
+        <div className="relative z-10 flex flex-1 flex-col bg-white px-4 py-10 shadow-2xl sm:justify-center md:flex-none md:px-28">
+          <main className="mx-auto w-full max-w-md sm:px-4 md:w-96 md:max-w-sm md:px-0">
+            {children}
+          </main>
+        </div>
+        <div className="hidden sm:contents lg:relative lg:block lg:flex-1">
+          <Image
+            className="absolute inset-0 h-full w-full object-cover"
+            src={backgroundImage}
+            alt=""
+            unoptimized
+          />
+        </div>
+      </div>
+    </>
+  )
+}
--- a/src/components/Story.jsx
+++ b/src/components/Story.jsx
@@ -0,0 +1,41 @@
+import { CloudArrowUpIcon, LockClosedIcon, ServerIcon, SparklesIcon } from '@heroicons/react/20/solid'
+
+const features = [
+
+]
+
+export default function NewFeatures() {
+  return (
+    <div className="overflow-hidden bg-creme-600 pb-0 pt-12 lg:pt-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="flex items-start justify-end lg:justify-start lg:order-first">
+          <img
+             alt="New Features"
+              src="images/story1.png"
+            className="w-full max-w-[40rem] rounded-xl shadow-xl ring-1 ring-gray-400/10 object-cover"
+            style={{ maxWidth: '40rem', height: 'auto' }}
+          />
+        </div>
+          <div className="lg:ml-auto lg:pl-4 lg:pt-0">
+            <div className="lg:max-w-lg">
+              <p className="mt-2 text-3xl font-bold tracking-tight text-gray-800 sm:text-4xl">OUR STORY</p>
+              <p className="mt-4 text-xl leading-8 tracking-wide ITALIC font-normal text-gray-600">
+              THE TALE OF SACRED ENERGIES OF THE NILE
+              </p>
+              <p className="mt-6 text-lg leading-7 font-light text-gray-500">
+              Our founders, Isabelle Peeters and Kristof De Spiegeleer fell in love with the Nile and envisioned creating clean, unique, and high-energy boats for people to experience its sacred energies.
+              </p>
+              <p className="mt-6 text-lg leading-7 font-light text-gray-500">
+              Their goal is to offer a sanctuary for the body, mind, and spirit, a safe space to open yourself to new experiences, and allow these sacred energies to enter your consciousness, helping you reconnect with your true essence.
+              </p>
+              <p className="mt-4 text-lg leading-7 font-light text-gray-500">
+              We are in unique times, marked by the energies of the Aquarian Age. As chaotic as these times may seem, they bring a shift in energies and an opportunity for transformation. The Nile is a powerful energy vortex, and we are here to help you align with its frequencies.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/src/components/Story2.jsx
+++ b/src/components/Story2.jsx
@@ -0,0 +1,38 @@
+import { SparklesIcon } from '@heroicons/react/20/solid'
+
+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="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">
+            <div className="lg:max-w-lg">
+              <p className="mt-4 text-lg leading-7 font-light text-gray-500">
+              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.
+              </p>
+              <p className="mt-4 text-lg leading-7 italic font-normal text-gray-600">
+              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?
+              </p>
+              <p className="mt-4 text-lg leading-7 font-light text-gray-500">
+              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.
+              </p>
+              <h2 className="text-base mt-6 font-semibold leading-7 italic text-gold-600">With Love,</h2>
+              <h2 className="text-base font-semibold leading-7 text-gray-700">Kristof & Isabelle</h2>
+            </div>
+          </div>
+          <div className="flex items-start justify-end lg:justify-start lg:order-last">
+              <img
+              alt="New Features"
+             src="/images/story2.png"
+             className="w-full max-w-[35rem] rounded-xl shadow-xl ring-1 ring-gray-400/10 object-cover"
+             style={{ height: 'auto' }}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/src/components/Team.jsx
+++ b/src/components/Team.jsx
@@ -0,0 +1,75 @@
+import Image from 'next/image'
+import React from 'react';
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+
+const people = [
+    {
+      name: 'Isabelle Peeters',
+      role: 'CEO, Founder, Awareness Coach',
+      imageUrl:
+        '/images/isabelle.png',
+      bio: 'Isabelle holds a law degree and MBA. Two years after setting up her legal solutions firm, a progressed form of Lyme disease called her to a halt.',
+      bio2: 'Years of conventional medicine made her completely bedridden, until she realized that true healing only started after introducing organic healing food, biological medicine protocols, energy healing, meditation, and understanding the Self.',
+      bio3: 'Helping to grow people in awareness and understanding their own power became a true passion of Isabelle.',
+      Url: 'https://www.linkedin.com/in/isabelle-peeters-54305589/',
+    },
+    {
+        name: 'Chef Dave De Belder',
+        role: 'Nutritionist, Chef, Nutritional Coach',
+        imageUrl:
+          '/images/dave.png',
+        bio: "Dave's culinary career started with top chef Jonnie Boer. From there he went to Spain to be trained by star chefs Ferran & Albert Adria and chef Joan Roca.",
+        bio2: "After successfully opening two michelin-stars restaurant in Belgium and Australia, Dave needed a radical change in his life and moved to Ibiza in 2015. Going back to the basics inspired him to go fully organic and local.",
+        bio3: "In Workshops and retreats at VEDA, Dave helps people to understand the impact of food on the body, mind, and soul. He also teaches how to improve your diet and cook in a real and healthy way.",
+        Url: 'https://glowbelle.es/',
+      },
+    // More people...
+  ]
+  
+  export default function Team() {
+    return (
+      <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>
+            <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>
+          </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"
+          >
+            {people.map((person) => (
+              <li key={person.name}>
+                <img alt="" src={person.imageUrl} className="aspect-[4/4] w-full rounded-2xl object-cover" />
+                <h3 className="mt-6 text-lg font-semibold leading-8 text-gray-900">{person.name}</h3>
+                <p className="text-base leading-7 text-gray-600">{person.role}</p>
+                <p className="mt-4 text-base leading-7 text-gray-600">{person.bio}</p>
+                <p className="mt-2 text-base leading-7 text-gray-600">{person.bio2}</p>
+                <p className="mt-2 text-base leading-7 text-gray-600">{person.bio3}</p>
+                <ul role="list" className="mt-6 flex gap-x-6">
+                  <li>
+                    <a href={person.Url} className="text-gray-400 hover:text-gray-500" target='_blank' rel="noopener noreferrer">
+                      <span className="sr-only">Website</span>
+                      <svg fill="none" stroke='gray' strokeWidth="3" viewBox="0 0 64 64" width="25" height="25">
+                      <path d="M39.93 55.72a24.86 24.86 0 1116.93-23.57 37.24 37.24 0 01-.73 6M37.86 51.1A47 47 0 0132 56.7"></path>
+                      <path d="M32 7a34.14 34.14 0 0111.57 23 34.07 34.07 0 01.09 4.85M32 7a34.09 34.09 0 00-11.69 25.46c0 16.2 7.28 21 11.66 24.24"></path>
+                      <path d="M10.37 19.9L53.75 19.9"></path>
+                      <path d="M32 6.99L32 56.7"></path>
+                      <path d="M11.05 45.48L37.04 45.48"></path>
+                      <path d="M7.14 32.46L56.86 31.85"></path>
+                      <path d="M53.57 57L58 52.56l-8-8 4.55-2.91a.38.38 0 00-.12-.7l-15.29-3.58a.39.39 0 00-.46.46L42 53.41a.39.39 0 00.71.13L45.57 49z"></path>
+                      </svg>
+                    </a>
+                  </li>
+                </ul>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    )
+  }
+  
--- a/src/components/Testimonials.jsx
+++ b/src/components/Testimonials.jsx
@@ -0,0 +1,142 @@
+import Image from 'next/image'
+
+import { Container } from '@/components/Container'
+import avatarImage1 from '@/images/avatars/avatar-1.png'
+import avatarImage2 from '@/images/avatars/avatar-2.png'
+import avatarImage3 from '@/images/avatars/avatar-3.png'
+import avatarImage4 from '@/images/avatars/avatar-4.png'
+import avatarImage5 from '@/images/avatars/avatar-5.png'
+
+const testimonials = [
+  [
+    {
+      content:
+        "VEDA exceeded all my expectations. The attention to detail and personalized service made our Nile cruise a truly unforgettable experience. Highly recommend!",
+      author: {
+        name: 'Sheryl Berge',
+        role: 'CEO at Lynch LLC',
+        image: avatarImage1,
+      },
+    },
+    {
+      content:
+        "VEDA exceeded all my expectations. The attention to detail and personalized service made our Nile cruise a truly unforgettable experience. Highly recommend!",
+      author: {
+        name: 'Amy Hahn',
+        role: 'Director at Velocity Industries',
+        image: avatarImage4,
+      },
+    },
+  ],
+  [
+    {
+      content:
+        "I was blown away by the beauty and serenity of the VEDA dahabiyas. The personalized itinerary was perfect for our group, making every moment special and memorable.",
+      author: {
+        name: 'Leland Kiehn',
+        role: 'Founder of Kiehn and Sons',
+        image: avatarImage5,
+      },
+    },
+    {
+      content:
+        "From the luxurious accommodations to the incredible crew, VEDA made our trip down the Nile a dream come true. Can't wait to return!",
+      author: {
+        name: 'Erin Powlowski',
+        role: 'COO at Armstrong Inc',
+        image: avatarImage2,
+      },
+    },
+  ],
+  [
+    {
+      content:
+        " The eco-friendly approach of VEDA is commendable. We enjoyed every moment, knowing we were in harmony with nature. A perfect blend of luxury and sustainability!",
+      author: {
+        name: 'Peter Renolds',
+        role: 'Founder of West Inc',
+        image: avatarImage3,
+      },
+    },
+    {
+      content:
+        "Our family had the most amazing time on VEDA. The curated experiences and the hospitality of the crew were outstanding. A once-in-a-lifetime journey!",
+      author: {
+        name: 'Amy Hahn',
+        role: 'Director at Velocity Industries',
+        image: avatarImage4,
+      },
+    },
+  ],
+]
+
+function QuoteIcon(props) {
+  return (
+    <svg aria-hidden="true" width={105} height={78} {...props}>
+      <path d="M25.086 77.292c-4.821 0-9.115-1.205-12.882-3.616-3.767-2.561-6.78-6.102-9.04-10.622C1.054 58.534 0 53.411 0 47.686c0-5.273.904-10.396 2.712-15.368 1.959-4.972 4.746-9.567 8.362-13.786a59.042 59.042 0 0 1 12.43-11.3C28.325 3.917 33.599 1.507 39.324 0l11.074 13.786c-6.479 2.561-11.677 5.951-15.594 10.17-3.767 4.219-5.65 7.835-5.65 10.848 0 1.356.377 2.863 1.13 4.52.904 1.507 2.637 3.089 5.198 4.746 3.767 2.41 6.328 4.972 7.684 7.684 1.507 2.561 2.26 5.5 2.26 8.814 0 5.123-1.959 9.19-5.876 12.204-3.767 3.013-8.588 4.52-14.464 4.52Zm54.24 0c-4.821 0-9.115-1.205-12.882-3.616-3.767-2.561-6.78-6.102-9.04-10.622-2.11-4.52-3.164-9.643-3.164-15.368 0-5.273.904-10.396 2.712-15.368 1.959-4.972 4.746-9.567 8.362-13.786a59.042 59.042 0 0 1 12.43-11.3C82.565 3.917 87.839 1.507 93.564 0l11.074 13.786c-6.479 2.561-11.677 5.951-15.594 10.17-3.767 4.219-5.65 7.835-5.65 10.848 0 1.356.377 2.863 1.13 4.52.904 1.507 2.637 3.089 5.198 4.746 3.767 2.41 6.328 4.972 7.684 7.684 1.507 2.561 2.26 5.5 2.26 8.814 0 5.123-1.959 9.19-5.876 12.204-3.767 3.013-8.588 4.52-14.464 4.52Z" />
+    </svg>
+  )
+}
+
+export function Testimonials() {
+  return (
+    <section
+      id="testimonials"
+      aria-label="What our customers are saying"
+      className="bg-creme-600 pt-10 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
+          </h2>
+          <p className="mt-4 text-lg tracking-tight text-slate-700">
+          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>
+        <ul
+          role="list"
+          className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 sm:gap-8 lg:mt-20 lg:max-w-none lg:grid-cols-3"
+        >
+          {testimonials.map((column, columnIndex) => (
+            <li key={columnIndex}>
+              <ul role="list" className="flex flex-col gap-y-6 sm:gap-y-8">
+                {column.map((testimonial, testimonialIndex) => (
+                  <li key={testimonialIndex}>
+                    <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">
+                          {testimonial.content}
+                        </p>
+                      </blockquote>
+                      <figcaption className="relative mt-6 flex items-center justify-between border-t border-slate-100 pt-6">
+                        <div>
+                          <div className="font-display text-base text-slate-900">
+                            {testimonial.author.name}
+                          </div>
+                          <div className="mt-1 text-sm text-slate-500">
+                            {testimonial.author.role}
+                          </div>
+                        </div>
+                        <div className="overflow-hidden rounded-full bg-creme-600">
+                          <Image
+                            className="h-14 w-14 object-cover"
+                            src={testimonial.author.image}
+                            alt=""
+                            width={56}
+                            height={56}
+                          />
+                        </div>
+                      </figcaption>
+                    </figure>
+                  </li>
+                ))}
+              </ul>
+            </li>
+          ))}
+        </ul>
+      </Container>
+    </section>
+  )
+}
--- a/src/components/ThirdFeatures.jsx
+++ b/src/components/ThirdFeatures.jsx
@@ -0,0 +1,61 @@
+import Image from 'next/image'
+import React from 'react';
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+import backgroundImage from '@/images/background-call-to-action.jpg'
+import '@/styles/tailwind.css'
+
+const ThirdFeatures = () => {
+    return (
+      <div className="relative bg-white">
+        <div className="mx-auto max-w-7xl lg:grid lg:grid-cols-12 lg:gap-x-8 lg:px-8">
+          <div className="px-6 pb-24 pt-10 sm:pb-32 lg:col-span-7 lg:px-0 lg:pb-56 lg:pt-48 xl:col-span-6">
+            <div className="mx-auto max-w-2xl lg:mx-0">
+              <img
+                alt="Your Company"
+                src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
+                className="h-11"
+              />
+              <div className="hidden sm:mt-32 sm:flex lg:mt-16">
+                <div className="relative rounded-full px-3 py-1 text-sm leading-6 text-gray-500 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
+                  Anim aute id magna aliqua ad ad non deserunt sunt.{' '}
+                  <a href="#" className="whitespace-nowrap font-semibold text-indigo-600">
+                    <span aria-hidden="true" className="absolute inset-0" />
+                    Read more <span aria-hidden="true">&rarr;</span>
+                  </a>
+                </div>
+              </div>
+              <h1 className="mt-24 text-4xl font-bold tracking-tight text-gray-800 sm:mt-10 sm:text-6xl">
+                Data to enrich your online business
+              </h1>
+              <p className="mt-6 text-lg leading-8 text-gray-600">
+                Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet
+                fugiat veniam occaecat fugiat aliqua.
+              </p>
+              <div className="mt-10 flex items-center gap-x-6">
+                <a
+                  href="#"
+                  className="rounded-md bg-gold-800 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                >
+                  Get started
+                </a>
+                <a href="#" className="text-sm font-semibold leading-6 text-gray-800">
+                  Learn more <span aria-hidden="true">→</span>
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className="relative lg:col-span-5 lg:-mr-8 xl:absolute xl:inset-0 xl:left-1/2 xl:mr-0">
+            <img
+              alt=""
+              src="https://images.unsplash.com/photo-1498758536662-35b82cd15e29?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2102&q=80"
+              className="aspect-[3/2] w-full bg-gray-50 object-cover lg:absolute lg:inset-0 lg:aspect-auto lg:h-full"
+            />
+          </div>
+        </div>
+      </div>
+    )
+}
+
+
+export default ThirdFeatures;
--- a/src/components/Timeline.jsx
+++ b/src/components/Timeline.jsx
@@ -0,0 +1,138 @@
+/*
+  This example requires some changes to your config:
+  
+  ```
+  // tailwind.config.js
+  module.exports = {
+    // ...
+    plugins: [
+      // ...
+      require('@tailwindcss/aspect-ratio'),
+    ],
+  }
+  ```
+*/
+const features = [
+    {
+      name: 'Day 1: Luxor',
+      description:
+        "Welcome to Luxor, often referred to as the world's greatest open-air museum.Begin your journey by exploring the city's rich history and captivating landmarks.",
+        description2:
+        "Visit the magnificent Karnak Temple, one of the largest religious complexes in the world, and marvel at its towering columns and intricate hieroglyphs. Then, head to the Luxor Temple, a stunning example of ancient Egyptian architecture.",
+        description3:
+        "In the evening, enjoy a traditional Egyptian dinner on our Dahabiya, followed by a relaxing evening under the stars.",
+        imageSrc: '/images/luxor.jpg',
+    },
+    {
+        name: 'Day 2: Sailing to Esna',
+        description:
+          "Set sail on the serene waters of the Nile, as we journey towards the charming town of Esna.",
+          description2:
+          "As the dahabiya glides through the tranquil river, take in the breathtaking views of the lush landscapes and ancient monuments that line the banks. Enjoy a relaxing day on deck, with opportunities to participate in yoga and meditation sessions, or simply unwind with a good book from our library.",
+          description3:
+          "In the evening, dock at Esna and explore the local markets, where you can discover unique handicrafts and interact with friendly locals.",
+          imageSrc: 'images/esna.jpg',
+      },
+      {
+        name: 'Day 3: Crossing the Esna Lock',
+        description:
+          "Experience the fascinating process of crossing the Esna Lock, a marvel of engineering that allows vessels to navigate the varying water levels of the Nile.",
+          description2:
+          "Witness the skilled operation of the lock as the dahabiya is raised or lowered to continue its journey upstream. This unique experience offers a glimpse into the intricate workings of river navigation and provides an excellent opportunity for photography.",
+          description3:
+          "After crossing the lock, continue sailing towards Edfu, enjoying the serene ambiance and scenic vistas along the way.",
+          imageSrc: '/images/lock.jpg',
+      },
+      {
+        name: 'Day 4: Edfu',
+        description:
+          "Arrive in Edfu, home to one of Egypt's best-preserved temples dedicated to the falcon god Horus.",
+          description2:
+          "Explore the impressive Temple of Edfu, with its massive pylons, detailed reliefs, and captivating myths depicted on its walls. Discover the fascinating stories of ancient Egyptian deities and their significance in the culture and religion of the time.",
+          description3:
+          "After the temple visit, return to the dahabiya for a leisurely afternoon sail, with opportunities for relaxation and rejuvenation on board.",
+          imageSrc: '/images/edfu.jpg',
+      },
+      {
+        name: 'Day 5: Silsila',
+        description:
+          "Together we will visit the historic site of Gebel el-Silsila, known for its ancient sandstone quarries.",
+          description2:
+          "Explore the remnants of temples, shrines, and inscriptions that reveal the area's significance as a source of building materials for many of Egypt's monumental structures. Gain insight into the craftsmanship and artistry of the ancient Egyptians as you wander through this unique archaeological site.",
+          description3:
+          "In the evening, continue our journey along the Nile, soaking in the tranquil beauty of the river.",
+          imageSrc: '/images/silsila.jpg',
+      },
+      {
+        name: 'Day 6: Kom Ombo',
+        description:
+          "Our journey brings us to Kom Ombo, a unique temple dedicated to two gods: Sobek, the crocodile god, and Horus the Elder, the falcon-headed god.",
+          description2:
+          "Explore the symmetrical design of the temple, with its dual sanctuaries and fascinating reliefs depicting medical instruments, surgical scenes, and ancient calendars. Don't miss the nearby Crocodile Museum, where you can view mummified crocodiles and learn about the sacred role of these creatures in ancient Egyptian culture.",
+          description3:
+          "Return to the dahabiya for a relaxing evening as we sail towards Aswan.",
+          imageSrc: '/images/komombo.jpg',
+      },
+      {
+        name: 'Day 7: Aswan',
+        description:
+          "We will conclude our journey in the picturesque city of Aswan, known for its stunning landscapes and rich cultural heritage.",
+          description2:
+          "Visit the majestic Philae Temple, dedicated to the goddess Isis, and marvel at its beautiful island setting. Explore the bustling Aswan market, where you can shop for spices, jewelry, and local crafts. In the afternoon, take a peaceful felucca ride around Elephantine Island and enjoy the gentle breeze and scenic views.",
+          description3:
+          "As the day draws to a close, gather for a farewell dinner on board, celebrating the unforgettable experiences and memories created during the VEDA Retreat.",
+          imageSrc: '/images/aswan.jpg',
+      },
+
+  ]
+  
+  function classNames(...classes) {
+    return classes.filter(Boolean).join(' ')
+  }
+  
+  export default function Example() {
+    return (
+      <div className="bg-creme-600">
+        <div className="mx-auto max-w-2xl px-4 py-24 sm:px-6 sm:py-32 lg:max-w-7xl lg:px-8">
+          <div className="mx-auto max-w-3xl text-center">
+            <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">VEDA ITINERARY SAMPLE</h2>
+            <p className="mt-4 text-gray-500">
+            Experience the magic of the Nile with our thoughtfully crafted 5-day VEDA Retreat itinerary. This sample journey showcases the highlights of a typical retreat, offering a blend of cultural exploration, relaxation, and rejuvenation. Each day is designed to provide a unique and enriching experience, from exploring ancient temples and charming towns to enjoying serene river cruises and immersive wellness activities. Whether you're seeking adventure or tranquility, this itinerary gives you a glimpse into the unforgettable experiences that await on your VEDA Retreat.
+            </p>
+          </div>
+  
+          <div className="mt-16 space-y-16">
+            {features.map((feature, featureIdx) => (
+              <div
+                key={feature.name}
+                className="flex flex-col-reverse lg:grid lg:grid-cols-12 lg:items-center lg:gap-x-8"
+              >
+                <div
+                  className={classNames(
+                    featureIdx % 2 === 0 ? 'lg:col-start-1' : 'lg:col-start-8 xl:col-start-9',
+                    'mt-6 lg:col-span-5 lg:row-start-1 lg:mt-0 xl:col-span-4',
+                  )}
+                >
+                  <h3 className="text-lg font-medium text-gray-900">{feature.name}</h3>
+                  <p className="mt-2 text-sm text-gray-500">{feature.description}</p>
+                  <p className="mt-2 text-sm text-gray-500">{feature.description2}</p>
+                  <p className="mt-2 text-sm text-gray-500">{feature.description3}</p>
+                </div>
+                <div
+                  className={classNames(
+                    featureIdx % 2 === 0 ? 'lg:col-start-6 xl:col-start-5' : 'lg:col-start-1',
+                    'flex-auto lg:col-span-7 lg:row-start-1 xl:col-span-8',
+                  )}
+                >
+                  <div className="aspect-h-2 aspect-w-5 overflow-hidden rounded-lg bg-gray-100">
+                    <img alt={feature.imageAlt} src={feature.imageSrc} className="object-cover object-center" />
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    )
+  }
+  
--- a/src/components/Veda1.jsx
+++ b/src/components/Veda1.jsx
@@ -0,0 +1,214 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+  Radio,
+  RadioGroup,
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels,
+} from '@headlessui/react'
+import { StarIcon } from '@heroicons/react/20/solid'
+import { HeartIcon, MinusIcon, PlusIcon } from '@heroicons/react/24/outline'
+
+const product = {
+  name: 'VEDA I',
+  images: [
+    {
+      id: 1,
+      name: 'Veda',
+      src: '/images/veda10.jpg',
+      alt: 'Veda1',
+    },
+    {
+      id: 1,
+      name: 'Veda',
+      src: '/images/veda11.jpg',
+      alt: 'Veda1',
+    },
+    {
+      id: 1,
+      name: 'Veda',
+      src: '/images/veda12.jpg',
+      alt: 'Veda1',
+    },
+    {
+      id: 1,
+      name: 'Veda',
+      src: '/images/veda13.jpg',
+      alt: 'Veda1',
+    },
+    {
+      id: 1,
+      name: 'Veda',
+      src: '/images/veda14.jpg',
+      alt: 'Veda1',
+    },
+    {
+      id: 1,
+      name: 'Veda',
+      src: '/images/veda15.jpg',
+      alt: 'Veda1',
+    },
+    {
+      id: 1,
+      name: 'Veda',
+      src: '/images/veda17.jpg',
+      alt: 'Veda1',
+    },
+    {
+      id: 1,
+      name: 'Veda',
+      src: '/images/veda18.jpg',
+      alt: 'Veda1',
+    },
+    // More images...
+  ],
+  colors: [
+    { name: 'Washed Black', bgColor: 'bg-gray-700', selectedColor: 'ring-gray-700' },
+    { name: 'White', bgColor: 'bg-white', selectedColor: 'ring-gray-400' },
+    { name: 'Washed Gray', bgColor: 'bg-gray-500', selectedColor: 'ring-gray-500' },
+  ],
+  description: `
+    <p>This beautiful 50-meter dahabiya offers a peaceful organic platform to host your personalised cruise.</p>
+    <p>VEDA 1 accommodates up to 20 guests across 10 rooms with double beds that can be converted into singles, each featuring a private bathroom. Four of these rooms are suites with balconies.</p>
+    <p>The facility includes two air-conditioned meeting spaces for up to 50 people, an upper deck meeting room with a 360-degree panoramic view, and various relaxation areas suitable for workshops, yoga, or meditation. Additionally, there is a library with a collection of books on Egyptian history and awareness.</p>
+  `,
+  details: [
+    {
+      name: 'FEATURES',
+      items: [
+      '10 rooms: 6 standard rooms and 4 suites with balconies',
+      'Hosts up to 20 people',
+      'Private bathroom ensuites in each room',
+      'Two air-conditioned meeting spaces for up to 50 people',
+      'Upper deck meeting room with a 360-degree panoramic view',
+      'Relaxation areas suitable for workshops, yoga, or meditation',
+      'Library with a collection of books on Egyptian history and awareness',
+      ],
+    },
+    // More sections...
+  ],
+}
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export default function Example() {
+  const [selectedColor, setSelectedColor] = useState(product.colors[0])
+
+  return (
+    <div className="bg-creme-600">
+      <div className="mx-auto max-w-2xl px-4 py-12 sm:px-6 lg:max-w-7xl lg:px-8">
+        <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
+          {/* Image gallery */}
+          <TabGroup className="flex flex-col-reverse">
+            {/* Image selector */}
+            <div className="mx-auto mt-6 hidden w-full max-w-2xl sm:block lg:max-w-none">
+              <TabList className="grid grid-cols-4 gap-6">
+                {product.images.map((image) => (
+                  <Tab
+                    key={image.id}
+                    className="group relative flex h-24 cursor-pointer items-center justify-center rounded-md bg-white text-sm font-medium uppercase text-gray-900 hover:bg-gray-50 focus:outline-none focus:ring focus:ring-opacity-50 focus:ring-offset-4"
+                  >
+                    <span className="sr-only">{image.name}</span>
+                    <span className="absolute inset-0 overflow-hidden rounded-md">
+                      <img alt="" src={image.src} className="h-full w-full object-cover object-center" />
+                    </span>
+                    <span
+                      aria-hidden="true"
+                      className="pointer-events-none absolute inset-0 rounded-md ring-2 ring-transparent ring-offset-2 group-data-[selected]:ring-indigo-500"
+                    />
+                  </Tab>
+                ))}
+              </TabList>
+            </div>
+
+            <TabPanels className="aspect-h-1 aspect-w-1 w-full">
+              {product.images.map((image) => (
+                <TabPanel key={image.id}>
+                  <img
+                    alt={image.alt}
+                    src={image.src}
+                    className="h-full w-full object-cover object-center sm:rounded-lg"
+                  />
+                </TabPanel>
+              ))}
+            </TabPanels>
+          </TabGroup>
+
+          {/* Product info */}
+          <div className="mt-10 px-4 sm:mt-16 sm:px-0 lg:mt-0">
+            <h1 className="text-3xl font-bold tracking-tight text-gray-900">{product.name}</h1>
+
+            <div className="mt-3">
+              <h2 className="sr-only">Product information</h2>
+            </div>
+
+            <div className="mt-6">
+              <h3 className="sr-only">Description</h3>
+
+              <div
+                dangerouslySetInnerHTML={{ __html: product.description }}
+                className="space-y-6 text-base text-gray-700"
+              />
+            </div>
+
+            <section aria-labelledby="details-heading" className="mt-12">
+              <h2 id="details-heading" className="sr-only">
+                Additional details
+              </h2>
+
+              <div className="divide-y divide-white border-t">
+                {product.details.map((detail) => (
+                  <Disclosure key={detail.name} as="div">
+                    <h3>
+                      <DisclosureButton className="group relative flex w-full items-center justify-between py-6 text-left">
+                        <span className="text-sm font-medium text-gray-900 group-data-[open]:text-indigo-600">
+                          {detail.name}
+                        </span>
+                        <span className="ml-6 flex items-center">
+                          <PlusIcon
+                            aria-hidden="true"
+                            className="block h-6 w-6 text-gray-400 group-hover:text-gray-500 group-data-[open]:hidden"
+                          />
+                          <MinusIcon
+                            aria-hidden="true"
+                            className="hidden h-6 w-6 text-indigo-400 group-hover:text-indigo-500 group-data-[open]:block"
+                          />
+                        </span>
+                      </DisclosureButton>
+                    </h3>
+                    <DisclosurePanel className="prose prose-sm pb-6">
+                      <ul role="list">
+                        {detail.items.map((item) => (
+                          <li key={item}>{item}</li>
+                        ))}
+                      </ul>
+                    </DisclosurePanel>
+                  </Disclosure>
+                ))}
+              </div>
+              <form className="mt-6">
+              <div className="mt-10 flex">
+                <button
+                  type="submit"
+                  className="flex max-w-xs flex-1 items-center justify-center rounded-md border border-transparent bg-gold-800x-8 py-3 text-base font-medium text-white hover:bg-gold-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-50 sm:w-full"
+                >
+                  Book Now
+                </button>
+              </div>
+            </form>
+            </section>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/src/components/Veda2.jsx
+++ b/src/components/Veda2.jsx
@@ -0,0 +1,215 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels,
+} from '@headlessui/react'
+import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline'
+
+const product = {
+  name: 'VEDA II',
+  images: [
+    {
+      id: 1,
+      name: 'Veda 1',
+      src: '/images/veda20.jpg',
+      alt: 'Veda2 Veda 1',
+    },
+    {
+      id: 2,
+      name: 'Veda 2',
+      src: '/images/veda21.jpg',
+      alt: 'Veda2 Veda 2',
+    },
+    {
+      id: 3,
+      name: 'Veda 3',
+      src: '/images/veda22.jpg',
+      alt: 'Veda2 Veda 3',
+    },
+    {
+      id: 4,
+      name: 'Veda 4',
+      src: '/images/veda23.jpg',
+      alt: 'Veda2 Veda 4',
+    },
+    {
+      id: 5,
+      name: 'Veda 4',
+      src: '/images/veda24.jpg',
+      alt: 'Veda2 Veda 4',
+    },
+    {
+      id: 6,
+      name: 'Veda 4',
+      src: '/images/veda25.jpg',
+      alt: 'Veda2 Veda 4',
+    },
+    {
+      id: 7,
+      name: 'Veda 4',
+      src: '/images/veda26.jpg',
+      alt: 'Veda2 Veda 4',
+    },
+    {
+      id: 8,
+      name: 'Veda 4',
+      src: '/images/veda27.jpg',
+      alt: 'Veda2 Veda 4',
+    },
+  ],
+  colors: [
+    { name: 'Washed Black', bgColor: 'bg-gray-700', selectedColor: 'ring-gray-700' },
+    { name: 'White', bgColor: 'bg-white', selectedColor: 'ring-gray-400' },
+    { name: 'Washed Gray', bgColor: 'bg-gray-500', selectedColor: 'ring-gray-500' },
+  ],
+  description: `
+    <p>This elegant 45-meter dahabiya is perfect for hosting larger groups, healing retreats, company getaways, and more. It provides a comfortable and customizable experience for all guests on board.</p>
+    <p>VEDA II accommodates up to 20 guests in 10 rooms, each equipped with double beds that can be converted into singles. Every room features a private bathroom for added convenience and privacy. Among these rooms, two are suites with charming balconies.</p>
+    <p>VEDA II boasts a spacious and inviting upper deck, thoughtfully divided into multiple areas, including a sunbathing section, a Bedouin corner, and a dining area. The sun deck offers customizable space to suit your specific needs and preferences.</p>
+  `,
+  details: [
+    {
+      name: 'FEATURES',
+      items: [
+        '10 Rooms: 8 standard rooms and 2 suites with balconies',
+        'Hosts up to 20 people',
+        'Leather handle and tabs',
+        'Private bathroom ensuites in each room',
+        'Large, cozy upper deck',
+        'Designated outdoor areas for sunbathing, relaxation, and dining',
+        'Customizable sun deck space to accommodate unique requirements',
+      ],
+    },
+    // More sections...
+  ],
+}
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export default function Example() {
+  const [selectedColor, setSelectedColor] = useState(product.colors[0])
+
+  return (
+    <div className="bg-creme-600">
+      <div className="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
+        <div className="lg:grid lg:grid-cols-2 lg:gap-x-8">
+          {/* Image gallery */}
+          <TabGroup className="lg:order-last">
+            <TabPanels className="aspect-h-1 aspect-w-1 w-full">
+              {product.images.map((image) => (
+                <TabPanel key={image.id}>
+                  <img
+                    alt={image.alt}
+                    src={image.src}
+                    className="h-full w-full object-cover object-center sm:rounded-lg"
+                  />
+                </TabPanel>
+              ))}
+            </TabPanels>
+
+            {/* Image selector */}
+            <div className="mx-auto mt-6 w-full max-w-2xl sm:block lg:max-w-none">
+              <TabList className="grid grid-cols-4 gap-6">
+                {product.images.map((image) => (
+                  <Tab
+                    key={image.id}
+                    className={({ selected }) =>
+                      classNames(
+                        'group relative flex h-24 cursor-pointer items-center justify-center rounded-md bg-white text-sm font-medium uppercase text-gray-900 hover:bg-gray-50 focus:outline-none focus:ring focus:ring-opacity-50 focus:ring-offset-4',
+                        selected ? 'ring-indigo-500' : 'ring-transparent'
+                      )
+                    }
+                  >
+                    <span className="sr-only">{image.name}</span>
+                    <span className="absolute inset-0 overflow-hidden rounded-md">
+                      <img alt={image.alt} src={image.src} className="h-full w-full object-cover object-center" />
+                    </span>
+                    <span
+                      aria-hidden="true"
+                      className="pointer-events-none absolute inset-0 rounded-md ring-2 ring-offset-2 group-focus:ring-indigo-500"
+                    />
+                  </Tab>
+                ))}
+              </TabList>
+            </div>
+          </TabGroup>
+
+          {/* Product info */}
+          <div className="mt-10 px-4 sm:mt-16 sm:px-0 lg:mt-0">
+            <h1 className="text-3xl font-bold tracking-tight text-gray-900">{product.name}</h1>
+
+            <div className="mt-3">
+              <h2 className="sr-only">Product information</h2>
+            </div>
+
+            <div className="mt-6">
+              <h3 className="sr-only">Description</h3>
+
+              <div
+                dangerouslySetInnerHTML={{ __html: product.description }}
+                className="space-y-6 text-base text-gray-700"
+              />
+            </div>
+
+            <section aria-labelledby="details-heading" className="mt-12">
+              <h2 id="details-heading" className="sr-only">
+                Additional details
+              </h2>
+
+              <div className="divide-y divide-gray-200 border-t">
+                {product.details.map((detail) => (
+                  <Disclosure key={detail.name} as="div">
+                    <h3>
+                      <DisclosureButton className="group relative flex w-full items-center justify-between py-6 text-left">
+                        <span className="text-sm font-medium text-gray-900 group-open:text-indigo-600">
+                          {detail.name}
+                        </span>
+                        <span className="ml-6 flex items-center">
+                          <PlusIcon
+                            aria-hidden="true"
+                            className="block h-6 w-6 text-gray-400 group-hover:text-gray-500 group-open:hidden"
+                          />
+                          <MinusIcon
+                            aria-hidden="true"
+                            className="hidden h-6 w-6 text-indigo-400 group-hover:text-indigo-500 group-open:block"
+                          />
+                        </span>
+                      </DisclosureButton>
+                    </h3>
+                    <DisclosurePanel className="prose prose-sm pb-6">
+                      <ul role="list">
+                        {detail.items.map((item) => (
+                          <li key={item}>{item}</li>
+                        ))}
+                      </ul>
+                    </DisclosurePanel>
+                  </Disclosure>
+                ))}
+              </div>
+              <form className="mt-6">
+                <div className="mt-10 flex">
+                  <button
+                    type="submit"
+                    className="flex max-w-xs flex-1 items-center justify-center rounded-md border border-transparent bg-gold-800 px-8 py-3 text-base font-medium text-white hover:bg-gold-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-50 sm:w-full"
+                  >
+                    Book Now
+                  </button>
+                </div>
+              </form>
+            </section>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/src/components/Veda3.jsx
+++ b/src/components/Veda3.jsx
@@ -0,0 +1,211 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+  Radio,
+  RadioGroup,
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels,
+} from '@headlessui/react'
+import { StarIcon } from '@heroicons/react/20/solid'
+import { HeartIcon, MinusIcon, PlusIcon } from '@heroicons/react/24/outline'
+
+const product = {
+  name: 'VEDA III',
+  images: [
+    {
+      id: 1,
+      name: 'Veda',
+      src: '/images/veda31.jpg',
+      alt: 'Veda1',
+    },
+    {
+      id: 1,
+      name: 'Veda',
+      src: '/images/veda32.jpg',
+      alt: 'Veda1',
+    },
+    {
+      id: 1,
+      name: 'Veda',
+      src: '/images/veda33.jpg',
+      alt: 'Veda1',
+    },
+    {
+      id: 1,
+      name: 'Veda',
+      src: '/images/veda34.jpg',
+      alt: 'Veda1',
+    },
+    {
+      id: 1,
+      name: 'Veda',
+      src: '/images/veda35.jpg',
+      alt: 'Veda1',
+    },
+    {
+      id: 1,
+      name: 'Veda',
+      src: '/images/veda36.jpg',
+      alt: 'Veda1',
+    },
+    {
+      id: 1,
+      name: 'Veda',
+      src: '/images/veda37.jpg',
+      alt: 'Veda1',
+    },
+    {
+      id: 1,
+      name: 'Veda',
+      src: '/images/veda38.jpg',
+      alt: 'Veda1',
+    },
+    // More images...
+  ],
+  colors: [
+    { name: 'Washed Black', bgColor: 'bg-gray-700', selectedColor: 'ring-gray-700' },
+    { name: 'White', bgColor: 'bg-white', selectedColor: 'ring-gray-400' },
+    { name: 'Washed Gray', bgColor: 'bg-gray-500', selectedColor: 'ring-gray-500' },
+  ],
+  description: `
+    <p>VEDA III is a cozy 18-meter dahabiya that offers a serene floating home experience, perfect for smaller groups seeking tranquility and comfort on the Nile.</p>
+    <p>VEDA III accommodates up to 10 guests across 5 rooms. The accommodations include 2 rooms with double beds and 3 rooms with two single beds, providing flexible sleeping arrangements. Each room is equipped with a private bathroom for convenience and privacy.</p>
+    <p>Guests can enjoy breathtaking views of the Nile from the cozy upper deck, designed for relaxation and enjoyment. The upper deck provides an intimate space to unwind and take in the river's beauty.</p>
+  `,
+  details: [
+    {
+      name: 'FEATURES',
+      items: [
+      '5 Rooms: 2 rooms with double beds and 3 rooms with two single beds',
+      'Hosts up to 10 people',
+      'Private bathroom ensuites in each room',
+      'Intimate upper deck with stunning Nile views',
+      ],
+    },
+    // More sections...
+  ],
+}
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export default function Example() {
+  const [selectedColor, setSelectedColor] = useState(product.colors[0])
+
+  return (
+    <div className="bg-creme-600">
+      <div className="mx-auto max-w-2xl px-4 py-12 sm:px-6 lg:max-w-7xl lg:px-8">
+        <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
+          {/* Image gallery */}
+          <TabGroup className="flex flex-col-reverse">
+            {/* Image selector */}
+            <div className="mx-auto mt-6 hidden w-full max-w-2xl sm:block lg:max-w-none">
+              <TabList className="grid grid-cols-4 gap-6">
+                {product.images.map((image) => (
+                  <Tab
+                    key={image.id}
+                    className="group relative flex h-24 cursor-pointer items-center justify-center rounded-md bg-white text-sm font-medium uppercase text-gray-900 hover:bg-gray-50 focus:outline-none focus:ring focus:ring-opacity-50 focus:ring-offset-4"
+                  >
+                    <span className="sr-only">{image.name}</span>
+                    <span className="absolute inset-0 overflow-hidden rounded-md">
+                      <img alt="" src={image.src} className="h-full w-full object-cover object-center" />
+                    </span>
+                    <span
+                      aria-hidden="true"
+                      className="pointer-events-none absolute inset-0 rounded-md ring-2 ring-transparent ring-offset-2 group-data-[selected]:ring-indigo-500"
+                    />
+                  </Tab>
+                ))}
+              </TabList>
+            </div>
+
+            <TabPanels className="aspect-h-1 aspect-w-1 w-full">
+              {product.images.map((image) => (
+                <TabPanel key={image.id}>
+                  <img
+                    alt={image.alt}
+                    src={image.src}
+                    className="h-full w-full object-cover object-center sm:rounded-lg"
+                  />
+                </TabPanel>
+              ))}
+            </TabPanels>
+          </TabGroup>
+
+          {/* Product info */}
+          <div className="mt-10 px-4 sm:mt-16 sm:px-0 lg:mt-0">
+            <h1 className="text-3xl font-bold tracking-tight text-gray-900">{product.name}</h1>
+
+            <div className="mt-3">
+              <h2 className="sr-only">Product information</h2>
+            </div>
+
+            <div className="mt-6">
+              <h3 className="sr-only">Description</h3>
+
+              <div
+                dangerouslySetInnerHTML={{ __html: product.description }}
+                className="space-y-6 text-base text-gray-700"
+              />
+            </div>
+
+            <section aria-labelledby="details-heading" className="mt-12">
+              <h2 id="details-heading" className="sr-only">
+                Additional details
+              </h2>
+
+              <div className="divide-y divide-white border-t">
+                {product.details.map((detail) => (
+                  <Disclosure key={detail.name} as="div">
+                    <h3>
+                      <DisclosureButton className="group relative flex w-full items-center justify-between py-6 text-left">
+                        <span className="text-sm font-medium text-gray-900 group-data-[open]:text-indigo-600">
+                          {detail.name}
+                        </span>
+                        <span className="ml-6 flex items-center">
+                          <PlusIcon
+                            aria-hidden="true"
+                            className="block h-6 w-6 text-gray-400 group-hover:text-gray-500 group-data-[open]:hidden"
+                          />
+                          <MinusIcon
+                            aria-hidden="true"
+                            className="hidden h-6 w-6 text-indigo-400 group-hover:text-indigo-500 group-data-[open]:block"
+                          />
+                        </span>
+                      </DisclosureButton>
+                    </h3>
+                    <DisclosurePanel className="prose prose-sm pb-6">
+                      <ul role="list">
+                        {detail.items.map((item) => (
+                          <li key={item}>{item}</li>
+                        ))}
+                      </ul>
+                    </DisclosurePanel>
+                  </Disclosure>
+                ))}
+              </div>
+              <form className="mt-6">
+              <div className="mt-10 flex">
+                <button
+                  type="submit"
+                  className="flex max-w-xs flex-1 items-center justify-center rounded-md border border-transparent bg-gold-800 px-8 py-3 text-base font-medium text-white hover:bg-gold-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-50 sm:w-full"
+                >
+                  Book Now
+                </button>
+              </div>
+            </form>
+            </section>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/src/components/Veda4.jsx
+++ b/src/components/Veda4.jsx
@@ -0,0 +1,215 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels,
+} from '@headlessui/react'
+import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline'
+
+const product = {
+  name: 'VEDA IV',
+  images: [
+    {
+      id: 1,
+      name: 'Veda 1',
+      src: '/images/veda41.jpg',
+      alt: 'Veda2 Veda 1',
+    },
+    {
+      id: 2,
+      name: 'Veda 2',
+      src: '/images/veda42.jpg',
+      alt: 'Veda2 Veda 2',
+    },
+    {
+      id: 3,
+      name: 'Veda 3',
+      src: '/images/veda43.jpg',
+      alt: 'Veda2 Veda 3',
+    },
+    {
+      id: 4,
+      name: 'Veda 4',
+      src: '/images/veda44.jpg',
+      alt: 'Veda2 Veda 4',
+    },
+    {
+      id: 5,
+      name: 'Veda 4',
+      src: '/images/veda45.jpg',
+      alt: 'Veda2 Veda 4',
+    },
+    {
+      id: 6,
+      name: 'Veda 4',
+      src: '/images/veda46.jpg',
+      alt: 'Veda2 Veda 4',
+    },
+    {
+      id: 7,
+      name: 'Veda 4',
+      src: '/images/veda47.jpg',
+      alt: 'Veda2 Veda 4',
+    },
+    {
+      id: 8,
+      name: 'Veda 4',
+      src: '/images/veda48.jpg',
+      alt: 'Veda2 Veda 4',
+    },
+  ],
+  colors: [
+    { name: 'Washed Black', bgColor: 'bg-gray-700', selectedColor: 'ring-gray-700' },
+    { name: 'White', bgColor: 'bg-white', selectedColor: 'ring-gray-400' },
+    { name: 'Washed Gray', bgColor: 'bg-gray-500', selectedColor: 'ring-gray-500' },
+  ],
+  description: `
+    <p>This stunning 55-meter dahabiya offers a tranquil and organic platform for hosting personalized cruises, providing an unforgettable experience on the Nile.</p>
+    <p>VEDA IV accommodates up to 28 guests in 14 elegantly designed rooms. Each room is equipped with double beds that can be converted into singles, ensuring flexibility and comfort. All rooms feature private bathrooms. Among these, 4 rooms are luxurious suites with private balconies, offering spectacular views.</p>
+    <p>VEDA IV features two air-conditioned meeting spaces that can accommodate up to 50 people, ideal for gatherings and events. The upper deck meeting room offers a breathtaking 360-degree panoramic view, perfect for meetings or leisure. There are multiple areas designed for relaxation and suitable for workshops, yoga, or meditation, providing a serene environment for all guests. Additionally, a well-stocked library is available, featuring a curated collection of books on Egyptian history and awareness, offering guests a quiet place to read and learn.</p>
+  `,
+  details: [
+    {
+      name: 'FEATURES',
+      items: [
+        '14 Rooms: 10 standard rooms and 4 suites with balconies',
+        'Hosts up to 28 people',
+        'Private bathroom ensuites in each room',
+        'Two air-conditioned meeting spaces for up to 50 people',
+        'Upper deck meeting room with a 360-degree panoramic view',
+        'Multiple relaxation areas for workshops, yoga, or meditation',
+        'Library with a collection of Egyptian history and awareness books',
+      ],
+    },
+    // More sections...
+  ],
+}
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export default function Example() {
+  const [selectedColor, setSelectedColor] = useState(product.colors[0])
+
+  return (
+    <div className="bg-creme-600">
+      <div className="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
+        <div className="lg:grid lg:grid-cols-2 lg:gap-x-8">
+          {/* Image gallery */}
+          <TabGroup className="lg:order-last">
+            <TabPanels className="aspect-h-1 aspect-w-1 w-full">
+              {product.images.map((image) => (
+                <TabPanel key={image.id}>
+                  <img
+                    alt={image.alt}
+                    src={image.src}
+                    className="h-full w-full object-cover object-center sm:rounded-lg"
+                  />
+                </TabPanel>
+              ))}
+            </TabPanels>
+
+            {/* Image selector */}
+            <div className="mx-auto mt-6 w-full max-w-2xl sm:block lg:max-w-none">
+              <TabList className="grid grid-cols-4 gap-6">
+                {product.images.map((image) => (
+                  <Tab
+                    key={image.id}
+                    className={({ selected }) =>
+                      classNames(
+                        'group relative flex h-24 cursor-pointer items-center justify-center rounded-md bg-white text-sm font-medium uppercase text-gray-900 hover:bg-gray-50 focus:outline-none focus:ring focus:ring-opacity-50 focus:ring-offset-4',
+                        selected ? 'ring-indigo-500' : 'ring-transparent'
+                      )
+                    }
+                  >
+                    <span className="sr-only">{image.name}</span>
+                    <span className="absolute inset-0 overflow-hidden rounded-md">
+                      <img alt={image.alt} src={image.src} className="h-full w-full object-cover object-center" />
+                    </span>
+                    <span
+                      aria-hidden="true"
+                      className="pointer-events-none absolute inset-0 rounded-md ring-2 ring-offset-2 group-focus:ring-indigo-500"
+                    />
+                  </Tab>
+                ))}
+              </TabList>
+            </div>
+          </TabGroup>
+
+          {/* Product info */}
+          <div className="mt-10 px-4 sm:mt-16 sm:px-0 lg:mt-0">
+            <h1 className="text-3xl font-bold tracking-tight text-gray-900">{product.name}</h1>
+
+            <div className="mt-3">
+              <h2 className="sr-only">Product information</h2>
+            </div>
+
+            <div className="mt-6">
+              <h3 className="sr-only">Description</h3>
+
+              <div
+                dangerouslySetInnerHTML={{ __html: product.description }}
+                className="space-y-6 text-base text-gray-700"
+              />
+            </div>
+
+            <section aria-labelledby="details-heading" className="mt-12">
+              <h2 id="details-heading" className="sr-only">
+                Additional details
+              </h2>
+
+              <div className="divide-y divide-gray-200 border-t">
+                {product.details.map((detail) => (
+                  <Disclosure key={detail.name} as="div">
+                    <h3>
+                      <DisclosureButton className="group relative flex w-full items-center justify-between py-6 text-left">
+                        <span className="text-sm font-medium text-gray-900 group-open:text-indigo-600">
+                          {detail.name}
+                        </span>
+                        <span className="ml-6 flex items-center">
+                          <PlusIcon
+                            aria-hidden="true"
+                            className="block h-6 w-6 text-gray-400 group-hover:text-gray-500 group-open:hidden"
+                          />
+                          <MinusIcon
+                            aria-hidden="true"
+                            className="hidden h-6 w-6 text-indigo-400 group-hover:text-indigo-500 group-open:block"
+                          />
+                        </span>
+                      </DisclosureButton>
+                    </h3>
+                    <DisclosurePanel className="prose prose-sm pb-6">
+                      <ul role="list">
+                        {detail.items.map((item) => (
+                          <li key={item}>{item}</li>
+                        ))}
+                      </ul>
+                    </DisclosurePanel>
+                  </Disclosure>
+                ))}
+              </div>
+              <form className="mt-6">
+                <div className="mt-10 flex">
+                  <button
+                    type="submit"
+                    className="flex max-w-xs flex-1 items-center justify-center rounded-md border border-transparent bg-gold-800 px-8 py-3 text-base font-medium text-white hover:bg-gold-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-50 sm:w-full"
+                  >
+                    Book Now
+                  </button>
+                </div>
+              </form>
+            </section>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/src/components/about.jsx
+++ b/src/components/about.jsx
@@ -0,0 +1,30 @@
+<div className="lg:py-20 py-10 lg:mt-20 mt-20">
+      <ul
+          role="list"
+          className="mt-8 flex items-center justify-center gap-x-8 sm:flex-col sm:gap-x-0 sm:gap-y-10 xl:flex-row xl:gap-x-12 xl:gap-y-0"
+        >
+          {[
+            [
+              { name: 'veda', logo: logoVeda },
+            ],
+          ].map((group, groupIndex) => (
+            <li key={groupIndex}>
+              <ul
+                role="list"
+                className="flex flex-col items-center gap-y-8 sm:flex-row sm:gap-x-12 sm:gap-y-0"
+              >
+                {group.map((company) => (
+                  <li key={company.name} className="flex">
+                    <Image src={company.logo} alt={company.name} unoptimized />
+                  </li>
+                ))}
+              </ul>
+            </li>
+          ))}
+        </ul>
+        <p className="font-display text-lg mx-auto justify-center text-slate-900 pt-6 max-w-2xl">
+        VEDA provides an unparalleled cruise experience on the Nile, blending authenticity with luxury. Enjoy private journeys featuring organic cuisine, eco-friendly energy solutions, and a dedicated, warm-hearted crew. 
+        </p>
+        <p className="font-display text-gold-800 italic text-xl mx-auto justify-center text-slate-900 pt-4 max-w-4xl">Discover a cruise like no other with us on the Nile.
+        </p>
+      </div>
--- a/src/components/daha2.jsx
+++ b/src/components/daha2.jsx
@@ -0,0 +1,68 @@
+import { Container } from '@/components/Container';
+import veda1 from '@/images/veda1.jpg';
+import veda2 from '@/images/veda2.jpg';
+import veda3 from '@/images/veda3.jpg';
+import veda4 from '@/images/veda4.jpg';
+
+const categories = [
+  {
+    name: 'VEDA I',
+    href: '#',
+    image: '/images/veda1.jpg',
+    imageAlt: 'veda1',
+    description: 'The ideal retreat for space and privacy, perfect for intimate gatherings.',
+  },
+  {
+    name: 'VEDA II',
+    href: '#',
+    image: '/images/veda2.jpg',
+    imageAlt: 'veda2',
+    description: 'The perfect blend of spaciousness and privacy, great for larger groups seeking comfort.',
+  },
+  {
+    name: 'VEDA III',
+    href: '#',
+    image: '/images/veda3.jpg',
+    imageAlt: 'veda3',
+    description: ' An ideal choice for those valuing privacy and intimacy in a cozy setting.',
+  },
+  {
+    name: 'VEDA IV',
+    href: '#',
+    image: '/images/veda4.jpg',
+    imageAlt: 'veda4.',
+    description: 'Spacious and private, this option accommodates larger gatherings with ease.',
+  },
+]
+
+export default function Example() {
+  return (
+    <div className="bg-creme-600">
+      <div className="mx-auto max-w-xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
+        <h2 className="text-2xl font-bold tracking-tight text-gray-900">DAHABIYAS</h2>
+        <p className="mt-4 text-base text-gray-500">
+        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">
+          {categories.map((category) => (
+            <a key={category.name} href={category.href} className="group block">
+              <div
+                aria-hidden="true"
+                className="aspect-h-2 aspect-w-3 overflow-hidden rounded-sm lg:aspect-h-9 lg:aspect-w-16 group-hover:opacity-75"
+              >
+                <img
+                  alt={category.imageAlt}
+                  src={category.image}
+                  className="h-full w-full object-cover object-center"
+                />
+              </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>
+            </a>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}