Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is an e-commerce web application focused on selling clothing and accessories. The main purpose of the application is to provide users with a seamless shopping experience, showcasing products in a visually appealing manner while ensuring easy navigation and a smooth checkout process.

## CORE FEATURES
1. **Product Catalog**: Display a grid of clothing and accessories with images, prices, and brief descriptions. Users can filter and sort products based on categories, sizes, and colors.
2. **Product Detail Page**: Each product has its own detail page with high-quality images, detailed descriptions, size options, and an "Add to Cart" button.
3. **Shopping Cart**: Users can view items they've added to their cart, adjust quantities, and proceed to checkout.
4. **User Authentication**: Allow users to create accounts, log in, and manage their profiles and order histories.
5. **Checkout Process**: A streamlined checkout process that includes address entry, payment options, and order confirmation.
6. **Responsive Design**: Ensure the application is mobile-friendly, providing an optimal experience on all devices.

## 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 feature a header with navigation links, a hero section showcasing featured products, a product grid for browsing, a footer with contact information and social media links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui for pre-built components to enhance UI consistency and speed up development.
- **State Management**: React Context API or a state management library like Redux if necessary.

## IMPLEMENTATION STEPS
1. **Set up the project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create the main layout**: Develop the header, footer, and main content area using Tailwind CSS for styling.
3. **Implement routing**: Use React Router to manage navigation between the home page, product detail pages, and user account pages.
4. **Build the Product Catalog**: Fetch product data from a mock API or static JSON file and render it in the product grid.
5. **Develop the Product Detail Page**: Create a detailed view for each product, including image galleries and size selection.
6. **Set up User Authentication**: Implement user registration and login forms, utilizing local storage or a mock authentication service for managing user sessions.
7. **Create the Shopping Cart**: Develop functionality for adding/removing items to the cart and adjusting quantities.
8. **Implement Checkout Process**: Create a multi-step checkout form that collects user address and payment details, with validation.
9. **Test Responsiveness**: Ensure the application looks and functions well on various devices and screen sizes.

## USER EXPERIENCE
Users will start on the homepage, greeted by a clean layout and featured products. They can navigate easily through categories, add items to their cart, and check out with minimal clicks. The application will provide feedback for actions like adding items to the cart and during the checkout process. Overall, the goal is to make the shopping experience intuitive, fast, and enjoyable, with a focus on minimalism and clarity throughout the interface.