Home Services Page React template for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Home Services Page is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import HomeServicesPage from @/components/templates/home-services-page.

// app/page.tsx
"use client"

import Link from "next/link"
import { HomeServicesPage, type HomeServicesQuoteRequest } from "@/components/templates/home-services-page"

async function requestQuote(request: HomeServicesQuoteRequest) {
  const response = await fetch("/api/quotes", { method: "POST", body: JSON.stringify(request) })
  if (!response.ok) throw new Error("Quote request failed")
  return (await response.json()) as { reference: string }
}

export default function HomeRoute() {
  return <HomeServicesPage linkComponent={Link} onQuote={requestQuote} />
}

Props

• designdefault "classic"
  "classic" | "bold" | "minimal"

  The whole page's look. classic: a blue blueprint grid page with muted bands and raised cards; bold: bigger heavier type, an aurora page with tinted bands and cards for the process; minimal: a plain page with no bands, border-only cards and a vertical process. Each design picks its own backgrounds unless you set them.

• businessdefault "HOME_SERVICES_BUSINESS"
  HomeServicesBusiness

  { name, tagline?, phone, emergencyPhone?, email, license, street, city, hours, rating?, reviewCount?, yearsInBusiness?, nextAvailable?, areas: { name, zips, note? }[] }: the brand, hero badges, phone links, the license line and the served areas the ZIP check looks up.

• servicesdefault "HOME_SERVICES"
  HomeService[]

  { id, name, description, icon?, startingAt, unit?, estimate: { min, max }, features?, popular? }: the service cards and the estimator's first question. icon is a drawn glyph by name ("plumbing", "hvac", "roofing", "remodeling", "electrical", "cleaning", "painting", "water-heater"); estimate is a typical medium job before the size and timeline factors.

• estimatordefault "HOME_SERVICES_ESTIMATOR"
  HomeServicesEstimator

  { sizes, timelines, defaultSize?, defaultTimeline?, round? }: the price rules. sizes and timelines are { id, label, description?, factor } options; the range is the service's estimate times both factors, rounded to round currency units (default 50).

• projectsdefault "HOME_SERVICES_PROJECTS"
  HomeServicesProject[]

  { id, title, location, service, duration, budget?, description, scene?, before?, after? }: the before and after cards. before / after take image urls; without them the scene is drawn ("kitchen", "bathroom", "exterior").

• stepsdefault "HOME_SERVICES_STEPS"
  HomeServicesStep[]

  { icon?, title, description, meta? }: the How it works steps.

• promisesdefault "HOME_SERVICES_PROMISES"
  HomeServicesPromise[]

  { id, icon?, title, description, href?, linkLabel? }: the financing and guarantee tiles. The promise with id financing links to financingHref.

• reviewsdefault "HOME_SERVICES_REVIEWS"
  ReviewData[]

  The homeowner reviews in the Reviews shape.

• reviewsSummarydefault "HOME_SERVICES_REVIEWS_SUMMARY"
  ReviewsSummaryData

  { average, count, distribution, aspects? }: the rating summary beside the reviews.

• faqsdefault "HOME_SERVICES_FAQS"
  FaqItem[]

  { question, answer }: the FAQ. An empty array hides the section.

• heroImagedefault ""
  string

  A photo url for the hero; empty draws a re-roofed house.

• defaultServicedefault ""
  string

  A service id picked when the estimator opens (it then starts on the size question); empty starts with no service.

• zipPatterndefault "^[0-9]{5}$"
  string

  A regular expression a ZIP code must match, in the area check and the contact step.

• financingHrefdefault "/financing"
  string

  Where the financing tile and the footer link go.

• currencydefault "USD"
  string

  ISO 4217 currency of the starting prices, the estimate range and project budgets.

• localedefault ""
  string

  Intl locale for prices and numbers; empty uses the UIProvider's, else en-US.

• onQuote
  (request: HomeServicesQuoteRequest) => void | HomeServicesQuoteResult | Promise<HomeServicesQuoteResult | void>

  Gets { service, size, timeline, name, phone (E.164), email, zip, notes, estimate: { min, max } }. A returned promise keeps the button loading; resolve with { reference } to show your own request number; a rejection keeps the form filled and shows labels.quoteFailed. Without it the page pretends for 900ms.

• onAreaCheck
  (zip: string) => HomeServicesAreaCheckResult | Promise<HomeServicesAreaCheckResult>

  Decides whether a ZIP is served: return true / false, the matching area or its name, or a promise of one (the button spins). Default: the ZIP is looked up in business.areas.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Accents: icon tiles, chosen estimator cards, the stepper, the matched area and the review stars.

• ctaTonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Get a free quote buttons, the estimator's submit, the sticky bar and the emergency call button.

• radiusdefault "lg"
  "none" | "sm" | "md" | "lg"

  Corners of cards, panels and pictures (0 / 12 / 16 / 24px), with matching inner tiles.

• serviceColumnsdefault 3
  2 | 3

  Service card columns from 1024px; phones get one, tablets two.

• backgrounddefault "grid"
  "plain" | "soft" | "glow" | "aurora" | "grid" | "dots"

  The main background. A design picks its own unless you set one (classic: grid, bold: aurora, minimal: plain).

• backgroundColordefault "oklch(0.58 0.12 245)"
  string

  The tint of the main background; each design has its own (blueprint blue, green, slate).

• bandBackgrounddefault "muted"
  "muted" | "tinted" | "gradient" | "dots"

  The look of the alternating bands (classic: muted, bold: tinted; minimal has no bands). Cards inside a band are lifted above it.

• bandColordefault "oklch(0.58 0.12 245)"
  string

  The tint of tinted and gradient bands; defaults to backgroundColor.

• showServicesdefault true
  boolean

  The service cards with starting prices.

• showEstimatordefault true
  boolean

  The quote estimator. Off, the quote buttons and the sticky bar call instead.

• showProjectsdefault true
  boolean

  The before and after projects.

• showProcessdefault true
  boolean

  The How it works steps.

• showPromisesdefault true
  boolean

  The financing and guarantee tiles.

• showAreasdefault true
  boolean

  The service area list and its ZIP check, plus the ZIP check in the hero.

• showReviewsdefault true
  boolean

  The reviews with the rating summary.

• showEmergencydefault true
  boolean

  The 24/7 emergency band with tap-to-call.

• showFaqdefault true
  boolean

  The FAQ with a call card.

• stickyBardefault true
  boolean

  On phones, a bar with Call and Get a free quote sticks to the bottom while the estimator is off screen.

• headerdefault true
  boolean

  The sticky header with the brand, section links, the phone number and Get a free quote.

• footerdefault true
  boolean

  The footer with Services, Company and Help links.

• headerProps
  Partial<MarketingHeaderProps>

  Anything for MarketingHeader (layout, variant, items...).

• footerProps
  Partial<MarketingFooterProps>

  Anything for MarketingFooter (variant, columns, socials...).

• compareProps
  Partial<ImageCompareProps>

  Anything for every project's ImageCompare (handle, aspectRatio, mode...).

• processProps
  Partial<StepsSectionProps>

  Anything for the How it works StepsSection (layout, marker...).

• reviewsProps
  Partial<ReviewsProps>

  Anything for Reviews (layout, sortable, onWriteReview, hasMore...).

• faqProps
  Partial<FaqSectionProps>

  Anything for the FaqSection (layout, searchable, categories...).

• emergencyProps
  Partial<CtaSectionProps>

  Anything for the emergency CtaSection (variant, title, actions...).

• stickyBarProps
  Partial<StickyCtaBarProps>

  Anything for the phone StickyCtaBar (variant, showOn, hideOnScroll...).

• animateIndefault true
  boolean

  The hero copy rises in once when the page mounts on the client; never during hydration, under reduced motion or in thumbnails.

• linkComponent
  (props: LinkComponentProps) => ReactNode

  The router link for the header, footer, financing and FAQ links (next/link in an app).

• labels
  Partial<HomeServicesPageLabels>

  Every string of the page (DEFAULT_HOME_SERVICES_PAGE_LABELS), in English by default; some are functions (callNumber, zipFound, estimateRange...).

• className
  string

  Classes for the root.

• classNames
  Partial<Record<HomeServicesPageSlot, string>>

  Classes for header, hero, heroMedia, areaCheck, services, serviceCard, estimator, estimate, confirmation, projects, projectCard, process, promises, areas, reviews, emergency, faq, footer and stickyBar.

Parts

FAQ