ok rm gitignore

2025-08-25 11:24:16 +02:00
parent ed0c7e52cc
commit 25920b5c52
160 changed files with 5093 additions and 1 deletions
--- a/public/images/components/Activities.jsx
+++ b/public/images/components/Activities.jsx
@@ -0,0 +1,73 @@
+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-xl/5 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/public/images/components/Boat.jsx
+++ b/public/images/components/Boat.jsx
@@ -0,0 +1,196 @@
+'use client'
+
+import * as Headless from '@headlessui/react'
+import { ArrowLongRightIcon } from '@heroicons/react/20/solid'
+import { clsx } from 'clsx'
+import {
+  motion,
+  useMotionValueEvent,
+  useScroll,
+  useSpring,
+} from 'framer-motion'
+import { useCallback, useLayoutEffect, useRef, useState } from 'react'
+import useMeasure from 'react-use-measure'
+import { Container } from './Container'
+import { Link } from './link'
+import { Heading, Subheading } from './text'
+
+const testimonials = [
+  {
+    img: '/images/veda1.jpg',
+    name: '0 - 6 Years Old',
+    title: 'From birth to age 6, we offer ECD programs that change lives forever.',
+    subtitle: 'A beautiful 50-meter dahabiya offering a tranquil and organic platform for personalized cruises.',
+    quote: 'VEDA 1',
+    href: '/phases/phase1',
+  },
+  {
+    img: '/images/veda2.jpg',
+    name: '6 - 15 Years Old',
+    title: 'Unlock the Potential of Youth with transformational learning experiences',
+    subtitle: 'An elegant 45-meter dahabiya, ideal for hosting larger groups, healing retreats, company getaways, and more.',
+    quote: 'VEDA 2',
+    href: '/phases/phase2',
+  },
+  {
+    img: '/images/veda3.jpg',
+    name: '15 - 25 Years Old',
+    title: 'Skills that Earn & Regenerate Vocational paths that equip young people to live with purpose.',
+    subtitle: 'A cozy 18-meter dahabiya offering a serene floating home, perfect for private groups seeking tranquility and comfort on the Nile.',
+    quote: 'VEDA 3',
+    href: '/phases/phase3',
+  },
+  {
+    img: '/images/veda4.jpg',
+    name: 'All Ages',
+    title: 'A unique portfolio of impact proven Community-led solutions worth implementing',
+    subtitle: 'A spaciou 55-meter dahabeya offering a serene retreat, perfect for bigger groups seeking tranquility and comfort on the Nile.',
+    quote: 'VEDA 4',
+    href: '/phases/phase4',
+  },
+]
+
+function TestimonialCard({
+  subtitle,
+  name,
+  title,
+  img,
+  href,
+  children,
+  bounds,
+  scrollX,
+  ...props
+}) {
+  let ref = useRef(null)
+
+  let computeOpacity = useCallback(() => {
+    let element = ref.current
+    if (!element || bounds.width === 0) return 1
+
+    let rect = element.getBoundingClientRect()
+
+    if (rect.left < bounds.left) {
+      let diff = bounds.left - rect.left
+      let percent = diff / rect.width
+      return Math.max(0.5, 1 - percent)
+    } else if (rect.right > bounds.right) {
+      let diff = rect.right - bounds.right
+      let percent = diff / rect.width
+      return Math.max(0.5, 1 - percent)
+    } else {
+      return 1
+    }
+  }, [ref, bounds.width, bounds.left, bounds.right])
+
+  let opacity = useSpring(computeOpacity(), {
+    stiffness: 154,
+    damping: 23,
+  })
+
+  useLayoutEffect(() => {
+    opacity.set(computeOpacity())
+  }, [computeOpacity, opacity])
+
+  useMotionValueEvent(scrollX, 'change', () => {
+    opacity.set(computeOpacity())
+  })
+
+  return (
+    <motion.div
+      ref={ref}
+      style={{ opacity }}
+      {...props}
+      className="w-72 shrink-0 snap-start scroll-ml-(--scroll-padding) bg-[#fffefa] rounded-3xl shadow-lg overflow-hidden sm:w-80 lg:w-96"
+    >
+      {/* Image Section */}
+      <div className="relative aspect-square overflow-hidden">
+        <img
+          alt=""
+          src={img}
+          className="w-full h-full object-cover"
+        />
+      </div>
+      
+      {/* Content Section Below Image */}
+      <div className="p-6">
+        <blockquote>
+          <p className="text-2xl font-bold text-darkgr lg:text-3xl">
+            {children}
+          </p>
+        </blockquote>
+        
+        <p className="mt-2 lg:text-base text-sm text-gray-600 leading-6">
+          {subtitle}
+        </p>
+        
+        <Link
+          href={href}
+          className="mt-2 mb-2 inline-flex items-center gap-2 text-sm font-semibold text-gold-700 hover:text-gold-700"
+        >
+          Learn More
+          <ArrowLongRightIcon className="h-4 w-4" />
+        </Link>
+      </div>
+    </motion.div>
+  )
+}
+
+export function Boat() {
+  let scrollRef = useRef(null)
+  let { scrollX } = useScroll({ container: scrollRef })
+  let [setReferenceWindowRef, bounds] = useMeasure()
+  let [activeIndex, setActiveIndex] = useState(0)
+
+  useMotionValueEvent(scrollX, 'change', (x) => {
+    if (scrollRef.current && scrollRef.current.children[0]) {
+      setActiveIndex(Math.floor(x / scrollRef.current.children[0].clientWidth))
+    }
+  })
+
+  function scrollTo(index) {
+    let gap = 32
+    let width = scrollRef.current.children[0].offsetWidth
+    scrollRef.current.scrollTo({ left: (width + gap) * index })
+  }
+
+  return (
+    <div className="pt-16 lg:pt-24 pb-12">
+      <Container>
+        <div ref={setReferenceWindowRef}>
+          <h2 className="font-display mt-2 text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
+            Dahabiyas
+          </h2>
+          <p className="mt-4 max-w-5xl text-xl/5 font-medium tracking-[-0.045em] lg:tracking-[-0.02em] leading-[1.3] lg:leading-[1.4] lg:text-2xl text-darkgr">
+            Discover peaceful platforms where every detail ensures a truly memorable stay. Our fleet of traditional dahabiyas combines authentic Nile heritage with modern comfort, offering intimate sailing experiences that connect you with Egypt's timeless river culture. 
+          </p>
+        </div>
+      </Container>
+      <div
+        ref={scrollRef}
+        className={clsx([
+          'mt-16 flex gap-8 pl-6 pr-6 lg:pl-8 lg:ml-12 ml-4',
+          '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+          'snap-x snap-mandatory overflow-x-scroll overscroll-x-contain scroll-smooth',
+          'pb-8',
+        ])}
+      >
+        {testimonials.map(({ img, name, title, quote, href, subtitle }, testimonialIndex) => (
+          <TestimonialCard
+            key={testimonialIndex}
+            subtitle={subtitle}
+            name={name}
+            title={title}
+            href={href}
+            img={img}
+            bounds={bounds}
+            scrollX={scrollX}
+            onClick={() => scrollTo(testimonialIndex)}
+          >
+            {quote}
+          </TestimonialCard>
+        ))}
+        <div className="w-8 shrink-0" />
+      </div>
+    </div>
+  )
+}
--- a/public/images/components/Boats.jsx
+++ b/public/images/components/Boats.jsx
@@ -0,0 +1,96 @@
+import { useId } from 'react';
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react';
+import clsx from 'clsx';
+
+import { Container } from '@/components/Container';
+
+const people = [
+    {
+        name: 'VEDA I',
+        role: 'The ideal retreat for luxury and privacy, perfect for intimate gatherings.',
+        image: '/images/dahabiyas/veda1.jpg',
+        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: '/images/dahabiyas/veda2.jpg',
+        bio: [
+            '8 rooms & 2 suites with balconies.',
+            'Hosts up to 20 people.',
+            'Private bathroom ensuites.'
+        ],
+        xUrl: '#',
+        linkedinUrl: '#',
+    },
+    {
+        name: 'VEDA III',
+        role: 'Senior Developer',
+        image: '/images/dahabiyas/veda3.jpg',
+        bio: [
+            '5 rooms with balconies.',
+            'Hosts up to 10 people.',
+            'Private bathroom ensuites.'
+        ],
+        xUrl: '#',
+        linkedinUrl: '#',
+    },
+    {
+        name: 'VEDA IV',
+        role: 'Senior Developer',
+        image: '/images/dahabiyas/veda4.jpg',
+        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">
+                                <img
+                                    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/public/images/components/Button.jsx
+++ b/public/images/components/Button.jsx
@@ -0,0 +1,55 @@
+import Link from 'next/link'
+import clsx from 'clsx'
+
+const baseStyles = {
+  solid:
+    'group inline-flex items-center justify-center rounded-xl py-1.5 px-3.5 lg:py-2 lg:px-4 text-xs lg:text-sm font-light focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2',
+  solidNoRounded:
+    'group inline-flex items-center justify-center py-1.5 px-3.5 lg:py-2 lg:px-4 text-xs lg:text-sm font-light focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2',
+  outline:
+    'group inline-flex ring-1 items-center justify-center rounded-xl py-1.5 px-3.5 lg:py-2 lg:px-4 text-xs lg:text-sm font-light 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-[#28602C] text-white hover:text-slate-100 hover:bg-[#245527] active:bg-[#1e4a21] active:text-slate-100 focus-visible:outline-[#28602C]',
+    olive: 'bg-primary-olive text-white hover:bg-secondary-gold hover:text-text-dark active:bg-secondary-gold active:text-text-dark focus-visible:outline-primary-olive',
+    terracotta: 'bg-primary-terracotta text-white hover:bg-primary-olive hover:text-white active:bg-primary-olive active:text-white focus-visible:outline-primary-terracotta',
+    white:
+      'bg-white text-slate-100 hover:bg-gold-50 active:bg-gold-200 active:text-slate-100 focus-visible:outline-white',
+  },
+  solidNoRounded: {
+    bookNow: 'bg-darkgr-900 text-white hover:bg-darkgr-800 active:bg-darkgr-700 focus-visible:outline-darkgr-900',
+  },
+  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]
+        : props.variant === 'solidNoRounded'
+          ? variantStyles.solidNoRounded[props.color]
+          : undefined,
+    className,
+  )
+
+  return typeof props.href === 'undefined' ? (
+    <button className={className} {...props} />
+  ) : (
+    <Link className={className} {...props} />
+  )
+}
--- a/public/images/components/CNNVIDEO.jsx
+++ b/public/images/components/CNNVIDEO.jsx
@@ -0,0 +1,32 @@
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+import React from 'react'
+
+
+const CnnVideo = () => {
+    return (
+      <Container>
+        <div className="mx-auto max-w-4xl md:text-center">
+          <h2 className="font-display text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
+          VEDA ON CNN 
+          </h2>
+          <p className="mb-6 sm:mb-10 mt-4 text-xl/5 font-medium tracking-[-0.045em] lg:tracking-[-0.02em] leading-[1.3] lg:leading-[1.4] lg:text-2xl text-darkgr">
+          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">
+        <iframe
+          src="https://player.vimeo.com/video/371621672?loop=1&muted=1"
+          width="100%"
+          height="300"
+          frameBorder="0"
+          allow="autoplay; fullscreen; picture-in-picture"
+          allowFullScreen
+          className="rounded-lg w-full max-w-6xl mx-auto sm:h-[400px] lg:h-[600px]"
+        ></iframe>
+      </div>
+        </Container>
+    );
+  };
+  
+  export default CnnVideo;
--- a/public/images/components/CallToAction.jsx
+++ b/public/images/components/CallToAction.jsx
@@ -0,0 +1,37 @@
+
+
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+import { Logo } from '@/components/Logo'
+  
+
+export function CallToAction() {
+  return (
+    <section
+      id="about"
+      className="relative overflow-hidden bg-bg-stone py-12"
+    >
+      <img
+        className="absolute left-1/2 top-1/2 max-w-none -translate-x-1/2 -translate-y-1/2"
+        src="./images/daha1.jpg"
+        alt=""
+        width={2347}
+        height={1244}
+       
+      />
+      <Container className="relative">
+        <div className="mx-auto max-w-3xl text-center">
+        <div className="flex items-center justify-center">
+          <Logo className="h-18 w-auto mt-6" />
+        </div>
+          <h2 className="font-display lg:text-3xl text-xl tracking-tight text-white pt-4 lg:pt-6">
+          VEDA provides an unparalleled cruise experience on the Nile, blending authenticity with sophistication. Enjoy private journeys featuring organic cuisine, hollistic activities, and a dedicated, warm-hearted crew. 
+          </h2>
+          <p className="mt-4 text-xl lg:text-2xl italic tracking-tight text-white pb-6">
+          Discover a cruise like no other with us on the Nile.
+          </p>
+        </div>
+      </Container>
+    </section>
+  )
+}
--- a/public/images/components/CallToAction2.jsx
+++ b/public/images/components/CallToAction2.jsx
@@ -0,0 +1,29 @@
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+import { Logo } from '@/components/Logo'
+  
+
+export function CallToAction2() {
+  return (
+    <section
+      id="get-started-today"
+      className="relative overflow-hidden bg-transparent py-40 mt-4 mb-2"
+    >
+      <img
+        className="absolute  left-1/2 top-1/2 max-w-none -translate-x-1/2 -translate-y-1/2"
+        src="./images/komombo.jpg"
+        alt=""
+        width={2347}
+        height={1244}
+      />
+      <div className="absolute inset-0 bg-black opacity-50"></div>
+      <Container className="relative ">
+        <div className="mx-auto max-w-3xl text-center">
+        <div className="flex items-center justify-center">
+          <Logo className="h-16 w-auto opacity-100" />
+        </div>
+        </div>
+      </Container>
+    </section>
+  )
+}
--- a/public/images/components/CallToAction3.jsx
+++ b/public/images/components/CallToAction3.jsx
@@ -0,0 +1,29 @@
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+import { Logo } from '@/components/Logo'
+  
+
+export function CallToAction3() {
+  return (
+    <section
+      id="get-started-today"
+      className="relative overflow-hidden bg-transparent py-48 mt-4"
+    >
+      <img
+        className="absolute left-1/2 top-1/2 max-w-none -translate-x-1/2 -translate-y-1/2"
+        src="./images/komombo.jpg"
+        alt=""
+        width={1440}
+        height={564}
+      />
+      <div className="absolute inset-0 bg-black opacity-60"></div>
+      <Container className="relative ">
+        <div className="mx-auto max-w-3xl text-center">
+        <div className="flex items-center justify-center">
+          <Logo className="h-25 w-auto opacity-100" />
+        </div>
+        </div>
+      </Container>
+    </section>
+  )
+}
--- a/public/images/components/Carousel.jsx
+++ b/public/images/components/Carousel.jsx
@@ -0,0 +1,115 @@
+"use client"; // <-- This line is crucial
+
+import React, { useState, useEffect, useRef } from 'react';
+import clsx from 'clsx';
+
+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(false); // Start with false, will be updated in useEffect
+  const scrollRef = useRef(null);
+
+  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 py-16 lg:py-24 bg-transparent px-6 lg:px-8">
+      <div className="w-full max-w-7xl ">
+        <div className="text-left mx-auto max-w-7xl ">
+          <h2 className="font-display text-2xl sm:text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
+            Activities
+          </h2>
+          <p className="mt-4 max-w-5xl text-xl/5 font-medium tracking-[-0.045em] lg:tracking-[-0.02em] leading-[1.3] lg:leading-[1.4] lg:text-2xl text-darkgr pb-6 sm:pb-8 lg:pb-12">
+            Explore a diverse range of activities designed to elevate your Mind, Body, and Soul, fostering a deeper connection and holistic well-being.
+          </p>
+        </div>
+        <div
+          ref={scrollRef}
+          className={clsx([
+            'mt-8 flex gap-4 px-6 lg:px-8 mr-6 lg:mr-0',
+            '[scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+            'snap-x snap-mandatory overflow-x-scroll overscroll-x-contain scroll-smooth',
+            'pb-8',
+          ])}
+        >
+          {cards.map((card, index) => (
+            <div
+              key={index}
+              className="w-72 sm:w-80 lg:w-96 shrink-0 snap-start relative overflow-hidden rounded-lg h-80"
+            >
+              <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-3 sm:p-4">
+                <h3 className="text-base sm:text-lg font-semibold text-white mb-1 sm:mb-2">{card.title}</h3>
+                <p className="text-sm sm:text-base text-white leading-tight">{card.description}</p>
+              </div>
+            </div>
+          ))}
+          <div className="w-8 shrink-0" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MultiCardCarousel;
--- a/public/images/components/Community.jsx
+++ b/public/images/components/Community.jsx
@@ -0,0 +1,253 @@
+'use client'
+
+import { Fragment, useState } from 'react'
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+  Popover,
+  PopoverButton,
+  PopoverGroup,
+  PopoverPanel,
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels,
+} from '@headlessui/react'
+import {
+  Bars3Icon,
+  HeartIcon,
+  MagnifyingGlassIcon,
+  MinusIcon,
+  PlusIcon,
+  ShoppingBagIcon,
+  UserIcon,
+  XMarkIcon,
+} from '@heroicons/react/24/outline'
+import { StarIcon } from '@heroicons/react/20/solid'
+
+
+const product = {
+  name: 'Community Buildings',
+  images: [
+    {
+      id: 1,
+      name: 'Community Space 1',
+      src: '/images/community1.jpg',
+      alt: 'Community gathering space with traditional design',
+    },
+    {
+      id: 2,
+      name: 'Community Space 2',
+      src: '/images/community2.jpg',
+      alt: 'Interior view of community building',
+    },
+    {
+      id: 3,
+      name: 'Community Space 3',
+      src: '/images/community3.jpg',
+      alt: 'Community space with seating arrangements',
+    },
+    {
+      id: 4,
+      name: 'Community Space 4',
+      src: '/images/community4.jpg',
+      alt: 'Community building exterior and surroundings',
+    },
+  ],
+  colors: [
+    { id: 'washed-black', name: 'Washed Black', classes: 'bg-gray-700 checked:outline-gray-700' },
+    { id: 'white', name: 'White', classes: 'bg-white checked:outline-gray-400' },
+    { id: 'washed-gray', name: 'Washed Gray', classes: 'bg-gray-500 checked:outline-gray-500' },
+  ],
+  description: `
+    <p>Community building holds significant value by fostering a sense of belonging, providing social and emotional support, and promoting collective action. It enhances social capital, encourages collaboration. Human to human connection become more and more important as new technological times require us to collaborate more on a peer to peer level and connect on different levels with each other.</p>
+  `,
+  details: [
+    {
+      name: 'Features',
+      items: [
+        'Tailored itineraries that not only traverse the Nile but also include excursions to monumental sites like the temples of Luxor and the iconic pyramid to create life lasting bonds and inspire to integrate history while creating the future.',
+        'A comprehensive wellness approach integrating yoga, meditation, massage, and nutritious cuisine crafted by our onboard chef, complemented by wellness workshops aimed at holistic health.',
+        'Personal growth sessions led by experienced coaches, offering mentoring and guidance to foster self-discovery and personal development.',
+      ],
+    },
+    {
+      name: 'Benefits',
+      items: [
+        'Enhanced self-awareness and rejuvenation within a nurturing environment, surrounded by the timeless beauty of the Nile.',
+        'Building connections with like-minded individuals in an intimate setting, ideal for forging community ties and shared transformative experiences.',
+        'Machine wash interior dividers',
+        'A balanced mix of relaxation, adventure, and cultural immersion, fostering a profound sense of well-being and enrichment.',
+      ],
+    },
+  ],
+}
+const relatedProducts = [
+  {
+    id: 1,
+    name: 'Zip Tote Basket',
+    color: 'White and black',
+    href: '#',
+    imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-03-related-product-01.jpg',
+    imageAlt: 'Front of zip tote bag with white canvas, black canvas straps and handle, and black zipper pulls.',
+    price: '$140',
+  },
+  {
+    id: 2,
+    name: 'Zip High Wall Tote',
+    color: 'White and blue',
+    href: '#',
+    imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-03-related-product-02.jpg',
+    imageAlt: 'Front of zip tote bag with white canvas, blue canvas straps and handle, and front zipper pocket.',
+    price: '$150',
+  },
+  {
+    id: 3,
+    name: 'Halfsize Tote',
+    color: 'Clay',
+    href: '#',
+    imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-03-related-product-03.jpg',
+    imageAlt: 'Front of tote with monochrome natural canvas body, straps, roll top, and handles.',
+    price: '$210',
+  },
+  {
+    id: 4,
+    name: 'High Wall Tote',
+    color: 'Black and orange',
+    href: '#',
+    imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-03-related-product-04.jpg',
+    imageAlt: 'Front of zip tote bag with black canvas, black handles, and orange drawstring top.',
+    price: '$210',
+  },
+]
+
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export function Community() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <div className="pb-24">
+
+
+
+
+      <main className="mx-auto max-w-7xl sm:px-6 sm:pt-16 lg:px-8">
+        <div className="mx-auto max-w-2xl lg:max-w-none">
+          {/* Product */}
+          <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
+            {/* 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 text-gray-900 uppercase hover:bg-gray-50 focus:ring-3 focus:ring-indigo-500/50 focus:ring-offset-4 focus:outline-hidden"
+                    >
+                      <span className="sr-only">{image.name}</span>
+                      <span className="absolute inset-0 overflow-hidden rounded-md">
+                        <img alt="" src={image.src} className="size-full object-cover" />
+                      </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>
+                {product.images.map((image) => (
+                  <TabPanel key={image.id}>
+                    <img alt={image.alt} src={image.src} className="aspect-square w-full object-cover sm:rounded-lg" />
+                  </TabPanel>
+                ))}
+              </TabPanels>
+            </TabGroup>
+
+            {/* Product info */}
+            <div className="mt-10 px-6 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>
+
+              {/* Reviews */}
+              <div className="mt-3">
+                <h3 className="sr-only">Reviews</h3>
+              </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 border-gray-200">
+                  {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 size-6 text-gray-400 group-hover:text-gray-500 group-data-open:hidden"
+                            />
+                            <MinusIcon
+                              aria-hidden="true"
+                              className="hidden size-6 text-indigo-400 group-hover:text-indigo-500 group-data-open:block"
+                            />
+                          </span>
+                        </DisclosureButton>
+                      </h3>
+                      <DisclosurePanel className="pb-6">
+                        <ul
+                          role="list"
+                          className="list-disc space-y-1 pl-5 text-sm/6 text-gray-700 marker:text-gray-300"
+                        >
+                          {detail.items.map((item) => (
+                            <li key={item} className="pl-2">
+                              {item}
+                            </li>
+                          ))}
+                        </ul>
+                      </DisclosurePanel>
+                    </Disclosure>
+                  ))}
+                </div>
+              </section>
+            </div>
+          </div>
+
+        </div>
+      </main>
+
+
+    </div>
+  )
+}
--- a/public/images/components/ContactHero.jsx
+++ b/public/images/components/ContactHero.jsx
@@ -0,0 +1,97 @@
+'use client'
+
+import { BuildingOffice2Icon, EnvelopeIcon } from '@heroicons/react/24/outline'
+import { useState } from 'react'
+
+export function ContactHero() {
+  return (
+    <div className="relative isolate">
+      <div className="mx-auto grid max-w-7xl grid-cols-1 lg:grid-cols-2">
+        {/* Left container */}
+        <div className="relative px-6 pt-24 pb-20 lg:static lg:px-8 lg:py-32">
+          <div className="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
+            <div className="absolute inset-y-0 left-0 -z-10 w-full overflow-hidden bg-gray-100 ring-1 ring-gray-900/10 lg:w-1/2">
+              <svg
+                aria-hidden="true"
+                className="absolute inset-0 size-full mask-[radial-gradient(100%_100%_at_top_right,white,transparent)] stroke-gray-200"
+              >
+                <defs>
+                  <pattern
+                    x="100%"
+                    y={-1}
+                    id="83fd4e5a-9d52-42fc-97b6-718e5d7ee527"
+                    width={200}
+                    height={200}
+                    patternUnits="userSpaceOnUse"
+                  >
+                    <path d="M130 200V.5M.5 .5H200" fill="none" />
+                  </pattern>
+                </defs>
+                <rect width="100%" height="100%" strokeWidth={0} className="fill-white" />
+                <svg x="100%" y={-1} className="overflow-visible fill-gray-50">
+                  <path d="M-470.5 0h201v201h-201Z" strokeWidth={0} />
+                </svg>
+                <rect fill="url(#83fd4e5a-9d52-42fc-97b6-718e5d7ee527)" width="100%" height="100%" strokeWidth={0} />
+              </svg>
+              <div
+                aria-hidden="true"
+                className="absolute top-[calc(100%-13rem)] -left-56 hidden transform-gpu blur-3xl lg:top-[calc(50%-7rem)] lg:left-[max(-14rem,calc(100%-59rem))]"
+              >
+                <div
+                  style={{
+                    clipPath:
+                      'polygon(74.1% 56.1%, 100% 38.6%, 97.5% 73.3%, 85.5% 100%, 80.7% 98.2%, 72.5% 67.7%, 60.2% 37.8%, 52.4% 32.2%, 47.5% 41.9%, 45.2% 65.8%, 27.5% 23.5%, 0.1% 35.4%, 17.9% 0.1%, 27.6% 23.5%, 76.1% 2.6%, 74.1% 56.1%)',
+                  }}
+                  className="aspect-1155/678 w-288.75 bg-linear-to-br from-[#80caff] to-[#4f46e5] opacity-10"
+                />
+              </div>
+            </div>
+            <h2 className="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">
+              Get in Touch
+            </h2>
+            <p className="mt-6 text-lg/8 text-gray-600">
+              At VEDA, we welcome your questions, ideas, and collaborations. Whether you’re curious about our retreats, interested in hosting a private gathering, or exploring partnership opportunities, we’re here to connect. Reach out to us today and let’s create transformative experiences along the timeless Nile.
+            </p>
+            <dl className="mt-10 space-y-4 text-base/7 text-gray-600">
+              <div className="flex gap-x-4">
+                <dt className="flex-none">
+                  <span className="sr-only">Email</span>
+                  <EnvelopeIcon aria-hidden="true" className="h-7 w-6 text-gray-400" />
+                </dt>
+                <dd>
+                  <a href="mailto:info@veda-egypt.com" className="hover:text-gray-900">
+                    info@veda-egypt.com
+                  </a>
+                </dd>
+              </div>
+              <div className="flex gap-x-4">
+                <dt className="flex-none">
+                  <span className="sr-only">Reservations</span>
+                  <EnvelopeIcon aria-hidden="true" className="h-7 w-6 text-gray-400" />
+                </dt>
+                <dd>
+                  <a href="mailto:reservation@veda-egypt.com" className="hover:text-gray-900">
+                    reservation@veda-egypt.com
+                  </a>
+                </dd>
+              </div>
+            </dl>
+          </div>
+        </div>
+
+        {/* Right container (image) */}
+        <div className="relative bg-gray-100 overflow-hidden px-6 lg:px-8">
+          <div className="h-full w-full overflow-hidden">
+            <img
+              src="/images/contact/contact.png"
+              alt="VEDA contact"
+              width={900}
+              height={600}
+              className="h-full w-full object-cover"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/public/images/components/Container.jsx
+++ b/public/images/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/public/images/components/Daha1.jsx
+++ b/public/images/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 max-w-3xl text-lg leading-8 text-gray-600">
+            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/public/images/components/Daha2.jsx
+++ b/public/images/components/Daha2.jsx
@@ -0,0 +1,64 @@
+import { Container } from '@/components/Container';
+
+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-6 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>
+  )
+}
--- a/public/images/components/Events.jsx
+++ b/public/images/components/Events.jsx
@@ -0,0 +1,253 @@
+'use client'
+
+import { Fragment, useState } from 'react'
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+  Popover,
+  PopoverButton,
+  PopoverGroup,
+  PopoverPanel,
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels,
+} from '@headlessui/react'
+import {
+  Bars3Icon,
+  HeartIcon,
+  MagnifyingGlassIcon,
+  MinusIcon,
+  PlusIcon,
+  ShoppingBagIcon,
+  UserIcon,
+  XMarkIcon,
+} from '@heroicons/react/24/outline'
+import { StarIcon } from '@heroicons/react/20/solid'
+
+
+const product = {
+  name: 'Events & Conferences',
+  images: [
+    {
+      id: 1,
+      name: 'Event Space 1',
+      src: '/images/events1.jpg',
+      alt: 'Professional event space with Nile backdrop',
+    },
+    {
+      id: 2,
+      name: 'Event Space 2',
+      src: '/images/events2.jpg',
+      alt: 'Conference venue with modern amenities',
+    },
+    {
+      id: 3,
+      name: 'Event Space 3',
+      src: '/images/events3.jpg',
+      alt: 'Meeting space on dahabiya',
+    },
+    {
+      id: 4,
+      name: 'Event Space 4',
+      src: '/images/events4.jpg',
+      alt: 'Outdoor event setting by the Nile',
+    },
+  ],
+  colors: [
+    { id: 'washed-black', name: 'Washed Black', classes: 'bg-gray-700 checked:outline-gray-700' },
+    { id: 'white', name: 'White', classes: 'bg-white checked:outline-gray-400' },
+    { id: 'washed-gray', name: 'Washed Gray', classes: 'bg-gray-500 checked:outline-gray-500' },
+  ],
+  description: `
+    <p>VEDA's facilities are suited for hosting events, a unique venue that combines professional functionality with the tranquility of the Nile. An innovative setting that stands apart from traditional conference venues, promising an impactful event.</p>
+  `,
+  details: [
+    {
+      name: 'Unique Features',
+      items: [
+        'Four Air-Conditioned Meeting Spaces equipped with modern amenities to host up to 50/100 participants, perfect for workshops, seminars, and more.',
+        'From indoor workshops to outdoor receptions and gala dinners, the settings are as versatile as the events themselves.',
+        'Comprehensive Services: This includes catering, technical equipment, and event planning assistance to ensure everything runs smoothly.',
+        'Essential for modern retreats and conferences, we offer reliable internet and state-of-the-art meeting equipment.',
+        'Flexible Event Locations Across the Nile: Offering the freedom to choose unique meeting locations for an unparalleled experience.',
+      ],
+    },
+    {
+      name: 'Benefits',
+      items: [
+        'Unique venue: The natural and historical backdrop of the Nile serves as a source of inspiration and tranquility.',
+        'Modern Conveniences: Internet, flexible meeting locations, and comprehensive support services facilitate a productive and engaging environment.',
+      ],
+    },
+  ],
+}
+const relatedProducts = [
+  {
+    id: 1,
+    name: 'Zip Tote Basket',
+    color: 'White and black',
+    href: '#',
+    imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-03-related-product-01.jpg',
+    imageAlt: 'Front of zip tote bag with white canvas, black canvas straps and handle, and black zipper pulls.',
+    price: '$140',
+  },
+  {
+    id: 2,
+    name: 'Zip High Wall Tote',
+    color: 'White and blue',
+    href: '#',
+    imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-03-related-product-02.jpg',
+    imageAlt: 'Front of zip tote bag with white canvas, blue canvas straps and handle, and front zipper pocket.',
+    price: '$150',
+  },
+  {
+    id: 3,
+    name: 'Halfsize Tote',
+    color: 'Clay',
+    href: '#',
+    imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-03-related-product-03.jpg',
+    imageAlt: 'Front of tote with monochrome natural canvas body, straps, roll top, and handles.',
+    price: '$210',
+  },
+  {
+    id: 4,
+    name: 'High Wall Tote',
+    color: 'Black and orange',
+    href: '#',
+    imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-03-related-product-04.jpg',
+    imageAlt: 'Front of zip tote bag with black canvas, black handles, and orange drawstring top.',
+    price: '$210',
+  },
+]
+
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export function Events() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <div className="pb-24">
+
+
+
+
+      <main className="mx-auto max-w-7xl sm:px-6 sm:pt-16 lg:px-8">
+        <div className="mx-auto max-w-2xl lg:max-w-none">
+          {/* Product */}
+          <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
+            {/* 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 text-gray-900 uppercase hover:bg-gray-50 focus:ring-3 focus:ring-indigo-500/50 focus:ring-offset-4 focus:outline-hidden"
+                    >
+                      <span className="sr-only">{image.name}</span>
+                      <span className="absolute inset-0 overflow-hidden rounded-md">
+                        <img alt="" src={image.src} className="size-full object-cover" />
+                      </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>
+                {product.images.map((image) => (
+                  <TabPanel key={image.id}>
+                    <img alt={image.alt} src={image.src} className="aspect-square w-full object-cover sm:rounded-lg" />
+                  </TabPanel>
+                ))}
+              </TabPanels>
+            </TabGroup>
+
+            {/* Product info */}
+            <div className="mt-10 px-6 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>
+
+              {/* Reviews */}
+              <div className="mt-3">
+                <h3 className="sr-only">Reviews</h3>
+              </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 border-gray-200">
+                  {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 size-6 text-gray-400 group-hover:text-gray-500 group-data-open:hidden"
+                            />
+                            <MinusIcon
+                              aria-hidden="true"
+                              className="hidden size-6 text-indigo-400 group-hover:text-indigo-500 group-data-open:block"
+                            />
+                          </span>
+                        </DisclosureButton>
+                      </h3>
+                      <DisclosurePanel className="pb-6">
+                        <ul
+                          role="list"
+                          className="list-disc space-y-1 pl-5 text-sm/6 text-gray-700 marker:text-gray-300"
+                        >
+                          {detail.items.map((item) => (
+                            <li key={item} className="pl-2">
+                              {item}
+                            </li>
+                          ))}
+                        </ul>
+                      </DisclosurePanel>
+                    </Disclosure>
+                  ))}
+                </div>
+              </section>
+            </div>
+          </div>
+
+        </div>
+      </main>
+
+
+    </div>
+  )
+}
--- a/public/images/components/Exp.jsx
+++ b/public/images/components/Exp.jsx
@@ -0,0 +1,37 @@
+const features = [
+    { name: 'Mind and Body Practices', description: 'Activities that enhance physical well-being and mental clarity through mindful movement and meditation.', image: '/images/activities/mind.jpg' },
+    { name: 'Healing and Wellness Therapies', description: 'Therapeutic activities designed to promote relaxation, rejuvenation, and overall well-being.', image: '/images/activities/healing.jpg' },
+    { name: 'Holistic Health and Nutrition', description: 'Programs focused on nourishing the body and promoting health through mindful eating and natural remedies.', image: '/images/activities/holistic.jpg' },
+    { name: 'Creative and Expressive Workshops', description: 'Opportunities for self-expression and exploration through artistic and creative endeavors.', image: '/images/activities/creative.jpg' },
+    { name: 'Relaxation and Reflection', description: 'Activities that encourage rest, introspection, and a deeper connection with oneself and the natural world.', image: '/images/activities/relax.jpg' },
+    { name: 'Entertainment and Performance Arts', description: 'Experiences that offer enjoyment and inspiration through music, dance, and captivating performances.', image: '/images/activities/entertain.jpg' },
+  ]
+  
+  export default function Example() {
+    return (
+      <div className="bg-creme-600">
+        <div className="mt-24 relative mx-auto  max-w-7xl px-6 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">
+                <img
+                  src={feature.image}
+                  alt={feature.name}
+                  className="h-48 w-full object-cover rounded-lg mb-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/public/images/components/Exp1.jsx
+++ b/public/images/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/public/images/components/Exp2.jsx
+++ b/public/images/components/Exp2.jsx
@@ -0,0 +1,24 @@
+
+  
+  export  function Experience() {
+    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-6 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 Programs</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>
+        </div>
+      </div>
+    )
+  }
--- a/public/images/components/Experiences.jsx
+++ b/public/images/components/Experiences.jsx
@@ -0,0 +1,73 @@
+export function Experiences() {
+  return (
+    <div className="pt-16 lg:pt-24 pb-12">
+      <div className="mx-auto max-w-2xl px-6  lg:max-w-7xl lg:px-8">
+        <p className="mt-2 max-w-lg text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
+        Programs
+        </p>
+        
+        <p className="mt-4 max-w-5xl text-xl/5 font-medium tracking-[-0.045em] lg:tracking-[-0.02em] leading-[1.3] lg:leading-[1.4] lg:text-2xl text-darkgr">
+          From intimate community gatherings to professional retreats, VEDA offers transformative programs on the Nile. Each space is thoughtfully designed to foster connection, creativity, and personal growth in an inspiring riverside setting.
+        </p>
+        <div className="mt-8 sm:mt-16 grid grid-cols-1 gap-4 lg:grid-cols-8 lg:grid-rows-2">
+          <div className="flex p-px lg:col-span-5">
+            <div className="w-full overflow-hidden rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-t-4xl lg:rounded-tl-4xl relative isolate flex flex-col justify-end h-80 lg:h-auto">
+              <img
+                alt=""
+                src="/images/community.jpg"
+                className="absolute inset-0 -z-10 h-full w-full object-cover object-center"
+              />
+              <div className="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40" />
+              <div className="px-8 py-4">
+                <p className="mt-2 text-lg font-semibold tracking-normal text-[#FEFFF6]">Community building Space</p>
+                <p className="mt-1 pb-2 text-sm lg:text-base font-medium text-[#FEFFF6]/80">Foster connections and meaningful relationships through shared experiences.</p>
+              </div>
+            </div>
+          </div>
+          <div className="flex p-px lg:col-span-3">
+            <div className="w-full overflow-hidden rounded-lg shadow-sm outline outline-black/5 lg:rounded-tr-4xl relative isolate flex flex-col justify-end h-80">
+              <img
+                alt=""
+                src="/images/private.jpg"
+                className="absolute inset-0 -z-10 h-full w-full object-cover object-center"
+              />
+              <div className="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40" />
+              <div className="px-8 py-4">
+                <p className="mt-2 text-lg font-semibold tracking-normal text-[#FEFFF6]">Private Retreats</p>
+                <p className="mt-1 text-sm lg:text-base font-medium text-[#FEFFF6]/80">Exclusive experiences tailored for intimate groups and families.</p>
+              </div>
+            </div>
+          </div>
+          <div className="flex p-px lg:col-span-3">
+            <div className="w-full overflow-hidden rounded-lg shadow-sm outline outline-black/5 lg:rounded-bl-4xl relative isolate flex flex-col justify-end h-80">
+              <img
+                alt=""
+                src="/images/events.jpg"
+                className="absolute inset-0 -z-10 h-full w-full object-cover object-center"
+              />
+              <div className="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40" />
+              <div className="px-8 py-4">
+                <p className="mt-2 text-lg lg:text-xl font-semibold tracking-normal text-[#FEFFF6]">Events & Conferences</p>
+                <p className="mt-1 pb-2 text-sm lg:text-base font-medium text-[#FEFFF6]/80">Professional gatherings in an inspiring riverside setting.</p>
+              </div>
+            </div>
+          </div>
+          <div className="flex p-px lg:col-span-5">
+            <div className="w-full overflow-hidden rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-b-4xl lg:rounded-br-4xl relative isolate flex flex-col justify-end h-80">
+              <img
+                alt=""
+                src="/images/nomads.jpg"
+                className="absolute inset-0 -z-10 h-full w-full object-cover object-center"
+              />
+              <div className="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40" />
+              <div className="px-8 py-4">
+                <p className="mt-2 text-lg font-semibold tracking-normal text-[#FEFFF6]">Digital Nomad Hub</p>
+                <p className="mt-1 pb-2 text-sm lg:text-base font-medium text-[#FEFFF6]/80">Work remotely while surrounded by the tranquility of the Nile.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/public/images/components/Faqs.jsx
+++ b/public/images/components/Faqs.jsx
@@ -0,0 +1,108 @@
+
+import { Container } from '@/components/Container'
+
+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"
+    >
+      <img
+        className="absolute left-1/2 top-0 max-w-none -translate-y-1/4 translate-x-[-30%]"
+        src="/images/background-faqs.jpg"
+        alt=""
+        width={1558}
+        height={946}
+       
+      />
+      <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/public/images/components/Fields.jsx
+++ b/public/images/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/public/images/components/Footer.jsx
+++ b/public/images/components/Footer.jsx
@@ -0,0 +1,17 @@
+import { Container } from '@/components/Container'
+import { Logo } from '@/components/Logo'
+
+export function Footer() {
+  return (
+    <footer className="bg-bg-clay border-primary-olive border-t-2">
+      <Container>
+        <div className="flex items-center justify-between py-8">
+          <Logo className="h-10 w-auto" />
+          <p className="text-sm text-primary-olive hover:text-primary-terracotta transition-colors duration-200">
+            Copyright &copy; {new Date().getFullYear()} VEDA. All rights reserved.
+          </p>
+        </div>
+      </Container>
+    </footer>
+  )
+}
--- a/public/images/components/FreeflowVideo.jsx
+++ b/public/images/components/FreeflowVideo.jsx
@@ -0,0 +1,38 @@
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+import React from 'react'
+
+
+const FFVid = () => {
+    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-5xl md:text-center">
+          <h2 className="font-display mt-2 text-3xl font-bold tracking-tight text-gray-800 sm:text-4xl">
+          A Glimpse Into Private Retreats at VEDA
+          </h2>
+          <p className="mt-4 mb-12 text-lg pb-6 tracking-tight text-slate-700">
+          We were honored to welcome FreeFlow Retreats aboard VEDA, where guests experienced the perfect blend of wellness, culture, and tranquility on the Nile. Watch the video below for a glimpse of how your own retreat could unfold in this unique setting. 
+          </p>
+        </div>
+      <div className="video-container">
+        <iframe
+          src="https://player.vimeo.com/video/725069296?loop=1&muted=1"
+          width="100%"
+          height="600"
+          frameBorder="0"
+          allow="autoplay; fullscreen; picture-in-picture"
+          allowFullScreen
+          className="rounded-lg w-full max-w-6xl mx-auto"
+        ></iframe>
+      </div>
+        </Container>
+        </section>
+    );
+  };
+  
+export default FFVid;
--- a/public/images/components/Gallery.jsx
+++ b/public/images/components/Gallery.jsx
@@ -0,0 +1,105 @@
+import * as React from 'react';
+import ImageList from '@mui/material/ImageList';
+import ImageListItem from '@mui/material/ImageListItem';
+import Box from '@mui/material/Box';
+
+function srcset(image, size, rows = 1, cols = 1) {
+  return {
+    src: `${image}?w=${size * cols}&h=${size * rows}&fit=crop&auto=format`,
+    srcSet: `${image}?w=${size * cols}&h=${
+      size * rows
+    }&fit=crop&auto=format&dpr=2 2x`,
+  };
+}
+
+const itemData = [
+  {
+    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
+    title: 'Breakfast',
+    rows: 2,
+    cols: 2,
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
+    title: 'Burger',
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
+    title: 'Camera',
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
+    title: 'Coffee',
+    cols: 2,
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
+    title: 'Hats',
+    cols: 2,
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
+    title: 'Honey',
+    author: '@arwinneil',
+    rows: 2,
+    cols: 2,
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
+    title: 'Basketball',
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
+    title: 'Fern',
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
+    title: 'Mushrooms',
+    rows: 2,
+    cols: 2,
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
+    title: 'Tomato basil',
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
+    title: 'Sea star',
+  },
+  {
+    img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
+    title: 'Bike',
+    cols: 2,
+  },
+];
+
+const Gallery = () => {
+  return (
+    <Box
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+      minHeight="100vh"
+      padding={2}
+    >
+      <ImageList
+        sx={{ width: 500, height: 450 }}
+        variant="quilted"
+        cols={4}
+        rowHeight={121}
+      >
+        {itemData.map((item) => (
+          <ImageListItem key={item.img} cols={item.cols || 1} rows={item.rows || 1}>
+            <img
+              {...srcset(item.img, 121, item.rows, item.cols)}
+              alt={item.title}
+              loading="lazy"
+            />
+          </ImageListItem>
+        ))}
+      </ImageList>
+    </Box>
+  );
+};
+
+export default Gallery;
--- a/public/images/components/Header.jsx
+++ b/public/images/components/Header.jsx
@@ -0,0 +1,112 @@
+'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-6 w-6 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-50/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-bg-sand  p-4 text-lg tracking-tight text-nav-dark 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="/experiences">EXPERIENCES</MobileNavLink>
+        <MobileNavLink href="/dahabiyas">DAHABIYAS</MobileNavLink>
+        <MobileNavLink href="/itinerary">ITINERARY</MobileNavLink>
+        <hr className="m-2 border-slate-300/40" />
+        <MobileNavLink href="/contact">Book Now</MobileNavLink>
+      </PopoverPanel>
+    </Popover>
+  )
+}
+
+export function Header() {
+  return (
+    <header className="fixed top-0 left-0 right-0 z-50 bg-bg-sand backdrop-blur-sm py-4">
+      <Container>
+        <nav className="relative z-50 flex justify-between">
+          <div className="flex items-center md:gap-x-12">
+            <Link href="/" aria-label="Home" className="overflow-visible">
+              <Logo className="h-8 w-auto max-w-none sm:h-9 md:h-10 lg:h-11 xl:h-12" />
+            </Link>
+            <div className="hidden md:flex md:gap-x-6">
+              <NavLink href="/">HOME</NavLink>
+              <NavLink href="/story">STORY</NavLink>
+              <NavLink href="/experiences">EXPERIENCES</NavLink>
+              <NavLink href="/dahabiyas">DAHABIYAS</NavLink>
+              <NavLink href="/itinerary">ITINERARY</NavLink>
+            </div>
+          </div>
+          <div className="flex items-center gap-x-5 md:gap-x-8">
+            <Button href="/contact" variant="solidNoRounded" color="bookNow">
+              <span className="tracking-wide">
+                Book Now
+              </span>
+            </Button>
+            <div className="-mr-1 md:hidden">
+              <MobileNavigation />
+            </div>
+          </div>
+        </nav>
+      </Container>
+    </header>
+  )
+}
--- a/public/images/components/Hero.jsx
+++ b/public/images/components/Hero.jsx
@@ -0,0 +1,22 @@
+
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+
+
+export function Hero() {
+  return (
+    <section className="relative w-full lg:h-screen bg-transparent h-[550px] lg:mt-0 mt-0">
+      {/* Background Image */}
+      <div className="absolute inset-0 w-full h-full overflow-hidden z-0 bg-bg-sand opacity-30">
+        <img
+          src="/images/hero.jpg"
+          alt="Nile River"
+          className="w-full h-full object-cover object-center"
+          width={1920}
+          height={1080}
+          priority
+        />
+      </div>
+    </section>
+  )
+}
--- a/public/images/components/HeroCopy.jsx
+++ b/public/images/components/HeroCopy.jsx
@@ -0,0 +1,40 @@
+
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+
+export function Hero() {
+  return (
+    <section className="relative w-full h-screen -lg:mt-12 mt-0">
+      {/* Background Video */}
+      <video
+        autoPlay
+        loop
+        muted
+        playsInline
+        className="absolute top-0 left-0 w-full h-full object-cover z-0 bg-white opacity-60"
+      >
+        <source src="/videos/hero.mp4" type="video/mp4" />
+        Your browser does not support the video tag.
+      </video>
+      
+      {/* Welcome Content Overlay */}
+      <div className="bg-[#FEFFF6] py-6 mt-0 absolute -bottom-16 left-0 right-0 z-10">
+        <div className="mx-auto max-w-7xl px-6 lg:px-6">
+          <div className="mx-auto max-w-5xl lg:mx-0">
+            <h2 className="mt-2 text-2xl font-medium tracking-[-0.05em] text-darkgr lg:text-3xl">Veda welcomes you into her home providing unique wellness cruises blending cultural authentic experiences with unparalleled freedom and privacy.
+Our organic cuisine, cultural activities and dedicated warm hearted crew will make your veda cruise an unforgettable experience.
+</h2>
+          </div>
+           <div className="mx-auto max-w-3xl lg:mx-0">
+            <p className="mt-6 text-3xl font-semibold tracking-[-0.05em] text-darkgr lg:text-4xl">
+              Nile Cruises, Reimagined. 
+            </p>
+              <p className="mt-4 mb-12  font-normal text-pretty text-gray-950 sm:text-lg">
+              
+            </p>
+            </div>
+          </div>
+        </div>
+    </section>
+  )
+}
--- a/public/images/components/Iti1.jsx
+++ b/public/images/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/public/images/components/Logo.jsx
+++ b/public/images/components/Logo.jsx
@@ -0,0 +1,45 @@
+import * as React from "react";
+
+const SvgIcon = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="122"
+    height="30"
+    fill="none"
+    viewBox="0 0 122 30"
+  >
+    <mask
+      id="a"
+      width="30"
+      height="30"
+      x="0"
+      y="0"
+      maskUnits="userSpaceOnUse"
+      style={{ maskType: "luminance" }}
+    >
+      <path fill="#fff" d="M29.926 0H0v30h29.926z"></path>
+    </mask>
+    <g fill="#48774B" fillOpacity="0.7" mask="url(#a)">
+      <path d="M14.963 15c4.132 0 7.482-3.358 7.482-7.5S19.095 0 14.963 0 7.481 3.358 7.481 7.5s3.35 7.5 7.482 7.5"></path>
+      <path d="M7.482 22.5c4.132 0 7.481-3.358 7.481-7.5s-3.35-7.5-7.481-7.5S0 10.858 0 15s3.35 7.5 7.482 7.5"></path>
+      <path d="M22.444 22.5c4.132 0 7.482-3.358 7.482-7.5s-3.35-7.5-7.482-7.5-7.481 3.358-7.481 7.5 3.35 7.5 7.481 7.5"></path>
+      <path d="M20.253 27.803c4.132 0 7.482-3.358 7.482-7.5s-3.35-7.5-7.482-7.5-7.482 3.358-7.482 7.5 3.35 7.5 7.482 7.5"></path>
+      <path d="M9.673 27.803c4.132 0 7.481-3.358 7.481-7.5s-3.35-7.5-7.481-7.5-7.482 3.358-7.482 7.5 3.35 7.5 7.482 7.5"></path>
+      <path d="M14.963 30c4.132 0 7.482-3.358 7.482-7.5s-3.35-7.5-7.482-7.5-7.482 3.358-7.482 7.5 3.35 7.5 7.482 7.5"></path>
+      <path d="M9.673 17.197c4.132 0 7.481-3.358 7.481-7.5s-3.35-7.5-7.481-7.5-7.482 3.358-7.482 7.5 3.35 7.5 7.482 7.5"></path>
+      <path d="M20.253 17.197c4.132 0 7.482-3.358 7.482-7.5s-3.35-7.5-7.482-7.5-7.482 3.358-7.482 7.5 3.35 7.5 7.482 7.5"></path>
+    </g>
+    <path
+      fill="#48774B"
+      d="m47.525 24-7.65-17.5H43.4l6.825 15.825H48.2L55.1 6.5h3.25L50.725 24zm18.196-10.225h8.7v2.675h-8.7zm.25 7.5h9.875V24H62.721V6.5h12.775v2.725h-9.525zM81.97 24V6.5h7.65q2.85 0 5 1.1t3.35 3.05 1.2 4.6q0 2.625-1.2 4.6-1.2 1.95-3.35 3.05t-5 1.1zm3.25-2.75h4.25q1.975 0 3.4-.75 1.45-.75 2.225-2.1.8-1.35.8-3.15 0-1.826-.8-3.15-.774-1.35-2.225-2.1-1.425-.75-3.4-.75h-4.25zM102.404 24l7.875-17.5h3.2l7.9 17.5h-3.4l-6.775-15.775h1.3L105.754 24zm3.625-4.05.875-2.55h9.45l.875 2.55z"
+    ></path>
+  </svg>
+);
+
+export function Logo(props) {
+  return (
+    <div className="bg-transparent px-2 py-1 rounded">
+      <SvgIcon {...props} />
+    </div>
+  );
+}
--- a/public/images/components/Logos.jsx
+++ b/public/images/components/Logos.jsx
@@ -0,0 +1,46 @@
+
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+
+
+export function Logos() {
+  return (
+    <Container>
+      <div className="relative z-10 pt-10">
+        <p className="mt-10 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: '/images/logos/1.svg' },
+              { name: 'HLS', logo: '/images/logos/2.svg' },
+              { name: 'Bookretreats', logo: '/images/logos/3.svg' },
+            ],
+            [
+              { name: 'Beaviajera', logo: '/images/logos/4.svg' },
+              { name: 'Egytalloyd', logo: '/images/logos/5.svg' },
+              { name: 'AST', logo: '/images/logos/6.svg' },
+            ],
+          ].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">
+                    <img src={company.logo} alt={company.name} width={120} height={40} />
+                  </li>
+                ))}
+              </ul>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </Container>
+  )
+}
--- a/public/images/components/NavLink.jsx
+++ b/public/images/components/NavLink.jsx
@@ -0,0 +1,12 @@
+import Link from 'next/link'
+
+export function NavLink({ href, children }) {
+  return (
+    <Link
+      href={href}
+      className="inline-block px-2 py-1 text-sm text-nav-dark hover:text-primary-terracotta transition-colors duration-200"
+    >
+      {children}
+    </Link>
+  )
+}
--- a/public/images/components/NewFeatures.jsx
+++ b/public/images/components/NewFeatures.jsx
@@ -0,0 +1,64 @@
+import { CloudArrowUpIcon, LockClosedIcon, ServerIcon, SparklesIcon } from '@heroicons/react/20/solid'
+
+const features = [
+  {
+    name: 'Your journey, your way.',
+    description:
+      "Create a travel experience that suits you perfectly, from the length of your stay to a tailored itinerary. Our expert guidance ensures every detail, from daily activities to dining options, aligns with your vision for a bespoke adventure.",
+    icon: SparklesIcon,
+  },
+  {
+    name: 'Magical Expeditions',
+    description:
+      "Let Veda take you on a journey of a lifetime. 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-transparent pb-0 pt-4 lg:pt-24 pb:12">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-2xllg:max-w-7xl pb-10 lg:pb-16">
+        <p className="mt-2 max-w-lg  text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
+        Experiences
+        </p>
+        <p className="mt-4 max-w-5xl text-xl/5 font-medium tracking-[-0.045em] lg:tracking-[-0.02em] leading-[1.3] lg:leading-[1.4] lg:text-2xl text-darkgr">
+        At VEDA, we embrace a transformative journey by aligning with your personal preferences and holistic experiences. Our mission is to offer profound and memorable moments that inspire and uplift, guiding you on a journey within.
+        </p>
+      </div>
+        <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
+        <div className="flex items-start justify-end lg:justify-start lg:order-first">
+          <img
+             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">
+              <dl className="lg:mt-10 mt-0 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 lg:text-xl text-lg text-darkgr-900">
+                      <feature.icon aria-hidden="true" className="absolute left-1 top-1 h-5 w-5 text-gold-300" />
+                      {feature.name}
+                    </dt>{' '}
+                    <dd className='mt-1 text-sm leading-tight font-medium tracking-[-0.001em] lg:text-base text-darkgr-950'>{feature.description}</dd>
+                  </div>
+                ))}
+              </dl>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/public/images/components/NewFeatures2.jsx
+++ b/public/images/components/NewFeatures2.jsx
@@ -0,0 +1,56 @@
+import { SparklesIcon } from '@heroicons/react/20/solid'
+
+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-transparent pt-0 lg:pt-12 lg:pb-24 pb-12">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
+          <div className="lg:order-first">
+            <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 lg:text-xl text-lg text-darkgr-900">
+                      <feature.icon aria-hidden="true" className="absolute left-1 top-1 h-5 w-5 text-gold-300" />
+                      {feature.name}
+                    </dt>{' '}
+                    <dd className='mt-1 text-sm leading-tight font-medium tracking-[-0.001em] lg:text-base text-darkgr-950'>{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/public/images/components/Nomads.jsx
+++ b/public/images/components/Nomads.jsx
@@ -0,0 +1,206 @@
+'use client'
+
+import { Fragment, useState } from 'react'
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+  Popover,
+  PopoverButton,
+  PopoverGroup,
+  PopoverPanel,
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels,
+} from '@headlessui/react'
+import {
+  Bars3Icon,
+  HeartIcon,
+  MagnifyingGlassIcon,
+  MinusIcon,
+  PlusIcon,
+  ShoppingBagIcon,
+  UserIcon,
+  XMarkIcon,
+} from '@heroicons/react/24/outline'
+import { StarIcon } from '@heroicons/react/20/solid'
+
+
+const product = {
+  name: 'Digital Nomads Hub',
+  images: [
+    {
+      id: 1,
+      name: 'Digital Nomad Space 1',
+      src: '/images/nomads1.jpg',
+      alt: 'Digital nomad workspace with Nile views',
+    },
+    {
+      id: 2,
+      name: 'Digital Nomad Space 2', 
+      src: '/images/nomads2.jpg',
+      alt: 'Co-working area on dahabiya',
+    },
+    {
+      id: 3,
+      name: 'Digital Nomad Space 3',
+      src: '/images/nomads3.jpg',
+      alt: 'Remote work setup with river backdrop',
+    },
+    {
+      id: 4,
+      name: 'Digital Nomad Space 4',
+      src: '/images/nomads4.jpg',
+      alt: 'Inspiring workspace for digital nomads',
+    },
+  ],
+  colors: [
+    { id: 'washed-black', name: 'Washed Black', classes: 'bg-gray-700 checked:outline-gray-700' },
+    { id: 'white', name: 'White', classes: 'bg-white checked:outline-gray-400' },
+    { id: 'washed-gray', name: 'Washed Gray', classes: 'bg-gray-500 checked:outline-gray-500' },
+  ],
+  description: `
+    <p>A haven for remote workers seeking inspiration, focus, and balance. Our spaces combine reliable connectivity, comfortable work areas, and serene surroundings — creating the perfect environment to blend productivity with rejuvenation.</p>
+  `,
+  details: [
+    {
+      name: 'Unique Features',
+      items: [
+        'Dedicated co-working areas onboard and ashore, equipped with reliable high-speed internet and comfortable workstations.',
+        'Flexible daily schedules that allow guests to balance focused work sessions with leisure, cultural exploration, and wellness activities.',
+        'Access to wellness amenities such as yoga, meditation, and massage, ensuring physical and mental well-being while working remotely.',
+        'Opportunities to network and collaborate with other professionals, fostering creativity and idea exchange in an inspiring setting.',
+      ],
+    },
+    {
+      name: 'Benefits',
+      items: [
+        'The serene backdrop of the Nile enhances focus, productivity, and creative thinking.',
+        'A harmonious lifestyle that blends professional output with personal rejuvenation and cultural immersion.',
+        'Connections with like-minded nomads from around the world, building both professional and personal networks.',
+        'The freedom to work from anywhere while enjoying the comfort, beauty, and inspiration of an extraordinary travel experience.',
+      ],
+    },
+  ],
+}
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export function Nomads() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <div className="pb-24">
+      <main className="mx-auto max-w-7xl sm:px-6 sm:pt-16 lg:px-8">
+        <div className="mx-auto max-w-2xl lg:max-w-none">
+          {/* Product */}
+          <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
+            {/* Product info */}
+            <div className="mt-10 px-6 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>
+
+              {/* Reviews */}
+              <div className="mt-3">
+                <h3 className="sr-only">Reviews</h3>
+              </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 border-gray-200">
+                  {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 size-6 text-gray-400 group-hover:text-gray-500 group-data-open:hidden"
+                            />
+                            <MinusIcon
+                              aria-hidden="true"
+                              className="hidden size-6 text-indigo-400 group-hover:text-indigo-500 group-data-open:block"
+                            />
+                          </span>
+                        </DisclosureButton>
+                      </h3>
+                      <DisclosurePanel className="pb-6">
+                        <ul
+                          role="list"
+                          className="list-disc space-y-1 pl-5 text-sm/6 text-gray-700 marker:text-gray-300"
+                        >
+                          {detail.items.map((item) => (
+                            <li key={item} className="pl-2">
+                              {item}
+                            </li>
+                          ))}
+                        </ul>
+                      </DisclosurePanel>
+                    </Disclosure>
+                  ))}
+                </div>
+              </section>
+            </div>
+
+            {/* 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 text-gray-900 uppercase hover:bg-gray-50 focus:ring-3 focus:ring-indigo-500/50 focus:ring-offset-4 focus:outline-hidden"
+                    >
+                      <span className="sr-only">{image.name}</span>
+                      <span className="absolute inset-0 overflow-hidden rounded-md">
+                        <img alt="" src={image.src} className="size-full object-cover" />
+                      </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>
+                {product.images.map((image) => (
+                  <TabPanel key={image.id}>
+                    <img alt={image.alt} src={image.src} className="aspect-square w-full object-cover sm:rounded-lg" />
+                  </TabPanel>
+                ))}
+              </TabPanels>
+            </TabGroup>
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}
--- a/public/images/components/Pricing.jsx
+++ b/public/images/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/public/images/components/PrimaryFeatures.jsx
+++ b/public/images/components/PrimaryFeatures.jsx
@@ -0,0 +1,144 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
+import clsx from 'clsx'
+
+import { Container } from '@/components/Container'
+
+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: '/images/screenshots/payroll.png',
+  },
+  {
+    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: '/images/screenshots/expenses.png',
+  },
+  {
+    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: '/images/screenshots/reporting.png',
+  },
+]
+
+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"
+    >
+      <img
+        className="absolute left-1/2 top-1/2 max-w-none translate-x-[-44%] translate-y-[-42%]"
+        src="/images/background-features.png"
+        alt=""
+        width={2245}
+        height={1636}
+       
+      />
+      <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-6 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-6 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]">
+                      <img
+                        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/public/images/components/Retreats.jsx
+++ b/public/images/components/Retreats.jsx
@@ -0,0 +1,204 @@
+'use client'
+
+import { Fragment, useState } from 'react'
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+  Popover,
+  PopoverButton,
+  PopoverGroup,
+  PopoverPanel,
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels,
+} from '@headlessui/react'
+import {
+  Bars3Icon,
+  HeartIcon,
+  MagnifyingGlassIcon,
+  MinusIcon,
+  PlusIcon,
+  ShoppingBagIcon,
+  UserIcon,
+  XMarkIcon,
+} from '@heroicons/react/24/outline'
+import { StarIcon } from '@heroicons/react/20/solid'
+
+
+const product = {
+  name: 'Private Retreats',
+  images: [
+    {
+      id: 1,
+      name: 'Private Retreat Space 1',
+      src: '/images/private.jpg',
+      alt: 'Private retreat space with dahabiya setting',
+    },
+    {
+      id: 2,
+      name: 'Private Retreat Space 2', 
+      src: '/images/veda2.jpg',
+      alt: 'Elegant dahabiya for private groups',
+    },
+    {
+      id: 3,
+      name: 'Private Retreat Space 3',
+      src: '/images/veda3.jpg',
+      alt: 'Private retreat on the Nile',
+    },
+    {
+      id: 4,
+      name: 'Private Retreat Space 4',
+      src: '/images/veda4.jpg',
+      alt: 'Exclusive dahabiya experience',
+    },
+  ],
+  colors: [
+    { id: 'washed-black', name: 'Washed Black', classes: 'bg-gray-700 checked:outline-gray-700' },
+    { id: 'white', name: 'White', classes: 'bg-white checked:outline-gray-400' },
+    { id: 'washed-gray', name: 'Washed Gray', classes: 'bg-gray-500 checked:outline-gray-500' },
+  ],
+  description: `
+    <p>Groups enjoy privacy and a highly personalized experience aboard our elegant and homy dahabiya, ensuring a vibrant, exclusive and secluded setting.</p>
+  `,
+  details: [
+    {
+      name: 'Features',
+      items: [
+        'Groups enjoy privacy and a highly personalized experience aboard our elegant and homy dahabiya, ensuring a vibrant, exclusive and secluded setting.',
+        'Options range from corporate wellness programs and team-building exercises to energy practices, yoga sessions, and group\'s own activities.',
+        'Flexible itineraries: Groups can choose their journey stops, allowing for a tailored experience that can include private tours of historical landmarks, meditation in ancient temples, or leisurely sails to less-known Nile locations.',
+      ],
+    },
+    {
+      name: 'Benefits',
+      items: [
+        'The tranquil and culturally rich environment of the Nile encourages reflection, ideation, and personal growth.',
+        'The fusion of personalized wellness, cultural immersion, and luxury in a private setting ensures a unique journey that aligns with the group\'s interests.',
+        'Retreats are adaptable in length and activities, allowing for a program that perfectly fits the group\'s schedule and desired outcomes, whether for a few days or an extended period.',
+      ],
+    },
+  ],
+}
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export function Retreats() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <div className="pb-24">
+      <main className="mx-auto max-w-7xl sm:px-6 sm:pt-16 lg:px-8">
+        <div className="mx-auto max-w-2xl lg:max-w-none">
+          {/* Product */}
+          <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
+            {/* Product info */}
+            <div className="mt-10 px-6 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>
+
+              {/* Reviews */}
+              <div className="mt-3">
+                <h3 className="sr-only">Reviews</h3>
+              </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 border-gray-200">
+                  {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 size-6 text-gray-400 group-hover:text-gray-500 group-data-open:hidden"
+                            />
+                            <MinusIcon
+                              aria-hidden="true"
+                              className="hidden size-6 text-indigo-400 group-hover:text-indigo-500 group-data-open:block"
+                            />
+                          </span>
+                        </DisclosureButton>
+                      </h3>
+                      <DisclosurePanel className="pb-6">
+                        <ul
+                          role="list"
+                          className="list-disc space-y-1 pl-5 text-sm/6 text-gray-700 marker:text-gray-300"
+                        >
+                          {detail.items.map((item) => (
+                            <li key={item} className="pl-2">
+                              {item}
+                            </li>
+                          ))}
+                        </ul>
+                      </DisclosurePanel>
+                    </Disclosure>
+                  ))}
+                </div>
+              </section>
+            </div>
+
+            {/* 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 text-gray-900 uppercase hover:bg-gray-50 focus:ring-3 focus:ring-indigo-500/50 focus:ring-offset-4 focus:outline-hidden"
+                    >
+                      <span className="sr-only">{image.name}</span>
+                      <span className="absolute inset-0 overflow-hidden rounded-md">
+                        <img alt="" src={image.src} className="size-full object-cover" />
+                      </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>
+                {product.images.map((image) => (
+                  <TabPanel key={image.id}>
+                    <img alt={image.alt} src={image.src} className="aspect-square w-full object-cover sm:rounded-lg" />
+                  </TabPanel>
+                ))}
+              </TabPanels>
+            </TabGroup>
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}
--- a/public/images/components/Route.jsx
+++ b/public/images/components/Route.jsx
@@ -0,0 +1,53 @@
+"use client"
+
+import { CloudArrowUpIcon, LockClosedIcon, ServerIcon } from '@heroicons/react/20/solid'
+import { useId } from 'react'
+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-transparent pt-6 pb-24 px-6 lg:px-8">
+      <div className="mx-auto max-w-7xl ">
+        <div className="grid grid-cols-1 gap-x-8 gap-y-4 lg:gap-y-16 lg:grid-cols-2 lg:items-start">
+          <div className="lg:pr-4 lg:pt-4">
+            <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-lg">
+              <p className="font-display text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">Itinerary</p>
+              <p className="mt-4 max-w-5xl text-xl/5 font-medium tracking-[-0.045em] lg:tracking-[-0.02em] leading-[1.3] lg:leading-[1.4] lg:text-2xl text-darkgr">
+              By following the natural flow of the Nile river you will discover some of the most sacred places of the world.</p>
+              <p className="my-6 max-w-5xl text-xl/5 font-medium tracking-[-0.045em] lg:tracking-[-0.02em] leading-[1.3] lg:leading-[1.4] lg:text-2xl text-darkgr">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-4 mb-10 lg:mb-40 lg:py-2 xs:mb-20 flex justify-startgap-x-6">
+              <Button href="/contact" color="blue">
+              <span className="font-semibold tracking-wide">
+                Book Now
+              </span>
+            </Button>
+            </div>
+            </div>
+          </div>
+          <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/public/images/components/SecondaryFeatures.jsx
+++ b/public/images/components/SecondaryFeatures.jsx
@@ -0,0 +1,280 @@
+'use client'
+
+import { useId } from 'react'
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
+import clsx from 'clsx'
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+
+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: '/images/dahabiyas/veda1.jpg',
+    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: '/images/dahabiyas/veda2.jpg',
+    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: '/images/dahabiyas/veda3.jpg',
+    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: '/images/dahabiyas/veda4.jpg',
+    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-6 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">
+            <img
+              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">
+                  <img
+                    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-6 max-w-3xl text-lg leading-8 text-gray-600">
+            Discover peaceful platforms where every detail ensures a truly memorable stay.
+          </p>
+        </div>
+        <FeaturesMobile />
+        <FeaturesDesktop />
+      </Container>
+    </section>
+  )
+}
--- a/public/images/components/SlimLayout.jsx
+++ b/public/images/components/SlimLayout.jsx
@@ -0,0 +1,22 @@
+
+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">
+          <img
+            className="absolute inset-0 h-full w-full object-cover"
+            src="/images/background-auth.jpg"
+            alt=""
+           
+          />
+        </div>
+      </div>
+    </>
+  )
+}
--- a/public/images/components/Story.jsx
+++ b/public/images/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/public/images/components/Story2.jsx
+++ b/public/images/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/public/images/components/Team.jsx
+++ b/public/images/components/Team.jsx
@@ -0,0 +1,74 @@
+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/public/images/components/Testimonials.jsx
+++ b/public/images/components/Testimonials.jsx
@@ -0,0 +1,145 @@
+
+import { Container } from '@/components/Container'
+
+const testimonials = [
+  [
+    {
+      content:
+        "I had the most wonderful retreat with VEDA along the Nile. You are really immersed in its atmosphere as you slowly pass the sleepy river bank villages, local farmers going about their day, and lush green nature while surrounded by the history of the pharaohs past. It's not just a retreat with healthy eating and relaxing sessions, it's a spiritual experience where you are invited to open your heart and mind, if you let go you will leave feeling so uplifted. I will definitely be back again!",
+      author: {
+        name: 'Adnan',
+        role: 'Retreat Guest',
+        image: '/images/comments/Adnan.jpg',
+      },
+    },
+    {
+      content:
+        "When I set foot on the ship, my world was changed. The sincere joy and authenticity of the team, the powerful serenity of the river, the quality of the rooms with incredible views, it all puts you directly in an atmosphere of total relaxation. The humanity and the delicacy of the attention I could feel touched my heart very deeply. The experience has changed something inside of me.",
+      author: {
+        name: 'Eloise',
+        role: 'Retreat Guest',
+        image: '/images/comments/eloise.jpg',
+      },
+    },
+  ],
+  [
+    {
+      content:
+        "The VEDA trip on the Nile was not only a journey in the geographic sense but really also a journey that my heart and soul took. I was not that happy about going but when I boarded the Veda boat in Luxor, I transformed in a second from a frowning person to a smiling one. The peaceful, serene, majestic nile effects reflect on you. I will never forget the trip and every part of me is begging me to return as soon as possible.",
+      author: {
+        name: 'Owen',
+        role: 'Retreat Guest',
+        image: '/images/comments/owen.jpg',
+      },
+    },
+    {
+      content:
+        "I am very fortunate to have attended a VEDA retreat on the Nile last December. It was the best Christmas gift possible: great group, magical Nile, incredible temples. VEDA's understated luxury, smart cuisine and extremely accommodating staff made the experience extra special. My personal discovery was the temples. Each temple had a unique gift to offer: Isis' motherly support, Zahmet's clarity, Osiris' protection.",
+      author: {
+        name: 'Helena',
+        role: 'Retreat Guest',
+        image: '/images/comments/helena.jpg',
+      },
+    },
+  ],
+  [
+    {
+      content:
+        "VEDA exceeded every expectation I had. The combination of ancient Egyptian culture and modern wellness practices created something truly magical. Watching the sunrise over the Nile while practicing yoga on deck was life-changing!",
+      author: {
+        name: 'Sacha',
+        role: 'Wellness Enthusiast',
+        image: '/images/comments/sacha.jpg',
+      },
+    },
+    {
+      content:
+        "As someone who travels frequently for work, I can honestly say VEDA is in a league of its own. The thoughtful curation of experiences, from temple visits with knowledgeable guides to intimate cooking classes with local ingredients, created memories I'll treasure forever. The dahabiya itself is a floating sanctuary of peace and luxury.",
+      author: {
+        name: 'Karoline',
+        role: 'Travel Consultant',
+        image: '/images/comments/karoline.jpeg',
+      },
+    },
+    {
+      content:
+        "What struck me most about VEDA was how they seamlessly blend adventure with relaxation. One moment you're exploring ancient tombs, the next you're enjoying a massage while floating down the world's most famous river.",
+      author: {
+        name: 'Sam',
+        role: 'Adventure Seeker',
+        image: '/images/comments/sam.jpg',
+      },
+    },
+  ],
+]
+
+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-transparent lg:pt-24 pt-8 pb-24"
+    >
+      <Container>
+        <div className="mx-auto max-w-5xl md:text-center">
+          <h2 className="font-display text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
+            Testimonials
+          </h2>
+          <p className="mb-8 mt-4 text-xl/5 font-medium tracking-[-0.045em] lg:tracking-[-0.02em] leading-[1.3] lg:leading-[1.4] lg:text-2xl text-darkgr">
+          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-8 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="lg:text-base text-sm 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">
+                          <img
+                            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/public/images/components/ThirdFeatures.jsx
+++ b/public/images/components/ThirdFeatures.jsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+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/public/images/components/Timeline.jsx
+++ b/public/images/components/Timeline.jsx
@@ -0,0 +1,137 @@
+/*
+  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/public/images/components/Veda1.jsx
+++ b/public/images/components/Veda1.jsx
@@ -0,0 +1,193 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  Radio,
+  RadioGroup,
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels,
+} from '@headlessui/react'
+import { StarIcon } from '@heroicons/react/20/solid'
+import { HeartIcon } 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-6 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-6 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="border-t border-gray-200 pt-6">
+                <h3 className="text-lg font-medium text-gray-900">FEATURES</h3>
+                <div className="mt-4">
+                  <ul role="list" className="list-disc pl-5 space-y-2">
+                    {product.details[0].items.map((item) => (
+                      <li key={item} className="text-gray-700">
+                        <span className="text-gray-900">{item}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </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/public/images/components/Veda2.jsx
+++ b/public/images/components/Veda2.jsx
@@ -0,0 +1,193 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels,
+} from '@headlessui/react'
+
+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-6 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-6 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="border-t border-gray-200 pt-6">
+                <h3 className="text-lg font-medium text-gray-900">FEATURES</h3>
+                <div className="mt-4">
+                  <ul role="list" className="list-disc pl-5 space-y-2">
+                    {product.details[0].items.map((item) => (
+                      <li key={item} className="text-gray-700">
+                        <span className="text-gray-900">{item}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </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/public/images/components/Veda3.jsx
+++ b/public/images/components/Veda3.jsx
@@ -0,0 +1,190 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  Radio,
+  RadioGroup,
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels,
+} from '@headlessui/react'
+import { StarIcon } from '@heroicons/react/20/solid'
+import { HeartIcon } 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-6 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-6 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="border-t border-gray-200 pt-6">
+                <h3 className="text-lg font-medium text-gray-900">FEATURES</h3>
+                <div className="mt-4">
+                  <ul role="list" className="list-disc pl-5 space-y-2">
+                    {product.details[0].items.map((item) => (
+                      <li key={item} className="text-gray-700">
+                        <span className="text-gray-900">{item}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </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/public/images/components/Veda4.jsx
+++ b/public/images/components/Veda4.jsx
@@ -0,0 +1,193 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels,
+} from '@headlessui/react'
+
+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-6 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-6 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="border-t border-gray-200 pt-6">
+                <h3 className="text-lg font-medium text-gray-900">FEATURES</h3>
+                <div className="mt-4">
+                  <ul role="list" className="list-disc pl-5 space-y-2">
+                    {product.details[0].items.map((item) => (
+                      <li key={item} className="text-gray-700">
+                        <span className="text-gray-900">{item}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </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/public/images/components/Welcome.jsx
+++ b/public/images/components/Welcome.jsx
@@ -0,0 +1,15 @@
+export  function Welcome() {
+  return (
+    <div className="bg-[#28602C] pb-24 pt-0 mt-0 -z-20 relative">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-2xl lg:mx-0">
+          <h2 className="mt-2 text-5xl font-semibold tracking-tight text-white sm:text-7xl">Support center</h2>
+          <p className="mt-8 text-lg font-medium text-pretty text-gray-100 sm:text-xl/8">
+            Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet
+            fugiat veniam occaecat fugiat.
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/public/images/components/about.jsx
+++ b/public/images/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">
+                    <img src={company.logo} alt={company.name} />
+                  </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/public/images/components/link.jsx
+++ b/public/images/components/link.jsx
@@ -0,0 +1,14 @@
+import NextLink from 'next/link'
+import { clsx } from 'clsx'
+
+export function Link({ href, className, children, ...props }) {
+  return (
+    <NextLink
+      href={href}
+      className={clsx(className)}
+      {...props}
+    >
+      {children}
+    </NextLink>
+  )
+}
--- a/public/images/components/text.jsx
+++ b/public/images/components/text.jsx
@@ -0,0 +1,29 @@
+import { clsx } from 'clsx'
+
+export function Heading({ as: Component = 'h1', className, children, ...props }) {
+  return (
+    <Component
+      className={clsx(
+        'text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </Component>
+  )
+}
+
+export function Subheading({ className, children, ...props }) {
+  return (
+    <h3
+      className={clsx(
+        'text-lg font-medium text-gray-900',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </h3>
+  )
+}