Take home assignment: responsive price calculator

Thank you for your interest in Cronos !

Objective

Your assignment is to implement an interactive pricing component and get it looking as close to the design as possible.

Your root directory should include a demo-instructions.md file too, with all the instructions required for anyone to run the demo locally.

Brief

The design team at Cronos has provided you with designs for this interactive pricing component. Your challenge is to build out the component using TypeScript and React and get it looking as close to the design as possible.

Resources provided

resources.zip

Download this ZIP file which contains:

• style-guide.md: style guide
• Designs (in the design folder)
• Icons (in the images folder)
• demo-instructions.md file, where you will document the instructions to launch the app locally

Tasks

Your users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Use the slider and toggle to see prices for different page view numbers (details provided below)

Page view and pricing totals