mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-17 15:46:55 +01:00
parent 4d5ce9bfd6
commit 72a626ce71
346 changed files with 19308 additions and 8605 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
apps/website/templates/layout/GlobalFooterTemplate.tsx Normal file
View File

@@ -0,0 +1,85 @@
import React from 'react';
import { AppFooter } from '@/ui/AppFooter';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import Image from 'next/image';
import Link from 'next/link';
export interface GlobalFooterViewData {}
export function GlobalFooterTemplate(_props: GlobalFooterViewData) {
return (
<AppFooter>
<Box maxWidth="7xl" mx="auto" display="grid" responsiveGridCols={{ base: 1, md: 4 }} gap={12}>
<Box colSpan={{ base: 1, md: 2 }}>
<Box mb={6} opacity={0.8}>
<Image
src="/images/logos/wordmark-rectangle-dark.svg"
alt="GridPilot"
width={140}
height={26}
/>
</Box>
<Box maxWidth="sm" mb={6}>
<Text color="text-gray-500">
The professional infrastructure for serious sim racing.
Precision telemetry, automated results, and elite league management.
</Text>
</Box>
<Box display="flex" alignItems="center" gap={4}>
<Text size="xs" color="text-gray-600" font="mono" letterSpacing="widest">
© 2026 GRIDPILOT
</Text>
</Box>
</Box>
<Box>
<Box mb={4}>
<Text weight="bold" color="text-gray-300" letterSpacing="wider">PLATFORM</Text>
</Box>
<Stack as="ul" direction="col" gap={2}>
<Box as="li">
<Box as={Link} href="/leagues" color="text-gray-500" hoverTextColor="primary-accent" transition>
Leagues
</Box>
</Box>
<Box as="li">
<Box as={Link} href="/teams" color="text-gray-500" hoverTextColor="primary-accent" transition>
Teams
</Box>
</Box>
<Box as="li">
<Box as={Link} href="/leaderboards" color="text-gray-500" hoverTextColor="primary-accent" transition>
Leaderboards
</Box>
</Box>
</Stack>
</Box>
<Box>
<Box mb={4}>
<Text weight="bold" color="text-gray-300" letterSpacing="wider">SUPPORT</Text>
</Box>
<Stack as="ul" direction="col" gap={2}>
<Box as="li">
<Box as={Link} href="/docs" color="text-gray-500" hoverTextColor="primary-accent" transition>
Documentation
</Box>
</Box>
<Box as="li">
<Box as={Link} href="/status" color="text-gray-500" hoverTextColor="primary-accent" transition>
System Status
</Box>
</Box>
<Box as="li">
<Box as={Link} href="/contact" color="text-gray-500" hoverTextColor="primary-accent" transition>
Contact
</Box>
</Box>
</Stack>
</Box>
</Box>
</AppFooter>
);
}

77
apps/website/templates/layout/GlobalSidebarTemplate.tsx Normal file
View File

@@ -0,0 +1,77 @@
'use client';
import React from 'react';
import { DashboardRail } from '@/ui/DashboardRail';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Trophy, Users, Calendar, Layout, Settings, Home } from 'lucide-react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
export interface GlobalSidebarViewData {}
export function GlobalSidebarTemplate(_props: GlobalSidebarViewData) {
const pathname = usePathname();
const navItems = [
{ label: 'Dashboard', href: '/', icon: Home },
{ label: 'Leagues', href: '/leagues', icon: Trophy },
{ label: 'Teams', href: '/teams', icon: Users },
{ label: 'Races', href: '/races', icon: Calendar },
{ label: 'Leaderboards', href: '/leaderboards', icon: Layout },
{ label: 'Settings', href: '/settings', icon: Settings },
];
return (
<DashboardRail>
<Box py={6}>
<Box px={6} mb={8}>
<Text size="xs" color="text-gray-500" weight="bold" font="mono" letterSpacing="0.2em">
NAVIGATION
</Text>
</Box>
<Stack as="nav" flexGrow={1} px={3} direction="col" gap={1}>
{navItems.map((item) => {
const isActive = pathname === item.href;
const Icon = item.icon;
return (
<Box
key={item.href}
as={Link}
href={item.href}
display="flex"
alignItems="center"
gap={3}
px={3}
py={2}
rounded="md"
transition
bg={isActive ? 'primary-accent/10' : 'transparent'}
color={isActive ? 'primary-accent' : 'text-gray-400'}
hoverBg={isActive ? 'primary-accent/10' : 'white/5'}
hoverTextColor={isActive ? 'primary-accent' : 'white'}
group
>
<Icon size={20} color={isActive ? '#198CFF' : '#6B7280'} />
<Text weight="medium">{item.label}</Text>
{isActive && (
<Box ml="auto" w="4px" h="16px" bg="primary-accent" rounded="full" shadow="[0_0_8px_rgba(25,140,255,0.5)]" />
)}
</Box>
);
})}
</Stack>
<Box px={6} mt="auto" pt={6} borderTop borderColor="[#23272B]">
<Stack direction="row" align="center" gap={2} mb={4}>
<Box w="8px" h="8px" rounded="full" bg="success-green" />
<Text size="xs" color="text-gray-400" font="mono">
SYSTEM ONLINE
</Text>
</Stack>
</Box>
</Box>
</DashboardRail>
);
}

53
apps/website/templates/layout/HeaderContentTemplate.tsx Normal file
View File

@@ -0,0 +1,53 @@
import React from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
export interface HeaderContentViewData {}
export function HeaderContentTemplate(_props: HeaderContentViewData) {
return (
<>
<Stack direction="row" align="center" gap={6}>
<Box as={Link} href="/" display="inline-flex" alignItems="center" group>
<Box position="relative">
<Box h={{ base: '24px', md: '28px' }} w="auto" transition opacity={1} groupHoverOpacity={0.8}>
<Image
src="/images/logos/wordmark-rectangle-dark.svg"
alt="GridPilot"
width={160}
height={30}
priority
/>
</Box>
<Box
position="absolute"
bottom="-4px"
left="0"
w="0"
h="2px"
bg="primary-accent"
transition
groupHoverWidth="full"
/>
</Box>
</Box>
<Box display={{ base: 'none', sm: 'flex' }} alignItems="center" gap={2} borderLeft borderColor="[#23272B]" pl={6}>
<Box w="6px" h="6px" rounded="full" bg="primary-accent" animate="pulse" />
<Text size="xs" color="text-gray-500" weight="bold" font="mono" letterSpacing="0.2em">
MOTORSPORT INFRASTRUCTURE
</Text>
</Box>
</Stack>
<Box display="flex" alignItems="center" gap={4}>
<Stack direction="row" display={{ base: 'none', md: 'flex' }} align="center" gap={1} px={3} py={1} border borderColor="[#23272B]" bg="[#141619]/20">
<Text size="xs" color="text-gray-600" weight="bold" font="mono">STATUS:</Text>
<Text size="xs" color="text-success-green" weight="bold" font="mono">OPERATIONAL</Text>
</Stack>
</Box>
</>
);
}

45
apps/website/templates/layout/RootAppShellTemplate.tsx Normal file
View File

@@ -0,0 +1,45 @@
'use client';
import React from 'react';
import { AppShell } from '@/ui/AppShell';
import { ControlBar } from '@/ui/ControlBar';
import { TopNav } from '@/ui/TopNav';
import { ContentViewport } from '@/ui/ContentViewport';
import { GlobalSidebarTemplate } from './GlobalSidebarTemplate';
import { GlobalFooterTemplate } from './GlobalFooterTemplate';
import { HeaderContentTemplate } from './HeaderContentTemplate';
import { Box } from '@/ui/Box';
export interface RootAppShellViewData {
children: React.ReactNode;
}
/**
* RootAppShellTemplate orchestrates the top-level semantic shells of the application.
* It follows the "Telemetry Workspace" structure:
* - ControlBar = header/control bar
* - DashboardRail = sidebar rail
* - ContentViewport = content area
*/
export function RootAppShellTemplate({ children }: RootAppShellViewData) {
return (
<AppShell>
<ControlBar>
<TopNav>
<HeaderContentTemplate />
</TopNav>
</ControlBar>
<Box display="flex" flexGrow={1} overflow="hidden">
<GlobalSidebarTemplate />
<Box display="flex" flexGrow={1} flexDirection="col" overflow="hidden">
<ContentViewport>
{children}
</ContentViewport>
<GlobalFooterTemplate />
</Box>
</Box>
</AppShell>
);
}