Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a modern e-commerce web application for a clothing brand that focuses on a minimalist design aesthetic. The main purpose is to provide an interactive platform for users to shop for men's and women's clothing, emphasizing a clean and simple user experience with easy navigation.

## CORE FEATURES
1. **Hero Section**: A visually appealing hero section that showcases featured products or promotions, with a prominent call-to-action button directing users to shop.
2. **Shop Men's Collection**: A dedicated section for men's clothing, allowing users to browse products with filtering options for size, style, and price.
3. **Shop Women's Collection**: Similar to the men's section, this area showcases women's clothing with filtering options for enhanced user experience.
4. **Product Detail Pages**: Each product will have its own page with detailed descriptions, multiple images, size options, and an "Add to Cart" button.
5. **Shopping Cart**: A simple, accessible shopping cart interface for users to review selected items before proceeding to checkout.
6. **Responsive Design**: The website will adapt to various screen sizes, ensuring a seamless shopping experience on both desktop and mobile 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 structure includes a header with navigation links, a hero section at the top, followed by featured product sections for men and women, and a footer with contact information and social media links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Zustand for handling global state (if necessary)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Create a new React project using Create React App with TypeScript template.
2. **Install Dependencies**: Install Tailwind CSS, shadcn/ui, and any other necessary libraries.
3. **Configure Tailwind**: Set up Tailwind CSS with a custom configuration for the primary color and fonts.
4. **Create Layout Components**: Develop reusable components for the header, footer, product cards, and buttons with the specified styles.
5. **Build the Hero Section**: Implement the hero section with a background image and primary call-to-action button.
6. **Develop Product Sections**: Create the shop sections for men and women, incorporating filtering and sorting functionalities.
7. **Set Up Routing**: Use React Router to manage navigation between the home page and product detail pages.
8. **Implement Shopping Cart Functionality**: Create a simple cart feature that allows users to add and remove items.
9. **Ensure Responsiveness**: Test and adjust the design for various screen sizes to ensure a smooth user experience.
10. **Deploy the Application**: Use a platform like Vercel or Netlify for deployment and ensure that the site is accessible online.

## USER EXPERIENCE
Users will land on a visually engaging home page with a prominent hero section. They can easily navigate to either the men's or women's collections through the header. Each collection will feature a grid of product cards, allowing users to click and view detailed product information. The shopping cart will be easily accessible, enabling a straightforward checkout process. Overall, the design focuses on simplicity and ease of use, guiding users seamlessly through their shopping experience.