Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is an e-commerce web application designed to showcase various products with an emphasis on style and user experience. The application will allow users to select sizes and view multiple images of each product, ensuring a comprehensive shopping experience. The overall design will be inspired by high-quality templates, enhancing visual appeal and functionality.

## CORE FEATURES
1. **Product Listing**: Display multiple products with images, descriptions, and pricing. Each product will have options for size selection.
2. **Image Gallery**: Allow users to view multiple images of each product, enhancing the shopping experience.
3. **Size Selector**: Implement a user-friendly interface for selecting product sizes, ensuring clarity and ease of use.
4. **Shopping Cart**: Enable users to add products to a shopping cart for later purchase, maintaining a seamless transition to checkout.
5. **Responsive Design**: Ensure that the application is fully responsive, providing an optimal viewing experience across 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 layout will feature a grid display for products, a header with navigation, and a footer with contact information. The product selection area will be prominent, with ample space for images and descriptions.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux for managing application state if necessary

## IMPLEMENTATION STEPS
1. **Set up the React environment**: Initialize a new React project with TypeScript and install the necessary dependencies (React Router, Tailwind CSS, etc.).
2. **Design the layout**: Create a responsive grid layout for the product listing, ensuring each product card includes an image, description, price, and size selector.
3. **Implement product details**: Develop a component for individual product details, including an image gallery for multiple product views.
4. **Add size selection functionality**: Implement the size selector for each product, ensuring that the selected size updates the display accordingly.
5. **Create a shopping cart**: Develop the shopping cart functionality to allow users to add items and review their selections before checkout.
6. **Style the components**: Use Tailwind CSS for styling, adhering to the specified design guidelines with proper spacing, typography, and colors.
7. **Test responsiveness**: Ensure that the application is fully responsive and works seamlessly on various devices.

## USER EXPERIENCE
The application will provide a straightforward user journey. Users will land on the homepage, where they can browse products in a clean and intuitive layout. Selecting a product will lead them to a detailed view with multiple images and size options. Users can easily add products to their shopping cart and proceed to checkout, creating a smooth and engaging shopping experience. With minimal distractions and a focus on the products, users will feel encouraged to explore and make purchases.