[x] The web app must be responsive, i.e., it should adapt to various screen sizes and resolutions, such as desktops, laptops, tablets, and smartphones.
[x] The web app should follow the same style guide across all the pages, including the color scheme, typography, and visual elements.
[x] All the forms should have client-side validation that prevents submission and shows invalid fields if any of the required data is missing. The validation rule should correspond to the expected data type (e.g. email, phone number, name, etc.)
Header:
[x] The header should be fixed and visible at all times, even when scrolling down the page.
[x] The logo should be a clickable link that takes the user to the home page.
[x] The progress bar indicator. It’s visible if a booking is in progress. Indicates the current step.
[x] The date format dropdown and currency dropdown that applies preference settings and will change the date or currency format accordingly across the entire application
[x] The log-in button should trigger a modal or popup window that allows users to create a new account or log in using their existing credentials.
[x] The log-in button is displayed only for an anonymous user
[x] The user account button takes to the “User Account Page” and is displayed instead of the log-in button if a user is authenticated
[x] The shopping cart icon for authenticated users takes to the “Shopping Cart Page”
Content Container:
[x] The content container is the dynamic part of the app that’s changing on router navigation and should contain the main content of the web page, such as flight search results, flight details, booking form, payment form, etc.
Footer:
[x] Includes the copyright text and payment method logos
[x] You can include a piece of brief information about developers (name, avatar, GitHub link) that were working on the project
Page layout (+150)
General Requirements:
Header:
Content Container:
Footer: