Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application that allows users to create and edit content directly on the webpage in a user-friendly manner. The main purpose is to provide a simple, interactive platform for users to make on-the-fly edits to the content displayed, enabling a dynamic editing experience without the need for complex interfaces.

## CORE FEATURES
1. **Editable Content Area**: Users can click anywhere on the page to make text and content editable, allowing for instant modifications.
2. **Save Changes**: Users can save their changes to the content, which will persist across sessions.
3. **Reset to Original**: A button to reset the content back to its original state if users wish to discard any edits.
4. **User Feedback**: Visual indicators (like toast notifications) to confirm when changes are saved or reset.
5. **Mobile Responsiveness**: The application should function seamlessly on various devices, ensuring that editing is possible on both mobile and desktop.

## 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 consists of a central editable content area with a toolbar above it for actions like save and reset, and a footer with additional information or links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Use React Context API for managing the state of editable content and user notifications.

## IMPLEMENTATION STEPS
1. **Setup the Project**: Initialize a new React project with TypeScript using Create React App or Vite.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling and component management.
3. **Create Main Components**:
   - **EditableContent**: This component will handle the content area where users can click to edit text.
   - **Toolbar**: Create a toolbar component with buttons for saving and resetting changes.
   - **Notification**: Implement a notification component to provide user feedback on actions.
4. **Implement State Management**: Use React Context API to manage the editable content and the state of notifications.
5. **Styling**: Apply Tailwind CSS classes to achieve the minimalist design, ensuring responsiveness across devices.
6. **Testing**: Thoroughly test the application for bugs and ensure that the editing functionality works as expected across different browsers and devices.

## USER EXPERIENCE
Users will arrive at a clean, minimalist interface with a large editable area prominently displayed. Upon clicking the content, the text will become editable, allowing for immediate interaction. The toolbar will provide clear options to save or reset edits, with visual feedback provided through notifications to enhance the user experience. The application will adapt smoothly to different screen sizes, ensuring that users can edit content comfortably on both mobile and desktop devices.