Add 404 page

web/src/App.tsx

@@ -14,6 +14,7 @@ import SubmissionDetailPage from '@/app/submissions/[submissionId]/page'
 import SubmitPage from '@/app/submit/page'
 import AdminSubmitPage from '@/app/admin-submit/page'
 import OperationPage from '@/app/operations/[operationId]/page'
+import NotFound from '@/app/not-found/page'
 
 function App() {
   return (
@@ -30,6 +31,7 @@ function App() {
         <Route path="/submit" element={<SubmitPage />} />
         <Route path="/admin-submit" element={<AdminSubmitPage />} />
         <Route path="/operations/:operationId" element={<OperationPage />} />
+        <Route path="*" element={<NotFound />} />
       </Routes>
     </ThemeProvider>
   )

web/src/app/not-found/page.tsx

@@ -0,0 +1,191 @@
+import { Box, Container, Typography, Button } from "@mui/material";
+import { Link } from "react-router-dom";
+import Webpage from "@/app/_components/webpage";
+import { useTitle } from "@/app/hooks/useTitle";
+import HomeIcon from "@mui/icons-material/Home";
+import MapIcon from "@mui/icons-material/Map";
+
+export default function NotFound() {
+	useTitle("404 - Page Not Found");
+
+	return (
+		<Webpage>
+			<Box sx={{ width: '100%', bgcolor: 'background.default' }}>
+				{/* 404 Hero Section */}
+				<Box
+					sx={{
+						position: 'relative',
+						minHeight: '100vh',
+						display: 'flex',
+						alignItems: 'center',
+						overflow: 'hidden',
+						background: 'linear-gradient(to bottom, #0a0a0a 0%, #0f0f0f 100%)',
+					}}
+				>
+					{/* Subtle Gradient Background */}
+					<Box
+						sx={{
+							position: 'absolute',
+							top: '20%',
+							right: '30%',
+							width: '500px',
+							height: '500px',
+							background: 'radial-gradient(circle, rgba(239, 68, 68, 0.1) 0%, transparent 70%)',
+							borderRadius: '50%',
+							filter: 'blur(80px)',
+						}}
+					/>
+					<Box
+						sx={{
+							position: 'absolute',
+							bottom: '20%',
+							left: '25%',
+							width: '450px',
+							height: '450px',
+							background: 'radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 70%)',
+							borderRadius: '50%',
+							filter: 'blur(80px)',
+						}}
+					/>
+
+					<Container maxWidth="md" sx={{ position: 'relative', zIndex: 1, py: 8 }}>
+						<Box textAlign="center">
+							{/* 404 Number */}
+							<Typography
+								variant="h1"
+								sx={{
+									fontSize: { xs: '6rem', sm: '8rem', md: '10rem' },
+									fontWeight: 800,
+									lineHeight: 1,
+									mb: 2,
+									letterSpacing: '-0.04em',
+									background: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
+									WebkitBackgroundClip: 'text',
+									WebkitTextFillColor: 'transparent',
+									backgroundClip: 'text',
+								}}
+							>
+								404
+							</Typography>
+
+							{/* Main Message */}
+							<Typography
+								variant="h2"
+								sx={{
+									fontWeight: 700,
+									mb: 2,
+									letterSpacing: '-0.02em',
+									fontSize: { xs: '2rem', sm: '2.5rem', md: '3rem' },
+								}}
+							>
+								Page Not Found
+							</Typography>
+
+							{/* Subtext */}
+							<Typography
+								variant="h6"
+								sx={{
+									color: 'text.secondary',
+									mb: 6,
+									maxWidth: '600px',
+									mx: 'auto',
+									lineHeight: 1.7,
+									fontWeight: 400,
+									fontSize: { xs: '1rem', md: '1.125rem' },
+								}}
+							>
+								Looks like this page doesn't exist. The page you're looking for might have been removed, renamed, or never existed in the first place.
+							</Typography>
+
+							{/* Action Buttons */}
+							<Box
+								display="flex"
+								gap={2.5}
+								justifyContent="center"
+								flexWrap="wrap"
+								mb={8}
+							>
+								<Button
+									component={Link}
+									to="/"
+									variant="contained"
+									size="large"
+									startIcon={<HomeIcon />}
+									sx={{
+										fontSize: '1rem',
+										px: 4,
+										py: 1.5,
+									}}
+								>
+									Back to Home
+								</Button>
+								<Button
+									component={Link}
+									to="/maps"
+									variant="outlined"
+									size="large"
+									startIcon={<MapIcon />}
+									sx={{
+										fontSize: '1rem',
+										px: 4,
+										py: 1.5,
+									}}
+								>
+									Browse Maps
+								</Button>
+							</Box>
+
+							{/* Quick Links */}
+							<Box sx={{ mt: 8 }}>
+								<Typography
+									variant="body2"
+									sx={{
+										color: 'text.secondary',
+										mb: 3,
+										fontSize: '0.875rem',
+										textTransform: 'uppercase',
+										letterSpacing: '0.1em',
+										fontWeight: 600,
+									}}
+								>
+									Quick Links
+								</Typography>
+								<Box
+									sx={{
+										display: 'flex',
+										gap: 3,
+										justifyContent: 'center',
+										flexWrap: 'wrap',
+									}}
+								>
+									{[
+										{ label: 'Submissions', path: '/submissions' },
+										{ label: 'Map Fixes', path: '/mapfixes' },
+										{ label: 'Submit Map', path: '/submit' },
+									].map((link) => (
+										<Button
+											key={link.path}
+											component={Link}
+											to={link.path}
+											sx={{
+												color: 'text.secondary',
+												textTransform: 'none',
+												fontSize: '1rem',
+												'&:hover': {
+													color: 'primary.main',
+													background: 'rgba(59, 130, 246, 0.1)',
+												},
+											}}
+										>
+											{link.label}
+										</Button>
+									))}
+								</Box>
+							</Box>
+						</Box>
+					</Container>
+				</Box>
+			</Box>
+		</Webpage>
+	);
+}