Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed for students who want to organize and enhance their learning by annotating and generating themed content from copied texts. The app enables users to edit generated images based on their notes, allowing for a personalized learning experience. It targets a wide audience, from secondary school to university students, utilizing statistics to improve their learning outcomes.

## CORE FEATURES
1. **Text Annotation**: Allow students to input and save texts from their courses, which can be transformed into visually appealing themes.
2. **Thematic Image Generation**: Automatically generate images related to the copied text that can be customized by users.
3. **Customization Options**: Users can adjust font styles, colors, and background settings of the generated images to suit their preferences.
4. **Learning Analytics**: Provide statistics and insights about the student's learning progress and effectiveness.
5. **User Accounts**: Enable users to create accounts to save their annotations and customizations securely.
6. **Resource Library**: Offer additional learning resources related to the themes generated from their texts.

## 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 should consist of a header with navigation, a central area for text input and customization tools, a sidebar for analytics, and a footer with additional resources and contact information.

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

## IMPLEMENTATION STEPS
1. **Set Up React Environment**: Initialize a new React project with TypeScript and install necessary dependencies including Tailwind CSS and shadcn/ui components.
2. **Create User Authentication**: Set up user authentication using Firebase or another authentication service.
3. **Build Core Features**:
   - Develop the text annotation interface allowing users to input and save texts.
   - Implement the thematic image generation feature using a suitable API or library.
   - Create the customization interface for users to modify their generated images.
4. **Integrate Learning Analytics**: Implement data tracking to gather insights on user interactions and learning progress.
5. **Design UI Components**: Utilize Tailwind CSS to design clean and responsive UI components adhering to the specified design specifications.
6. **Testing and Iteration**: Conduct usability testing with real users to refine features and ensure a smooth user experience.

## USER EXPERIENCE
Students will interact with the application by inputting their course texts into a designated area. Once the text is submitted, the app will generate a themed image that they can edit based on their preferences. Users can track their progress through the learning analytics dashboard, which provides insights into their learning habits and improvements. The application should be responsive, ensuring a seamless experience across different devices, including tablets and smartphones.