Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project aims to transform the existing WordPress website, tooltagger.com, into a minimalist web application using Lovable. The primary focus is on preserving all existing posts and pages while ensuring a clean, simple design that promotes usability and readability. Guide users to create a free account. 

## CORE FEATURES
1. **Hero Section**: A visually appealing introduction to the site featuring a concise value proposition and a prominent call-to-action (CTA).
2. **Content Display**: A streamlined layout for displaying blog posts and pages, ensuring easy navigation and reading experience.
3. **Search Functionality**: A search bar to allow users to quickly find specific content within the site.
4. **Contact Form**: An integrated contact form for user inquiries and feedback.
5. **Responsive Design**: A mobile-friendly layout that adjusts seamlessly across devices for optimal user experience.

## 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**: #039ba6 (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 main layout will consist of a top navigation bar, a hero section, followed by a grid or list layout for content display, and a footer containing the contact form and additional links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specifically required for this project given the focus on content display and static pages. However, if interactivity grows, consider using React Context or Zustand.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for UI components. 
3. **Create Layout Components**: Develop reusable components for the header, footer, and content display.
4. **Implement Hero Section**: Design the hero section with a compelling headline, subheading, and CTA button styled with the primary color.

5. **Content Retrieval**: Implement functionality to pull existing posts and pages from the WordPress content API.
6. **Create Search Functionality**: Add a search bar component that interacts with the content display to filter results.
7. **Develop Contact Form**: Create a simple contact form that submits user inquiries and captures feedback.
8. **Ensure Responsiveness**: Utilize Tailwind CSS to ensure all components are responsive and mobile-friendly.
9. **Test and Deploy**: Conduct thorough testing across devices and browsers before deploying the web application.

## USER EXPERIENCE
The user experience will focus on simplicity and ease of navigation. Users will land on a visually striking hero section that introduces the site. They can easily browse through the content using a well-structured layout, utilize the search feature for specific posts, and reach out via the contact form. The design will prioritize readability with a clean typeface and ample white space, ensuring a pleasant reading experience. focus on letting users create a test account.

## Purpose & Target Users
Tooltagger is een multi-tenant SaaS-platform voor gereedschapsbeheer en keuringssoftware. Het is specifiek gebouwd voor de B2B-markt: keuringsbedrijven, aannemers en verhuurders van materieel. Het platform automatiseert compliance via QR-codes en inspectie-workflows. Gebruik strikt de Nederlandse terminologie: "Tool" (geen gereedschap), "Inspectie" (geen keuring) en "Inspectiebedrijf".