English Learning App - Copy this React, Tailwind Component to your project
Create a user interface for an English learning app that helps users improve their speaking skills through AI interaction. The app should have the following components: Home Screen: A welcoming header with the app name and a brief description of its purpose. A large button that says 'Start Speaking' to initiate a conversation with the AI. A progress bar showing the user's current level (Basic, Intermediate, Advanced) and progress. A section for 'Daily Challenges' with small, clickable cards showing tasks (e.g., 'Pronunciation Practice,' 'Grammar Check'). A navigation bar at the bottom with icons for 'Home,' 'Lessons,' 'Progress,' and 'Settings.' Conversation Screen: A clean, minimalistic chat interface where users can speak or type to interact with the AI. A microphone button to start recording the user's voice. AI generated text bubbles that correct the user's speech and provide explanations in simple English and the user's native language. A button to repeat the AI’s feedback or move to the next question. Lessons Screen: A grid layout displaying different lesson categories like 'Basic Grammar,' 'Pronunciation,' 'Conversation Practice.' Each category should have an image, title, and a brief description. A 'Start Lesson' button on each category card. Progress Screen: A detailed dashboard showing the user's progress, including graphs for speaking accuracy, grammar improvement, and vocabulary growth. A section for 'Achievements' with badges for milestones like 'First Conversation,' '100 Correct Sentences,' etc. A 'Review Mistakes' button that leads to a list of common errors the user has made, along with explanations. Settings Screen: Options to change the user's preferred language for explanations. A toggle for enabling/disabling voice feedback. Buttons for 'Account Settings,' 'Notifications,' and 'Help & Support.'
