website refactor

apps/website/components/shared/PageHeader.tsx

@@ -1,7 +1,10 @@
 import React, { ReactNode } from 'react';
 import { Heading } from '@/ui/Heading';
 import { Text } from '@/ui/Text';
-import { Box } from '@/ui/Box';
+import { Container } from '@/ui/Container';
+import { Group } from '@/ui/Group';
+
+import { VerticalBar } from '@/ui/VerticalBar';
 
 interface PageHeaderProps {
   title: string;
@@ -15,34 +18,35 @@ interface PageHeaderProps {
  */
 export function PageHeader({ title, subtitle, action }: PageHeaderProps) {
   return (
-    <Box 
-      marginBottom={12} 
-      display="flex" 
-      flexDirection={{ base: 'col', md: 'row' }} 
-      alignItems={{ base: 'start', md: 'end' }} 
-      justifyContent="between" 
-      gap={6} 
-      borderBottom 
-      borderColor="var(--ui-color-border-muted)" 
-      paddingBottom={8}
+    <Container 
+      size="full" 
+      padding="none" 
+      py={12}
     >
-      <Box display="flex" flexDirection="col" gap={2}>
-        <Box display="flex" alignItems="center" gap={3}>
-          <Box width="4px" height="32px" bg="var(--ui-color-intent-primary)" />
-          <Heading level={1} weight="bold" uppercase>{title}</Heading>
-        </Box>
-        {subtitle && (
-          <Text variant="low" size="lg" uppercase weight="bold" letterSpacing="widest">
-            {subtitle}
-          </Text>
+      <Group 
+        justify="between" 
+        align="end" 
+        wrap 
+        gap={6}
+      >
+        <Group direction="col" gap={2}>
+          <Group align="center" gap={3}>
+            <VerticalBar height="2rem" />
+            <Heading level={1} weight="bold" uppercase>{title}</Heading>
+          </Group>
+          {subtitle && (
+            <Text variant="low" size="lg" uppercase weight="bold" letterSpacing="widest">
+              {subtitle}
+            </Text>
+          )}
+        </Group>
+        
+        {action && (
+          <Group align="center">
+            {action}
+          </Group>
         )}
-      </Box>
-      
-      {action && (
-        <Box display="flex" alignItems="center">
-          {action}
-        </Box>
-      )}
-    </Box>
+      </Group>
+    </Container>
   );
 }