edit

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 />
     </>
   )
-}
+}