SellingPoints

The SellingPoints component showcases the main features of the application. It includes a title, description, and a series of feature "selling points" that can be filtered by category, allowing users to view specific benefits the app provides.

Props

The SellingPoints component does not accept any props.

Dependencies

• React Transition Group: Uses TransitionGroup and CSSTransition to animate feature transitions when switching categories.

• React Icons: Icons such as PiShieldStarFill and SiStarship are used to visually enhance each selling point.

• Internal Components:

  • Title: Displays the title, subtitle, and description of the section.

  • SellingPoint: Represents each individual feature card with detailed information.

  • Filter: A filter component to switch between different categories of features.

Key Style Classes

• transition-container: Manages the transition effect for the CSSTransition elements, allowing for smooth animations between feature transitions.

• Responsive Spacing:

  • mb-[100px] md:mb-[250px] lg:mb-0: Adds margin for spacing the component based on screen size, creating a clean, responsive layout.

Usage Example

// SellingPoints can be used directly within the Landing component to show app features.
<SellingPoints />

Additional Notes

• Dynamic Feature Filtering:

  • The handleFilter function enables filtering of selling points based on categories listed in the categories array.

  • The points array holds feature elements with matching category names, which are filtered to display the appropriate selling points.

• Point Structure:

  • Each feature in points contains an icon, description, time saved, image, and optional "powered by" text.

  • The icons and images are customizable for each feature and are designed to align with the application’s theme.

• Customizable Categories: The categories array can be customized to align with feature names, allowing flexibility in what features are displayed.

• CSS Transition: The point-transition CSS class (in SellingPoints.css) provides the transition effect for smooth entry and exit of feature cards.

---

This documentation covers the main aspects of the SellingPoints component.