Video Hero CTA

A full-bleed looping background video fills the section, with a dark gradient overlay fading from the bottom so heading, description, and buttons stay legible while anchored to the bottom edge of the hero.

By Staaarter Team

CTA

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/video-hero-cta.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/cta/cta49.tsx instead.

Usage

The file also exports cta49Demo, 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 { Cta49, cta49Demo } from "@/components/blocks/cta/cta49";

export default function Page() {
  return <Cta49 {...cta49Demo} />;
}

Props

Prop	Type	Default	Description
eyebrow	string	none	Small label above the heading.
heading	string	"Build something people remember"	Main headline.
description	string	none	Supporting copy under the heading.
primaryLabel	string	"Get started"	Primary button label.
primaryHref	string	"#"	Primary button destination.
secondaryLabel	string	"Watch the film"	Secondary button label, omit to hide the button.
secondaryHref	string	"#"	Secondary button destination.
videoSrc	string	none	URL of the looping background video (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.
Fully static: no client-side state, the gradient overlay and bottom-aligned content are pure CSS.

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.