added 404
This commit is contained in:
null
parent
0f272fcf19
commit
a8d9492a80
|
|
@ -50,7 +50,7 @@ const Footer = () => {
|
|||
alt="Queue North Technologies"
|
||||
className="brand-logo-on-dark h-12 w-auto shrink-0 transition-opacity group-hover:opacity-90"
|
||||
/>
|
||||
<span className="font-bold text-xl leading-tight tracking-tight text-white whitespace-nowrap">Queue North Technologies</span>
|
||||
<span className="font-bold text-sm leading-tight tracking-tight text-white sm:text-xl sm:whitespace-nowrap">Queue North Technologies</span>
|
||||
</Link>
|
||||
<p className="text-navy-light text-sm leading-relaxed mb-5">{companyInfo.tagline}</p>
|
||||
<a
|
||||
|
|
|
|||
|
|
@ -1,41 +1,168 @@
|
|||
import { Helmet } from 'react-helmet-async'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { ArrowRight, Compass } from 'lucide-react'
|
||||
import { ArrowRight, Building2, Compass, Headphones, Home, LifeBuoy, Network, ShieldCheck } from 'lucide-react'
|
||||
|
||||
const recoveryLinks = [
|
||||
{
|
||||
title: 'Services',
|
||||
description: 'Communications, support, cabling, wireless, and networking.',
|
||||
href: '/services',
|
||||
icon: Network,
|
||||
accent: 'text-primary-cyan',
|
||||
},
|
||||
{
|
||||
title: 'Industries',
|
||||
description: 'Solutions by business environment.',
|
||||
href: '/industries',
|
||||
icon: Building2,
|
||||
accent: 'text-teal-300',
|
||||
},
|
||||
{
|
||||
title: 'Support',
|
||||
description: 'Help for live systems, users, and endpoints.',
|
||||
href: '/support',
|
||||
icon: LifeBuoy,
|
||||
accent: 'text-amber-300',
|
||||
},
|
||||
]
|
||||
|
||||
const signalPoints = [
|
||||
{ label: 'Route check', value: 'Active', icon: Compass },
|
||||
{ label: 'Partner desk', value: 'Online', icon: Headphones },
|
||||
{ label: 'Uptime focus', value: 'Locked', icon: ShieldCheck },
|
||||
]
|
||||
|
||||
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." />
|
||||
<meta name="description" content="The Queue North page you requested could not be found. Return home, explore services, or contact our team for help." />
|
||||
<meta name="robots" content="noindex, follow" />
|
||||
</Helmet>
|
||||
<section className="relative isolate flex min-h-[70vh] items-center overflow-hidden bg-primary-navy py-16 text-white">
|
||||
|
||||
<section className="relative isolate overflow-hidden bg-primary-navy text-white">
|
||||
<div className="absolute inset-0 -z-10">
|
||||
<img
|
||||
src="/assets/hero-tech.webp"
|
||||
src="/assets/about-image.webp"
|
||||
alt=""
|
||||
className="h-full w-full object-cover object-center"
|
||||
className="h-full w-full object-cover object-[66%_top] md:object-[62%_top]"
|
||||
/>
|
||||
<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 className="absolute inset-0 bg-primary-navy/86" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_72%_22%,rgba(34,211,238,0.28),transparent_28%),radial-gradient(circle_at_18%_74%,rgba(245,158,11,0.16),transparent_24%),linear-gradient(115deg,#071A2A_0%,rgba(11,42,60,0.96)_46%,rgba(7,26,42,0.74)_100%)]" />
|
||||
<div className="absolute inset-0 opacity-[0.13] [background-image:linear-gradient(rgba(255,255,255,0.12)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.12)_1px,transparent_1px)] [background-size:48px_48px]" />
|
||||
<div className="absolute left-0 right-0 top-0 h-px bg-gradient-to-r from-transparent via-primary-cyan/70 to-transparent" />
|
||||
</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 className="mx-auto grid min-h-[calc(100vh-4rem)] max-w-7xl grid-cols-[minmax(0,1fr)] items-center gap-12 px-4 py-16 sm:px-6 md:py-20 lg:grid-cols-[minmax(0,1.03fr)_minmax(0,0.97fr)] lg:px-8 lg:py-24">
|
||||
<div className="min-w-0 w-full max-w-[calc(100vw-2rem)] sm:max-w-3xl">
|
||||
<div className="inline-flex items-center gap-2 rounded-md border border-white/[0.15] bg-white/10 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-primary-cyan shadow-[0_0_40px_rgba(34,211,238,0.18)] backdrop-blur">
|
||||
<Compass className="h-4 w-4" aria-hidden="true" />
|
||||
Route recalibration
|
||||
</div>
|
||||
|
||||
<p className="mt-8 font-numeric text-8xl leading-none text-white sm:text-9xl md:text-[10rem]">
|
||||
404
|
||||
</p>
|
||||
<h1 className="mt-4 max-w-2xl text-3xl font-bold leading-tight text-white sm:text-5xl lg:text-6xl">
|
||||
This route dropped <span className="block sm:inline">off the network.</span>
|
||||
</h1>
|
||||
<p className="mt-6 max-w-2xl text-base leading-relaxed text-white/75 sm:text-lg md:text-xl">
|
||||
That page is gone or renamed. We'll get you back to a live connection.
|
||||
</p>
|
||||
|
||||
<div className="mt-8 flex flex-col gap-3 sm:flex-row">
|
||||
<Link to="/" className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy transition-colors hover:bg-section-alt sm:w-auto" aria-label="Return to the Queue North home page">
|
||||
Back to Home
|
||||
<Home className="h-4 w-4" aria-hidden="true" />
|
||||
</Link>
|
||||
<Link to="/contact#contact-form" className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-md border border-white/35 px-5 text-sm font-semibold text-white transition-colors hover:bg-white/10 sm:w-auto" aria-label="Contact Queue North Technologies">
|
||||
Talk to Us
|
||||
<ArrowRight className="h-4 w-4" aria-hidden="true" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="mt-10 grid gap-3 sm:grid-cols-3">
|
||||
{signalPoints.map((point) => {
|
||||
const Icon = point.icon
|
||||
|
||||
return (
|
||||
<div key={point.label} className="rounded-md border border-white/10 bg-white/[0.06] p-4 backdrop-blur">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="flex h-9 w-9 items-center justify-center rounded-md bg-white/10 text-primary-cyan">
|
||||
<Icon className="h-4 w-4" aria-hidden="true" />
|
||||
</span>
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wide text-white/50">{point.label}</p>
|
||||
<p className="text-sm font-semibold text-white">{point.value}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</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#contact-form" 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 className="relative min-w-0 w-full max-w-[calc(100vw-2rem)] lg:max-w-none">
|
||||
<div className="absolute inset-0 rounded-md bg-primary-cyan/10 blur-3xl sm:-inset-4 sm:rounded-[2rem]" aria-hidden="true" />
|
||||
<div className="relative overflow-hidden rounded-md border border-white/[0.12] bg-white/[0.07] shadow-2xl shadow-black/30 backdrop-blur-xl">
|
||||
<div className="border-b border-white/10 px-5 py-4">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-primary-cyan">Recovery paths</p>
|
||||
<p className="mt-1 text-sm text-white/60">Choose the cleanest next hop.</p>
|
||||
</div>
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-md bg-primary-cyan text-primary-navy shadow-[0_0_28px_rgba(34,211,238,0.45)]">
|
||||
<Compass className="h-5 w-5" aria-hidden="true" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative p-5 sm:p-6">
|
||||
<div className="pointer-events-none absolute inset-x-6 top-1/2 h-px bg-gradient-to-r from-transparent via-primary-cyan/50 to-transparent" aria-hidden="true" />
|
||||
<div className="pointer-events-none absolute left-1/2 top-6 bottom-6 w-px bg-gradient-to-b from-transparent via-white/20 to-transparent" aria-hidden="true" />
|
||||
|
||||
<div className="mb-5 rounded-md border border-primary-cyan/25 bg-primary-navy/80 p-5 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="relative flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-md border border-primary-cyan/35 bg-primary-cyan/10">
|
||||
<span className="absolute h-9 w-9 animate-ping rounded-full bg-primary-cyan/20" aria-hidden="true" />
|
||||
<Compass className="relative h-7 w-7 text-primary-cyan" aria-hidden="true" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-semibold text-white">Queue North core</p>
|
||||
<p className="mt-1 text-sm leading-relaxed text-white/60 break-words">Systems and support are still fully reachable.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3">
|
||||
{recoveryLinks.map((item) => {
|
||||
const Icon = item.icon
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={item.title}
|
||||
to={item.href}
|
||||
className="group rounded-md border border-white/10 bg-white/[0.06] p-4 transition-all hover:-translate-y-0.5 hover:border-primary-cyan/45 hover:bg-white/[0.1] hover:no-underline"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-md bg-white/10">
|
||||
<Icon className={`h-5 w-5 ${item.accent}`} aria-hidden="true" />
|
||||
</span>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<h2 className="text-base font-semibold text-white">{item.title}</h2>
|
||||
<ArrowRight className="h-4 w-4 shrink-0 text-white/35 transition-transform group-hover:translate-x-1 group-hover:text-primary-cyan" aria-hidden="true" />
|
||||
</div>
|
||||
<p className="mt-1 text-sm leading-relaxed text-white/60 break-words">{item.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Reference in New Issue