100 lines
4.5 KiB
JavaScript
100 lines
4.5 KiB
JavaScript
import Image from 'next/image'
|
|
|
|
import { Button } from '@/components/Button'
|
|
import { Container } from '@/components/Container'
|
|
import logoLaravel from '@/images/logos/laravel.svg'
|
|
import logoMirage from '@/images/logos/mirage.svg'
|
|
import logoStatamic from '@/images/logos/statamic.svg'
|
|
import logoStaticKit from '@/images/logos/statickit.svg'
|
|
import logoTransistor from '@/images/logos/transistor.svg'
|
|
import logoTuple from '@/images/logos/tuple.svg'
|
|
import logo1 from '@/images/logos/1.svg'
|
|
import logo2 from '@/images/logos/2.svg'
|
|
import logo3 from '@/images/logos/3.svg'
|
|
import logo4 from '@/images/logos/4.svg'
|
|
import logo5 from '@/images/logos/5.svg'
|
|
import logo6 from '@/images/logos/6.svg'
|
|
|
|
export function Hero() {
|
|
return (
|
|
<Container className="pb-16 pt-20 text-center lg:pt-32 ">
|
|
{/* Background Video */}
|
|
<video
|
|
autoPlay
|
|
loop
|
|
muted
|
|
playsInline
|
|
className="absolute inset-0 top-0 left-0 w-full h-full object-cover -z-10"
|
|
>
|
|
<source src="/videos/hero.mp4" type="video/mp4" />
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
<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-300">
|
|
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 z-10 mt-10 mb-96 lg:mb-40 lg:py-2 xs:mb-20 flex justify-center gap-x-6 relative 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 lg:pt-10">
|
|
<p className="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: logo1 },
|
|
{ name: 'HLS', logo: logo2 },
|
|
{ name: 'Bookretreats', logo: logo3 },
|
|
],
|
|
[
|
|
{ name: 'Beaviajera', logo: logo4 },
|
|
{ name: 'Egytalloyd', logo: logo5 },
|
|
{ name: 'AST', logo: logo6 },
|
|
],
|
|
].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} unoptimized />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</Container>
|
|
)
|
|
}
|