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

BIN
public/.DS_Store vendored
View File

Binary file not shown.

BIN
public/videos/hero.mp4
View File

Binary file not shown.

4
src/app/layout.jsx
View File

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

13
src/components/Button.jsx
View File

@@ -3,9 +3,11 @@ import clsx from 'clsx'
const baseStyles = { const baseStyles = {
solid: 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: 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 = { const variantStyles = {
@@ -13,9 +15,14 @@ const variantStyles = {
slate: 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', '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]', 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: white:
'bg-white text-slate-100 hover:bg-gold-50 active:bg-gold-200 active:text-slate-100 focus-visible:outline-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: { outline: {
slate: 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', '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,6 +41,8 @@ export function Button({ className, ...props }) {
? variantStyles.outline[props.color] ? variantStyles.outline[props.color]
: props.variant === 'solid' : props.variant === 'solid'
? variantStyles.solid[props.color] ? variantStyles.solid[props.color]
: props.variant === 'solidNoRounded'
? variantStyles.solidNoRounded[props.color]
: undefined, : undefined,
className, className,
) )

4
src/components/CallToAction.jsx
View File

@@ -9,7 +9,7 @@ export function CallToAction() {
return ( return (
<section <section
id="about" id="about"
className="relative overflow-hidden bg-gold-900 py-12" className="relative overflow-hidden bg-bg-stone py-12"
> >
<img <img
className="absolute left-1/2 top-1/2 max-w-none -translate-x-1/2 -translate-y-1/2" 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"> <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. 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> </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. Discover a cruise like no other with us on the Nile.
</p> </p>
</div> </div>

4
src/components/Footer.jsx
View File

@@ -3,11 +3,11 @@ import { Logo } from '@/components/Logo'
export function Footer() { export function Footer() {
return ( return (
<footer className="bg-transparent border-darkgr-950 border-t-2"> <footer className="bg-bg-clay border-primary-olive border-t-2">
<Container> <Container>
<div className="flex items-center justify-between py-8"> <div className="flex items-center justify-between py-8">
<Logo className="h-10 w-auto" /> <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. Copyright &copy; {new Date().getFullYear()} VEDA. All rights reserved.
</p> </p>
</div> </div>

10
src/components/Header.jsx
View File

@@ -64,7 +64,7 @@ function MobileNavigation() {
/> />
<PopoverPanel <PopoverPanel
transition 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="/">HOME</MobileNavLink>
<MobileNavLink href="/story">STORY</MobileNavLink> <MobileNavLink href="/story">STORY</MobileNavLink>
@@ -72,7 +72,7 @@ function MobileNavigation() {
<MobileNavLink href="/dahabiyas">DAHABIYAS</MobileNavLink> <MobileNavLink href="/dahabiyas">DAHABIYAS</MobileNavLink>
<MobileNavLink href="/itinerary">ITINERARY</MobileNavLink> <MobileNavLink href="/itinerary">ITINERARY</MobileNavLink>
<hr className="m-2 border-slate-300/40" /> <hr className="m-2 border-slate-300/40" />
<MobileNavLink href="/contact">BOOK NOW</MobileNavLink> <MobileNavLink href="/contact">Book Now</MobileNavLink>
</PopoverPanel> </PopoverPanel>
</Popover> </Popover>
) )
@@ -80,7 +80,7 @@ function MobileNavigation() {
export function Header() { export function Header() {
return ( 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> <Container>
<nav className="relative z-50 flex justify-between"> <nav className="relative z-50 flex justify-between">
<div className="flex items-center md:gap-x-12"> <div className="flex items-center md:gap-x-12">
@@ -96,8 +96,8 @@ export function Header() {
</div> </div>
</div> </div>
<div className="flex items-center gap-x-5 md:gap-x-8"> <div className="flex items-center gap-x-5 md:gap-x-8">
<Button href="/contact" color="blue"> <Button href="/contact" variant="solidNoRounded" color="bookNow">
<span className="font-semibold tracking-wide"> <span className="tracking-wide">
Book Now Book Now
</span> </span>
</Button> </Button>

60
src/components/Hero.jsx
View File

@@ -1,56 +1,26 @@
import { Button } from '@/components/Button' import { Button } from '@/components/Button'
import { Container } from '@/components/Container' import { Container } from '@/components/Container'
import { Logo } from '@/components/Logo' import Image from 'next/image'
export function Hero() { export function Hero() {
return ( return (
<section className="relative w-full lg:h-screen bg-transparent h-[550px] lg:mt-0 mt-0"> <div className="mx-auto max-w-7xl px-6 lg:px-8 -z-10 -mt-10">
{/* Background Video */} {/* Background Image with opacity to show sand background */}
<div className="absolute inset-0 w-full h-full overflow-hidden z-0 bg-[#FEFFF6] opacity-25"> <div className="relative overflow-hidden pt-16">
<iframe <div className="mx-auto max-w-7xl px-6 lg:px-8">
src="https://player.vimeo.com/video/1112045863?autoplay=1&loop=1&muted=1&controls=0&background=1&quality=auto&responsive=1" <img
className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-0" alt="App screenshot"
allow="autoplay; fullscreen; picture-in-picture" src="/images/hero.jpg"
style={{ width={2432}
width: '300%', height={1442}
height: '300%', />
minWidth: '100vw', <div aria-hidden="true" className="relative">
minHeight: '100vh', <div className="absolute -inset-x-20 bottom-0 bg-linear-to-t from-white pt-[7%]" />
objectFit: 'cover', </div>
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>
</div> </div>
</div> </div>
</section>
) )
} }
1

2
src/components/NavLink.jsx
View File

@@ -4,7 +4,7 @@ export function NavLink({ href, children }) {
return ( return (
<Link <Link
href={href} 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} {children}
</Link> </Link>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 878 KiB

14
tailwind.config.js
View File

@@ -34,6 +34,20 @@ module.exports = {
'2xl': '40rem', '2xl': '40rem',
}, },
colors: { colors: {
// New Earth Tone Palette
'primary-olive': '#7B8D42',
'primary-terracotta': '#B54A38',
'secondary-sage': '#9BAE73',
'secondary-gold': '#C49A5A',
'bg-sand': '#F3EEE7',
'bg-clay': '#D1CFC5',
'bg-stone': '#D8D8CE',
'bg-darkbrown': '#3B2A2A',
'accent-teal': '#5A7D80',
'accent-sky': '#A2B7C7',
'text-dark': '#2C2C2C',
'nav-dark': '#301d00',
// Keep existing colors for backward compatibility
gold: { gold: {
50: '#FFC876', // Lightest shade 50: '#FFC876', // Lightest shade
100: '#F5B74F', 100: '#F5B74F',