veda/www_veda_2025
12
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
sasha-astiadi
2025-08-26 18:52:56 +02:00
parent cd2cef845f
commit 129de27e4d
14 changed files with 175 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/page.jsx
View File

@@ -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 />

6
src/components/Button.jsx
View File

@@ -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:

2
src/components/CallToAction.jsx
View File

@@ -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">

22
src/components/Daha1.jsx
View File

@@ -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>

12
src/components/Daha2.jsx
View File

@@ -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>
))}

2
src/components/Header.jsx
View File

@@ -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
View 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>
)
}

3
src/components/Logos.jsx
View File

@@ -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"

157
src/components/Retreats.jsx
View File

@@ -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
src/components/text.jsx
View File

@@ -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