Problem Solution

The Problem / Solution component presents a clear comparison between problems and their solutions. This pattern is effective for highlighting how your product addresses specific pain points and provides value to users.

It takes too long

Problem

Complex setup process.
Poor performance.

Solution

One-click installation.
Optimized performance.

Usage

Import the component:

import { LandingProductProblemSolution } from '@/components/landing/LandingProductProblemSolution';

Basic implementation:

<LandingProductProblemSolution
  title="Problems and Solutions"
  description="Addressing key customer pain points with innovative solutions"
  problems={[
    { title: 'Problem title' },
  ]}
  solutions={[
    { title: 'Solution title' },
  ]}
/>

Examples

No titles

Too many steps.
Too many clicks.

One-click installation.
Optimized performance.

With Left Alignment

Problems and Solutions

Addressing key customer pain points with innovative solutions

Problem

Complex setup process.
Poor performance.

Solution

One-click installation.
Optimized performance.

Custom Titles

Before vs After

See the difference our product makes

Before

Manual process.

After

Automated workflow.

With descriptions

Before vs After

See the difference our product makes

Before

Manual process.: Time-consuming and error-prone
Manual process.: Time-consuming and error-prone

After

Automated workflow.: Fast, accurate, and reliable
Automated workflow.: Fast, accurate, and reliable

With Background

Problems and Solutions

Addressing key customer pain points with innovative solutions

Problem

Complex setup process.
Poor performance.

Solution

One-click installation.
Optimized performance.

With Background Glow

Problems and Solutions

Problem

Complex setup process.
Poor performance.

Solution

One-click installation.
Optimized performance.

API Reference

LandingProductProblemSolution Props

Prop Name	Prop Type	Required	Default
className	`string`	No	-
problems	`KeyPoint[]`	Yes	-
solutions	`KeyPoint[]`	Yes	-
title	`string`	No	-
titleComponent	`ReactNode`	No	-
description	`string`	No	-
descriptionComponent	`ReactNode`	No	-
solutionTitle	`string`	No	`'Solution'`
solutionTitleComponent	`ReactNode`	No	-
problemTitle	`string`	No	`'Problem'`
problemTitleComponent	`ReactNode`	No	-
variant	`'primary' \| 'secondary'`	No	`'primary'`
withBackground	`boolean`	No	`false`
withBackgroundGlow	`boolean`	No	`false`
backgroundGlowVariant	`'primary' \| 'secondary'`	No	`'primary'`
textPosition	`'center' \| 'left'`	No	`'center'`

Interfaces

export interface KeyPoint {
  title: string;
  description?: string;
}

The KeyPoint interface is used both for problems and solutions to provide consistent formatting.

More Examples

For more even more examples, see our Landing Page Component Examples page or see complete landing page examples by Exploring Our Landing Page Templates.

Also see:

Product Feature component.
Feature Comparison component.
Product Feature Key Points component that this component uses internally for displaying the problems and solutions.