Studio Booking Split CTA
A closing call-to-action for booking a physical space: a tall portrait photo fills one side, while the other holds an oversized heading, a short pitch paragraph, a rounded-full pill button next to a plain mailto text link, and a ruled two-column row stating reply time and next availability.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, media-slot dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/studio-booking-split-cta.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/cta/cta78.tsx instead.
Usage
The file also exports cta78Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { Cta78, cta78Demo } from "@/components/blocks/cta/cta78"; export default function Page() { return <Cta78 {...cta78Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | "Book the studio" | Oversized heading. |
| pitch | string | none | Short pitch paragraph under the heading. |
| actionLabel | string | "Check availability" | Label for the rounded pill button. |
| actionHref | string | "#" | Link target for the pill button. |
| contactEmail | string | "[email protected]" | Email address rendered as a plain mailto link. |
| replyTime | string | "Within 24h" | Reply-time value in the ruled row. |
| nextAvailability | string | "March 2026" | Next-availability value in the ruled row. |
| image | MediaSlotImage | none | Tall decorative photo of the studio. |
| className | string | none | Extra classes for the outer section element. |
Behavior notes
- The pill button is an inert link (`render={<Link/>}`) pointing at `actionHref` (`#` by default), and the mailto link is a plain anchor, neither submits a form or triggers any real booking flow.
- The photo side uses MediaSlot inside an aspect-[3/4] wrapper div (per this repo's Safari height-collapse gotcha) and falls back to a decorative placeholder when no image is supplied.
More CTA Blocks
View all →centered-newsletter-cta
Centered Newsletter CTA
Minimal centered call-to-action with heading, description, and action buttons.
split-layout-newsletter-cta
Split Layout Newsletter CTA
Two-column call-to-action with a decorative image on one side and a feature list plus subscribe form on the other.
newsletter-social-proof-cta
Newsletter CTA with Social Proof
Newsletter call-to-action with an avatar stack, subscriber count, and a testimonial quote.
banner-cta
Banner CTA
Horizontal banner call-to-action with heading and action buttons side by side.
stats-cta
Stats CTA
Call-to-action section with impressive statistics and trust indicators above action buttons.
multi-card-cta
Multi-Card CTA
Three action cards side by side, each offering a different path to conversion.