website refactor

apps/website/components/shared/PageHeader.tsx

@@ -0,0 +1,48 @@
+import React, { ReactNode } from 'react';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+
+interface PageHeaderProps {
+  title: string;
+  subtitle?: string;
+  action?: ReactNode;
+}
+
+/**
+ * Generic PageHeader component following the Teams page style.
+ * Used to maintain visual consistency across main directory pages.
+ */
+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}
+    >
+      <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>
+        )}
+      </Box>
+      
+      {action && (
+        <Box display="flex" alignItems="center">
+          {action}
+        </Box>
+      )}
+    </Box>
+  );
+}