Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to facilitate VIP member logins with a verification code system. Users will receive a 4-digit verification code via email, which they will enter on the platform to gain access. The application aims to ensure a secure and efficient login process while providing a minimalist user experience.

## CORE FEATURES
1. **VIP Member Login**: A secure login system for VIP members requiring a 4-digit verification code sent via email.
2. **Email Verification Code Generation**: Automatically generates and sends a unique verification code to the registered email upon login request.
3. **Code Entry Interface**: A user-friendly interface where members can enter their received verification code.
4. **Error Handling**: Displays clear error messages for invalid codes and provides guidance for users to retry.
5. **Responsive Design**: Ensures a seamless experience across various devices, including desktops, tablets, and smartphones.

## 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 centered login form with ample white space, a clear input field for the verification code, and a submit button. Below the form, there will be space for error messages and instructions.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux or Context API (if needed for managing authentication states)

## IMPLEMENTATION STEPS
1. **Set up the React application**:
   - Create a new React project using Create React App with TypeScript.
   - Install Tailwind CSS and set up PostCSS for styling.

2. **Create the Email Verification Logic**:
   - Build the backend service (using Node.js or similar) to handle the generation and sending of the verification code via email.
   - Connect the frontend to the backend service to request a code when a user attempts to log in.

3. **Develop the Login Interface**:
   - Design the login form using Tailwind CSS for styling.
   - Implement input fields for the verification code and a submit button.

4. **Implement Code Validation**:
   - Create a function to validate the entered code against the one sent via email.
   - Show error messages for invalid codes using conditional rendering.

5. **Ensure Responsive Design**:
   - Use Tailwind CSS to make the login interface responsive, adjusting to various screen sizes.

6. **Testing and Quality Assurance**:
   - Conduct thorough testing of the login process, error handling, and responsiveness.
   - Gather user feedback for improvements.

## USER EXPERIENCE
Users will first navigate to the login page where they will enter their email to receive the verification code. Once they receive the code, they will enter it into the application. If the code is valid, they will gain access; if not, a clear error message will prompt them to try again. The minimalist design will ensure that users can focus on the task at hand without distractions, creating a smooth and efficient login experience.