Responsive two-column layout shell for OpenFrame authentication pages, providing a split-panel design with a form column and a marketing/benefits column on desktop, collapsing to a single centered column on mobile and tablet. ## Key Components - **`AuthShell`** — Main layout component that renders the responsive shell - **`AuthShellProps`** — Interface defining the component's configurable slots: - `tabs` — Optional tab selector (e.g. Sign Up / Login) rendered above the form - `children` — Required main form content - `benefits` — Optional marketing panel; defaults to `` - `footer` — Optional desktop-only footer pinned to the bottom-left of the form column - `className` — Optional additional CSS class names ## Layout Behavior | Breakpoint | Layout | |---|---| | Mobile / Tablet | Single column: tabs → form → benefits → powered-by | | Desktop (`lg`) | Two-column split: form (left) · marketing + wordmark (right) | The `of-auth-shell` class on the root element serves as a stable CSS hook for shell-level overrides (e.g. native mobile top safe-area inset padding). ## Usage Example ```typescript import { AuthShell } from './auth-shell' import { AuthTabs } from './auth-tabs' export default function LoginPage() { return ( } footer={Back to Sign Up} > ) } ``` ```typescript // With a custom benefits panel } className="my-custom-shell" > ``` **Source:** [`auth-shell.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/auth-shell.tsx)