Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a landing page for a roofing company that specializes in insurance roofs. The primary aim is to provide potential customers with clear information about roofing services, highlight the benefits of working with the company, and encourage them to get in touch for quotes or consultations.

## CORE FEATURES
1. **Hero Section**: A visually impactful introduction featuring a compelling headline, subheadline, and a prominent call-to-action (CTA) button encouraging visitors to request a quote.
2. **Services Overview**: A section that outlines the main roofing services offered, with brief descriptions and icons for visual appeal.
3. **Benefits of Insurance Roofs**: A dedicated area that explains the advantages of choosing insurance roofs, helping to educate visitors and build trust.
4. **Testimonials**: A section showcasing customer reviews and feedback to enhance credibility and social proof.
5. **Contact Form**: A simple and accessible form allowing visitors to easily get in touch for inquiries or consultations.

## 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 follow a single-column structure for simplicity, featuring a full-width hero section, followed by stacked sections for services, benefits, testimonials, and the contact form.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui for pre-designed components to streamline the development process.
- **State Management**: Not required for this landing page.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create the Hero Section**: Develop the hero component with a catchy headline, subheadline, and a CTA button styled with the primary color.
3. **Develop Services Overview**: Create a section that lists main services using cards with icons and descriptions, ensuring they are visually appealing.
4. **Implement Benefits Section**: Design a section that outlines the benefits of insurance roofs, using engaging visuals and text.
5. **Add Testimonials**: Create a testimonials section using a carousel or grid layout to display customer reviews.
6. **Build the Contact Form**: Implement a simple, user-friendly contact form that collects name, email, and message.
7. **Responsive Design**: Ensure all components are responsive and adjust to different screen sizes for a seamless user experience.

## USER EXPERIENCE
The landing page will guide users through a smooth journey, starting from the hero section that draws them in, followed by informative sections about services and benefits, and ending with testimonials to build trust. The contact form will be easily accessible, allowing users to reach out without friction. The overall experience will prioritize clarity, ease of navigation, and quick access to information, ensuring potential customers feel confident in reaching out for roofing services.