Anvil
Dark, editorial theme for plumbers, electricians & local trades. Numbered services with hover-reveal, a before/after drag slider, a quote form, and LocalBusiness schema.
See Anvil in action
Every page and section is part of the download. Use these as launch-day templates - keep the structure, swap the copy.
Anvil is for plumbers, electricians, HVAC techs, and local trades whose website should look as serious as their work - not like the safety-orange-on-navy template every competitor uses. A dark charcoal canvas with one warm amber accent. Services are a numbered editorial list where hovering a row reveals the job photo - the number does the work an icon usually fakes. A real drag-to-reveal before/after slider, full-bleed crew photos, pull-quote reviews, and LocalBusiness structured data baked in. Two ways to capture the lead: a fast quote form and a contact form, plus a sticky call bar.
Best Fit For
- Plumbers, electricians, HVAC, and handymen
- Roofers, landscapers, cleaners, and local services
- Small contractor crews and family trades
- Local service businesses that live on calls
- Anyone past the cookie-cutter trades look
Full Page Set
Every page is real and editable - no placeholders, no "coming soon" stubs.
16 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
The Number Is the Icon
Anvil's services aren't an icon-card grid - they're a numbered editorial list (01, 02, 03…) over rule lines. Hover a row and a sticky job photo swaps in beside it. The number and the photo do the work, so the section reads like a real trade's portfolio, not a clip-art template.
Drag to See the Fix
A real before/after slider lets visitors drag to reveal the work, with per-item treatments - a yellow hue or black-and-white on the 'before' side - that dramatize the transformation. It's the proof a trades site lives or dies on, done as an interaction instead of two photos side by side.
Built to Get the Call
Anvil captures the lead three ways: a fast quote form with a service selector, a full contact form, and a sticky blurred call bar with a 24/7 indicator. LocalBusiness JSON-LD pulls your name, phone, hours, and service area straight from config so local search has what it needs.
Forms, newsletter, and analytics - pre-wired
Anvil 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;Full documentation, ready before you buy
Browse the install guide, the site.ts reference, provider setup, deploy instructions, and the Anvil-specific page - all live now.