TrueView Home Inspections - build website for SR22 Insurance Quotes | Cheap Non-Owner & Auto SR22 Coverage that features a real-time quote...
Generated Prompt
## APPLICATION OVERVIEW
This project is a landing page for "TrueView Home Inspections," aimed at providing users with professional home inspection services in Atlanta, GA. The website will feature a clean and minimalist design, focusing on user experience while enabling visitors to easily schedule inspections and understand the services offered.
## CORE FEATURES
1. **Split Hero Section**: A visually engaging hero section with a compelling tagline ("Know Exactly What You're Buying"), trust badges, and clear CTAs for scheduling inspections.
2. **Service Cards**: Four service offerings (Standard Home Inspection, Pre-Listing Inspection, Radon Testing, Mold Assessment) displayed in an organized card format, detailing duration and price ranges.
3. **What Makes Our Reports Different**: A four-column grid highlighting the unique aspects of the inspection reports, including HD photo documentation and thermal imaging.
4. **Mock Inspection Report Preview**: A detailed section showcasing a sample inspection report with organized sections and photo callouts, enhancing user understanding of deliverables.
5. **Online Booking Form**: A full-width booking form allowing users to schedule inspections easily, collecting necessary information like address and property type.
6. **Testimonials Section**: A dedicated area for user testimonials to build trust and credibility among 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 will feature a white navbar with an orange "Schedule Inspection" CTA, a split hero section, service cards arranged in a grid, a four-column grid for reports, and a structured booking form at the bottom. The mobile version will stack sections for easy navigation.
## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: [Specify if needed]
## IMPLEMENTATION STEPS
1. **Setup the Project**: Initialize a new React project using Vite and configure TypeScript.
2. **Install Dependencies**: Install Tailwind CSS for styling and shadcn/ui for UI components.
3. **Create Layout Components**: Build reusable layout components including Navbar, Footer, and Hero sections.
4. **Design the Hero Section**: Implement the split hero layout with trust badges and CTAs.
5. **Develop Service Cards**: Create the service cards with appropriate data and styling.
6. **Build the Report Preview Section**: Design the mock inspection report preview with organized layout and buttons for sample reports.
7. **Implement Booking Form**: Develop the full-width online booking form and connect with necessary state management.
8. **Add Testimonials Section**: Design and implement the testimonials section to enhance credibility.
9. **Apply Responsive Design**: Ensure all components are responsive and adapt well to different screen sizes.
10. **Test and Optimize**: Conduct thorough testing to ensure all features function correctly and optimize performance.
## USER EXPERIENCE
Key user interactions will include an intuitive navigation experience through the navbar, engaging visuals in the hero section, straightforward service exploration via cards, and a seamless online booking process. Users will be able to easily navigate to different sections, view service details, and submit their information through the booking form, all designed to enhance user satisfaction and conversion rates.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!
