website refactor

apps/website/components/layout/AuthedNav.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { NavLink } from './NavLink';
+import { Stack } from '@/ui/Stack';
+import { Home, Trophy, Layout, Users, Calendar, Settings } from 'lucide-react';
+import { routes } from '@/lib/routing/RouteConfig';
+
+interface AuthedNavProps {
+  pathname: string;
+  direction?: 'row' | 'col';
+}
+
+/**
+ * AuthedNav displays navigation items for authenticated users.
+ */
+export function AuthedNav({ pathname, direction = 'col' }: AuthedNavProps) {
+  const items = [
+    { label: 'Dashboard', href: routes.protected.dashboard, icon: Home },
+    { label: 'Leagues', href: routes.public.leagues, icon: Trophy },
+    { label: 'Leaderboards', href: routes.public.leaderboards, icon: Layout },
+    { label: 'Teams', href: routes.public.teams, icon: Users },
+    { label: 'Races', href: routes.public.races, icon: Calendar },
+    { label: 'Settings', href: routes.protected.profileSettings, icon: Settings },
+  ];
+
+  return (
+    <Stack direction={direction} gap={direction === 'row' ? 4 : 1}>
+      {items.map((item) => (
+        <NavLink
+          key={item.href}
+          href={item.href}
+          label={item.label}
+          icon={item.icon}
+          isActive={pathname === item.href}
+          variant={direction === 'row' ? 'top' : 'sidebar'}
+        />
+      ))}
+    </Stack>
+  );
+}

apps/website/components/layout/BrandMark.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { Box } from '@/ui/Box';
+
+interface BrandMarkProps {
+  href?: string;
+  priority?: boolean;
+}
+
+/**
+ * BrandMark provides the consistent logo/wordmark for the application.
+ * Aligned with "Precision Racing Minimal" theme.
+ */
+export function BrandMark({ href = '/', priority = false }: BrandMarkProps) {
+  return (
+    <Box as={Link} href={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={priority}
+          />
+        </Box>
+        <Box 
+          position="absolute" 
+          bottom="-4px" 
+          left="0" 
+          w="0" 
+          h="2px" 
+          bg="primary-accent" 
+          transition 
+          groupHoverWidth="full" 
+        />
+      </Box>
+    </Box>
+  );
+}

apps/website/components/layout/HeaderActions.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Button } from '@/ui/Button';
+import { Stack } from '@/ui/Stack';
+import { routes } from '@/lib/routing/RouteConfig';
+import { LogIn, UserPlus } from 'lucide-react';
+
+interface HeaderActionsProps {
+  isAuthenticated: boolean;
+}
+
+/**
+ * HeaderActions provides the primary actions in the header (Login, Signup, Profile).
+ */
+export function HeaderActions({ isAuthenticated }: HeaderActionsProps) {
+  if (isAuthenticated) {
+    return (
+      <Stack direction="row" gap={3}>
+        <Button as="a" href={routes.protected.profile} variant="secondary" size="sm">
+          Profile
+        </Button>
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack direction="row" gap={3}>
+      <Button
+        as="a"
+        href={routes.auth.login}
+        variant="ghost"
+        size="sm"
+        icon={<LogIn size={16} />}
+        data-testid="public-nav-login"
+      >
+        Login
+      </Button>
+      <Button
+        as="a"
+        href={routes.auth.signup}
+        variant="primary"
+        size="sm"
+        icon={<UserPlus size={16} />}
+        data-testid="public-nav-signup"
+      >
+        Sign Up
+      </Button>
+    </Stack>
+  );
+}

apps/website/components/layout/NavLink.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import Link from 'next/link';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { LucideIcon } from 'lucide-react';
+
+interface NavLinkProps {
+  href: string;
+  label: string;
+  icon?: LucideIcon;
+  isActive?: boolean;
+  variant?: 'sidebar' | 'top';
+}
+
+/**
+ * NavLink provides a consistent link component for navigation.
+ * Supports both sidebar and top navigation variants.
+ */
+export function NavLink({ href, label, icon: Icon, isActive, variant = 'sidebar' }: NavLinkProps) {
+  if (variant === 'top') {
+    return (
+      <Box
+        as={Link}
+        href={href}
+        display="flex"
+        alignItems="center"
+        gap={2}
+        px={3}
+        py={2}
+        transition
+        color={isActive ? 'primary-accent' : 'text-gray-400'}
+        hoverTextColor="white"
+      >
+        {Icon && <Icon size={18} />}
+        <Text size="sm" weight={isActive ? 'bold' : 'medium'}>
+          {label}
+        </Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      as={Link}
+      href={href}
+      display="flex"
+      alignItems="center"
+      gap={3}
+      px={3}
+      py={2}
+      rounded="md"
+      transition
+      bg={isActive ? 'primary-accent/10' : 'transparent'}
+      color={isActive ? 'primary-accent' : 'text-gray-400'}
+      hoverBg={isActive ? 'primary-accent/10' : 'white/5'}
+      hoverTextColor={isActive ? 'primary-accent' : 'white'}
+      group
+    >
+      {Icon && <Icon size={20} color={isActive ? '#198CFF' : '#6B7280'} />}
+      <Text weight="medium">{label}</Text>
+      {isActive && (
+        <Box ml="auto" w="4px" h="16px" bg="primary-accent" rounded="full" shadow="[0_0_8px_rgba(25,140,255,0.5)]" />
+      )}
+    </Box>
+  );
+}

apps/website/components/layout/PublicNav.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { NavLink } from './NavLink';
+import { Stack } from '@/ui/Stack';
+import { Home, Trophy, Layout, Users, Calendar } from 'lucide-react';
+import { routes } from '@/lib/routing/RouteConfig';
+
+interface PublicNavProps {
+  pathname: string;
+  direction?: 'row' | 'col';
+}
+
+/**
+ * PublicNav displays navigation items for unauthenticated users.
+ */
+export function PublicNav({ pathname, direction = 'col' }: PublicNavProps) {
+  const items = [
+    { label: 'Home', href: routes.public.home, icon: Home },
+    { label: 'Leagues', href: routes.public.leagues, icon: Trophy },
+    { label: 'Leaderboards', href: routes.public.leaderboards, icon: Layout },
+    { label: 'Teams', href: routes.public.teams, icon: Users },
+    { label: 'Races', href: routes.public.races, icon: Calendar },
+  ];
+
+  return (
+    <Stack direction={direction} gap={direction === 'row' ? 4 : 1}>
+      {items.map((item) => (
+        <NavLink
+          key={item.href}
+          href={item.href}
+          label={item.label}
+          icon={item.icon}
+          isActive={pathname === item.href}
+          variant={direction === 'row' ? 'top' : 'sidebar'}
+        />
+      ))}
+    </Stack>
+  );
+}