Stop Rebuilding UI
Previous: Split Panel Dual Preview
Next: Split Panel Icon Grid

CTA Split Panel Email Capture Document Visual

A split panel dark CTA for React and Next.js with inline email capture form on the left panel, stylized document placeholder visual on the right panel, AnimatePresence success swap, and compact trust line built with shadcn/ui and Tailwind CSS

Scroll to load preview

Capture high-intent leads with this split panel email capture CTA for React and Next.js. Features a left panel with uppercase eyebrow label, bold headline, short description and an inline email Input plus inverted primary ShadcnioButton, paired with a right panel that shows a stylized document placeholder with page count and format label (demonstrated with a gated white paper download). Built with TypeScript, ShadcnioButton and Input from shadcn/ui, motion/react AnimatePresence success swap, Lucide React icons, and Tailwind CSS. Perfect for gated content landing pages, lead magnet sections, developer resource libraries, and any marketing page where a document visual reinforces the offer.

React CTA Split Panel Dual Preview Block

Split panel dark CTA with dual skeleton preview cards

React CTA Split Panel Device Mockup Block

Split panel CTA with device mockup visual

React CTA Split Panel Icon Grid Block

Split panel CTA with an icon grid visual

React CTA Centered Dark Email Capture Block

Centered dark CTA with inline email capture form

React CTA Centered Light Email Capture Block

Centered light CTA with inline email capture form

React CTA Split Panel Calendar Grid Block

Split panel CTA with a calendar grid visual

FAQ

Last updated on April 8, 2026

Was this page helpful?

Sign in to leave feedback.

Split Panel Dual Preview

A split panel dark CTA for React and Next.js with dual skeleton preview cards, inverted primary ShadcnioButton, ghost secondary action, and trust row built with shadcn/ui and Tailwind CSS

Split Panel Icon Grid

A split panel dark CTA for React and Next.js with a 3x3 icon-tile grid visual, inverted primary ShadcnioButton, and ghost secondary action built with shadcn/ui and Tailwind CSS