Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a web application that serves as a tutorial for users of an existing app. The primary purpose is to provide clear, visual guidance on how to use the app effectively, enhancing user experience and reducing learning time. The tutorial will be embedded within the app, making it easily accessible to all users.

## CORE FEATURES
1. **User-Friendly Interface**: A clean and intuitive interface that allows users to navigate through the tutorial seamlessly.
2. **Step-by-Step Instructions**: Detailed, easy-to-follow steps that guide users through the app's functionalities.
3. **Screenshot Integration**: Each tutorial step will include relevant screenshots to visually demonstrate the app's features.
4. **Search Functionality**: Users can quickly find specific topics or sections within the tutorial.
5. **Progress Tracking**: A feature that allows users to track their progress through the tutorial, resuming where they left off.
6. **Feedback System**: Users can provide feedback on the tutorial, allowing for continuous improvement based on user experience.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design emphasizes a clean and simple aesthetic with ample white space, focusing on clarity and usability. 
- **Color Mode**: Light theme with dark text on light backgrounds, ensuring high readability.
- **Layout**: The main layout will feature a sidebar for navigation, a content area for the tutorial steps, and a header with the app logo and title. Sections will be clearly delineated with ample spacing.
- **Typography**: Use sans-serif fonts such as **Inter** or **Roboto** for headings and body text to maintain a modern and clean look. Utilize a font size hierarchy that emphasizes headings (e.g., h1: 24px, h2: 20px, body: 16px).

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for type safety and component-based architecture.
- **Styling**: Tailwind CSS for utility-first styling, allowing for rapid design and responsiveness.
- **UI Components**: Utilize **shadcn/ui** for pre-designed components that align with the minimalist aesthetic.
- **State Management**: Implement React's built-in state management or consider using Context API for managing tutorial progress and user feedback.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Layout Components**: Develop the main layout structure including the sidebar, header, and content area.
3. **Implement Navigation**: Build a sidebar navigation that links to different tutorial sections.
4. **Develop Tutorial Steps**: Create a component for displaying tutorial steps, integrating screenshots and text descriptions.
5. **Add Search Functionality**: Implement a search bar that filters tutorial steps based on user input.
6. **Incorporate Progress Tracking**: Use local storage or context to save and retrieve user progress within the tutorial.
7. **Feedback Feature**: Develop a simple form for users to submit feedback about the tutorial's effectiveness.

## USER EXPERIENCE
Users will start on the homepage of the tutorial app, where they can easily access different sections via the sidebar. Each tutorial step will be visually engaging, utilizing screenshots to guide them through functionalities. The search feature will allow for quick access to specific areas, enhancing the overall experience. Users will receive prompts to save their progress and provide feedback, ensuring the tutorial remains relevant and user-centered.