Home Page Design

[30ann]

A new home page design for the plh kids tz app with these new features:

1. A sticky header :
   The header serves as a guide, helping users identify the module they should focus on each week.

• The header has a blue background and remains fixed while scrolling.
• Make the "Start" or "Continue" buttons dynamically responsive based on the module’s state.
• After cycling through all the modules, it disappears, even if a user has an incomplete module.

2. Toggle Between Views

• Implement the ability to seamlessly switch between Map View, which has a top-to-bottom flow, and List View.

3. Different Module Colors:

• Ensures users can continue from where they left off in an incomplete or highlighted module.
• Green modules – Signify completed modules, which users can revisit at any time.
• Yellow modules – Indicate active/highlighted modules currently being read that week.
• Pink modules – Represent incomplete modules, allowing users to resume progress easily.
• Grey-colored modules – Represent locked modules that are clickable for preview.

4. Footer:

• Add a settings icon in the footer for easier access to preferences.
• Add captions for the icons.