diff --git a/ui/src/app/handler/[...stack]/AuthEnterpriseCTA.tsx b/ui/src/app/handler/[...stack]/AuthEnterpriseCTA.tsx
new file mode 100644
index 00000000..3efeb0e9
--- /dev/null
+++ b/ui/src/app/handler/[...stack]/AuthEnterpriseCTA.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+// Bland-style enterprise call-to-action rendered inside the auth brand panel.
+// Links out to the main marketing site's enterprise intake form rather than the
+// in-app modal, since the visitor is not yet authenticated here.
+
+import { Button } from "@/components/ui/button";
+
+export function AuthEnterpriseCTA() {
+ return (
+
+
+
+ );
+}
diff --git a/ui/src/app/handler/[...stack]/AuthShell.tsx b/ui/src/app/handler/[...stack]/AuthShell.tsx
new file mode 100644
index 00000000..b438ead1
--- /dev/null
+++ b/ui/src/app/handler/[...stack]/AuthShell.tsx
@@ -0,0 +1,82 @@
+// Dark two-column auth shell. LEFT (lg+ only): a brand/value panel with a
+// CSS-only audio-waveform motif, proof points, and a Bland-style enterprise CTA
+// block at the bottom (passed in as `enterpriseSlot`). RIGHT: a centered
+// zinc-900 card that wraps the Stack Auth form (`children`). Mobile collapses to
+// the single card column. Palette is the app's blacks/greys with one warm CTA
+// accent on the waveform + focus.
+
+import type { ReactNode } from "react";
+
+const PROOF_POINTS = [
+ "Open source",
+ "7+ telephony providers",
+ "Open architecture",
+];
+
+export function AuthShell({
+ children,
+ enterpriseSlot,
+}: {
+ children: ReactNode;
+ enterpriseSlot?: ReactNode;
+}) {
+ return (
+
+ {/* Brand / value panel — hidden on mobile */}
+
+
+ {/* Form column */}
+
+
+ {/* Mobile-only wordmark (brand panel is hidden) */}
+
+
+
+
+ Dograh
+
+ {children}
+
+
+
+ );
+}
diff --git a/ui/src/app/handler/[...stack]/BackButton.tsx b/ui/src/app/handler/[...stack]/BackButton.tsx
index f2d730ae..d36a4a03 100644
--- a/ui/src/app/handler/[...stack]/BackButton.tsx
+++ b/ui/src/app/handler/[...stack]/BackButton.tsx
@@ -9,16 +9,14 @@ export function BackButton() {
const router = useRouter();
return (
-
-
-
+
);
}
diff --git a/ui/src/app/handler/[...stack]/page.tsx b/ui/src/app/handler/[...stack]/page.tsx
index 2ae94489..17bd093c 100644
--- a/ui/src/app/handler/[...stack]/page.tsx
+++ b/ui/src/app/handler/[...stack]/page.tsx
@@ -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 (
-
-
Local Auth Mode
-
Stack Auth handler is disabled when using local authentication.
-
+ }>
+
+
Local Auth Mode
+
+ Stack Auth handler is disabled when using local authentication.
+