Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is an e-commerce web application designed to provide a complete shopping experience, featuring a functional shopping cart, product color variations, and an integrated payment gateway. The application will include core pages such as home, product listings, cart, and checkout, ensuring a seamless and user-friendly shopping experience.

## CORE FEATURES
1. **Home Page**: A welcoming landing space showcasing featured products, promotions, and easy navigation to other sections of the site.
2. **Product Listings**: Display a variety of products with options for color variations. Users can filter products based on categories.
3. **Shopping Cart**: A fully functional cart that allows users to add, remove, and adjust quantities of products before proceeding to checkout.
4. **Checkout Process**: A streamlined checkout page for users to enter shipping and payment information, connected to the payment gateway API.
5. **User Authentication**: Optional feature for user accounts to save shopping preferences and order history.

## 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**: A flexible grid layout for product listings, a single-column layout for the home and checkout pages, and a responsive design that adapts to various screen sizes.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux (or Context API) for managing the shopping cart state and user authentication if implemented.

## IMPLEMENTATION STEPS
1. **Project Setup**: Create a new React application using Create React App with TypeScript template.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling and UI components.
3. **Configure Tailwind CSS**: Set up Tailwind to work with the project and customize the theme to include the primary color and typography specifications.
4. **Create Component Structure**: Develop the main components for Home, Product Listing, Cart, and Checkout pages.
5. **Implement Routing**: Use React Router to navigate between different pages of the application.
6. **Develop State Management**: Set up Redux or Context API for managing shopping cart state and user sessions.
7. **Integrate Payment Gateway**: Follow the provided documentation to connect the payment gateway API with the checkout process.
8. **Testing and Debugging**: Test the application for usability, functionality, and responsiveness across different devices.
9. **Deployment**: Prepare the application for deployment on a hosting service.

## USER EXPERIENCE
Users will begin on the home page, greeted by a clean layout and prominent calls-to-action for shopping. They can easily navigate to product listings where they can view and select products based on their color variations. The shopping cart allows for easy adjustments before proceeding to a straightforward checkout process, ensuring a smooth transaction experience. The overall design prioritizes user engagement and ease of use, making the shopping experience enjoyable and efficient.