Stacked Photo Deck CTA

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.

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

Usage

The file also exports cta47Demo, 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 { Cta47, cta47Demo } from "@/components/blocks/cta/cta47";

export default function Page() {
  return <Cta47 {...cta47Demo} />;
}

Props

Behavior notes

• The card deck is a pure-CSS hover effect: a `group` wraps the four absolutely-positioned cards, each with its own base `rotate`/`translate-x` for the stacked look and a `group-hover:` counterpart that spreads them into a row, all animated with `transition-transform`.
• Each card also has a continuous diagonal shimmer sweep (a translucent gradient overlay animated via a component-scoped `@keyframes cta47-shimmer`), staggered per card with a small `animationDelay` so the sweep doesn't hit every card at once; this animation runs independent of hover.
• Both buttons are inert links (`render={<Link/>}`) pointing at `#` by default; there is no real signup flow wired up.
• Server component throughout: no client-side state, no mouse-tracking, just CSS `:hover`/`group-hover`.