Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Create a modern, SEO-optimized landing page for "Hausmeister & Solar NRW," a service company focusing on photovoltaic installations and property maintenance in the NRW region. The primary goal is to attract local customers, particularly in Ratingen and surrounding areas, by emphasizing reliable services and sustainability.

## CORE FEATURES
1. **Hero Section**: A prominent hero area featuring a compelling headline and subheadline, along with clear call-to-action buttons for requesting quotes and free consultations.
2. **Services Overview**: A succinct presentation of key services, including photovoltaic installation, maintenance, and property management, with visually appealing icons or images.
3. **Dedicated Service Pages**: Individual sections for Photovoltaik and Hausmeisterservice that detail services offered, SEO-focused content, and specific call-to-action prompts.
4. **About Us Section**: A brief company description highlighting regional focus and commitment to sustainability, fostering trust and reliability.
5. **Service Area Map**: An interactive map showing the service areas, integrated with Google Maps for local SEO optimization.
6. **Contact Form**: A user-friendly contact form with fields for name, phone, email, and message, along with direct buttons for phone and WhatsApp communication.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with ample white space, a minimal color palette using green, yellow, and white to reflect solar energy and sustainability.
- **Color Mode**: Light theme with dark text on light backgrounds for readability and modern appeal.
- **Layout**: A one-page layout that scrolls smoothly, with sections for the hero, services, service area, about us, and contact, ensuring a seamless user experience.
- **Typography**: Use modern sans-serif fonts for clear readability, establishing a visual hierarchy with varying weights for headings, subheadings, and body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust component management.
- **Styling**: Tailwind CSS for responsive design and utility-first styling.
- **UI Components**: Utilize shadcn/ui for pre-built, accessible components that align with the minimalist aesthetic.
- **State Management**: Not required for this landing page due to its simple structure but can be incorporated as needed for forms or user interactions.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project using Create React App with TypeScript and install Tailwind CSS.
2. **Create Layout Components**: Develop reusable components for the header, hero section, services overview, about us, and contact form.
3. **Integrate SEO Features**: Implement title tags, meta descriptions, and schema markup for local business on each section.
4. **Implement the Hero Section**: Design the hero section with the specified headline, subheadline, and CTA buttons, ensuring it is visually striking.
5. **Develop Service Sections**: Create individual service sections with SEO-optimized content, focusing on user engagement and clear navigation.
6. **Add Contact Form**: Implement a contact form with validation for user input and integrate direct communication buttons.
7. **Test and Optimize**: Ensure fast loading times and mobile responsiveness, optimizing images and assets as necessary.

## USER EXPERIENCE
The landing page should provide an intuitive user journey, starting with an engaging hero section that captures attention. Users can easily navigate to the services offered, learn more about the company, and find their service areas. The contact form is easily accessible, facilitating quick inquiries, while the overall design ensures clarity and encourages conversions. The responsive design will ensure a seamless experience across all devices, making it easy for users to engage with the services offered.