97 lines
3.5 KiB
JavaScript
97 lines
3.5 KiB
JavaScript
import { useId } from 'react';
|
||
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react';
|
||
import clsx from 'clsx';
|
||
|
||
import { Container } from '@/components/Container';
|
||
|
||
const people = [
|
||
{
|
||
name: 'VEDA I',
|
||
role: 'The ideal retreat for luxury and privacy, perfect for intimate gatherings.',
|
||
image: '/images/dahabiyas/veda1.jpg',
|
||
bio: [
|
||
'6 rooms & 4 suites with balconies.',
|
||
'Hosts up to 20 people.',
|
||
'Private bathroom ensuites.'
|
||
],
|
||
xUrl: '#',
|
||
linkedinUrl: '#',
|
||
},
|
||
{
|
||
name: 'VEDA II',
|
||
role: 'The perfect spacious space for larger groups seeking comfort',
|
||
image: '/images/dahabiyas/veda2.jpg',
|
||
bio: [
|
||
'8 rooms & 2 suites with balconies.',
|
||
'Hosts up to 20 people.',
|
||
'Private bathroom ensuites.'
|
||
],
|
||
xUrl: '#',
|
||
linkedinUrl: '#',
|
||
},
|
||
{
|
||
name: 'VEDA III',
|
||
role: 'Senior Developer',
|
||
image: '/images/dahabiyas/veda3.jpg',
|
||
bio: [
|
||
'5 rooms with balconies.',
|
||
'Hosts up to 10 people.',
|
||
'Private bathroom ensuites.'
|
||
],
|
||
xUrl: '#',
|
||
linkedinUrl: '#',
|
||
},
|
||
{
|
||
name: 'VEDA IV',
|
||
role: 'Senior Developer',
|
||
image: '/images/dahabiyas/veda4.jpg',
|
||
bio: [
|
||
'10 rooms & 4 suites with balconies.',
|
||
'Hosts up to 28 people.',
|
||
'Private bathroom ensuites.'
|
||
],
|
||
xUrl: '#',
|
||
linkedinUrl: '#',
|
||
},
|
||
// More people...
|
||
];
|
||
|
||
export default function Boats() {
|
||
return (
|
||
<div className="bg-transparent py-24">
|
||
<div className="mx-auto grid max-w-7xl grid-cols-1 gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3">
|
||
<div className="mx-auto max-w-2xl lg:mx-0">
|
||
<h2 className="text-3xl font-bold tracking-tight text-gray-800 sm:text-4xl">Our team</h2>
|
||
<p className="mt-6 text-lg leading-8 text-gray-200">
|
||
We’re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the
|
||
best results for our clients.
|
||
</p>
|
||
</div>
|
||
<ul
|
||
role="list"
|
||
className="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-20 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:gap-x-8 xl:col-span-2"
|
||
>
|
||
{people.map((person) => (
|
||
<li key={person.name}>
|
||
<div className="relative aspect-[3/2] w-full rounded-lg overflow-hidden">
|
||
<img
|
||
src={person.image}
|
||
alt={person.name}
|
||
layout="fill"
|
||
objectFit="cover"
|
||
/>
|
||
</div>
|
||
<h3 className="mt-6 text-lg font-semibold leading-8 text-gray-800">{person.name}</h3>
|
||
<ul className="mt-4 text-base leading-7 text-gray-200 list-disc pl-5 space-y-1">
|
||
{person.bio.map((item, index) => (
|
||
<li key={index}>{item}</li>
|
||
))}
|
||
</ul>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|