website refactor

apps/website/components/profile/ProfileSection.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+
+interface ProfileSectionProps {
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+export function ProfileSection({ title, description, action, children }: ProfileSectionProps) {
+  return (
+    <Box mb={8}>
+      <Stack direction="row" align="center" justify="between" mb={4}>
+        <Box>
+          <Heading level={2}>{title}</Heading>
+          {description && (
+            <Text color="text-gray-400" size="sm" mt={1} block>
+              {description}
+            </Text>
+          )}
+        </Box>
+        {action && <Box>{action}</Box>}
+      </Stack>
+      <Box>{children}</Box>
+    </Box>
+  );
+}