feat: improve app ui and project metadata

apps/web/components/ui/PageHeader.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+
+interface PageHeaderProps {
+  title: string;
+  eyebrow?: string;
+  description?: string;
+  actions?: ReactNode;
+}
+
+export function PageHeader({
+  title,
+  eyebrow,
+  description,
+  actions,
+}: PageHeaderProps) {
+  return (
+    <header className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+      <div>
+        {eyebrow ? (
+          <p className="mb-1 font-mono text-xs uppercase tracking-wide text-ink-soft/70">
+            {eyebrow}
+          </p>
+        ) : null}
+        <h1 className="font-serif text-2xl text-ink">{title}</h1>
+        {description ? (
+          <p className="mt-2 max-w-2xl text-sm leading-6 text-ink-soft">
+            {description}
+          </p>
+        ) : null}
+      </div>
+      {actions ? (
+        <div className="flex shrink-0 flex-wrap items-center gap-2">
+          {actions}
+        </div>
+      ) : null}
+    </header>
+  );
+}