Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a comprehensive B2B e-commerce web application for ESTG, a leading wholesaler in sustainable energy products. The application serves as a smart and efficient digital workplace for installers, featuring a secure B2B login wall to access pricing and catalogs. The platform integrates advanced AI features to facilitate project planning and product selection.

## CORE FEATURES
1. **AI Project Advisor**: A smart assistant that recommends product sets based on user input, optimizing selections for specific project conditions.
2. **Product Comparison Tool**: Allows users to select up to four products and compare their specifications side-by-side for informed decision-making.
3. **Smart Compatibility Check**: Displays a dynamic badge that indicates compatibility with matching hardware in real-time.
4. **Enhanced System Configurator**: Offers a comprehensive tool for selecting products, including custom product options for tailored installations.
5. **Clickable Brand Hubs**: Interactive links to brand-specific pages showcasing all products from selected manufacturers.
6. **Advanced Inventory Management**: Provides real-time inventory tracking and expected delivery timelines for better project planning.

## 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 feature a structured dashboard with a header, main content area divided into sections for features, a floating comparison bar, and a sidebar for navigation and tools.

## TECHNICAL REQUIREMENTS
- Framework: React with TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- State Management: Redux or Context API for managing cart and comparison state

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript, including Tailwind CSS for styling.
2. **Create the Layout**: Design the main dashboard layout with a header, sidebar, and main content area using Tailwind CSS.
3. **Implement Authentication**: Create a B2B login and registration flow to secure access to the application.
4. **Develop Core Features**:
   - Build the AI Project Advisor with input fields and output display.
   - Create the Product Comparison Tool with selection capabilities and a comparison modal.
   - Develop the Smart Compatibility Check feature with dynamic UI updates.
   - Construct the Enhanced System Configurator allowing users to add custom products.
   - Design the Clickable Brand Hubs leading to dedicated brand pages.
   - Set up Advanced Inventory Management functionality.
5. **Integrate State Management**: Implement Redux or Context API to handle cart and comparison states coherently.
6. **Responsive Design**: Ensure the application is fully responsive for mobile and tablet views, utilizing Tailwind’s responsive utilities.

## USER EXPERIENCE
Users will seamlessly navigate through the B2B e-commerce platform, starting from the login page. After authentication, they will access the dashboard featuring key functionalities such as the AI Project Advisor, product comparisons, and inventory management. The intuitive layout and responsive design ensure an optimal experience across devices, allowing installers to efficiently plan and execute their projects with the tools provided.