Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is an e-commerce web application designed to streamline the online shopping experience for clothing. Users will be able to browse products, add items to a shopping cart, and proceed to a secure checkout process where they will provide necessary shipping details. The application will emphasize simplicity and ease of use, ensuring a smooth shopping experience.

## CORE FEATURES
1. **Hero Section**: A large, visually appealing image at the top of the homepage that showcases featured clothing items or promotions.
2. **Product Catalog**: A display of available clothing items with images, descriptions, and prices. Users can click to view more details about each product.
3. **Shopping Cart**: Users can add items to a shopping cart, view the contents, and modify quantities before proceeding to checkout.
4. **Checkout Process**: A straightforward checkout form that collects shipping information including street address, reference point, and contact number.
5. **Order Confirmation**: After payment is processed, the user receives a confirmation message along with a unique order key (e.g., `1636512d-4c19-4cd9-a674-5d9cb007cc18`).

## 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 consist of a full-width hero section at the top, followed by a grid of products, a sidebar for the shopping cart, and a clean checkout form that flows seamlessly from the product selection.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API for managing the shopping cart state.

## IMPLEMENTATION STEPS
1. Set up a new React project with TypeScript and install Tailwind CSS.
2. Create the main layout components including the Hero, Product List, Shopping Cart, and Checkout sections.
3. Implement the Hero section with a large background image and a call-to-action (CTA) button.
4. Build the Product Catalog component that fetches and displays clothing items, allowing users to add items to the cart.
5. Develop the Shopping Cart component that displays selected items and provides options to proceed to checkout or continue shopping.
6. Create the Checkout component that includes form fields for street address, reference point, and contact number, along with a payment processing function.
7. Implement order confirmation logic to display the unique order key upon successful payment.
8. Test the application for responsiveness and usability across different devices.

## USER EXPERIENCE
Users will land on a visually striking homepage with a large image that draws their attention. They can easily navigate through the product catalog, add items to their cart, and smoothly transition to the checkout process. The checkout form is designed to be straightforward, minimizing the time and effort needed to complete their purchase. After placing an order, they will receive immediate feedback in the form of an order confirmation, ensuring a satisfying shopping experience.