website refactor

apps/website/components/teams/TeamHero.tsx

@@ -1,74 +1,60 @@
 'use client';
 
-import { JoinTeamButton } from '@/components/teams/JoinTeamButton';
-import { TeamLogo } from '@/components/teams/TeamLogo';
-import { TeamTag } from '@/components/teams/TeamTag';
-import { Card } from '@/ui/Card';
-import { Group } from '@/ui/Group';
+import React, { ReactNode } from 'react';
+import { Glow } from '@/ui/Glow';
 import { Heading } from '@/ui/Heading';
-import { StatGrid } from '@/ui/StatGrid';
 import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
 
-interface TeamHeroProps {
-  team: {
-    id: string;
-    name: string;
-    tag: string | null;
-    description?: string;
-    category?: string | null;
-    createdAt?: string;
-    foundedDateLabel?: string;
-    leagues: { id: string }[];
-  };
-  memberCount: number;
-  memberCountLabel?: string;
-  leagueCountLabel?: string;
-  onUpdate: () => void;
+export interface TeamHeroProps {
+  title: ReactNode;
+  description: string;
+  stats?: ReactNode;
+  actions?: ReactNode;
+  sideContent?: ReactNode;
 }
 
-export function TeamHero({ team, memberCount, memberCountLabel, leagueCountLabel, onUpdate }: TeamHeroProps) {
+export function TeamHero({ 
+  title, 
+  description, 
+  stats, 
+  actions,
+  sideContent 
+}: TeamHeroProps) {
   return (
-    <Card>
-      <Group align="start" justify="between" wrap gap={6}>
-        <Group align="start" gap={6} wrap fullWidth>
-          <TeamLogo teamId={team.id} alt={team.name} size={96} />
+    <Box 
+      position="relative" 
+      backgroundColor="var(--ui-color-bg-base)" 
+      paddingY={12} 
+      style={{ borderBottom: '1px solid var(--ui-color-border-default)', overflow: 'hidden' }}
+    >
+      <Glow color="purple" size="xl" opacity={0.05} position="top-right" />
+      
+      <Stack direction={{ base: 'col', lg: 'row' }} gap={12} align="start">
+        <Stack flex={1} gap={4}>
+          <Heading level={1} size="4xl" weight="bold">
+            {title}
+          </Heading>
+          <Text size="lg" variant="low" block leading="relaxed" marginBottom={4}>
+            {description}
+          </Text>
           
-          <Group direction="col" align="start" gap={2} fullWidth>
-            <Group gap={3}>
-              <Heading level={1}>{team.name}</Heading>
-              {team.tag && <TeamTag tag={team.tag} />}
-            </Group>
-
-            <Text variant="low" block marginBottom={4}>{team.description}</Text>
-
-            <StatGrid
-              columns={{ base: 2, md: 4 }}
-              variant="box"
-              stats={[
-                {
-                  label: 'Personnel',
-                  value: memberCountLabel || 'Unknown',
-                },
-                ...(team.category ? [{
-                  label: 'Category',
-                  value: team.category,
-                  intent: 'primary' as const,
-                }] : []),
-                ...(team.foundedDateLabel ? [{
-                  label: 'Founded',
-                  value: team.foundedDateLabel,
-                }] : []),
-                ...(team.leagues && team.leagues.length > 0 ? [{
-                  label: 'Activity',
-                  value: leagueCountLabel || 'Unknown',
-                }] : []),
-              ]}
-            />
-          </Group>
-        </Group>
-
-        <JoinTeamButton teamId={team.id} onUpdate={onUpdate} />
-      </Group>
-    </Card>
+          {stats && <Box marginBottom={4}>{stats}</Box>}
+          
+          {actions && (
+            <Stack direction="row" gap={4} wrap>
+              {actions}
+            </Stack>
+          )}
+        </Stack>
+        
+        {sideContent && (
+          <Box width={{ base: '100%', lg: '24rem' }} flexShrink={0}>
+            {sideContent}
+          </Box>
+        )}
+      </Stack>
+    </Box>
   );
 }