Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is an interactive web-based lesson planner designed for teaching foundational concepts in web development. The primary purpose is to guide students through the basics of Git/GitHub, HTML, CSS, JavaScript, and Python using a hands-on approach, particularly through a book-selling website example.

## CORE FEATURES
- **Lesson Planning**: A structured roadmap that outlines daily topics, ensuring students know what to expect in upcoming sessions.
- **Interactive Code Editor**: A workspace with a pre-filled HTML structure that allows students to modify code and see real-time output in a side-by-side layout.
- **Educational Content**: Detailed explanations of key concepts such as HTML elements, tags, and the role of web browsers, presented in a student-friendly format.
- **Visual Feedback**: Dynamic updates in the output grid based on changes made in the code editor, enhancing the learning experience.
- **Engaging Design**: A colorful and friendly aesthetic with animations and transitions that appeal to teenagers without being overly childish.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design focusing on clean layouts with ample white space, a limited but engaging color palette, and an emphasis on clear typography.
- **Color Mode**: Light theme featuring dark text on light backgrounds to ensure readability and comfort during extended use.
- **Layout**: 
  - **Two-Panel Structure**: Left panel for the workspace (code editor), and right panel for the output display. 
  - The code editor will have a basic HTML structure pre-filled to guide students through their coding exercises.
- **Typography**: Use a modern sans-serif font like 'Roboto' for body text and 'Montserrat' for headings, ensuring a clear hierarchy (heading sizes: H1, H2, H3).

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for a robust and scalable application.
- **Styling**: Tailwind CSS to create responsive and visually appealing components with minimal effort.
- **UI Components**: Utilize shadcn/ui for pre-built, accessible, and customizable UI elements.
- **State Management**: Use React's built-in state management for handling input and output seamlessly.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project using Create React App with TypeScript template.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project for styling and UI components.
3. **Create Layout Structure**: Implement a two-panel layout using CSS Grid or Flexbox, with the left panel dedicated to the code editor and the right panel for displaying the output.
4. **Develop Code Editor**: Build a code editor component that allows users to input HTML code, highlighting syntax and providing auto-completion features.
5. **Implement Output Display**: Create a dynamic output area that renders HTML content based on the user's input in the code editor.
6. **Add Animations and Transitions**: Enhance user experience by integrating CSS animations for button interactions, hover effects, and transitions between states in the application.
7. **Test Responsiveness**: Ensure the application is responsive and works well across various devices and screen sizes.

## USER EXPERIENCE
The user experience focuses on interactivity and engagement, allowing students to easily navigate through lessons. The left panel serves as a sandbox for coding, while the right panel provides immediate visual feedback. Clear instructions and a structured roadmap help students stay on track. The inclusion of animations and hover effects makes the application visually engaging, and the overall design is approachable for a teenage audience, striking the right balance between professionalism and friendliness.