website refactor

apps/website/components/errors/NotFoundDiagnostics.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import { Stack } from '@/ui/primitives/Stack';
+import { Group } from '@/ui/Group';
 import { Text } from '@/ui/Text';
+import { Badge } from '@/ui/Badge';
 
 interface NotFoundDiagnosticsProps {
   errorCode: string;
@@ -15,35 +16,19 @@ interface NotFoundDiagnosticsProps {
  */
 export function NotFoundDiagnostics({ errorCode }: NotFoundDiagnosticsProps) {
   return (
-    <Stack gap={3} align="center">
-      <Stack 
-        px={3} 
-        py={1} 
-        border 
-        borderColor="primary-accent" 
-        bg="primary-accent" 
-        bgOpacity={0.1}
-        rounded="sm"
-      >
-        <Text 
-          size="xs" 
-          weight="bold" 
-          color="text-primary-accent"
-          uppercase
-          letterSpacing="widest"
-        >
-          {errorCode}
-        </Text>
-      </Stack>
+    <Group direction="column" gap={3} align="center">
+      <Badge variant="primary" size="md">
+        {errorCode}
+      </Badge>
       <Text 
         size="xs" 
-        color="text-gray-500" 
+        variant="low" 
         uppercase 
-        letterSpacing="widest"
         weight="medium"
+        align="center"
       >
         Telemetry connection lost // Sector data unavailable
       </Text>
-    </Stack>
+    </Group>
   );
 }