From 3556db494fa768c2d4e57aedf7f133e10e9b7d9e Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Tue, 20 Jan 2026 01:30:17 +0100
Subject: [PATCH] website refactor

---
 .../leagues}/LeaguesPageClient.tsx            |  25 ++--
 apps/website/app/leagues/page.tsx             |   2 +-
 .../website/components/leagues/LeagueCard.tsx | 114 +++++++-------
 .../components/leagues/LeagueCardWrapper.tsx  |  10 +-
 apps/website/templates/LeaguesTemplate.tsx    | 139 ++++++++++--------
 apps/website/ui/LeagueCard.tsx                |  82 ++++++++---
 6 files changed, 210 insertions(+), 162 deletions(-)
 rename apps/website/{client-wrapper => app/leagues}/LeaguesPageClient.tsx (86%)

diff --git a/apps/website/client-wrapper/LeaguesPageClient.tsx b/apps/website/app/leagues/LeaguesPageClient.tsx
similarity index 86%
rename from apps/website/client-wrapper/LeaguesPageClient.tsx
rename to apps/website/app/leagues/LeaguesPageClient.tsx
index 82f5379ae..d61799af8 100644
--- a/apps/website/client-wrapper/LeaguesPageClient.tsx
+++ b/apps/website/app/leagues/LeaguesPageClient.tsx
@@ -24,37 +24,35 @@ const CATEGORIES: Category[] = [
     id: 'all',
     label: 'All',
     icon: Globe,
-    description: 'Browse all available leagues',
+    description: 'All available competition infrastructure.',
     filter: () => true,
   },
   {
     id: 'popular',
     label: 'Popular',
     icon: Flame,
-    description: 'Most active leagues right now',
+    description: 'High utilization infrastructure.',
     filter: (league) => {
       const fillRate = (league.usedDriverSlots ?? 0) / (league.maxDrivers ?? 1);
       return fillRate > 0.7;
     },
-    color: 'text-orange-400',
   },
   {
     id: 'new',
     label: 'New',
     icon: Sparkles,
-    description: 'Fresh leagues looking for members',
+    description: 'Recently deployed infrastructure.',
     filter: (league) => {
       const oneWeekAgo = new Date();
       oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
       return new Date(league.createdAt) > oneWeekAgo;
     },
-    color: 'text-green-500',
   },
   {
     id: 'openSlots',
-    label: 'Open Slots',
+    label: 'Open',
     icon: Target,
-    description: 'Leagues with available spots',
+    description: 'Infrastructure with available capacity.',
     filter: (league) => {
       if (league.maxTeams && league.maxTeams > 0) {
         const usedTeams = league.usedTeamSlots ?? 0;
@@ -64,41 +62,40 @@ const CATEGORIES: Category[] = [
       const max = league.maxDrivers ?? 0;
       return max > 0 && used < max;
     },
-    color: 'text-cyan-400',
   },
   {
     id: 'driver',
     label: 'Driver',
     icon: Trophy,
-    description: 'Compete as an individual',
+    description: 'Individual competition format.',
     filter: (league) => league.scoring?.primaryChampionshipType === 'driver',
   },
   {
     id: 'team',
     label: 'Team',
     icon: Users,
-    description: 'Race together as a team',
+    description: 'Team-based competition format.',
     filter: (league) => league.scoring?.primaryChampionshipType === 'team',
   },
   {
     id: 'nations',
     label: 'Nations',
     icon: Flag,
-    description: 'Represent your country',
+    description: 'National representation format.',
     filter: (league) => league.scoring?.primaryChampionshipType === 'nations',
   },
   {
     id: 'trophy',
     label: 'Trophy',
     icon: Award,
-    description: 'Special championship events',
+    description: 'Special event infrastructure.',
     filter: (league) => league.scoring?.primaryChampionshipType === 'trophy',
   },
   {
     id: 'endurance',
     label: 'Endurance',
     icon: Timer,
-    description: 'Long-distance racing',
+    description: 'Long-duration competition.',
     filter: (league) =>
       league.scoring?.scoringPresetId?.includes('endurance') ??
       league.timingSummary?.includes('h Race') ??
@@ -108,7 +105,7 @@ const CATEGORIES: Category[] = [
     id: 'sprint',
     label: 'Sprint',
     icon: Clock,
-    description: 'Quick, intense races',
+    description: 'Short-duration competition.',
     filter: (league) =>
       (league.scoring?.scoringPresetId?.includes('sprint') ?? false) &&
       !(league.scoring?.scoringPresetId?.includes('endurance') ?? false),
diff --git a/apps/website/app/leagues/page.tsx b/apps/website/app/leagues/page.tsx
index b53b5bea7..b06a7e449 100644
--- a/apps/website/app/leagues/page.tsx
+++ b/apps/website/app/leagues/page.tsx
@@ -1,5 +1,5 @@
 import { notFound } from 'next/navigation';
-import { LeaguesPageClient } from '@/client-wrapper/LeaguesPageClient';
+import { LeaguesPageClient } from './LeaguesPageClient';
 import { LeaguesPageQuery } from '@/lib/page-queries/LeaguesPageQuery';
 
 export default async function Page() {
diff --git a/apps/website/components/leagues/LeagueCard.tsx b/apps/website/components/leagues/LeagueCard.tsx
index f853600fc..067956764 100644
--- a/apps/website/components/leagues/LeagueCard.tsx
+++ b/apps/website/components/leagues/LeagueCard.tsx
@@ -8,8 +8,9 @@ import { Text } from '@/ui/Text';
 import { Box } from '@/ui/Box';
 import { Group } from '@/ui/Group';
 import { Surface } from '@/ui/Surface';
+import { Stack } from '@/ui/Stack';
 import { LeagueCard as UILeagueCard, LeagueCardStats, LeagueCardFooter } from '@/ui/LeagueCard';
-import { Calendar as LucideCalendar } from 'lucide-react';
+import { Calendar, Users, Activity } from 'lucide-react';
 import React, { ReactNode } from 'react';
 
 interface LeagueCardProps {
@@ -54,80 +55,81 @@ export function LeagueCard({
       coverUrl={coverUrl}
       logo={
         <Surface 
-          width="3rem" 
-          height="3rem" 
-          rounded="md" 
+          width="3.5rem" 
+          height="3.5rem" 
+          rounded="lg" 
           overflow="hidden" 
           border 
-          variant="dark"
+          variant="precision"
         >
           {logoUrl ? (
             <Image
               src={logoUrl}
               alt={`${name} logo`}
-              width={48}
-              height={48}
+              width={56}
+              height={56}
               objectFit="cover"
             />
           ) : (
-            <PlaceholderImage size={48} />
+            <PlaceholderImage size={56} />
           )}
         </Surface>
       }
       badges={
-        <React.Fragment>
+        <Group gap={2}>
           {badges}
           {championshipBadge}
-        </React.Fragment>
+        </Group>
       }
     >
-      <Box marginBottom={1}>
-        <Group gap={2}>
-          <Box width="0.25rem" height="1rem" bg="var(--ui-color-intent-primary)" />
-          <Heading level={3} weight="bold" truncate>{name}</Heading>
-        </Group>
-      </Box>
-      
-      <Text size="xs" variant="low" lineClamp={2} style={{ height: '2.5rem' }} block leading="relaxed" marginBottom={4}>
-        {description || 'No description available'}
-      </Text>
-
-      <LeagueCardStats
-        label={slotLabel}
-        value={`${usedSlots}/${maxSlots || '∞'}`}
-        percentage={fillPercentage}
-        intent={fillPercentage >= 90 ? 'warning' : fillPercentage >= 70 ? 'primary' : 'success'}
-      />
-
-      {hasOpenSlots && (
-        <Box marginBottom={4}>
-          <Surface 
-            display="flex" 
-            alignItems="center" 
-            gap={1.5} 
-            paddingX={2} 
-            paddingY={1} 
-            bg="rgba(25, 140, 255, 0.05)" 
-            border="1px solid rgba(25, 140, 255, 0.2)" 
-            rounded="sm" 
-            width="fit-content"
-          >
-            <Box width="0.375rem" height="0.375rem" rounded="full" bg="var(--ui-color-intent-primary)" />
-            <Text size="xs" variant="primary" weight="bold" uppercase>{openSlotsCount} OPEN</Text>
-          </Surface>
-        </Box>
-      )}
-
-      <LeagueCardFooter>
-        {timingSummary && (
-          <Group gap={2}>
-            <Icon icon={LucideCalendar} size={3} intent="low" />
-            <Text size="xs" variant="low" font="mono">
-              {timingSummary.split('•')[1]?.trim() || timingSummary}
-            </Text>
+      <Stack gap={4} fullHeight>
+        <Stack gap={1}>
+          <Group gap={2} align="center">
+            <Box width="2px" height="1rem" bg="var(--ui-color-intent-telemetry)" />
+            <Heading level={3} weight="bold" truncate>{name}</Heading>
           </Group>
-        )}
-      </LeagueCardFooter>
+          <Text size="xs" variant="low" lineClamp={2} block leading="relaxed">
+            {description || 'No infrastructure description provided.'}
+          </Text>
+        </Stack>
+
+        <Box>
+          <LeagueCardStats
+            label={slotLabel}
+            value={`${usedSlots} / ${maxSlots || '∞'}`}
+            percentage={fillPercentage}
+            intent={fillPercentage >= 90 ? 'warning' : fillPercentage >= 70 ? 'primary' : 'success'}
+          />
+          
+          {hasOpenSlots && (
+            <Group gap={2} align="center">
+              <Icon icon={Activity} size={3} intent="success" />
+              <Text size="xs" variant="success" weight="bold" uppercase font="mono">
+                {openSlotsCount} slots available
+              </Text>
+            </Group>
+          )}
+        </Box>
+
+        <LeagueCardFooter>
+          <Stack gap={2}>
+            {timingSummary && (
+              <Group gap={2}>
+                <Icon icon={Calendar} size={3} intent="low" />
+                <Text size="xs" variant="low" font="mono">
+                  {timingSummary.split('•')[1]?.trim() || timingSummary}
+                </Text>
+              </Group>
+            )}
+            <Group gap={2}>
+              <Icon icon={Users} size={3} intent="low" />
+              <Text size="xs" variant="low" font="mono">
+                {usedSlots} active participants
+              </Text>
+            </Group>
+          </Stack>
+        </LeagueCardFooter>
+      </Stack>
     </UILeagueCard>
   );
 }
diff --git a/apps/website/components/leagues/LeagueCardWrapper.tsx b/apps/website/components/leagues/LeagueCardWrapper.tsx
index f51bd8022..a2d435b0a 100644
--- a/apps/website/components/leagues/LeagueCardWrapper.tsx
+++ b/apps/website/components/leagues/LeagueCardWrapper.tsx
@@ -5,6 +5,8 @@ import {
   Flag,
   Award,
   Sparkles,
+  Gamepad2,
+  Layers,
 } from 'lucide-react';
 import type { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';
 import { getMediaUrl } from '@/lib/utilities/media';
@@ -152,24 +154,24 @@ export function LeagueCard({ league, onClick }: LeagueCardProps) {
       badges={
         <>
           {isNew && (
-            <Badge variant="success" icon={Sparkles}>
+            <Badge variant="success" icon={Sparkles} size="sm">
               NEW
             </Badge>
           )}
           {league.scoring?.gameName && (
-            <Badge variant={gameVariant}>
+            <Badge variant={gameVariant} icon={Gamepad2} size="sm">
               {league.scoring.gameName}
             </Badge>
           )}
           {league.category && (
-            <Badge variant={categoryVariant}>
+            <Badge variant={categoryVariant} icon={Layers} size="sm">
               {categoryLabel}
             </Badge>
           )}
         </>
       }
       championshipBadge={
-        <Badge variant="default" icon={ChampionshipIcon}>
+        <Badge variant="outline" icon={ChampionshipIcon} size="sm">
           {championshipLabel}
         </Badge>
       }
diff --git a/apps/website/templates/LeaguesTemplate.tsx b/apps/website/templates/LeaguesTemplate.tsx
index 5de2d90d4..83118d228 100644
--- a/apps/website/templates/LeaguesTemplate.tsx
+++ b/apps/website/templates/LeaguesTemplate.tsx
@@ -3,7 +3,7 @@
 import { LeagueCard } from '@/components/leagues/LeagueCardWrapper';
 import type { LeaguesViewData } from '@/lib/view-data/LeaguesViewData';
 import { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';
-import { Heading } from '@/ui/Heading';
+import { PageHeader } from '@/ui/PageHeader';
 import { Input } from '@/ui/Input';
 import { Button } from '@/ui/Button';
 import { Group } from '@/ui/Group';
@@ -12,11 +12,16 @@ import { Container } from '@/ui/Container';
 import { Text } from '@/ui/Text';
 import { Icon } from '@/ui/Icon';
 import { Section } from '@/ui/Section';
-import { StatusDot } from '@/ui/StatusDot';
+import { ControlBar } from '@/ui/ControlBar';
+import { SegmentedControl } from '@/ui/SegmentedControl';
+import { MetricCard } from '@/ui/MetricCard';
+import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
 import {
   Plus,
   Search,
   Trophy,
+  Filter,
   type LucideIcon,
 } from 'lucide-react';
 import React from 'react';
@@ -68,29 +73,14 @@ export function LeaguesTemplate({
   onClearFilters,
 }: LeaguesTemplateProps) {
   return (
-    <Container size="xl" py={12}>
-      <Group direction="column" gap={16} fullWidth>
-        {/* Hero */}
-        <Group direction={{ base: 'column', md: 'row' } as any} align={{ base: 'start', md: 'end' } as any} justify="between" gap={8} fullWidth>
-          <Group direction="column" gap={4}>
-            <Group direction="row" align="center" gap={3}>
-              <Icon icon={Trophy} size={6} intent="primary" />
-              <Text size="xs" weight="bold" uppercase letterSpacing="widest" color="text-primary-accent">Competition Hub</Text>
-            </Group>
-            <Heading level={1} size="5xl" weight="bold">
-              Find Your <Text as="span" color="text-primary-accent">Grid</Text>
-            </Heading>
-            <Text variant="low" maxWidth="md">
-              From casual sprints to epic endurance battles — discover the perfect league for your racing style.
-            </Text>
-          </Group>
-
-          <Group direction="row" align="center" gap={4}>
-            <Group direction="column" align="end">
-              <Text size="2xl" weight="bold" font="mono">{viewData.leagues.length}</Text>
-              <Text weight="bold" variant="low" uppercase letterSpacing="widest" size="xs">Active Leagues</Text>
-            </Group>
-            <StatusDot intent="telemetry" size="lg" />
+    <Container size="xl" py={8}>
+      <Stack gap={8}>
+        {/* Header Section */}
+        <PageHeader
+          icon={Trophy}
+          title="Leagues"
+          description="Infrastructure for competitive sim racing."
+          action={
             <Button 
               onClick={onCreateLeague}
               variant="primary"
@@ -99,40 +89,62 @@ export function LeaguesTemplate({
             >
               Create League
             </Button>
-          </Group>
-        </Group>
+          }
+        />
 
-        {/* Search & Filters */}
-        <Group direction="column" gap={8} fullWidth>
-          <Input
-            type="text"
-            placeholder="Search leagues by name, description, or game..."
-            value={searchQuery}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => onSearchChange(e.target.value)}
-            icon={<Search size={20} />}
+        {/* Stats Overview */}
+        <Grid cols={{ base: 1, md: 3 }} gap={4}>
+          <MetricCard 
+            label="Active Leagues" 
+            value={viewData.leagues.length} 
+            icon={Trophy}
+            intent="telemetry"
           />
+          <MetricCard 
+            label="Total Drivers" 
+            value={viewData.leagues.reduce((acc, l) => acc + (l.usedDriverSlots ?? 0), 0)} 
+            icon={Trophy}
+            intent="primary"
+          />
+          <MetricCard 
+            label="Open Slots" 
+            value={viewData.leagues.reduce((acc, l) => acc + Math.max(0, (l.maxDrivers ?? 0) - (l.usedDriverSlots ?? 0)), 0)} 
+            icon={Trophy}
+            intent="success"
+          />
+        </Grid>
 
-          <Group direction="row" wrap gap={2} fullWidth>
-            {categories.map((category) => {
-              const isActive = activeCategory === category.id;
-              const CategoryIcon = category.icon;
-              return (
-                <Button
-                  key={category.id}
-                  onClick={() => onCategoryChange(category.id)}
-                  variant={isActive ? 'primary' : 'secondary'}
-                  size="sm"
-                  icon={<CategoryIcon size={14} />}
-                >
-                  {category.label}
-                </Button>
-              );
-            })}
-          </Group>
-        </Group>
+        {/* Control Bar */}
+        <ControlBar
+          leftContent={
+            <Group gap={4} align="center">
+              <Icon icon={Filter} size={4} intent="low" />
+              <SegmentedControl
+                options={categories.map(c => ({
+                  id: c.id,
+                  label: c.label,
+                  icon: <Icon icon={c.icon} size={3} />
+                }))}
+                activeId={activeCategory}
+                onChange={(id) => onCategoryChange(id as CategoryId)}
+              />
+            </Group>
+          }
+        >
+          <Box width="300px">
+            <Input
+              type="text"
+              placeholder="Search infrastructure..."
+              value={searchQuery}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => onSearchChange(e.target.value)}
+              icon={<Search size={16} />}
+              size="sm"
+            />
+          </Box>
+        </ControlBar>
 
-        {/* Grid */}
-        <Group direction="column" fullWidth>
+        {/* Results */}
+        <Stack gap={6}>
           {filteredLeagues.length > 0 ? (
             <Grid cols={{ base: 1, md: 2, lg: 3 }} gap={6}>
               {filteredLeagues.map((league) => (
@@ -145,22 +157,23 @@ export function LeaguesTemplate({
             </Grid>
           ) : (
             <Section variant="dark" padding="lg">
-              <Group direction="column" align="center" justify="center" fullWidth>
+              <Stack align="center" justify="center" gap={4}>
                 <Icon icon={Search} size={12} intent="low" />
-                <Heading level={3} weight="bold">No Leagues Found</Heading>
-                <Text variant="low" size="sm">Try adjusting your search or filters</Text>
+                <Stack align="center" gap={1}>
+                  <Text size="lg" weight="bold">No results found</Text>
+                  <Text variant="low" size="sm">Adjust filters to find matching infrastructure.</Text>
+                </Stack>
                 <Button 
                   variant="secondary"
                   onClick={onClearFilters}
-                  style={{ marginTop: '1.5rem' }}
                 >
-                  Clear All Filters
+                  Reset Filters
                 </Button>
-              </Group>
+              </Stack>
             </Section>
           )}
-        </Group>
-      </Group>
+        </Stack>
+      </Stack>
     </Container>
   );
 }
diff --git a/apps/website/ui/LeagueCard.tsx b/apps/website/ui/LeagueCard.tsx
index 071be6783..0f8f10b7d 100644
--- a/apps/website/ui/LeagueCard.tsx
+++ b/apps/website/ui/LeagueCard.tsx
@@ -5,6 +5,8 @@ import { Card } from './Card';
 import { Icon } from './Icon';
 import { Image } from './Image';
 import { Text } from './Text';
+import { Stack } from './Stack';
+import { Group } from './Group';
 
 export interface LeagueCardProps {
   children: ReactNode;
@@ -17,23 +19,37 @@ export interface LeagueCardProps {
 export const LeagueCard = ({ children, onClick, coverUrl, logo, badges }: LeagueCardProps) => {
   return (
     <Card 
-      variant="dark" 
+      variant="precision" 
       onClick={onClick} 
-      style={{ position: 'relative', cursor: onClick ? 'pointer' : 'default', overflow: 'hidden', height: '100%' }}
+      style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
+      padding="none"
     >
-      <Box height="8rem" position="relative" style={{ overflow: 'hidden' }}>
-        <Image src={coverUrl} alt="Cover" fullWidth fullHeight objectFit="cover" style={{ opacity: 0.6 }} />
-        <Box position="absolute" inset={0} style={{ background: 'linear-gradient(to top, var(--ui-color-bg-base), transparent)' }} />
-        <Box position="absolute" top={3} left={3} display="flex" gap={2}>
-          {badges}
+      <Box height="10rem" position="relative" overflow="hidden">
+        <Image 
+          src={coverUrl} 
+          alt="Cover" 
+          fullWidth 
+          fullHeight 
+          objectFit="cover" 
+          style={{ opacity: 0.4, filter: 'grayscale(0.2)' }} 
+        />
+        <Box 
+          position="absolute" 
+          inset={0} 
+          style={{ background: 'linear-gradient(to top, var(--ui-color-bg-base), transparent)' }} 
+        />
+        <Box position="absolute" top={4} left={4}>
+          <Group gap={2}>
+            {badges}
+          </Group>
         </Box>
         {logo && (
-          <Box position="absolute" left={4} bottom={-6} zIndex={10}>
+          <Box position="absolute" left={6} bottom={-4} zIndex={10}>
             {logo}
           </Box>
         )}
       </Box>
-      <Box padding={4} paddingTop={8} display="flex" flexDirection="col" fullHeight>
+      <Box padding={6} paddingTop={10} display="flex" flexDirection="col" flex={1}>
         {children}
       </Box>
     </Card>
@@ -44,7 +60,7 @@ export interface LeagueCardStatsProps {
   label: string;
   value: string;
   percentage: number;
-  intent?: 'primary' | 'success' | 'warning';
+  intent?: 'primary' | 'success' | 'warning' | 'telemetry';
 }
 
 export const LeagueCardStats = ({ label, value, percentage, intent = 'primary' }: LeagueCardStatsProps) => {
@@ -52,17 +68,27 @@ export const LeagueCardStats = ({ label, value, percentage, intent = 'primary' }
     primary: 'var(--ui-color-intent-primary)',
     success: 'var(--ui-color-intent-success)',
     warning: 'var(--ui-color-intent-warning)',
+    telemetry: 'var(--ui-color-intent-telemetry)',
   };
 
   return (
-    <Box marginBottom={4}>
-      <Box display="flex" alignItems="center" justifyContent="between" marginBottom={1.5}>
-        <Text size="xs" variant="low" weight="bold" uppercase>{label}</Text>
-        <Text size="xs" variant="med" font="mono">{value}</Text>
-      </Box>
-      <Box height="4px" bg="var(--ui-color-bg-surface-muted)" rounded="full" style={{ overflow: 'hidden' }}>
-        <Box height="100%" bg={intentColors[intent]} style={{ width: `${Math.min(percentage, 100)}%` }} />
-      </Box>
+    <Box marginBottom={6}>
+      <Stack gap={2}>
+        <Group justify="between" align="end">
+          <Text size="xs" variant="low" weight="bold" uppercase letterSpacing="widest">{label}</Text>
+          <Text size="sm" variant="high" font="mono" weight="bold">{value}</Text>
+        </Group>
+        <Box height="2px" bg="var(--ui-color-bg-surface-muted)" rounded="full" overflow="hidden">
+          <Box 
+            height="100%" 
+            bg={intentColors[intent]} 
+            style={{ 
+              width: `${Math.min(percentage, 100)}%`,
+              boxShadow: `0 0 8px ${intentColors[intent]}44`
+            }} 
+          />
+        </Box>
+      </Stack>
     </Box>
   );
 };
@@ -72,11 +98,19 @@ export interface LeagueCardFooterProps {
 }
 
 export const LeagueCardFooter = ({ children }: LeagueCardFooterProps) => (
-  <Box marginTop="auto" paddingTop={3} style={{ borderTop: '1px solid var(--ui-color-border-muted)', opacity: 0.5 }} display="flex" alignItems="center" justifyContent="between">
-    {children}
-    <Box display="flex" alignItems="center" gap={1}>
-      <Text size="xs" variant="low" weight="bold" uppercase>VIEW</Text>
-      <Icon icon={ChevronRight} size={3} intent="low" />
-    </Box>
+  <Box 
+    marginTop="auto" 
+    paddingTop={4} 
+    style={{ borderTop: '1px solid var(--ui-color-border-muted)' }}
+  >
+    <Group justify="between" align="center">
+      <Box flex={1}>
+        {children}
+      </Box>
+      <Group gap={1} align="center">
+        <Text size="xs" variant="low" weight="bold" uppercase letterSpacing="widest">ACCESS</Text>
+        <Icon icon={ChevronRight} size={3} intent="low" />
+      </Group>
+    </Group>
   </Box>
 );