Lovable Prompt Creator - AI Prompt Generator

```markdown
## APPLICATION OVERVIEW
This project is a Mini E-commerce Web Application designed to provide users with a seamless shopping experience. It includes multiple pages such as a Home/Landing page, Product List page, Product Details page, Cart page, and Checkout/Confirmation page, all featuring engaging animations to enhance the user experience.

## CORE FEATURES
1. **Home/Landing Page**: Includes an animated hero section with a Lottie animation or product carousel, a “Shop Now” button, category links, and a brief introduction.
2. **Product List Page**: Displays a grid layout of products with images, names, and prices, along with optional filters. Each product card features animations like fade-ins and hover effects.
3. **Product Details Page**: Features a product image carousel, detailed description, pricing, and an "Add to Cart" button with engaging hover animations.
4. **Cart Page**: Lists selected items with options to update quantities or remove items, calculates total price, and includes a "Checkout" button enhanced with slide-in animations.
5. **Checkout/Confirmation Page**: A simple form for user information and payment with confirmation animations like confetti after successful purchase.

## 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 consists of a top navigation bar for easy access to different pages, followed by a hero section on the Home page, grid layout on the Product List page, and structured layouts for Product Details and Cart pages.

## TECHNICAL REQUIREMENTS
- Framework: React with TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- State Management: Use React Context API or a simple state management solution to handle cart state

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize the React project with TypeScript and install Tailwind CSS and shadcn/ui components.
2. **Create Routing**: Implement routing using React Router to navigate between Home, Product List, Product Details, Cart, and Checkout pages.
3. **Build the Home Page**: Create the landing page with the animated hero and category links, ensuring animations are integrated.
4. **Develop the Product List Page**: Implement a grid layout for products with images, names, and prices, adding filters and animations for product cards.
5. **Create the Product Details Page**: Set up a carousel for product images and include details, pricing, and the “Add to Cart” button with animations.
6. **Build the Cart Page**: List cart items with options to adjust quantities or remove items, implementing total price calculations and animations.
7. **Implement Checkout Page**: Develop the checkout form with user input fields and an animated confirmation message after purchase.

## USER EXPERIENCE
Key user interactions include seamless navigation between pages, animated transitions that guide users through product selections, and engaging feedback during actions like adding items to the cart and completing purchases. The design focuses on minimalism, ensuring ease of use and clarity throughout the shopping experience.
```