254 lines
8.9 KiB
JavaScript
254 lines
8.9 KiB
JavaScript
'use client'
|
|
|
|
import { Fragment, useState } from 'react'
|
|
import {
|
|
Dialog,
|
|
DialogBackdrop,
|
|
DialogPanel,
|
|
Disclosure,
|
|
DisclosureButton,
|
|
DisclosurePanel,
|
|
Popover,
|
|
PopoverButton,
|
|
PopoverGroup,
|
|
PopoverPanel,
|
|
Tab,
|
|
TabGroup,
|
|
TabList,
|
|
TabPanel,
|
|
TabPanels,
|
|
} from '@headlessui/react'
|
|
import {
|
|
Bars3Icon,
|
|
HeartIcon,
|
|
MagnifyingGlassIcon,
|
|
MinusIcon,
|
|
PlusIcon,
|
|
ShoppingBagIcon,
|
|
UserIcon,
|
|
XMarkIcon,
|
|
} from '@heroicons/react/24/outline'
|
|
import { StarIcon } from '@heroicons/react/20/solid'
|
|
|
|
|
|
const product = {
|
|
name: 'Events & Conferences',
|
|
images: [
|
|
{
|
|
id: 1,
|
|
name: 'Event Space 1',
|
|
src: '/images/events1.jpg',
|
|
alt: 'Professional event space with Nile backdrop',
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'Event Space 2',
|
|
src: '/images/events2.jpg',
|
|
alt: 'Conference venue with modern amenities',
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'Event Space 3',
|
|
src: '/images/events3.jpg',
|
|
alt: 'Meeting space on dahabiya',
|
|
},
|
|
{
|
|
id: 4,
|
|
name: 'Event Space 4',
|
|
src: '/images/events4.jpg',
|
|
alt: 'Outdoor event setting by the Nile',
|
|
},
|
|
],
|
|
colors: [
|
|
{ id: 'washed-black', name: 'Washed Black', classes: 'bg-gray-700 checked:outline-gray-700' },
|
|
{ id: 'white', name: 'White', classes: 'bg-white checked:outline-gray-400' },
|
|
{ id: 'washed-gray', name: 'Washed Gray', classes: 'bg-gray-500 checked:outline-gray-500' },
|
|
],
|
|
description: `
|
|
<p>VEDA's facilities are suited for hosting events, a unique venue that combines professional functionality with the tranquility of the Nile. An innovative setting that stands apart from traditional conference venues, promising an impactful event.</p>
|
|
`,
|
|
details: [
|
|
{
|
|
name: 'Unique Features',
|
|
items: [
|
|
'Four Air-Conditioned Meeting Spaces equipped with modern amenities to host up to 50/100 participants, perfect for workshops, seminars, and more.',
|
|
'From indoor workshops to outdoor receptions and gala dinners, the settings are as versatile as the events themselves.',
|
|
'Comprehensive Services: This includes catering, technical equipment, and event planning assistance to ensure everything runs smoothly.',
|
|
'Essential for modern retreats and conferences, we offer reliable internet and state-of-the-art meeting equipment.',
|
|
'Flexible Event Locations Across the Nile: Offering the freedom to choose unique meeting locations for an unparalleled experience.',
|
|
],
|
|
},
|
|
{
|
|
name: 'Benefits',
|
|
items: [
|
|
'Unique venue: The natural and historical backdrop of the Nile serves as a source of inspiration and tranquility.',
|
|
'Modern Conveniences: Internet, flexible meeting locations, and comprehensive support services facilitate a productive and engaging environment.',
|
|
],
|
|
},
|
|
],
|
|
}
|
|
const relatedProducts = [
|
|
{
|
|
id: 1,
|
|
name: 'Zip Tote Basket',
|
|
color: 'White and black',
|
|
href: '#',
|
|
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-03-related-product-01.jpg',
|
|
imageAlt: 'Front of zip tote bag with white canvas, black canvas straps and handle, and black zipper pulls.',
|
|
price: '$140',
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'Zip High Wall Tote',
|
|
color: 'White and blue',
|
|
href: '#',
|
|
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-03-related-product-02.jpg',
|
|
imageAlt: 'Front of zip tote bag with white canvas, blue canvas straps and handle, and front zipper pocket.',
|
|
price: '$150',
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'Halfsize Tote',
|
|
color: 'Clay',
|
|
href: '#',
|
|
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-03-related-product-03.jpg',
|
|
imageAlt: 'Front of tote with monochrome natural canvas body, straps, roll top, and handles.',
|
|
price: '$210',
|
|
},
|
|
{
|
|
id: 4,
|
|
name: 'High Wall Tote',
|
|
color: 'Black and orange',
|
|
href: '#',
|
|
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-03-related-product-04.jpg',
|
|
imageAlt: 'Front of zip tote bag with black canvas, black handles, and orange drawstring top.',
|
|
price: '$210',
|
|
},
|
|
]
|
|
|
|
|
|
function classNames(...classes) {
|
|
return classes.filter(Boolean).join(' ')
|
|
}
|
|
|
|
export function Events() {
|
|
const [open, setOpen] = useState(false)
|
|
|
|
return (
|
|
<div className="pb-24">
|
|
|
|
|
|
|
|
|
|
<main className="mx-auto max-w-7xl sm:px-6 sm:pt-16 lg:px-8">
|
|
<div className="mx-auto max-w-2xl lg:max-w-none">
|
|
{/* Product */}
|
|
<div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
|
|
{/* Image gallery */}
|
|
<TabGroup className="flex flex-col-reverse">
|
|
{/* Image selector */}
|
|
<div className="mx-auto mt-6 hidden w-full max-w-2xl sm:block lg:max-w-none">
|
|
<TabList className="grid grid-cols-4 gap-6">
|
|
{product.images.map((image) => (
|
|
<Tab
|
|
key={image.id}
|
|
className="group relative flex h-24 cursor-pointer items-center justify-center rounded-md bg-white text-sm font-medium text-gray-900 uppercase hover:bg-gray-50 focus:ring-3 focus:ring-indigo-500/50 focus:ring-offset-4 focus:outline-hidden"
|
|
>
|
|
<span className="sr-only">{image.name}</span>
|
|
<span className="absolute inset-0 overflow-hidden rounded-md">
|
|
<img alt="" src={image.src} className="size-full object-cover" />
|
|
</span>
|
|
<span
|
|
aria-hidden="true"
|
|
className="pointer-events-none absolute inset-0 rounded-md ring-2 ring-transparent ring-offset-2 group-data-selected:ring-indigo-500"
|
|
/>
|
|
</Tab>
|
|
))}
|
|
</TabList>
|
|
</div>
|
|
|
|
<TabPanels>
|
|
{product.images.map((image) => (
|
|
<TabPanel key={image.id}>
|
|
<img alt={image.alt} src={image.src} className="aspect-square w-full object-cover sm:rounded-lg" />
|
|
</TabPanel>
|
|
))}
|
|
</TabPanels>
|
|
</TabGroup>
|
|
|
|
{/* Product info */}
|
|
<div className="mt-10 px-6 sm:mt-16 sm:px-0 lg:mt-0">
|
|
<h1 className="text-3xl font-bold tracking-tight text-gray-900">{product.name}</h1>
|
|
|
|
<div className="mt-3">
|
|
<h2 className="sr-only">Product information</h2>
|
|
</div>
|
|
|
|
{/* Reviews */}
|
|
<div className="mt-3">
|
|
<h3 className="sr-only">Reviews</h3>
|
|
</div>
|
|
|
|
<div className="mt-6">
|
|
<h3 className="sr-only">Description</h3>
|
|
|
|
<div
|
|
dangerouslySetInnerHTML={{ __html: product.description }}
|
|
className="space-y-6 text-base text-gray-700"
|
|
/>
|
|
</div>
|
|
|
|
|
|
|
|
<section aria-labelledby="details-heading" className="mt-12">
|
|
<h2 id="details-heading" className="sr-only">
|
|
Additional details
|
|
</h2>
|
|
|
|
<div className="divide-y divide-gray-200 border-t border-gray-200">
|
|
{product.details.map((detail) => (
|
|
<Disclosure key={detail.name} as="div">
|
|
<h3>
|
|
<DisclosureButton className="group relative flex w-full items-center justify-between py-6 text-left">
|
|
<span className="text-sm font-medium text-gray-900 group-data-open:text-indigo-600">
|
|
{detail.name}
|
|
</span>
|
|
<span className="ml-6 flex items-center">
|
|
<PlusIcon
|
|
aria-hidden="true"
|
|
className="block size-6 text-gray-400 group-hover:text-gray-500 group-data-open:hidden"
|
|
/>
|
|
<MinusIcon
|
|
aria-hidden="true"
|
|
className="hidden size-6 text-indigo-400 group-hover:text-indigo-500 group-data-open:block"
|
|
/>
|
|
</span>
|
|
</DisclosureButton>
|
|
</h3>
|
|
<DisclosurePanel className="pb-6">
|
|
<ul
|
|
role="list"
|
|
className="list-disc space-y-1 pl-5 text-sm/6 text-gray-700 marker:text-gray-300"
|
|
>
|
|
{detail.items.map((item) => (
|
|
<li key={item} className="pl-2">
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</DisclosurePanel>
|
|
</Disclosure>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
|
|
</div>
|
|
)
|
|
}
|