website refactor

2026-01-17 15:46:55 +01:00
parent 4d5ce9bfd6
commit 72a626ce71
346 changed files with 19308 additions and 8605 deletions
--- a/apps/website/components/errors/NotFoundScreen.tsx
+++ b/apps/website/components/errors/NotFoundScreen.tsx
@@ -0,0 +1,141 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
+import { Glow } from '@/ui/Glow';
+import { NotFoundActions } from './NotFoundActions';
+import { NotFoundHelpLinks } from './NotFoundHelpLinks';
+import { NotFoundDiagnostics } from './NotFoundDiagnostics';
+
+interface NotFoundScreenProps {
+  errorCode: string;
+  title: string;
+  message: string;
+  actionLabel: string;
+  onActionClick: () => void;
+}
+
+/**
+ * NotFoundScreen
+ * 
+ * App-specific semantic component for 404 states.
+ * Encapsulates the visual representation of the "Off Track" state.
+ * Redesigned for "Precision Racing Minimal" theme.
+ */
+export function NotFoundScreen({ 
+  errorCode, 
+  title, 
+  message, 
+  actionLabel, 
+  onActionClick 
+}: NotFoundScreenProps) {
+  const helpLinks = [
+    { label: 'Support', href: '/support' },
+    { label: 'Status', href: '/status' },
+    { label: 'Documentation', href: '/docs' },
+  ];
+
+  return (
+    <Box 
+      as="main" 
+      minHeight="100vh" 
+      display="flex" 
+      alignItems="center" 
+      justifyContent="center" 
+      bg="graphite-black" 
+      position="relative"
+      overflow="hidden"
+    >
+      {/* Background Glow Accent */}
+      <Glow color="primary" size="xl" opacity={0.1} position="center" />
+      
+      <Surface 
+        variant="glass" 
+        border 
+        padding={12} 
+        rounded="none" 
+        maxWidth="2xl"
+        fullWidth
+        mx={6}
+        position="relative"
+        zIndex={10}
+      >
+        <Stack gap={12} align="center" textAlign="center">
+          {/* Header Section */}
+          <Stack gap={4} align="center">
+            <NotFoundDiagnostics errorCode={errorCode} />
+            
+            <Text 
+              as="h1"
+              size="4xl" 
+              weight="bold"
+              color="text-white"
+              letterSpacing="tighter"
+              uppercase
+              block
+              leading="none"
+            >
+              {title}
+            </Text>
+          </Stack>
+
+          {/* Visual Separator */}
+          <Box width="full" height="1px" bg="primary-accent" opacity={0.3} position="relative" display="flex" alignItems="center" justifyContent="center">
+            <Box 
+              width={3} 
+              height={3} 
+              bg="primary-accent" 
+            />
+          </Box>
+
+          {/* Message Section */}
+          <Text 
+            size="xl" 
+            color="text-gray-400" 
+            maxWidth="lg"
+            leading="relaxed"
+            block
+            weight="medium"
+          >
+            {message}
+          </Text>
+
+          {/* Actions Section */}
+          <NotFoundActions 
+            primaryLabel={actionLabel} 
+            onPrimaryClick={onActionClick} 
+          />
+
+          {/* Footer Section */}
+          <Box pt={8} width="full">
+            <Box height="1px" width="full" bg="border-gray" opacity={0.1} mb={8} />
+            <NotFoundHelpLinks links={helpLinks} />
+          </Box>
+        </Stack>
+      </Surface>
+
+      {/* Subtle Edge Details */}
+      <Box 
+        position="absolute" 
+        top={0} 
+        left={0} 
+        right={0} 
+        height="2px" 
+        bg="primary-accent"
+        opacity={0.1}
+      />
+      <Box 
+        position="absolute" 
+        bottom={0} 
+        left={0} 
+        right={0} 
+        height="2px" 
+        bg="primary-accent"
+        opacity={0.1}
+      />
+    </Box>
+  );
+}