From a8d9492a803a82d7e507cdccbb4aa5826fb00d30 Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Thu, 28 May 2026 00:41:24 -0500
Subject: [PATCH] added 404

---
 src/components/layout/Footer.jsx |   2 +-
 src/pages/NotFound.jsx           | 173 +++++++++++++++++++++++++++----
 2 files changed, 151 insertions(+), 24 deletions(-)

diff --git a/src/components/layout/Footer.jsx b/src/components/layout/Footer.jsx
index 4e20a4f..d2a7eaa 100644
--- a/src/components/layout/Footer.jsx
+++ b/src/components/layout/Footer.jsx
@@ -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
diff --git a/src/pages/NotFound.jsx b/src/pages/NotFound.jsx
index 5a41ad9..b53063c 100644
--- a/src/pages/NotFound.jsx
+++ b/src/pages/NotFound.jsx
@@ -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>