SellingPoint

The SellingPoint component represents an individual feature or benefit within the application, providing a title, description, bullet points, and an optional "Powered by" badge. It also displays an image and a time-saved estimate to highlight the feature's value.

Props

Prop	Type	Description
category	string	Category name used for filtering purposes within the SellingPoints component.
title	string	Title of the feature or selling point.
icon	any	Icon displayed alongside the title, emphasizing the feature.
description	string	A brief description of the feature or selling point.
bulletPoints	Array<string>	List of key benefits or highlights related to the feature.
timeSaved	string	Estimate of time saved by using this feature, displayed in a small badge.
image	string	Image URL representing the feature; used in the component’s right section.
isPoweredBy	boolean	Controls the visibility of the "Powered by" section.
poweredByIcon	any	Icon representing the technology or service powering the feature.
poweredBy	string	Name of the technology or service powering the feature.

Dependencies

• React Icons: Uses IoMdCheckmark to create checkmarks for each bullet point.

Key Style Classes

• Responsive Layout:

  • flex flex-col lg:flex-row: Stacks elements vertically on smaller screens and arranges them in a row on larger screens.

  • text-2xl sm:text-3xl: Controls the title font size based on screen width.

• Visual Emphasis:

  • Time Saved Badge: bg-emerald-700 p-1 px-2 rounded creates a distinct badge for the timeSaved prop.

  • Powered By Section: Conditional rendering of isPoweredBy displays a bordered badge (bg-neutral-950) with an icon and text.

Usage Example

// Example usage of SellingPoint component within the SellingPoints list
<SellingPoint
  category="Feature 1"
  title="Feature One"
  icon={<YourFeatureIcon />}
  description="This feature provides significant advantages."
  bulletPoints={["Benefit 1", "Benefit 2", "Benefit 3"]}
  timeSaved="5"
  image="path/to/feature-image.png"
  isPoweredBy={true}
  poweredBy="TechName"
  poweredByIcon={<YourPoweredByIcon />}
/>

Additional Notes

• Flexible Content: The bulletPoints array allows for any number of key points, providing a customizable list of benefits.

• Conditional Elements:

  • The "Powered by" section is conditionally displayed based on isPoweredBy, making it optional based on the feature's requirements.

• Image and Layout: The feature image is aligned to the right on larger screens, with responsive adjustments to ensure a visually appealing layout on all devices.

---

This entry should cover all key aspects of the SellingPoint component.