feat: add NotFound route and tests

src/App.tsx

@@ -1,18 +1,8 @@
 import { Toaster } from 'react-hot-toast';
 import { createBrowserRouter, RouterProvider } from 'react-router';
-import LandingPage from './pages/LandingPage';
-import NotFoundPage from './pages/NotFoundPage';
+import { routes } from './routes';
 
-const router = createBrowserRouter([
-	{
-		path: '/',
-		element: <LandingPage />,
-	},
-	{
-		path: '*',
-		element: <NotFoundPage />,
-	},
-]);
+const router = createBrowserRouter(routes);
 
 function App() {
 	return (

src/pages/NotFoundPage.tsx

@@ -25,7 +25,7 @@ function NotFoundPage() {
 						Access Layer
 					</p>
 					<h1 className="mt-4 max-w-3xl font-grotesque text-5xl font-black leading-none tracking-tight sm:text-6xl md:text-7xl">
-						This marketplace path is not live yet.
+						This marketplace path was not found.
 					</h1>
 					<p className="mt-6 max-w-2xl font-jakarta text-base leading-8 text-white/70 sm:text-lg">
 						The creator key route you opened does not exist. Return to the

src/pages/__tests__/NotFoundPage.test.tsx

@@ -1,21 +1,37 @@
 import { render, screen } from '@testing-library/react';
-import { MemoryRouter } from 'react-router';
-import { describe, expect, it } from 'vitest';
+import { createMemoryRouter, MemoryRouter, RouterProvider } from 'react-router';
+import { describe, expect, it, vi } from 'vitest';
 import NotFoundPage from '@/pages/NotFoundPage';
+import { routes } from '@/routes';
 
-describe('NotFoundPage', () => {
-	it('points unknown routes back to the marketplace home', () => {
-		render(
-			<MemoryRouter initialEntries={['/missing-route']}>
-				<NotFoundPage />
-			</MemoryRouter>
-		);
+vi.mock('@/pages/LandingPage', () => ({
+	default: () => <main>Marketplace home</main>,
+}));
+
+const UNKNOWN_ROUTE = '/creator/this-route-does-not-exist';
+
+describe('NotFoundPage routing integration', () => {
+	it('renders NotFoundPage when the app navigates to an unknown route', () => {
+		const router = createMemoryRouter(routes, {
+			initialEntries: [UNKNOWN_ROUTE],
+		});
+
+		render(<RouterProvider router={router} />);
 
 		expect(
 			screen.getByRole('heading', {
-				name: /this marketplace path is not live yet/i,
+				name: /not found/i,
 			})
 		).toBeInTheDocument();
+		expect(screen.getByText(/route not found/i)).toBeInTheDocument();
+	});
+
+	it('provides link back to marketplace home', () => {
+		render(
+			<MemoryRouter>
+				<NotFoundPage />
+			</MemoryRouter>
+		);
 
 		expect(
 			screen.getByRole('link', { name: /back to marketplace/i })

src/routes.tsx

@@ -0,0 +1,14 @@
+import type { RouteObject } from 'react-router';
+import LandingPage from './pages/LandingPage';
+import NotFoundPage from './pages/NotFoundPage';
+
+export const routes: RouteObject[] = [
+	{
+		path: '/',
+		element: <LandingPage />,
+	},
+	{
+		path: '*',
+		element: <NotFoundPage />,
+	},
+];