Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a web application designed as an interactive escape room for 11th-grade students at a B1 level in English. It aims to enhance their vocabulary and understanding of words, phrases, and collocations related to sports through engaging challenges and activities.

## CORE FEATURES
1. **Interactive Puzzles**: A variety of puzzles related to sports vocabulary that students must solve to "escape" the room, promoting active learning.
2. **Word Bank**: A dedicated section where students can review key terms, phrases, and collocations relevant to the sports theme, with definitions and example sentences.
3. **Progress Tracker**: A feature that allows students to track their progress through the escape room, showing completed puzzles and areas that need improvement.
4. **Hints System**: An integrated hints feature that provides assistance when students struggle with specific puzzles, encouraging persistence and learning.
5. **Leaderboard**: A competitive element where students can see their scores compared to classmates, fostering motivation and engagement.
6. **Feedback and Review**: After completing the escape room, students receive personalized feedback on their performance and areas to focus on for improvement.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography
- **Color Mode**: Light theme with dark text on light backgrounds
- **Primary Color**: #1978E5 (accent for buttons, links, highlights)
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs
- **Layout**: The main layout will consist of a header for navigation, a central area for puzzles and content display, and a footer for additional resources and contact information. Each puzzle will be presented in a card format for clarity and ease of interaction.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Context API for managing global state and user progress.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Layout Components**: Build the main layout components including Header, Footer, and Main Content Area.
3. **Design the Puzzles**: Develop interactive puzzle components, utilizing state management to track user input and progress.
4. **Implement the Word Bank**: Create a section for students to explore vocabulary, integrating definitions and examples.
5. **Add Progress Tracker**: Implement a visual progress tracker that updates as students complete puzzles.
6. **Integrate Hints System**: Build the hints feature, ensuring it is accessible without giving away answers.
7. **Develop Leaderboard**: Create a leaderboard that updates dynamically based on user scores.
8. **Feedback Mechanism**: Implement a system to provide personalized feedback after completing the escape room.
9. **Test Responsiveness**: Ensure the application is responsive across various devices and screen sizes.
10. **Deploy Application**: Deploy the application using a hosting service like Vercel or Netlify.

## USER EXPERIENCE
Students will begin their journey in the escape room by selecting a puzzle to solve. They will interact with the UI through simple clicks and inputs, receiving real-time feedback on their progress. As they complete each puzzle, they will be able to view their progress on a tracker and access hints if needed. The leaderboard will encourage competition, while the feedback section will guide them on how to improve their English skills related to sports. The minimalist design will ensure that their focus remains on learning through engaging content without distractions.