website refactor

apps/website/ui/Group.tsx

@@ -3,7 +3,7 @@ import { Box } from './Box';
 
 export interface GroupProps {
   children: ReactNode;
-  direction?: 'row' | 'col';
+  direction?: 'row' | 'col' | 'column';
   align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
   justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
   gap?: number;
@@ -20,10 +20,12 @@ export const Group = ({
   wrap = false,
   fullWidth = false,
 }: GroupProps) => {
+  const finalDirection = direction === 'column' ? 'col' : direction;
+
   return (
     <Box
       display="flex"
-      flexDirection={direction}
+      flexDirection={finalDirection}
       alignItems={align}
       justifyContent={justify}
       gap={gap}