feat: add proper 404 Not Found page (Closes #468)

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { Routes, Route, Navigate } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom';
 import { useEffect } from 'react';
 import Home from './pages/Home';
 import Debugger from './pages/Debugger';
@@ -22,6 +22,7 @@ import TaxComplianceWizard from './pages/TaxComplianceWizard';
 import EmployeePortal from './pages/EmployeePortal';
 import Login from './pages/Login';
 import AuthCallback from './pages/AuthCallback';
+import NotFound from './pages/NotFound';
 import { useTranslation } from 'react-i18next';
 import { contractService } from './services/contracts';
 
@@ -219,7 +220,7 @@ function App() {
       </Route>
       <Route path="/login" element={<Login />} />
       <Route path="/auth-callback" element={<AuthCallback />} />
-      <Route path="*" element={<Navigate to="/" replace />} />
+      <Route path="*" element={<NotFound />} />
     </Routes>
   );
 }

frontend/src/locales/en/translation.json

@@ -124,6 +124,12 @@
     "debuggerTitle": "Debugger view crashed",
     "debuggerDescription": "Reset the debugger or navigate back to the main dashboard."
   },
+  "notFound": {
+    "title": "Page Not Found",
+    "description": "The page you're looking for doesn't exist or has been moved.",
+    "goHome": "Go Home",
+    "helpCenter": "Help Center"
+  },
   "connectAccount": {
     "authenticated": "Authenticated",
     "connect": "Connect",

frontend/src/locales/es/translation.json

@@ -124,6 +124,12 @@
     "debuggerTitle": "El depurador se bloqueó",
     "debuggerDescription": "Reinicia el depurador o vuelve al panel principal."
   },
+  "notFound": {
+    "title": "Página no encontrada",
+    "description": "La página que buscas no existe o ha sido movida.",
+    "goHome": "Ir al inicio",
+    "helpCenter": "Centro de ayuda"
+  },
   "connectAccount": {
     "authenticated": "Autenticado",
     "connect": "Conectar",

frontend/src/pages/NotFound.tsx

@@ -0,0 +1,44 @@
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+
+export default function NotFound() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex-1 flex items-center justify-center p-8">
+      <div className="card glass noise max-w-md w-full text-center">
+        <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-warning/10 border border-warning/20">
+          <span className="text-3xl font-bold text-warning">404</span>
+        </div>
+        <h2 className="text-2xl font-bold mb-2">{t('notFound.title')}</h2>
+        <p className="text-muted text-sm mb-6">{t('notFound.description')}</p>
+        <div className="flex flex-col gap-2 sm:flex-row items-center justify-center sm:gap-3">
+          <Link
+            to="/"
+            className="px-4 py-2 rounded-lg bg-accent text-bg font-semibold text-sm hover:scale-105 transition-transform w-full sm:w-auto"
+          >
+            {t('notFound.goHome')}
+          </Link>
+          <Link
+            to="/payroll"
+            className="px-4 py-2 rounded-lg border border-hi text-sm font-medium text-text hover:bg-white/5 transition-colors w-full sm:w-auto"
+          >
+            {t('nav.payroll')}
+          </Link>
+          <Link
+            to="/employee"
+            className="px-4 py-2 rounded-lg border border-hi text-sm font-medium text-text hover:bg-white/5 transition-colors w-full sm:w-auto"
+          >
+            {t('employees.titleHighlight')}
+          </Link>
+          <Link
+            to="/help"
+            className="px-4 py-2 rounded-lg border border-hi text-sm font-medium text-text hover:bg-white/5 transition-colors w-full sm:w-auto"
+          >
+            {t('notFound.helpCenter')}
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}