website refactor

apps/website/components/profile/ProfileBio.tsx

@@ -0,0 +1,25 @@
+
+
+import { Card } from '@/ui/Card';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Box } from '@/ui/primitives/Box';
+import { Text } from '@/ui/Text';
+import { User } from 'lucide-react';
+
+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>
+  );
+}

apps/website/components/profile/ProfileStatGrid.tsx

@@ -0,0 +1,34 @@
+import { Box } from '../../ui/primitives/Box';
+import { Grid } from '../../ui/primitives/Grid';
+import { Text } from '../../ui/Text';
+
+interface Stat {
+  label: string;
+  value: string | number;
+  color?: string;
+}
+
+interface ProfileStatGridProps {
+  stats: Stat[];
+}
+
+export function ProfileStatGrid({ stats }: ProfileStatGridProps) {
+  return (
+    <Grid cols={2} mdCols={4} gap={4}>
+      {stats.map((stat, idx) => (
+        <Box 
+          key={idx} 
+          p={4} 
+          bg="bg-[#0f1115]" 
+          rounded="xl" 
+          border 
+          borderColor="border-[#262626]" 
+          textAlign="center"
+        >
+          <Text size="3xl" weight="bold" color={stat.color} block mb={1}>{stat.value}</Text>
+          <Text size="xs" color="text-gray-500" uppercase letterSpacing="0.05em">{stat.label}</Text>
+        </Box>
+      ))}
+    </Grid>
+  );
+}

apps/website/components/profile/ProfileTabs.tsx

@@ -0,0 +1,47 @@
+
+
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { Box } from '@/ui/primitives/Box';
+import { Surface } from '@/ui/primitives/Surface';
+import { BarChart3, TrendingUp, User } from 'lucide-react';
+
+export type ProfileTab = 'overview' | 'stats' | 'ratings';
+
+interface ProfileTabsProps {
+  activeTab: ProfileTab;
+  onTabChange: (tab: ProfileTab) => void;
+}
+
+export function ProfileTabs({ activeTab, onTabChange }: ProfileTabsProps) {
+  return (
+    <Surface variant="muted" rounded="xl" padding={1} style={{ backgroundColor: 'rgba(38, 38, 38, 0.5)', border: '1px solid #262626', width: 'fit-content' }}>
+      <Box style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+        <Button
+          variant={activeTab === 'overview' ? 'primary' : 'ghost'}
+          onClick={() => onTabChange('overview')}
+          size="sm"
+          icon={<Icon icon={User} size={4} />}
+        >
+          Overview
+        </Button>
+        <Button
+          variant={activeTab === 'stats' ? 'primary' : 'ghost'}
+          onClick={() => onTabChange('stats')}
+          size="sm"
+          icon={<Icon icon={BarChart3} size={4} />}
+        >
+          Detailed Stats
+        </Button>
+        <Button
+          variant={activeTab === 'ratings' ? 'primary' : 'ghost'}
+          onClick={() => onTabChange('ratings')}
+          size="sm"
+          icon={<Icon icon={TrendingUp} size={4} />}
+        >
+          Ratings
+        </Button>
+      </Box>
+    </Surface>
+  );
+}