Site inspection
Placeholder text describing the first service in one or two plain sentences.
Learn more: Site inspectionStyleguide
Components and variants
Every component in the starter. Edit src/styles/tokens.css to rebrand and src/config.ts for business details.
Tokens
- Ink
--color-ink - Ink 2
--color-ink-2 - Accent
--color-accent - Accent text
--color-accent-text - Background
--color-bg - Surface
--color-surface - Surface 2
--color-surface-2 - Border
--color-border - Muted text
--color-text-muted
Type
Label · JetBrains Mono
Heading 1 · Sora
Heading 2 · Sora
Heading 3 · Sora
Body · Inter. Placeholder paragraph text set at the base size with comfortable line height for reading.
Surfaces
.surface-default.surface-white.surface-inkButton
SectionHead
Eyebrow
Start-aligned with lede
Optional lede sentence under the heading.
Eyebrow
Centered, no lede
Hero
Commercial field services
Hero heading (h1 on real pages)
A placeholder introduction that explains what the business does, who it serves and why customers stay. Keep it to two short sentences.
Marquee
- Site inspection
- Scheduled maintenance
- Emergency response
- Equipment cleaning
- Waste removal
- Compliance reporting
- Property managers
- Facility teams
- Municipal sites
- Industrial plants
- Retail centers
- Healthcare campuses
TrustStrip
Trusted by
- Property managers
- Facility teams
- Municipal sites
- Industrial plants
- Retail centers
- Healthcare campuses
Narrow (wraps): no dots at line ends
- Property managers
- Facility teams
- Municipal sites
- Industrial plants
- Retail centers
- Healthcare campuses
Credentials
- Fully insured
- Licensed technicians
- Safety certified
- 24/7 dispatch
PhotoCard
Same card at full width: the image switches to 21:9 at 680px+.
Compliance reporting
Placeholder text for a fifth card. As the lone last card in a two-column grid it spans the full width.
Learn more: Compliance reportingCard
Light
Property management
Placeholder copy describing how the service fits this audience.
Dark
Industrial facilities
Placeholder copy describing how the service fits this audience.
CardGrid
cols=2 with 3 cards: the lone last card spans both columns.
Property management
Placeholder copy describing how the service fits this audience.
Industrial facilities
Placeholder copy describing how the service fits this audience.
Public sector
Placeholder copy describing how the service fits this audience.
cols=3
Property management
Placeholder copy describing how the service fits this audience.
Industrial facilities
Placeholder copy describing how the service fits this audience.
Public sector
Placeholder copy describing how the service fits this audience.
Retail and hospitality
Placeholder copy describing how the service fits this audience.
Healthcare
Placeholder copy describing how the service fits this audience.
Education
Placeholder copy describing how the service fits this audience.
Split
Copy first (default)
Placeholder paragraph about the company background. Mention experience, area served and the kind of work the team prefers.
Media first
A second short paragraph can describe how jobs are quoted, scheduled and reported back to the customer.
ValueList
On time
Arrival windows that hold.
Upfront pricing
Written quotes before work starts.
Tidy finish
Sites left cleaner than found.
Clear reports
Photos and notes after each visit.
Process
Step 1: Request
Send a short description of the site and the job. A reply follows the same day.
Step 2: Assess
A technician visits or reviews photos and confirms scope, timing and price.
Step 3: Schedule
Pick a slot that suits operations. Reminders go out before the visit.
Step 4: Report
Receive a short written report with photos and any follow-up notes.
Statement
Reliable work is the best marketing there is.
SpecPanel
How a service visit is measured
- Response
- Same day
- Coverage
- 50 mi radius
- Crew size
- 2–6 techs
- Reporting
- Within 24h
Without figure
- Response
- Same day
- Coverage
- 50 mi radius
Accordion
Placeholder answer describing the service area and any travel fees outside it.
Placeholder answer describing typical response times for standard and urgent requests.
Placeholder answer explaining that quotes are written, itemised and valid for a set period.
FinalCTA
Ready when you are
Tell us about the site. We will take it from there.
Placeholder closing line inviting the visitor to call or send a request.
Reveal
Fades up when scrolled into view. Off with reduced motion; visible if JS fails.
Delay 0ms
Delay 120ms
Delay 240ms
Pic
AVIF + WebP, several widths, width/height set, lazy by default.
