website refactor

apps/website/components/errors/NotFoundHelpLinks.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import React from 'react';
+import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+
+interface NotFoundHelpLinksProps {
+  links: Array<{ label: string; href: string }>;
+}
+
+/**
+ * NotFoundHelpLinks
+ * 
+ * Semantic component for secondary navigation on the 404 page.
+ * Styled as technical metadata links.
+ */
+export function NotFoundHelpLinks({ links }: NotFoundHelpLinksProps) {
+  return (
+    <Stack direction="row" gap={6} align="center" wrap center>
+      {links.map((link, index) => (
+        <React.Fragment key={link.href}>
+          <Box 
+            as="a" 
+            href={link.href}
+            transition
+            display="inline-block"
+          >
+            <Text
+              color="text-gray-400"
+              hoverTextColor="primary-accent"
+              weight="medium"
+              size="xs"
+              letterSpacing="widest"
+              uppercase
+            >
+              {link.label}
+            </Text>
+          </Box>
+          {index < links.length - 1 && (
+            <Box width="1px" height="12px" bg="border-gray" opacity={0.5} />
+          )}
+        </React.Fragment>
+      ))}
+    </Stack>
+  );
+}