10 miles - multi-page, mobile-first website template for a local plumbing company in the United States that serves a single city and a 10-mile...
Generated Prompt
## APPLICATION OVERVIEW This project involves creating a multi-page, mobile-first website template for a local plumbing company in the United States. The site will serve a single city and a 10-mile radius, providing essential information about the company, its services, and facilitating customer inquiries. The application will leverage modern web technologies including React, Tailwind CSS, and shadcn/ui for a clean, user-friendly experience. ## CORE FEATURES 1. **Dynamic Site Configuration**: A centralized configuration file (`src/config/siteConfig.ts`) to manage all business details, ensuring reusability across components without hard-coded values. 2. **Multi-Page Structure**: The website will feature several pages including Home, About Us, Services, Location, Testimonials, Contact, and a 404 error page, with clear navigation using React Router. 3. **Responsive Design**: A mobile-first approach with a sticky header, hamburger menu for navigation, and a persistent bottom bar for quick access to calling and requesting estimates. 4. **SEO Optimization**: Each page will include unique metadata, Open Graph tags, and LocalBusiness JSON-LD schema to enhance visibility in search results. 5. **Reusable Components**: Key UI components such as Hero, ServiceCard, and TestimonialCard will be reusable and designed with accessibility in mind. ## 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 be structured with a header, main content area with sections corresponding to each page, and a footer. Each page will follow a consistent design with generous whitespace and rounded card elements. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui - **State Management**: Not specified (can utilize React's built-in state management or context if needed) ## IMPLEMENTATION STEPS 1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui. 2. **Create Configuration File**: Implement `src/config/siteConfig.ts` to hold all business details with realistic placeholder values. 3. **Build Page Structure**: Set up routing for the multi-page application, creating components for each page (Home, About, Services, Location, Testimonials, Contact). 4. **Develop Reusable Components**: Create reusable components such as Hero, TrustBar, ServiceCard, etc., ensuring they pull data from the configuration file. 5. **Design Header and Footer**: Implement a sticky header with navigation and a footer with business information and links. 6. **Optimize for SEO**: Integrate react-helmet-async for SEO metadata and implement JSON-LD schema on the Home page. 7. **Test Responsiveness**: Ensure the website is fully responsive, with a mobile-first design, verifying that all components function properly on various devices. 8. **Accessibility Checks**: Review the website for accessibility, ensuring all interactive elements are keyboard navigable and screen reader friendly. ## USER EXPERIENCE Users will be greeted with a clean and modern interface featuring a prominent hero section on the homepage. Navigation will be intuitive with clear links to all essential pages. Users can easily contact the plumbing company via the "Call Now" button or request a free estimate through the dedicated form. The site will emphasize local service and trustworthiness, with testimonials and service area information readily accessible to encourage customer engagement. This structured prompt provides a comprehensive overview and detailed guidance for developing the requested web application, adhering to the specified design and technical requirements.
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
