Add a 404 Not Found Page (#1182)

## Description

<!-- Please provide a brief description of the changes made in this pull request. Include any relevant context or reasoning for the changes. -->
A simple 404 not found page that allows the user to go back or home. Much better than our current default which is just: `<p>Not found</p>`

## Related Issue and Pull requests

<!-- Link to any related issues using the format #<issue-number> -->

## Type of Change

<!-- Please delete options that are not relevant -->

- [x] Improvement

## Checklist

<!-- Please ensure the following are completed before submitting the PR -->

- [ ] I have tested this does not break current pipelines / runs functionality
- [ ] I have tested the changes on staging

## Screenshots (if applicable)

<!-- Include any screenshots that might help explain the changes or provide visual context -->

![image.png](https://app.graphite.dev/user-attachments/assets/49d2c1c4-96e9-4b34-b6d6-2ab6238ad30c.png)

## Test Instructions

<!-- Detail steps and prerequisites for testing the changes in this PR -->
navigate to a route that doesn't exist e.g. `/hello`

## Additional Comments

<!-- Add any additional context or information that reviewers might need to know regarding this PR -->

Author: camielvs

src/routes/NotFoundPage.tsx

@@ -0,0 +1,49 @@
+import { useRouter } from "@tanstack/react-router";
+import { useCallback } from "react";
+
+import { Button } from "@/components/ui/button";
+import { BlockStack } from "@/components/ui/layout";
+import { Paragraph, Text } from "@/components/ui/typography";
+
+export default function NotFoundPage() {
+  const router = useRouter();
+
+  const handleGoHome = useCallback(() => {
+    router.navigate({ to: "/" });
+  }, [router]);
+
+  const handleGoBack = useCallback(() => {
+    router.history.back();
+  }, [router]);
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background p-4">
+      <div className="max-w-xs w-full">
+        <BlockStack gap="8" align="center">
+          <BlockStack gap="2" align="center">
+            <Text size="2xl" weight="bold">
+              Page not found
+            </Text>
+            <Paragraph tone="subdued" size="sm">
+              The page you&apos;re looking for doesn&apos;t exist.
+            </Paragraph>
+          </BlockStack>
+
+          <BlockStack gap="3">
+            <Button onClick={handleGoBack} className="w-full">
+              Go Back
+            </Button>
+
+            <Button
+              onClick={handleGoHome}
+              variant="secondary"
+              className="w-full"
+            >
+              Go Home
+            </Button>
+          </BlockStack>
+        </BlockStack>
+      </div>
+    </div>
+  );
+}

src/routes/router.ts

@@ -13,6 +13,7 @@ import RootLayout from "../components/layout/RootLayout";
 import Editor from "./Editor";
 import ErrorPage from "./ErrorPage";
 import Home from "./Home";
+import NotFoundPage from "./NotFoundPage";
 import PipelineRun from "./PipelineRun";
 import { QuickStartPage } from "./QuickStart";
 
@@ -37,6 +38,7 @@ export const APP_ROUTES = {
 const rootRoute = createRootRoute({
   component: Outlet,
   errorComponent: ErrorPage,
+  notFoundComponent: NotFoundPage,
 });
 
 const mainLayout = createRoute({