45 lines
2.2 KiB
JavaScript
45 lines
2.2 KiB
JavaScript
import { Helmet } from 'react-helmet-async'
|
|
import { Link } from 'react-router-dom'
|
|
import { ArrowRight, Compass } from 'lucide-react'
|
|
|
|
export default function NotFound() {
|
|
return (
|
|
<>
|
|
<Helmet>
|
|
<title>Page Not Found | Queue North Technologies</title>
|
|
<meta name="description" content="The page you're looking for doesn't exist." />
|
|
</Helmet>
|
|
<section className="relative isolate flex min-h-[70vh] items-center overflow-hidden bg-primary-navy py-16 text-white">
|
|
<div className="absolute inset-0 -z-10">
|
|
<img
|
|
src="/assets/hero-tech.webp"
|
|
alt=""
|
|
className="h-full w-full object-cover object-center"
|
|
/>
|
|
<div className="absolute inset-0 bg-primary-navy/88" />
|
|
<div className="absolute inset-0 bg-gradient-to-r from-primary-navy via-primary-navy/95 to-primary-navy/60" />
|
|
</div>
|
|
<div className="mx-auto max-w-3xl px-4 text-center sm:px-6 lg:px-8">
|
|
<div className="mx-auto mb-6 flex h-12 w-12 items-center justify-center rounded-md border border-white/15 bg-white/10 text-primary-cyan">
|
|
<Compass className="h-6 w-6" aria-hidden="true" />
|
|
</div>
|
|
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-primary-cyan">404</p>
|
|
<h1 className="mt-3 text-4xl font-bold md:text-5xl">This page lost direction.</h1>
|
|
<p className="mx-auto mt-5 max-w-xl text-lg text-white/75">
|
|
The page you're looking for does not exist, but we can get you back to the right place.
|
|
</p>
|
|
<div className="mt-8 flex flex-col sm:flex-row gap-3 justify-center">
|
|
<Link to="/" className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-6 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors">
|
|
Back to Home
|
|
<ArrowRight className="h-4 w-4" aria-hidden="true" />
|
|
</Link>
|
|
<Link to="/contact" className="inline-flex h-11 items-center justify-center rounded-md border border-white/35 px-6 text-sm font-semibold text-white hover:bg-white/10 transition-colors">
|
|
Contact Us
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
)
|
|
}
|