Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page for FixPoint Oshawa, specializing in appliance repair services. The primary goal is to effectively communicate service offerings, establish credibility through customer testimonials, and provide an easy-to-use booking system for potential customers.

## CORE FEATURES
1. **Hero Section**: A full-width hero featuring a striking kitchen background, an engaging headline, and a testimonials slider to build trust.
2. **Services Grid**: A display of six major appliance repair services with direct links to more information.
3. **Call-to-Action Band**: An attention-grabbing section prompting users to book a repair, leading to a popup booking form.
4. **About Us**: Information about the company’s history, advantages, and local presence, along with key statistics.
5. **Brands Serviced**: A trust strip showing all major appliance brands serviced, presented in a circular slider format.
6. **Service Areas**: An embedded Google Map displaying service areas alongside a list of nearby neighborhoods.
7. **Booking Form**: A straightforward form allowing users to request service with a 4-step visual process explaining how the service works.

## 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**: A responsive, modular grid layout that adapts across various breakpoints, ensuring each block is independent and can be edited or rearranged without affecting others.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specified (can use React's built-in state management or Context API if needed)

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Components**:
   - Build a reusable `Block` component to define the structure of each independent module.
   - Implement the Hero, Services, CTA Band, About Us, Brands, Service Areas, and Booking Form as separate components.
3. **Design Layout**: 
   - Use Tailwind CSS for styling, ensuring a minimalist design with specified colors and border radius.
   - Implement responsive design principles for all blocks, adapting to various screen sizes.
4. **Implement Functionality**:
   - Use state management for handling the booking form interactions and testimonial slider.
   - Integrate Google Maps API for the embedded map in the Service Areas section.
   - Create a modal for the booking form that appears when the CTA is clicked.
5. **Accessibility and SEO**: Ensure that all blocks are accessible with proper roles and attributes. Implement SEO best practices for titles and meta descriptions.

## USER EXPERIENCE
Key interactions include:
- Users will land on the page and be greeted by the Hero section, encouraging them to explore the services.
- The Services grid will allow easy navigation to specific service details.
- The CTA Band will prompt users to book a service, leading to a straightforward and user-friendly booking form.
- The embedded map and service area details will confirm local service availability, enhancing user trust and engagement.

This landing page will effectively communicate the FixPoint Oshawa brand and services while providing a clear, engaging user experience for potential customers.