Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is an e-commerce web app designed to showcase a wide range of products in a clean, minimalist environment. Its primary purpose is to provide users with an intuitive shopping experience while emphasizing product discovery and ease of navigation.

## CORE FEATURES
1. **Product Catalog**: A comprehensive list of all available products, featuring filtering and sorting options by category, price, and popularity.
2. **Product Detail Pages**: Each product has a dedicated page with high-quality images, detailed descriptions, pricing, and customer reviews.
3. **Shopping Cart**: A user-friendly shopping cart that allows customers to add, modify, or remove items easily, with a clear summary of selected products and total pricing.
4. **User Accounts**: Customers can create accounts to manage their profiles, view order history, and save favorite products for future reference.
5. **Responsive Design**: The layout adapts seamlessly to various screen sizes, ensuring an optimal experience on mobile, tablet, and desktop devices.
6. **Search Functionality**: A powerful search bar enabling users to quickly find specific products or categories.

## DESIGN SPECIFICATIONS
- **Visual Style**: Emphasizes minimalism with a clean and simple design, abundant white space, and a minimal color palette to keep the focus on product imagery and typography.
- **Color Mode**: Utilizes a light theme with dark text on light backgrounds to enhance readability and maintain a fresh, airy ambiance.
- **Layout**: 
  - Main navigation bar at the top with categories and search functionality.
  - A grid layout for the product catalog, featuring cards for each product. 
  - Detail pages displayed in a two-column layout with images on one side and product details on the other.
- **Typography**: Use a sans-serif typeface for headers (e.g., Helvetica or Arial) and a legible serif font for body text. Maintain a clear hierarchy with larger font sizes for headings and consistent spacing.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust and type-safe development.
- **Styling**: Tailwind CSS for utility-first styling, ensuring a responsive and easily customizable design.
- **UI Components**: Utilize shadcn/ui components for a cohesive and modern user interface.
- **State Management**: Implement React Context API or Redux for managing user state and shopping cart functionality.

## IMPLEMENTATION STEPS
1. **Set up the React project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create the folder structure**: Organize components, pages, and styles in a logical structure.
3. **Implement the navigation bar**: Design a responsive navigation bar that includes product categories and the search feature.
4. **Build the product catalog**: Create a component that fetches and displays products in a grid layout, implementing filtering and sorting features.
5. **Develop product detail pages**: Construct individual product pages with images, descriptions, and customer reviews.
6. **Set up the shopping cart**: Implement functionality to add, remove, and modify items in the cart, and display a summary.
7. **User account management**: Develop user registration and login functionalities, allowing users to access their profiles and order history.
8. **Test responsiveness**: Ensure the application performs well on various devices, adjusting layouts and components as necessary.

## USER EXPERIENCE
Key user interactions should be smooth and intuitive, with clear navigation paths. Users should be able to easily browse the product catalog, filter results, and view product details without confusion. The shopping cart experience should be straightforward, allowing users to quickly see their selected items and proceed to checkout with minimal friction. User accounts should facilitate easy access to order history and saved products, enhancing overall engagement and satisfaction.