LAWNGEVITY · V1 WIREFRAMES · APR 29 2026 · BETTER OFF GROWTH

v1 wireframes for lawngevitytn.com

Low-to-mid fidelity, grayscale, sketchy-feel. Annotated for motion + interaction. Each page shows desktop and mobile views. Click any card to open. Photography is intentionally placeholders, brand color is intentionally one neutral accent — both fill in after Nate's review.

01

Home

Two-track conversion split (Subscription · Project), services grid, gallery preview, reviews feed, area map, final CTA.

DESKTOP + MOBILE · 12 sections
02

Service detail — Drainage

Filled example for a high-margin service. Reusable template for the other 7 services.

TEMPLATE · DESKTOP + MOBILE
03

Service area — Maryville

Filled example for a priority city. Reusable template for Alcoa, Farragut + Phase-2 cities.

TEMPLATE · DESKTOP + MOBILE
04

Project gallery

Filterable by service. Before/after slider behavior shown in lightbox state.

3 STATES · DESKTOP + MOBILE
05

About

Nate's story, values, credentials, service area cross-link.

DESKTOP + MOBILE
06

Get a quote

Branching form: Path A subscription (~30s, 5 fields) · Path B project (~2 min, photos).

3 STATES · BRANCH · DESKTOP + MOBILE
07

Blog index + post

Filterable index. Long-form post template w/ sticky TOC + inline service cross-links.

INDEX + POST · DESKTOP + MOBILE
08

Contact

Phone-first. Lighter than quote. 3-field form, embedded service-area map.

DESKTOP + MOBILE

README — what's here, what's not, how to read these

What you're looking at

Eight HTML files, one per page in the v1 sitemap, plus this index. Open any file directly in a browser — no build step. Each page renders desktop + mobile views side-by-side at fixed widths so the proportions are honest.

Annotation system

Design system used (placeholder, on purpose)

Color
paper
paper-2
ink
accent†

† One neutral accent placeholder. Not the brand color. Replace once Nate confirms.

Type
  • Caveat — wireframe headers (sketchy)
  • Hanken Grotesk — body, UI
  • JetBrains Mono — annotations

Final type pairing is TBD with brand. These are placeholders to keep wireframes legible without implying a brand decision.

Reusable components (wireframed once, repeat across pages)

Non-negotiable constraints — how each is handled

Out of scope for v1 (per brief)

File list

Next steps

send to Nate (Steinbach) for approval or revisions → design comps + Astro.js build. Brand color, real photography, and final type pairing slot in at comp stage; the wireframe structure should not change much.