Enrollment Layout
The shared layout for the enrollment / auth screens: a full-width header with the SafeWay logo, then the form below. One header, two shapes (the centered prop switches between them). Consumed by a page, so it fills the viewport rather than rendering inline here.
Default — split-screen
Form on the left, a brand/imagery panel on the right (hidden on mobile) — the Surfshark-style reference. For the milestone screens that carry the journey: checkout, set-password, login.
Live example
The set-password step uses it.
See it in context at /set-password (reached after Pay on the checkout).
Centered — centered
A single column centered in the page, no side panel — for lightweight detours off the main path where a brand aside would over-dress the task.
Live examples
Forgot-password and the multi-role hub use it.
See /forgot-password and /hub.