This commit is contained in:
2025-08-25 17:13:44 +02:00
parent 0013917ec7
commit 43ad7a8cea
8 changed files with 86 additions and 74 deletions

View File

@@ -12,6 +12,7 @@ import {
} from '@headlessui/react'
import { StarIcon } from '@heroicons/react/20/solid'
import { HeartIcon } from '@heroicons/react/24/outline'
import { H2, PS } from '@/components/text'
const product = {
name: 'VEDA I',
@@ -94,11 +95,11 @@ const product = {
{ name: 'White', bgColor: 'bg-white', selectedColor: 'ring-gray-400' },
{ name: 'Washed Gray', bgColor: 'bg-gray-500', selectedColor: 'ring-gray-500' },
],
description: `
<p>This beautiful 50-meter dahabiya offers a peaceful organic platform to host your personalised cruise.</p>
<p>VEDA 1 accommodates up to 20 guests across 10 rooms with double beds that can be converted into singles, each featuring a private bathroom. Four of these rooms are suites with balconies.</p>
<p>The facility includes two air-conditioned meeting spaces for up to 50 people, an upper deck meeting room with a 360-degree panoramic view, and various relaxation areas suitable for workshops, yoga, or meditation. Additionally, there is a library with a collection of books on Egyptian history and awareness.</p>
`,
description: [
'This beautiful 50-meter dahabiya offers a peaceful organic platform to host your personalised cruise.',
'VEDA 1 accommodates up to 20 guests across 10 rooms with double beds that can be converted into singles, each featuring a private bathroom. Four of these rooms are suites with balconies.',
'The facility includes two air-conditioned meeting spaces for up to 50 people, an upper deck meeting room with a 360-degree panoramic view, and various relaxation areas suitable for workshops, yoga, or meditation. Additionally, there is a library with a collection of books on Egyptian history and awareness.'
],
details: [
{
name: 'FEATURES',
@@ -168,22 +169,23 @@ export default function Example() {
<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>
<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 className="space-y-6 text-base text-gray-700">
{product.description.map((paragraph, index) => (
<PS key={index}>{paragraph}</PS>
))}
</div>
</div>
<section aria-labelledby="details-heading" className="mt-12">
<h2 id="details-heading" className="sr-only">
<H2 id="details-heading" className="sr-only">
Additional details
</h2>
</H2>
<div className="border-t border-gray-200 pt-6">
<h3 className="text-lg font-medium text-gray-900">FEATURES</h3>