Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page for a construction service website, designed to convey professionalism and modernity. It aims to showcase the company's services, methodology, and past projects, creating a strong first impression for potential clients.

## CORE FEATURES
1. **Hero Section**: A full-width image with a subtle black overlay, featuring a clear title, subtext, and a prominent CTA button, along with a white navigation bar.
2. **Werkwijze Section**: An informative display of the four-step process (Werkvoorbereiding, Projectfasen, Uitvoeringsfase, Oplevering) outlined clearly for user comprehension.
3. **About Us Section**: A brief introduction to the company, highlighting its mission, vision, and values.
4. **Realised Projects Section**: Cards showcasing various completed projects, allowing users to see the company's work and capabilities.
5. **Footer**: A clean footer containing contact information and links to social media, enhancing connectivity with potential clients.

## 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 consists of a full-width hero section at the top, followed by a structured vertical flow of sections: Werkwijze, About Us, Realised Projects, and finally the footer. Each section should be visually distinct but cohesive in design.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specifically required, but can be implemented if the project expands in functionality.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript using Create React App.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Layout**: Implement the main layout structure with a header for navigation and a footer for contact information.
4. **Build Hero Section**: Utilize a full-width background image with a subtle black overlay, and add the title, subtext, and CTA button.
5. **Develop Werkwijze Section**: Create a step-by-step display using a grid or list format for the four process steps.
6. **Add About Us Section**: Design a clean and inviting section to provide information about the company.
7. **Implement Realised Projects Section**: Create a card layout to showcase different projects with images and descriptions.
8. **Finalize Footer**: Ensure the footer is informative and visually aligns with the overall design.
9. **Responsive Design**: Ensure the entire landing page is responsive and looks great on all devices.

## USER EXPERIENCE
Users will first encounter an inviting hero section that immediately communicates the company's value proposition. As they scroll down, they will be guided through the company’s process, learn more about the business, and view past projects. The layout will be intuitive, with clear CTAs and easy navigation, ensuring a smooth user journey that encourages engagement and conversion.