This React project involves creating an insurance policy card component and requesting data from an API endpoint to build a listing of policies. Please share the completed source code via a GitHub or Bitbucket.
You can find the design spec for this project here: https://www.figma.com/file/fGW83zI7thrOaCjB3O4gHRAZ/DEV-Test
There are designs for the mobile, tablet, and desktop views, and an example of the component's active state.
The component you build should be responsive and display correctly across all viewports. It should also be cross-browser compatible and will be tested in Chrome, Firefox, Safari, Internet Explorer 11 and Edge.
Please import the fonts from here: https://use.typekit.net/hzn4qhc.css
The primary font used in the designs is called Brandon Grotesque (referenced as "brandon-grotesque" in the CSS import), the secondary font is Bitter (referenced as "bitter" in the CSS import).
The component includes an active state which is toggled when any part of the component is clicked. The view for the active state is included in the design files. Many cards can be active at the same time.
The API endpoint is located here: https://7946a218-d225-4d0e-80ac-450bbc9713a0.mock.pstmn.io/booking
The response from the API contains all the relevant data required to replicate the designs. It has a simple schema which contains an array of three "policy" objects which reflect the content in the design.