Home Care Website Template

About this home care website template

The 21 pages you get

Home /

A wide photo of a carer’s hand on an older person’s wrist, then the headline, booking and fees buttons, a tap-to-call phone card and "Care for: Mum / Dad / Myself / Someone else" chips that set the questionnaire. Then promises, the five types of care with from-prices, the founder’s story on a photo, how care starts, the care-needs questionnaire, the home / live-in / care home comparison, family letters, guides and the FAQ.

Our care /care/

All five types of care side by side, each with a photo, what it includes, the from-price and the price note.

Care pages /care/…/

Companionship, personal care, dementia care, overnight care and live-in care. Each has its price, a typical week, what it includes, who it suits, a family quote, and buttons that pre-select the care on the form or open the planner pre-set.

Plan your care /care-plan/

The questionnaire and weekly timetable on their own page, opened pre-set from any care page, with a note on what happens after the plan is sent.

Fees /fees/

Every price in one table: hourly visits on weekdays and weekends, 30-minute visits, sleeping and waking nights, and live-in care for one person or a couple. Includes three example weeks priced out, the comparison with a care home and how funding works.

About us /about/

The founder’s story, four promises, the office team, a regulator line for your own details, and a "work with us" section with carer pay and benefits.

Guides /journal/

A featured guide, then every guide in a list with For families / For carers buttons. Add a Markdown file and it appears here and in the sitemap.

Guides /journal/…/

Five written guides: signs a parent needs help at home, paying for home care, the first week of care, a new carer’s first visits, and looking after yourself as a family carer.

FAQ /faq/

Twelve questions in large type, always open, grouped Starting care, Costs and funding, and Our carers, with jump links.

Contact /contact/

A free home visit or callback request with topic, who the care is for, type of care, best time to ring and a message box. The planner and care pages fill these in.

Privacy and terms /legal/…/

A starter privacy notice and terms of care on a shared layout.

404 /404

Designed, with the phone number and a way back to home, care and fees.

What is in the build

• A care-needs questionnaire: who the care is for, what help is needed (washing and dressing, medication prompts, memory or dementia, meals, company, nights), how often and who else is at home. It gives a suggested type of care, visits and hours a week, sleeping nights and short notes explaining the plan
• A weekly timetable drawn in HTML, Monday to Sunday, morning to night. A tap changes a visit’s length or adds one, the totals update, and "Talk this through with us" sends the week as text to the contact form
• Every question, visit length and rule in src/data/care-needs.ts and the maths in a tested file, so an agency can tune the suggestions without touching the page
• Hero chips for Mum, Dad, Myself or Someone else that set the first answer in place, and care-page buttons that open the planner pre-set
• A fees table and a home visits / live-in / care home comparison that stack row by row on phones instead of scrolling sideways
• Written for older readers: 18px text, high-contrast colours checked in tests, large buttons and an FAQ that never hides answers behind a click
• Care types and guides as content collections, and every agency fact, area covered and regulator placeholder in one file
• Real photography with no faces and no brand marks; one accent colour and two fonts rebrand the whole site; Vitest and Playwright suites included

The design decision

Every template in this catalog is loud in exactly one channel and deliberately quiet in the other three. That single rule is what stops 71 different worlds reading as one design system in different paint.

The world

Warm cream pages with pale lilac-grey blocks, Merriweather headings over Cabin text at 18px, faceless photography of hands, tea and quiet rooms, and one deep heather accent.

The mechanic

A care-needs questionnaire turns who, what help, how often and living arrangements into a suggested type of care, visits and hours a week, and a Monday-to-Sunday timetable where a tap changes any visit; the plan then pre-fills the contact form, and a families / carers filter sorts the guides. Motion is one quiet reveal.

Loud channel

Imagery

Imagery. carers' hands, cups of tea, knitting, pill organiser, a walk in the park, bedside lamp, armchairs, a cat on a chair

Type & palette

Merriweather · Cabin

#fbf7f0 #221c29 #6b4c9a

Who it is for

Built for home care agencies, domiciliary care providers and live-in care companies that visit older people at home, from companionship and personal care to dementia, overnight and live-in care. It suits an agency that wants families to understand the options and prices before they ring, and it works for any area, currency or price list by editing the data files.

Under the hood

• Astro 7 · static output, zero client framework
• Tailwind 4 · one @theme block holds the palette
• MDX content collections for the blog
• GSAP + Lenis for the scroll work, reduced-motion aware
• Self-hosted woff2 — no Google Fonts request
• Sitemap, canonicals and per-route meta wired
• Vitest + Playwright suites in the repository
• Zero third-party requests · strict CSP-ready

How to get started

1. 01 Accept the repository invite and clone it.
2. 02 Run npm install, then npm run dev.
3. 03 Replace the content in src/data/ with your own — that is where the brand, the copy and every list live.
4. 04 Swap the images in public/images/ and the palette in the @theme block.
5. 05 Run npm run build and deploy dist/ anywhere static.

Questions