Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a landing page website for contractors in Winnipeg, Manitoba, focused on wood decks and fencing. The primary purpose is to collect leads from potential customers who are interested in quotes for their projects. The site will feature a clean, minimalist design that highlights the services and encourages user engagement through lead collection.

## CORE FEATURES
1. **Hero Section**: A prominent area at the top of the page featuring a compelling headline, a brief description of services, and a clear call-to-action (CTA) button for users to request a quote.
2. **Services Overview**: A section that outlines the primary services offered (wood decks and fencing) with brief descriptions and visuals to engage visitors.
3. **Lead Collection Form**: A user-friendly form where visitors can input their contact information and project details to request a quote.
4. **Testimonials**: A section showcasing customer testimonials to build trust and credibility with potential clients.
5. **Contact Information**: Clear and accessible contact details, including phone number and email, ensuring potential clients can easily reach out for inquiries.

## 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 layout will be a single-column structure with sections stacked vertically. Each section will be distinctly separated with ample padding and margins to maintain a clean look.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not required for this landing page, but React's built-in state can be utilized for form handling.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui as dependencies.
3. **Create Layout Structure**: Develop the main layout with a header, hero section, services overview, lead collection form, testimonials, and contact information sections.
4. **Design Hero Section**: Implement the hero section with a large headline, subtext, and a CTA button styled with the primary color.
5. **Develop Services Section**: Add a services overview with icons or images that represent wood decks and fencing.
6. **Build Lead Collection Form**: Create a form component with fields for name, email, phone number, and project details, styled according to the design specifications.
7. **Add Testimonials Section**: Include a testimonials section with customer quotes and names.
8. **Include Contact Information**: Add a footer or dedicated section for contact details, prominently displaying the phone number and email.
9. **Test Responsiveness**: Ensure the design is responsive on various devices and screen sizes using Tailwind's responsive utility classes.
10. **Deploy the Website**: Deploy the completed site to a hosting platform of your choice (e.g., Netlify, Vercel).

## USER EXPERIENCE
Visitors will land on a clear and inviting homepage where they can easily navigate through the services offered. The hero section will draw attention with a strong headline and a simple CTA, encouraging users to engage. The lead collection form will be straightforward, minimizing friction for users wanting to request quotes. As customers scroll, the testimonials will build trust, and the contact information will ensure they can reach out easily. Overall, the experience will be designed to maximize conversions and provide potential clients with all necessary information at a glance.