Quick start

Open production/index.html locally or upload the production folder to static hosting. No build tool is required.

File structure

template/ contains readable source, production/ is ready to upload, backend-examples/ contains integrations, and marketplace-assets/ contains listing artwork.

Selecting a demo

Choose a folder under template/demos/. Each trade includes homepage, services, detail, projects, project detail, about, contact and service-area pages.

Editing company data

Edit template/assets/js/config.js. Update company, legal name, contact details, opening hours, service areas, locale, currency, endpoints, canonical URL, theme and schema values.

Colours and typography

Core tokens live in assets/css/base.css and trade overrides in assets/css/themes.css. Marketplace-only styles are isolated in marketplace-v2.css.

Replacing logos and images

Replace local files while preserving dimensions and filenames, or update paths. Generate 640, 1200 and 1800 pixel WebP variants and retain width, height, srcset and sizes.

Forms

Default mode is demonstration-only. Set endpoints in config.js and follow the PHP, Netlify or Formspree examples. Never place secrets in public JavaScript.

Estimator

Edit the estimator ranges in config.js and verify every price and disclaimer for the buyer’s market.

Service areas

Update the serviceAreas array, visible area content, metadata and structured data. Avoid thin duplicate pages.

Metadata and structured data

Replace example.com, titles, descriptions, Open Graph fields and JSON-LD values before publishing.

Dark mode and RTL

Manual theme choice is remembered. Electrical may default dark; other demos keep their art-directed default. The RTL starter uses dir=rtl and logical properties.

Deployment

Cloudflare Pages: upload the production folder and keep filenames case-correct. Netlify/GitHub Pages: publish the same folder. Shared hosting: upload contents to public_html. PHP forms require PHP-enabled hosting.

Accessibility

Keep one H1, semantic landmarks, visible focus, labels, error summaries, Escape closing, focus restoration, touch targets and reduced-motion support.

Local SEO

Create genuinely useful area pages, unique service details and responsible schema. Do not create doorway pages or fake reviews.

Production bundle

The bundled core CSS and JS are generated in production/assets. Edit readable source first, then rebuild or manually replace production files.

Licensing

See licensing/credits.txt, license-information.txt and image-asset-manifest.txt before redistributing or replacing media.

Troubleshooting

Broken images usually indicate path or filename-case errors. A form that shows demo success has not transmitted data until an endpoint is configured.

FAQ

The package works without Node. Images are local. Forms need an endpoint for real submission. All demo claims must be replaced.