B2B services firm
A multi-page site for a 15 to 60 person B2B services firm (advisory, IT, accounting): home, services, one service in detail, cases, about with team, careers, and a contact page with booking and a form. Neutral copy with variables, built only from blocks Canvas can edit.
npx shadcn add @klarhimmel/template-b2b-services
Install
npx shadcn add @klarhimmel/template-b2b-servicesPages in this template
Each opens its live demo; links between the pages work inside it.
Page 1 of 7
Home (/)
home. 10 sections, each one block with this template's own copy.
| Anchor | Block | Content |
|---|---|---|
#top | header/menu | Nordlund Konsult AB |
#hero | hero/split | Practical expertise for companies that are growing |
#clients | logo-cloud/row | [client proof headline] |
#services | features/grid | Three ways we help |
#numbers | stats/row | The company in numbers |
#cases | case-study/card | What changed for our clients |
#quote | testimonials/quote | [client quote] |
#process | steps/horizontal | From first call to results in four steps |
#cta | cta/banner | Tell us what you are working on |
#footer | footer/link-columns | Nordlund Konsult AB |
Page 2 of 7
Services (/services/)
services. 7 sections, each one block with this template's own copy.
| Anchor | Block | Content |
|---|---|---|
#top | header/menu | Nordlund Konsult AB |
#hero | hero/minimal | Help that fits the size of your company |
#offers | features/alternating | Advice, delivery and support |
#process | steps/horizontal | The same four steps for every engagement |
#faq | faq/accordion | Before you get in touch |
#cta | cta/card | Not sure which service you need? |
#footer | footer/link-columns | Nordlund Konsult AB |
Page 3 of 7
Service (/services/service-name/)
service-detail. 8 sections, each one block with this template's own copy.
| Anchor | Block | Content |
|---|---|---|
#top | header/menu | Nordlund Konsult AB |
#hero | hero/split | Advice and planning |
#included | features/list | A clear plan, not a binder |
#timeline | steps/timeline | What happens, week by week |
#case | case-study/metrics | A month-end routine cut by a third |
#faq | faq/accordion | About this service |
#cta | cta/banner | Start with a conversation |
#footer | footer/link-columns | Nordlund Konsult AB |
Page 4 of 7
Cases (/cases/)
cases. 7 sections, each one block with this template's own copy.
| Anchor | Block | Content |
|---|---|---|
#top | header/menu | Nordlund Konsult AB |
#hero | hero/minimal | What changed for our clients |
#cases | case-study/card | Results, in our clients' words and numbers |
#results | logo-cloud/results | Numbers from other engagements |
#voices | testimonials/grid | In their own words |
#cta | cta/banner | Want results like these? |
#footer | footer/link-columns | Nordlund Konsult AB |
Page 5 of 7
About us (/about/)
about. 8 sections, each one block with this template's own copy.
| Anchor | Block | Content |
|---|---|---|
#top | header/menu | Nordlund Konsult AB |
#hero | hero/minimal | [A line about who you are] |
#story | content/columns | Why we work the way we do |
#numbers | stats/row | Numbers |
#team | team/grid | The people you will meet |
#history | content/timeline | How the company grew |
#cta | cta/card | Want to know if we are a fit? |
#footer | footer/link-columns | Nordlund Konsult AB |
Page 6 of 7
Careers (/careers/)
careers. 7 sections, each one block with this template's own copy.
| Anchor | Block | Content |
|---|---|---|
#top | header/menu | Nordlund Konsult AB |
#hero | hero/minimal | Work with people who answer the phone |
#why | features/grid | What it is like here |
#roles | blog/list | Join us |
#process | faq/accordion | How we hire |
#cta | cta/card | Send an open application |
#footer | footer/link-columns | Nordlund Konsult AB |
Page 7 of 7
Contact (/contact/)
contact. 7 sections, each one block with this template's own copy.
| Anchor | Block | Content |
|---|---|---|
#top | header/menu | Nordlund Konsult AB |
#hero | hero/minimal | Talk to us |
#book | contact/booking | Pick a time and we call you |
#message | contact/form | Send us a message |
#visit | contact/offices | Our office |
#faq | faq/accordion | Before you write |
#footer | footer/link-columns | Nordlund Konsult AB |
Install
CLI
npx shadcn add @klarhimmel/template-b2b-servicespnpm
pnpm dlx shadcn@latest add @klarhimmel/template-b2b-services- 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.