Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project aims to create a comprehensive web application focused on delivering a premium microlearning experience. The application will transform existing educational modules into engaging, scientifically backed content while maintaining user interactivity and practical application. It will cater to various user profiles within organizations, promoting behavior change and business relevance.

## CORE FEATURES
1. **Hero Section**: A captivating headline and subheadline with a clear call-to-action (CTA) to start the module, designed to draw users in and encourage engagement.
   
2. **Theory Blocks**: Each module will present scientific content in digestible sections, preserving original material while expanding with trusted theories and studies. Content will be broken into smaller visual blocks to enhance cognitive load management.

3. **Practical Translation**: Following each theory block, users will receive practical insights that translate complex theories into actionable items relevant to their work environment.

4. **Profile-Specific Applications**: Unique sections for different user profiles (Collaborator, Leader, CEO) that provide tailored insights and applications of the content, ensuring relevance and engagement.

5. **Interactivity**: Incorporate cards, expandable sections, and micro-interactions to facilitate user engagement without sacrificing depth or clarity.

6. **Questions & Exercises**: Each module will include fixation questions and practical exercises to reinforce learning and encourage immediate application of concepts.

## 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 clean layout with a hero section at the top, followed by theory blocks, practical translations, profile-specific applications, interactivity elements, and a closing section with motivational messages.

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

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui for styling.
2. **Create Core Components**: Develop the hero section, theory blocks, and practical translation components following the designed specifications.
3. **Implement Interactivity**: Add expandable sections and micro-interactions to enhance user engagement throughout the modules.
4. **Develop Profile-Specific Logic**: Build unique content views for each user profile ensuring varied insights and applications.
5. **Integrate Questions and Exercises**: Design and implement the question and exercise components for each module, ensuring they provide feedback and encourage user input.
6. **Testing and QA**: Conduct thorough testing to ensure all modules function correctly and meet the quality standards defined in the project objectives.

## USER EXPERIENCE
Users will navigate through a clean, minimalist interface designed for easy consumption of content. Upon entering the application, they'll be greeted by the hero section that encourages them to start their learning journey. As they interact with the theory blocks, they'll experience a seamless flow of information, with practical translations and tailored applications relevant to their roles. Interactive elements will keep users engaged, providing a dynamic learning experience that is both informative and actionable. The self-assessment features will allow users to reflect on their learning, further reinforcing the material covered in each module.