website refactor

apps/website/components/errors/NotFoundDiagnostics.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import React from 'react';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+
+interface NotFoundDiagnosticsProps {
+  errorCode: string;
+}
+
+/**
+ * NotFoundDiagnostics
+ * 
+ * Semantic component for displaying technical error details.
+ * Styled as a telemetry status indicator.
+ */
+export function NotFoundDiagnostics({ errorCode }: NotFoundDiagnosticsProps) {
+  return (
+    <Stack gap={3} align="center">
+      <Box 
+        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>
+      </Box>
+      <Text 
+        size="xs" 
+        color="text-gray-500" 
+        uppercase 
+        letterSpacing="widest"
+        weight="medium"
+      >
+        Telemetry connection lost // Sector data unavailable
+      </Text>
+    </Stack>
+  );
+}