Nine Lives

Template gallery

Every section of the site template, drawn live with a sample client (Harbor Light Plumbing, a made-up plumber). Pick where it should go, copy the prompt and paste it into Claude Code in the client's site repo.

Template core v1.2.0. For the team only: no search engine indexes it, nothing here counts visitors or sends a form.

Optional blocks of the sample client

Each switch is one setting in site.config.ts that a client can turn on. The previews that read it change as you switch.

24/7 emergency badge A badge in the header and the sticky bar, and a line on the contact page. emergency Licenses and insurance "Licensed · Insured · Bonded" and the license numbers in the footer. credentials "Text us" button A text button beside every call button. textNumber Notice bar A slim notice above the header (holiday hours, now hiring). notice "Open now" status "Open now until 5 PM" in the footer and on the contact page. showOpenStatus "Schedule service" button A second button in the sticky call bar. schedule Logo image A logo picture instead of the business name as text. logo

Core sections

Built into every site from @site/ui and @site/seo. Each prompt says whether to place the section or just turn on its setting.

Header

core v1.2.0 Header

The top of every page: logo, menu, call and text buttons, and a phone menu.

Changes with: Logo image, "Text us" button, 24/7 emergency badge.

Open on its own

In this site repo (template core v1.2.0), the Header (the Header component) is already on every page through apps/site/src/routes/+layout.svelte. Change it only through its settings in apps/site/site.config.ts: `name`, `logo`, `phone`, `textNumber` and `emergency`. Follow docs/conventions.md.

Notice bar

core v1.2.0 NoticeBar

A slim bar above the header for holiday hours, "Now hiring" or storm service.

Changes with: Notice bar.

Open on its own

In this site repo (template core v1.2.0), turn on the Notice bar by setting `notice` and `timeZone` in apps/site/site.config.ts (the comments there say what each setting does). It is drawn by the NoticeBar component from @site/ui, which is already wired in. Follow docs/conventions.md.

Hero

core v1.2.0 Hero

The big opening section with the page heading, a photo and the call button.

Open on its own

Place it

In this site repo (template core v1.2.0), add the Hero section (the Hero component from @site/ui) and place it on the home page, under the hero. Wire it the way apps/site/src/routes/+page.svelte wires its sections: business details from apps/site/site.config.ts, words in apps/site/src/content/. Follow docs/conventions.md.

Service grid

core v1.2.0 ServiceGrid

One card per service, each linking to that service’s page.

Open on its own

Place it

In this site repo (template core v1.2.0), add the Service grid section (the ServiceGrid component from @site/ui) and place it on the home page, under the hero. Wire it the way apps/site/src/routes/+page.svelte wires its sections: business details from apps/site/site.config.ts, words in apps/site/src/content/. Follow docs/conventions.md.

Reviews

core v1.2.0 Reviews

Customer reviews with star ratings.

Open on its own

Place it

In this site repo (template core v1.2.0), add the Reviews section (the Reviews component from @site/ui) and place it under services. Wire it the way apps/site/src/routes/+page.svelte wires its sections: business details from apps/site/site.config.ts, words in apps/site/src/content/. Follow docs/conventions.md.

Areas served

core v1.2.0 AreaList

The towns the business covers, each linking to its own page.

Open on its own

Place it

In this site repo (template core v1.2.0), add the Areas served section (the AreaList component from @site/ui) and place it under services. Wire it the way apps/site/src/routes/+page.svelte wires its sections: business details from apps/site/site.config.ts, words in apps/site/src/content/. Follow docs/conventions.md.

FAQ

core v1.2.0 Faq

Questions that open and close. Works with a keyboard and without JavaScript.

Open on its own

Place it

In this site repo (template core v1.2.0), add the FAQ section (the Faq component from @site/ui) and place it under services. Wire it the way apps/site/src/routes/+page.svelte wires its sections: business details from apps/site/site.config.ts, words in apps/site/src/content/. Follow docs/conventions.md.

Photo gallery

core v1.2.0 PhotoGallery

A grid of photos with captions.

Open on its own

Place it

In this site repo (template core v1.2.0), add the Photo gallery section (the PhotoGallery component from @site/ui) and place it under services. Wire it the way apps/site/src/routes/+page.svelte wires its sections: business details from apps/site/site.config.ts, words in apps/site/src/content/. Follow docs/conventions.md.

Trust badges

core v1.2.0 TrustBadges

"Licensed · Insured · Bonded" and each license number, exactly as the client gave them.

Changes with: Licenses and insurance.

Open on its own

In this site repo (template core v1.2.0), turn on the Trust badges by setting `credentials` in apps/site/site.config.ts (the comments there say what each setting does). It is drawn by the TrustBadges component from @site/ui, which is already wired in. Follow docs/conventions.md.

Call-to-action band

core v1.2.0 CtaBand

A coloured strip near the bottom of a page asking the visitor to call.

Open on its own

Place it

In this site repo (template core v1.2.0), add the Call-to-action band section (the CtaBand component from @site/ui) and place it just above the footer. Wire it the way apps/site/src/routes/+page.svelte wires its sections: business details from apps/site/site.config.ts, words in apps/site/src/content/. Follow docs/conventions.md.

Quote form

core v1.2.0 ContactFormShell

The fields of the quote form. In the gallery it sends nothing.

Open on its own

Place it

In this site repo (template core v1.2.0), add the Quote form section (the ContactFormShell component from @site/ui) and place it on the contact page. Wire it the way apps/site/src/routes/+page.svelte wires its sections: business details from apps/site/site.config.ts, words in apps/site/src/content/. Follow docs/conventions.md.

24/7 emergency service

core v1.2.0 EmergencyBadge, EmergencyLine

The emergency badge (header and sticky bar) and the emergency line on the contact page.

Changes with: 24/7 emergency badge.

Open on its own

In this site repo (template core v1.2.0), turn on the 24/7 emergency service by setting `emergency` in apps/site/site.config.ts (the comments there say what each setting does). It is drawn by the EmergencyBadge, EmergencyLine component from @site/ui, which is already wired in. Follow docs/conventions.md.

"Open now" status

core v1.2.0 OpenStatus

"Open now until 5 PM" or "Closed, opens Mon 7 AM", worked out in the visitor’s browser.

Changes with: "Open now" status, 24/7 emergency badge.

Open on its own

In this site repo (template core v1.2.0), turn on the "Open now" status by setting `showOpenStatus`, `timeZone` and `hours` in apps/site/site.config.ts (the comments there say what each setting does). It is drawn by the OpenStatus component from @site/ui, which is already wired in. Follow docs/conventions.md.

Call and text buttons

core v1.2.0 CallButton, TextButton

Tap-to-call and tap-to-text buttons in the three looks the sections use.

Changes with: "Text us" button.

Open on its own

In this site repo (template core v1.2.0), turn on the Call and text buttons by setting `phone` and `textNumber` in apps/site/site.config.ts (the comments there say what each setting does). It is drawn by the CallButton, TextButton component from @site/ui, which is already wired in. Follow docs/conventions.md.

Footer

core v1.2.0 Footer

Contact details, hours, page links and trust badges at the bottom of every page.

Changes with: Logo image, Licenses and insurance, "Open now" status, 24/7 emergency badge.

Open on its own

In this site repo (template core v1.2.0), the Footer (the Footer component) is already on every page through apps/site/src/routes/+layout.svelte. Change it only through its settings in apps/site/site.config.ts: `name`, `logo`, `tagline`, `email`, `address`, `hours`, `credentials` and `showOpenStatus`. Follow docs/conventions.md.

Sticky call bar

core v1.2.0 StickyCallBar

The call button pinned to the bottom of the screen on phones, with optional text and schedule buttons.

Changes with: "Text us" button, "Schedule service" button, 24/7 emergency badge.

Open on its own

In this site repo (template core v1.2.0), the Sticky call bar (the StickyCallBar component) is already on every page through apps/site/src/routes/+layout.svelte. Change it only through its settings in apps/site/site.config.ts: `phone`, `textNumber`, `schedule`, `stickyBar` and `emergency`. Follow docs/conventions.md.

Search-engine tags

core v1.2.0 Seo (@site/seo)

The tab title, description, share preview and structured data every page gets.

Open on its own

In this site repo (template core v1.2.0), the Search-engine tags (the Seo (@site/seo) component) is already on every page through apps/site/src/routes/+layout.svelte. Change it only through its settings in apps/site/site.config.ts: `name`, `description`, `url`, `businessType`, `photos.hero` and `credentials`. Follow docs/conventions.md.

Packages

Large optional features added with pnpm nl add, each at its tagged version.

Not in this build, because nl-packages couldn't be read here (it is private): sign in with gh auth login and gh auth setup-git, then build again.

before-after: Couldn't reach https://github.com/Nine-Lives-Dev/nl-packages.git: fatal: could not read Username for 'https://github.com': terminal prompts disabled
blog: Couldn't reach https://github.com/Nine-Lives-Dev/nl-packages.git: fatal: could not read Username for 'https://github.com': terminal prompts disabled
careers: Couldn't reach https://github.com/Nine-Lives-Dev/nl-packages.git: fatal: could not read Username for 'https://github.com': terminal prompts disabled
commercial: Couldn't reach https://github.com/Nine-Lives-Dev/nl-packages.git: fatal: could not read Username for 'https://github.com': terminal prompts disabled
espanol: Couldn't reach https://github.com/Nine-Lives-Dev/nl-packages.git: fatal: could not read Username for 'https://github.com': terminal prompts disabled
estimate: Couldn't reach https://github.com/Nine-Lives-Dev/nl-packages.git: fatal: could not read Username for 'https://github.com': terminal prompts disabled
financing: Couldn't reach https://github.com/Nine-Lives-Dev/nl-packages.git: fatal: could not read Username for 'https://github.com': terminal prompts disabled
offers: Couldn't reach https://github.com/Nine-Lives-Dev/nl-packages.git: fatal: could not read Username for 'https://github.com': terminal prompts disabled
pricing: Couldn't reach https://github.com/Nine-Lives-Dev/nl-packages.git: fatal: could not read Username for 'https://github.com': terminal prompts disabled
projects: Couldn't reach https://github.com/Nine-Lives-Dev/nl-packages.git: fatal: could not read Username for 'https://github.com': terminal prompts disabled
rebates: Couldn't reach https://github.com/Nine-Lives-Dev/nl-packages.git: fatal: could not read Username for 'https://github.com': terminal prompts disabled
team: Couldn't reach https://github.com/Nine-Lives-Dev/nl-packages.git: fatal: could not read Username for 'https://github.com': terminal prompts disabled
warranty: Couldn't reach https://github.com/Nine-Lives-Dev/nl-packages.git: fatal: could not read Username for 'https://github.com': terminal prompts disabled
water-quality: Couldn't reach https://github.com/Nine-Lives-Dev/nl-packages.git: fatal: could not read Username for 'https://github.com': terminal prompts disabled