website refactor

apps/website/templates/LeaguesTemplate.tsx

@@ -3,7 +3,9 @@
 import { LeagueCard } from '@/components/leagues/LeagueCardWrapper';
 import type { LeaguesViewData } from '@/lib/view-data/LeaguesViewData';
 import { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';
+import { LEAGUE_CATEGORIES, CategoryId, LeagueCategory } from '@/lib/config/leagueCategories';
 import { PageHeader } from '@/ui/PageHeader';
+import { Heading } from '@/ui/Heading';
 import { Input } from '@/ui/Input';
 import { Button } from '@/ui/Button';
 import { Group } from '@/ui/Group';
@@ -22,39 +24,19 @@ import {
   Search,
   Trophy,
   Filter,
+  Sparkles,
   type LucideIcon,
 } from 'lucide-react';
 import React from 'react';
 import { TemplateProps } from '@/lib/contracts/components/ComponentContracts';
 
-export type CategoryId =
-  | 'all'
-  | 'driver'
-  | 'team'
-  | 'nations'
-  | 'trophy'
-  | 'new'
-  | 'popular'
-  | 'openSlots'
-  | 'endurance'
-  | 'sprint';
-
-export interface Category {
-  id: CategoryId;
-  label: string;
-  icon: LucideIcon;
-  description: string;
-  filter: (league: LeaguesViewData['leagues'][number]) => boolean;
-  color?: string;
-}
-
 interface LeaguesTemplateProps extends TemplateProps<LeaguesViewData> {
   searchQuery: string;
   onSearchChange: (query: string) => void;
   activeCategory: CategoryId;
   onCategoryChange: (id: CategoryId) => void;
   filteredLeagues: LeaguesViewData['leagues'];
-  categories: Category[];
+  categories: LeagueCategory[];
   onCreateLeague: () => void;
   onLeagueClick: (id: string) => void;
   onClearFilters: () => void;
@@ -114,6 +96,30 @@ export function LeaguesTemplate({
           />
         </FeatureGrid>
 
+        {/* Featured Leagues Section */}
+        {viewData.leagues.filter(l => (l.usedDriverSlots ?? 0) > 20).length > 0 && (
+          <Stack gap={4}>
+            <Group align="center" gap={2}>
+              <Icon icon={Sparkles} size={5} intent="warning" />
+              <Heading level={3} weight="bold" uppercase letterSpacing="wider">Featured Leagues</Heading>
+            </Group>
+            <Surface variant="dark" padding={6} rounded="2xl" border borderColor="var(--ui-color-intent-warning-muted)">
+              <FeatureGrid columns={{ base: 1, md: 2 }} gap={6}>
+                {viewData.leagues
+                  .filter(l => (l.usedDriverSlots ?? 0) > 20)
+                  .slice(0, 2)
+                  .map((league) => (
+                    <LeagueCard
+                      key={`featured-${league.id}`}
+                      league={league as unknown as LeagueSummaryViewModel}
+                      onClick={() => onLeagueClick(league.id)}
+                    />
+                  ))}
+              </FeatureGrid>
+            </Surface>
+          </Stack>
+        )}
+
         {/* Control Bar */}
         <ControlBar
           leftContent={