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

pok

Browse Source
This commit is contained in:
sasha-astiadi
2025-08-22 15:38:20 +02:00
parent 09e2e22886
commit 63066996a5
11 changed files with 54 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/layout.jsx
View File

@@ -29,12 +29,12 @@ export default function RootLayout({ children }) {
<html
lang="en"
className={clsx(
'h-full scroll-smooth bg-[#FEFFF6] antialiased',
'h-full scroll-smooth bg-sand antialiased',
inter.variable,
lexend.variable,
)}
>
<body className="flex h-full flex-col pt-20">{children}</body>
<body className="flex h-full flex-col pt-20 bg-sand">{children}</body>
</html>
)
}

15
src/components/Button.jsx
View File

@@ -3,9 +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-semibold 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-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',
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 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-4 text-xs lg:text-sm font-light focus:outline-none',
}
const variantStyles = {
@@ -13,9 +15,14 @@ const variantStyles = {
slate:
'bg-gold-900 text-white hover:bg-gold-800 hover:text-slate-100 active:bg-gold-800 active:text-gold-300 focus-visible:outline-gold-900',
blue: 'bg-[#28602C] text-white hover:text-slate-100 hover:bg-[#245527] active:bg-[#1e4a21] active:text-slate-100 focus-visible:outline-[#28602C]',
olive: 'bg-primary-olive text-white hover:bg-secondary-gold hover:text-text-dark active:bg-secondary-gold active:text-text-dark focus-visible:outline-primary-olive',
terracotta: 'bg-primary-terracotta text-white hover:bg-primary-olive hover:text-white active:bg-primary-olive active:text-white focus-visible:outline-primary-terracotta',
white:
'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',
},
outline: {
slate:
'ring-slate-200 text-slate-200 hover:text-slate-300 hover:ring-slate-300 active:bg-slate-100 active:text-slate-200 focus-visible:outline-gold-600 focus-visible:ring-slate-300',
@@ -34,7 +41,9 @@ export function Button({ className, ...props }) {
? variantStyles.outline[props.color]
: props.variant === 'solid'
? variantStyles.solid[props.color]
: undefined,
: props.variant === 'solidNoRounded'
? variantStyles.solidNoRounded[props.color]
: undefined,
className,
)

4
src/components/CallToAction.jsx
View File

@@ -9,7 +9,7 @@ export function CallToAction() {
return (
<section
id="about"
className="relative overflow-hidden bg-gold-900 py-12"
className="relative overflow-hidden bg-bg-stone py-12"
>
<img
className="absolute left-1/2 top-1/2 max-w-none -translate-x-1/2 -translate-y-1/2"
@@ -27,7 +27,7 @@ export function CallToAction() {
<h2 className="font-display lg:text-3xl text-xl tracking-tight text-white pt-4 lg:pt-6">
VEDA provides an unparalleled cruise experience on the Nile, blending authenticity with sophistication. Enjoy private journeys featuring organic cuisine, hollistic activities, and a dedicated, warm-hearted crew.
</h2>
<p className="mt-4 text-xl lg:text-2xl italic tracking-tight text-darkgr-300 pb-6">
<p className="mt-4 text-xl lg:text-2xl italic tracking-tight text-white pb-6">
Discover a cruise like no other with us on the Nile.
</p>
</div>

4
src/components/Footer.jsx
View File

@@ -3,11 +3,11 @@ import { Logo } from '@/components/Logo'
export function Footer() {
return (
<footer className="bg-transparent border-darkgr-950 border-t-2">
<footer className="bg-bg-clay border-primary-olive border-t-2">
<Container>
<div className="flex items-center justify-between py-8">
<Logo className="h-10 w-auto" />
<p className="text-sm text-slate-500">
<p className="text-sm text-primary-olive hover:text-primary-terracotta transition-colors duration-200">
Copyright &copy; {new Date().getFullYear()} VEDA. All rights reserved.
</p>
</div>

10
src/components/Header.jsx
View File

@@ -64,7 +64,7 @@ function MobileNavigation() {
/>
<PopoverPanel
transition
className="absolute inset-x-0 top-full mt-4 flex origin-top flex-col rounded-lg bg-[#FEFFF6] p-4 text-lg tracking-tight text-slate-900 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 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"
>
<MobileNavLink href="/">HOME</MobileNavLink>
<MobileNavLink href="/story">STORY</MobileNavLink>
@@ -72,7 +72,7 @@ function MobileNavigation() {
<MobileNavLink href="/dahabiyas">DAHABIYAS</MobileNavLink>
<MobileNavLink href="/itinerary">ITINERARY</MobileNavLink>
<hr className="m-2 border-slate-300/40" />
<MobileNavLink href="/contact">BOOK NOW</MobileNavLink>
<MobileNavLink href="/contact">Book Now</MobileNavLink>
</PopoverPanel>
</Popover>
)
@@ -80,7 +80,7 @@ function MobileNavigation() {
export function Header() {
return (
<header className="fixed top-0 left-0 right-0 z-50 bg-[#FEFFF6] backdrop-blur-sm py-4">
<header className="fixed top-0 left-0 right-0 z-50 bg-bg-sand backdrop-blur-sm py-4">
<Container>
<nav className="relative z-50 flex justify-between">
<div className="flex items-center md:gap-x-12">
@@ -96,8 +96,8 @@ export function Header() {
</div>
</div>
<div className="flex items-center gap-x-5 md:gap-x-8">
<Button href="/contact" color="blue">
<span className="font-semibold tracking-wide">
<Button href="/contact" variant="solidNoRounded" color="bookNow">
<span className="tracking-wide">
Book Now
</span>
</Button>

62
src/components/Hero.jsx
View File

@@ -1,56 +1,26 @@
import { Button } from '@/components/Button'
import { Container } from '@/components/Container'
import { Logo } from '@/components/Logo'
import Image from 'next/image'
export function Hero() {
return (
<section className="relative w-full lg:h-screen bg-transparent h-[550px] lg:mt-0 mt-0">
{/* Background Video */}
<div className="absolute inset-0 w-full h-full overflow-hidden z-0 bg-[#FEFFF6] opacity-25">
<iframe
src="https://player.vimeo.com/video/1112045863?autoplay=1&loop=1&muted=1&controls=0&background=1&quality=auto&responsive=1"
className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-0"
allow="autoplay; fullscreen; picture-in-picture"
style={{
width: '300%',
height: '300%',
minWidth: '100vw',
minHeight: '100vh',
objectFit: 'cover',
pointerEvents: 'none',
border: 'none'
}}
title="VEDA Background Video"
></iframe>
</div>
{/* Welcome Content Overlay */}
<div className="bg-transparent py-6 mt-0 absolute top-16 sm:top-32 left-0 right-0 z-10">
<div className="mx-auto max-w-7xl px-6 sm:px-6 lg:px-6">
<div className="flex items-start justify-start mb-4">
<Logo className="h-8 sm:h-12 w-auto" />
</div>
<div className="mx-auto max-w-5xl lg:mx-0 mt-4 sm:mt-6">
<h2 className="text-xl/5 font-medium tracking-[-0.05em] leading-[1.3] lg:leading-[1.4] text-darkgr-800 lg:text-3xl">
Veda welcomes you into her home providing unique wellness cruises blending cultural authentic experiences with unparalleled freedom and privacy.
</h2>
<h2 className="mt-2 text-lg sm:text-2xl font-medium tracking-[-0.05em] leading-[1.3] lg:leading-[1.4] text-darkgr-800 lg:text-3xl">
Our organic cuisine, cultural activities and dedicated warm hearted crew will make your veda cruise an unforgettable experience.
</h2>
</div>
<div className="mx-auto max-w-3xl lg:mx-0">
<p className="mt-4 sm:mt-6 text-2xl font-semibold tracking-[-0.05em] leading-[1.3] lg:leading-[1.4] text-darkgr-700 lg:text-4xl">
Nile Cruises, Reimagined.
</p>
<Button href="/story" color="blue" className="mt-6 lg:mt-8">
<span className="font-semibold tracking-wide">
Read Our Story
</span>
</Button>
</div>
<div className="mx-auto max-w-7xl px-6 lg:px-8 -z-10 -mt-10">
{/* 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">
<img
alt="App screenshot"
src="/images/hero.jpg"
width={2432}
height={1442}
/>
<div aria-hidden="true" className="relative">
<div className="absolute -inset-x-20 bottom-0 bg-linear-to-t from-white pt-[7%]" />
</div>
</div>
</section>
</div>
</div>
)
}
1

2
src/components/NavLink.jsx
View File

@@ -4,7 +4,7 @@ export function NavLink({ href, children }) {
return (
<Link
href={href}
className="inline-block rounded-lg px-2 py-1 text-sm text-[#245527] hover:bg-[#245527] hover:text-white transition-colors duration-200"
className="inline-block px-2 py-1 text-sm text-nav-dark hover:text-primary-terracotta transition-colors duration-200"
>
{children}
</Link>

BIN
src/images/hero.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 878 KiB