fix(no access page): missing mono colour scheme

frontend/Dockerfile

@@ -9,6 +9,7 @@ RUN npm run build
 # --- Production stage ---
 FROM nginx:1.27-alpine AS prod
 COPY --from=build /app/dist /usr/share/nginx/html
+COPY frontend_nginx.conf /etc/nginx/conf.d/default.conf
 
 # Inject envs at runtime
 COPY env.sh /docker-entrypoint.d/40-env.sh

frontend/frontend_nginx.conf

@@ -0,0 +1,15 @@
+server {
+    listen 80;
+    server_name _;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    error_page 500 502 503 504 /50x.html;
+    location = /50x.html {
+        root /usr/share/nginx/html;
+    }
+}

frontend/src/App.tsx

@@ -16,6 +16,7 @@ import Profile from "./pages/Profile.tsx";
 import StreamControl from "./pages/StreamControl.tsx";
 import { GoogleOAuthProvider } from '@react-oauth/google';
 import {config} from "./config.ts";
+ import NotFound from "./pages/NotFound.tsx";
 
 
 function App() {
@@ -39,6 +40,7 @@ function App() {
                         <Route path="/vods/:id/edit" element={<EditVod />} />
                         <Route path="/profile" element={<Profile />} />
                         <Route path="/stream" element={<StreamControl />} />
+                        <Route path="*" element={<NotFound />} />
                     </Route>
                 </Routes>
             </Router>

frontend/src/index.css

@@ -18,6 +18,7 @@
     --color-text-body: #554D44;
     --color-text-secondary: #6E6559;
     --color-muted: #9A9084;
+    --color-faint-mono: #A79C8E;
 
     /* ── Accents ─────────────────────────────────────────────────────────── */
     --color-terracotta: #A85A38;

frontend/src/pages/NotFound.tsx

@@ -0,0 +1,24 @@
+import { Lock } from 'lucide-react';
+import {useNavigate} from "react-router-dom";
+
+const NotFound = () => {
+    const navigate = useNavigate();
+
+    const goHomePage = () => {
+        navigate("/")
+    }
+
+    return (
+        <div className="w-full min-h-screen flex flex-col items-center justify-center gap-3 text-center px-6">
+            <Lock className="w-8 h-8 text-faint-mono/60 mb-1" strokeWidth={1.5} />
+            <h2 className="font-heading text-2xl md:text-3xl text-faint-mono">
+                This page does not exist.
+            </h2>
+            <p className="text-sm text-faint-mono/70 max-w-xs">
+                <a onClick={goHomePage} className={"font-bold cursor-pointer"}>Click here</a> to get back to the home page.
+            </p>
+        </div>
+    );
+}
+
+export default NotFound;