add
This commit is contained in:
BIN
public/images/activities/community.jpg
Normal file
BIN
public/images/activities/community.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 327 KiB |
BIN
public/images/activities/events.jpg
Normal file
BIN
public/images/activities/events.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 532 KiB |
BIN
public/images/activities/nomad.jpg
Normal file
BIN
public/images/activities/nomad.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 485 KiB |
BIN
public/images/activities/private.jpg
Normal file
BIN
public/images/activities/private.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 336 KiB |
@@ -8,14 +8,17 @@ import { Events } from '@/components/Events'
|
||||
import { Nomads } from '@/components/Nomads'
|
||||
import { Experience } from '@/components/Exp2'
|
||||
import FFVid from '@/components/FreeflowVideo'
|
||||
import { Experiences } from '@/components/Experiences'
|
||||
|
||||
export default function Experiences() {
|
||||
|
||||
export default function ExperiencesPage() {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<main>
|
||||
<Experience/>
|
||||
<Community />
|
||||
<Experiences/>
|
||||
<Experience />
|
||||
<Community />
|
||||
<Retreats />
|
||||
<Events />
|
||||
<Nomads />
|
||||
|
||||
@@ -6,6 +6,7 @@ import Story2 from '@/components/Story2'
|
||||
import Team from '@/components/Team'
|
||||
|
||||
|
||||
|
||||
export default function OurStory() {
|
||||
return (
|
||||
<>
|
||||
|
||||
103
src/components/ExpHero.jsx
Normal file
103
src/components/ExpHero.jsx
Normal file
@@ -0,0 +1,103 @@
|
||||
import { H1, H2, H3, H4, P, PS, PXS, PXXS } from '@/components/text'
|
||||
|
||||
export function ExpHero() {
|
||||
return (
|
||||
<div className="bg-transparent py-24">
|
||||
<div className="mx-auto max-w-2xl px-6 lg:max-w-7xl">
|
||||
<H2 className="mx-auto mt-2 max-w-lg text-center text-4xl font-semibold tracking-tight text-balance text-gray-950 sm:text-5xl">
|
||||
Everything you need to deploy your app
|
||||
</H2>
|
||||
<div className="mt-10 grid gap-4 sm:mt-16 lg:grid-cols-3 lg:grid-rows-2">
|
||||
<div className="relative lg:row-span-2">
|
||||
<div className="absolute inset-px rounded-lg bg-white lg:rounded-l-4xl" />
|
||||
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-l-[calc(2rem+1px)]">
|
||||
<div className="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0">
|
||||
<p className="mt-2 text-lg font-medium tracking-tight text-gray-950 max-lg:text-center">
|
||||
Mobile friendly
|
||||
</p>
|
||||
<p className="mt-2 max-w-lg text-sm/6 text-gray-600 max-lg:text-center">
|
||||
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.
|
||||
</p>
|
||||
</div>
|
||||
<div className="@container relative min-h-120 w-full grow max-lg:mx-auto max-lg:max-w-sm">
|
||||
<div className="absolute inset-x-10 top-10 bottom-0 overflow-hidden rounded-t-[12cqw] border-x-[3cqw] border-t-[3cqw] border-gray-700 bg-gray-900 shadow-2xl">
|
||||
<img
|
||||
alt=""
|
||||
src="https://tailwindcss.com/plus-assets/img/component-images/bento-03-mobile-friendly.png"
|
||||
className="size-full object-cover object-top"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-black/5 lg:rounded-l-4xl" />
|
||||
</div>
|
||||
<div className="relative max-lg:row-start-1">
|
||||
<div className="absolute inset-px rounded-lg bg-white max-lg:rounded-t-4xl" />
|
||||
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)]">
|
||||
<div className="px-8 pt-8 sm:px-10 sm:pt-10">
|
||||
<p className="mt-2 text-lg font-medium tracking-tight text-gray-950 max-lg:text-center">Performance</p>
|
||||
<p className="mt-2 max-w-lg text-sm/6 text-gray-600 max-lg:text-center">
|
||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit maiores impedit.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-1 items-center justify-center px-8 max-lg:pt-10 max-lg:pb-12 sm:px-10 lg:pb-2">
|
||||
<img
|
||||
alt=""
|
||||
src="https://tailwindcss.com/plus-assets/img/component-images/bento-03-performance.png"
|
||||
className="w-full max-lg:max-w-xs"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-t-4xl" />
|
||||
</div>
|
||||
<div className="relative max-lg:row-start-3 lg:col-start-2 lg:row-start-2">
|
||||
<div className="absolute inset-px rounded-lg bg-white" />
|
||||
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
|
||||
<div className="px-8 pt-8 sm:px-10 sm:pt-10">
|
||||
<p className="mt-2 text-lg font-medium tracking-tight text-gray-950 max-lg:text-center">Security</p>
|
||||
<p className="mt-2 max-w-lg text-sm/6 text-gray-600 max-lg:text-center">
|
||||
Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse semper morbi.
|
||||
</p>
|
||||
</div>
|
||||
<div className="@container flex flex-1 items-center max-lg:py-6 lg:pb-2">
|
||||
<img
|
||||
alt=""
|
||||
src="https://tailwindcss.com/plus-assets/img/component-images/bento-03-security.png"
|
||||
className="h-[min(152px,40cqw)] object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-black/5" />
|
||||
</div>
|
||||
<div className="relative lg:row-span-2">
|
||||
<div className="absolute inset-px rounded-lg bg-white max-lg:rounded-b-4xl lg:rounded-r-4xl" />
|
||||
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-r-[calc(2rem+1px)]">
|
||||
<div className="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0">
|
||||
<p className="mt-2 text-lg font-medium tracking-tight text-gray-950 max-lg:text-center">
|
||||
Powerful APIs
|
||||
</p>
|
||||
<p className="mt-2 max-w-lg text-sm/6 text-gray-600 max-lg:text-center">
|
||||
Sit quis amet rutrum tellus ullamcorper ultricies libero dolor eget sem sodales gravida.
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative min-h-120 w-full grow">
|
||||
<div className="absolute top-10 right-0 bottom-0 left-10 overflow-hidden rounded-tl-xl bg-gray-900 shadow-2xl outline outline-white/10">
|
||||
<div className="flex bg-gray-900 outline outline-white/5">
|
||||
<div className="-mb-px flex text-sm/6 font-medium text-gray-400">
|
||||
<div className="border-r border-b border-r-white/10 border-b-white/20 bg-white/5 px-4 py-2 text-white">
|
||||
NotificationSetting.jsx
|
||||
</div>
|
||||
<div className="border-r border-gray-600/10 px-4 py-2">App.jsx</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-6 pt-6 pb-14">{/* Your code example */}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pointer-events-none absolute inset-px rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-b-4xl lg:rounded-r-4xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user