add new content

src/components/Boats.jsx

@@ -0,0 +1,101 @@
+import { useId } from 'react';
+import Image from 'next/image';
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react';
+import clsx from 'clsx';
+
+import { Container } from '@/components/Container';
+import veda1 from '@/images/dahabiyas/veda1.jpg';
+import veda2 from '@/images/dahabiyas/veda2.jpg';
+import veda3 from '@/images/dahabiyas/veda3.jpg';
+import veda4 from '@/images/dahabiyas/veda4.jpg';
+
+const people = [
+    {
+        name: 'VEDA I',
+        role: 'The ideal retreat for luxury and privacy, perfect for intimate gatherings.',
+        image: veda1,
+        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: veda2,
+        bio: [
+            '8 rooms & 2 suites with balconies.',
+            'Hosts up to 20 people.',
+            'Private bathroom ensuites.'
+        ],
+        xUrl: '#',
+        linkedinUrl: '#',
+    },
+    {
+        name: 'VEDA III',
+        role: 'Senior Developer',
+        image: veda3,
+        bio: [
+            '5 rooms with balconies.',
+            'Hosts up to 10 people.',
+            'Private bathroom ensuites.'
+        ],
+        xUrl: '#',
+        linkedinUrl: '#',
+    },
+    {
+        name: 'VEDA IV',
+        role: 'Senior Developer',
+        image: veda4,
+        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-creme-600 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-600">
+                        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">
+                                <Image
+                                    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-600 list-disc pl-5 space-y-1">
+                                {person.bio.map((item, index) => (
+                                    <li key={index}>{item}</li>
+                                ))}
+                            </ul>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </div>
+    )
+}