website refactor

apps/website/templates/layout/HeaderContentTemplate.tsx

@@ -1,39 +1,26 @@
 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';
+import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
+import { usePathname } from 'next/navigation';
+import { routes } from '@/lib/routing/RouteConfig';
+import { BrandMark } from '@/components/layout/BrandMark';
+import { HeaderActions } from '@/components/layout/HeaderActions';
+import { PublicNav } from '@/components/layout/PublicNav';
 
 export interface HeaderContentViewData {}
 
 export function HeaderContentTemplate(_props: HeaderContentViewData) {
+  const pathname = usePathname();
+  const { data: session } = useCurrentSession();
+  const isAuthenticated = !!session;
+  const homeHref = isAuthenticated ? routes.protected.dashboard : routes.public.home;
+
   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>
+        <BrandMark href={homeHref} priority />
         <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">
@@ -41,12 +28,19 @@ export function HeaderContentTemplate(_props: HeaderContentViewData) {
           </Text>
         </Box>
       </Stack>
+
+      {!isAuthenticated && (
+        <Box display={{ base: 'none', md: 'flex' }} data-testid="public-top-nav">
+          <PublicNav pathname={pathname} direction="row" />
+        </Box>
+      )}
       
       <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>
+        <HeaderActions isAuthenticated={isAuthenticated} />
       </Box>
     </>
   );