website refactor

apps/website/templates/HomeTemplate.tsx

@@ -49,7 +49,7 @@ interface HomeTemplateProps {
  */
 export function HomeTemplate({ viewData }: HomeTemplateProps) {
   return (
-    <Box as="main">
+    <Box>
       {/* Hero Section */}
       <HomeHeader
         title="Modern Motorsport Infrastructure."

apps/website/templates/layout/GlobalFooterTemplate.tsx

@@ -1,45 +1,44 @@
 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 { Box } from '@/ui/Box';
-import { BrandMark } from '@/ui/BrandMark';
 
 export interface GlobalFooterViewData {}
 
 export function GlobalFooterTemplate(_props: GlobalFooterViewData) {
   return (
-    <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 />
-            <Text size="xs" variant="low" font="mono" uppercase letterSpacing="wider">
-              // Infrastructure
+    <Surface
+      as="footer"
+      variant="precision"
+      paddingY={3}
+      paddingX={4}
+      borderTop={true}
+      backgroundColor="rgba(10, 10, 11, 0.92)"
+      className="backdrop-blur-xl"
+      style={{
+        boxShadow: '0 -1px 0 0 rgba(255, 255, 255, 0.05)',
+      }}
+    >
+      <Box display="flex" justifyContent="between" alignItems="center" width="full" gap={4}>
+        <Stack direction="row" align="center" gap={3}>
+          <Text size="xs" variant="low" font="mono" uppercase letterSpacing="0.12em">
+            © {new Date().getFullYear()} GridPilot
+          </Text>
+          <Box w="1px" h="12px" bg="var(--ui-color-border-muted)" opacity={0.6} />
+          <Text size="xs" variant="low" font="mono" uppercase letterSpacing="0.12em">
+            Session ready
+          </Text>
+        </Stack>
+
+        <Box display={{ base: 'none', sm: 'flex' }}>
+          <Stack direction="row" align="center" gap={2}>
+            <Box w="6px" h="6px" rounded="full" bg="var(--ui-color-intent-success)" />
+            <Text size="xs" variant="low" font="mono" uppercase letterSpacing="0.12em">
+              Live
             </Text>
           </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>
-
-          {/* 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>
-
         </Box>
-      </Container>
+      </Box>
     </Surface>
   );
-}
+}

apps/website/templates/layout/GlobalSidebarTemplate.tsx

@@ -17,15 +17,30 @@ export function GlobalSidebarTemplate(_props: GlobalSidebarViewData) {
   const isAuthenticated = !!session;
 
   return (
-    <Surface variant="dark" width="280px" borderRight position="sticky" top="0" height="100vh">
+    <Surface
+      as="aside"
+      variant="dark"
+      width="260px"
+      position="sticky"
+      top="56px"
+      height="calc(100vh - 56px)"
+      style={{
+        borderRight: '1px solid var(--ui-color-border-default)',
+        boxShadow: 'inset -1px 0 0 0 rgba(255, 255, 255, 0.01)',
+        background: 'linear-gradient(180deg, #0d0d0e 0%, #0a0a0b 100%)',
+      }}
+    >
       <DashboardRail>
-        <Box py={6} fullWidth>
-          <Box px={6} mb={8}>
-            <Text size="xs" variant="low" weight="bold" font="mono" letterSpacing="0.2em">
-              NAVIGATION
-            </Text>
+        <Box py={8} fullWidth>
+          <Box px={6} mb={10}>
+            <Box display="flex" alignItems="center" gap={2} mb={2}>
+              <Box w="2px" h="12px" bg="var(--ui-color-intent-primary)" />
+              <Text size="xs" variant="low" weight="bold" font="mono" letterSpacing="0.2em">
+                DASHBOARD
+              </Text>
+            </Box>
           </Box>
-          <Box px={3}>
+          <Box px={4}>
             {isAuthenticated ? (
               <AuthedNav pathname={pathname} />
             ) : (
@@ -36,4 +51,4 @@ export function GlobalSidebarTemplate(_props: GlobalSidebarViewData) {
       </DashboardRail>
     </Surface>
   );
-}
+}

apps/website/templates/layout/HeaderContentTemplate.tsx

@@ -17,30 +17,45 @@ export function HeaderContentTemplate(_props: HeaderContentViewData) {
   const homeHref = isAuthenticated ? routes.protected.dashboard : routes.public.home;
 
   return (
-    <>
-      <Stack direction="row" align="center" gap={6}>
+    <Box display="flex" alignItems="center" justifyContent="between" width="full" h="full" px={6}>
+      {/* Left: Context */}
+      <Stack direction="row" align="center" gap={4} h="full">
         <BrandMark href={homeHref} priority />
-        <Box display={{ base: 'none', sm: 'flex' }} alignItems="center" gap={2} borderLeft borderColor="var(--ui-color-border-default)" pl={6}>
-          <Box w="6px" h="6px" rounded="full" bg="var(--ui-color-intent-primary)" animate="pulse" />
-          <Text size="xs" variant="low" weight="bold" font="mono" letterSpacing="0.2em">
-            MOTORSPORT INFRASTRUCTURE
-          </Text>
-        </Box>
+        
+        {isAuthenticated && (
+          <Box 
+            display="flex" 
+            alignItems="center" 
+            gap={3} 
+            paddingLeft={4} 
+            borderLeft={true} 
+            h="24px"
+            style={{ borderLeftColor: 'var(--ui-color-border-muted)' }}
+          >
+             <Text size="xs" weight="medium" variant="low" font="mono" uppercase>
+               Workspace
+             </Text>
+          </Box>
+        )}
       </Stack>
 
+      {/* Center: Navigation (if public) */}
       {!isAuthenticated && (
         <Box display={{ base: 'none', md: 'flex' }} data-testid="public-top-nav">
           <PublicNav pathname={pathname} direction="row" />
         </Box>
       )}
       
+      {/* Right: Session Controls */}
       <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="var(--ui-color-border-default)" bg="var(--ui-color-bg-surface-muted)">
-          <Text size="xs" variant="low" weight="bold" font="mono">STATUS:</Text>
-          <Text size="xs" variant="success" weight="bold" font="mono">OPERATIONAL</Text>
-        </Stack>
+        <Box display={{ base: 'none', sm: 'flex' }} alignItems="center" gap={2}>
+          <Box w="6px" h="6px" rounded="full" bg="var(--ui-color-intent-success)" />
+          <Text size="xs" variant="low" weight="bold" font="mono" letterSpacing="0.1em">
+            LIVE
+          </Text>
+        </Box>
         <HeaderActions isAuthenticated={isAuthenticated} />
       </Box>
-    </>
+    </Box>
   );
-}
+}

apps/website/templates/layout/RootAppShellTemplate.tsx

@@ -1,17 +1,15 @@
 'use client';
 
 import { AppShell } from '@/components/app/AppShell';
+import { AppFooter } from '@/components/layout/AppFooter';
+import { AppHeader } from '@/components/layout/AppHeader';
+import { AppSidebar } from '@/components/layout/AppSidebar';
+import { MainContent } from '@/components/layout/MainContent';
 import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
 import { routes } from '@/lib/routing/RouteConfig';
-import { Box } from '@/ui/Box';
 import { ContentViewport } from '@/ui/ContentViewport';
-import { ControlBar } from '@/ui/ControlBar';
-import { TopNav } from '@/ui/TopNav';
 import { usePathname } from 'next/navigation';
 import React from 'react';
-import { GlobalFooterTemplate } from './GlobalFooterTemplate';
-import { GlobalSidebarTemplate } from './GlobalSidebarTemplate';
-import { HeaderContentTemplate } from './HeaderContentTemplate';
 
 export interface RootAppShellViewData {
   children: React.ReactNode;
@@ -20,9 +18,10 @@ export interface RootAppShellViewData {
 /**
  * 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
+ * - AppHeader = header/control bar
+ * - AppSidebar = sidebar rail
+ * - MainContent = content area wrapper
+ * - AppFooter = footer
  */
 export function RootAppShellTemplate({ children }: RootAppShellViewData) {
   const pathname = usePathname();
@@ -35,23 +34,19 @@ export function RootAppShellTemplate({ children }: RootAppShellViewData) {
 
   return (
     <AppShell>
-      <ControlBar>
-        <TopNav>
-          <HeaderContentTemplate />
-        </TopNav>
-      </ControlBar>
+      <AppHeader />
       
-      <Box display="flex" flexGrow={1} width="full">
-        {showSidebar && <GlobalSidebarTemplate />}
-        
-        <Box as="main" display="flex" flexGrow={1} flexDirection="col" minWidth="0">
-          <ContentViewport fullWidth={!showSidebar}>
-            {children}
-          </ContentViewport>
-        </Box>
-      </Box>
+      {showSidebar && <AppSidebar />}
 
-      <GlobalFooterTemplate />
+      <MainContent hasSidebar={showSidebar}>
+        <ContentViewport 
+          fullWidth={!showSidebar || isLandingPage} 
+          padding={isLandingPage ? 'none' : 'md'}
+        >
+          {children}
+        </ContentViewport>
+        <AppFooter />
+      </MainContent>
     </AppShell>
   );
 }