Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page for DC Manteniments, an electrical company based in Barcelona. The primary purpose of the website is to showcase the company's services, enhance client engagement, and facilitate easy communication through direct contact options. The design will be minimalist, focusing on a clean presentation that highlights the company's expertise and encourages potential clients to reach out.

## CORE FEATURES
1. **Hero Section**: A prominent background image with a highlighted phrase stating, “Professional electrical installations, repairs, and maintenance in Barcelona and surrounding areas.” Includes buttons for "Call Now", "WhatsApp", and "Request a Quote".
2. **Services Overview**: A concise display of the main services offered, including Electrical Repairs, Low-Voltage Maintenance, Electrical Installations and Renovations, and New Construction.
3. **About Us**: A brief introduction to the company, emphasizing its 5+ years of experience and commitment to quality service.
4. **Gallery/Projects**: A visually appealing section showcasing images of completed projects, reinforcing the company's expertise.
5. **Contact Section**: A functional contact form that captures user name, phone, and message, along with visible buttons for calling and WhatsApp messaging. Includes a map highlighting the service area.
6. **SEO Optimization**: Local SEO strategies implemented to target keywords like “electrician in Barcelona” and “electrical installations Barcelona”.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with ample white space, a minimal color palette, and a strong focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds, utilizing black, dark grey, and electric yellow.
- **Layout**: Single-scroll layout with distinct sections for Home, Services, About Us, Gallery, and Contact. Each section is clearly delineated while maintaining a cohesive overall flow.
- **Typography**: Use Montserrat or Poppins for a modern and technical aesthetic. Headings should be bold and prominent, while body text remains easily readable.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for responsive design and utility-first styling.
- **UI Components**: Use shadcn/ui for building interactive and modern components.
- **State Management**: Not specifically required for this landing page, but consider using React's built-in context for managing any state if necessary.

## IMPLEMENTATION STEPS
1. **Set Up Environment**: Initialize a new React project with TypeScript and Tailwind CSS.
2. **Create Components**:
   - Build a Hero component featuring the background image and call-to-action buttons.
   - Develop a Services component displaying the offered services.
   - Create an About Us component with a brief company introduction.
   - Design a Gallery component to showcase project images.
   - Implement a Contact component with a functional form and integration for sending emails to dcmanteniments@gmail.com.
3. **Add Routing**: Set up React Router if needed for future scalability, even though it is primarily a landing page.
4. **SEO Implementation**: Add meta tags and keywords relevant to the services provided for local SEO optimization.
5. **Testing**: Ensure all buttons (Call, WhatsApp) work correctly and that the contact form successfully sends messages.
6. **Deployment**: Publish the website on a hosting platform and ensure full responsiveness and accessibility compliance.

## USER EXPERIENCE
The user will first encounter a visually striking hero section with immediate call-to-action options. As they scroll down, they will see a clear and concise overview of services, followed by an engaging about us section that builds trust. A gallery section will visually demonstrate the company's capabilities, concluding with an easy-to-navigate contact section that encourages direct communication. The entire experience is designed to be intuitive and straightforward, ensuring users can quickly find the information they need.