website refactor
This commit is contained in:
@@ -1,89 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Container } from '@/ui/Container';
|
||||
import { Grid } from '@/ui/Grid';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Link } from '@/ui/Link';
|
||||
import { Surface } from '@/ui/Surface';
|
||||
import { BrandMark } from '@/ui/BrandMark';
|
||||
import { Box } from '@/ui/Box';
|
||||
|
||||
interface AppFooterProps {
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* AppFooter is the bottom section of the application.
|
||||
* It follows the "Telemetry Workspace" structure: matte surface, thin separators, minimal.
|
||||
* Aligned with ControlBar (Header) design.
|
||||
*/
|
||||
export function AppFooter({ children }: AppFooterProps) {
|
||||
return (
|
||||
<Surface
|
||||
as="footer"
|
||||
variant="muted"
|
||||
paddingY={8}
|
||||
marginTop="auto"
|
||||
borderTop={true}
|
||||
>
|
||||
<Container size="xl">
|
||||
{children ? (
|
||||
children
|
||||
) : (
|
||||
<Grid cols={{ base: 1, md: 4 }} gap={12}>
|
||||
<Stack gap={4}>
|
||||
<Stack direction="row" align="center" gap={4}>
|
||||
<BrandMark />
|
||||
<Box display={{ base: 'none', sm: 'flex' }} alignItems="center" gap={2} borderLeft borderColor="[#23272B]" pl={4}>
|
||||
<Box w="4px" h="4px" rounded="full" bg="primary-accent" animate="pulse" />
|
||||
<Text size="xs" variant="low" weight="bold" font="mono" letterSpacing="0.1em">
|
||||
INFRASTRUCTURE
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Text size="sm" variant="low" maxWidth="xs">
|
||||
The ultimate companion for sim racers. Track your performance, manage your team, and compete in leagues.
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<Stack gap={4}>
|
||||
<Text size="xs" weight="bold" variant="high" uppercase letterSpacing="wider">Platform</Text>
|
||||
<Stack gap={2}>
|
||||
<Link href="/leagues" variant="secondary">Leagues</Link>
|
||||
<Link href="/teams" variant="secondary">Teams</Link>
|
||||
<Link href="/leaderboards" variant="secondary">Leaderboards</Link>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<Stack gap={4}>
|
||||
<Text size="xs" weight="bold" variant="high" uppercase letterSpacing="wider">Support</Text>
|
||||
<Stack gap={2}>
|
||||
<Link href="/docs" variant="secondary">Documentation</Link>
|
||||
<Link href="/status" variant="secondary">System Status</Link>
|
||||
<Link href="/contact" variant="secondary">Contact Us</Link>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<Stack gap={4}>
|
||||
<Text size="xs" weight="bold" variant="high" uppercase letterSpacing="wider">Legal</Text>
|
||||
<Stack gap={2}>
|
||||
<Link href="/privacy" variant="secondary">Privacy Policy</Link>
|
||||
<Link href="/terms" variant="secondary">Terms of Service</Link>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Grid>
|
||||
)}
|
||||
|
||||
<Box borderTop marginTop={8} paddingTop={6} display="flex" justifyContent="between" alignItems="center">
|
||||
<Text size="xs" variant="low">
|
||||
© {new Date().getFullYear()} GridPilot. All rights reserved.
|
||||
</Text>
|
||||
<Stack direction="row" gap={4}>
|
||||
<Text size="xs" variant="low" font="mono">v1.0.0-stable</Text>
|
||||
<Box w="4px" h="4px" rounded="full" bg="success-green" />
|
||||
</Stack>
|
||||
</Box>
|
||||
</Container>
|
||||
</Surface>
|
||||
);
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Header } from '@/ui/Header';
|
||||
|
||||
interface AppHeaderProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* AppHeader is the top control bar of the application.
|
||||
* It follows the "Telemetry Workspace" structure.
|
||||
*/
|
||||
export function AppHeader({ children }: AppHeaderProps) {
|
||||
return (
|
||||
<Header>
|
||||
{children}
|
||||
</Header>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user