sashaastiadi/www_maison_noire
1
0
Fork 0
forked from veda/www_veda_2025
Code Pull Requests Activity

add

Browse Source
This commit is contained in:
sasha-astiadi
2025-08-27 13:20:52 +02:00
parent c5e64c1a9a
commit 41bbd0d0ae
8 changed files with 143 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/Experiences.jsx
View File

@@ -2,60 +2,57 @@ import { H2, P , PS, PXS, H3, H4 } from "@/components/text";
export function Experiences() {
return (
<div className="bg-transparent pb-4">
<div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
<div className=" grid grid-cols-1 gap-4 lg:grid-cols-8 lg:grid-rows-2">
<div className="flex lg:col-span-5">
<div className="w-full overflow-hidden">
return (
<div className="bg-transparent">
<div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-0 mt-16">
<H2 className="mb-8">Discover a path to wellbeing that is uniquely yours.</H2>
<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">
<img
alt=""
src="/images/community.jpg"
className="h-80 w-full object-cover object-center"
src="/images/activities/community.jpg"
className="h-60 lg:h-full w-full object-cover object-center"
/>
<div className="py-2">
<H4>Community building Space</H4>
<PXS>Foster connections and meaningful relationships through shared experiences.</PXS>
</div>
{/* Black overlay */}
<div className="absolute inset-0 bg-black opacity-30"></div>
</div>
</div>
<div className="flex lg:col-span-3">
<div className="w-full overflow-hidden">
{/* Photo 2 - Top middle */}
<div className="flex lg:col-span-2">
<div className="w-full overflow-hidden relative">
<img
alt=""
src="/images/private.jpg"
className="h-80 w-full object-cover object-center"
src="/images/activities/events.jpg"
className="h-60 lg:h-full w-full object-cover object-center"
/>
<div className="py-4">
<H4>Private Retreats</H4>
<PXS>Exclusive experiences for intimate groups and families.</PXS>
</div>
{/* Black overlay */}
<div className="absolute inset-0 bg-black opacity-30"></div>
</div>
</div>
<div className="flex lg:col-span-3">
<div className="w-full overflow-hidden">
{/* Photo 4 - Right large image */}
<div className="flex lg:col-span-2 lg:row-span-2">
<div className="w-full overflow-hidden relative">
<img
alt=""
src="/images/events.jpg"
className="h-80 w-full object-cover object-center"
src="/images/activities/private.jpg"
className="h-80 lg:h-full w-full object-cover object-center"
/>
<div className="py-4">
<H4>Events & Conferences</H4>
<PXS>Professional gatherings in an inspiring riverside setting.</PXS>
</div>
{/* Black overlay */}
<div className="absolute inset-0 bg-black opacity-30"></div>
</div>
</div>
<div className="flex lg:col-span-5">
<div className="w-full overflow-hidden">
{/* Photo 3 - Bottom middle */}
<div className="flex lg:col-span-2">
<div className="w-full overflow-hidden relative">
<img
alt=""
src="/images/nomads.jpg"
className="h-80 w-full object-cover object-center"
src="/images/activities/nomad.jpg"
className="h-60 lg:h-full w-full object-cover object-center"
/>
<div className="py-4">
<H4>Digital Nomad Hub</H4>
<PXS>Work remotely while surrounded by the tranquility of the Nile.</PXS>
</div>
{/* Black overlay */}
<div className="absolute inset-0 bg-black opacity-30"></div>
</div>
</div>
</div>