In this challenge, you will combine some of the components you have built in previous challenges into a full pricing page.

As this challenge is a combination of other sections or components, you should build them first to ensure all states and requirements are covered.

Implementation requirements

The requirements that each component has to fulfill remains the same – you should refer to them in their individual briefs and ensure that their functionality remains intact after integration:

• Navbar Component
• Pricing Section (Tiers)
• FAQ Section
• Features Section (Grid)
• Testimonials Section
• Contact Section
• Footer Section (Simple)

On the page level:

• Page layout rules: Apply standard page margin and padding rules as well as spacing between the sections as per the design specifications.
• Navbar: Ensure the navbar is fixed at the top and includes responsive behavior.
• Copy and asset alignment: While the component used remains the same as the list above, some of the assets, icons or copy might have changed. Check through each section.
  • Pricing FAQs: Remember to change the copy according to the Pricing FAQ copy, which is different from the general FAQ section copy.
• Placeholders: You may leave the redirection links empty for any unspecified buttons or links.
• Cross-browser and device compatibility: Check that your solution works for major browsers including Chrome, Firefox, and Safari, and for all stated device breakpoints.
• [Stretch goal] Integration with actual payment gateway: Integrating with a payment gateway like Stripe is usually free, with fees incurred upon transaction, hence you are recommended to try it out as part of practice. You can use the standard test card number 4242 4242 4242 4242, which is a well known fake credit card number used in testing payment transactions; Stripe will not charge you for this because they recognize it as a test card.