veda/www_veda_2025
12
0
Fork 1
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

10
src/components/Button.jsx
View File

@@ -29,6 +29,12 @@ const variantStyles = {
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 }) {
@@ -43,7 +49,9 @@ export function Button({ className, ...props }) {
? variantStyles.solid[props.color]
: props.variant === 'solidNoRounded'
? variantStyles.solidNoRounded[props.color]
: undefined,
: props.variant === 'link'
? variantStyles.link[props.color]
: undefined,
className,
)

26
src/components/Header.jsx
View File

@@ -53,18 +53,18 @@ function MobileNavigation() {
return (
<Popover>
<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"
>
{({ open }) => <MobileNavIcon open={open} />}
</PopoverButton>
<PopoverBackdrop
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
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="/story">STORY</MobileNavLink>
@@ -80,14 +80,14 @@ function MobileNavigation() {
export function Header() {
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>
<nav className="relative z-50 flex justify-between">
<div className="flex items-center md:gap-x-12">
<Link href="/" aria-label="Home" className="overflow-visible">
<Logo className="h-8 w-auto max-w-none sm:h-9 md:h-10 lg:h-11 xl:h-12" />
<nav className="relative z-50 flex items-center justify-between py-3 lg:py-4">
<div className="flex items-center md:gap-x-8 lg:gap-x-12">
<Link href="/" aria-label="Home" className="overflow-visible flex-shrink-0">
<Logo className="h-7 w-auto max-w-none sm:h-8 md:h-9 lg:h-10" />
</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="/story">STORY</NavLink>
<NavLink href="/experiences">EXPERIENCES</NavLink>
@@ -95,13 +95,13 @@ export function Header() {
<NavLink href="/itinerary">ITINERARY</NavLink>
</div>
</div>
<div className="flex items-center gap-x-5 md:gap-x-8">
<Button href="/contact" variant="solidNoRounded" color="bookNow">
<span className="tracking-wide">
<div className="flex items-center gap-x-3 md:gap-x-4">
<Button href="/contact" variant="solidNoRounded" color="bookNow" className="text-xs sm:text-sm">
<span className="tracking-wide font-medium">
Book Now
</span>
</Button>
<div className="-mr-1 md:hidden">
<div className="md:hidden">
<MobileNavigation />
</div>
</div>

27
src/components/Hero.jsx
View File

@@ -5,21 +5,32 @@ import Image from 'next/image'
export function Hero() {
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 */}
<div className="relative overflow-hidden pt-16">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="relative overflow-hidden">
<div className="mx-auto max-w-7xl">
<img
alt="App screenshot"
src="/images/hero.jpg"
width={2432}
height={1442}
width={1360}
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 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>
)
}