Shadcn.io is not affiliated with official shadcn/ui
CTA Split Panel Waveform Visual
A split panel dark CTA for React and Next.js with a staggered audio waveform visual on the left, featured episode card and paired ShadcnioButton actions on the right, built with shadcn/ui and Tailwind CSS
Convert visitors with this split panel dark CTA for React and Next.js. Features a stylized audio waveform of varied bar heights on the left panel and an uppercase eyebrow, a bold headline, a featured item card with an inline play button, and a paired primary and ghost ShadcnioButton row on the right — all inside a bg-foreground dark card. Built with TypeScript, ShadcnioButton from shadcn/ui, motion/react entrance animation, Lucide React icons, and Tailwind CSS. Perfect for podcast landings, audio course pages, developer community sections, and any conversion section where an audio metaphor reinforces the message.
Related Components
Split Panel Dual Preview CTA
Split panel dark CTA with dual skeleton preview cards
Split Panel Crosshair Visual CTA
Split panel dark CTA with a crosshair target visual
Split Panel Device Mockup CTA
Split panel CTA with a device mockup visual
Split Panel Product Mockup CTA
Split panel CTA with a product UI mockup
Split Benefits Visual CTA
Split panel CTA with a benefits list beside a visual
Split Before After List CTA
Split panel CTA with a before and after comparison
FAQ
Was this page helpful?
Sign in to leave feedback.
Split Panel Video Player Preview
A split panel dark CTA section for React and Next.js with a video player preview on the right, eyebrow label plus headline on the left, a bulleted feature trio, and an inverted primary ShadcnioButton built with shadcn/ui and Tailwind CSS
Accordion FAQ
A tabbed accordion feature section for React and Next.js with PillTabs category switching and shadcn/ui Accordion capability questions that expand to reveal feature details built with Tailwind CSS