Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is an e-commerce web application focused on personal care products, designed to facilitate an engaging shopping experience for users. The application will allow customers to browse products, utilize coupon codes, and manage their shopping cart, all while providing a modern and visually appealing interface.

## CORE FEATURES
1. **Product Catalog**: A visually appealing section displaying various personal care products with images, descriptions, and prices.
2. **Shopping Cart**: A feature that allows users to add, remove, and adjust quantities of items, displaying a running total.
3. **Coupon Code Integration**: Users can enter promo codes to receive discounts at checkout, enhancing the purchasing experience.
4. **User Registration and Login**: A simple authentication system for users to create accounts, log in, and manage their orders.
5. **Contact Form**: A user-friendly form for inquiries and customer support, ensuring communication is straightforward and effective.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design will feature a clean and simple aesthetic with ample white space to improve readability and focus on product imagery.
- **Color Mode**: Light theme with dark text on light backgrounds, using soft green and light blue accents to align with the personal care theme.
- **Layout**: The layout will consist of a hero section at the top showcasing featured products, followed by product categories, a shopping cart summary, and a footer with contact information and links.
- **Typography**: Use modern sans-serif fonts for headings (e.g., Montserrat) and body text (e.g., Open Sans), maintaining a clear hierarchy with larger font sizes for headings and comfortable line spacing for readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for quick and responsive design
- **UI Components**: Utilize shadcn/ui for pre-built components that enhance the user experience
- **State Management**: Use React Context API or Redux for managing global state, particularly for the shopping cart functionality.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui components.
3. **Create Layout Components**: Design the main layout structure including the header, hero section, product cards, shopping cart, and footer.
4. **Implement Product Catalog**: Fetch product data (mock data can be used initially) and display it in a grid format.
5. **Add Shopping Cart Functionality**: Create a cart context to manage cart state, allowing items to be added, removed, and updated.
6. **Integrate Coupon Code Feature**: Develop a simple input field for coupon codes and logic to apply discounts.
7. **Set Up User Authentication**: Implement registration and login functionalities, ensuring secure password handling.
8. **Create Contact Form**: Develop a form that captures user inquiries and validates input.
9. **Test Responsiveness**: Ensure that the application is fully responsive on various devices and screen sizes.
10. **Deploy Application**: Use platforms like Vercel or Netlify to host the application and make it accessible.

## USER EXPERIENCE
The user journey begins with a welcoming hero section that highlights promotional products. Users can easily navigate through the product catalog, add items to their cart, and apply discount coupons at checkout. An intuitive shopping cart displays a summary of selected items, while the seamless registration and login process ensures that users can manage their profiles and past orders efficiently. The contact form provides a direct line for customer support, enhancing trust and user satisfaction throughout their shopping experience.