From 9b8934fef71cb419beb5f26bfed599dc05b90d68 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Wed, 27 Aug 2025 13:47:14 +0200
Subject: [PATCH] toggoe

---
 src/components/Experiences.jsx | 34 +++++++++++++++++-----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/Experiences.jsx b/src/components/Experiences.jsx
index e3750c2..c8bef87 100644
--- a/src/components/Experiences.jsx
+++ b/src/components/Experiences.jsx
@@ -1,7 +1,7 @@
 import { H1, H2, P , PS, PXS, H3, H4 } from "@/components/text";
 
 
-export function Experiences() {
+export function Experiences({ onExperienceSelect }) {
   return (           
     <div className="bg-transparent">    
       <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-0 mt-16">
@@ -9,65 +9,65 @@ export function Experiences() {
         <div className="grid grid-cols-1 gap-4 lg:grid-cols-6 lg:grid-rows-2">
           {/* Photo 1 - Left large image */}
           <div className="flex lg:col-span-2 lg:row-span-2">
-            <div className="w-full overflow-hidden relative">
+            <div className="w-full overflow-hidden relative cursor-pointer group" onClick={() => onExperienceSelect('community')}>
               <img
                 alt=""
                 src="/images/activities/community.jpg"
-                className="h-60 lg:h-full w-full object-cover object-center"
+                className="h-60 lg:h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-105"
               />
               {/* Black overlay */}
-              <div className="absolute inset-0 bg-black opacity-30"></div>
+              <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">
-                <H3 className="text-white text-center font-semibold">Community Building</H3>
+                <H2 className="text-white text-center font-semibold group-hover:scale-110 transition-transform duration-300">Community Building</H2>
               </div>
             </div>
           </div>
           {/* Photo 2 - Top middle */}
           <div className="flex lg:col-span-2">
-            <div className="w-full overflow-hidden relative">
+            <div className="w-full overflow-hidden relative cursor-pointer group" onClick={() => onExperienceSelect('events')}>
               <img
                 alt=""
                 src="/images/activities/events.jpg"
-                className="h-60 lg:h-full w-full object-cover object-center"
+                className="h-60 lg:h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-105"
               />
               {/* Black overlay */}
-              <div className="absolute inset-0 bg-black opacity-30"></div>
+              <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">
-                <H3 className="text-white text-center font-semibold">Events & Conferences</H3>
+                <H2 className="text-white text-center font-semibold group-hover:scale-110 transition-transform duration-300">Events & Conferences</H2>
               </div>
             </div>
           </div>
           {/* Photo 4 - Right large image */}
           <div className="flex lg:col-span-2 lg:row-span-2">
-            <div className="w-full overflow-hidden relative">
+            <div className="w-full overflow-hidden relative cursor-pointer group" onClick={() => onExperienceSelect('retreats')}>
               <img
                 alt=""
                 src="/images/activities/private.jpg"
-                className="h-80 lg:h-full w-full object-cover object-center"
+                className="h-80 lg:h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-105"
               />
               {/* Black overlay */}
-              <div className="absolute inset-0 bg-black opacity-30"></div>
+              <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">
-                <H3 className="text-white text-center font-semibold">Private Retreats</H3>
+                <H2 className="text-white text-center font-semibold group-hover:scale-110 transition-transform duration-300">Private Retreats</H2>
               </div>
             </div>
           </div>
           {/* Photo 3 - Bottom middle */}
           <div className="flex lg:col-span-2">
-            <div className="w-full overflow-hidden relative">
+            <div className="w-full overflow-hidden relative cursor-pointer group" onClick={() => onExperienceSelect('nomads')}>
               <img
                 alt=""
                 src="/images/activities/nomad.jpg"
-                className="h-60 lg:h-full w-full object-cover object-center"
+                className="h-60 lg:h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-105"
               />
               {/* Black overlay */}
-              <div className="absolute inset-0 bg-black opacity-30"></div>
+              <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">
-                <H3 className="text-white text-center font-semibold">Digital Nomad Hub</H3>
+                <H2 className="text-white text-center font-semibold group-hover:scale-110 transition-transform duration-300">Digital Nomad Hub</H2>
               </div>
             </div>
           </div>