Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to provide various generators for personal and business documents (such as CPF, CNPJ, and more) through a clean and minimalist interface. Users can easily access different generators from a sidebar menu, with clear instructions on how to save generated fields. The application aims to offer convenience and efficiency in generating necessary documents.

## CORE FEATURES
- **Gerador de CPF:** Allows users to generate a valid CPF number.
- **Gerador de CNPJ:** Enables the creation of a valid CNPJ number for businesses.
- **Gerador de Pessoas:** Generates random personal information for character creation or testing purposes.
- **Gerador de Empresas:** Facilitates the generation of company names and details.
- **Gerador de CEP:** Generates random postal codes for testing or use cases.
- **Gerador de Senhas:** Creates random passwords with customizable complexity.
- **Sorteador:** A random selector tool for making decisions or drawing lots.

## 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 will feature a sidebar menu on the left for navigation, a central content area displaying the generators, and a footer with additional resources and information.

## TECHNICAL REQUIREMENTS
- **Framework:** React with TypeScript
- **Styling:** Tailwind CSS
- **UI Components:** shadcn/ui
- **State Management:** Use React's Context API or any preferred state management library if necessary.

## IMPLEMENTATION STEPS
1. **Set Up the Project:**
   - Initialize a new React project using Create React App with TypeScript.
   - Install Tailwind CSS and configure it in your project.
   - Install shadcn/ui for UI components.

2. **Create the Layout:**
   - Build a sidebar component for navigation.
   - Create a main content area to display the selected generator.
   - Implement a footer for additional links and information.

3. **Implement Generators:**
   - Develop individual components for each generator (e.g., CPF, CNPJ).
   - Ensure each component has an input field, a button to generate, and instructions on saving.

4. **Add Navigation:**
   - Set up routing to switch between different generators using React Router.
   - Ensure the sidebar highlights the active generator.

5. **Style Components:**
   - Use Tailwind CSS to apply the specified design elements to your layout.
   - Make sure to adhere to the specified typography and color scheme.

6. **Testing:**
   - Test each generator for accuracy and functionality.
   - Ensure responsiveness across different devices.

## USER EXPERIENCE
Users will interact with the application by selecting a generator from the sidebar. Upon selection, the main content area will update to show the generator's interface, including an input field and a generate button. Users will receive clear instructions on how to save their generated output, enhancing usability. The minimalist design will ensure that the focus remains on functionality, with intuitive navigation for a seamless experience.