Lawn Care Website Template
Demo brand: FELLGROVE · Landscape design & build · 14 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this lawn care website template
A complete site for a landscape design and build practice: fourteen built routes covering five individual garden case studies, an approach page, services, a site-visit booking route and a two-post journal.
The landscape architect’s drawing board — bone line-work and mono survey annotations on a deep-fern field, in Geologica against Overpass Mono. Real garden photography is reduced to the same two inks, so a photograph reads as a plate on the same board rather than as a picture dropped onto a design.
The signature move is the section. A pinned, scroll-scrubbed vertical cross-section of a designed planting assembles stratum by stratum from the datum line up — subgrade, root zone, groundcover, herbaceous, shrub, understorey, canopy, sky. It is authored SVG and it is the largest element on the page. The control is the plot as found: a section with only the datum line and subgrade, zero strata, dead flat — the site before any design.
The 14 pages you get
- Home
/ - The building section, the practice’s position, recent gardens and the site-visit close.
- Gardens
/gardens/ - The portfolio index — recent work, which is how design-and-build is bought.
- Five garden case studies
/gardens/… - Holt Meadow, Glebe House, Ashcombe Court, Hazel Copse, Seaton Kitchen Garden. Each a full route with its own planting layers and a written account of the problem.
- Approach
/approach/ - Survey, section, build, establish. The four-stage process that justifies a design fee before the build quote.
- Services
/services/ - Design, build, planting and maintenance — including the maintenance line, which is the recurring revenue most practices under-sell.
- Book a site visit
/contact/ - A working form plus live tel: and mailto: paths.
- Journal
/blog/ - A wired content collection — add an .mdx file and it appears here and in the sitemap.
- Two worked articles
/blog/… - Why we draw the garden in section before we plant it, and the layer most gardens skip is the one below the datum. Both argue for paying a designer.
- 404
/404 - Designed, not default. Keeps the navigation.
What is in the build
- A pinned, scroll-scrubbed planting cross-section assembling stratum by stratum from datum to sky — eight layers, authored SVG, the largest element on the page
- A declared control: the plot as found, with only the datum line and subgrade and no strata at all
- Garden photography inked onto drafting paper in the same two inks as the line-work, so photographs read as plates rather than as pasted-in pictures
- Five full garden case studies with their own planting layers, which is how a design practice shows range
- A maintenance service line given equal billing — the recurring revenue most landscape sites bury
- Geologica with Overpass Mono, both self-hosted; a working site-visit form plus live tel: and mailto:
- Vitest and Playwright suites included in the repository
The design decision
Every template in this catalog is loud in exactly one channel and deliberately quiet in the other three. That single rule is what stops 62 different worlds reading as one design system in different paint.
- The world
- The landscape architect's drawing board — bone line-work and mono survey annotations on a deep-fern field, with real garden photography reduced to the same two inks so a photo reads as a plate on the same board.
- The mechanic
- "The Section Builds": a pinned, scroll-scrubbed vertical cross-section of a designed planting assembles stratum by stratum from the datum line up — subgrade, root zone, groundcover, herbaceous, shrub, understorey, canopy, sky. Authored SVG, the largest element on the page.
- Loud channel
- Moving set-piece
- Imagery. Inked onto drafting paper
- Type & palette
- Geologica · Overpass Mono
-
#33502e#eef0e6#c7e070 - The control case
- The plot as found — a section with only the datum line and subgrade, zero strata, dead flat: the site before any design. Drawn, not labelled.
Who it is for
Built for landscape designers, garden design-and-build practices, and lawn and grounds-care companies that want to look like designers rather than mowers. It suits a practice charging a design fee and needing to justify it. For a hard-landscaping or building contractor, the construction build is the heavier-duty register.
Under the hood
- Astro 7 · static output, zero client framework
- Tailwind 4 · one @theme block holds the palette
- MDX content collections for the blog
- GSAP + Lenis for the scroll work, reduced-motion aware
- Self-hosted woff2 — no Google Fonts request
- Sitemap, canonicals and per-route meta wired
- Vitest + Playwright suites in the repository
- Zero third-party requests · strict CSP-ready
How to get started
- 01 Accept the repository invite and clone it.
- 02 Run
npm install, thennpm run dev. - 03 Replace the content in
src/data/with your own — that is where the brand, the copy and every list live. - 04 Swap the images in
public/images/and the palette in the@themeblock. - 05 Run
npm run buildand deploydist/anywhere static.
Questions
Is the section a real drawing?
It is authored SVG built as a real planting section — subgrade through canopy, in the order a designer draws them. The "plot as found" control has only the datum and subgrade, which is what makes the difference between a designed garden and an empty plot legible without a caption.
Can I use it for a lawn care or grounds maintenance business?
Yes, and the maintenance service line is already there. The register is more design-led than most lawn care sites, which tends to raise what you can charge rather than lower it.
Do my garden photos have to be inked like that?
It is the treatment the build applies, and it is the reason five gardens photographed in five different lights read as one portfolio. If you have a single consistent professional shoot you could relax it — most practices do not.
What exactly do I get for $49?
Access to a private GitHub repository holding the complete Astro source of this template — every route you see in the preview, the content model, the images and the tests. Updates arrive in that same repository.
How many sites can I build with one licence?
As many as you like, for yourself or for clients. The licence is per buyer, not per project. The one thing you may not do is resell or redistribute the source as a template, theme or starter kit.
Do I need to know Astro?
It helps, but the common case is editing content and colour. Content lives in typed objects under src/data, colour lives in one @theme block, and npm run dev shows the result. Deploying is a static folder — Cloudflare Pages, Netlify and Vercel all take it as-is.
Is anything loaded from a third party?
No. Fonts are self-hosted woff2, there is no analytics, no tag manager, no CDN script and no external CSS. The build ships static HTML under a strict Content-Security-Policy.
More trades & industry templates
KELMER OVERHEAD DOOR
Garage door repair
Loud
Moving set-piece
TORWICK LOCK & SAFE
Locksmith / master keying
Loud
Moving set-piece
KANWICK STEELWORKS
Steel fabrication
Loud
Texture
Crowder Plumbing & Drainage
Plumbing & drainage
Loud
Moving set-piece
BRISKWELL CLEANING CO.
Contract cleaning
Loud
Palette