Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
PowerGrid Industrial is a high-performance eCommerce web application dedicated to providing industrial-grade diesel generators. The platform aims to facilitate B2B procurement with a focus on user trust, accessibility, and a seamless purchasing experience.

## CORE FEATURES
- **Multi-level Mega-menu Navigation**: An intuitive navigation system featuring categories such as kW Range, Phase, and Brands, enhancing user exploration.
- **Homepage Hero Section**: Captivating hero area with a compelling background image and a strong headline to attract users.
- **Product Detail Page (PDP)**: A comprehensive view of each product, including high-visibility pricing, a clear "Add to Cart" button, and detailed technical specifications in a striped table format.
- **Logistics Accordion**: A dedicated section for shipping and delivery information, tailored to highlight requirements for LTL freight and semi-truck accessibility.
- **LTL Shipping Calculator**: An interactive component in the cart allowing users to specify shipping needs, enhancing logistics clarity.
- **Sticky Header**: A persistent navigation header that remains visible while scrolling, ensuring easy access to all sections of the application.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist, with a clean and simple design that emphasizes functionality through ample white space and a focused typography approach.
- **Color Mode**: Light theme with dark text for maximum readability against light backgrounds.
- **Layout**: 
  - A structured homepage with a hero section, trust bar, and category grid.
  - Product pages featuring a clear layout where specifications and actions are easily accessible.
  - Sidebar filters for streamlined product searching.
- **Typography**: Use professional sans-serif fonts with a clear hierarchy—headlines in bold for emphasis, body text regular for readability, and appropriate spacing for clarity.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust, type-safe development.
- **Styling**: Tailwind CSS for responsive and utility-first styling.
- **UI Components**: Utilize Lucide-react icons for visual consistency and shadcn/ui for streamlined UI elements.
- **State Management**: Implement context or a state management library if needed to manage user interactions and cart state effectively.

## IMPLEMENTATION STEPS
1. **Setup Project Environment**: Initialize a new React project using Create React App with TypeScript template.
2. **Install Required Libraries**: Add Tailwind CSS, Lucide-react icons, and any state management libraries.
3. **Develop Core Navigation**: Create the multi-level mega-menu and ensure it is responsive.
4. **Design Homepage Layout**: Build the homepage with the hero section, trust bar, and category grid using Tailwind CSS for styling.
5. **Construct Product Detail Page**: Implement the PDP with technical specs table, logistics accordion, and compliance box. Ensure action elements are prominent.
6. **Add Filters and Shipping Calculator**: Integrate sidebar filters and the LTL shipping calculator component within the cart.
7. **Ensure Mobile Responsiveness**: Use Tailwind CSS classes to make the application responsive, ensuring that tables are horizontally scrollable on mobile devices.
8. **Test User Experience Flows**: Conduct thorough testing on various devices to ensure seamless navigation and interaction.

## USER EXPERIENCE
Users will experience a streamlined purchasing journey, starting from an engaging homepage that leads them through clear navigation to product selections. Each product page is designed for quick comprehension, featuring necessary technical details and prominent actions. The sticky header ensures that users can navigate without losing context, while the shipping calculator provides clarity on logistics, enhancing the overall trust and reliability of the platform.