# Service Business Template

> A three-column service business website with sticky navigation, an interactive service selector and an enquiry ticket. Includes bicycle workshop, dog grooming and home cleaning versions in one template.

Canonical: https://gsapvault.com/templates/service-business-template
Live demo: https://gsapvault.com/demos/service-business-template/index.html

| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | £10 |
| Difficulty | intermediate |
| Plugins | ScrollTrigger |
| Techniques | scroll-reveal, interactive-selection |
| Uses Lenis | No |

## Lighthouse, as measured

Google Lighthouse on the demo (3 pages, lowest score shown), 15 September 2026. A measurement of the demo as shipped, not a promise for your page.

| Category | Score |
|----------|-------|
| Accessibility | 100 |
| Best practices | 100 |

No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live.

## Overview

One three-column layout, three complete service businesses. Spoke Works pairs orange and condensed lettering with bicycle workshop photography. Marlow & Mutt uses apricot, a soft serif and dog grooming imagery. Sunday Home brings cream, sage and warm sand surfaces and bold type to a home cleaning service.

Each version includes three service choices, a synchronised enquiry ticket, practical information and expandable answers. The grooming enquiry asks about the dog and breed; the cleaning enquiry adds a postcode and home size. The demo launcher lets you compare all three versions.

All three editable HTML pages and their local photographs are included in the same download, sharing one layout stylesheet and interaction script. Choose a starting point, replace the example business details and connect a form provider: the included enquiries only create local previews.

## Features

- Three complete versions: bicycle workshop, dog grooming and home cleaning
- Shared three-column layout with sticky identity and enquiry rails
- Service comparison with synchronised ticket and enquiry selection
- Nine bundled, optimised photographs across three distinct identities
- Industry-specific enquiry fields, native FAQs and practical details
- Responsive stacked layout, keyboard controls and reduced-motion support

## Use Cases

- Independent bicycle and repair shops
- Dog grooming and pet care businesses
- Home cleaning and other home service businesses

## Questions about this template

### Which businesses suit this three-column layout?

The permanent identity and enquiry rails suit service businesses where visitors need practical details quickly. Three complete examples are included: a bicycle workshop, a dog grooming salon and a home cleaning service. Choose the closest version, then replace its business details, service descriptions and photography while keeping the same layout.

### Are all three business versions included in the download?

Yes. The download includes separate bicycle workshop, dog grooming and home cleaning HTML pages, with shared layout and interaction files. Each has its own copy, photographs, type and palette. The demo-only version launcher is excluded, so your chosen page opens as a clean business website.

### Do the enquiry forms send messages or reserve appointments?

No. They are unwired static front ends that collect a service, name and email, plus bike notes, dog details or home size and postcode. Each shows a local preview only. Connect your chosen version to Formspree, Netlify Forms or your CRM and replace the preview response with a real submission result.

### What happens to the side panels on a phone?

The identity becomes a compact header with visible navigation links. The content reads vertically and the enquiry ticket and form follow the main page. Service selection still updates the ticket and form, and the enquiry links take visitors straight to the relevant control without a mobile menu overlay.

### Are the photographs for all three versions included?

Yes. Nine cropped and colour-treated WebP photographs are bundled locally: three bicycle workshop images, three grooming images and three home cleaning images. Source credits and the Pexels licence are documented in the README. The people pictured are illustrative stock subjects, not identified staff or endorsers of the fictional businesses.

## Vibe-Code Ready Setup

This template includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## How It Works

### A business always within reach

The central content column carries the workshop introduction, services and practical details. Desktop navigation and the enquiry ticket remain alongside it; smaller screens turn the same content into a readable sequence.

### Compare the work

Three service choices make the scope and starting price easy to compare. The chosen coverage, service name and price follow into the enquiry ticket and form, whether the visitor needs a bicycle repair, a dog groom or a home clean.

### An honest enquiry preview

Each version collects a service, name and email address, then adds details relevant to that business: bike notes, dog information or home size and postcode. The local summary explicitly says nothing has been sent or booked. Connect a form destination before receiving real enquiries.

### A usable static page

Service descriptions, workshop information and expandable answers remain available without animation. Visitors who prefer reduced motion get immediate state changes, and the page remains readable if the animation libraries cannot load.

## Documentation

How this template works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download.

### Quick Start

Open `index.html` (bicycle workshop), `dog-grooming.html` or `home-cleaning.html` in a browser. Choose one, edit its content, then upload it with the `assets/` folder to any static host. Rename your chosen page to `index.html` for the homepage. No build step is required. Internet access loads the fonts and GSAP; all nine photographs are bundled locally.

The product page has **Explore versions** thumbnail tabs above the preview; each switches the iframe in place. Standalone and fullscreen demos retain a compact launcher with the same three photographic choices. This launcher is demo-only and is excluded from buyer downloads. The three business pages are included; none depends on the launcher.

### Using It With Your Own Design

Start with the business name, contact details, opening hours and service descriptions in your chosen HTML page. The example address, phone, email and prices are fictional. Replace all of them before launch. All photographed people are illustrative stock subjects, not identified employees or endorsers.

All three pages share `assets/style.css` and `assets/script.js`. The two adaptations also load `assets/variants.css`, selected by `data-variant="grooming"` or `data-variant="cleaning"` on `<html>`. Keep this attribute and stylesheet when renaming a page. Change the semantic colours and type roles in the matching stylesheet. Preserve the narrow identity / wide content / enquiry-ticket relationship if you want this layout's character. The orange hero can carry equipment photography, a workspace or an example of your service.

The service buttons use `data-service`, `data-name`, `data-price` and `data-coverage`. Match their `data-service` values to the enquiry select's option values. `[data-ticket-name]`, `[data-ticket-price]` and `[data-coverage]` receive the selection. Replace or remove `.service-photo` for another industry. All three service descriptions remain in the page without JavaScript.

The script guards missing sections. You can remove a main section; its corresponding navigation link is hidden by the script, but delete that link too for the no-JS page. Keep the main landmark and skip link together. `.contact-rail` owns the desktop sticky placement and native overflow; no scroll library is required.

### Sections and Configuration

| Area | Edit |
| --- | --- |
| Identity | Wordmark, caption and section anchors in the header |
| Hero | Headline, introductory copy, photograph and three promises |
| Services | Button attributes, visible price/copy and matching form options |
| Service photograph | Local bicycle detail image and selected coverage caption |
| Workshop | Portrait, explanatory copy and visit link |
| Visit | Address, email and opening hours |
| Questions | Native `details` elements; add or remove freely |
| Enquiry | Contact ticket, service select and form integration |

### Enquiry Form

These are unwired static front ends. All collect a service, name and email. The workshop adds bike notes; grooming adds a dog name, breed/size and care notes; cleaning adds postcode, bedroom count and priorities. Each displays a local preview. It does not transmit data, save a booking or reserve a time. Connect Formspree, Netlify Forms or your own CRM before launch; replace the `data-enquiry` submit handler with a real request and error/success handling. Do not remove the demo disclosure until that integration works. The preview button is disabled without JavaScript. Additional fields marked `data-enquiry-detail="Readable label"` are included in the preview. `data-notes-label` and `data-price-suffix` on the form customise its summary. The notes textarea in the adaptations uses `name="notes"`; the bicycle page retains `name="bike"`.

### Palettes

Ivory surfaces and blue ink establish the reading layer. Safety orange identifies the hero; pale blue distinguishes technical and practical information. Orange carries dark text. Recheck contrast when changing tokens; white small text on the orange is not an approved pairing. The CSS comments record measured ratios.

Marlow & Mutt uses plum ink on cream, apricot and soft sage, with Fraunces display type and DM Sans body text. Sunday Home uses deep olive ink on warm cream, soft sage and sand, with Archivo Black headings and Public Sans body text. `variants.css` contains both token sets and the typography adjustments; it does not duplicate the base layout.

### Animation and Accessibility

GSAP animates the hero arrival, one-time section entrances and a subtle enquiry-ticket response after service selection. No content is pinned and there is no continuous animation. Native buttons work with Enter, Space and touch. The form uses native labels and validation; FAQs use native disclosure controls. Keyboard focus remains visible.

Reduced motion shows content immediately and updates selection without motion. With no JavaScript all service descriptions and information remain readable. With blocked GSAP/ScrollTrigger, native selection and the enquiry preview still work; the reveal gate is removed.

The head adds `.has-js` synchronously before the stylesheet. Preserve that placement and the reduced-motion CSS overrides when moving the page into another application. Reveal targets use explicit visible endpoints.

### Dependencies

- GSAP 3.15.0 and ScrollTrigger (demo pin); GSAP 3.12+ compatibility floor.
- Google Fonts: Barlow 400/500/600 and Barlow Condensed 600/700.
- Grooming: Fraunces 600/700 and DM Sans 400/500/600.
- Cleaning: Archivo Black 400 and Public Sans 400/500/600.
- No Lenis, framework or build tool is required by the downloaded site.

### Images and Credits

Local optimised WebP derivatives include the hero, mechanic and drivetrain close-up. The crops and subdued saturation are baked into the files, not applied by runtime filters.

- [Alexander Dummer — bicycle on a workshop stand](https://www.pexels.com/photo/black-road-bicycle-inside-room-132682/).
- [Henrique Rocha — mechanic adjusting a bicycle](https://www.pexels.com/photo/man-repairing-a-bicycle-11242855/).
- [Mathias Reding — bicycle gears and chain](https://www.pexels.com/photo/close-up-photo-of-bicycle-gears-13415392/).
- [Pexels licence](https://www.pexels.com/license/): photographs may be used and modified in website templates. They remain subject to their source licence; do not imply endorsement by the pictured people.

Replace `assets/img/workshop.webp` , `assets/img/mechanic.webp` and `assets/img/gears.webp` and update their alt text and dimensions. The source manifest documents provenance and crop dimensions. Inside the GSAP Vault authoring repository, regenerate with `bun scripts/build-template-assets.ts service-business-template`; buyers can simply replace the image files without a build step.

The wheel, paw and house marks are original SVG artwork included with the template.

Additional version photography (bundled as `grooming-*.webp` and `cleaning-*.webp`):

- [Goochie Poochie Grooming — washing a dog](https://www.pexels.com/photo/groomer-standing-and-washing-dog-19145897/).
- [Goochie Poochie Grooming — trimming a dog’s leg](https://www.pexels.com/photo/woman-hand-trimming-dog-19145880/).
- [Gustavo Fring — small dog in a salon](https://www.pexels.com/photo/small-dog-in-grooming-salon-6816837/).
- [Tima Miroshnichenko — wiping a living-room table](https://www.pexels.com/photo/woman-cleaning-the-house-6195198/).
- [Polina Tankilevitch — cleaning a window](https://www.pexels.com/photo/a-woman-cleaning-the-window-4440537/).
- [SHVETS production — cleaning a mirror](https://www.pexels.com/photo/woman-wearing-glove-cleaning-a-mirror-7513046/).

These use the same Pexels licence linked above. Replace the relevant three images and their alt text when adapting either page.

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium template. The standard license costs £10 one-time and covers unlimited personal and commercial projects with no attribution required for our code. Bundled third-party assets retain their own licences and attribution requirements. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Service Business Template](https://gsapvault.com/templates/service-business-template)
- [The Vault (£99 one-time, best value): every collection in the Vault library, plus future items added to those collections](https://gsapvault.com/effects)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt