Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a minimalist e-commerce web app focused on streetwear clothing. Its primary purpose is to allow users to browse, select, and purchase various clothing items categorized by type, such as t-shirts, shorts, and hoodies. The design emphasizes simplicity and ease of use, providing a seamless shopping experience.

## CORE FEATURES
1. **Product Catalog**: A comprehensive listing of streetwear items with high-quality images, descriptions, and prices, organized by categories like t-shirts, shorts, and hoodies.
2. **Shopping Cart**: A user-friendly cart feature that allows customers to add, remove, and adjust quantities of items before proceeding to checkout.
3. **Category Navigation**: Intuitive navigation options for users to easily filter and find clothing items by category.
4. **User Account Management**: A system for users to create accounts, track their orders, and manage their personal information.
5. **Contact Page**: A dedicated section for customer inquiries, featuring a simple contact form and company contact information.
6. **Responsive Design**: An adaptive layout that ensures a seamless experience across devices, including desktops, tablets, and smartphones.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design with ample white space and a focus on clean lines and typography, ensuring that product images stand out.
- **Color Mode**: Light theme featuring a minimal color palette with dark text set against light backgrounds for optimal readability.
- **Layout**: 
  - A header with the brand logo and navigation links.
  - A main content area displaying products in a grid format.
  - A sidebar for category filters.
  - A footer with essential links and contact information.
- **Typography**:
  - Primary Font: 'Roboto' for body text, ensuring legibility.
  - Secondary Font: 'Montserrat' for headings, creating a modern, stylish look.
  - Hierarchy: Use varying font sizes and weights to distinguish headings, subheadings, and body text clearly.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building a robust and scalable application.
- **Styling**: Tailwind CSS for utility-first styling, allowing for rapid customization and responsive design.
- **UI Components**: Utilize shadcn/ui for pre-designed components that maintain consistency with the minimalist aesthetic.
- **State Management**: Use React Context API or Zustand for efficient state management throughout the application.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Layout Components**:
   - Build the Header component with navigation links.
   - Develop a Footer component for essential links and contact information.
3. **Implement Product Catalog**:
   - Create a Product component that displays individual items.
   - Develop a ProductList component to aggregate and display all products in a grid layout.
4. **Develop Shopping Cart**:
   - Create a Cart component to manage added items and their quantities.
   - Implement functions to add, remove, and update cart items.
5. **Add User Account Management**:
   - Set up authentication and user account management features, including sign-up and login forms.
6. **Create Contact Page**:
   - Implement a Contact component with a form for user inquiries.
7. **Responsive Design**: Utilize Tailwind CSS classes to ensure all components are responsive and user-friendly on various devices.
8. **Testing and Debugging**: Conduct thorough testing of all features and fix any bugs or issues encountered.

## USER EXPERIENCE
Users will be welcomed by a clean homepage where they can quickly navigate through categories to find their desired items. The shopping cart functionality allows for easy management of selected items, while the account management feature enhances personalization and order tracking. The contact page provides a straightforward way for users to reach out for support, ensuring a positive overall experience. The responsive design ensures that users enjoy a fluid experience whether they are on a desktop or mobile device.