website refactor

apps/website/ui/TeamsHeader.tsx

@@ -0,0 +1,33 @@
+import React, { ReactNode } from 'react';
+import { Heading } from './Heading';
+import { Text } from './Text';
+
+interface TeamsHeaderProps {
+  title: string;
+  subtitle?: string;
+  action?: ReactNode;
+}
+
+export function TeamsHeader({ title, subtitle, action }: TeamsHeaderProps) {
+  return (
+    <div className="mb-12 flex flex-col md:flex-row md:items-end justify-between gap-6 border-b border-[var(--ui-color-border-muted)] pb-8">
+      <div className="space-y-2">
+        <div className="flex items-center gap-3">
+          <div className="w-1 h-8 bg-[var(--ui-color-intent-primary)]" />
+          <Heading level={1} weight="bold" uppercase>{title}</Heading>
+        </div>
+        {subtitle && (
+          <Text variant="low" size="lg" uppercase mono className="tracking-[0.2em]">
+            {subtitle}
+          </Text>
+        )}
+      </div>
+      
+      {action && (
+        <div className="flex items-center">
+          {action}
+        </div>
+      )}
+    </div>
+  );
+}