Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a landing page for a drainage business. The primary purpose of the landing page is to showcase the services offered, build brand awareness, and convert visitors into potential customers through a clean and minimalist design.

## CORE FEATURES
1. **Hero Section**: A prominent banner at the top of the page featuring a compelling headline, a brief description of the services, and a strong call-to-action button to encourage user engagement.
2. **Services Overview**: A section that highlights the various drainage services provided by the business, with brief descriptions and icons for visual appeal.
3. **Testimonials**: A section showcasing customer reviews and testimonials to build trust and credibility.
4. **About Us**: A brief introduction about the business, its mission, and values to connect with potential customers.
5. **Contact Form**: A simple form allowing users to get in touch for inquiries or quotes, ensuring lead capture.
6. **Call to Action**: A final call-to-action section encouraging visitors to take the next step, such as scheduling a consultation or requesting more information.

## 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**: A single-page layout with a vertical scroll structure, organizing sections in a clear, logical flow to guide users through the information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not required for this landing page as it focuses on static content and forms.

## 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 for styling components.
3. **Build Structure**: Create components for each section of the landing page: Hero, Services, Testimonials, About Us, Contact Form, and CTA.
4. **Implement Styling**: Use Tailwind CSS classes to apply the minimalist design, incorporating the primary color, typography, and border radius specifications.
5. **Add Content**: Populate each section with relevant text, images, and icons as per the drainage business's offerings.
6. **Test Responsiveness**: Ensure the layout adjusts well on various screen sizes, maintaining usability and design integrity.
7. **Deploy**: Host the landing page on a suitable platform (e.g., Vercel) for public access.

## USER EXPERIENCE
The landing page is designed to provide a seamless user experience. Visitors will first encounter the Hero section, which draws them in with a clear message and call-to-action. As they scroll down, they will easily find information about the services offered, read customer testimonials, and learn more about the business. The contact form is straightforward, encouraging users to reach out without feeling overwhelmed. The overall design emphasizes clarity and ease of navigation, ensuring a positive experience for potential customers.