Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a professional landing page for [compagny], a roofing and zinc work company based in [city ] . The primary purpose is to showcase services, facilitate quick contact, and generate leads through a user-friendly and visually appealing interface, optimized for local SEO.

## CORE FEATURES
1. **Sticky Header**: Always-visible logo and a "Call" button to enhance accessibility for immediate contact.
2. **Hero Section**: Full-screen image with a compelling title and subtitle, accompanied by call-to-action buttons for requesting quotes and calling directly.
3. **Urgency Banner**: Red-orange banner alerting users to urgent roofing services, with a clickable phone number.
4. **Trust Section**: 4 blocks highlighting customer ratings, availability, and warranty information to build trust.
5. **Services Grid**: A visually engaging grid displaying the main services offered, each with icons for easy recognition.
6. **Client Testimonials**: A section featuring customer feedback and ratings to enhance credibility.

## 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-page structure, with sections stacked vertically for easy scrolling and navigation.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specifically required, but can be integrated if needed for form handling.

## IMPLEMENTATION STEPS
1. **Setup Development Environment**: Create a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Components**:
   - Header Component: Implement sticky header with logo and call button.
   - Hero Component: Full-screen image with title, subtitle, and buttons.
   - Urgency Banner: Implement using Tailwind for styling.
   - Trust Section: Create a grid layout for displaying customer ratings and availability.
   - Services Grid: Develop cards using Tailwind for styling and responsiveness.
   - Testimonials Component: Use cards to display customer feedback.
   - Contact Form: Build a form with validation and confirmation messages upon submission.
3. **Implement Routing**: Use React Router for smooth transitions between sections if needed.
4. **SEO Optimization**: Integrate SEO best practices such as meta tags, alt text for images, and structured data for local business.
5. **Testing**: Ensure responsiveness across devices and browsers, and conduct user testing for feedback.

## USER EXPERIENCE
Users will have a seamless experience navigating the landing page, with clear calls to action and well-structured sections. The sticky header ensures that contact options are always accessible, while the responsive design guarantees optimal viewing on all devices. Users can quickly understand the services offered, see real testimonials, and make contact through clearly marked buttons, enhancing the likelihood of conversion.