website refactor

apps/website/components/home/LeagueIdentityPreview.tsx

@@ -12,11 +12,22 @@ import { Box } from '@/ui/Box';
 import { StatusBadge } from '@/ui/StatusBadge';
 import { Trophy, Globe, Settings2, Palette, ShieldCheck, BarChart3 } from 'lucide-react';
 
+interface LeagueIdentityPreviewProps {
+  league?: {
+    id: string;
+    name: string;
+    description: string;
+  };
+}
+
 /**
  * LeagueIdentityPreview - Radically redesigned for "Modern Precision" and "Dieter Rams" style.
  * Focuses on the professional identity and deep customization options for admins.
  */
-export function LeagueIdentityPreview() {
+export function LeagueIdentityPreview({ league }: LeagueIdentityPreviewProps) {
+  const leagueName = league?.name || 'Apex Racing League';
+  const subdomain = league ? `${league.name.toLowerCase().replace(/\s+/g, '')}.gridpilot.racing` : 'apex.gridpilot.racing';
+
   return (
     <Section variant="default" py={32}>
       <Box>
@@ -48,7 +59,7 @@ export function LeagueIdentityPreview() {
                       <Globe size={20} className="text-[var(--ui-color-text-low)]" />
                       <Stack gap={1}>
                         <Text weight="bold">Custom Subdomains</Text>
-                        <Text size="xs" variant="low">yourleague.gridpilot.racing</Text>
+                        <Text size="xs" variant="low">{subdomain}</Text>
                       </Stack>
                     </Group>
                   </Panel>
@@ -77,8 +88,8 @@ export function LeagueIdentityPreview() {
                         <Trophy size={20} className="text-[var(--ui-color-text-low)]" />
                       </Box>
                       <Stack gap={0}>
-                        <Text weight="bold" size="sm">Apex Racing League</Text>
-                        <Text size="xs" variant="low">apex.gridpilot.racing</Text>
+                        <Text weight="bold" size="sm">{leagueName}</Text>
+                        <Text size="xs" variant="low">{subdomain}</Text>
                       </Stack>
                     </Group>
                   </Panel>