Polish the public auth experience

Replace the stacked sign-in card with a responsive public shell, a local monochrome compute field, restrained grain and reduced-motion-safe drift. Share the anonymous header with Learn so public navigation stays consistent, and carry the corrected spacing through registration and profile setup.
2026-08-13 20:51:34 -07:00
parent b63ed0181f
commit 9db53cb36f
9 changed files with 574 additions and 430 deletions
@@ -0,0 +1,63 @@
+/**
+ * The small amount of chrome shared by every public PIG screen.
+ *
+ * These routes deliberately live outside the authenticated Shell, but they
+ * should still feel like the same product. Keeping the wordmark, Learn link,
+ * sign-in affordance and music control here prevents the auth and shared
+ * Learn pages from drifting into separate mini-sites.
+ */
+import { AudioControl } from './AudioControl';
+import { PiggyLogo } from './PiggyMark';
+import { cn } from './ui';
+
+type PublicDestination = 'learn' | 'sign-in';
+
+export function PublicHeader({
+  current,
+  onSignIn,
+}: {
+  current?: PublicDestination;
+  onSignIn?: () => void;
+}) {
+  const itemClass = (destination: PublicDestination) =>
+    cn(
+      'tap relative inline-flex items-center px-2 text-sm font-medium transition-colors',
+      current === destination ? 'text-fg' : 'text-muted hover:text-fg',
+      current === destination &&
+        'after:absolute after:inset-x-2 after:bottom-1 after:h-px after:bg-current',
+    );
+
+  return (
+    <header className="public-header relative z-30 border-b border-border/70 bg-bg/80 backdrop-blur-xl">
+      <div className="mx-auto flex h-16 w-full min-w-0 max-w-7xl items-center gap-2 px-4 sm:px-6 lg:px-8">
+        <a href="/" className="tap flex shrink-0 items-center rounded-lg" aria-label="PIG home">
+          <PiggyLogo />
+        </a>
+
+        <nav aria-label="Public navigation" className="ml-auto flex shrink-0 items-center gap-1">
+          <a
+            href="/learn"
+            aria-current={current === 'learn' ? 'page' : undefined}
+            className={itemClass('learn')}
+          >
+            Learn
+          </a>
+          <AudioControl className="public-header-audio" />
+          {onSignIn ? (
+            <button type="button" onClick={onSignIn} className={itemClass('sign-in')}>
+              Sign in
+            </button>
+          ) : current === 'sign-in' ? (
+            <span aria-current="page" className={itemClass('sign-in')}>
+              Sign in
+            </span>
+          ) : (
+            <a href="/" className={itemClass('sign-in')}>
+              Sign in
+            </a>
+          )}
+        </nav>
+      </div>
+    </header>
+  );
+}