website refactor

apps/website/components/profile/ProfileBio.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import React from 'react';
+import { User } from 'lucide-react';
+import { Card } from '@/ui/Card';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { Box } from '@/ui/Box';
+
+interface ProfileBioProps {
+  bio: string;
+}
+
+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>
+  );
+}