website refactor

apps/website/ui/NavGroup.tsx

@@ -0,0 +1,29 @@
+import React, { ReactNode } from 'react';
+import { Box } from './primitives/Box';
+
+export interface NavGroupProps {
+  children: ReactNode;
+  direction?: 'horizontal' | 'vertical';
+  gap?: number;
+  align?: 'start' | 'center' | 'end';
+}
+
+export const NavGroup = ({ 
+  children, 
+  direction = 'horizontal', 
+  gap = 4,
+  align = 'center'
+}: NavGroupProps) => {
+  return (
+    <Box 
+      as="nav"
+      display="flex" 
+      flexDirection={direction === 'horizontal' ? 'row' : 'col'} 
+      gap={gap} 
+      alignItems={align}
+      justifyContent={direction === 'horizontal' ? 'center' : 'start'}
+    >
+      {children}
+    </Box>
+  );
+};