website refactor
This commit is contained in:
@@ -1,77 +1,45 @@
|
||||
import { AppFooter } from '@/components/app/AppFooter';
|
||||
import { Grid } from '@/ui/Grid';
|
||||
import { Surface } from '@/ui/Surface';
|
||||
import { Container } from '@/ui/Container';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Link } from '@/ui/Link';
|
||||
import { BrandMark } from '@/ui/BrandMark';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { BrandMark } from '@/ui/BrandMark';
|
||||
|
||||
export interface GlobalFooterViewData {}
|
||||
|
||||
export function GlobalFooterTemplate(_props: GlobalFooterViewData) {
|
||||
return (
|
||||
<AppFooter>
|
||||
<Grid cols={{ base: 1, md: 4 }} gap={12}>
|
||||
<Stack colSpan={{ base: 1, md: 2 }} gap={6}>
|
||||
<Stack direction="row" align="center" gap={4}>
|
||||
<Surface as="footer" variant="muted" borderTop paddingY={6}>
|
||||
<Container size="full">
|
||||
<Box display="flex" flexDirection={{ base: 'col', md: 'row' }} alignItems="center" justifyContent="between" gap={4}>
|
||||
|
||||
{/* Left: Identity */}
|
||||
<Stack direction="row" align="center" gap={3}>
|
||||
<BrandMark />
|
||||
<Box display={{ base: 'none', sm: 'flex' }} alignItems="center" gap={2} borderLeft borderColor="var(--ui-color-border-default)" pl={4}>
|
||||
<Box w="4px" h="4px" rounded="full" bg="var(--ui-color-intent-primary)" animate="pulse" />
|
||||
<Text size="xs" variant="low" weight="bold" font="mono" letterSpacing="0.1em">
|
||||
INFRASTRUCTURE
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Stack maxWidth="sm">
|
||||
<Text variant="low" size="sm">
|
||||
The professional infrastructure for serious sim racing.
|
||||
Precision telemetry, automated results, and elite league management.
|
||||
<Text size="xs" variant="low" font="mono" uppercase letterSpacing="wider">
|
||||
// Infrastructure
|
||||
</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<Stack gap={4}>
|
||||
<Text size="xs" weight="bold" variant="high" uppercase letterSpacing="wider">PLATFORM</Text>
|
||||
<Stack as="ul" direction="col" gap={2}>
|
||||
<Stack as="li">
|
||||
<Link href="/leagues" variant="secondary">
|
||||
Leagues
|
||||
</Link>
|
||||
</Stack>
|
||||
<Stack as="li">
|
||||
<Link href="/teams" variant="secondary">
|
||||
Teams
|
||||
</Link>
|
||||
</Stack>
|
||||
<Stack as="li">
|
||||
<Link href="/leaderboards" variant="secondary">
|
||||
Leaderboards
|
||||
</Link>
|
||||
</Stack>
|
||||
|
||||
{/* Center: Technical Links */}
|
||||
<Stack direction="row" gap={6} display={{ base: 'none', md: 'flex' }}>
|
||||
<Link href="/leagues" variant="secondary" size="xs" underline="none">LEAGUES</Link>
|
||||
<Link href="/teams" variant="secondary" size="xs" underline="none">TEAMS</Link>
|
||||
<Link href="/docs" variant="secondary" size="xs" underline="none">DOCUMENTATION</Link>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<Stack gap={4}>
|
||||
<Text size="xs" weight="bold" variant="high" uppercase letterSpacing="wider">SUPPORT</Text>
|
||||
<Stack as="ul" direction="col" gap={2}>
|
||||
<Stack as="li">
|
||||
<Link href="/docs" variant="secondary">
|
||||
Documentation
|
||||
</Link>
|
||||
</Stack>
|
||||
<Stack as="li">
|
||||
<Link href="/status" variant="secondary">
|
||||
System Status
|
||||
</Link>
|
||||
</Stack>
|
||||
<Stack as="li">
|
||||
<Link href="/contact" variant="secondary">
|
||||
Contact
|
||||
</Link>
|
||||
</Stack>
|
||||
|
||||
{/* Right: System Status */}
|
||||
<Stack direction="row" align="center" gap={4}>
|
||||
<Box display="flex" alignItems="center" gap={2}>
|
||||
<Box w="6px" h="6px" rounded="full" bg="var(--ui-color-intent-success)" animate="pulse" />
|
||||
<Text size="xs" variant="low" font="mono">SYSTEM NOMINAL</Text>
|
||||
</Box>
|
||||
<Text size="xs" variant="low" font="mono">v1.0.0</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</AppFooter>
|
||||
|
||||
</Box>
|
||||
</Container>
|
||||
</Surface>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -41,16 +41,17 @@ export function RootAppShellTemplate({ children }: RootAppShellViewData) {
|
||||
</TopNav>
|
||||
</ControlBar>
|
||||
|
||||
<Box display="flex" flexGrow={1}>
|
||||
<Box display="flex" flexGrow={1} width="full">
|
||||
{showSidebar && <GlobalSidebarTemplate />}
|
||||
|
||||
<Box as="main" display="flex" flexGrow={1} flexDirection="col">
|
||||
<Box as="main" display="flex" flexGrow={1} flexDirection="col" minWidth="0">
|
||||
<ContentViewport fullWidth={!showSidebar}>
|
||||
{children}
|
||||
</ContentViewport>
|
||||
<GlobalFooterTemplate />
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<GlobalFooterTemplate />
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -21,11 +21,9 @@ export const ContentViewport = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<Box flexGrow={1}>
|
||||
<Container size={fullWidth ? 'full' : 'xl'}>
|
||||
<Box paddingY={paddingMap[padding]}>
|
||||
{children}
|
||||
</Box>
|
||||
<Box flexGrow={1} width="full">
|
||||
<Container size={fullWidth ? 'full' : 'xl'} py={paddingMap[padding]}>
|
||||
{children}
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user