Implement Training Program Page with Exercise Steps and Progress Tracking

[hanazaq]

Title: Implement Training Program Page with Exercise Steps and Progress Tracking

Description: Implement the training program page to display a series of exercises (e.g., Deadlift, Squat, Bench Press) with detailed steps and progress tracking. The page should have an easy-to-use UI for a smooth and user-friendly experience.

Expected Behavior:

• The training program should include a list of exercise steps.
• Each step should have a title, description, and a GIF showing how to use the exercise instrument.
• A checkbox for each step should allow the user to mark the step as done, which will increment the progress bar.
• Only the current step will be toggled down, while all other steps will be toggled up, allowing the user to focus on one step at a time.
• A success alert should appear when all training steps are completed.

Proposed Timeline: This issue should be finished until 20 November 2024.

[hanazaq]

Implementation on this branch: https://github.com/bounswe/bounswe2024group7/tree/issue_192_ProgramPage Next Steps:

• [ ] connect to backend endpoints.
• [ ] make the scrolling down automatic with the current opened step of exercise visible.
• [ ] after completing all step, allow the user to toggle down and display any step details.