website refactor

apps/website/templates/ServerErrorTemplate.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Surface } from '@/ui/Surface';
+import { Glow } from '@/ui/Glow';
+import { Stack } from '@/ui/Stack';
+import { ServerErrorPanel } from '@/components/errors/ServerErrorPanel';
+import { RecoveryActions } from '@/components/errors/RecoveryActions';
+import { ErrorDetails } from '@/components/errors/ErrorDetails';
+
+export interface ServerErrorViewData {
+  error: Error & { digest?: string };
+  incidentId?: string;
+}
+
+interface ServerErrorTemplateProps {
+  viewData: ServerErrorViewData;
+  onRetry: () => void;
+  onHome: () => void;
+}
+
+/**
+ * ServerErrorTemplate
+ * 
+ * Template for the 500 error page.
+ * Composes semantic error components into an "instrument-grade" layout.
+ */
+export function ServerErrorTemplate({ viewData, onRetry, onHome }: ServerErrorTemplateProps) {
+  return (
+    <Box 
+      as="main" 
+      minHeight="screen"
+      fullWidth
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      bg="bg-deep-graphite"
+      position="relative"
+      overflow="hidden"
+      px={6}
+    >
+      {/* Background Accents */}
+      <Glow color="primary" size="xl" position="center" opacity={0.05} />
+      
+      <Surface 
+        variant="glass" 
+        border 
+        rounded="lg" 
+        padding={8} 
+        maxWidth="2xl"
+        fullWidth
+        position="relative"
+        zIndex={10}
+        shadow="xl"
+        borderColor="border-white"
+        bgOpacity={0.05}
+      >
+        <Stack gap={8} align="center">
+          <ServerErrorPanel 
+            message={viewData.error.message} 
+            incidentId={viewData.incidentId || viewData.error.digest} 
+          />
+          
+          <RecoveryActions 
+            onRetry={onRetry} 
+            onHome={onHome} 
+          />
+          
+          <ErrorDetails 
+            error={viewData.error} 
+          />
+        </Stack>
+      </Surface>
+    </Box>
+  );
+}