Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to enhance the checkout process for an e-commerce platform specializing in air coolers, targeting middle-income audiences in India. It aims to ensure that customers enter their pincode on the cart page before proceeding to checkout, thus verifying delivery options and enhancing user experience.

## CORE FEATURES
1. **Pincode Entry Field**: A mandatory input field on the cart page where customers must enter their pincode to proceed.
2. **Add to Cart Functionality**: Users can add products to their cart without entering the pincode, allowing for product exploration.
3. **Checkout Blockage**: The checkout button is disabled until the user enters a valid pincode, providing immediate feedback.
4. **Error Handling**: Clear error messages will inform users if the entered pincode is invalid or missing.
5. **User Confirmation**: A modal or toast notification confirming successful pincode entry will guide the customer towards the next steps.
6. **Responsive Design**: The application will be fully responsive, ensuring usability on various devices and screen sizes.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - A clean and simple design with ample white space, a minimal color palette, and a focus on typography to enhance readability.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure readability and a pleasant user experience.
- **Layout**: 
  - **Header**: Contains the logo and navigation links.
  - **Main Section**: Displays the cart items and the mandatory pincode entry field prominently.
  - **Footer**: Includes contact information and links to other pages.
- **Typography**: 
  - Use a sans-serif font like **Roboto** or **Montserrat** for body text for improved legibility.
  - Set the main heading (H1) to 24px, subheadings (H2) to 20px, and body text to 16px.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust type-checking and component management.
- **Styling**: Tailwind CSS for utility-first styling, enabling quick and responsive design implementations.
- **UI Components**: Utilize shadcn/ui for pre-designed components that align with the minimalist aesthetic.
- **State Management**: Use React's built-in state management or Context API if needed for managing the cart state.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Design Layout**: Create the header, main section, and footer components based on the specified layout.
3. **Implement Cart Functionality**: Develop the cart component that lists added products and includes the pincode input field.
4. **Pincode Validation Logic**: Implement logic to validate the pincode entry and control the checkout button state.
5. **User Feedback Mechanism**: Add error handling and feedback notifications for pincode entry.
6. **Responsive Testing**: Ensure the application is responsive and test across different devices and screen sizes.

## USER EXPERIENCE
Users will land on the cart page after adding products. They will see their selected items and a clear prompt to enter their pincode. The checkout button will remain disabled until a valid pincode is entered, guiding them towards completing their purchase. Clear error messages will assist users in correcting any mistakes, while responsive design ensures a seamless experience across devices. 

By implementing these features and following the specified design principles, the application will effectively meet the user’s vision and enhance the overall shopping experience.