Progress Tracker - Copy this React, Tailwind Component to your project

Design a "Progress Tracker" for a mobile app that connects users to: Utilize Assets: Transportation, financial products, real estate. Hone Skills: Project based NGOs affiliated with BEAM (a non profit think tank that uses data from affiliated NGOs to suggest policy and provide scholarships). Key Considerations for the Design User Centric Focus: Provide a clear, intuitive visual representation of user achievements and milestones. Brand Identity: Reflect the platform's mission of connection, growth, and community impact. Data Visualization: Use engaging and easy to understand charts, graphs, and other visual elements. Accessibility: Ensure the design is inclusive for users with disabilities. Motivation and Engagement: Encourage users to continue their progress with motivational elements. Detailed Design Specifications Progress Tracker Layout: Header: Display the platform's logo and a title like "Your Progress". Main Section: Overview of Achievements: Summary section highlighting key achievements. Visual elements such as badges, certificates, or icons representing completed milestones. Milestones and Goals: Timeline or progress bar showing past and upcoming milestones. Interactive elements allowing users to click on milestones for more details. Detailed Progress: Charts or graphs showing progress in different areas (e.g., skill development, asset utilization). Breakdown of progress by project or asset type. Footer: Navigation bar with icons for Home, Explore, Progress, and Profile. Design Elements: Colors: Use a color scheme that reflects trust, growth, and community (e.g., shades of blue, green, and neutral tones). Typography: Clear and readable fonts with a focus on accessibility. Icons and Images: Use intuitive icons and images to represent different achievements and milestones. Interactive Elements: Achievements Summary: Clickable badges or icons that expand to show more details. Milestone Timeline: Interactive timeline or progress bar that users can navigate. Charts and Graphs: Interactive data visualization elements that provide detailed insights on progress. Accessibility Features: Ensure high contrast for text and background. Support for screen readers. Large touch targets for interactive elements. Example Layout Header: Logo | Title: "Your Progress" Main Section: Overview of Achievements: Achievements Summary: [Badges/Icons] Key Achievements: [Description of major milestones] Milestones and Goals: Milestone Timeline: [Interactive Timeline/Progress Bar] Upcoming Goals: [List of upcoming milestones] Detailed Progress: Charts/Graphs: [Progress in Skill Development | Asset Utilization] Project Breakdown: [Progress by Project/Asset Type] Footer: Navigation Bar: [Home] [Explore] [Progress] [Profile] Additional Notes Ensure the design reflects the platform's mission and values. Prioritize the user experience by making the visual representation of progress straightforward and motivating. Use engaging visuals to keep users informed and encouraged.