Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to engage students in understanding and improving school culture through interactive questions and challenges. It aims to promote positive behaviors, inclusivity, and collaboration among students, teachers, and families, fostering a better learning environment.

## CORE FEATURES
1. **Interactive Questions**: Users can engage with questions related to school culture, allowing them to reflect and learn about the importance of inclusivity and positive behaviors.
2. **Challenges and Scenarios**: Users can participate in challenges that present real-life school conflict situations, encouraging critical thinking and problem-solving skills.
3. **Feedback Mechanism**: After answering questions or completing challenges, users receive feedback on their responses to enhance learning outcomes.
4. **Resource Library**: A section where users can access additional resources on school culture, inclusivity, and collaboration.
5. **User Profiles**: Allow users to create profiles to track their progress and achievements within the application.
6. **Collaboration Features**: Tools for users to collaborate with peers and educators on solutions to improve school culture.

## 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**: A structured layout that includes a header with navigation, a main content area for questions and challenges, and a footer with links to resources and contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux (for managing user profiles and progress tracking)

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Components**: Develop key components including Header, Footer, QuestionCard, ChallengeCard, and UserProfile.
3. **Implement Routing**: Use React Router to set up navigation between different sections of the application.
4. **Design Layout**: Using Tailwind CSS, implement the minimalist design with specified color and typography.
5. **Develop Core Features**: Code the functionality for interactive questions, feedback mechanisms, and collaboration tools.
6. **Test User Profiles**: Implement user authentication and profiles to allow progress tracking.
7. **Deploy Application**: Use a platform like Vercel or Netlify for deployment and ensure the application is responsive.

## USER EXPERIENCE
Users will navigate through the application seamlessly, starting from the home page where they can choose to answer questions or participate in challenges. Upon completing activities, they will receive instant feedback and can view their progress on their profile. The application encourages collaboration by allowing users to share insights and solutions, enhancing their overall learning experience.