Diagonal Video Split CTA

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.

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

Usage

The file also exports cta62Demo, 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 { Cta62, cta62Demo } from "@/components/blocks/cta/cta62";

export default function Page() {
  return <Cta62 {...cta62Demo} />;
}

Props

Behavior notes

• The diagonal split is a pure CSS `clip-path: polygon(...)` on each video's absolutely-positioned wrapper; the two polygons share the same diagonal edge points so the halves meet exactly with no gap or overlap.
• Both videos autoplay muted and looped via native HTML attributes only and are marked `aria-hidden`, purely decorative behind the content card.
• The frosted glass card (`bg-background/20 backdrop-blur-md border border-white/20`) and its white text are a deliberate, explicitly-scoped exception to the semantic-token-only rule, needed for legibility over an unpredictable video background, matching the dark-overlay exception used elsewhere in this category.
• A `bg-black/35` overlay sits between the videos and the card to keep the white text readable regardless of which frame of either video is currently playing.