website refactor

2026-01-15 17:12:24 +01:00
parent c3b308e960
commit f035cfe7ce
468 changed files with 24378 additions and 17324 deletions
--- a/apps/website/templates/DashboardTemplate.tsx
+++ b/apps/website/templates/DashboardTemplate.tsx
@@ -6,12 +6,12 @@ import { Box } from '@/ui/Box';
 import { Container } from '@/ui/Container';
 import { Grid } from '@/ui/Grid';
 import { GridItem } from '@/ui/GridItem';
-import { DashboardHero } from '@/components/dashboard/DashboardHero';
-import { NextRaceCard } from '@/components/dashboard/NextRaceCard';
-import { ChampionshipStandings } from '@/components/dashboard/ChampionshipStandings';
-import { ActivityFeed } from '@/components/dashboard/ActivityFeed';
-import { UpcomingRaces } from '@/components/dashboard/UpcomingRaces';
-import { FriendsSidebar } from '@/components/dashboard/FriendsSidebar';
+import { DashboardHero } from '@/ui/DashboardHeroWrapper';
+import { NextRaceCard } from '@/ui/NextRaceCardWrapper';
+import { ChampionshipStandings } from '@/ui/ChampionshipStandings';
+import { ActivityFeed } from '@/ui/ActivityFeed';
+import { UpcomingRaces } from '@/ui/UpcomingRaces';
+import { FriendsSidebar } from '@/ui/FriendsSidebar';
 import { Stack } from '@/ui/Stack';

 interface DashboardTemplateProps {
--- a/apps/website/templates/DriverProfileTemplate.tsx
+++ b/apps/website/templates/DriverProfileTemplate.tsx
@@ -1,26 +1,26 @@
 'use client';

-import React from 'react';
-import {
-  ArrowLeft,
-} from 'lucide-react';
+import { RatingBreakdown } from '@/ui/RatingBreakdown';
+import { Breadcrumbs } from '@/ui/Breadcrumbs';
+import { AchievementGrid } from '@/ui/AchievementGrid';
+import { CareerStats } from '@/ui/CareerStats';
+import { FriendsPreview } from '@/ui/FriendsPreview';
+import { PerformanceOverview } from '@/ui/PerformanceOverview';
+import { ProfileBio } from '@/ui/ProfileBio';
+import { ProfileHero } from '@/ui/ProfileHero';
+import { ProfileTabs, type ProfileTab } from '@/ui/ProfileTabs';
+import { RacingProfile } from '@/ui/RacingProfile';
+import { TeamMembershipGrid } from '@/ui/TeamMembershipGrid';
 import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
 import { Button } from '@/ui/Button';
 import { Container } from '@/ui/Container';
 import { LoadingSpinner } from '@/ui/LoadingSpinner';
-import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
-import { ProfileHero } from '@/components/profile/ProfileHero';
-import { ProfileBio } from '@/components/profile/ProfileBio';
-import { TeamMembershipGrid } from '@/components/profile/TeamMembershipGrid';
-import { PerformanceOverview } from '@/components/profile/PerformanceOverview';
-import { CareerStats } from '@/components/profile/CareerStats';
-import { RacingProfile } from '@/components/profile/RacingProfile';
-import { AchievementGrid } from '@/components/profile/AchievementGrid';
-import { FriendsPreview } from '@/components/profile/FriendsPreview';
-import RatingBreakdown from '@/components/drivers/RatingBreakdown';
-import { ProfileTabs, type ProfileTab } from '@/components/profile/ProfileTabs';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import {
+  ArrowLeft,
+} from 'lucide-react';
+import React from 'react';
 import type { DriverProfileViewData } from '../../../lib/types/view-data/DriverProfileViewData';

 interface DriverProfileTemplateProps {
--- a/apps/website/templates/DriverRankingsTemplate.tsx
+++ b/apps/website/templates/DriverRankingsTemplate.tsx
@@ -11,8 +11,8 @@ import { Container } from '@/ui/Container';
 import { Icon } from '@/ui/Icon';
 import { Surface } from '@/ui/Surface';
 import type { DriverRankingsViewData } from '@/lib/view-data/DriverRankingsViewData';
-import { RankingsPodium } from '@/components/drivers/RankingsPodium';
-import { RankingsTable } from '@/components/drivers/RankingsTable';
+import { RankingsPodium } from '@/ui/RankingsPodium';
+import { RankingsTable } from '@/ui/RankingsTable';

 interface DriverRankingsTemplateProps {
  viewData: DriverRankingsViewData;
--- a/apps/website/templates/DriversTemplate.tsx
+++ b/apps/website/templates/DriversTemplate.tsx
@@ -14,15 +14,15 @@ import { Grid } from '@/ui/Grid';
 import { GridItem } from '@/ui/GridItem';
 import { Surface } from '@/ui/Surface';
 import { Icon } from '@/ui/Icon';
-import { FeaturedDriverCard } from '@/components/drivers/FeaturedDriverCard';
-import { SkillDistribution } from '@/components/drivers/SkillDistribution';
-import { CategoryDistribution } from '@/components/drivers/CategoryDistribution';
-import { LeaderboardPreview } from '@/components/drivers/LeaderboardPreview';
-import { RecentActivity } from '@/components/drivers/RecentActivity';
-import { HeroSection } from '@/components/shared/HeroSection';
+import { FeaturedDriverCard } from '@/ui/FeaturedDriverCard';
+import { SkillDistribution } from '@/ui/SkillDistribution';
+import { CategoryDistribution } from '@/ui/CategoryDistribution';
+import { LeaderboardPreview } from '@/ui/LeaderboardPreview';
+import { RecentActivity } from '@/ui/RecentActivity';
+import { PageHero } from '@/ui/PageHero';
 import { Users, Trophy } from 'lucide-react';
-import { DriversSearch } from '@/components/drivers/DriversSearch';
-import { EmptyState } from '@/components/shared/state/EmptyState';
+import { DriversSearch } from '@/ui/DriversSearch';
+import { EmptyState } from '@/ui/EmptyState';
 import type { DriversViewData } from '@/lib/types/view-data/DriversViewData';

 interface DriversTemplateProps {
@@ -54,7 +54,7 @@ export function DriversTemplate({
    <Container size="lg" py={8}>
      <Stack gap={10}>
        {/* Hero Section */}
-        <HeroSection
+        <PageHero
          title="Drivers"
          description="Meet the racers who make every lap count. From rookies to champions, track their journey and see who's dominating the grid."
          icon={Users}
@@ -114,7 +114,11 @@ export function DriversTemplate({
        {!searchQuery && <CategoryDistribution drivers={drivers} />}

        {/* Leaderboard Preview */}
-        <LeaderboardPreview drivers={filteredDrivers} onDriverClick={onDriverClick} />
+        <LeaderboardPreview 
+          drivers={filteredDrivers} 
+          onDriverClick={onDriverClick} 
+          onNavigate={() => onViewLeaderboard()}
+        />

        {/* Empty State */}
        {filteredDrivers.length === 0 && (
--- a/apps/website/templates/HomeTemplate.tsx
+++ b/apps/website/templates/HomeTemplate.tsx
@@ -1,17 +1,17 @@
 'use client';

 import React from 'react';
-import Hero from '@/components/landing/Hero';
-import AlternatingSection from '@/components/landing/AlternatingSection';
-import FeatureGrid from '@/components/landing/FeatureGrid';
-import DiscordCTA from '@/components/landing/DiscordCTA';
-import FAQ from '@/components/landing/FAQ';
-import Footer from '@/components/landing/Footer';
-import CareerProgressionMockup from '@/components/mockups/CareerProgressionMockup';
-import RaceHistoryMockup from '@/components/mockups/RaceHistoryMockup';
-import CompanionAutomationMockup from '@/components/mockups/CompanionAutomationMockup';
-import SimPlatformMockup from '@/components/mockups/SimPlatformMockup';
-import MockupStack from '@/ui/MockupStack';
+import { LandingHero } from '@/ui/LandingHero';
+import { AlternatingSection } from '@/ui/AlternatingSection';
+import { FeatureGrid } from '@/ui/FeatureGrid';
+import { DiscordCTA } from '@/ui/DiscordCTA';
+import { FAQ } from '@/components/landing/FAQ';
+import { Footer } from '@/ui/Footer';
+import { CareerProgressionMockup } from '@/components/mockups/CareerProgressionMockup';
+import { RaceHistoryMockup } from '@/components/mockups/RaceHistoryMockup';
+import { CompanionAutomationMockup } from '@/components/mockups/CompanionAutomationMockup';
+import { SimPlatformMockup } from '@/components/mockups/SimPlatformMockup';
+import { MockupStack } from '@/ui/MockupStack';
 import { Card } from '@/ui/Card';
 import { Button } from '@/ui/Button';
 import { Box } from '@/ui/Box';
@@ -25,7 +25,7 @@ import { Grid } from '@/ui/Grid';
 import { Surface } from '@/ui/Surface';
 import { getMediaUrl } from '@/lib/utilities/media';
 import { routes } from '@/lib/routing/RouteConfig';
-import { FeatureItem, ResultItem, StepItem } from '@/components/landing/LandingItems';
+import { FeatureItem, ResultItem, StepItem } from '@/ui/LandingItems';
 import { ModeGuard } from '@/components/shared/ModeGuard';

 export interface HomeViewData {
@@ -56,7 +56,7 @@ interface HomeTemplateProps {
 export function HomeTemplate({ viewData }: HomeTemplateProps) {
  return (
    <Box as="main">
-      <Hero />
+      <LandingHero />

      {/* Section 1: A Persistent Identity */}
      <AlternatingSection
--- a/apps/website/templates/LeaderboardsTemplate.tsx
+++ b/apps/website/templates/LeaderboardsTemplate.tsx
@@ -6,7 +6,7 @@ import { Container } from '@/ui/Container';
 import { Grid } from '@/ui/Grid';
 import { GridItem } from '@/ui/GridItem';
 import { DriverLeaderboardPreview } from '@/components/leaderboards/DriverLeaderboardPreview';
-import { TeamLeaderboardPreview } from '@/components/leaderboards/TeamLeaderboardPreview';
+import { TeamLeaderboardPreview } from '@/ui/TeamLeaderboardPreviewWrapper';
 import { LeaderboardsHero } from '@/components/leaderboards/LeaderboardsHero';
 import type { LeaderboardsViewData } from '@/lib/view-data/LeaderboardsViewData';

@@ -44,9 +44,9 @@ export function LeaderboardsTemplate({
        </GridItem>
        <GridItem colSpan={12} lgSpan={6}>
          <TeamLeaderboardPreview 
-            teams={viewData.teams} 
+            topTeams={viewData.teams as any} 
            onTeamClick={onTeamClick} 
-            onNavigateToTeams={onNavigateToTeams} 
+            onViewFullLeaderboard={onNavigateToTeams} 
          />
        </GridItem>
      </Grid>
--- a/apps/website/templates/LeagueDetailTemplate.tsx
+++ b/apps/website/templates/LeagueDetailTemplate.tsx
@@ -6,7 +6,7 @@ import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Container } from '@/ui/Container';
 import { Heading } from '@/ui/Heading';
-import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
+import { Breadcrumbs } from '@/ui/Breadcrumbs';
 import { LeagueTabs } from '@/components/leagues/LeagueTabs';
 import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData';

--- a/apps/website/templates/LeagueRulebookTemplate.tsx
+++ b/apps/website/templates/LeagueRulebookTemplate.tsx
@@ -9,8 +9,8 @@ import { Heading } from '@/ui/Heading';
 import { Badge } from '@/ui/Badge';
 import { Grid } from '@/ui/Grid';
 import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
-import PointsTable from '@/components/leagues/PointsTable';
-import { RulebookTabs, type RulebookSection } from '@/components/leagues/RulebookTabs';
+import { PointsTable } from '@/ui/PointsTable';
+import { RulebookTabs, type RulebookSection } from '@/ui/RulebookTabs';
 import type { LeagueRulebookViewData } from '@/lib/view-data/LeagueRulebookViewData';
 import { Surface } from '@/ui/Surface';
 import { Clock } from 'lucide-react';
--- a/apps/website/templates/LeagueScheduleTemplate.tsx
+++ b/apps/website/templates/LeagueScheduleTemplate.tsx
@@ -6,7 +6,7 @@ import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
 import type { LeagueScheduleViewData } from '@/lib/view-data/leagues/LeagueScheduleViewData';
-import LeagueSchedule from '@/components/leagues/LeagueSchedule';
+import { LeagueSchedule } from '@/components/leagues/LeagueSchedule';

 interface LeagueScheduleTemplateProps {
  viewData: LeagueScheduleViewData;
--- a/apps/website/templates/LeagueSponsorshipsTemplate.tsx
+++ b/apps/website/templates/LeagueSponsorshipsTemplate.tsx
@@ -13,7 +13,7 @@ import { Building, Clock, Palette } from 'lucide-react';
 import type { LeagueSponsorshipsViewData } from '@/lib/view-data/leagues/LeagueSponsorshipsViewData';
 import { SponsorshipSlotCard } from '@/components/leagues/SponsorshipSlotCard';
 import { SponsorshipRequestCard } from '@/components/leagues/SponsorshipRequestCard';
-import LeagueDecalPlacementEditor from '@/components/leagues/LeagueDecalPlacementEditor';
+import { LeagueDecalPlacementEditor } from '@/components/leagues/LeagueDecalPlacementEditor';

 interface LeagueSponsorshipsTemplateProps {
  viewData: LeagueSponsorshipsViewData;
--- a/apps/website/templates/ProfileLeaguesTemplate.tsx
+++ b/apps/website/templates/ProfileLeaguesTemplate.tsx
@@ -8,7 +8,7 @@ import { Heading } from '@/ui/Heading';
 import { Container } from '@/ui/Container';
 import { Surface } from '@/ui/Surface';
 import type { ProfileLeaguesViewData } from '@/lib/view-data/ProfileLeaguesViewData';
-import { LeagueListItem } from '@/components/profile/LeagueListItem';
+import { LeagueListItem } from '@/ui/LeagueListItem';

 interface ProfileLeaguesTemplateProps {
  viewData: ProfileLeaguesViewData;
--- a/apps/website/templates/ProfileTemplate.tsx
+++ b/apps/website/templates/ProfileTemplate.tsx
@@ -1,14 +1,14 @@
 'use client';

 import React from 'react';
-import CreateDriverForm from '@/components/drivers/CreateDriverForm';
-import ProfileRaceHistory from '@/components/drivers/ProfileRaceHistory';
-import ProfileSettings from '@/components/drivers/ProfileSettings';
-import { AchievementGrid } from '@/components/profile/AchievementGrid';
-import { ProfileHero } from '@/components/profile/ProfileHero';
-import { ProfileStatGrid } from '@/components/profile/ProfileStatGrid';
-import { ProfileTabs } from '@/components/profile/ProfileTabs';
-import { TeamMembershipGrid } from '@/components/profile/TeamMembershipGrid';
+import { CreateDriverForm } from '@/components/drivers/CreateDriverForm';
+import { ProfileRaceHistory } from '@/components/drivers/ProfileRaceHistory';
+import { ProfileSettings } from '@/components/drivers/ProfileSettings';
+import { AchievementGrid } from '@/ui/AchievementGrid';
+import { ProfileHero } from '@/ui/ProfileHero';
+import { ProfileStatGrid } from '@/ui/ProfileStatGrid';
+import { ProfileTabs } from '@/ui/ProfileTabs';
+import { TeamMembershipGrid } from '@/ui/TeamMembershipGrid';
 import type { ProfileViewData } from '@/lib/view-data/ProfileViewData';
 import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
@@ -25,7 +25,7 @@ import {
  History,
  User,
 } from 'lucide-react';
-import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
+import { Breadcrumbs } from '@/ui/Breadcrumbs';

 export type ProfileTab = 'overview' | 'history' | 'stats';

--- a/apps/website/templates/RaceDetailTemplate.tsx
+++ b/apps/website/templates/RaceDetailTemplate.tsx
@@ -1,7 +1,7 @@
 'use client';

 import React from 'react';
-import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
+import { Breadcrumbs } from '@/ui/Breadcrumbs';
 import { Button } from '@/ui/Button';
 import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
@@ -12,12 +12,12 @@ import { Grid } from '@/ui/Grid';
 import { GridItem } from '@/ui/GridItem';
 import { Skeleton } from '@/ui/Skeleton';
 import { InfoBox } from '@/ui/InfoBox';
-import { RaceJoinButton } from '@/components/races/RaceJoinButton';
-import { RaceHero } from '@/components/races/RaceHero';
-import { RaceUserResult } from '@/components/races/RaceUserResult';
-import { RaceEntryList } from '@/components/races/RaceEntryList';
-import { RaceDetailCard } from '@/components/races/RaceDetailCard';
-import { LeagueSummaryCard } from '@/components/leagues/LeagueSummaryCard';
+import { RaceJoinButton } from '@/ui/RaceJoinButton';
+import { RaceHero } from '@/ui/RaceHeroWrapper';
+import { RaceUserResult } from '@/ui/RaceUserResultWrapper';
+import { RaceEntryList } from '@/ui/RaceEntryList';
+import { RaceDetailCard } from '@/ui/RaceDetailCard';
+import { LeagueSummaryCard } from '@/ui/LeagueSummaryCardWrapper';
 import {
  AlertTriangle,
  ArrowLeft,
--- a/apps/website/templates/RaceResultsTemplate.tsx
+++ b/apps/website/templates/RaceResultsTemplate.tsx
@@ -1,7 +1,7 @@
 'use client';

 import React from 'react';
-import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
+import { Breadcrumbs } from '@/ui/Breadcrumbs';
 import { Button } from '@/ui/Button';
 import { Card } from '@/ui/Card';
 import { Box } from '@/ui/Box';
@@ -14,8 +14,8 @@ import { Icon } from '@/ui/Icon';
 import { Surface } from '@/ui/Surface';
 import { ArrowLeft, Trophy, Zap } from 'lucide-react';
 import type { RaceResultsViewData } from '@/lib/view-data/races/RaceResultsViewData';
-import { RaceResultRow } from '@/components/races/RaceResultRow';
-import { RacePenaltyRow } from '@/components/races/RacePenaltyRow';
+import { RaceResultRow } from '@/ui/RaceResultRow';
+import { RacePenaltyRow } from '@/ui/RacePenaltyRowWrapper';

 export interface RaceResultsTemplateProps {
  viewData: RaceResultsViewData;
--- a/apps/website/templates/RaceStewardingTemplate.tsx
+++ b/apps/website/templates/RaceStewardingTemplate.tsx
@@ -1,11 +1,11 @@
 'use client';

 import React from 'react';
-import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
-import RaceStewardingStats from '@/components/races/RaceStewardingStats';
-import { StewardingTabs } from '@/components/races/StewardingTabs';
-import { ProtestCard } from '@/components/races/ProtestCard';
-import { RacePenaltyRow } from '@/components/races/RacePenaltyRow';
+import { Breadcrumbs } from '@/ui/Breadcrumbs';
+import { RaceStewardingStats } from '@/ui/RaceStewardingStats';
+import { StewardingTabs } from '@/ui/StewardingTabs';
+import { ProtestCard } from '@/ui/ProtestCardWrapper';
+import { RacePenaltyRow } from '@/ui/RacePenaltyRowWrapper';
 import { Card } from '@/ui/Card';
 import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
--- a/apps/website/templates/RacesAllTemplate.tsx
+++ b/apps/website/templates/RacesAllTemplate.tsx
@@ -4,14 +4,14 @@ import React, { useMemo, useEffect } from 'react';
 import { Card } from '@/ui/Card';
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
-import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
+import { Breadcrumbs } from '@/ui/Breadcrumbs';
 import {
  Flag,
  SlidersHorizontal,
  Calendar,
 } from 'lucide-react';
-import { RaceFilterModal } from '@/components/races/RaceFilterModal';
-import { RacePagination } from '@/components/races/RacePagination';
+import { RaceFilterModal } from '@/ui/RaceFilterModal';
+import { Pagination } from '@/ui/Pagination';
 import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
@@ -19,7 +19,7 @@ import { Container } from '@/ui/Container';
 import { Icon } from '@/ui/Icon';
 import { Surface } from '@/ui/Surface';
 import { Skeleton } from '@/ui/Skeleton';
-import { RaceListItem } from '@/components/races/RaceListItem';
+import { RaceListItem } from '@/ui/RaceListItemWrapper';
 import type { RacesViewData } from '@/lib/view-data/RacesViewData';

 export type StatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'all';
@@ -195,7 +195,7 @@ export function RacesAllTemplate({
        )}

        {/* Pagination */}
-        <RacePagination
+        <Pagination
          currentPage={currentPage}
          totalPages={totalPages}
          totalItems={filteredRaces.length}
--- a/apps/website/templates/RacesTemplate.tsx
+++ b/apps/website/templates/RacesTemplate.tsx
@@ -4,13 +4,13 @@ import React from 'react';
 import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Container } from '@/ui/Container';
-import { RaceFilterModal } from '@/components/races/RaceFilterModal';
+import { RaceFilterModal } from '@/ui/RaceFilterModal';
 import type { RacesViewData } from '@/lib/view-data/RacesViewData';
-import { RacePageHeader } from '@/components/races/RacePageHeader';
-import { LiveRacesBanner } from '@/components/races/LiveRacesBanner';
-import { RaceFilterBar } from '@/components/races/RaceFilterBar';
-import { RaceList } from '@/components/races/RaceList';
-import { RaceSidebar } from '@/components/races/RaceSidebar';
+import { RacePageHeader } from '@/ui/RacePageHeader';
+import { LiveRacesBanner } from '@/ui/LiveRacesBanner';
+import { RaceFilterBar } from '@/ui/RaceFilterBar';
+import { RaceList } from '@/ui/RaceList';
+import { RaceSidebar } from '@/ui/RaceSidebar';
 import { Grid } from '@/ui/Grid';
 import { GridItem } from '@/ui/GridItem';

--- a/apps/website/templates/TeamDetailTemplate.tsx
+++ b/apps/website/templates/TeamDetailTemplate.tsx
@@ -1,8 +1,9 @@
 'use client';

-import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
+import React from 'react';
+import { Breadcrumbs } from '@/ui/Breadcrumbs';
 import { SlotTemplates } from '@/components/sponsors/SlotTemplates';
-import SponsorInsightsCard from '@/components/sponsors/SponsorInsightsCard';
+import { SponsorInsightsCard } from '@/components/sponsors/SponsorInsightsCard';
 import { useSponsorMode } from '@/hooks/sponsor/useSponsorMode';
 import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
@@ -13,11 +14,12 @@ import { GridItem } from '@/ui/GridItem';
 import { Heading } from '@/ui/Heading';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
+import { HorizontalStatItem } from '@/ui/HorizontalStatItem';

-import TeamAdmin from '@/components/teams/TeamAdmin';
-import { TeamHero } from '@/components/teams/TeamHero';
-import TeamRoster from '@/components/teams/TeamRoster';
-import TeamStandings from '@/components/teams/TeamStandings';
+import { TeamAdmin } from '@/components/teams/TeamAdmin';
+import { TeamHero } from '@/ui/TeamHero';
+import { TeamRoster } from '@/components/teams/TeamRoster';
+import { TeamStandings } from '@/components/teams/TeamStandings';
 import type { TeamDetailViewData } from '@/lib/view-data/TeamDetailViewData';

 type Tab = 'overview' | 'roster' | 'standings' | 'admin';
@@ -64,7 +66,7 @@ export function TeamDetailTemplate({
      <Container size="md" py={12}>
        <Card>
          <Stack align="center" py={12} gap={6}>
-            <Box style={{ textAlign: 'center' }}>
+            <Box textAlign="center">
              <Heading level={1}>Team Not Found</Heading>
              <Text color="text-gray-400" block mt={2}>
                The team you're looking for doesn't exist or has been disbanded.
@@ -111,28 +113,29 @@ export function TeamDetailTemplate({
            slots={SlotTemplates.team(true, true, 500, 250)}
            trustScore={90}
            monthlyActivity={85}
+            onNavigate={(href) => window.location.href = href}
          />
        )}

        <TeamHero 
-          team={viewData.team} 
+          team={{
+            ...viewData.team,
+            leagues: viewData.team.leagues.map(id => ({ id }))
+          }} 
          memberCount={viewData.memberships.length} 
          onUpdate={onUpdate} 
        />

        {/* Tabs */}
-        <Box style={{ borderBottom: '1px solid #262626' }}>
+        <Box borderBottom={true} borderColor="border-charcoal-outline">
          <Stack direction="row" gap={6}>
            {visibleTabs.map((tab) => (
              <Box
                key={tab.id}
                onClick={() => onTabChange(tab.id)}
                pb={3}
-                style={{ 
-                  cursor: 'pointer',
-                  borderBottom: activeTab === tab.id ? '2px solid #3b82f6' : '2px solid transparent',
-                  color: activeTab === tab.id ? '#3b82f6' : '#9ca3af'
-                }}
+                cursor="pointer"
+                className={`transition-all ${activeTab === tab.id ? 'border-b-2 border-primary-blue text-primary-blue' : 'border-b-2 border-transparent text-gray-400'}`}
              >
                <Text weight="medium">{tab.label}</Text>
              </Box>
@@ -159,15 +162,15 @@ export function TeamDetailTemplate({
                      <Heading level={2}>Quick Stats</Heading>
                    </Box>
                    <Stack gap={3}>
-                      <StatItem label="Members" value={viewData.memberships.length.toString()} color="text-primary-blue" />
+                      <HorizontalStatItem label="Members" value={viewData.memberships.length.toString()} color="text-primary-blue" />
                      {viewData.team.category && (
-                        <StatItem label="Category" value={viewData.team.category} color="text-purple-400" />
+                        <HorizontalStatItem label="Category" value={viewData.team.category} color="text-purple-400" />
                      )}
                      {viewData.team.leagues && viewData.team.leagues.length > 0 && (
-                        <StatItem label="Leagues" value={viewData.team.leagues.length.toString()} color="text-green-400" />
+                        <HorizontalStatItem label="Leagues" value={viewData.team.leagues.length.toString()} color="text-green-400" />
                      )}
                      {viewData.team.createdAt && (
-                        <StatItem
+                        <HorizontalStatItem
                          label="Founded"
                          value={new Date(viewData.team.createdAt).toLocaleDateString('en-US', {
                            month: 'short',
@@ -186,7 +189,7 @@ export function TeamDetailTemplate({
                  <Heading level={2}>Recent Activity</Heading>
                </Box>
                <Box py={8}>
-                  <Text color="text-gray-400" block style={{ textAlign: 'center' }}>No recent activity to display</Text>
+                  <Text color="text-gray-400" block align="center">No recent activity to display</Text>
                </Box>
              </Card>
            </Stack>
--- a/apps/website/templates/TeamLeaderboardTemplate.tsx
+++ b/apps/website/templates/TeamLeaderboardTemplate.tsx
@@ -9,11 +9,11 @@ import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Container } from '@/ui/Container';
 import { Icon } from '@/ui/Icon';
-import { Surface } from '@/ui/Surface';
-import TopThreePodium from '@/components/teams/TopThreePodium';
+import { ModalIcon } from '@/ui/ModalIcon';
+import { TeamPodium } from '@/ui/TeamPodium';
 import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
-import TeamRankingsFilter from '@/components/TeamRankingsFilter';
-import { TeamRankingsTable } from '@/components/teams/TeamRankingsTable';
+import { TeamFilter } from '@/ui/TeamFilter';
+import { TeamRankingsTable } from '@/ui/TeamRankingsTable';

 type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
 type SortBy = 'rating' | 'wins' | 'winRate' | 'races';
@@ -24,19 +24,19 @@ interface TeamLeaderboardTemplateProps {
  filterLevel: SkillLevel | 'all';
  sortBy: SortBy;
  onSearchChange: (query: string) => void;
-  onFilterLevelChange: (level: SkillLevel | 'all') => void;
+  filterLevelChange: (level: SkillLevel | 'all') => void;
  onSortChange: (sort: SortBy) => void;
  onTeamClick: (id: string) => void;
  onBackToTeams: () => void;
 }

-export default function TeamLeaderboardTemplate({
+export function TeamLeaderboardTemplate({
  teams,
  searchQuery,
  filterLevel,
  sortBy,
  onSearchChange,
-  onFilterLevelChange,
+  filterLevelChange,
  onSortChange,
  onTeamClick,
  onBackToTeams,
@@ -82,9 +82,12 @@ export default function TeamLeaderboardTemplate({
          </Box>

          <Stack direction="row" align="center" gap={4}>
-            <Surface variant="muted" rounded="xl" padding={3} style={{ background: 'linear-gradient(to bottom right, rgba(250, 204, 21, 0.2), rgba(217, 119, 6, 0.1))', border: '1px solid rgba(250, 204, 21, 0.3)' }}>
-              <Icon icon={Award} size={7} color="#facc15" />
-            </Surface>
+            <ModalIcon 
+              icon={Award} 
+              color="text-yellow-400" 
+              bgColor="bg-yellow-400/10" 
+              borderColor="border-yellow-400/30" 
+            />
            <Box>
              <Heading level={1}>Team Leaderboard</Heading>
              <Text color="text-gray-400" block mt={1}>Rankings of all teams by performance metrics</Text>
@@ -93,18 +96,18 @@ export default function TeamLeaderboardTemplate({
        </Box>

        {/* Filters and Search */}
-        <TeamRankingsFilter
+        <TeamFilter
          searchQuery={searchQuery}
          onSearchChange={onSearchChange}
          filterLevel={filterLevel}
-          onFilterLevelChange={onFilterLevelChange}
+          onFilterLevelChange={filterLevelChange}
          sortBy={sortBy}
          onSortChange={onSortChange}
        />

        {/* Podium for Top 3 */}
        {sortBy === 'rating' && filterLevel === 'all' && !searchQuery && filteredAndSortedTeams.length >= 3 && (
-          <TopThreePodium teams={filteredAndSortedTeams} onClick={onTeamClick} />
+          <TeamPodium teams={filteredAndSortedTeams} onClick={onTeamClick} />
        )}

        {/* Leaderboard Table */}
--- a/apps/website/templates/TeamsTemplate.tsx
+++ b/apps/website/templates/TeamsTemplate.tsx
@@ -2,7 +2,7 @@

 import React from 'react';
 import { Users } from 'lucide-react';
-import { TeamLeaderboardPreview } from '@/components/teams/TeamLeaderboardPreview';
+import { TeamLeaderboardPreview } from '@/ui/TeamLeaderboardPreviewWrapper';
 import { Button } from '@/ui/Button';
 import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
@@ -10,8 +10,8 @@ import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
 import { Container } from '@/ui/Container';
 import { Grid } from '@/ui/Grid';
-import { TeamCard } from '@/components/teams/TeamCard';
-import { EmptyState } from '@/components/shared/state/EmptyState';
+import { TeamCard } from '@/ui/TeamCardWrapper';
+import { EmptyState } from '@/ui/EmptyState';
 import type { TeamSummaryData, TeamsViewData } from '@/lib/view-data/TeamsViewData';

 interface TeamsTemplateProps {
--- a/apps/website/templates/auth/LoginTemplate.tsx
+++ b/apps/website/templates/auth/LoginTemplate.tsx
@@ -23,8 +23,8 @@ import { Surface } from '@/ui/Surface';
 import { Icon } from '@/ui/Icon';
 import { LoadingSpinner } from '@/ui/LoadingSpinner';
 import { EnhancedFormError } from '@/components/errors/EnhancedFormError';
-import UserRolesPreview from '@/components/auth/UserRolesPreview';
-import AuthWorkflowMockup from '@/components/auth/AuthWorkflowMockup';
+import { UserRolesPreview } from '@/components/auth/UserRolesPreview';
+import { AuthWorkflowMockup } from '@/components/auth/AuthWorkflowMockup';
 import { LoginViewData } from '@/lib/builders/view-data/types/LoginViewData';
 import { FormState } from '@/lib/builders/view-data/types/FormState';