Pricing

The Pricing component provides a section that displays the application’s pricing details, including a title, description, and a PricingCard for displaying product details and promotional offers.

Props

The Pricing component does not accept any props.

Dependencies

• React Icons: Uses HiOutlineSparkles to visually enhance the PricingCard with an icon.

• Internal Components:

  • Title: Provides the section header, which includes a microtitle, main title, description, and an offer pill.

  • PricingCard: Displays pricing details, including the product name, price, description, and a list of features.

Key Style Classes

• Container Styles:

  • w-[1250px] h-fit flex flex-col gap-4 p-3: Centers the pricing section within a constrained container with padding for structure.

• Centered Alignment:

  • w-full flex justify-center: Centers both the Title and PricingCard components within the parent container, ensuring a cohesive layout.

Usage Example

// Usage of Pricing component within the main Landing page or other layout
<Pricing />

Additional Notes

• Dynamic Pricing Details:

  • The PricingCard component receives details such as the product name, price, description, and features list. The example card here displays a free promotional price with a higher discounted price for effect.

• Promotional Offer: The Title component displays an offer pill with the message "100% off regular price" to highlight the current promotion.

• Customizable Description: The description text within the Title component can be tailored to further emphasize the value proposition of the pricing offer.

---

This documentation should cover all aspects of the Pricing component.