CTA Section

An interconnected, conversion-focused Brand Pillars call-to-action component built for agencies, SaaS platforms, and studios. Rather than presenting services or value propositions as plain bullet points, this section transforms them into an interactive ecosystem with synchronized animated scorecards, live progress meters, and active highlight popovers.

Hovering or tapping any pillar card on the left automatically synchronizes with the right scorecard canvas, animating scores and progress bars to illustrate holistic brand synergy.

Brand Pillars (Interactive Scorecard)

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @avara-ui registry once, then copy your styles from the Themes page.

Install Cta Section

npx shadcn@latest add https://avaraui.com/r/cta-section.json

components/custom/blocks/CtaSectionBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs this for you. Run it yourself only if you are adding Cta Section to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

motion is an npm package.

npm install motion

Features

Discover the key capabilities that make this component an excellent choice for modern interactive user interfaces.

Synchronized Scorecard

Selecting any feature or service card on the left automatically synchronizes with the right scorecard canvas, animating scores and progress meters.

Signature 3D Popover

Features an eye-catching floating active badge with vibrant accent gradients, bold typography, and smooth transitions.

Design Token Integration

Seamlessly respects var(--radius) corner rounding and brand accent tokens across Light and Dark themes.

Fully Responsive

Adapts effortlessly from expansive two-column desktop layouts to stacked, touch-friendly mobile flows without horizontal overflow.

Props Reference

Prop	Type	Default	Description
`variant`	`"brand-pillars" \| "minimal" \| "split"`	`"brand-pillars"`	Visual mode. `"brand-pillars"` renders the interactive two-panel system with scorecard.
`color`	`string`	`"#f95716"`	Primary accent color. Accepts hex colors (e.g. `"#f95716"`), CSS variables (`"var(--primary)"`), or preset names (`"orange"`, `"primary"`, `"indigo"`, `"rose"`, `"emerald"`).
`heading`	`string`	`undefined`	Optional main section heading.
`subheading`	`string`	`undefined`	Optional eyebrow label above the heading.
`statement`	`string`	Standard statement	The primary bold philosophy statement rendered on the scorecard panel.
`pillars`	`PillarItem[]`	`DEFAULT_PILLARS`	Array of 4 pillar objects containing `id`, `eyebrow`, `title`, `description`, `score`, and optional `icon`.
`summaryText`	`string`	`'One complete, consistent brand" — 100%'`	Text displayed inside the bottom summary bar.
`summaryScore`	`string \| number`	`"50%"`	Metric or score shown on the summary bar.
`ctaText`	`string`	`"Get Started"`	Call-to-action button label.
`ctaHref`	`string`	`"#"`	Link destination for the CTA button.
`rounded`	`string \| number`	`"var(--radius, 16px)"`	Corner rounding radius for the cards, panels, and buttons.
`className`	`string`	`undefined`	Custom Tailwind CSS classes applied to the root section element.