Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The application is designed as a web app focused on providing psychoeducational techniques to help users manage their emotions. Its purpose is to normalize everyday dissatisfaction and equip users with tools to enhance emotional well-being through various interactive features and content.

## CORE FEATURES
1. **Educational Articles**: A library of articles covering various psychoeducational techniques and emotional management strategies, allowing users to learn at their own pace.
2. **Interactive Exercises**: Engaging exercises that encourage users to practice emotional management techniques in real-life scenarios.
3. **Mood Tracking**: A feature enabling users to log their emotions daily, offering insights into patterns and triggers over time.
4. **Community Forum**: A space for users to share experiences, ask questions, and support one another in managing emotions.
5. **Personalized Recommendations**: A system that suggests articles and exercises based on user interactions and mood tracking data.
6. **Resources and Tools**: Access to additional resources such as videos, podcasts, and downloadable materials that support emotional well-being.

## 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 follow a single-column structure with a prominent header for navigation, a hero section for introducing the app, followed by core features, user testimonials, and a footer with contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React Context API for global state management, with optional libraries like Redux for more complex state interactions.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript using Create React App or Vite.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Layout**: Build the main layout structure including the header, hero section, feature sections, and footer.
4. **Develop Core Features**: Implement each core feature as individual components:
   - Educational Articles: Create a component to display articles with filtering options.
   - Interactive Exercises: Design exercises with clickable elements and feedback.
   - Mood Tracking: Build a logging interface with charts for visualization.
   - Community Forum: Set up a discussion board using a state management solution.
   - Personalized Recommendations: Implement logic to suggest content based on user data.
   - Resources and Tools: Design a resources section with links and downloadable content.
5. **Responsive Design**: Ensure all components are responsive and maintain usability across devices.
6. **User Testing**: Conduct user testing sessions to gather feedback and make iterative improvements.

## USER EXPERIENCE
The user experience will prioritize ease of navigation and engagement. Users will start at the hero section, which provides a warm welcome and a brief overview of the app's purpose. They can easily access educational content through a clean navigation menu. Interactive exercises and mood tracking will be prominently displayed to encourage regular use. The community forum will foster connection and support among users, enhancing the overall experience. Notifications and personalized content will keep users engaged and motivated to explore the app further.

By following this structured prompt, the application will effectively serve its purpose and meet user needs, all while maintaining a clean and minimalist design aesthetic.