Welcome to DetailPro

Your premium car detailing website template - Ready to customize and launch!

Quick Start Guide

Step 1: Update Your Business Info

Edit the components/SiteConfig.js file to change:

  • Business name, tagline, and description
  • Phone number and email address
  • City, state, and service area
  • Business hours
  • Social media links

Step 2: Customize Brand Colors

In components/SiteConfig.js, update the colors section:

  • Primary color (currently gold #D4AF37)
  • Dark and light variations
  • These colors are used throughout the entire site

Step 3: Update Your Logo

Replace the logo in Navigation, Hero, and Footer components. Look for the logo section and update the text or upload your own logo image.

Step 4: Replace Images

Update images in each section with your own car detailing photos. Current images are from Unsplash - replace with your actual work!

Step 5: Customize Services & Pricing

Edit components/landing/ServicesSection.js to update your service packages and pricing.

Branding & Colors

All brand colors are centralized in the SiteConfig.js file. Change them once, and they update everywhere!

colors: {

primary: "#D4AF37"

// Your brand color

}

Contact Form Setup

The booking form in the Contact section is ready to go. Form submissions will:

  • Show a success message on submit
  • You can connect to your email service
  • Or integrate with a backend function
Service Areas

Update service areas in components/landing/ServiceAreasSection.js

  • Replace with your local suburbs/cities
  • Mark popular areas with the "popular" flag
Services & Pricing

Sample services are included with realistic pricing:

  • Premium Full Detail
  • Exterior Detailing
  • Interior Detailing
  • Paint Correction
  • Ceramic Coating

Edit these in the ServicesSection component to match your offerings.

SEO Configuration

Update SEO settings in components/SiteConfig.js under the "seo" section:

  • Title: Your page title for search engines
  • Description: Meta description (155-160 characters)
  • Keywords: Relevant search terms for your business
  • URL: Your website domain

Tip: The template includes SEO meta tags, Open Graph tags for social sharing, and structured data for local businesses!

Template Structure

📁 pages/

├── Home.js (Main landing page)

└── GettingStarted.js (This page)

📁 components/

├── SiteConfig.js ⭐ (Edit this first!)

└── landing/

├── Navigation.js

├── HeroSection.js

├── ServicesSection.js

├── GallerySection.js

├── WhyChooseSection.js

├── ServiceAreasSection.js

├── TestimonialsSection.js

├── ContactSection.js

└── FooterSection.js

Ready to Launch?

Follow the steps above to customize your website, then publish and start getting customers!

View Your Website →