website refactor

apps/website/components/teams/CreateTeamForm.tsx

@@ -4,7 +4,7 @@ import { useCreateTeam } from "@/hooks/team/useCreateTeam";
 import { Button } from '@/ui/Button';
 import { InfoBanner } from '@/ui/InfoBanner';
 import { Input } from '@/ui/Input';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { TextArea } from '@/ui/TextArea';
 import React, { useState } from 'react';

apps/website/components/teams/FeaturedRecruiting.tsx

@@ -5,7 +5,7 @@ import { RecruitingTeamGrid } from '@/components/teams/RecruitingTeamGrid';
 import { getMediaUrl } from '@/lib/utilities/media';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { UserPlus } from 'lucide-react';
 

apps/website/components/teams/RecruitingTeamCard.tsx

@@ -1,7 +1,7 @@
 import { Badge } from '@/ui/Badge';
 import { Icon } from '@/ui/Icon';
 import { Image } from '@/ui/Image';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Trophy, Users } from 'lucide-react';
 

apps/website/components/teams/RecruitingTeamGrid.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 import { ReactNode } from 'react';
 
 interface RecruitingTeamGridProps {

apps/website/components/teams/SkillLevelSection.tsx

@@ -3,7 +3,7 @@
 import { SkillLevelHeader } from '@/components/drivers/SkillLevelHeader';
 import { TeamCard } from '@/components/teams/TeamCardWrapper';
 import { TeamGrid } from '@/components/teams/TeamGrid';
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 import { LucideIcon } from 'lucide-react';
 import { useState } from 'react';
 

apps/website/components/teams/TeamCard.tsx

@@ -46,21 +46,21 @@ export function TeamCard({
           <Image
             src={logo}
             alt={name}
-            width={64}
-            height={64}
+            fullWidth
+            fullHeight
             objectFit="cover"
           />
         ) : (
-          <PlaceholderImage size={64} />
+          <PlaceholderImage />
         )
       }
       badges={
-        <React.Fragment>
+        <>
           {performanceBadge}
           {specializationContent}
           {categoryBadge}
           {languagesContent}
-        </React.Fragment>
+        </>
       }
     />
   );

apps/website/components/teams/TeamCardWrapper.tsx

@@ -2,7 +2,7 @@ import { TeamCard as UiTeamCard } from '@/components/teams/TeamCard';
 import { TeamStatItem } from '@/components/teams/TeamStatItem';
 import { Badge } from '@/ui/Badge';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import {
     Clock,

apps/website/components/teams/TeamDetailsHeader.tsx

@@ -3,7 +3,7 @@
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Image } from '@/ui/Image';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface TeamDetailsHeaderProps {

apps/website/components/teams/TeamFilter.tsx

@@ -7,6 +7,8 @@ import { Input } from '@/ui/Input';
 import { Text } from '@/ui/Text';
 import { ControlBar } from '@/ui/ControlBar';
 import { SegmentedControl } from '@/ui/SegmentedControl';
+import { Stack } from '@/ui/Stack';
+import { ButtonGroup } from '@/ui/ButtonGroup';
 import { Hash, LucideIcon, Percent, Search, Star, Trophy } from 'lucide-react';
 import React from 'react';
 
@@ -49,22 +51,20 @@ export function TeamFilter({
   onSortChange,
 }: TeamFilterProps) {
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginBottom: '1.5rem' }}>
+    <Stack gap={4} marginBottom={6}>
       <ControlBar
         leftContent={
-          <div style={{ maxWidth: '448px', width: '100%' }}>
-            <Input
-              type="text"
-              placeholder="Search teams..."
-              value={searchQuery}
-              onChange={(e) => onSearchChange(e.target.value)}
-              icon={<Icon icon={Search} size={5} intent="low" />}
-              fullWidth
-            />
-          </div>
+          <Input
+            type="text"
+            placeholder="Search teams..."
+            value={searchQuery}
+            onChange={(e) => onSearchChange(e.target.value)}
+            icon={<Icon icon={Search} size={5} intent="low" />}
+            fullWidth
+          />
         }
       >
-        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', flexWrap: 'wrap' }}>
+        <ButtonGroup gap={2}>
           <Button
             variant={filterLevel === 'all' ? 'primary' : 'secondary'}
             size="sm"
@@ -89,10 +89,10 @@ export function TeamFilter({
               </Button>
             );
           })}
-        </div>
+        </ButtonGroup>
       </ControlBar>
 
-      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+      <Stack align="center" gap={2}>
         <Text size="sm" variant="low">Sort by:</Text>
         <SegmentedControl
           options={SORT_OPTIONS.map(opt => ({
@@ -103,7 +103,7 @@ export function TeamFilter({
           activeId={sortBy}
           onChange={(id) => onSortChange(id as SortBy)}
         />
-      </div>
-    </div>
+      </Stack>
+    </Stack>
   );
 }

apps/website/components/teams/TeamGrid.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@/ui/primitives/Box';
+import { Grid } from '@/ui/Grid';
 import { ReactNode } from 'react';
 
 interface TeamGridProps {
@@ -7,8 +7,8 @@ interface TeamGridProps {
 
 export function TeamGrid({ children }: TeamGridProps) {
   return (
-    <Box display="grid" gridCols={{ base: 1, md: 2, lg: 3 }} gap={4}>
+    <Grid cols={{ base: 1, md: 2, lg: 3 }} gap={4}>
       {children}
-    </Box>
+    </Grid>
   );
 }

apps/website/components/teams/TeamHeaderPanel.tsx

@@ -1,5 +1,5 @@
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { ReactNode } from 'react';
 import { TeamLogo } from './TeamLogo';

apps/website/components/teams/TeamHero.tsx

@@ -5,7 +5,7 @@ import { TeamLogo } from '@/components/teams/TeamLogo';
 import { TeamTag } from '@/components/teams/TeamTag';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface TeamHeroProps {

apps/website/components/teams/TeamHeroSection.tsx

@@ -2,7 +2,7 @@
 
 import { Badge } from '@/ui/Badge';
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Users } from 'lucide-react';
 import { ReactNode } from 'react';

apps/website/components/teams/TeamHeroStats.tsx

@@ -1,5 +1,5 @@
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { UserPlus, Users } from 'lucide-react';
 

apps/website/components/teams/TeamIdentity.tsx

@@ -1,5 +1,5 @@
 import { Image } from '@/ui/Image';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface TeamIdentityProps {

apps/website/components/teams/TeamLadderRow.tsx

@@ -1,5 +1,5 @@
+import { Box } from '@/ui/Box';
 import { Image } from '@/ui/Image';
-import { Box } from '@/ui/primitives/Box';
 import { TableCell, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
 

apps/website/components/teams/TeamLeaderboardItem.tsx

@@ -2,7 +2,7 @@
 
 import { Icon } from '@/ui/Icon';
 import { Image } from '@/ui/Image';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Crown, Trophy, Users } from 'lucide-react';
 

apps/website/components/teams/TeamLeaderboardPanel.tsx

@@ -1,5 +1,5 @@
 import { RankBadge } from '@/components/leaderboards/RankBadge';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
 import { TeamLogo } from './TeamLogo';

apps/website/components/teams/TeamLogo.tsx

@@ -1,6 +1,6 @@
+import { Box } from '@/ui/Box';
 import { Icon } from '@/ui/Icon';
 import { Image } from '@/ui/Image';
-import { Box } from '@/ui/primitives/Box';
 import { Users } from 'lucide-react';
 
 export interface TeamLogoProps {

apps/website/components/teams/TeamMembersTable.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Button } from '@/ui/Button';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
 

apps/website/components/teams/TeamMembershipCard.tsx

@@ -3,8 +3,8 @@
 import { Badge } from '@/ui/Badge';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/primitives/Stack';
-import { Surface } from '@/ui/primitives/Surface';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { ChevronRight, Users } from 'lucide-react';
 

apps/website/components/teams/TeamMembershipGrid.tsx

@@ -3,7 +3,7 @@
 import { Card, Card as Surface } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { ChevronRight, Shield, Users } from 'lucide-react';
 

apps/website/components/teams/TeamRankingsTable.tsx

@@ -3,7 +3,7 @@ import { TeamIdentity } from '@/components/teams/TeamIdentity';
 import { getMediaUrl } from '@/lib/utilities/media';
 import { Card } from '@/ui/Card';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
 import { Users } from 'lucide-react';

apps/website/components/teams/TeamRoster.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { MinimalEmptyState } from '@/components/shared/state/EmptyState';
+import { MinimalEmptyState } from '@/ui/EmptyState';
 import { TeamRosterItem } from '@/components/teams/TeamRosterItem';
 import { TeamRosterList } from '@/components/teams/TeamRosterList';
 import { useTeamRoster } from "@/hooks/team/useTeamRoster";
@@ -10,7 +10,7 @@ import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Select } from '@/ui/Select';
 import { Text } from '@/ui/Text';
 import { useMemo, useState } from 'react';

apps/website/components/teams/TeamRosterItem.tsx

@@ -1,6 +1,6 @@
-import { DriverIdentity } from '@/components/drivers/DriverIdentity';
+import { DriverIdentity } from '@/ui/DriverIdentity';
 import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { ReactNode } from 'react';
 

apps/website/components/teams/TeamRosterList.tsx

@@ -1,4 +1,4 @@
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { ReactNode } from 'react';
 
 interface TeamRosterListProps {

apps/website/components/teams/TeamSearchBar.tsx

@@ -14,15 +14,13 @@ interface TeamSearchBarProps {
 
 export function TeamSearchBar({ searchQuery, onSearchChange }: TeamSearchBarProps) {
   return (
-    <div style={{ marginBottom: '1.5rem' }}>
-      <Input
-        type="text"
-        placeholder="Search teams by name, description, region, or language..."
-        value={searchQuery}
-        onChange={(e) => onSearchChange(e.target.value)}
-        icon={<Icon icon={Search} size={5} intent="low" />}
-        fullWidth
-      />
-    </div>
+    <Input
+      type="text"
+      placeholder="Search teams by name, description, region, or language..."
+      value={searchQuery}
+      onChange={(e) => onSearchChange(e.target.value)}
+      icon={<Icon icon={Search} size={5} intent="low" />}
+      fullWidth
+    />
   );
 }

apps/website/components/teams/TeamStandings.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import { StandingsList } from '@/components/races/StandingsList';
-import { EmptyState } from '@/components/shared/state/EmptyState';
-import { LoadingWrapper } from '@/components/shared/state/LoadingWrapper';
+import { EmptyState } from '@/ui/EmptyState';
+import { LoadingWrapper } from '@/ui/LoadingWrapper';
 import { useTeamStandings } from "@/hooks/team/useTeamStandings";
+import { Box } from '@/ui/Box';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
-import { Box } from '@/ui/primitives/Box';
 import { Trophy } from 'lucide-react';
 
 interface TeamStandingsProps {

apps/website/components/teams/TeamStandingsPanel.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
 

apps/website/components/teams/TeamStatItem.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 
 interface TeamStatItemProps {

apps/website/components/teams/TeamTag.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@/ui/primitives/Box';
+import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 
 interface TeamTagProps {

apps/website/components/teams/TeamsDirectoryHeader.tsx

@@ -3,7 +3,7 @@
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Plus } from 'lucide-react';
 

apps/website/components/teams/WhyJoinTeamSection.tsx

@@ -1,14 +1,14 @@
 import { BenefitCard } from '@/components/landing/BenefitCard';
+import { Box } from '@/ui/Box';
 import { Heading } from '@/ui/Heading';
-import { Box } from '@/ui/primitives/Box';
-import { Grid } from '@/ui/primitives/Grid';
+import { Grid } from '@/ui/Grid';
 import { Text } from '@/ui/Text';
 import {
-    Calendar,
-    Handshake,
-    LucideIcon,
-    MessageCircle,
-    Trophy,
+  Calendar,
+  Handshake,
+  LucideIcon,
+  MessageCircle,
+  Trophy,
 } from 'lucide-react';
 
 interface Benefit {