Shadcn.io is not affiliated with official shadcn/ui
About Problem Solution
A problem-solution split panel block for React and Next.js with matched pain point and solution pairs, red X and green check icons, impact badges per solution, connecting arrows between pairs, and staggered entrance animations built with shadcn/ui and Tailwind CSS
Communicate your value proposition with this problem-solution split panel block for React and Next.js. Features a two-column layout with four pain points on the left matched to four solutions on the right, red X icons for problems, green check icons for solutions, impact percentage badges, connecting arrows between matched pairs on desktop, and staggered pair entrance animations. Built with TypeScript, shadcn/ui Badge component, motion/react staggered animations, and Tailwind CSS. Perfect for about pages, landing page value propositions, and product marketing sections.
Related Components
Before After
Customer transformation stories with metrics
Comparison
Product-level before and after comparison
Differentiators
Competitive differentiation points
Client Results
Quantified client outcome metrics
Why Choose Us
Key reasons to choose the product
Case Study Cards
Full narrative customer case studies
FAQ
Was this page helpful?
Sign in to leave feedback.
Principles
A company principles block for React and Next.js with vertical numbered timeline, connecting lines between principle nodes, test questions in italic, expandable details, and staggered entrance animations built with shadcn/ui and Tailwind CSS
Product Evolution
A vertical timeline of product versions for React and Next.js with version numbers, codenames, key changes, and user impact metrics built with shadcn/ui and Tailwind CSS