Mend

Live preview ->

Mend is a complete website for trades and local service businesses that quote by the job. The demo shows a home-repair team, and the structure suits carpenters, painters, fitters, and maintenance teams just as well. The homepage opens on an asymmetric split hero with a golden job slip: a visitor picks what needs doing and lands on the quote form with that service already selected.

A draggable before/after comparison shows the difference the work makes, and it works with a keyboard as well as a pointer. Six service pages, three project stories, a service-areas page, an about page with the team, reviews, an FAQ, and an optional journal give a local business a complete site rather than a single page.

Property	Value
Tier	Pro ($49)
Category	Trades / Local Services
Font	Manrope Variable (self-hosted)
Palette	Cobalt (#2447D8) and gold (#FFCD57) on pale-blue paper
Motion	Lightweight scroll reveals, no animation library
Collections	services, projects, blog
Configuration	Everything visible lives in src/config/site.ts

Included routes

• / - homepage with hero and job slip, trust strip, proof, services, about story, before/after comparison, process, recent work, reviews, areas and FAQ, journal, and closing call to action
• /services/ and /services/[slug]/ - services overview and six generated service pages
• /work/ and /work/[slug]/ - work index and three generated project pages
• /blog/, /blog/page/[n]/, and /blog/[slug]/ - paginated journal and three generated articles
• /about/, /areas/, /contact/
• /privacy/, /terms/, /404.html
• Generated sitemap output

The production build generates 23 static pages, including the custom 404.

What makes Mend different

• Built around getting the quote - the job slip in the hero and every service page link to the quote form with the right service preselected.
• Show the difference - the before/after comparison is a real control: drag it, or use the arrow keys.
• Every visible edit in one file - business details, interface copy, palette, reviews, FAQs, areas, and legal placeholders are in site.ts, and any service, project, or article can be overridden there too.
• Local search basics included - a structured-data block describes the business, its address, hours, and service radius.
• Original imagery - nine photographs made for this theme, stored locally with no remote image dependency.

Mend-specific setup

Change the business details and palette

Start in src/config/site.ts. identity holds the name, legal name, URL, language, theme colour, and favicon. business holds the details customers and search engines need:

business: {
  schemaType: "HomeAndConstructionBusiness",
  phoneDisplay: "(555) 014-7283",
  phoneHref: "tel:+15550147283",
  email: "hello@example.com",
  address: { streetAddress: "28 Example Lane", ... },
  hours: ["Mo-Fr 08:00-18:00", "Sa 09:00-14:00"],
  priceRange: "$$",
  serviceRadius: "Brookfield and nearby neighbourhoods",
},
appearance: {
  palette: {
    cobalt: "#2447D8",
    yellow: "#FFCD57",
    paper: "#F5F7FB",
    ink: "#1D2B3B",
    muted: "#617080",
    white: "#FFFFFF",
    line: "#D9E0EA",
  },
  maxWidth: 1240,
},

motion turns the scroll reveals on or off and sets their duration and distance. Reveals are skipped automatically for visitors who prefer reduced motion.

Edit the homepage

The homepage blocks in site.ts are hero (including the job slip), trust, proof, services, about, comparison, process, work, reviews, areas, faq, journal, and homeCta. Each owns its headings, copy, images, alt text, and links.

Add or edit services, projects, and articles

Content lives in three collections:

• src/content/services/ - each service generates /services/[slug]/
• src/content/projects/ - each project story generates /work/[slug]/
• src/content/blog/ - each article generates /blog/[slug]/

To keep every visible edit in one file, override any entry by its filename in siteConfig.content.overrides. data replaces selected frontmatter fields and body replaces the Markdown body:

content: {
  overrides: {
    blog: {
      "grouping-small-jobs": {
        data: { title: "A new title", date: "2026-09-18" },
        body: "## Start with the outcome\n\nStandard Markdown works here.",
      },
    },
  },
},

Every listing, detail page, homepage preview, and footer reference uses the resolved values.

Set up the journal

The journal is on by default with two articles per page, so the three included posts demonstrate /blog/ and /blog/page/2/. Change journal.pagination.pageSize and the pagination labels in site.ts, or set journal.enabled to false to remove the journal’s navigation and routes.

Connect the quote form

Mend starts in safe demo mode and sends no data. siteConfig.contact.form.provider accepts:

• formspree
• formsubmit
• netlify
• custom
• demo

Add the matching ID, email, or endpoint in the same block. Demo mode and incomplete settings make no request and say so clearly on the page. Test delivery on your own deployment with an inbox you control.

Localization

Mend is i18n-ready. English stays the complete source in src/config/site.ts; register another language in src/i18n/config.ts with an override that only holds the translated keys. Every page and content detail has a mirrored route, internal links receive the language prefix, and untranslated keys fall back to English. Put translated service, project, and article text in that language’s content.overrides map. Leave journal.dateLocale blank to derive it from the language.

Step by step, with the checklist: Add a language.

Agent-ready

The theme ships an AGENTS.md at its root, plus a CLAUDE.md that points at it. Claude Code, Cursor, Copilot, and Codex read these on open, so an agent starts with the file map: what site.ts owns, how content overrides work, which routes must stay mirrored, and the rule that the quote form stays in honest demo mode until a provider is set.

HTML edition

Mend 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 job slip and service links still preselect the quote form, and the README explains where the palette lives and how to connect the form.