Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to generate prompts for AI avatars, allowing users to customize scenes and refine their avatar's appearance. The application will feature reference photos and provide options for different everyday scenarios and international locations, culminating in a final comment box for user feedback on the number of images to produce.

## CORE FEATURES
1. **Scene Customization**: Users can choose from a variety of everyday scenarios and international locations to create personalized prompts for their AI avatars.
2. **Avatar Refinement**: A feature that allows users to adjust and refine their avatar’s appearance with various attributes and styles.
3. **Reference Photos**: A gallery of reference images that users can utilize for inspiration or as a basis for their prompts.
4. **Final Touches Comment Box**: An interactive comment box where users can provide feedback or additional input on their generated images.
5. **Image Output Settings**: Users can specify the number of images they wish to generate based on their customized settings.
6. **User-friendly Interface**: A clean and intuitive UI that guides users through the customization process effortlessly.

## 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 structure consists of a hero section at the top, followed by a features section, an interactive customization area, a gallery for reference photos, and a footer with contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux (for managing user preferences and avatar states)

## IMPLEMENTATION STEPS
1. **Set Up Project Environment**: Initialize a new React project with TypeScript. Install necessary dependencies such as Tailwind CSS and shadcn/ui.
2. **Create Layout Components**: Develop the main layout structure, including the hero section, features section, customization area, and footer.
3. **Implement Core Features**:
   - Develop the scene customization component to allow users to select scenarios and locations.
   - Create the avatar refinement component where users can adjust avatar attributes.
   - Build the reference photos gallery displaying available images.
   - Add the final touches comment box for user feedback.
   - Integrate functionality to capture the number of images to generate.
4. **Style Application**: Use Tailwind CSS to apply the minimalist design specifications. Ensure responsiveness across different devices.
5. **Implement State Management**: Set up Redux to manage and persist user selections and avatar states.
6. **Testing**: Conduct thorough testing to ensure all features work as intended and the UI remains user-friendly.

## USER EXPERIENCE
Users will begin their journey on a clean landing page where they can select a scenario or location for their AI avatar. As they customize their avatar, they will see real-time updates based on their selections. The user interface will be intuitive, guiding users through each step seamlessly, with options to view reference images and finalize their inputs in the comment box before generating their images. The overall experience will prioritize simplicity, ensuring users feel comfortable and engaged throughout the process.