Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is an e-commerce web app designed to enhance the checkout process by validating email addresses through regular expressions (regex). Its primary purpose is to ensure that users provide valid email addresses, thereby improving communication and reducing errors during order processing.

## CORE FEATURES
1. **Email Input Field**: A dedicated input field on the checkout page to capture user email addresses with real-time validation.
2. **Regex Validation**: Implementation of a regex pattern to validate the email format as users input their email addresses.
3. **Error Messaging**: Clear and concise error messages displayed below the email input field when an invalid email is entered, guiding users to correct their input.
4. **Responsive Design**: A mobile-friendly layout that ensures optimal usability across different devices and screen sizes.
5. **User Feedback**: Visual indicators (such as color changes) in the input field to signify valid or invalid email addresses, enhancing user experience.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design prioritizes clarity and simplicity, utilizing ample white space and a minimal color palette to keep the focus on functionality and typography.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure readability and a clean aesthetic.
- **Layout**: A centered checkout form layout with the email field prominently placed at the top, followed by the error message directly beneath it, maintaining a clear visual hierarchy.
- **Typography**: Use a sans-serif font like "Roboto" for body text with a larger, bold font for headings. Maintain a hierarchy where headings are 24px, subheadings are 18px, and body text is 14px.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-first styling to ensure rapid development and consistency.
- **UI Components**: Utilize shadcn/ui for pre-styled components that align with the minimalist design philosophy.
- **State Management**: Use React's built-in state management for form handling and validation.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS along with shadcn/ui.
2. **Create Checkout Form Component**: Build a functional component for the checkout form, including the email input field and a space for displaying error messages.
3. **Implement Regex Validation**: Write a regex function to validate the email input. Use this function to check the email format as the user types.
4. **Handle Form Submission**: Create a form submission handler that processes the valid email or displays an error message if the email is invalid.
5. **Style the Component**: Apply Tailwind CSS classes to align with the minimalist design, ensuring ample white space and typographic focus.
6. **Test Responsiveness**: Ensure the layout is responsive by testing on various screen sizes and making adjustments as needed.

## USER EXPERIENCE
Users will interact with the checkout form by entering their email addresses into the designated input field. As they type, the application will validate the input against the regex pattern in real time. If the email format is incorrect, an error message will appear directly below the input field, using clear language to guide the user towards fixing their entry. The input field will change color to indicate whether the email is valid or invalid, enhancing the overall user experience and ensuring a smooth checkout process.