From 296545ed3acbc8ddb455e5a72df5bb5690ac0134 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Wed, 27 Aug 2025 13:42:03 +0200
Subject: [PATCH] edit

---
 src/app/experiences/page.jsx   |  31 ++++--
 src/components/Community.jsx   |  60 +----------
 src/components/Events.jsx      | 183 ++++++---------------------------
 src/components/Experiences.jsx |  18 +++-
 src/components/Nomads.jsx      | 163 ++++++++---------------------
 src/components/Retreats.jsx    |  10 +-
 6 files changed, 118 insertions(+), 347 deletions(-)

diff --git a/src/app/experiences/page.jsx b/src/app/experiences/page.jsx
index fd6fd9f..49e56b1 100644
--- a/src/app/experiences/page.jsx
+++ b/src/app/experiences/page.jsx
@@ -1,3 +1,6 @@
+'use client'
+
+import { useState } from 'react'
 import { CallToAction3 } from '@/components/CallToAction3'
 import { Footer } from '@/components/Footer'
 import { Header } from '@/components/Header'
@@ -10,22 +13,34 @@ import { Experience } from '@/components/Exp2'
 import FFVid from '@/components/FreeflowVideo'
 import { Experiences } from '@/components/Experiences'
 
-
 export default function ExperiencesPage() {
+  const [selectedExperience, setSelectedExperience] = useState('community')
+
+  const renderSelectedComponent = () => {
+    switch (selectedExperience) {
+      case 'community':
+        return <Community />
+      case 'events':
+        return <Events />
+      case 'nomads':
+        return <Nomads />
+      case 'retreats':
+        return <Retreats />
+      default:
+        return <Community />
+    }
+  }
+
   return (
     <>
       <Header />
       <main>
-        <Experiences/>
-        <Experience />
-        <Community />
-        <Retreats />
-        <Events />
-        <Nomads />
+        <Experiences onExperienceSelect={setSelectedExperience} />
+        {renderSelectedComponent()}
         <FFVid/>
         <Exp/>
       </main>
       <Footer />
     </>
   )
-}
\ No newline at end of file
+}
diff --git a/src/components/Community.jsx b/src/components/Community.jsx
index 9c92ee9..4fcb8bb 100644
--- a/src/components/Community.jsx
+++ b/src/components/Community.jsx
@@ -1,4 +1,3 @@
-import { P, H3, H4, PXS, PXXS } from '@/components/text'
 import {
   Tab,
   TabGroup,
@@ -8,7 +7,6 @@ import {
 } from '@headlessui/react'
 import { H2, PS } from '@/components/text'
 
-
 const product = {
   name: 'Community Buildings',
   images: [
@@ -37,11 +35,6 @@ const product = {
       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: '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.',
   details: [
     {
@@ -54,54 +47,11 @@ const product = {
     },
   ],
 }
-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() {
   return (
     <div className="pb-24">
-      <main className="mx-auto max-w-7xl sm:px-6 sm:pt-12 lg:px-8">
+      <main className="mx-auto max-w-7xl sm:px-6 sm:pt-24 lg:px-0">
         <div className="mx-auto max-w-2xl lg:max-w-none">
           {/* Product */}
           <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
@@ -139,22 +89,16 @@ export function Community() {
 
             {/* Product info */}
             <div className="mt-6 px-6 sm:mt-16 sm:px-0 lg:mt-0">
-              <H2 className="">{product.name}</H2>
+              <H2>{product.name}</H2>
 
-             
-
-              
               <div className="mt-4">
                 <h3 className="sr-only">Description</h3>
-
                 <div className="space-y-2 text-base text-gray-700">
                   <PS>{product.description}</PS>
                 </div>
               </div>
 
               <section aria-labelledby="details-heading" className="mt-8">
-               
-
                 <div className="space-y-4 border-t border-gray-300 pt-4">
                   {product.details.map((detail) => (
                     <div key={detail.name}>
diff --git a/src/components/Events.jsx b/src/components/Events.jsx
index 3435b52..3d6121d 100644
--- a/src/components/Events.jsx
+++ b/src/components/Events.jsx
@@ -1,35 +1,11 @@
-'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'
-
+import { H2, PS } from '@/components/text'
 
 const product = {
   name: 'Events & Conferences',
@@ -59,17 +35,10 @@ const product = {
       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>
-  `,
+  description: "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.",
   details: [
     {
-      name: 'Unique Features',
+      name: '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.',
@@ -78,69 +47,13 @@ const product = {
         '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">
+      <main className="mx-auto max-w-7xl sm:px-6 sm:pt-24 lg:px-0">
         <div className="mx-auto max-w-2xl lg:max-w-none">
           {/* Product */}
           <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
@@ -152,15 +65,15 @@ export function Events() {
                   {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"
+                      className="group relative flex h-24 cursor-pointer items-center justify-center rounded-md bg-transparent 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">
+                      <span className="absolute inset-0 overflow-hidden ">
                         <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"
+                        className="pointer-events-none absolute inset-0 ring-1 ring-transparent ring-offset-2 group-data-selected:ring-indigo-500"
                       />
                     </Tab>
                   ))}
@@ -170,84 +83,50 @@ export function Events() {
               <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" />
+                    <img alt={image.alt} src={image.src} className="aspect-square w-full object-cover" />
                   </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-6 px-6 sm:mt-16 sm:px-0 lg:mt-0">
+              <H2>{product.name}</H2>
 
-              <div className="mt-3">
-                <h2 className="sr-only">Product information</h2>
-              </div>
-
-              {/* Reviews */}
-              <div className="mt-3">
-                <h3 className="sr-only">Reviews</h3>
-              </div>
-
-              <div className="mt-6">
+              <div className="mt-4">
                 <h3 className="sr-only">Description</h3>
-
-                <div
-                  dangerouslySetInnerHTML={{ __html: product.description }}
-                  className="space-y-6 text-base text-gray-700"
-                />
+                <div className="space-y-2 text-base text-gray-700">
+                  <PS>{product.description}</PS>
+                </div>
               </div>
 
-  
-
-              <section aria-labelledby="details-heading" className="mt-12">
-                <h2 id="details-heading" className="sr-only">
-                  Additional details
-                </h2>
-
-                <div className="divide-y divide-gray-200 border-t border-gray-200">
+              <section aria-labelledby="details-heading" className="mt-8">
+                <div className="space-y-4 border-t border-gray-300 pt-4">
                   {product.details.map((detail) => (
-                    <Disclosure key={detail.name} as="div">
+                    <div key={detail.name}>
                       <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>
+                        <PS className="font-medium text-gray-900 mb-4">
+                          {detail.name}
+                        </PS>
                       </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>
+                      <ul
+                        role="list"
+                        className="list-disc space-y-2 pl-5 text-sm/6 text-gray-700 marker:text-gray-300"
+                      >
+                        {detail.items.map((item) => (
+                          <li key={item} className="pl-2 font-light">
+                            {item}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
                   ))}
                 </div>
               </section>
             </div>
           </div>
-
         </div>
       </main>
-
-
     </div>
   )
 }
diff --git a/src/components/Experiences.jsx b/src/components/Experiences.jsx
index 8381f26..e3750c2 100644
--- a/src/components/Experiences.jsx
+++ b/src/components/Experiences.jsx
@@ -1,4 +1,4 @@
-import { H2, P , PS, PXS, H3, H4 } from "@/components/text";
+import { H1, H2, P , PS, PXS, H3, H4 } from "@/components/text";
 
 
 export function Experiences() {
@@ -17,6 +17,10 @@ export function Experiences() {
               />
               {/* Black overlay */}
               <div className="absolute inset-0 bg-black opacity-30"></div>
+              {/* Text overlay */}
+              <div className="absolute inset-0 flex items-center justify-center">
+                <H3 className="text-white text-center font-semibold">Community Building</H3>
+              </div>
             </div>
           </div>
           {/* Photo 2 - Top middle */}
@@ -29,6 +33,10 @@ export function Experiences() {
               />
               {/* Black overlay */}
               <div className="absolute inset-0 bg-black opacity-30"></div>
+              {/* Text overlay */}
+              <div className="absolute inset-0 flex items-center justify-center">
+                <H3 className="text-white text-center font-semibold">Events & Conferences</H3>
+              </div>
             </div>
           </div>
           {/* Photo 4 - Right large image */}
@@ -41,6 +49,10 @@ export function Experiences() {
               />
               {/* Black overlay */}
               <div className="absolute inset-0 bg-black opacity-30"></div>
+              {/* Text overlay */}
+              <div className="absolute inset-0 flex items-center justify-center">
+                <H3 className="text-white text-center font-semibold">Private Retreats</H3>
+              </div>
             </div>
           </div>
           {/* Photo 3 - Bottom middle */}
@@ -53,6 +65,10 @@ export function Experiences() {
               />
               {/* Black overlay */}
               <div className="absolute inset-0 bg-black opacity-30"></div>
+              {/* Text overlay */}
+              <div className="absolute inset-0 flex items-center justify-center">
+                <H3 className="text-white text-center font-semibold">Digital Nomad Hub</H3>
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/components/Nomads.jsx b/src/components/Nomads.jsx
index 5c31f68..9cef1f7 100644
--- a/src/components/Nomads.jsx
+++ b/src/components/Nomads.jsx
@@ -1,35 +1,11 @@
-'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'
-
+import { H2, PS } from '@/components/text'
 
 const product = {
   name: 'Digital Nomads Hub',
@@ -59,17 +35,10 @@ const product = {
       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>
-  `,
+  description: '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.',
   details: [
     {
-      name: 'Unique Features',
+      name: '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.',
@@ -77,96 +46,16 @@ const product = {
         '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">
+      <main className="mx-auto max-w-7xl sm:px-6 sm:pt-24 lg:px-0">
         <div className="mx-auto max-w-2xl lg:max-w-none">
           {/* Product */}
           <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
-            {/* 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 */}
@@ -175,15 +64,15 @@ export function Nomads() {
                   {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"
+                      className="group relative flex h-24 cursor-pointer items-center justify-center rounded-md bg-transparent 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">
+                      <span className="absolute inset-0 overflow-hidden ">
                         <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"
+                        className="pointer-events-none absolute inset-0 ring-1 ring-transparent ring-offset-2 group-data-selected:ring-indigo-500"
                       />
                     </Tab>
                   ))}
@@ -193,11 +82,47 @@ export function Nomads() {
               <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" />
+                    <img alt={image.alt} src={image.src} className="aspect-square w-full object-cover" />
                   </TabPanel>
                 ))}
               </TabPanels>
             </TabGroup>
+
+            {/* Product info */}
+            <div className="mt-6 px-6 sm:mt-16 sm:px-0 lg:mt-0">
+              <H2>{product.name}</H2>
+
+              <div className="mt-4">
+                <h3 className="sr-only">Description</h3>
+                <div className="space-y-2 text-base text-gray-700">
+                  <PS>{product.description}</PS>
+                </div>
+              </div>
+
+              <section aria-labelledby="details-heading" className="mt-8">
+                <div className="space-y-4 border-t border-gray-300 pt-4">
+                  {product.details.map((detail) => (
+                    <div key={detail.name}>
+                      <h3>
+                        <PS className="font-medium text-gray-900 mb-4">
+                          {detail.name}
+                        </PS>
+                      </h3>
+                      <ul
+                        role="list"
+                        className="list-disc space-y-2 pl-5 text-sm/6 text-gray-700 marker:text-gray-300"
+                      >
+                        {detail.items.map((item) => (
+                          <li key={item} className="pl-2 font-light">
+                            {item}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  ))}
+                </div>
+              </section>
+            </div>
           </div>
         </div>
       </main>
diff --git a/src/components/Retreats.jsx b/src/components/Retreats.jsx
index c857291..a479f5f 100644
--- a/src/components/Retreats.jsx
+++ b/src/components/Retreats.jsx
@@ -52,14 +52,6 @@ const product = {
         '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.',
-      ],
-    },
   ],
 }
 
@@ -70,7 +62,7 @@ function classNames(...classes) {
 export function Retreats() {
   return (
     <div className="pb-24">
-      <main className="mx-auto max-w-7xl sm:px-6 sm:pt-12 lg:px-8">
+      <main className="mx-auto max-w-7xl sm:px-6 sm:pt-12 lg:px-0">
         <div className="mx-auto max-w-2xl lg:max-w-none">
           {/* Product */}
           <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">