website refactor

apps/website/components/profile/ProfileSection.tsx

@@ -1,8 +1,6 @@
 'use client';
 
-import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/primitives/Stack';
-import { Text } from '@/ui/Text';
+import { SectionHeader } from '@/ui/SectionHeader';
 import React from 'react';
 
 interface ProfileSectionProps {
@@ -14,19 +12,14 @@ interface ProfileSectionProps {
 
 export function ProfileSection({ title, description, action, children }: ProfileSectionProps) {
   return (
-    <Stack mb={8}>
-      <Stack direction="row" align="center" justify="between" mb={4}>
-        <Stack>
-          <Heading level={2}>{title}</Heading>
-          {description && (
-            <Text color="text-gray-400" size="sm" mt={1} block>
-              {description}
-            </Text>
-          )}
-        </Stack>
-        {action && <Stack>{action}</Stack>}
-      </Stack>
-      <Stack>{children}</Stack>
-    </Stack>
+    <section style={{ marginBottom: '2rem' }}>
+      <SectionHeader
+        title={title}
+        description={description}
+        actions={action}
+        variant="minimal"
+      />
+      <div>{children}</div>
+    </section>
   );
 }