Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page for an artisan electrician, designed to showcase their services in an elegant and creative manner. The site will feature a clean and minimalist aesthetic with a focus on visual impact and user engagement, utilizing a light theme to enhance readability and appeal.

## CORE FEATURES
1. **Hero Section**: A visually captivating hero area with a striking headline, subheadline, and a call-to-action button prompting users to request a quote or consultation.
2. **Services Overview**: A section that highlights the electrician's key services with engaging icons and brief descriptions, showcasing their expertise.
3. **Testimonials**: A dedicated area for client testimonials to build trust and credibility, featuring quotes, client names, and possibly star ratings.
4. **Gallery of Work**: A visually appealing gallery showcasing previous projects, allowing potential clients to see the quality of the electrician's work.
5. **Contact Form**: An easy-to-use contact form that allows visitors to reach out for inquiries or quotes, ensuring a smooth communication process.
6. **Call-to-Action Footer**: A footer with a final call-to-action encouraging users to take the next step, along with contact details and social media links.

## 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**: The main layout will consist of a vertical structure with sections stacked one below the other, ensuring easy navigation and a smooth flow of information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specifically needed for this landing page but can be integrated if dynamic content is required.

## IMPLEMENTATION STEPS
1. **Set Up React Environment**: Initialize a new React project with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Project Structure**: Set up the folder structure with components, styles, and assets directories.
4. **Build Hero Section**: Create a responsive hero component with a headline, subheadline, and CTA button styled with Tailwind CSS.
5. **Implement Services Overview**: Develop a services component that displays services in card format using the specified typography and colors.
6. **Add Testimonials Section**: Include a testimonials component that dynamically displays client feedback.
7. **Create Gallery of Work**: Build a gallery section to visually present completed projects, ensuring images are optimized for web.
8. **Develop Contact Form**: Implement a contact form component with validation and submission handling.
9. **Design Footer**: Add a footer with contact information and social media links, styled consistently with the rest of the site.
10. **Test Responsiveness**: Ensure all components are responsive and function well on various devices.

## USER EXPERIENCE
Users will have a seamless experience navigating the landing page. The clear layout and minimalist design will guide them through the services offered, see testimonials, and easily contact the electrician. The CTA buttons will be prominently displayed, encouraging users to engage with the business, while the gallery will visually reinforce the quality of work provided. The overall user journey will be intuitive, focusing on converting visitors into clients through compelling content and design.