website refactor

apps/website/templates/layout/HeaderContentTemplate.tsx

@@ -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>
+    </>
+  );
+}