auth rework

apps/website/components/ui/PageHeader.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import React from 'react';
+
+interface PageHeaderProps {
+  icon: React.ElementType;
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+  iconGradient?: string;
+  iconBorder?: string;
+}
+
+/**
+ * Page header component with icon, title, description, and optional action.
+ * Used at the top of pages for consistent page titling.
+ */
+export default function PageHeader({ 
+  icon: Icon, 
+  title, 
+  description,
+  action,
+  iconGradient = 'from-iron-gray to-deep-graphite',
+  iconBorder = 'border-charcoal-outline',
+}: PageHeaderProps) {
+  return (
+    <div className="mb-8">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold text-white flex items-center gap-4">
+            <div className={`p-3 rounded-xl bg-gradient-to-br ${iconGradient} border ${iconBorder}`}>
+              <Icon className="w-7 h-7 text-gray-300" />
+            </div>
+            {title}
+          </h1>
+          {description && (
+            <p className="text-gray-400 mt-2 ml-16">{description}</p>
+          )}
+        </div>
+        {action}
+      </div>
+    </div>
+  );
+}