activities

src/app/experiences/page.jsx

@@ -12,6 +12,8 @@ import { Nomads } from '@/components/Nomads'
 import { Experience } from '@/components/Exp2'
 import FFVid from '@/components/FreeflowVideo'
 import { Experiences } from '@/components/Experiences'
+import Carousel from '@/components/Carousel'
+import { Testimonials } from '@/components/Testimonials'
 
 export default function ExperiencesPage() {
   const [selectedExperience, setSelectedExperience] = useState('community')
@@ -37,8 +39,9 @@ export default function ExperiencesPage() {
       <main>
         <Experiences onExperienceSelect={setSelectedExperience} />
         {renderSelectedComponent()}
+        <Carousel />
         <FFVid />
-        <Exp/>
+        <Testimonials />
       </main>
       <Footer />
     </>

src/components/Carousel.jsx

@@ -71,13 +71,13 @@ const MultiCardCarousel = () => {
   const displayCards = isMobile ? [cards[currentIndex]] : cards.slice(currentIndex, currentIndex + 3);
 
   return (
-    <div className="bg-transparent flex items-center justify-center py-16 lg:py-12 px-6">
+    <div className="bg-transparent flex items-center justify-center py-16 px-6">
       <div className="w-full max-w-7xl ">
         <div className="text-left mx-auto max-w-7xl ">
           <H2 className="">
             Activities
           </H2>
-          <P className="max-w-5xl mb-12">
+          <P className="max-w-5xl mb-8">
             Explore a diverse range of activities designed to elevate your Mind, Body, and Soul.
           </P>
         </div>

src/components/Experiences.jsx

@@ -19,7 +19,7 @@ export function Experiences({ onExperienceSelect }) {
               <div className="absolute inset-0 bg-black opacity-30 group-hover:opacity-20 transition-opacity duration-300"></div>
               {/* Text overlay */}
               <div className="absolute inset-0 flex items-center justify-center">
-                <H2 className="text-white text-center font-semibold group-hover:scale-110 transition-transform duration-300">Community Building</H2>
+                <H3 className="text-white text-center font-semibold group-hover:scale-110 transition-transform duration-300">Community Building</H3>
               </div>
             </div>
           </div>
@@ -35,7 +35,7 @@ export function Experiences({ onExperienceSelect }) {
               <div className="absolute inset-0 bg-black opacity-30 group-hover:opacity-20 transition-opacity duration-300"></div>
               {/* Text overlay */}
               <div className="absolute inset-0 flex items-center justify-center">
-                <H2 className="text-white text-center font-semibold group-hover:scale-110 transition-transform duration-300">Events & Conferences</H2>
+                <H3  className="text-white text-center font-semibold group-hover:scale-110 transition-transform duration-300">Events & Conferences</H3>
               </div>
             </div>
           </div>
@@ -51,7 +51,7 @@ export function Experiences({ onExperienceSelect }) {
               <div className="absolute inset-0 bg-black opacity-30 group-hover:opacity-20 transition-opacity duration-300"></div>
               {/* Text overlay */}
               <div className="absolute inset-0 flex items-center justify-center">
-                <H2 className="text-white text-center font-semibold group-hover:scale-110 transition-transform duration-300">Private Retreats</H2>
+                <H3 className="text-white text-center font-semibold group-hover:scale-110 transition-transform duration-300">Private Retreats</H3>
               </div>
             </div>
           </div>
@@ -67,7 +67,7 @@ export function Experiences({ onExperienceSelect }) {
               <div className="absolute inset-0 bg-black opacity-30 group-hover:opacity-20 transition-opacity duration-300"></div>
               {/* Text overlay */}
               <div className="absolute inset-0 flex items-center justify-center">
-                <H2 className="text-white text-center font-semibold group-hover:scale-110 transition-transform duration-300">Digital Nomad Hub</H2>
+                <H3 className="text-white text-center font-semibold group-hover:scale-110 transition-transform duration-300">Digital Nomad Hub</H3>
               </div>
             </div>
           </div>

src/components/FreeflowVideo.jsx

@@ -1,6 +1,8 @@
 import { Button } from '@/components/Button'
 import { Container } from '@/components/Container'
 import React from 'react'
+import { H1, H2, H3, H4, P, PS, PXS, PXXS } from '@/components/text'
+
 
 
 const FFVid = () => {
@@ -8,16 +10,16 @@ const FFVid = () => {
         <section
       id="testimonials"
       aria-label="What our customers are saying"
-      className="bg-transparent pt-6 pb-24"
+      className="bg-transparent py-16"
     >
       <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">
+          <H2 className="">
           A Glimpse Into Private Retreats at VEDA
-          </h2>
+          </H2>
-          <p className="mt-4 mb-12 text-lg pb-6 tracking-tight text-slate-700">
+          <P className="mt-4 mb-8 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>
+          </P>
         </div>
       <div className="video-container">
         <iframe
@@ -27,7 +29,7 @@ const FFVid = () => {
           frameBorder="0"
           allow="autoplay; fullscreen; picture-in-picture"
           allowFullScreen
-          className="rounded-lg w-full max-w-6xl mx-auto"
+          className="rounded-lg w-full max-w-7xl mx-auto"
         ></iframe>
       </div>
         </Container>