Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web app designed to serve as a futuristic AI chatbot for chemistry education. Its primary purpose is to provide an interactive and engaging platform for students to learn chemistry concepts through conversational AI, enhancing their understanding and retention of the subject matter.

## CORE FEATURES
1. **AI Chatbot Interface**: An intuitive chat interface where users can ask chemistry-related questions and receive instant, accurate responses from the AI.
2. **Interactive Learning Modules**: A series of modules covering various chemistry topics, complete with explanations, diagrams, and quizzes to reinforce learning.
3. **User Progress Tracking**: A feature that allows users to track their learning progress and revisit topics where they need improvement.
4. **Resource Library**: A curated collection of articles, videos, and external resources related to chemistry education for deeper exploration.
5. **Feedback Mechanism**: Users can provide feedback on their chatbot interactions, allowing for continuous improvement of the AI's responses.
6. **Responsive Design**: A layout that adapts seamlessly to different screen sizes, ensuring usability across devices.

## DESIGN SPECIFICATIONS
- **Visual Style**: The design will be minimalist, featuring a clean and simple layout with ample white space to enhance readability. Emphasis will be placed on typography, using bold headings and clear body text.
- **Color Mode**: The application will utilize a light theme with dark text on light backgrounds to maintain clarity and focus.
- **Layout**: The main layout will consist of a hero section at the top featuring the chatbot interface, followed by a vertical navigation sidebar for easy access to learning modules and resources. The content area will be organized into sections with clear visual separations.
- **Typography**: Utilize sans-serif fonts for a modern and approachable aesthetic. Headings will be bold and larger in size, while body text will be regular and readable, ensuring a clear hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-first styling and fast design implementation
- **UI Components**: Utilize shadcn/ui for pre-built, customizable UI components
- **State Management**: Consider using Redux or Context API for managing application state as needed.

## IMPLEMENTATION STEPS
1. **Set Up Development Environment**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Component Structure**: Build the main components such as Header, Chatbot, Learning Modules, User Progress, and Resource Library.
3. **Implement Chatbot Feature**: Integrate the AI chatbot functionality, ensuring it connects to a robust API for chemistry queries.
4. **Design Layout with Tailwind CSS**: Use Tailwind CSS to style the components according to the visual specifications, focusing on responsive design.
5. **Build Learning Modules**: Develop interactive learning modules with quizzes and multimedia content.
6. **Set Up User Progress Tracking**: Implement a system for users to log their progress and revisit topics.
7. **Integrate Feedback Mechanism**: Create a feedback form for users to report on their chatbot experience.
8. **Test Across Devices**: Conduct thorough testing to ensure responsiveness and usability on various devices.

## USER EXPERIENCE
Users will engage with the chatbot through a simple, inviting interface. They can easily navigate through learning modules and resources using a sidebar that remains visible as they scroll. The chatbot will provide real-time answers, and users can track their progress visually, receiving prompts to revisit challenging topics. The overall experience will prioritize ease of use, ensuring that learning chemistry is both fun and effective.