Multi-location local service
A multi-page site for a local service business with two to five locations (clinic, salon, workshop, dental or vet practice): home, services with prices, one service in detail, locations, one location in detail, reviews, about, careers, and a booking and contact page.
npx shadcn add @klarhimmel/template-multi-location
Install
npx shadcn add @klarhimmel/template-multi-locationPages in this template
Each opens its live demo; links between the pages work inside it.
Page 1 of 9
Home (/)
home. 9 sections, each one block with this template's own copy.
| Anchor | Block | Content |
|---|---|---|
#top | header/simple | Närhet AB |
#hero | hero/centered | Good care, close to where you live |
#services | features/grid | What we offer |
#locations | contact/offices | Find us near you |
#how | steps/horizontal | Booking takes a minute |
#reviews | testimonials/rating | Customers rate us [score] out of [maximum] |
#faq | faq/accordion | Good to know |
#cta | cta/banner | Book your time today |
#footer | footer/link-columns | Närhet AB |
Page 2 of 9
Services (/services/)
services. 7 sections, each one block with this template's own copy.
| Anchor | Block | Content |
|---|---|---|
#top | header/simple | Närhet AB |
#hero | hero/minimal | Services and prices |
#prices | pricing/rows | What it costs |
#included | features/list | What is always included |
#faq | faq/accordion | About our services |
#cta | cta/card | Pick a service and a time |
#footer | footer/link-columns | Närhet AB |
Page 3 of 9
Service (/services/service-name/)
service-detail. 8 sections, each one block with this template's own copy.
| Anchor | Block | Content |
|---|---|---|
#top | header/simple | Närhet AB |
#hero | hero/split | [service name] |
#included | features/list | What you get |
#visit | steps/timeline | What happens, step by step |
#price | pricing/single | One clear price |
#faq | faq/accordion | About this service |
#cta | cta/banner | Book [service name] |
#footer | footer/link-columns | Närhet AB |
Page 4 of 9
Locations (/locations/)
locations. 6 sections, each one block with this template's own copy.
| Anchor | Block | Content |
|---|---|---|
#top | header/simple | Närhet AB |
#hero | hero/minimal | One standard at every location |
#offices | contact/offices | Our locations |
#standard | features/grid | The same standard everywhere |
#cta | cta/banner | Which location suits you? |
#footer | footer/link-columns | Närhet AB |
Page 5 of 9
Location (/locations/city-name/)
location-detail. 7 sections, each one block with this template's own copy.
| Anchor | Block | Content |
|---|---|---|
#top | header/simple | Närhet AB |
#hero | hero/split | Göteborg |
#visit | contact/map | Find us |
#team | team/grid | Who you will meet here |
#voices | testimonials/grid | What customers here say |
#book | contact/booking | Pick a time at this location |
#footer | footer/link-columns | Närhet AB |
Page 6 of 9
Reviews (/reviews/)
cases. 6 sections, each one block with this template's own copy.
| Anchor | Block | Content |
|---|---|---|
#top | header/simple | Närhet AB |
#hero | hero/minimal | What our customers say |
#rating | testimonials/rating | [score] out of [maximum] from [number] reviews |
#wall | testimonials/wall | In their words |
#cta | cta/banner | Join them |
#footer | footer/link-columns | Närhet AB |
Page 7 of 9
About us (/about/)
about. 7 sections, each one block with this template's own copy.
| Anchor | Block | Content |
|---|---|---|
#top | header/simple | Närhet AB |
#hero | hero/minimal | [A line about who you are] |
#story | content/columns | Why we are the way we are |
#numbers | stats/row | The company in numbers |
#people | team/departments | Who runs it |
#cta | cta/card | Meet the team |
#footer | footer/link-columns | Närhet AB |
Page 8 of 9
Careers (/careers/)
careers. 7 sections, each one block with this template's own copy.
| Anchor | Block | Content |
|---|---|---|
#top | header/simple | Närhet AB |
#hero | hero/minimal | Work close to home, with people you like |
#why | features/grid | What it is like here |
#roles | blog/list | Join us |
#faq | faq/accordion | How we hire |
#cta | cta/card | Send an open application |
#footer | footer/link-columns | Närhet AB |
Page 9 of 9
Contact (/contact/)
contact. 7 sections, each one block with this template's own copy.
| Anchor | Block | Content |
|---|---|---|
#top | header/simple | Närhet AB |
#hero | hero/minimal | Book a time |
#book | contact/booking | Free times this week |
#channels | contact/channels | Reach us another way |
#visit | contact/offices | Our locations |
#message | contact/form | Send a message |
#footer | footer/link-columns | Närhet AB |
Install
CLI
npx shadcn add @klarhimmel/template-multi-locationpnpm
pnpm dlx shadcn@latest add @klarhimmel/template-multi-location- Klarhimmel
- Geist / Geist
- radius 8
- Needs
- React 19, Tailwind CSS v4 and the theme import. The page and every block it uses land under components/klarhimmel/.
Before you ship
Wire these before shipping
The template is a finished page with placeholder wiring. These are yours to connect.
Copy
Every string is neutral placeholder text, and the company name, city and contact details are placeholders too. Replace them with the company's own.
Links
Links to the template's own pages (`/services/`, `/contact/`) are plain paths: point them at your router. Links to https://example.com are placeholders.
Forms
Set `action` on the contact form and the booking panel (it is `/replace-with-your-endpoint` now). With `method: 'post'` they submit natively, with no JavaScript. The live demo never submits.
Images
Image slots are empty and carry a description (alt text): add photographs of the company's own work, people and premises.
Style
Uses the default Klarhimmel palette, Geist fonts, radius and spacing. Import theme.css after Tailwind.