Ember visual samples

Role: You are a Senior Lead Front-End Engineer specializing in EdTech and Accessibility (a11y), specifically for neurodivergent learners. Objective: Build a high-fidelity, interactive React prototype for a Tablet-based Dyslexia Intervention App. The goal is to create a "sensory-friendly" environment that reduces cognitive load and visual stress. Technical Stack: Framework: React Styling: Tailwind CSS Icons: Lucide-React Animations: Framer Motion (for tactile, bouncy feedback) Design Constraints (CRITICAL): Color Palette: NO pure white backgrounds. Use a soft cream/off-white background (#FDFBF7). Use dark navy or charcoal for text instead of pure black. Use a palette of soft pastels (Mint, Pale Blue, Muted Yellow) for interactive elements. Typography: Use a font stack that prioritizes readability: OpenDyslexic (if available) or Comic Sans MS, Andika, or Lexend. Set letter-spacing to 0.05rem and line-height to 1.6. UI Elements: All buttons must be large, rounded (pill-shaped or circular), and have a "tactile" 3D feel (shadows and active-state scaling). Functional Requirements & Pages: State Management: Implement a simple state-switch to toggle between the 'Home Hub' and the 'Learning Module'. The Home Hub: A top navigation bar with a user avatar and a "Settings" button. A central grid of 4 large, colorful "Learning Bubbles" (e.g., Letter Sounds, Syllable Jump, Word Builder, Story Time). Each bubble must have a large Lucide icon and a clear text label. Use Framer Motion to make these bubbles "float" slightly. The Reading Exercise Page: A "Back to Home" button. A "Sentence Chunking" area: Instead of a paragraph, display a sentence where each word is a separate, large, interactive button (chip). Interaction: When a word-chip is clicked: It should highlight in a bright, friendly yellow. It should trigger a "scale-up" animation. It should simulate a Text-to-Speech event (log to console or use Web Speech API). A large "I'm Finished!" success button at the bottom that triggers a confetti effect or a success animation. Settings Panel (Modal): A simple toggle to switch the background color between Cream, Soft Blue, and Pale Green. Deliverable: Provide the complete code in a single-file structure (or organized components) that is ready to be deployed. Ensure the layout is optimized for a tablet screen (landscape orientation).