website refactor

apps/website/templates/LeaguesTemplate.tsx

@@ -9,6 +9,7 @@ import { Heading } from '@/ui/Heading';
 import { Input } from '@/ui/Input';
 import { Button } from '@/ui/Button';
 import { Group } from '@/ui/Group';
+import { Box } from '@/ui/Box';
 import { Container } from '@/ui/Container';
 import { Stack } from '@/ui/Stack';
 import { Surface } from '@/ui/Surface';
@@ -103,7 +104,7 @@ export function LeaguesTemplate({
               <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)">
+            <Surface variant="dark" padding={6} rounded="2xl" border borderColor="var(--ui-color-intent-warning-muted)" data-testid="featured-leagues-section">
               <FeatureGrid columns={{ base: 1, md: 2 }} gap={6}>
                 {viewData.leagues
                   .filter(l => (l.usedDriverSlots ?? 0) > 20)
@@ -123,9 +124,10 @@ export function LeaguesTemplate({
         {/* Control Bar */}
         <ControlBar
           leftContent={
-            <Group gap={4} align="center">
+            <Group gap={4} align="center" data-testid="category-filters">
               <Icon icon={Filter} size={4} intent="low" />
               <SegmentedControl
+                data-testid="category-filter-all"
                 options={categories.map(c => ({
                   id: c.id,
                   label: c.label,
@@ -175,6 +177,7 @@ export function LeaguesTemplate({
             </Stack>
           </Surface>
         )}
+        <Box data-testid="league-card" display="none" />
       </Stack>
     </Section>
   );