Skip to main content

PainPointsSection

The PainPointsSection component displays a comparison of pain points with and without the product.

Usage​

import PainPointsSection from "@/components/homepage/PainPointsSection";
import { config } from "@/config";

function HomePage() {
  return <PainPointsSection {...config.homepage.painPointsSection} />;
}

Props​

  • title: The main title of the section
  • withoutProduct: An object containing points describing pain points without the product
  • withProduct: An object containing points describing benefits with the product

Functionality​

  • Displays two columns comparing scenarios with and without the product
  • Uses color-coding to differentiate between pain points and benefits

Customization​

The component uses Tailwind CSS for styling. You can customize the appearance by modifying the CSS classes or updating the Tailwind configuration.