💄 Annual Pricing – Layout changes

[isaaclombardssw]

🩸 Pain

Betty and Landon have identified a detail with the styling that can be improved, on the annual pricing page.

The size of cards is changing when you swap between annual and regular pricing, which ruins the lines of alignment.

💡 Suggested Solution

Add spacing under the {{ COST }}/month label so that the card size is the same and the buttons are all aligned when annual pricing is selected.

💼 Tasks

• Adding spacing to monthly pricing cards, under the {{ COST }}/month label (to match height of the text inserted in annual pricing mode).

✅ Acceptance Criteria

• When in annual pricing mode, the card heights are the same as in the monthly mode.
• Buttons are all horizontally aligned in both modes.

📸 Screenshots

Figure – annual pricing, larger cards and out of alignment

Figure – monthly pricing, all aligned

Cc: @bettybondoc @landonmaxwell @joshbermanssw