website refactor

apps/website/components/layout/AppFooter.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { Surface } from '@/ui/Surface';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+
+export function AppFooter() {
+  return (
+    <Surface
+      as="footer"
+      variant="precision"
+      paddingY={6}
+      paddingX={6}
+      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">
+              System Normal
+            </Text>
+          </Stack>
+        </Box>
+      </Box>
+    </Surface>
+  );
+}