website refactor

apps/website/components/errors/NotFoundScreen.tsx

@@ -3,7 +3,7 @@
 import { ErrorPageContainer } from '@/ui/ErrorPageContainer';
 import { Glow } from '@/ui/Glow';
 import { Text } from '@/ui/Text';
-import { FooterSection } from '@/ui/FooterSection';
+import { Group } from '@/ui/Group';
 import { NotFoundActions } from './NotFoundActions';
 import { NotFoundDiagnostics } from './NotFoundDiagnostics';
 import { NotFoundHelpLinks } from './NotFoundHelpLinks';
@@ -42,40 +42,40 @@ export function NotFoundScreen({
       {/* Background Glow Accent */}
       <Glow color="primary" size="xl" opacity={0.1} position="center" />
       
-      <NotFoundDiagnostics errorCode={errorCode} />
-      
-      <Text 
-        as="h1"
-        size="4xl" 
-        weight="bold"
-        variant="high"
-        uppercase
-        block
-        align="center"
-        style={{ marginTop: '1rem', marginBottom: '2rem' }}
-      >
-        {title}
-      </Text>
+      <Group direction="column" align="center" gap={8} fullWidth>
+        <NotFoundDiagnostics errorCode={errorCode} />
+        
+        <Group direction="column" align="center" gap={4} fullWidth>
+          <Text 
+            as="h1"
+            size="4xl" 
+            weight="bold"
+            variant="high"
+            uppercase
+            block
+            align="center"
+          >
+            {title}
+          </Text>
 
-      <Text 
-        size="xl" 
-        variant="med" 
-        block
-        weight="medium"
-        align="center"
-        style={{ marginBottom: '3rem' }}
-      >
-        {message}
-      </Text>
+          <Text 
+            size="xl" 
+            variant="med" 
+            block
+            weight="medium"
+            align="center"
+          >
+            {message}
+          </Text>
+        </Group>
 
-      <NotFoundActions 
-        primaryLabel={actionLabel} 
-        onPrimaryClick={onActionClick} 
-      />
+        <NotFoundActions 
+          primaryLabel={actionLabel} 
+          onPrimaryClick={onActionClick} 
+        />
 
-      <FooterSection>
         <NotFoundHelpLinks links={helpLinks} />
-      </FooterSection>
+      </Group>
     </ErrorPageContainer>
   );
 }