Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project aims to create a minimalist e-commerce web application that provides users with a seamless shopping experience. The website will focus on showcasing products with a clean design, easy navigation, and a straightforward checkout process.

## CORE FEATURES
1. **Product Catalog**: A visually appealing grid layout displaying products with images, descriptions, prices, and an "Add to Cart" button.
2. **Shopping Cart**: A user-friendly cart interface where customers can view selected items, adjust quantities, and proceed to checkout.
3. **User Authentication**: Secure login and registration functionality to allow users to manage their accounts and view order history.
4. **Checkout Process**: A streamlined, step-by-step checkout flow, including payment processing and order confirmation.
5. **Search Functionality**: A search bar enabling users to quickly find products based on keywords or categories.
6. **Responsive Design**: An adaptable layout that ensures optimal viewing on various devices, including desktops, tablets, and smartphones.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: The main layout will consist of a top navigation bar, a hero section for featured products, a grid layout for the product catalog, and a footer with contact information and links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux (for managing user authentication and cart state)

## IMPLEMENTATION STEPS
1. **Set up the project**: Initialize a new React project with TypeScript and install Tailwind CSS along with necessary dependencies.
2. **Create the folder structure**: Organize components, pages, and assets (images, styles) within the project.
3. **Develop the navigation bar**: Implement a top navigation bar that includes links to the product catalog, cart, and user authentication.
4. **Build the product catalog**: Create a component to display products dynamically, fetching data from a mock API or a local JSON file.
5. **Implement user authentication**: Set up login and registration components, utilizing form validation and state management.
6. **Design the shopping cart**: Create a cart component that displays selected items, allowing users to modify quantities and proceed to checkout.
7. **Develop the checkout process**: Implement a multi-step checkout flow, integrating payment processing (using a service like Stripe).
8. **Ensure responsiveness**: Use Tailwind CSS utility classes to make the application responsive across all devices.
9. **Test the application**: Conduct thorough testing to ensure all features work as intended and the user experience is smooth.

## USER EXPERIENCE
Key user interactions will include browsing the product catalog, adding items to the cart, and proceeding through a simple, guided checkout process. The layout will prioritize ease of use, with clear calls to action and intuitive navigation to enhance the overall shopping experience. Users will appreciate the clean design that allows them to focus on products without distraction.