add 404 error page

apps/client/src/App.tsx

@@ -12,6 +12,7 @@ import WorkspaceSettings from "@/pages/settings/workspace/workspace-settings";
 import Groups from "@/pages/settings/group/groups";
 import GroupInfo from "./pages/settings/group/group-info";
 import Spaces from "@/pages/settings/space/spaces.tsx";
+import { Error404 } from "@/components/ui/error-404.tsx";
 
 export default function App() {
   return (
@@ -34,6 +35,7 @@ export default function App() {
           <Route path={"groups/:groupId"} element={<GroupInfo />} />
           <Route path={"spaces"} element={<Spaces />} />
         </Route>
+        <Route path="*" element={<Error404 />} />
       </Routes>
     </>
   );

apps/client/src/components/ui/error-404.module.css

@@ -0,0 +1,24 @@
+.root {
+  padding-top: 80px;
+  padding-bottom: 80px;
+}
+
+.description {
+  max-width: 500px;
+  margin: auto;
+  margin-top: var(--mantine-spacing-xl);
+  margin-bottom: calc(1.5 * var(--mantine-spacing-xl));
+}
+
+.title {
+  font-family:
+    Greycliff CF,
+    var(--mantine-font-family);
+  text-align: center;
+  font-weight: 600;
+  font-size: 30px;
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    font-size: 25px;
+  }
+}

apps/client/src/components/ui/error-404.tsx

@@ -0,0 +1,19 @@
+import { Title, Text, Button, Container, Group } from "@mantine/core";
+import classes from "./error-404.module.css";
+import { Link } from "react-router-dom";
+
+export function Error404() {
+  return (
+    <Container className={classes.root}>
+      <Title className={classes.title}>404 Page Not Found</Title>
+      <Text c="dimmed" size="lg" ta="center" className={classes.description}>
+        Sorry, we can't find the page you are looking for.
+      </Text>
+      <Group justify="center">
+        <Button component={Link} to={"/home"} variant="subtle" size="md">
+          Take me back to homepage
+        </Button>
+      </Group>
+    </Container>
+  );
+}