Implement both the mobile and web views of the "Catch the Flight" quest preview page. This page should provide a detailed overview of the "Catch the Flight" quest, including its name, description, objectives, rewards, and any other relevant information.
Acceptance Criteria
Pixel-perfect implementation of the "Catch the Flight" quest preview page
Responsive design for both mobile and web views
Clean and maintainable code
Utilization of reusable components where appropriate
Smooth integration with the existing header, footer, and other components
Requirements
Use the standalone components designed by another team member (e.g., header, footer, buttons)
Display detailed information about the "Catch the Flight" quest, including name, description, objectives, and rewards
Include interactive elements for users to start or track the quest
Ensure accessibility features are included (e.g., focus management, keyboard navigation)
Testing
Write tests to ensure the "Catch the Flight" quest preview page renders the required contents
Tests to check the responsiveness of the page across different screen sizes
Ensure all interactive elements on the page are functional
Tasks
[ ] Implement the "Catch the Flight" quest preview page as per the design specifications
[ ] Ensure the page is responsive across all screens
[ ] Utilize reusable components where applicable
[ ] Implement functionality for starting and tracking the quest
Description
Implement both the mobile and web views of the "Catch the Flight" quest preview page. This page should provide a detailed overview of the "Catch the Flight" quest, including its name, description, objectives, rewards, and any other relevant information.
Acceptance Criteria
Requirements
Testing
Tasks
Figma link