website refactor

apps/website/ui/DangerZone.tsx

@@ -1,26 +1,37 @@
 import React, { ReactNode } from 'react';
 import { Box } from './primitives/Box';
-import { Text } from './Text';
 import { Heading } from './Heading';
-import { Card } from './Card';
+import { Text } from './Text';
+import { Surface } from './primitives/Surface';
 
-interface DangerZoneProps {
+export interface DangerZoneProps {
   title: string;
   description: string;
   children: ReactNode;
 }
 
-export function DangerZone({ title, description, children }: DangerZoneProps) {
+export const DangerZone = ({ 
+  title, 
+  description, 
+  children 
+}: DangerZoneProps) => {
   return (
-    <Card>
-      <Heading level={3} mb={4}>Danger Zone</Heading>
-      <Box p={4} rounded="lg" bg="bg-red-900/10" border={true} borderColor="border-red-900/30">
-        <Text color="text-white" weight="medium" block mb={2}>{title}</Text>
-        <Text size="sm" color="text-gray-400" block mb={4}>
-          {description}
-        </Text>
+    <Box marginTop={8}>
+      <Heading level={3} marginBottom={4}>Danger Zone</Heading>
+      <Surface 
+        variant="muted" 
+        rounded="lg" 
+        padding={4} 
+        style={{ border: '1px solid var(--ui-color-intent-critical)', backgroundColor: 'rgba(227, 92, 92, 0.05)' }}
+      >
+        <Box marginBottom={4}>
+          <Text variant="high" weight="medium" block marginBottom={2}>{title}</Text>
+          <Text size="sm" variant="low" block>
+            {description}
+          </Text>
+        </Box>
         {children}
-      </Box>
-    </Card>
+      </Surface>
+    </Box>
   );
-}
+};