website refactor

apps/website/components/profile/ProfileBio.tsx

@@ -1,11 +1,6 @@
-
-
-import { Card } from '@/ui/Card';
-import { Heading } from '@/ui/Heading';
-import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
+import { Panel } from '@/ui/Panel';
 import { Text } from '@/ui/Text';
-import { User } from 'lucide-react';
+import React from 'react';
 
 interface ProfileBioProps {
   bio: string;
@@ -13,13 +8,10 @@ interface ProfileBioProps {
 
 export function ProfileBio({ bio }: ProfileBioProps) {
   return (
-    <Card>
-      <Box mb={3}>
-        <Heading level={2} icon={<Icon icon={User} size={5} color="#3b82f6" />}>
-          About
-        </Heading>
-      </Box>
-      <Text color="text-gray-300">{bio}</Text>
-    </Card>
+    <Panel 
+      title="About" 
+    >
+      <Text variant="med">{bio}</Text>
+    </Panel>
   );
 }