sashaastiadi/www_maison_noire
1
0
Fork 0
forked from veda/www_veda_2025
Code Pull Requests Activity

edit all

Browse Source
This commit is contained in:
sasha-astiadi
2025-08-27 14:40:25 +02:00
parent 7d94237898
commit f98110da57
3 changed files with 114 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/components/Veda2.jsx
View File

@@ -1,5 +1,8 @@
'use client'
import { H3, PXXS } from '@/components/text'
import { Button } from '@/components/Button'
import { useState } from 'react'
import {
Tab,
@@ -8,7 +11,7 @@ import {
TabPanel,
TabPanels,
} from '@headlessui/react'
import { H2, PS, PXS } from '@/components/text'
import { H2, PS } from '@/components/text'
const product = {
name: 'VEDA II',
@@ -25,12 +28,6 @@ const product = {
src: '/images/dahabiyas/veda2/veda2_8.jpg',
alt: 'Veda2',
},
{
id: 3,
name: 'Veda',
src: '/images/dahabiyas/veda2/veda2_10.jpg',
alt: 'Veda2',
},
{
id: 4,
name: 'Veda',
@@ -128,10 +125,31 @@ export default function Veda2() {
return (
<div className="bg-transparent">
<div className="mx-auto max-w-2xl px-6 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
<div className="lg:grid lg:grid-cols-2 lg:gap-x-8">
<div className="mx-auto max-w-2xl px-6 py-12 sm:px-6 lg:max-w-7xl lg:px-0">
<div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
{/* Image gallery */}
<TabGroup className="lg:order-last">
<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 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"
>
<H3 className="sr-only">{image.name}</H3>
<span className="absolute inset-0 overflow-hidden">
<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 ring-2 ring-transparent ring-offset-2 group-data-[selected]:ring-indigo-500"
/>
</Tab>
))}
</TabList>
</div>
<TabPanels className="aspect-h-9 aspect-w-16 w-full">
{product.images.map((image) => (
<TabPanel key={image.id}>
@@ -143,79 +161,43 @@ export default function Veda2() {
</TabPanel>
))}
</TabPanels>
{/* Image selector */}
<div className="mx-auto mt-6 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={({ selected }) =>
classNames(
'group relative flex h-24 cursor-pointer items-center justify-center 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',
selected ? 'ring-indigo-500' : 'ring-transparent'
)
}
>
<span className="sr-only">{image.name}</span>
<span className="absolute inset-0 overflow-hidden">
<img alt={image.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 ring-2 ring-offset-2 group-focus:ring-indigo-500"
/>
</Tab>
))}
</TabList>
</div>
</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-10 px-6 sm:px-0 lg:mt-0">
<H2 className="">{product.name}</H2>
<div className="mt-3">
<H2 className="sr-only">Product information</H2>
</div>
<div className="mt-6">
<h3 className="sr-only">Description</h3>
<div className="space-y-6 text-base text-gray-700">
<div className="mt-2">
<div className="space-y-4 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">
Additional details
</H2>
<section aria-labelledby="details-heading" className="mt-6">
<div className="border-t border-gray-200 pt-6">
<h3 className="text-lg font-medium text-gray-900">FEATURES</h3>
<H3 className="">Specifications</H3>
<div className="mt-4">
<ul role="list" className="list-disc pl-5 space-y-2">
<ul role="list" className="list-disc pl-5 space-y-1">
{product.details[0].items.map((item) => (
<li key={item} className="text-gray-700">
<PXS>{item}</PXS>
<PXXS>{item}</PXXS>
</li>
))}
</ul>
</div>
</div>
<form className="mt-6">
<div className="mt-10 flex">
<button
type="submit"
className="flex max-w-xs flex-1 items-center justify-center 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>
<form className="mt-12">
<div className=" flex">
<Button
variant="solid"
className="flex max-w-xs flex-1 items-center justify-center border border-transparent bg-gold-800x-8 py-3 text-base font-medium text-white hover:bg-gold-700 focus:outline-none focus:ring-2 focus:ring-gold-500 focus:ring-offset-2 focus:ring-offset-gray-50 sm:w-full"
>
Book Now
</Button>
</div>
</form>
</section>
</div>
</div>