website refactor

apps/website/ui/ProfileHero.tsx

@@ -0,0 +1,88 @@
+import React, { ReactNode } from 'react';
+import { Box } from './primitives/Box';
+import { Surface } from './primitives/Surface';
+import { Glow } from './Glow';
+
+export interface ProfileHeroProps {
+  children: ReactNode;
+  glowColor?: 'primary' | 'aqua' | 'purple' | 'amber';
+  variant?: 'default' | 'muted';
+}
+
+export const ProfileHero = ({ children, glowColor = 'primary', variant = 'default' }: ProfileHeroProps) => {
+  return (
+    <Box 
+      position="relative" 
+      bg={variant === 'muted' ? 'var(--ui-color-bg-surface)' : 'var(--ui-color-bg-base)'} 
+      style={{ borderBottom: '1px solid var(--ui-color-border-default)', overflow: 'hidden' }}
+    >
+      <Glow color={glowColor} size="xl" opacity={0.1} position="top-right" />
+      <Box padding={{ base: 6, md: 10 }} position="relative" zIndex={10}>
+        {children}
+      </Box>
+    </Box>
+  );
+};
+
+export interface ProfileAvatarProps {
+  children: ReactNode;
+  badge?: ReactNode;
+}
+
+export const ProfileAvatar = ({ children, badge }: ProfileAvatarProps) => {
+  return (
+    <Box position="relative">
+      <Surface 
+        variant="muted" 
+        rounded="xl" 
+        padding={1} 
+        style={{ border: '1px solid var(--ui-color-border-default)' }}
+      >
+        {children}
+      </Surface>
+      {badge && (
+        <Box 
+          position="absolute" 
+          bottom={-2} 
+          right={-2} 
+          width={10} 
+          height={10} 
+          rounded="xl" 
+          bg="var(--ui-color-intent-telemetry)" 
+          style={{ border: '2px solid var(--ui-color-bg-base)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+        >
+          {badge}
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export interface ProfileStatsGroupProps {
+  children: ReactNode;
+}
+
+export const ProfileStatsGroup = ({ children }: ProfileStatsGroupProps) => {
+  return (
+    <Box display="flex" gap={4} marginTop={4}>
+      {children}
+    </Box>
+  );
+};
+
+export interface ProfileStatProps {
+  label: string;
+  value: string | number;
+  intent?: 'primary' | 'telemetry' | 'warning' | 'low';
+}
+
+import { Text } from './Text';
+
+export const ProfileStat = ({ label, value, intent = 'low' }: ProfileStatProps) => {
+  return (
+    <Box>
+      <Text size="xs" variant="low" uppercase block>{label}</Text>
+      <Text size="sm" weight="bold" variant={intent} font="mono">{value}</Text>
+    </Box>
+  );
+};