[Playtime session] Create UI for Playtime session screeen

[Rushi-faldu]

Purpose

We need to create a user interface where our interactive AI can suggest the activities based on the onboarding questions.

User story

As a user, I want the app to provide an interface for my playtime session so that I can interact with AI to have a more personalized experience.

Acceptance criteria

• This screen will show immediately after the Loading screen when onboarding is finished.
• There is a mic button on the center of the screen to trigger talking and give instructions to the AI agent by voice. (This button will be disabled for now - so no functionality)
• - [ ] The functionality of giving instructions by voice will be implemented by this ticket [Playtime session] Integrate Generative AI agent for activity instructions #97
• When the user clicks on the 'Stop' button at the bottom of the screen, the user will land on the home screen. The functionality of the Stop button will be implemented by this ticket: [Playtime session] Implement 'Stop' button functionality #98
• Ensure the UI design aligns with the app theme.

Design notes

• Wireframes are here

• Design specifics are here

---

Definition of Done (DoD)

• The feature has been fully implemented, thoroughly tested, and integrated into the app with no critical bugs or performance issues.
• Manual testing is complete, verifying that the feature meets all acceptance criteria.
• Big features are documented inside the code, with clear explanations of functionality, usage, and any relevant edge cases.
• The feature has undergone peer review, with the code approved by at least one other team member to ensure quality and maintainability.
• The feature branch has been successfully merged into the main branch, and the pull request is closed and the branch is deleted.
• The feature’s UI/UX has been reviewed to ensure consistency and alignment with design guidelines.