Ember Demo-Front-End

Role: You are a Senior Lead Front-End Engineer specializing in EdTech and Accessibility. Objective: Build a high-fidelity, interactive React prototype for a Tablet-based Dyslexia Intervention App. Technical Stack: Framework: React Styling: Tailwind CSS Animations: CSS Transitions (Standard Tailwind) Icons: Use Standard Emojis (to avoid dependency installation errors) Design Constraints (CRITICAL): Color Palette: NO pure white backgrounds. Use a soft cream background (#FDFBF7). Use dark navy/charcoal for text. Use soft pastels for interactive elements. Typography: Use Comic Sans MS, Andika, or Lexend as the primary font stack. Set letter-spacing to 0.05rem and line-height to 1.6. UI Elements: All buttons must be large, rounded, and have a tactile feel with shadows and hover-scale effects. Functional Requirements: State Management: Simple toggle between 'Home Hub' and 'Learning Module'. The Home Hub: Top nav with user avatar. A grid of 4 large, colorful "Learning Bubbles" (e.g., "🔊 Letter Sounds", "🦘 Syllable Jump", "🧱 Word Builder", "📖 Story Time"). Each bubble should be a large circular button with an emoji and a label. The Reading Exercise Page: A "Back to Home" button. Sentence Chunking: Display a sentence where each word is a separate, large, interactive button (chip). Interaction: When a word-chip is clicked, it highlights yellow and scales up. A large "I'm Finished! 🎉" button at the bottom. Settings Panel: A simple modal to switch the background color between Cream, Soft Blue, and Pale Green. Deliverable: Provide the complete code in a single-file structure. Optimize for tablet landscape orientation. Ensure no external icon libraries are required.