website refactor

apps/website/components/layout/AppFooter.tsx

@@ -1,13 +1,14 @@
 'use client';
 
+import { useSidebar } from '@/components/layout/SidebarContext';
 import { Box } from '@/ui/Box';
 import { Link } from '@/ui/Link';
+import { ShellFooter } from '@/ui/shell/Shell';
 import { Text } from '@/ui/Text';
 import { useEffect, useState } from 'react';
-import { AppShellBar } from './AppShellBar';
 
 export function AppFooter() {
-  const currentYear = new Date().getFullYear();
+  const { isCollapsed } = useSidebar();
   
   // Clock
   const [time, setTime] = useState<string>('');
@@ -22,12 +23,12 @@ export function AppFooter() {
   }, []);
 
   return (
-    <AppShellBar position="bottom">
+    <ShellFooter collapsed={isCollapsed}>
       {/* Left: System Info */}
       <Box display="flex" alignItems="center" gap={6} flex={1}>
         <Box display="flex" alignItems="center" gap={2}>
           <Box className="w-2 h-2 bg-success-green rounded-full animate-pulse" />
-          <Text size="xs" className="text-text-med font-mono text-[10px] uppercase tracking-wider">
+          <Text size="xs" variant="med" font="mono" style={{ fontSize: '10px', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
             GRIDPILOT
           </Text>
         </Box>
@@ -35,7 +36,7 @@ export function AppFooter() {
 
       {/* Center: Time */}
       <Box display="flex" alignItems="center" justifyContent="center" flex={1}>
-        <Text size="sm" font="mono" className="text-text-med tracking-widest tabular-nums">
+        <Text size="sm" font="mono" variant="med" style={{ letterSpacing: '0.1em' }}>
           {time} UTC
         </Text>
       </Box>
@@ -46,7 +47,7 @@ export function AppFooter() {
         <FooterLink href="/privacy">Privacy</FooterLink>
         <FooterLink href="/status">Status</FooterLink>
       </Box>
-    </AppShellBar>
+    </ShellFooter>
   );
 }