Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application focused on enhancing the user experience during a face scanning process. The main purpose is to implement a visually appealing effect that occurs when the face scan is nearly complete, ensuring the effect is smooth and free of lag, while maintaining a minimalist aesthetic.

## CORE FEATURES
1. **Face Scan Animation**: A visually engaging animation that activates as the face scan approaches completion, providing immediate visual feedback to users.
2. **Responsive Design**: The application will adapt to various screen sizes, ensuring usability across devices.
3. **Real-time Performance**: The application will be optimized to ensure that the face scan effect runs smoothly without lag.
4. **User Feedback Mechanism**: A simple interface for users to provide feedback on the scanning experience, helping to refine the effect further.
5. **Minimalist UI**: A clean, uncluttered user interface that focuses on the scanning process, reducing distractions.

## 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 will include a centered hero section for the face scan, followed by the animation display area, user feedback section, and a footer with contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React's context API for managing state across components, if necessary.

## IMPLEMENTATION STEPS
1. **Set up the project**: Initialize a new React application using Create React App with TypeScript template.
2. **Install dependencies**: Install Tailwind CSS and shadcn/ui components for styling and UI components.
3. **Create the layout structure**: Implement the main layout with a centered hero section, animation area, feedback form, and footer.
4. **Develop the face scan feature**: Code the animation effect that triggers during the face scan process, ensuring it is smooth and visually appealing.
5. **Optimize performance**: Test the application for lag and improve performance where necessary.
6. **Add user feedback functionality**: Implement a simple feedback form connected to a state management solution for collecting user inputs.

## USER EXPERIENCE
Users will interact with the application through a straightforward interface where they initiate the face scan. As the scan progresses, the engaging animation will provide visual feedback, enhancing the overall experience. The minimalist design will ensure users focus solely on the scan without unnecessary distractions, while the feedback mechanism allows for continuous improvement based on user suggestions.