website refactor

apps/website/app/not-found.tsx

@@ -1,35 +1,29 @@
 'use client';
 
-import { Link } from '@/ui/Link';
-import { Box } from '@/ui/Box';
-import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/Stack';
+import React from 'react';
+import { useRouter } from 'next/navigation';
+import { routes } from '@/lib/routing/RouteConfig';
+import { NotFoundTemplate, type NotFoundViewData } from '@/templates/NotFoundTemplate';
 
+/**
+ * NotFound
+ * 
+ * App-level 404 handler.
+ * Orchestrates the NotFoundTemplate with appropriate racing-themed copy.
+ */
 export default function NotFound() {
-  return (
-    <Box as="main" minHeight="100vh" display="flex" alignItems="center" justifyContent="center" bg="bg-deep-graphite" color="text-white" px={6}>
-      <Box maxWidth="md" textAlign="center">
-        <Stack gap={4}>
-          <Heading level={1} fontSize="3xl" weight="semibold">Page not found</Heading>
-          <Text size="sm" color="text-gray-400" block>
-            The page you requested doesn&apos;t exist (or isn&apos;t available in this mode).
-          </Text>
-          <Box pt={2}>
-            <Link
-              href="/"
-              variant="primary"
-              size="sm"
-              weight="medium"
-              rounded="md"
-              px={4}
-              py={2}
-            >
-              Drive home
-            </Link>
-          </Box>
-        </Stack>
-      </Box>
-    </Box>
-  );
-}
+  const router = useRouter();
+  
+  const handleHomeClick = () => {
+    router.push(routes.public.home);
+  };
+
+  const viewData: NotFoundViewData = {
+    errorCode: 'Error 404',
+    title: 'OFF TRACK',
+    message: 'The requested sector does not exist. You have been returned to the pits.',
+    actionLabel: 'Return to Pits'
+  };
+  
+  return <NotFoundTemplate viewData={viewData} onHomeClick={handleHomeClick} />;
+}