Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a multi-page web app for a plumbing business, designed to provide users with easy access to services, information, and contact options. The main purpose is to enhance customer engagement through a clean, minimalist interface that highlights essential plumbing services while featuring smooth animations for a modern touch.

## CORE FEATURES
1. **Service Listings**: A dedicated page showcasing various plumbing services offered, with detailed descriptions, pricing, and image galleries.
2. **Booking System**: An interactive booking form that allows customers to schedule services online, integrated with a calendar and confirmation notifications.
3. **Contact Page**: A straightforward contact form and interactive map for locating the business, along with essential contact details.
4. **Testimonials Section**: A page featuring customer reviews and testimonials, presented in a visually appealing carousel format.
5. **Blog/Resources**: A section for articles and tips related to plumbing, helping to establish authority and offer value to customers.
6. **FAQ Section**: A comprehensive FAQ page addressing common customer queries, designed for easy navigation and readability.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Focus on a clean and simple design with ample white space, a minimal color palette, and a strong emphasis on typography.
- **Color Mode**: Light theme featuring dark text on light backgrounds for easy readability and a modern aesthetic.
- **Layout**: The layout will follow a grid-based structure with a fixed header and footer, allowing for clear navigation. Each page will maintain a consistent header for easy access to different sections.
- **Typography**: Use sans-serif fonts like "Roboto" or "Open Sans" for body text, with larger, bold headers to establish a clear visual hierarchy. Maintain consistent font sizes and weights across different sections.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building a robust and type-safe application.
- **Styling**: Tailwind CSS for rapid styling and responsive design implementations.
- **UI Components**: Utilize shadcn/ui for pre-built components, ensuring consistency and a professional look.
- **State Management**: Implement React Context or Redux for managing global state if necessary for features like booking and testimonials.

## IMPLEMENTATION STEPS
1. **Set up the project**: Initialize a new React project with TypeScript using Create React App or Vite.
2. **Install dependencies**: Add Tailwind CSS, shadcn/ui, and any necessary state management libraries.
3. **Create project structure**: Organize folders for components, pages, and assets.
4. **Build core components**: Develop reusable components such as headers, footers, buttons, and forms using Tailwind CSS for styling.
5. **Develop individual pages**: Implement the service listings, booking system, contact page, testimonials, blog/resources, and FAQ sections.
6. **Integrate animations**: Use CSS animations or libraries like Framer Motion to add smooth transitions and enhance user experience.
7. **Testing**: Conduct thorough testing for responsiveness and functionality across different devices and browsers.
8. **Deployment**: Choose a hosting platform (e.g., Vercel, Netlify) for deployment, ensuring optimal performance and uptime.

## USER EXPERIENCE
Key user interactions will include seamless navigation through the site via the fixed header, easy access to services through the service listings, and an intuitive booking process with instant feedback. The minimalist design will ensure users can focus on content without distractions, while animations will provide an engaging experience as users switch between pages and interact with elements. The responsive design will ensure usability on both desktop and mobile devices, enhancing accessibility for all users.