Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web app designed to enhance an existing website by adding dedicated product pages and interactive features for users. The main purpose is to provide detailed information about products, facilitate user interaction with quotes, and ensure a seamless user experience with a minimalistic and clean design.

## CORE FEATURES
1. **Dedicated Product Pages**: Create individual pages for each product that include descriptions, available colors, materials, installation photos, and customer testimonials displayed under each photo.

2. **Quote Request Functionality**: Implement an interactive quote request option where users can select a product, choose a color from a drop-down menu, and enter their measurements to receive a personalized quote.

3. **Logo Integration**: Ensure the PNG logo is properly inserted and optimized for performance. If lag occurs, implement fixes to maintain website speed.

4. **Landing Page Discount Feature**: On the landing page, provide an option for visitors to enter their measurements or email to receive a promotional code for 10% off their first offer.

5. **Comprehensive Testing**: Conduct thorough testing of the entire website to identify issues and apply appropriate fixes to enhance performance and usability.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimize clutter with a clean and simple design that utilizes ample white space, focusing on typography to guide user attention.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure readability and a pleasant user experience.
- **Layout**: Utilize a grid layout for product pages, featuring a prominent product image, description section, color options, and testimonials arranged in a clear visual hierarchy.
- **Typography**: Use sans-serif fonts for body text (e.g., Arial or Helvetica) to maintain legibility, with larger, bold headers to establish a clear hierarchy. Maintain consistent spacing between elements.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript to ensure a robust and maintainable codebase.
- **Styling**: Tailwind CSS for efficient styling and responsive design implementation.
- **UI Components**: Utilize shadcn/ui for pre-designed components that align with the minimalist aesthetic.
- **State Management**: Consider using React Context or Redux for managing state across the application, especially for the quote request feature.

## IMPLEMENTATION STEPS
1. **Set Up Project Structure**: Initialize a new React project with TypeScript and install Tailwind CSS along with shadcn/ui components.
2. **Create Product Pages**:
   - Develop a template for individual product pages that dynamically loads data based on the selected product.
   - Integrate sections for descriptions, colors, materials, images, and testimonials.
3. **Implement Quote Request Feature**:
   - Create a form where users can select a product, choose a color from a dropdown, and enter their measurements.
   - Handle form submissions to calculate and display the quote.
4. **Logo Integration**:
   - Upload the PNG logo and ensure proper loading without lag, optimizing it if necessary.
5. **Landing Page Enhancements**:
   - Add an input field for measurements and an email subscription form for the 10% discount code.
   - Implement backend logic to send the discount code to the user's email.
6. **Testing and Debugging**:
   - Conduct user testing to identify any usability issues.
   - Perform cross-browser testing and mobile responsiveness checks.
   - Make necessary adjustments based on user feedback and testing results.

## USER EXPERIENCE
Users will experience a streamlined interaction with the application, starting from a clean landing page that invites them to either request a quote or sign up for a discount. Upon selecting a product, they will be directed to a dedicated page where they can explore detailed information, view images, and read testimonials. The quote request process will be straightforward, providing instant feedback and enhancing user satisfaction. Overall, the minimalist design will ensure that users can navigate the site easily, focusing on the products and features offered.