add new content

src/components/Veda3.jsx

@@ -0,0 +1,211 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+  Radio,
+  RadioGroup,
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels,
+} from '@headlessui/react'
+import { StarIcon } from '@heroicons/react/20/solid'
+import { HeartIcon, MinusIcon, PlusIcon } from '@heroicons/react/24/outline'
+
+const product = {
+  name: 'VEDA III',
+  images: [
+    {
+      id: 1,
+      name: 'Veda',
+      src: '/images/veda31.jpg',
+      alt: 'Veda1',
+    },
+    {
+      id: 1,
+      name: 'Veda',
+      src: '/images/veda32.jpg',
+      alt: 'Veda1',
+    },
+    {
+      id: 1,
+      name: 'Veda',
+      src: '/images/veda33.jpg',
+      alt: 'Veda1',
+    },
+    {
+      id: 1,
+      name: 'Veda',
+      src: '/images/veda34.jpg',
+      alt: 'Veda1',
+    },
+    {
+      id: 1,
+      name: 'Veda',
+      src: '/images/veda35.jpg',
+      alt: 'Veda1',
+    },
+    {
+      id: 1,
+      name: 'Veda',
+      src: '/images/veda36.jpg',
+      alt: 'Veda1',
+    },
+    {
+      id: 1,
+      name: 'Veda',
+      src: '/images/veda37.jpg',
+      alt: 'Veda1',
+    },
+    {
+      id: 1,
+      name: 'Veda',
+      src: '/images/veda38.jpg',
+      alt: 'Veda1',
+    },
+    // More images...
+  ],
+  colors: [
+    { name: 'Washed Black', bgColor: 'bg-gray-700', selectedColor: 'ring-gray-700' },
+    { name: 'White', bgColor: 'bg-white', selectedColor: 'ring-gray-400' },
+    { name: 'Washed Gray', bgColor: 'bg-gray-500', selectedColor: 'ring-gray-500' },
+  ],
+  description: `
+    <p>VEDA III is a cozy 18-meter dahabiya that offers a serene floating home experience, perfect for smaller groups seeking tranquility and comfort on the Nile.</p>
+    <p>VEDA III accommodates up to 10 guests across 5 rooms. The accommodations include 2 rooms with double beds and 3 rooms with two single beds, providing flexible sleeping arrangements. Each room is equipped with a private bathroom for convenience and privacy.</p>
+    <p>Guests can enjoy breathtaking views of the Nile from the cozy upper deck, designed for relaxation and enjoyment. The upper deck provides an intimate space to unwind and take in the river's beauty.</p>
+  `,
+  details: [
+    {
+      name: 'FEATURES',
+      items: [
+      '5 Rooms: 2 rooms with double beds and 3 rooms with two single beds',
+      'Hosts up to 10 people',
+      'Private bathroom ensuites in each room',
+      'Intimate upper deck with stunning Nile views',
+      ],
+    },
+    // More sections...
+  ],
+}
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export default function Example() {
+  const [selectedColor, setSelectedColor] = useState(product.colors[0])
+
+  return (
+    <div className="bg-creme-600">
+      <div className="mx-auto max-w-2xl px-4 py-12 sm:px-6 lg:max-w-7xl lg:px-8">
+        <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 uppercase text-gray-900 hover:bg-gray-50 focus:outline-none focus:ring focus:ring-opacity-50 focus:ring-offset-4"
+                  >
+                    <span className="sr-only">{image.name}</span>
+                    <span className="absolute inset-0 overflow-hidden rounded-md">
+                      <img alt="" src={image.src} className="h-full w-full object-cover object-center" />
+                    </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 className="aspect-h-1 aspect-w-1 w-full">
+              {product.images.map((image) => (
+                <TabPanel key={image.id}>
+                  <img
+                    alt={image.alt}
+                    src={image.src}
+                    className="h-full w-full object-cover object-center sm:rounded-lg"
+                  />
+                </TabPanel>
+              ))}
+            </TabPanels>
+          </TabGroup>
+
+          {/* Product info */}
+          <div className="mt-10 px-4 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>
+
+            <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-white border-t">
+                {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 h-6 w-6 text-gray-400 group-hover:text-gray-500 group-data-[open]:hidden"
+                          />
+                          <MinusIcon
+                            aria-hidden="true"
+                            className="hidden h-6 w-6 text-indigo-400 group-hover:text-indigo-500 group-data-[open]:block"
+                          />
+                        </span>
+                      </DisclosureButton>
+                    </h3>
+                    <DisclosurePanel className="prose prose-sm pb-6">
+                      <ul role="list">
+                        {detail.items.map((item) => (
+                          <li key={item}>{item}</li>
+                        ))}
+                      </ul>
+                    </DisclosurePanel>
+                  </Disclosure>
+                ))}
+              </div>
+              <form className="mt-6">
+              <div className="mt-10 flex">
+                <button
+                  type="submit"
+                  className="flex max-w-xs flex-1 items-center justify-center rounded-md border border-transparent bg-gold-800 px-8 py-3 text-base font-medium text-white hover:bg-gold-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-50 sm:w-full"
+                >
+                  Book Now
+                </button>
+              </div>
+            </form>
+            </section>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}