ok
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
'use client'
|
||||
import { H2, H3, H4, P, PS, PXS, PXXS } from '@/components/text'
|
||||
|
||||
import * as Headless from '@headlessui/react'
|
||||
import { ArrowLongRightIcon } from '@heroicons/react/20/solid'
|
||||
@@ -18,34 +19,26 @@ import { Heading, Subheading } from './text'
|
||||
const testimonials = [
|
||||
{
|
||||
img: '/images/veda1.jpg',
|
||||
name: '0 - 6 Years Old',
|
||||
title: 'From birth to age 6, we offer ECD programs that change lives forever.',
|
||||
subtitle: 'A beautiful 50-meter dahabiya offering a tranquil and organic platform for personalized cruises.',
|
||||
quote: 'VEDA 1',
|
||||
quote: 'VEDA I',
|
||||
href: '/phases/phase1',
|
||||
},
|
||||
{
|
||||
img: '/images/veda2.jpg',
|
||||
name: '6 - 15 Years Old',
|
||||
title: 'Unlock the Potential of Youth with transformational learning experiences',
|
||||
subtitle: 'An elegant 45-meter dahabiya, ideal for hosting larger groups, healing retreats, company getaways, and more.',
|
||||
quote: 'VEDA 2',
|
||||
quote: 'VEDA II',
|
||||
href: '/phases/phase2',
|
||||
},
|
||||
{
|
||||
img: '/images/veda3.jpg',
|
||||
name: '15 - 25 Years Old',
|
||||
title: 'Skills that Earn & Regenerate Vocational paths that equip young people to live with purpose.',
|
||||
subtitle: 'A cozy 18-meter dahabiya offering a serene floating home, perfect for private groups seeking tranquility and comfort on the Nile.',
|
||||
quote: 'VEDA 3',
|
||||
quote: 'VEDA III',
|
||||
href: '/phases/phase3',
|
||||
},
|
||||
{
|
||||
img: '/images/veda4.jpg',
|
||||
name: 'All Ages',
|
||||
title: 'A unique portfolio of impact proven Community-led solutions worth implementing',
|
||||
subtitle: 'A spaciou 55-meter dahabeya offering a serene retreat, perfect for bigger groups seeking tranquility and comfort on the Nile.',
|
||||
quote: 'VEDA 4',
|
||||
quote: 'VEDA IV',
|
||||
href: '/phases/phase4',
|
||||
},
|
||||
]
|
||||
@@ -113,11 +106,10 @@ function TestimonialCard({
|
||||
|
||||
{/* Content Section Below Image */}
|
||||
<div className="p-6">
|
||||
<blockquote>
|
||||
<p className="text-2xl font-bold text-darkgr lg:text-3xl">
|
||||
<H3 className="">
|
||||
{children}
|
||||
</p>
|
||||
</blockquote>
|
||||
</H3>
|
||||
|
||||
|
||||
<p className="mt-2 lg:text-base text-sm text-gray-200 leading-6">
|
||||
{subtitle}
|
||||
@@ -154,7 +146,7 @@ export function Boat() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="pt-16 lg:pt-24 pb-12">
|
||||
<div className="pt-12 lg:pt-24 pb-12">
|
||||
<Container>
|
||||
<div ref={setReferenceWindowRef}>
|
||||
<h2 className="font-display mt-2 text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
|
||||
|
||||
28
public/images/logos/logo_white.svg
Normal file
28
public/images/logos/logo_white.svg
Normal file
@@ -0,0 +1,28 @@
|
||||
<svg width="139" height="30" viewBox="0 0 139 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_124_40)">
|
||||
<g clip-path="url(#clip1_124_40)">
|
||||
<mask id="mask0_124_40" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="139" height="30">
|
||||
<path d="M138.805 0H0V30H138.805V0Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_124_40)">
|
||||
<path d="M15.4227 15C19.6816 15 23.1341 11.6421 23.1341 7.5C23.1341 3.35786 19.6816 0 15.4227 0C11.1639 0 7.71136 3.35786 7.71136 7.5C7.71136 11.6421 11.1639 15 15.4227 15Z" fill="white" fill-opacity="0.7"/>
|
||||
<path d="M7.71138 22.5C11.9703 22.5 15.4228 19.1421 15.4228 15C15.4228 10.8579 11.9703 7.5 7.71138 7.5C3.4525 7.5 0 10.8579 0 15C0 19.1421 3.4525 22.5 7.71138 22.5Z" fill="white" fill-opacity="0.7"/>
|
||||
<path d="M23.1342 22.5C27.393 22.5 30.8455 19.1421 30.8455 15C30.8455 10.8579 27.393 7.5 23.1342 7.5C18.8753 7.5 15.4228 10.8579 15.4228 15C15.4228 19.1421 18.8753 22.5 23.1342 22.5Z" fill="white" fill-opacity="0.7"/>
|
||||
<path d="M20.8754 27.8032C25.1343 27.8032 28.5868 24.4454 28.5868 20.3032C28.5868 16.1611 25.1343 12.8032 20.8754 12.8032C16.6166 12.8032 13.1641 16.1611 13.1641 20.3032C13.1641 24.4454 16.6166 27.8032 20.8754 27.8032Z" fill="white" fill-opacity="0.7"/>
|
||||
<path d="M9.97004 27.8032C14.2289 27.8032 17.6814 24.4454 17.6814 20.3032C17.6814 16.1611 14.2289 12.8032 9.97004 12.8032C5.71117 12.8032 2.25867 16.1611 2.25867 20.3032C2.25867 24.4454 5.71117 27.8032 9.97004 27.8032Z" fill="white" fill-opacity="0.7"/>
|
||||
<path d="M15.4227 30C19.6816 30 23.1341 26.6421 23.1341 22.5C23.1341 18.3579 19.6816 15 15.4227 15C11.1639 15 7.71136 18.3579 7.71136 22.5C7.71136 26.6421 11.1639 30 15.4227 30Z" fill="white" fill-opacity="0.7"/>
|
||||
<path d="M9.97004 17.1968C14.2289 17.1968 17.6814 13.8389 17.6814 9.69678C17.6814 5.55464 14.2289 2.19678 9.97004 2.19678C5.71117 2.19678 2.25867 5.55464 2.25867 9.69678C2.25867 13.8389 5.71117 17.1968 9.97004 17.1968Z" fill="white" fill-opacity="0.7"/>
|
||||
<path d="M20.8754 17.1968C25.1343 17.1968 28.5868 13.8389 28.5868 9.69678C28.5868 5.55464 25.1343 2.19678 20.8754 2.19678C16.6166 2.19678 13.1641 5.55464 13.1641 9.69678C13.1641 13.8389 16.6166 17.1968 20.8754 17.1968Z" fill="white" fill-opacity="0.7"/>
|
||||
<path d="M47.8414 25.7251L38.4026 4.7251H42.7519L51.1727 23.7151H48.6742L57.1876 4.7251H61.1975L51.7896 25.7251H47.8414ZM70.2921 13.4551H81.0265V16.6651H70.2921V13.4551ZM70.6006 22.4551H82.7847V25.7251H66.5907V4.7251H82.3529V7.9951H70.6006V22.4551ZM90.3395 25.7251V4.7251H99.7783C102.123 4.7251 104.178 5.1651 105.947 6.0451C107.716 6.92509 109.094 8.1451 110.081 9.7051C111.068 11.2651 111.561 13.1051 111.561 15.2251C111.561 17.3251 111.068 19.1651 110.081 20.7451C109.094 22.3051 107.716 23.5251 105.947 24.4051C104.178 25.2851 102.123 25.7251 99.7783 25.7251H90.3395ZM94.3495 22.4251H99.5932C101.217 22.4251 102.616 22.1251 103.788 21.5251C104.98 20.9251 105.896 20.0851 106.533 19.0051C107.191 17.9251 107.52 16.6651 107.52 15.2251C107.52 13.7651 107.191 12.5051 106.533 11.4451C105.896 10.3651 104.98 9.5251 103.788 8.9251C102.616 8.3251 101.217 8.0251 99.5932 8.0251H94.3495V22.4251ZM115.553 25.7251L125.269 4.7251H129.217L138.964 25.7251H134.769L126.41 6.7951H128.014L119.686 25.7251H115.553ZM120.025 20.8651L121.105 17.8051H132.764L133.844 20.8651H120.025Z" fill="white"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_124_40">
|
||||
<rect width="139" height="30" fill="white"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_124_40">
|
||||
<rect width="139" height="30" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
Binary file not shown.
@@ -20,6 +20,7 @@ import Carousel from '@/components/Carousel'
|
||||
import CnnVideo from '@/components/CNNVIDEO'
|
||||
import { CallToAction4 } from '@/components/CallToAction4'
|
||||
import { Logos } from '@/components/Logos'
|
||||
import { Hero2 } from '@/components/Hero2'
|
||||
|
||||
|
||||
export default function Home() {
|
||||
@@ -27,7 +28,7 @@ export default function Home() {
|
||||
<>
|
||||
<Header />
|
||||
<main>
|
||||
<Hero />
|
||||
<Hero2 />
|
||||
<Logos />
|
||||
<CallToAction />
|
||||
<Boat />
|
||||
|
||||
@@ -3,11 +3,11 @@ import clsx from 'clsx'
|
||||
|
||||
const baseStyles = {
|
||||
solid:
|
||||
'group inline-flex items-center justify-center rounded-xl py-1.5 px-3.5 lg:py-2 lg:px-4 text-xs lg:text-sm font-light focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2',
|
||||
'group inline-flex items-center justify-center rounded-xl py-1.5 px-2 text-xs lg:text-sm font-medium focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2',
|
||||
solidNoRounded:
|
||||
'group inline-flex items-center justify-center py-1.5 px-3.5 lg:py-2 lg:px-4 text-xs lg:text-sm font-light focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2',
|
||||
outline:
|
||||
'group inline-flex ring-1 items-center justify-center rounded-xl py-1.5 px-3.5 lg:py-2 lg:px-4 text-xs lg:text-sm font-light focus:outline-none',
|
||||
'group inline-flex ring-1 items-center justify-center rounded-xl py-1.5 px-3.5 lg:py-2 lg:px-2 text-xs lg:text-sm font-medium focus:outline-none',
|
||||
}
|
||||
|
||||
const variantStyles = {
|
||||
@@ -21,7 +21,7 @@ const variantStyles = {
|
||||
'bg-white text-slate-100 hover:bg-gold-50 active:bg-gold-200 active:text-slate-100 focus-visible:outline-white',
|
||||
},
|
||||
solidNoRounded: {
|
||||
bookNow: 'bg-darkgr-900 text-white hover:bg-darkgr-800 active:bg-darkgr-700 focus-visible:outline-darkgr-900',
|
||||
bookNow: 'bg-[#48774B] text-white hover:bg-[#3d6540] active:bg-[#345636] focus-visible:outline-[#48774B]',
|
||||
},
|
||||
outline: {
|
||||
slate:
|
||||
|
||||
@@ -10,7 +10,7 @@ export function CallToAction() {
|
||||
return (
|
||||
<section
|
||||
id="about"
|
||||
className="relative overflow-hidden bg-transparent py-24"
|
||||
className="relative overflow-hidden bg-transparent py-12"
|
||||
>
|
||||
<Container className="relative">
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
|
||||
@@ -1,20 +1,16 @@
|
||||
import { H2, PS } from '@/components/text'
|
||||
import { H2, PS, P } from '@/components/text'
|
||||
import { m } from 'framer-motion'
|
||||
|
||||
export default function Example() {
|
||||
export default function Daha1() {
|
||||
return (
|
||||
<div className="relative isolate overflow-hidden bg-transparent py-24 sm:py-32">
|
||||
<img
|
||||
alt=""
|
||||
src="/images/daha1.jpg"
|
||||
className="absolute inset-0 -z-10 h-full w-full object-cover"
|
||||
/>
|
||||
<div className="relative isolate overflow-hidden bg-transparent lg:pt-24 pt-12">
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div className="mx-auto max-w-2xl lg:mx-0">
|
||||
<H2>VEDA DAHABIYAS</H2>
|
||||
<PS>
|
||||
<div className="mx-auto max-w-7xl lg:mx-0">
|
||||
<H2>VEDA Dahabiyas</H2>
|
||||
<P className='mt-2'>
|
||||
Embark on a Transformative Journey Along the Nile
|
||||
</PS>
|
||||
<PS>
|
||||
</P>
|
||||
<PS className="mt-6">
|
||||
Discover the heart of Egypt on our specially designed dahabiyas, crafted to elevate your energy and frequency through unique experiences. These elegant vessels are perfect for spiritual work and mystical exploration, offering a harmonious setting to connect with the essence of the Nile. Drift past ancient wonders and immerse yourself in the tranquil rhythm of the river, embarking on a journey of self-discovery and rejuvenation.
|
||||
</PS>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { Container } from '@/components/Container';
|
||||
|
||||
|
||||
const categories = [
|
||||
{
|
||||
name: 'VEDA I',
|
||||
@@ -31,15 +32,10 @@ const categories = [
|
||||
},
|
||||
]
|
||||
|
||||
export default function Example() {
|
||||
export default function Daha2() {
|
||||
return (
|
||||
<div className="bg-transparent">
|
||||
<div className="mx-auto max-w-xl px-6 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
|
||||
<h2 className="text-2xl font-bold tracking-tight text-gray-900">DAHABIYAS</h2>
|
||||
<p className="mt-4 text-base text-gray-500">
|
||||
Choose from our selection of four dahabiyas, each designed to provide a unique and soulful journey.
|
||||
</p>
|
||||
|
||||
<div className="mx-auto max-w-xl px-6 pt-4 pb-12 lg:max-w-7xl lg:px-8">
|
||||
<div className="mt-10 space-y-12 lg:grid lg:grid-cols-4 lg:gap-x-8 lg:space-y-0">
|
||||
{categories.map((category) => (
|
||||
<a key={category.name} href={category.href} className="group block">
|
||||
@@ -53,7 +49,7 @@ export default function Example() {
|
||||
className="h-full w-full object-cover object-center"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="mt-4 text-base font-semibold text-gray-900">{category.name}</h3>
|
||||
<H3 className="mt-4 text-base font-semibold text-gray-900">{category.name}</h3>
|
||||
<p className="mt-2 text-sm text-gray-500">{category.description}</p>
|
||||
</a>
|
||||
))}
|
||||
|
||||
@@ -81,7 +81,7 @@ function MobileNavigation() {
|
||||
export function Header() {
|
||||
return (
|
||||
<header className="fixed top-0 left-0 right-0 z-50 bg-transparent backdrop-blur-sm">
|
||||
<nav className="relative z-50 flex items-center py-3 lg:py-4">
|
||||
<nav className="relative z-50 flex items-center py-2 lg:py-3">
|
||||
{/* Logo and Navigation Container - Left and Center */}
|
||||
<div className="flex-1 max-w-7xl ml-3 mx-0 lg:px-4 px-6">
|
||||
<div className="flex items-center">
|
||||
|
||||
46
src/components/Hero2.jsx
Normal file
46
src/components/Hero2.jsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import { Button } from '@/components/Button'
|
||||
import { H1, H2, H3, H4, P, PS, PXS, PXXS } from '@/components/text'
|
||||
|
||||
export function Hero2() {
|
||||
return (
|
||||
<div className="relative w-full overflow-hidden -mt-3">
|
||||
{/* Background Video - Extended to cover header */}
|
||||
<video
|
||||
className="w-full h-auto block relative z-0"
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
>
|
||||
<source src="/videos/main.mp4" type="video/mp4" />
|
||||
</video>
|
||||
|
||||
{/* Black Overlay */}
|
||||
<div className="absolute inset-0 bg-black opacity-40"></div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="absolute inset-0 flex items-center justify-center text-center px-6 z-20">
|
||||
<div className="max-w-4xl">
|
||||
<H1 className="text-creme-200">
|
||||
Nile Cruises{' '}
|
||||
<span className="relative whitespace-nowrap text-gold-100/70">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 418 42"
|
||||
className="absolute top-2/3 left-0 h-[0.58em] w-full fill-gold-100/70"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z" />
|
||||
</svg>
|
||||
<span className="relative">Reimagined</span>
|
||||
</span>{' '}
|
||||
</H1>
|
||||
<P className="mt-10 leading-normal text-white">
|
||||
VEDA welcomes you into her home providing unique wellness cruises blending cultural authentic experiences with unparalleled freedom and privacy.
|
||||
Our organic cuisine, cultural activities and dedicated warm hearted crew will make your VEDA cruise an unforgettable experience.
|
||||
</P>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -8,9 +8,6 @@ export function Logos() {
|
||||
return (
|
||||
<Container>
|
||||
<div className="relative z-10 py-8 text-center">
|
||||
<H3>
|
||||
As seen and featured on
|
||||
</H3>
|
||||
<ul
|
||||
role="list"
|
||||
className="mt-8 flex items-center flex-wrap justify-center gap-x-8 sm:flex-col sm:gap-x-0 sm:gap-y-10 xl:flex-row xl:gap-x-12 xl:gap-y-0"
|
||||
|
||||
@@ -1,34 +1,12 @@
|
||||
'use client'
|
||||
|
||||
import { Fragment, useState } from 'react'
|
||||
import { P, H3, H4, PXS, PXXS } from '@/components/text'
|
||||
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'
|
||||
import { H2, PS } from '@/components/text'
|
||||
|
||||
|
||||
const product = {
|
||||
@@ -64,9 +42,7 @@ const product = {
|
||||
{ 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>Groups enjoy privacy and a highly personalized experience aboard our elegant and homy dahabiya, ensuring a vibrant, exclusive and secluded setting.</p>
|
||||
`,
|
||||
description: 'Groups enjoy privacy and a highly personalized experience aboard our elegant and homy dahabiya, ensuring a vibrant, exclusive and secluded setting.',
|
||||
details: [
|
||||
{
|
||||
name: 'Features',
|
||||
@@ -92,79 +68,12 @@ function classNames(...classes) {
|
||||
}
|
||||
|
||||
export function Retreats() {
|
||||
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">
|
||||
<main className="mx-auto max-w-7xl sm:px-6 sm:pt-12 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">
|
||||
{/* 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>
|
||||
|
||||
{/* Image gallery */}
|
||||
<TabGroup className="flex flex-col-reverse">
|
||||
{/* Image selector */}
|
||||
@@ -173,15 +82,15 @@ export function Retreats() {
|
||||
{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"
|
||||
className="group relative flex h-24 cursor-pointer items-center justify-center rounded-md bg-transparent 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">
|
||||
<span className="absolute inset-0 overflow-hidden ">
|
||||
<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"
|
||||
className="pointer-events-none absolute inset-0 ring-1 ring-transparent ring-offset-2 group-data-selected:ring-indigo-500"
|
||||
/>
|
||||
</Tab>
|
||||
))}
|
||||
@@ -191,11 +100,61 @@ export function Retreats() {
|
||||
<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" />
|
||||
<img alt={image.alt} src={image.src} className="aspect-square w-full object-cover" />
|
||||
</TabPanel>
|
||||
))}
|
||||
</TabPanels>
|
||||
</TabGroup>
|
||||
|
||||
{/* Product info */}
|
||||
<div className="mt-6 px-6 sm:mt-16 sm:px-0 lg:mt-0">
|
||||
<H2 className="">{product.name}</H2>
|
||||
|
||||
<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-4">
|
||||
<h3 className="sr-only">Description</h3>
|
||||
|
||||
<div className="space-y-2 text-base text-gray-700">
|
||||
<PS>{product.description}</PS>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section aria-labelledby="details-heading" className="mt-12">
|
||||
<H2 id="details-heading" className="sr-only">
|
||||
Additional details
|
||||
</H2>
|
||||
|
||||
<div className="space-y-8 border-t border-gray-300 pt-8">
|
||||
{product.details.map((detail) => (
|
||||
<div key={detail.name}>
|
||||
<h3>
|
||||
<PS className="font-medium text-gray-900 mb-4">
|
||||
{detail.name}
|
||||
</PS>
|
||||
</h3>
|
||||
<ul
|
||||
role="list"
|
||||
className="list-disc space-y-2 pl-5 text-sm/6 text-gray-700 marker:text-gray-300"
|
||||
>
|
||||
{detail.items.map((item) => (
|
||||
<li key={item} className="pl-2 font-light">
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -14,6 +14,20 @@ export function Heading({ as: Component = 'h1', className, children, ...props })
|
||||
)
|
||||
}
|
||||
|
||||
export function H1({ className, children, ...props }) {
|
||||
return (
|
||||
<h1
|
||||
className={clsx(
|
||||
'font-vollkorn lg:text-6xl font-medium tracking-tight text-bg-darkbrown text-5xl',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</h1>
|
||||
)
|
||||
}
|
||||
|
||||
export function H2({ className, children, ...props }) {
|
||||
return (
|
||||
<h2
|
||||
|
||||
Reference in New Issue
Block a user