Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is an e-commerce web platform designed for purchasing a variety of clothing items, focusing on women's crop tops and men's t-shirts. The primary goal is to provide users with an intuitive shopping experience featuring diverse product collections, a range of colors, and attractive discounts.

## CORE FEATURES
1. **Product Collections**: A dedicated section for women's crop tops and men's t-shirts, allowing users to browse through different styles and designs easily.
2. **Color Variants**: Each product will showcase all available colors, including black, blue, purple, yellow, and multi-color options, enhancing user choice.
3. **Discount Promotions**: Highlight discounts on all products to attract customers and encourage purchases.
4. **Responsive Design**: The web app will be optimized for various devices, ensuring a seamless shopping experience on desktops, tablets, and mobile phones.
5. **User Reviews and Ratings**: Customers can leave reviews and ratings for products, helping others make informed purchasing decisions.
6. **Shopping Cart**: A user-friendly shopping cart that allows customers to view selected items, adjust quantities, and proceed to checkout effortlessly.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design featuring a clean and simple layout with plenty of white space, emphasizing product images and easy navigation.
- **Color Mode**: Light theme with dark text on light backgrounds to enhance readability and maintain a modern aesthetic.
- **Layout**: A grid-based layout showcasing products in uniform rows, with a sidebar for filtering by collection and color. The navigation bar will be positioned at the top for easy access to different sections.
- **Typography**: Utilize sans-serif fonts for a modern and clean look. Headings will be bold and larger, while body text will be regular weight for clarity.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building a robust and scalable application.
- **Styling**: Tailwind CSS to ensure quick styling adjustments and responsive design without heavy CSS overhead.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist design.
- **State Management**: Implement React's Context API or a state management library like Redux for handling global state, such as user cart items and authentication.

## IMPLEMENTATION STEPS
1. **Set Up Development Environment**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Install Dependencies**: Add shadcn/ui for UI components and any state management libraries as needed.
3. **Create Project Structure**: Organize folders for components, pages, styles, and utilities.
4. **Build UI Components**: Design and implement components for headers, product cards, filters, and the shopping cart using Tailwind CSS.
5. **Implement Routing**: Set up routing using React Router to navigate between different product collections and the shopping cart.
6. **Fetch Product Data**: Use an API or static JSON files to populate product details, including images, descriptions, colors, and prices.
7. **Integrate State Management**: Set up context or Redux to manage cart state and user sessions.
8. **Testing and Debugging**: Conduct thorough testing to ensure functionality and responsiveness across devices.
9. **Deploy the Application**: Deploy the web app to a hosting platform such as Vercel or Netlify for public access.

## USER EXPERIENCE
Users will land on a clean and inviting homepage featuring highlighted collections and current discounts. They can easily navigate through categories using the top navigation bar. Upon selecting a product, users will view detailed information, including color options and customer reviews. The shopping cart will be accessible at all times, allowing for smooth transitions to checkout. The overall flow emphasizes simplicity, ensuring users can quickly find, select, and purchase their desired items without confusion.