Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is an e-commerce platform dedicated to pet products, designed to provide users with a seamless shopping experience. The site will feature a user-friendly interface with a shopping cart, coupon functionality, and a contact form, all presented in a visually appealing style that incorporates a blue and orange color scheme.

## CORE FEATURES
1. **Product Catalog**: A visually engaging display of pet products with images, descriptions, and prices, allowing users to browse and select items.
2. **Shopping Cart**: An interactive cart that enables users to add, remove, and adjust product quantities before proceeding to checkout.
3. **Coupon System**: A feature that allows users to apply discount codes during checkout for savings on their purchases.
4. **Contact Form**: An easy-to-use form that enables customers to reach out with inquiries, feedback, or support requests.
5. **User Account Management**: Optional user registration and login for saving preferences and tracking orders (if needed in future expansions).
6. **Responsive Design**: Ensures a seamless shopping experience on mobile devices and desktops.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist with a clean, simple design emphasizing ample white space to enhance readability and focus on products.
- **Color Mode**: Light theme featuring dark text on light backgrounds, with accents of blue and orange to draw attention to key elements.
- **Layout**: 
  - **Header**: Featuring the company logo, navigation links, and cart icon.
  - **Main Section**: A grid layout displaying products with images and brief descriptions.
  - **Footer**: Contains contact information, social media links, and legal disclaimers.
- **Typography**: Use a sans-serif font for a modern look, with clear hierarchy (e.g., headings in bold, body text regular) to enhance readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-first styling approach
- **UI Components**: Utilize shadcn/ui for pre-built, customizable components
- **State Management**: Use React Context or Redux (if complex state management is required)

## IMPLEMENTATION STEPS
1. **Setup the Project**: 
   - Create a new React project with TypeScript using Create React App.
   - Install Tailwind CSS and set up the configuration.
   - Integrate shadcn/ui components for UI consistency.
   
2. **Develop the Structure**:
   - Create components for Header, Product List, Product Item, Shopping Cart, and Footer.
   - Implement the routing structure if necessary using React Router.

3. **Implement Core Features**:
   - Build the Product Catalog component to fetch and display products.
   - Implement the Shopping Cart with add/remove functionality.
   - Create the Coupon System to apply discounts during checkout.
   - Develop the Contact Form and integrate form validation.

4. **Styling**:
   - Apply Tailwind CSS classes for layout, spacing, and colors according to design specifications.
   - Ensure responsiveness using Tailwind's responsive design utilities.

5. **Testing**:
   - Perform unit testing for components and integration testing for overall functionality.
   - Test responsiveness on various devices and screen sizes.

6. **Deployment**:
   - Choose a hosting platform (e.g., Vercel, Netlify) to deploy the application.
   - Set up continuous integration/continuous deployment (CI/CD) pipelines if desired.

## USER EXPERIENCE
The user journey begins with a warm and inviting homepage featuring a prominent hero section showcasing popular products. Users can effortlessly navigate through product categories, view details, and add items to their cart. The coupon feature allows for easy savings, while the contact form provides a direct line to customer support. The design ensures that users can access all features intuitively, enhancing their overall shopping experience and encouraging return visits.