Problem Agitator

The Problem Agitator component creates a visually engaging layout for highlighting common pain points or problems your users face. It arranges 3-4 problem statements in a grid pattern connected by directional arrows, creating a flow that leads to a cliffhanger or solution teaser.

AI for websites doesn't deliver.

Build new website with AI

Spend days improving

need design skills

need research

AI makes average websites

slop code

bad copy

low conversion

Page AI can do better ↓

Usage

Import the components from their respective paths:

import { LandingProblemAgitator } from '@/components/landing/problem-agitator/LandingProblemAgitator';
import { LandingProblemAgitatorItem } from '@/components/landing/problem-agitator/LandingProblemAgitatorItem';
import { LandingProblemAgitatorComment } from '@/components/landing/problem-agitator/LandingProblemAgitatorComment';

Basic implementation:

<LandingProblemAgitator
  title="Common User Challenges"
  description="These are the problems our users face every day"
  cliffhanger="Our solution makes these problems disappear"
>
  <LandingProblemAgitatorItem>
    <p>Problem 1</p>
  </LandingProblemAgitatorItem>

  <LandingProblemAgitatorItem>
    <p>Problem 2</p>
    <LandingProblemAgitatorComment className="-right-8 top-0">
      Pain point 1
    </LandingProblemAgitatorComment>
  </LandingProblemAgitatorItem>

  <LandingProblemAgitatorItem>
    <p>Problem 3</p>
  </LandingProblemAgitatorItem>
</LandingProblemAgitator>

Examples

Four-Item Grid with Custom Container

Common Website Development Challenges

Unclear requirements

Time pressure

Lack of expertise

Budget constraints

Left-aligned Text with Secondary Color Scheme

Building websites is challenging

Traditional approaches leave teams frustrated and projects delayed

Complex requirements

Technical constraints

Limited resources

tight budget

There's a better approach

With Background Glow

Building websites is challenging

Traditional approaches leave teams frustrated and projects delayed

Complex requirements

Technical constraints

Limited resources

There's a better approach

API Reference

LandingProblemAgitator

Prop Name	Prop Type	Required	Default
className	`string`	No	`-`
children	`React.ReactNode`	Yes	-
title	`string \| React.ReactNode`	No	`-`
titleComponent	`React.ReactNode`	No	`-`
description	`string \| React.ReactNode`	No	`-`
descriptionComponent	`React.ReactNode`	No	`-`
cliffhanger	`string \| React.ReactNode`	No	`-`
cliffhangerComponent	`React.ReactNode`	No	`-`
textPosition	`'center' \| 'left'`	No	`'center'`
withBackground	`boolean`	No	`true`
withBackgroundGlow	`boolean`	No	`false`
variant	`'primary' \| 'secondary'`	No	`'primary'`
backgroundGlowVariant	`'primary' \| 'secondary'`	No	`'primary'`
containerType	`'narrow' \| 'wide' \| 'ultrawide'`	No	`'ultrawide'`

LandingProblemAgitatorItem

Prop Name	Prop Type	Required	Default
className	`string`	No	`-`
children	`React.ReactNode`	Yes	-

LandingProblemAgitatorComment

Prop Name	Prop Type	Required	Default
className	`string`	No	`-`
children	`React.ReactNode`	Yes	-

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 for highlighting solutions to these problems
Primary Text Call to Action component for directing users to solutions
Primary Image Call to Action component for directing users to solutions
Primary Image Video Call to Action component for directing users to solutions