forked from veda/www_veda_2025
46 lines
2.1 KiB
JavaScript
46 lines
2.1 KiB
JavaScript
import { H1, H2, H3, H4, P, PS, PXS, PXXS } from '@/components/text'
|
|
import { Button } from './Button'
|
|
|
|
|
|
export function Journey() {
|
|
return (
|
|
<div className="relative bg-transparent my-12">
|
|
<div className="relative mx-auto max-w-8xl lg:grid lg:grid-cols-2">
|
|
{/* Left column with journey1.jpg */}
|
|
<div className="relative h-80 lg:h-full">
|
|
<img
|
|
alt="Journey Image 1"
|
|
src="/images/journey1.jpg"
|
|
className="size-full object-cover"
|
|
/>
|
|
{/* Black overlay */}
|
|
<div className="absolute inset-0 bg-black opacity-50 hover:opacity-20"></div>
|
|
{/* paragraphs */}
|
|
<div className="absolute inset-0 flex items-center justify-center mx-auto max-w-lg flex-col text-center px-10">
|
|
<H2 className=" text-white text-3xl font-semibold">Experiences</H2>
|
|
<PS className=" mt-4 text-white text-center ">From intimate community gatherings to professional retreats, VEDA offers transformative programs on the Nile.</PS>
|
|
<Button className="mt-6" href="/experiences" variant="outline" color="white">Learn More</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right column with journey2.jpg */}
|
|
<div className="relative h-80 lg:h-full">
|
|
<img
|
|
alt="Journey Image 2"
|
|
src="/images/journey2.jpg"
|
|
className="size-full object-cover"
|
|
/>
|
|
{/* Black overlay */}
|
|
<div className="absolute inset-0 bg-black opacity-50 hover:opacity-20"></div>
|
|
{/* Learn More button */}
|
|
<div className="absolute inset-0 flex items-center justify-center mx-auto max-w-lg flex-col text-center px-10">
|
|
<H2 className=" text-white text-3xl font-semibold">Activities</H2>
|
|
<PS className=" mt-4 text-white text-center ">Explore a diverse range of activities designed to elevate your mind, body, and soul.</PS>
|
|
<Button className="mt-6" href="/experiences" variant="outline" color="white">Learn More</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|