Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a minimalist web application designed to provide users with a rich text editor that allows for easy formatting of text. Users can select font families, sizes, line spacing, and apply various text styles such as bold, italic, underline, and more. The primary goal is to create a user-friendly interface that emphasizes simplicity and functionality.

## CORE FEATURES
1. **Font Family Selection**: Users can choose from a variety of font families including Times New Roman, Arial, and Calibri.
2. **Font Size Adjustment**: Options for font sizes ranging from 10pt to 24pt to suit different user preferences.
3. **Line Spacing Control**: Users can set line spacing options (1, 1.15, 1.5, 2) to enhance readability.
4. **Text Formatting Options**: Buttons for bold, italic, underline, strikethrough, and headings to allow users to format their text effectively.
5. **Text Alignment Controls**: Options to align text left, center, right, or justify for better layout control.
6. **Image Insertion**: Users can insert images into the text area to enrich content.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, a minimal color palette, and a strong focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds to enhance readability and user comfort.
- **Layout**: A single-column layout featuring a toolbar at the top for formatting options, followed by a large text area for content creation. Dividers will separate different functional areas.
- **Typography**: Use of sans-serif fonts for UI elements with a clear hierarchy to distinguish between headings and body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript to ensure type safety and maintainability.
- **Styling**: Tailwind CSS for rapid styling and responsive design.
- **UI Components**: Utilize shadcn/ui for consistent UI components.
- **State Management**: Use React's built-in state management or Context API for managing text state and formatting options.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Core Components**:
   - Build the toolbar component with dropdowns for font family, size, and line spacing.
   - Implement buttons for text formatting and alignment.
   - Develop the main text area component where users can input and style their text.
3. **Manage State**: Implement state management to hold the current text and formatting options using React's useState or Context API.
4. **Add Functionality**: Connect the toolbar buttons to their respective formatting functions using document.execCommand or similar methods.
5. **Styling**: Apply Tailwind CSS classes to ensure responsiveness and aesthetic alignment with the minimalist design.
6. **Testing**: Conduct usability tests to ensure all features work as intended and that the interface is intuitive.

## USER EXPERIENCE
Users will interact with the application primarily through the toolbar at the top, allowing them to easily select fonts, sizes, and styles. The text area will update in real-time as users make changes, providing immediate feedback. They can insert images and adjust their layout seamlessly, ensuring a fluid experience. The minimalist design will help users focus on their content without distractions, promoting efficient text editing.