fix: header CTA visibility, scroll-to-top, 404 page (#104 #89 #88) (batch 9.1)

src/App.jsx

@@ -1,11 +1,13 @@
 import { Outlet } from 'react-router-dom'
 import Header from './components/layout/Header.jsx'
 import Footer from './components/layout/Footer.jsx'
+import ScrollToTop from './components/ScrollToTop.jsx'
 import './index.css'
 
 function App() {
   return (
     <div className="min-h-screen flex flex-col font-sans bg-background text-text">
+      <ScrollToTop />
       <Header />
       <main className="flex-1">
         <Outlet />

src/components/ScrollToTop.jsx

@@ -0,0 +1,10 @@
+import { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+
+export default function ScrollToTop() {
+  const { pathname } = useLocation()
+  useEffect(() => {
+    window.scrollTo(0, 0)
+  }, [pathname])
+  return null
+}

src/components/layout/Header.jsx

@@ -77,7 +77,7 @@ const Header = () => {
 
           {/* CTA Button */}
           <div className="hidden md:block">
-            <Link to="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-9 px-3 bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors">
+            <Link to="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-9 px-3 bg-primary-cyan text-primary-navy hover:bg-cyan-600 transition-colors">
               Request Consultation
             </Link>
           </div>
@@ -146,7 +146,7 @@ const Header = () => {
                   </nav>
 
                   <div className="mt-auto pt-6">
-                    <Link to="/contact" onClick={closeMobileMenu} className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 w-full bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors">
+                    <Link to="/contact" onClick={closeMobileMenu} className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 w-full bg-primary-cyan text-primary-navy hover:bg-cyan-600 transition-colors">
                       Request Consultation
                     </Link>
                   </div>

src/pages/NotFound.jsx

@@ -0,0 +1,27 @@
+import { Helmet } from 'react-helmet-async'
+import { Link } from 'react-router-dom'
+
+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="min-h-[60vh] flex items-center justify-center bg-background">
+        <div className="text-center px-4">
+          <h1 className="text-6xl font-bold text-primary-navy mb-4">404</h1>
+          <p className="text-xl text-soft-text mb-8">The page you're looking for doesn't exist.</p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Link to="/" className="inline-flex items-center justify-center px-6 py-3 bg-primary-cyan text-primary-navy font-medium rounded-md hover:bg-cyan-600 transition-colors">
+              Back to Home
+            </Link>
+            <Link to="/contact" className="inline-flex items-center justify-center px-6 py-3 border border-primary-navy text-primary-navy font-medium rounded-md hover:bg-primary-navy hover:text-white transition-colors">
+              Contact Us
+            </Link>
+          </div>
+        </div>
+      </section>
+    </>
+  )
+}

src/router.jsx

@@ -8,11 +8,14 @@ import Industries from './pages/Industries.jsx'
 import IndustryDetail from './pages/IndustryDetail.jsx'
 import Contact from './pages/Contact.jsx'
 import Support from './pages/Support.jsx'
+import NotFound from './pages/NotFound.jsx'
 
 const router = createBrowserRouter([
   {
     path: '/',
-    element: <App />,
+    element: (
+      <App />
+    ),
     children: [
       { index: true, element: <Home /> },
       { path: 'about', element: <About /> },
@@ -22,6 +25,7 @@ const router = createBrowserRouter([
       { path: 'industries/:slug', element: <IndustryDetail /> },
       { path: 'contact', element: <Contact /> },
       { path: 'support', element: <Support /> },
+      { path: '*', element: <NotFound /> },
     ],
   },
 ])