ok
This commit is contained in:
@@ -1,5 +1,8 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
|
import { H1, H3, H4, P, PXS, PXXS } from '@/components/text'
|
||||||
|
import { Button } from '@/components/Button'
|
||||||
|
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
import {
|
import {
|
||||||
Radio,
|
Radio,
|
||||||
@@ -126,7 +129,7 @@ export default function Example() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="bg-transparent">
|
<div className="bg-transparent">
|
||||||
<div className="mx-auto max-w-2xl px-6 py-12 sm:px-6 lg:max-w-7xl lg:px-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">
|
<div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
|
||||||
{/* Image gallery */}
|
{/* Image gallery */}
|
||||||
<TabGroup className="flex flex-col-reverse">
|
<TabGroup className="flex flex-col-reverse">
|
||||||
@@ -138,7 +141,7 @@ export default function Example() {
|
|||||||
key={image.id}
|
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"
|
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"
|
||||||
>
|
>
|
||||||
<span className="sr-only">{image.name}</span>
|
<H3 className="sr-only">{image.name}</H3>
|
||||||
<span className="absolute inset-0 overflow-hidden">
|
<span className="absolute inset-0 overflow-hidden">
|
||||||
<img alt="" src={image.src} className="h-full w-full object-cover object-center" />
|
<img alt="" src={image.src} className="h-full w-full object-cover object-center" />
|
||||||
</span>
|
</span>
|
||||||
@@ -165,48 +168,38 @@ export default function Example() {
|
|||||||
</TabGroup>
|
</TabGroup>
|
||||||
|
|
||||||
{/* Product info */}
|
{/* Product info */}
|
||||||
<div className="mt-10 px-6 sm:mt-16 sm:px-0 lg:mt-0">
|
<div className="mt-10 px-6 sm:px-0 lg:mt-0">
|
||||||
<h1 className="text-3xl font-bold tracking-tight text-gray-900">{product.name}</h1>
|
<H2 className="">{product.name}</H2>
|
||||||
|
|
||||||
<div className="mt-3">
|
<div className="mt-2">
|
||||||
<H2 className="sr-only">Product information</H2>
|
<div className="space-y-4 text-base text-gray-700">
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-6">
|
|
||||||
<h3 className="sr-only">Description</h3>
|
|
||||||
|
|
||||||
<div className="space-y-6 text-base text-gray-700">
|
|
||||||
{product.description.map((paragraph, index) => (
|
{product.description.map((paragraph, index) => (
|
||||||
<PS key={index}>{paragraph}</PS>
|
<PS key={index}>{paragraph}</PS>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section aria-labelledby="details-heading" className="mt-12">
|
<section aria-labelledby="details-heading" className="mt-6">
|
||||||
<H2 id="details-heading" className="sr-only">
|
|
||||||
Additional details
|
|
||||||
</H2>
|
|
||||||
|
|
||||||
<div className="border-t border-gray-200 pt-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">
|
<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) => (
|
{product.details[0].items.map((item) => (
|
||||||
<li key={item} className="text-gray-700">
|
<li key={item} className="text-gray-700">
|
||||||
<span className="text-gray-900">{item}</span>
|
<PXXS>{item}</PXXS>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<form className="mt-6">
|
<form className="mt-12">
|
||||||
<div className="mt-10 flex">
|
<div className=" flex">
|
||||||
<button
|
<Button
|
||||||
type="submit"
|
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-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-50 sm:w-full"
|
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
|
Book Now
|
||||||
</button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</section>
|
</section>
|
||||||
|
@@ -8,7 +8,7 @@ import {
|
|||||||
TabPanel,
|
TabPanel,
|
||||||
TabPanels,
|
TabPanels,
|
||||||
} from '@headlessui/react'
|
} from '@headlessui/react'
|
||||||
import { H2, PS } from '@/components/text'
|
import { H2, PS, PXS } from '@/components/text'
|
||||||
|
|
||||||
const product = {
|
const product = {
|
||||||
name: 'VEDA II',
|
name: 'VEDA II',
|
||||||
@@ -200,7 +200,7 @@ export default function Veda2() {
|
|||||||
<ul role="list" className="list-disc pl-5 space-y-2">
|
<ul role="list" className="list-disc pl-5 space-y-2">
|
||||||
{product.details[0].items.map((item) => (
|
{product.details[0].items.map((item) => (
|
||||||
<li key={item} className="text-gray-700">
|
<li key={item} className="text-gray-700">
|
||||||
<span className="text-gray-900">{item}</span>
|
<PXS>{item}</PXS>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
|
@@ -12,7 +12,7 @@ import {
|
|||||||
} from '@headlessui/react'
|
} from '@headlessui/react'
|
||||||
import { StarIcon } from '@heroicons/react/20/solid'
|
import { StarIcon } from '@heroicons/react/20/solid'
|
||||||
import { HeartIcon } from '@heroicons/react/24/outline'
|
import { HeartIcon } from '@heroicons/react/24/outline'
|
||||||
import { H2, PS } from '@/components/text'
|
import { H2, PS, PXS } from '@/components/text'
|
||||||
|
|
||||||
const product = {
|
const product = {
|
||||||
name: 'VEDA III',
|
name: 'VEDA III',
|
||||||
@@ -184,7 +184,7 @@ export default function Veda3() {
|
|||||||
<ul role="list" className="list-disc pl-5 space-y-2">
|
<ul role="list" className="list-disc pl-5 space-y-2">
|
||||||
{product.details[0].items.map((item) => (
|
{product.details[0].items.map((item) => (
|
||||||
<li key={item} className="text-gray-700">
|
<li key={item} className="text-gray-700">
|
||||||
<span className="text-gray-900">{item}</span>
|
<PXS>{item}</PXS>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
|
@@ -8,7 +8,7 @@ import {
|
|||||||
TabPanel,
|
TabPanel,
|
||||||
TabPanels,
|
TabPanels,
|
||||||
} from '@headlessui/react'
|
} from '@headlessui/react'
|
||||||
import { H2, PS } from '@/components/text'
|
import { H2, PS, PXS } from '@/components/text'
|
||||||
|
|
||||||
const product = {
|
const product = {
|
||||||
name: 'VEDA IV',
|
name: 'VEDA IV',
|
||||||
@@ -194,7 +194,7 @@ export default function Veda4() {
|
|||||||
<ul role="list" className="list-disc pl-5 space-y-2">
|
<ul role="list" className="list-disc pl-5 space-y-2">
|
||||||
{product.details[0].items.map((item) => (
|
{product.details[0].items.map((item) => (
|
||||||
<li key={item} className="text-gray-700">
|
<li key={item} className="text-gray-700">
|
||||||
<span className="text-gray-900">{item}</span>
|
<PXS>{item}</PXS>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
|
Reference in New Issue
Block a user