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-22 16:13:46 +02:00
parent 63066996a5
commit 9af7391564
4 changed files with 41 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/videos/.DS_Store vendored
View File

Binary file not shown.

10
src/components/Button.jsx
View File

@@ -29,6 +29,12 @@ const variantStyles = {
white: white:
'ring-slate-700 text-white hover:ring-slate-300 active:ring-slate-200 active:text-slate-100 focus-visible:outline-white', 'ring-slate-700 text-white hover:ring-slate-300 active:ring-slate-200 active:text-slate-100 focus-visible:outline-white',
}, },
link: {
slate:
'text-slate-900 hover:text-slate-700 focus-visible:outline-gold-600 border-b border-slate-900 hover:border-slate-700',
white:
'text-white hover:text-slate-300 focus-visible:outline-white border-b border-white hover:border-slate-300',
},
} }
export function Button({ className, ...props }) { export function Button({ className, ...props }) {
@@ -43,7 +49,9 @@ export function Button({ className, ...props }) {
? variantStyles.solid[props.color] ? variantStyles.solid[props.color]
: props.variant === 'solidNoRounded' : props.variant === 'solidNoRounded'
? variantStyles.solidNoRounded[props.color] ? variantStyles.solidNoRounded[props.color]
: undefined, : props.variant === 'link'
? variantStyles.link[props.color]
: undefined,
className, className,
) )

26
src/components/Header.jsx
View File

@@ -53,18 +53,18 @@ function MobileNavigation() {
return ( return (
<Popover> <Popover>
<PopoverButton <PopoverButton
className="relative z-10 flex h-6 w-6 items-center justify-center ui-not-focus-visible:outline-none" className="relative z-50 flex h-8 w-8 items-center justify-center ui-not-focus-visible:outline-none"
aria-label="Toggle Navigation" aria-label="Toggle Navigation"
> >
{({ open }) => <MobileNavIcon open={open} />} {({ open }) => <MobileNavIcon open={open} />}
</PopoverButton> </PopoverButton>
<PopoverBackdrop <PopoverBackdrop
transition transition
className="fixed inset-0 bg-slate-50/50 duration-150 data-[closed]:opacity-0 data-[enter]:ease-out data-[leave]:ease-in" className="fixed inset-0 z-40 bg-slate-900/20 backdrop-blur-sm duration-150 data-[closed]:opacity-0 data-[enter]:ease-out data-[leave]:ease-in"
/> />
<PopoverPanel <PopoverPanel
transition transition
className="absolute inset-x-0 top-full mt-4 flex origin-top flex-col rounded-lg bg-bg-sand p-4 text-lg tracking-tight text-nav-dark shadow-xl ring-1 ring-slate-900/5 data-[closed]:scale-95 data-[closed]:opacity-0 data-[enter]:duration-150 data-[leave]:duration-100 data-[enter]:ease-out data-[leave]:ease-in" className="absolute inset-x-0 top-full z-50 mt-4 flex origin-top flex-col rounded-lg bg-bg-sand border border-slate-200/20 p-4 text-lg tracking-tight text-nav-dark shadow-xl ring-1 ring-slate-900/5 data-[closed]:scale-95 data-[closed]:opacity-0 data-[enter]:duration-150 data-[leave]:duration-100 data-[enter]:ease-out data-[leave]:ease-in"
> >
<MobileNavLink href="/">HOME</MobileNavLink> <MobileNavLink href="/">HOME</MobileNavLink>
<MobileNavLink href="/story">STORY</MobileNavLink> <MobileNavLink href="/story">STORY</MobileNavLink>
@@ -80,14 +80,14 @@ function MobileNavigation() {
export function Header() { export function Header() {
return ( return (
<header className="fixed top-0 left-0 right-0 z-50 bg-bg-sand backdrop-blur-sm py-4"> <header className="fixed top-0 left-0 right-0 z-50 bg-bg-sand/95 backdrop-blur-sm border-b border-slate-200/20 shadow-sm">
<Container> <Container>
<nav className="relative z-50 flex justify-between"> <nav className="relative z-50 flex items-center justify-between py-3 lg:py-4">
<div className="flex items-center md:gap-x-12"> <div className="flex items-center md:gap-x-8 lg:gap-x-12">
<Link href="/" aria-label="Home" className="overflow-visible"> <Link href="/" aria-label="Home" className="overflow-visible flex-shrink-0">
<Logo className="h-8 w-auto max-w-none sm:h-9 md:h-10 lg:h-11 xl:h-12" /> <Logo className="h-7 w-auto max-w-none sm:h-8 md:h-9 lg:h-10" />
</Link> </Link>
<div className="hidden md:flex md:gap-x-6"> <div className="hidden md:flex md:gap-x-4 lg:gap-x-6">
<NavLink href="/">HOME</NavLink> <NavLink href="/">HOME</NavLink>
<NavLink href="/story">STORY</NavLink> <NavLink href="/story">STORY</NavLink>
<NavLink href="/experiences">EXPERIENCES</NavLink> <NavLink href="/experiences">EXPERIENCES</NavLink>
@@ -95,13 +95,13 @@ export function Header() {
<NavLink href="/itinerary">ITINERARY</NavLink> <NavLink href="/itinerary">ITINERARY</NavLink>
</div> </div>
</div> </div>
<div className="flex items-center gap-x-5 md:gap-x-8"> <div className="flex items-center gap-x-3 md:gap-x-4">
<Button href="/contact" variant="solidNoRounded" color="bookNow"> <Button href="/contact" variant="solidNoRounded" color="bookNow" className="text-xs sm:text-sm">
<span className="tracking-wide"> <span className="tracking-wide font-medium">
Book Now Book Now
</span> </span>
</Button> </Button>
<div className="-mr-1 md:hidden"> <div className="md:hidden">
<MobileNavigation /> <MobileNavigation />
</div> </div>
</div> </div>

27
src/components/Hero.jsx
View File

@@ -5,21 +5,32 @@ import Image from 'next/image'
export function Hero() { export function Hero() {
return ( return (
<div className="mx-auto max-w-7xl px-6 lg:px-8 -z-10 -mt-10"> <div className=" max-w-8xl px-6 lg:px-8 -z-10 -mt-5 mx-0 bg-bg-sand pb-24">
{/* Background Image with opacity to show sand background */} {/* Background Image with opacity to show sand background */}
<div className="relative overflow-hidden pt-16"> <div className="relative overflow-hidden">
<div className="mx-auto max-w-7xl px-6 lg:px-8"> <div className="mx-auto max-w-7xl">
<img <img
alt="App screenshot" alt="App screenshot"
src="/images/hero.jpg" src="/images/hero.jpg"
width={2432} width={1360}
height={1442} height={600}
/> />
<div aria-hidden="true" className="relative">
<div className="absolute -inset-x-20 bottom-0 bg-linear-to-t from-white pt-[7%]" />
</div>
</div> </div>
</div> </div>
<div className="max-w-7xl ml-3 px-6 lg:px-8 mx-0">
<h2 className="mt-8 text-2xl font-medium tracking-tight text-bg-darkbrown sm:text-3xl">
Nile Cruises, Reimagined.
</h2>
<p className="mt-4 text-lg/8 text-gray-600 font-extralight leading-tight">
Veda welcomes you into her home providing unique wellness cruises blending cultural authentic experiences with unparalleled freedom and privacy.<br/>
Our organic cuisine, cultural activities and dedicated warm hearted crew will make your veda cruise an unforgettable experience.
</p>
<button className="mt-4 text-sm lg:text-sm tracking-wide">
<Button variant="link" color="slate">
Learn More
</Button>
</button>
</div>
</div> </div>
) )
} }