Fieldwork

Live preview ->

Fieldwork is a theme for local builders, trades and home-services businesses. The first screen is a wide photograph from a building site with a stepped corner, framed by a rating with team avatars, a short introduction and the service tags a homeowner looks for. A slow parallax moves the photo as the page scrolls.

Below the hero come four plain stats, three services with their own pages, the company story, a reassurance band, the team, project stories, two estimate paths, the latest blog articles, an FAQ and a footer with a scrolling wordmark.

Property	Value
Tier	Pro ($49)
Category	Trades / Local Services
Fonts	Manrope, bundled locally
Palette	Charcoal (`#292929`), warm grey panels (`#f5f5f4`) and orange (`#ff914d`)
Motion	GSAP hero parallax and content reveals, page fades between routes
Styles	Tailwind CSS 4 for layout, plus `src/styles/global.css` for components
Content	Every string, service, project, team member, article and form field in `src/config/site.ts`
Languages	English by default; every route has a matching language route

Included routes

/ - hero, stats, services, about, reassurance band, team, projects, estimate paths, blog preview and FAQ
/services/ and /services/[slug]/ - the services overview and three service pages
/about/ - the company story, values and team
/projects/ and /projects/[slug]/ - the project list and three project stories
/blog/ and /blog/[slug]/ - the blog and three articles
/contact/
/privacy/, /terms/

The production build generates 18 static pages, including the 404 page.

What makes Fieldwork different

A first screen that looks like the work - a wide site photograph with a stepped corner, a rating with team avatars and service tags.
Built around the estimate - two estimate paths and every service page open the contact form with the right service already chosen.
Services, projects and articles from one file - each is an entry in site.ts, and its page is built from it.
Ready for more languages - add a language by copying one template file and registering it.

Fieldwork-specific setup

Set the site address

Set url in src/config/site.ts to your full public address, for example https://example.com, or set PUBLIC_SITE_URL when you build. Canonical URLs, social images, language links and the article structured data use it.

Business details and branding

business holds the email, phone number, service area and opening hours shown in the header, contact page and footer. branding sets the logo file, the dot after the name and the favicon, and metadata sets the browser bar colour and the default social image.

Connect the contact form

The form starts in demo mode: it checks what is typed and says plainly that nothing was sent. Choose a provider in contact.form.delivery:

delivery: defineDelivery({ provider: "formspree", formId: "YOUR_FORM_ID" }),
// or { provider: "formsubmit", recipient: "you@example.com" }
// or { provider: "netlify", formName: "fieldwork-contact" }
// or { provider: "custom", endpoint: "/api/contact", encoding: "json" }

Custom endpoints accept json, multipart or urlencoded. Everything in this config is sent to the browser, so never put a secret key in it. Update the form disclosure and the privacy notice for your provider.

Change the form fields

contact.form.fields lists the fields in the order they appear. Each has a name, a label, a type (text, email, tel, url, select or textarea), and optional required, placeholder, maxLength and fullWidth settings. The name is what your provider receives.

Service preselect

Links such as /contact/?service=building-extensions open the contact form with that service chosen. The field they fill is set by contact.prefillField, and the value must match one of that select field’s options. If you rename a service slug, update its option value and the estimate links in estimate.options.

Add a service, project or article

Add a service to services.items. Its slug creates /services/<slug>/. Add it to the Services dropdown in navigation and to the contact form’s service options.
Add a project to projects.items. Its slug creates /projects/<slug>/, with a category, location, photo, description and scope list.
Add an article to blog.items, newest first. Its slug creates /blog/<slug>/, dates use YYYY-MM-DD, and each section has a stable id that feeds the article’s table of contents. homeLimit and relatedLimit set how many articles appear on the homepage and under each article.

Add a language

Copy src/i18n/locales/template.ts to a new file, for example fr.ts, and translate what you need.
Import it and register it in src/i18n/config.ts with its label, HTML language and direction.
Run npm run check, npm test, npm run verify:i18n and npm run build.

Anything you leave out falls back to English. Lists such as navigation, services and articles replace the English list as a whole, so copy every item before translating. A language menu appears once a second language is registered. Set direction: "rtl" for right-to-left languages.

Change the palette

The colour tokens at the top of src/styles/global.css (--color-ink, --color-panel, --color-accent and the rest) set the charcoal, panel and orange colours. metadata.themeColor in site.ts sets the browser bar colour.

Tune the motion

The hero parallax, the reveals, the menu and the form behaviour are in src/scripts/main.ts, which cleans them up between pages. Reduced-motion settings turn the animation off, and the content stays visible without JavaScript.

labels.credit in site.ts holds the “Created by aerolaunch.app” line in the footer. Edit it, or remove it from src/components/Footer.astro.

Coding assistants

AGENTS.md describes where content lives, how routes and languages work, the form providers and the checks to run, and CLAUDE.md points Claude Code to it.

Next.js edition

Fieldwork is also available as a Next.js edition: the same design as a Next.js 16 and React 19 project with TypeScript and Tailwind CSS 4, exported as static HTML. The menu, the contact form and the motion are React client components, and the routes are translation-ready like the Astro edition. How it works, how to run it and how to deploy it: Next.js edition.

HTML edition

Fieldwork is also available as a plain HTML template: the same design as ready-made HTML, CSS and JavaScript files that open straight from disk, with no build step. The estimate links still preselect the contact form, and the README explains where the colours live and how to connect the form.