veda/www_veda_2025
12
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

toggoe

Browse Source
This commit is contained in:
sasha-astiadi
2025-08-27 13:47:14 +02:00
parent 296545ed3a
commit 9b8934fef7
1 changed files with 17 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/Experiences.jsx
View File

@@ -1,7 +1,7 @@
import { H1, H2, P , PS, PXS, H3, H4 } from "@/components/text"; import { H1, H2, P , PS, PXS, H3, H4 } from "@/components/text";
export function Experiences() { export function Experiences({ onExperienceSelect }) {
return ( return (
<div className="bg-transparent"> <div className="bg-transparent">
<div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-0 mt-16"> <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"> <div className="grid grid-cols-1 gap-4 lg:grid-cols-6 lg:grid-rows-2">
{/* Photo 1 - Left large image */} {/* Photo 1 - Left large image */}
<div className="flex lg:col-span-2 lg:row-span-2"> <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 <img
alt="" alt=""
src="/images/activities/community.jpg" 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 */} {/* 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 */} {/* Text overlay */}
<div className="absolute inset-0 flex items-center justify-center"> <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> </div>
</div> </div>
{/* Photo 2 - Top middle */} {/* Photo 2 - Top middle */}
<div className="flex lg:col-span-2"> <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 <img
alt="" alt=""
src="/images/activities/events.jpg" 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 */} {/* 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 */} {/* Text overlay */}
<div className="absolute inset-0 flex items-center justify-center"> <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> </div>
</div> </div>
{/* Photo 4 - Right large image */} {/* Photo 4 - Right large image */}
<div className="flex lg:col-span-2 lg:row-span-2"> <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 <img
alt="" alt=""
src="/images/activities/private.jpg" 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 */} {/* 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 */} {/* Text overlay */}
<div className="absolute inset-0 flex items-center justify-center"> <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> </div>
</div> </div>
{/* Photo 3 - Bottom middle */} {/* Photo 3 - Bottom middle */}
<div className="flex lg:col-span-2"> <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 <img
alt="" alt=""
src="/images/activities/nomad.jpg" 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 */} {/* 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 */} {/* Text overlay */}
<div className="absolute inset-0 flex items-center justify-center"> <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> </div>
</div> </div>