BookingStage
Where a studio's booking page stands, the way the landing shows its demo: on white, the gradient ball rising from the foot, and a frosted card over it that hugs what it holds — up to the stage's height, then its content scrolls inside.
The stage
The live page fills the screen with it (h-dvh); setup's preview puts it in a rounded panel (h-full).
Belaze
Barbershop
import { BookingStage } from "@/components/shared/booking-stage";
<BookingStage className="h-dvh">
{/* the card's content: BookingFront, or the conversation */}
</BookingStage>API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | What the card holds; give a scrolling part min-h-0 flex-1 overflow-y-auto. |
| className | string | — | The stage's size: h-dvh, h-full. |
Guidelines
- One stage for the live page and the preview, so they never drift.
- The card hugs its content; never stretch it to the stage.