Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to simplify educational content, making it easy to read and understand at a glance. By reducing complexity and cognitive load, the application aims to provide users with a seamless learning experience that prioritizes clarity and accessibility.

## CORE FEATURES
1. **Content Simplification**: Automatically reformats complex educational materials into concise, digestible formats suitable for various learning styles.
2. **Visual Summaries**: Provides infographics and visual aids that summarize key concepts, promoting better retention and understanding.
3. **Interactive Quizzes**: Engaging quizzes that adapt to users' learning progress, reinforcing knowledge while keeping cognitive load low.
4. **Bookmarking & Notes**: Users can easily bookmark important sections and take notes, allowing for quick reference and review.
5. **Search Functionality**: A robust search feature that allows users to quickly find specific topics or concepts within the content.
6. **User Feedback System**: Simple feedback forms to gather user insights and continuously improve content and features.

## DESIGN SPECIFICATIONS
- **Visual Style**: The design follows a minimalist approach, emphasizing clean lines and ample white space to foster focus and clarity. UI elements should be straightforward, avoiding unnecessary complexity.
- **Color Mode**: The application will utilize a light theme, with dark text on light backgrounds to ensure readability and comfort.
- **Layout**: A grid layout will be employed to organize content effectively, with sections clearly defined by generous padding and margins. The main navigation will be a top bar with a dropdown for secondary features.
- **Typography**: Use a sans-serif font such as "Inter" or "Roboto" for body text to enhance readability. Headings should be bold and slightly larger, creating a clear visual hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for type safety and component-based architecture.
- **Styling**: Tailwind CSS for utility-first styling, allowing rapid design iterations while maintaining consistency.
- **UI Components**: Implement shadcn/ui for high-quality, accessible components that fit the minimalist aesthetic.
- **State Management**: Utilize Zustand or React's Context API for lightweight state management.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript support and install Tailwind CSS.
   - Run `npx create-react-app my-app --template typescript`
   - Follow Tailwind CSS installation instructions to integrate with React.
   
2. **Install Dependencies**: Add shadcn/ui and Zustand for state management.
   - Run `npm install @shadcn/ui zustand`
   
3. **Create Core Components**: Develop core components for the application including Header, Footer, ContentArea, Quiz, and NoteSection.
4. **Implement Routing**: Set up React Router for navigation between different sections of the application.
5. **Design Layout**: Structure the main layout using Tailwind CSS classes to ensure responsiveness and adherence to the minimalist design.
6. **Integrate Features**: Add core features one by one, beginning with Content Simplification and Visual Summaries, ensuring each feature is functional before moving on.
7. **Testing**: Implement unit tests and user testing to gather feedback on usability and effectiveness.
8. **Deploy**: Use a service like Vercel or Netlify for deployment, ensuring optimal performance and accessibility.

## USER EXPERIENCE
Users will start on the main dashboard, greeted by a clean interface that highlights featured content. Navigation options will be intuitive, and clicking on a topic will lead to a simplified content view with visual summaries prominently displayed. Quizzes will appear after each section, adapting to user performance. Users can bookmark essential sections and leave feedback easily, promoting a continuous improvement loop for content and features. The overall experience will be fluid and engaging, guiding users through their educational journey with minimal distractions.