website refactor

apps/website/ui/DangerZone.tsx

@@ -0,0 +1,26 @@
+import React, { ReactNode } from 'react';
+import { Box } from './Box';
+import { Text } from './Text';
+import { Heading } from './Heading';
+import { Card } from './Card';
+
+interface DangerZoneProps {
+  title: string;
+  description: string;
+  children: ReactNode;
+}
+
+export function 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>
+        {children}
+      </Box>
+    </Card>
+  );
+}