website refactor

apps/website/ui/FormSection.tsx

@@ -1,37 +1,33 @@
 import React, { ReactNode } from 'react';
-import { Stack } from './primitives/Stack';
+import { Box } from './primitives/Box';
 import { Text } from './Text';
 
-interface FormSectionProps {
+export interface FormSectionProps {
+  title: string;
+  description?: string;
   children: ReactNode;
-  title?: string;
 }
 
-/**
- * FormSection
- * 
- * Groups related form fields with an optional title.
- */
-export function FormSection({ children, title }: FormSectionProps) {
+export const FormSection = ({ 
+  title, 
+  description, 
+  children 
+}: FormSectionProps) => {
   return (
-    <Stack gap={4} fullWidth>
-      {title && (
-        <Text 
-          size="xs" 
-          weight="bold" 
-          color="text-gray-500" 
-          uppercase 
-          letterSpacing="widest" 
-          borderBottom 
-          borderColor="border-border-gray" 
-          pb={1}
-        >
+    <Box display="flex" flexDirection="col" gap={6}>
+      <Box borderBottom paddingBottom={4}>
+        <Text weight="bold" variant="high" size="lg" marginBottom={1} block>
           {title}
         </Text>
-      )}
-      <Stack gap={4} fullWidth>
+        {description && (
+          <Text size="sm" variant="low">
+            {description}
+          </Text>
+        )}
+      </Box>
+      <Box display="flex" flexDirection="col" gap={4}>
         {children}
-      </Stack>
-    </Stack>
+      </Box>
+    </Box>
   );
-}
+};