Skip to main content
Clever Ops

Trades Services Landing Template

Complete trades site drawn as a drafting sheet set, measure-up hero with live job cards, opening service rows, stamped rate card, interactive service rings, booking sheet, title-block footer.

Preview & code

Loading Trades Services Landing Template preview

Installation

pnpm dlx shadcn@latest add @cleverui/template-trades-services

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx
import { TemplateTradesServices } from '@/components/blocks/template-trades-services'
Exampletsx
import { TemplateTradesServices } from '@/components/blocks/template-trades-services'

export default function TemplateTradesServicesDemo() {
  return <TemplateTradesServices />
}

API reference

TemplateTradesServices accepts the following props.

PropTypeDefaultDescription
contentBenchmarkContentdefaultContentoverride any slice of the page, defaults to the Benchmark fixture above
classNamestring

Referenced types

Typestsx
export interface BenchmarkContent {
  /** identity, nav mark, wordmark tag */
  brand: { name: string; tag: string }
  nav: { links: BenchmarkLink[]; phone: BenchmarkLink; cta: BenchmarkLink }
  /** the cover sheet: measure-up motif, live job cards */
  hero: {
    eyebrow: string
    titleLines: string[]
    /** annotation measured under the last title line */
    titleAnnotation: string
    description: string
    primaryCta: BenchmarkLink
    secondaryCta: BenchmarkLink
    note: string
    /** dimension run labels, kept honest */
    measureH: string
    measureV: string
    jobsTitle: string
    jobs: BenchmarkJob[]
  }
  /** the 24/7 strip, phone-first */
  emergency: {
    label: string
    phone: { display: string; href: string }
    message: string
    stat: { value: string; label: string }
  }
  /** licence strip under the hero, the paperwork up front */
  credentials: { statement: string; items: string[] }
  /** 01, what the crew fixes, rows open to inclusions */
  services: {
    sheet: string
    title: string
    lede: string
    includesLabel: string
    items: BenchmarkService[]
    footnote: string
  }
  /** 02, the rate card as an invoice sheet */
  pricing: {
    sheet: string
    title: string
    lede: string
    groups: BenchmarkPriceGroup[]
    stamp: string
    finePrint: string[]
    note: string
  }
  /** 03, how a job runs, the same four steps every time */
  process: {
    sheet: string
    title: string
    lede: string
    steps: BenchmarkStep[]
  }
  /** 04, the record, numbers with their provenance */
  record: {
    sheet: string
    title: string
    items: { value: string; label: string; detail: string }[]
    footnote: string
  }
  /** 05, where the vans go, three rings out from the yard */
  area: {
    sheet: string
    title: string
    statement: string
    yardLabel: string
    zones: BenchmarkZone[]
    note: string
  }
  /** 06, the handshake, written down and stamped */
  guarantee: {
    sheet: string
    title: string
    promise: string
    terms: { term: string; detail: string }[]
    stamp: string[]
    licence: string
    insurer: string
  }
  /** 07, what the suburbs say */
  reviews: {
    sheet: string
    title: string
    lede: string
    rating: { value: string; label: string }
    lead: BenchmarkQuote
    quotes: BenchmarkQuote[]
  }
  /** 08, straight answers, most-asked first */
  faq: {
    sheet: string
    title: string
    lede: string
    items: { question: string; answer: string | string[] }[]
  }
  /** 09, book a job, phone first, form second */
  booking: {
    sheet: string
    title: string
    description: string
    phone: { display: string; href: string; note: string }
    form: {
      nameLabel: string
      namePlaceholder: string
      phoneLabel: string
      phonePlaceholder: string
      issueLabel: string
      issuePlaceholder: string
      buttonLabel: string
    }
    confirmation: string
    note: string
  }
  footer: {
    tagline: string
    status: { label: string; detail: string; href: string }
    columns: { label: string; links: BenchmarkLink[] }[]
    contact: { label: string; value: string; href: string }[]
    legal: BenchmarkLink[]
    /** the title block, bottom right of every drawing set */
    titleBlock: { label: string; value: string }[]
    meta: string[]
  }
  /** fixed call bar on small screens, the trades conversion pattern */
  callBar: { callLabel: string; bookLabel: string }
}

export interface BenchmarkLink {
  label: string
  href: string
}

export interface BenchmarkJob {
  crew: string
  suburb: string
  job: string
  /** mono status line, e.g. "ON SITE 09:41" */
  status: string
}

export interface BenchmarkService {
  name: string
  /** one plain line of what the job actually involves */
  detail: string
  /** preformatted honesty, e.g. "from $330" or "quoted fixed" */
  price: string
  /** 2-3 inclusions shown when the row is opened */
  includes: string[]
}

export interface BenchmarkPriceGroup {
  label: string
  rows: BenchmarkPriceRow[]
}

export interface BenchmarkStep {
  title: string
  body: string
  /** mono caption under the body, states the proof of the step */
  caption: string
}

export interface BenchmarkZone {
  /** e.g. "Zone A" */
  zone: string
  /** e.g. "0–6 km" */
  range: string
  /** the response promise for this ring */
  promise: string
  /** suburb names, plain words (they are the coverage) */
  suburbs: string[]
}

export interface BenchmarkQuote {
  quote: string
  name: string
  /** suburb + job type, e.g. "Northcote · blocked drain" */
  detail: string
}

export interface BenchmarkPriceRow {
  item: string
  /** the fine print of the line, one clause */
  detail: string
  /** preformatted, e.g. "$0" or "$132/hr" */
  price: string
  /** at most one across the whole ledger, earns the stamp */
  highlight?: boolean
}

Frequently asked questions

How do I install the Trades Services Landing Template component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/template-trades-services`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Trades Services Landing Template require?

Trades Services Landing Template uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Trades Services Landing Template to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Want this built for you?

CleverUI is built by the Clever Ops web team. If you'd rather ship a hand-coded, fast, custom website than assemble one, we build them for Australian businesses every week.

Explore web development services