Media Accordion 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/cta52.tsx instead.

Usage

The file also exports cta52Demo, 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 { Cta52, cta52Demo } from "@/components/blocks/cta/cta52";

export default function Page() {
  return <Cta52 {...cta52Demo} />;
}

Props

Types

interface AccordionStrip {
  image: MediaSlotImage;
  label: string;
  description: string;
}

Behavior notes

• Each strip is `flex-1` by default and grows to `flex-[3]` on its own `:hover`, with `transition-[flex]` doing the smooth expand/contract; because the row's total width is fixed, the hovered strip visually expands while its siblings shrink, no JavaScript needed.
• The label/description for a strip is scoped to that strip alone using a named `group/strip` on the strip itself, sliding up from fully hidden (`translate-y-full`) to visible (`group-hover/strip:translate-y-0`) so the row's own hover never affects a neighboring strip's label.
• The CTA button above the strips is an inert link (`render={<Link/>}`) pointing at `#` by default; there is no real navigation wired up.
• Only photos are used for every strip in this block (no video), to keep the accordion interaction the focus.