Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a comprehensive eCommerce web application designed to provide a seamless shopping experience from product browsing to secure checkout. It will adhere to accessibility guidelines (WECGA and APCA) while integrating analytics and automation features to enhance user engagement and operational efficiency.

## CORE FEATURES
1. **Header Navigation**: Includes the brand logo, a visible shopping cart, a menu with links to product catalog, promotions, and categories, a search bar, and a sorting dropdown (Price: Low to High, Relevance).
2. **Product Page**: Displays product cards featuring images, names, prices, and an "Add to Cart" button. A filter sidebar allows users to refine products by brand, category, and price.
3. **Checkout Flow**: A complete flow for adding products, reviewing the cart, entering shipping details, and selecting payment methods, connecting to a secure payment gateway.
4. **Accessibility Compliance**: Ensures that all visual elements and code meet WECGA and APCA standards for enhanced usability for all users.
5. **Analytics and Automation**: Integration with Mixpanel for user analytics and automation features to open WhatsApp for notifications or chat assistance.
6. **AI Chatbot**: An AI-driven chatbot that guides users through the shopping experience, answering questions and facilitating navigation, integrated with Claude, Gemini, n8n, or similar technologies.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with ample white space and a focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds, accentuated by shades of gray and yellow for highlights.
- **Layout**: The main layout includes a top navigation bar, a grid display for product cards, and a structured checkout process with clear step indications.
- **Typography**: Use the 'Inter' font for all text elements, ensuring legibility and a modern aesthetic. Maintain a clear hierarchy with larger sizes for headings and adequate spacing for body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for responsive design and utility-first styling.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist design.
- **State Management**: Use React Context or a state management library (like Redux) if complex state handling is needed.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Create a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Folder Structure**: Organize the project into clear directories for components, pages, styles, and utils.
3. **Develop Header Component**: Build the header with links, search bar, and cart functionality.
4. **Design Product Page**: Implement product cards and filter sidebar, ensuring accessibility features are included.
5. **Implement Checkout Process**: Create the checkout page with forms for shipping and payment information, integrating a secure payment gateway.
6. **Integrate Analytics and Automation**: Set up Mixpanel for tracking and develop the chatbot functionality.
7. **Testing**: Ensure all links, filters, dropdowns, and buttons function correctly, and perform accessibility testing.
8. **Deployment**: Prepare the application for deployment with clear installation and setup instructions.

## USER EXPERIENCE
Users will easily navigate the site through intuitive design elements such as the header and filtering options, allowing quick access to products. During checkout, the process is streamlined with clear instructions and feedback. The AI chatbot enhances user experience by providing real-time assistance, ensuring that all questions are addressed promptly, leading to higher conversion rates. 

This application will deliver a fully functional, minimalist eCommerce experience aligned with the user's vision, ready for deployment and user engagement.