Shipixen Logo

Problem Agitator

Updated on

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 NameProp TypeRequiredDefault 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 NameProp TypeRequiredDefault className string No - children React.ReactNode Yes-

LandingProblemAgitatorComment

Prop NameProp TypeRequiredDefault 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: