[FEAT] External Static Pages > Pricing Page > Pricing Plans > Pricing plans card component

[luqmonac56]

Description

Develop the pricing cards displayed in the pricing page.

Acceptance Criteria

• Create a pricing card component for displaying a pricing plan.
• This component should have props to facilitate dynamicity such as background color, border color, text, etc.
• This component should allow for mobile responsiveness when integrating into the pricing page.
• Write unit tests for this component to model expected behavior.

Purpose

Provides a component for showing the pricing plan cards.

Requirement

• Install/Re-use the shadcn button component for the action buttons on the cards and ensure the design is consistent with the design.
• Ensure that the typography (text colors, font weights, font sizes, etc.) remain consistent with the design.
• Ensure that the card design (border colors, background color, text content, etc.) remains consistent with the design.
• Ensure that the component is responsive on mobile devices.

Expected Outcome

• A component that displays the pricing plan using props to determine the type of plan (basic or premium) and so on.

Task

• Create a pricing plan card component
• Feat/hng 43 implement reset password page without image #227
• Make the card component responsive for mobile devices
• Write unit tests to ensure the component works as expected

Links

• Figma - Desktop
• Figma - Mobile

Images