website refactor

apps/website/components/errors/ApiErrorBoundary.tsx

@@ -3,8 +3,8 @@
 import React, { Component, ReactNode, useState } from 'react';
 import { ApiError } from '@/lib/api/base/ApiError';
 import { connectionMonitor } from '@/lib/api/base/ApiConnectionMonitor';
-import { ErrorDisplay } from '@/ui/ErrorDisplay';
-import { DevErrorPanel } from '@/ui/DevErrorPanel';
+import { ErrorDisplay } from '@/components/shared/ErrorDisplay';
+import { DevErrorPanel } from '@/components/shared/DevErrorPanel';
 
 interface Props {
   children: ReactNode;

apps/website/components/errors/EnhancedErrorBoundary.tsx

@@ -3,8 +3,8 @@
 import React, { Component, ReactNode, ErrorInfo, useState, version } from 'react';
 import { ApiError } from '@/lib/api/base/ApiError';
 import { getGlobalErrorHandler } from '@/lib/infrastructure/GlobalErrorHandler';
-import { DevErrorPanel } from '@/ui/DevErrorPanel';
-import { ErrorDisplay } from '@/ui/ErrorDisplay';
+import { DevErrorPanel } from '@/components/shared/DevErrorPanel';
+import { ErrorDisplay } from '@/components/shared/ErrorDisplay';
 
 interface Props {
   children: ReactNode;

apps/website/components/errors/ErrorDetails.tsx

@@ -6,7 +6,7 @@ import { Icon } from '@/ui/Icon';
 import { Text } from '@/ui/Text';
 import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
-import { Accordion } from '@/ui/Accordion';
+import { Accordion } from '@/components/shared/Accordion';
 import { Copy } from 'lucide-react';
 import React, { useState } from 'react';
 

apps/website/components/errors/ErrorDetailsBlock.tsx

@@ -6,7 +6,7 @@ import { Icon } from '@/ui/Icon';
 import { Text } from '@/ui/Text';
 import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
-import { Accordion } from '@/ui/Accordion';
+import { Accordion } from '@/components/shared/Accordion';
 import { Copy } from 'lucide-react';
 import React, { useState } from 'react';
 

apps/website/components/errors/ErrorDisplay.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { ApiError } from '@/lib/api/base/ApiError';
-import { ErrorDisplay as UiErrorDisplay } from '@/ui/ErrorDisplay';
+import { ErrorDisplay as UiErrorDisplay } from '@/components/shared/ErrorDisplay';
 
 interface ErrorDisplayProps {
   error: ApiError;

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>
   );
 }