ok
This commit is contained in:
@@ -29,7 +29,7 @@ export default function RootLayout({ children }) {
|
||||
<html
|
||||
lang="en"
|
||||
className={clsx(
|
||||
'h-full scroll-smooth bg-creme-600 antialiased',
|
||||
'h-full scroll-smooth bg-[#FEFFF6] antialiased',
|
||||
inter.variable,
|
||||
lexend.variable,
|
||||
)}
|
||||
|
||||
@@ -12,7 +12,7 @@ const variantStyles = {
|
||||
solid: {
|
||||
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-gold-600 text-white hover:text-slate-100 hover:bg-gold-500 active:bg-gold-800 active:text-slate-100 focus-visible:outline-gold-600',
|
||||
blue: 'bg-[#28602C] text-white hover:text-slate-100 hover:bg-[#245527] active:bg-[#1e4a21] active:text-slate-100 focus-visible:outline-[#28602C]',
|
||||
white:
|
||||
'bg-white text-slate-100 hover:bg-gold-50 active:bg-gold-200 active:text-slate-100 focus-visible:outline-white',
|
||||
},
|
||||
|
||||
@@ -53,7 +53,7 @@ function MobileNavigation() {
|
||||
return (
|
||||
<Popover>
|
||||
<PopoverButton
|
||||
className="relative z-10 flex h-8 w-8 items-center justify-center ui-not-focus-visible:outline-none"
|
||||
className="relative z-10 flex h-6 w-6 items-center justify-center ui-not-focus-visible:outline-none"
|
||||
aria-label="Toggle Navigation"
|
||||
>
|
||||
{({ open }) => <MobileNavIcon open={open} />}
|
||||
@@ -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-white 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-[#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"
|
||||
>
|
||||
<MobileNavLink href="/">HOME</MobileNavLink>
|
||||
<MobileNavLink href="/story">STORY</MobileNavLink>
|
||||
@@ -80,7 +80,7 @@ function MobileNavigation() {
|
||||
|
||||
export function Header() {
|
||||
return (
|
||||
<header className="fixed top-0 left-0 right-0 z-50 bg-black/20 backdrop-blur-sm py-4">
|
||||
<header className="fixed top-0 left-0 right-0 z-50 bg-[#FEFFF6] backdrop-blur-sm py-4">
|
||||
<Container>
|
||||
<nav className="relative z-50 flex justify-between">
|
||||
<div className="flex items-center md:gap-x-12">
|
||||
|
||||
@@ -5,86 +5,32 @@ import { Container } from '@/components/Container'
|
||||
|
||||
export function Hero() {
|
||||
return (
|
||||
<Container className="pb-16 pt-20 text-center lg:pt-32 ">
|
||||
<section className="relative w-full h-screen -mt-24">
|
||||
{/* Background Video */}
|
||||
<video
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
className="absolute inset-0 top-0 left-0 w-full h-full object-cover -z-10"
|
||||
className="absolute top-0 left-0 w-full h-full object-cover z-0"
|
||||
>
|
||||
<source src="/videos/hero2.mp4" type="video/mp4" />
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
|
||||
{/* Dark Overlay for better text readability */}
|
||||
<div className="absolute inset-0 bg-black/40 -z-5"></div>
|
||||
<h1 className="relative z-10 mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight text-white sm:text-7xl">
|
||||
NILE CRUISES{' '}
|
||||
<span className="relative whitespace-nowrap text-gold-400">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 418 42"
|
||||
className="absolute left-0 top-2/3 h-[0.58em] w-full fill-gold-900"
|
||||
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="relative z-10 mx-auto mt-6 max-w-2xl lg:text-xl text-sm tracking-wide font-normal text-slate-100">
|
||||
Discover ancient Egypt and feel its special energies across the enchanting Nile river with our sophisticated cruises, boat rentals, healing packages, corporate retreats, private holidays, & more.
|
||||
</p>
|
||||
<div className="relative mt-10 mb-96 lg:mb-40 lg:py-2 xs:mb-20 flex justify-center gap-x-6 z-10">
|
||||
<Button
|
||||
href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
|
||||
variant="outline"
|
||||
>
|
||||
<span className="text-white">VEDA Boats</span>
|
||||
</Button>
|
||||
<Button className="button-gold" href="/register">Plan Your Visit</Button>
|
||||
</div>
|
||||
|
||||
|
||||
{/* SECOND SECTION */}
|
||||
|
||||
<div className="relative z-10 pt-10">
|
||||
<p className="mt-10 font-display text-large lg:text-2xl font-semibold italic text-slate-900">
|
||||
As seen and featured on
|
||||
</p>
|
||||
<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"
|
||||
>
|
||||
{[
|
||||
[
|
||||
{ name: 'CNN', logo: '/images/logos/1.svg' },
|
||||
{ name: 'HLS', logo: '/images/logos/2.svg' },
|
||||
{ name: 'Bookretreats', logo: '/images/logos/3.svg' },
|
||||
],
|
||||
[
|
||||
{ name: 'Beaviajera', logo: '/images/logos/4.svg' },
|
||||
{ name: 'Egytalloyd', logo: '/images/logos/5.svg' },
|
||||
{ name: 'AST', logo: '/images/logos/6.svg' },
|
||||
],
|
||||
].map((group, groupIndex) => (
|
||||
<li key={groupIndex}>
|
||||
<ul
|
||||
role="list"
|
||||
className="flex flex-col items-center gap-y-8 sm:flex-row sm:gap-x-12 sm:gap-y-0"
|
||||
>
|
||||
{group.map((company) => (
|
||||
<li key={company.name} className="flex">
|
||||
<Image src={company.logo} alt={company.name} width={120} height={40} unoptimized />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</Container>
|
||||
{/* Welcome Content Overlay */}
|
||||
<div className="bg-[#FEFFF6] pb-6 pt-6 mt-0 absolute -bottom-20 left-0 right-0 z-10">
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-4">
|
||||
<div className="mx-auto max-w-4xl lg:mx-0">
|
||||
<h2 className="mt-2 text-5xl font-medium tracking-tight text-[#28602C] sm:text-6xl">NILE CRUISES REIMAGINED</h2>
|
||||
</div>
|
||||
<div className="mx-auto max-w-3xl lg:mx-0">
|
||||
<p className="my-4 text-lg font-medium text-pretty text-gray-950 sm:text-xl/8">
|
||||
Discover ancient Egypt with VEDA and feel its special energies across the enchanting Nile river with our cruises, retreats, & more.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -19,7 +19,7 @@ const SvgIcon = (props) => (
|
||||
>
|
||||
<path fill="#fff" d="M29.926 0H0v30h29.926z"></path>
|
||||
</mask>
|
||||
<g fill="#A7772E" fillOpacity="0.5" mask="url(#a)">
|
||||
<g fill="#48774B" fillOpacity="0.7" mask="url(#a)">
|
||||
<path d="M14.963 15c4.132 0 7.482-3.358 7.482-7.5S19.095 0 14.963 0 7.481 3.358 7.481 7.5s3.35 7.5 7.482 7.5"></path>
|
||||
<path d="M7.482 22.5c4.132 0 7.481-3.358 7.481-7.5s-3.35-7.5-7.481-7.5S0 10.858 0 15s3.35 7.5 7.482 7.5"></path>
|
||||
<path d="M22.444 22.5c4.132 0 7.482-3.358 7.482-7.5s-3.35-7.5-7.482-7.5-7.481 3.358-7.481 7.5 3.35 7.5 7.481 7.5"></path>
|
||||
@@ -30,12 +30,16 @@ const SvgIcon = (props) => (
|
||||
<path d="M20.253 17.197c4.132 0 7.482-3.358 7.482-7.5s-3.35-7.5-7.482-7.5-7.482 3.358-7.482 7.5 3.35 7.5 7.482 7.5"></path>
|
||||
</g>
|
||||
<path
|
||||
fill="#A7772E"
|
||||
fill="#48774B"
|
||||
d="m47.525 24-7.65-17.5H43.4l6.825 15.825H48.2L55.1 6.5h3.25L50.725 24zm18.196-10.225h8.7v2.675h-8.7zm.25 7.5h9.875V24H62.721V6.5h12.775v2.725h-9.525zM81.97 24V6.5h7.65q2.85 0 5 1.1t3.35 3.05 1.2 4.6q0 2.625-1.2 4.6-1.2 1.95-3.35 3.05t-5 1.1zm3.25-2.75h4.25q1.975 0 3.4-.75 1.45-.75 2.225-2.1.8-1.35.8-3.15 0-1.826-.8-3.15-.774-1.35-2.225-2.1-1.425-.75-3.4-.75h-4.25zM102.404 24l7.875-17.5h3.2l7.9 17.5h-3.4l-6.775-15.775h1.3L105.754 24zm3.625-4.05.875-2.55h9.45l.875 2.55z"
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export function Logo(props) {
|
||||
return <SvgIcon {...props} />;
|
||||
}
|
||||
return (
|
||||
<div className="bg-[#FEFFF6] px-2 py-1 rounded">
|
||||
<SvgIcon {...props} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
47
src/components/Logos.jsx
Normal file
47
src/components/Logos.jsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import Image from 'next/image'
|
||||
|
||||
import { Button } from '@/components/Button'
|
||||
import { Container } from '@/components/Container'
|
||||
|
||||
|
||||
export function Logos() {
|
||||
return (
|
||||
<Container>
|
||||
<div className="relative z-10 pt-10">
|
||||
<p className="mt-10 font-display text-large lg:text-2xl font-semibold italic text-slate-900">
|
||||
As seen and featured on
|
||||
</p>
|
||||
<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"
|
||||
>
|
||||
{[
|
||||
[
|
||||
{ name: 'CNN', logo: '/images/logos/1.svg' },
|
||||
{ name: 'HLS', logo: '/images/logos/2.svg' },
|
||||
{ name: 'Bookretreats', logo: '/images/logos/3.svg' },
|
||||
],
|
||||
[
|
||||
{ name: 'Beaviajera', logo: '/images/logos/4.svg' },
|
||||
{ name: 'Egytalloyd', logo: '/images/logos/5.svg' },
|
||||
{ name: 'AST', logo: '/images/logos/6.svg' },
|
||||
],
|
||||
].map((group, groupIndex) => (
|
||||
<li key={groupIndex}>
|
||||
<ul
|
||||
role="list"
|
||||
className="flex flex-col items-center gap-y-8 sm:flex-row sm:gap-x-12 sm:gap-y-0"
|
||||
>
|
||||
{group.map((company) => (
|
||||
<li key={company.name} className="flex">
|
||||
<Image src={company.logo} alt={company.name} width={120} height={40} unoptimized />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
@@ -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-white hover:bg-gold-600 hover:text-slate-900"
|
||||
className="inline-block rounded-lg px-2 py-1 text-sm text-[#245527] hover:bg-[#245527] hover:text-white transition-colors duration-200"
|
||||
>
|
||||
{children}
|
||||
</Link>
|
||||
|
||||
15
src/components/Welcome.jsx
Normal file
15
src/components/Welcome.jsx
Normal file
@@ -0,0 +1,15 @@
|
||||
export function Welcome() {
|
||||
return (
|
||||
<div className="bg-[#28602C] pb-24 pt-0 mt-0 -z-20 relative">
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div className="mx-auto max-w-2xl lg:mx-0">
|
||||
<h2 className="mt-2 text-5xl font-semibold tracking-tight text-white sm:text-7xl">Support center</h2>
|
||||
<p className="mt-8 text-lg font-medium text-pretty text-gray-100 sm:text-xl/8">
|
||||
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet
|
||||
fugiat veniam occaecat fugiat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user