PricingCard

The PricingCard component displays detailed information about a pricing plan, including the product name, description, price, features, and a checkout button for users to proceed with the purchase. This component is styled to highlight the pricing details and the included features in a visually appealing way.

Props

Prop	Type	Description
icon	any	Icon displayed alongside the product name, representing the product visually.
price	string	Current price of the product.
discountedPrice	string	Original price shown as discounted, displayed with a strikethrough effect.
currency	string	Currency symbol or code displayed with the price.
productName	string	Name of the product or service offered in the pricing card.
productDescription	string	A short description of the product, highlighting its purpose or key features.
whatsIncluded	String[]	A list of features or benefits included with the product, shown as bullet points.
checkoutButtonContent	string	Text displayed on the checkout button.

Dependencies

• React Icons: Uses IoMdCheckmark for bullet points and IoIosApps as an optional icon in the checkout button.

• Internal Components:

  • CheckoutButton: The checkout button that initiates the payment process.

Key Style Classes

• Gradient Background:

  • bg-gradient-to-bl from-emerald-500 to-neutral-900: Provides a background gradient with emerald and dark tones to enhance the card’s visual appeal.

  • rounded-2xl p-px: Creates a rounded, bordered look by combining inner padding with the background gradient.

• Responsive Layout:

  • flex flex-col md:flex-row: Arranges content in a column on smaller screens and a row on larger screens for improved readability.

  • Divider: line w-[100%] h-[1px] mt-4 bg-neutral-800 separates the feature and pricing sections in a responsive way.

• Price Display:

  • text-8xl text-emerald-500: Emphasizes the current price with a large, eye-catching font.

  • Discounted Price: line-through text-emerald-500 applies a strikethrough to signify the original price.

Usage Example

// Example usage of PricingCard component within the Pricing section
<PricingCard
  icon={<YourIcon />}
  price="$49.99"
  discountedPrice="$99.99"
  currency="USD"
  productName="Pro Access"
  productDescription="Full access to all features and tools for professional use."
  whatsIncluded={["Feature 1", "Feature 2", "Feature 3"]}
  checkoutButtonContent="Get Access"
/>

Additional Notes

• Feature List: The whatsIncluded prop allows flexibility in listing any number of features or benefits, each with a checkmark for emphasis.

• Payment Information: Displays "One Time Payment" beneath the price, clarifying that the cost is not recurring.

• Checkout Button: The CheckoutButton includes an icon (defined as appIcon in the component) to add a visual element and emphasize the call to action.

---

This documentation provides a comprehensive overview of the PricingCard component.