In this challenge, you will develop a responsive pricing section with three distinct plans: Basic, Standard and Premium, each with its own set of features and call-to-action (CTA) buttons. The section will also feature a toggle which allows users to switch between monthly and annual pricing views.

Implementation requirements

• Design fidelity: Aim to follow the design as closely as possible. All elements in the design should be present, using the specified text color, font size, font weight, spacing, dimensions, etc.
• Interactivity:
  • Button states: Implement and style buttons to reflect different states - normal, hover, focus, and disabled.
  • Toggle: Implement a functional toggle that conditionally updates the displayed pricing information to either a monthly or annual pricing view without page reloads. The tier's price and also "Billed {period}" line under the price should update depending on the toggle state.
• Responsive behavior:
  • Text size: Should be responsive; font size is larger for wider devices, smaller for narrow devices.
  • Responsive layout: The content should stack vertically on smaller screens and align horizontally as the screen width increases.
• Placeholders: You may leave the redirection links empty for any unspecified buttons or links.
• Cross-browser compatibility: Check that your solution works for major browsers including Chrome, Firefox, and Safari.
• [Stretch goal] Performance optimization: Code for fast load times with efficient CSS and JavaScript techniques.
• [Stretch goal] Accessibility compliance: Follow best practices for web accessibility, such as using semantic HTML and ARIA roles where necessary, using proper alt tags for images and ensuring that buttons and links can be navigated to and selected using keyboard controls.