website refactor

apps/website/components/sponsors/SponsorHeaderPanel.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
+import { Text } from '@/ui/Text';
+
+interface SponsorHeaderPanelProps {
+  icon: LucideIcon;
+  title: string;
+  description?: string;
+  actions?: React.ReactNode;
+  stats?: React.ReactNode;
+}
+
+/**
+ * SponsorHeaderPanel
+ * 
+ * A semantic header panel for sponsor-related pages.
+ * Follows the finance/ops panel aesthetic with dense information.
+ */
+export function SponsorHeaderPanel({
+  icon,
+  title,
+  description,
+  actions,
+  stats,
+}: SponsorHeaderPanelProps) {
+  return (
+    <Box mb={8}>
+      <Stack direction="row" align="start" justify="between" wrap gap={6}>
+        <Stack direction="row" align="center" gap={4}>
+          <Surface 
+            variant="muted" 
+            rounded="xl" 
+            border 
+            padding={3} 
+            bg="bg-gradient-to-br"
+            borderColor="border-primary-blue/20"
+          >
+            <Icon icon={icon} size={7} color="text-primary-blue" />
+          </Surface>
+          <Box>
+            <Heading level={1} fontSize="2xl" weight="bold">{title}</Heading>
+            {description && (
+              <Text color="text-gray-400" block mt={1} size="sm">{description}</Text>
+            )}
+          </Box>
+        </Stack>
+
+        <Stack direction="row" align="center" gap={4}>
+          {stats && (
+            <Box borderRight borderColor="border-charcoal-outline" pr={4} mr={2} display={{ base: 'none', md: 'block' }}>
+              {stats}
+            </Box>
+          )}
+          {actions && <Box>{actions}</Box>}
+        </Stack>
+      </Stack>
+    </Box>
+  );
+}