Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Klar-Solar is a web application designed to provide services related to solar panel cleaning. The platform will feature a user-friendly interface that guides customers through the process of scheduling cleaning services, understanding the benefits of solar maintenance, and accessing educational resources. The design will prioritize clarity and ease of navigation, ensuring users can effortlessly find the information they need.

## CORE FEATURES
1. **Service Scheduler**: A straightforward calendar interface that allows users to book solar cleaning services at their convenience, including options for recurring appointments.
2. **Educational Resources**: A dedicated section featuring articles, videos, and tips about solar panel maintenance and benefits, enhancing user understanding and engagement.
3. **Customer Testimonials**: A visually appealing section that highlights customer feedback and success stories, building trust and credibility for the service.
4. **Contact and Support**: An easy-to-access contact form and live chat support for user inquiries, ensuring users can quickly get assistance when needed.
5. **Pricing Calculator**: An interactive tool that allows users to estimate the cost of services based on their specific needs, helping them make informed decisions.
6. **Responsive Design**: A mobile-friendly layout that ensures users have a seamless experience on any device, maintaining functionality and readability.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist with a clean and simple design that emphasizes white space, allowing content to breathe and improving readability. The overall aesthetic will convey professionalism and clarity.
- **Color Mode**: Light theme featuring a soft background (#FFFFFF) with dark text for high contrast, complemented by subtle accents in #d7fe3 for buttons and highlights.
- **Layout**: A grid-based layout that organizes content in a logical flow, utilizing sections for services, testimonials, and resources. Navigation will be straightforward, with a fixed top menu for easy access to all areas of the site.
- **Typography**: Use a modern sans-serif font for headings (e.g., 'Roboto' or 'Open Sans') to ensure legibility and a clean look. Body text should be a slightly smaller size for easy reading, maintaining a clear hierarchy through size and weight variations.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for strong type safety and component-based architecture.
- **Styling**: Tailwind CSS for utility-first styling, allowing for rapid design iteration and consistent styling across components.
- **UI Components**: Utilize shadcn/ui for ready-made components that adhere to modern design standards.
- **State Management**: Use React Context or a state management library like Zustand for managing application state efficiently.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript using Create React App or a similar setup.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project along with any necessary libraries for routing (e.g., React Router).
3. **Design Layout**: Create the main layout using Tailwind CSS classes, ensuring a responsive design that adjusts for various screen sizes.
4. **Develop Core Features**: Implement each of the core features as separate components, ensuring they are modular and reusable.
5. **Integrate State Management**: Set up Context or Zustand to manage global state, particularly for user interactions with the scheduler and calculator.
6. **Add Educational Resources**: Create a content management system for adding and updating articles and videos on the platform.
7. **Test Responsiveness**: Thoroughly test the application on different devices and screen sizes to ensure a smooth user experience.

## USER EXPERIENCE
Users will begin by landing on a clean homepage that clearly presents the core services of Klar-Solar. They can easily navigate to schedule a service, learn about solar maintenance, or read testimonials. The service scheduler will guide them through booking, while the pricing calculator will allow them to understand costs before committing. A responsive design ensures that all features are accessible and functional whether on desktop or mobile, creating a seamless experience throughout.