Fieldwork
A warm, photo-led theme for local builders, trades and home services. A stepped hero photograph, three service pages, project stories, a team section, two estimate paths, a blog and a contact form that knows which service the visitor picked.
Editions: Astro (source), HTML (plain files, no build), Next.js (React project).
One payment for Fieldwork and everything else - all 38 themes, every future release, and the Astro visual builder included.
See Fieldwork in action
Every page and section is part of the download. Use these as launch-day templates - keep the structure, swap the copy.
Fieldwork is built for local builders, trades and home-services businesses: extension and renovation teams, carpenters, and the people who handle repairs and maintenance. The first screen is a wide photograph with a stepped corner, framed by a rating, a short introduction and the service tags a homeowner looks for. Below it come plain stats, three services with their own pages, the company story, a reassurance band, the team, project stories with locations, two estimate paths, the latest articles and an FAQ. The estimate buttons and service pages open the contact form with the right service already selected. Every word, link, photo path, team member, project, article and form field lives in one src/config/site.ts, and the form starts in an honest demo mode until you connect Formspree, FormSubmit, Netlify or your own endpoint.
Best Fit For
- Builders and extension specialists
- Renovation and refurbishment teams
- Carpenters, joiners and maintenance trades
- Local home-services businesses that quote by the job
Full Page Set
Every page is real and editable - no placeholders, no "coming soon" stubs.
13 Sections Included
Every section is a ready-to-use Astro component. Add it to any page, customize via config, or remove what you don't need.
What's Included
A first screen that looks like the work
The hero is a wide photograph from a building site with a stepped corner, a rating with team avatars and the service tags homeowners look for. A slow parallax moves the photo as the page scrolls.
Built around the estimate
Two estimate paths, one for small jobs and one for bigger projects, open the contact form with the right service already chosen. Service pages link to the same form, and the demo mode says plainly that nothing was sent.
Services, projects and a blog
Three service pages, three project stories and three articles come with the theme. Each one is an entry in site.ts, so adding a service or a project is a text edit that creates its page.
Ready for more languages
Copy the template file, translate what you need and register it. Every page gets a version under the language code, anything you leave out falls back to English, and right-to-left languages work too.
Forms, newsletter, and analytics - pre-wired
Fieldwork is ready to connect to your preferred providers. Pick from the options below, drop in a single API key, and your contact form, newsletter signup, and analytics are live - no backend, no JavaScript, no glue code.
Contact form
The Contact section's <form> renders with no JS. Set one provider in site.ts; the form action wires automatically.
- Formspree50 free submissions / month, no domain restriction
- FormSubmitFree, no signup - just an email confirmation
- Netlify FormsFree 100/month - Netlify hosting only
Newsletter
The Newsletter form sends subscribers directly to your ESP. The email input name auto-adjusts per provider.
- MailchimpStandard EMAIL field; honeypot supported
- ConvertKit (Kit)email_address field; works with any form ID
- Buttondownemail field; lightest, indie-friendly
Analytics
Layout.astro injects the right script tag based on the provider you choose. No client-side branching.
- Google Analytics 4Paste your G-XXXXXXXXXX measurement ID
- PlausiblePrivacy-friendly, ~1 KB script, no cookies
- UmamiSelf-hostable, also cookie-free
Tech Stack
Config-Driven Setup
Every theme uses a single src/config/site.ts file for customization. Change your brand, navigation, form providers, analytics, and section content without touching component code.
// src/config/site.ts
export const siteConfig = {
name: "Your Company",
tagline: "Your tagline here",
url: "https://yourdomain.com",
navigation: { sticky: true, links: [...], cta: {...} },
social: { twitter: "...", github: "...", linkedin: "..." },
seo: { title: "...", description: "...", ogImage: "/og.png" },
// ── Provider switches ────────────────────────────────
contactForm: { provider: "formspree", formspreeId: "your-id" },
newsletter: { provider: "convertkit", actionUrl: "https://..." },
analytics: { provider: "plausible", plausibleDomain: "you.com" },
// ── Section data ─────────────────────────────────────
team, video, timeline, comparison, gallery,
carousel, tabs, appDownload, map, footer,
} as const;Built to be edited by AI
Fieldwork ships an AGENTS.md and
a CLAUDE.md at the project root.
Claude Code, Cursor, Copilot, and Codex read them the moment you open the folder.
So your agent starts knowing which file to edit, which design decisions are deliberate, and which parts of the theme break quietly if touched. You get the right change on the first pass instead of a confident guess.
- A task map. Every common request routed to the exact file, so no time is spent exploring.
- Design invariants. The decisions that make the theme worth buying, marked do-not-touch.
- The traps. The specific things that break this theme silently, written down.
- A done checklist. What to build, what to scroll, what to verify before claiming success.
# AGENTS.md - Fieldwork
## Task map
| The client wants to change | Edit |
|---|---|
| Brand name, logo, favicon | site.ts -> identity |
| Colors | site.ts -> theme |
| Any homepage copy | site.ts -> home.<block> |
| Add a page or an article | new .md in src/content/ |
Rule: copy belongs in site.ts, never inside a component.
## Design invariants
Do not "improve" these. They are why the theme is worth its price.
- The accent stays loud. Do not mute or pastel it.
- Display headings stay oversized. The scale is the design.
## Traps
The things that break this theme silently, written down,
so your agent does not have to discover them by breaking them.
## Before you say you are done
npm run build # must succeed and emit every route
Scroll each page to the bottom. Report what you did not verify.Excerpt. The full file ships with the theme.
The same design as plain HTML
No Astro, no npm, no build step. Unzip the folder, open index.html straight from your disk and it works. Every page is a plain .html file you edit in any editor, the styling lives in one readable CSS file with the colours at the top, and an optional Tailwind folder is there if you want utility classes back. Deploy it to any static host: Netlify, Cloudflare Pages, GitHub Pages or plain cPanel.
The same design as a Next.js project
Fieldwork also comes as a Next.js 16 project with React 19 and TypeScript, built on the App Router. It looks exactly like the live preview: the same pages, sections, interactions and motion, written as React components. The copy lives in one config file. Its routes are ready for more languages. It exports as static HTML, so it deploys to Vercel, Netlify, Cloudflare Pages, GitHub Pages or any static host, and it ships with an AGENTS.md for coding assistants. Included in the All-Access Pass.
Full documentation, ready before you buy
Browse the install guide, the site.ts reference, provider setup, deploy instructions, and the Fieldwork-specific page - all live now.
Guides that cover Fieldwork.
More themes from the collection.
August
Personal / Portfolio / SaaS
Slab
SaaS / Startup
Vertex
SaaS / Startup
Tally
SaaS / Startup
Or get every theme - these included - with the All-Access Pass.