feat(ui): split-screen auth + enterprise CTA + dark theme default

- AuthShell: dark two-column auth layout (brand/value panel with CSS-only
  waveform motif + proof points + Bland-style enterprise CTA block on the
  left, zinc-900 form card on the right; single-column on mobile).
- AuthEnterpriseCTA: "Talk to our team" → dograh.com/contact?intent=enterprise.
- stack-theme: dark StackTheme token overrides synced to globals.css.
- page.tsx: wrap StackHandler (non-fullPage) in AuthShell + StackTheme;
  local-auth fallback preserved inside the shell. BackButton slimmed for the card.
- Dark locked as default: <html className="dark">, next-themes ThemeProvider
  (defaultTheme="dark", enableSystem=false); inline no-FOUC script defaults dark.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Pritesh 2026-06-09 13:49:22 +05:30
parent d694a81f0a
commit 0662a1770f
7 changed files with 212 additions and 51 deletions

View file

@ -1,18 +1,25 @@
import { StackHandler } from "@stackframe/stack";
import { StackHandler, StackTheme } from "@stackframe/stack";
import { getAuthProvider } from "@/lib/auth/config";
import { AuthEnterpriseCTA } from "./AuthEnterpriseCTA";
import { AuthShell } from "./AuthShell";
import { BackButton } from "./BackButton";
import { stackAuthDarkTheme } from "./stack-theme";
export default async function Handler(props: unknown) {
const authProvider = await getAuthProvider();
if (authProvider === "local") {
return (
<div style={{ padding: '20px', textAlign: 'center' }}>
<h1>Local Auth Mode</h1>
<p>Stack Auth handler is disabled when using local authentication.</p>
</div>
<AuthShell enterpriseSlot={<AuthEnterpriseCTA />}>
<div className="space-y-2 text-center text-zinc-200">
<h1 className="text-xl font-semibold">Local Auth Mode</h1>
<p className="text-sm text-muted-foreground">
Stack Auth handler is disabled when using local authentication.
</p>
</div>
</AuthShell>
);
}
@ -21,15 +28,11 @@ export default async function Handler(props: unknown) {
const app = await getStackServerApp();
return (
<div className="flex flex-col h-screen">
<AuthShell enterpriseSlot={<AuthEnterpriseCTA />}>
<BackButton />
<div className="flex-1 overflow-auto">
<StackHandler
fullPage
app={app!}
routeProps={props}
/>
</div>
</div>
<StackTheme theme={stackAuthDarkTheme}>
<StackHandler fullPage={false} app={app!} routeProps={props} />
</StackTheme>
</AuthShell>
);
}