Split Video CTA
A split layout: badge, heading, a short feature checklist, and action buttons sit on the left, while a rounded, bordered video panel plays a looping demo video on the right, stacking to a single column on mobile.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, badge dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/split-video-cta.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/cta/cta54.tsx instead.
Usage
The file also exports cta54Demo, 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 { Cta54, cta54Demo } from "@/components/blocks/cta/cta54"; export default function Page() { return <Cta54 {...cta54Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| badgeLabel | string | "What's new" | Badge pill text above the heading, omit to hide it. |
| heading | string | "See the editor in motion" | Main headline. |
| description | string | none | Supporting copy under the heading. |
| features | string[] | none | Short feature checklist items shown below the description. |
| primaryLabel | string | "Try it live" | Primary button label. |
| primaryHref | string | "#" | Primary button destination. |
| secondaryLabel | string | "Read the docs" | Secondary button label, omit to hide the button. |
| secondaryHref | string | "#" | Secondary button destination. |
| videoSrc | string | none | URL of the looping video shown in the right-hand panel (MP4). |
| posterSrc | string | none | Poster image shown before the video has loaded. |
| className | string | none | Extra classes for the outer section element. |
Behavior notes
- The video autoplays muted and looped purely through native HTML attributes (`autoPlay loop muted playsInline`) — there is no JavaScript play/pause control in this demo.
- A real integration should add a user-facing mute/pause control for accessibility (respecting prefers-reduced-motion and giving users a way to stop the motion); that is intentionally not implemented here.
- The video panel is contained (rounded corners, border, `aspect-video`) rather than full-bleed, unlike this category's cinematic-hero variants.
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.