Therapist Website Template
Demo brand: Havenoak Therapy · Counselling & psychotherapy · 27 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this therapist website template
A complete website for a counselling or psychotherapy practice: seven support-area pages, four therapist profiles, fees with a sliding scale, a first-session guide, a journal, an FAQ and a booking form. A five-question matching tool suggests which therapist to call first. Twenty-seven built pages, all driven by content files.
It feels calm, not clinical. Pale clay pages with white cards, Alegreya headings over Alegreya Sans text, and one olive accent. The photos are all therapy rooms with armchairs, hands, cups of tea and walks by the sea. No faces anywhere: therapists are shown by initials, which protects clients and keeps swapping photos simple.
Every section answers something a nervous first-time client wants to know: what you help with, who they would see, what a session costs, what happens in the first hour and how soon they can start. Crisis-line and professional-body details are clearly marked placeholders for the owner to fill in. Motion is one quiet reveal.
The 27 pages you get
- Home
/ - A hero with a "What brings you here?" chooser, promises, support areas, the practice story, getting-started steps, the matching questionnaire, a session-format table, fees with questions inside each card, therapists, client words, journal and FAQ.
- What we help with
/support/ - All seven support areas with a photo, the starting fee and the usual number of sessions.
- Support pages
/support/…/ - Seven pages (anxiety, low mood, grief, relationships, work stress, trauma, anger), each with signs, approaches, matching therapists, questions and a pre-filled booking link.
- Therapists
/therapists/ - Four profile cards with approach, formats and fees, plus a short guide to choosing.
- Therapist profiles
/therapists/…/ - Four profiles with bio, areas, training, availability, fees, next free call and a booking button that pre-selects the therapist.
- Fees
/fees/ - Individual, couples and sliding-scale session cards, an income-band table, the format comparison and six payment policies.
- First session
/first-session/ - What happens from the free call to the first hour, the room, and common worries answered.
- Journal
/journal/ - A lead article and cards with pull quotes. Add a Markdown file and it appears here.
- Articles
/journal/…/ - Four written pieces on anxious mornings, first-session nerves, when to start therapy and walk-and-talk sessions.
- About
/about/ - The practice story, values, the rooms and a column of client words shared with consent.
- Questions
/faq/ - Therapy, session-type and practical questions in grouped accordions.
- Contact
/contact/ - A free-call request form that pre-fills therapist, topic, format, time and fee from any booking link, plus hours and a not-for-emergencies note.
- Privacy and terms
/legal/…/ - Two starter pages covering health data, cancellations and confidentiality.
- 404
/404 - Designed, with a way back home or to book a call.
What is in the build
- A therapist-matching questionnaire: five skippable questions, one or two suggested therapists with fee and next free call, and nothing stored
- Support areas and therapist profiles as Markdown files; adding a therapist adds them to the matching automatically
- Every booking button pre-fills the contact form (therapist, topic, couple or individual, format, time, sliding scale)
- Fee cards with their own questions inside, a sliding-scale income table and an in-person / online / walk-and-talk comparison that stacks cleanly on phones
- A crisis-support block and professional-membership line with clear placeholders, never invented numbers
- Seventeen calm, face-free Pexels photos, optimised to WebP by Astro
- All practice details in one file, one accent colour that rebrands the whole site, and 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 65 different worlds reading as one design system in different paint.
- The world
- Pale clay ground with white cards, Alegreya headings over Alegreya Sans text, calm face-free photos of therapy rooms, hands and sea walks, and one olive accent.
- The mechanic
- A five-question matching tool suggests which therapist to call first, and every booking button pre-fills the free-call form with therapist, topic, format, time and fee. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. Therapy rooms, hands, tea, sea walks
- Type & palette
- Alegreya · Alegreya Sans
-
#f7ede6#2b2521#5d6b2f
Who it is for
Built for counsellors, psychotherapists and small group practices, from a solo therapist to a team of five, working in person, online or outdoors. It also fits coaches, psychologists or couples therapists who want a gentle, trustworthy site with clear fees and an easy first step.
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
- 01 Accept the repository invite and clone it.
- 02 Run
npm install, thennpm run dev. - 03 Replace the content in
src/data/with your own — that is where the brand, the copy and every list live. - 04 Swap the images in
public/images/and the palette in the@themeblock. - 05 Run
npm run buildand deploydist/anywhere static.
Questions
How does the matching questionnaire decide?
It reads each therapist file: the areas they work with, whether they see couples, their formats, their times and whether they hold sliding-scale places. Change a file and the suggestions change with it. It all runs in the browser and sends nothing.
I work alone. Does it still fit?
Yes. Delete the other therapist files and the profiles, cards and matching follow. You can also remove the questionnaire and keep the hero chooser.
Where do booking requests go?
The form posts nowhere by default. Point it at a form backend suitable for health information; the README shows how and which CSP line to change.
Are the helpline numbers real?
No, on purpose. The crisis block and professional body are bracketed placeholders so you fill in the correct services for your country before launch.
What exactly do I get for $49?
Access to a private GitHub repository holding the complete Astro source of this template — every route you see in the preview, the content model, the images and the tests. Updates arrive in that same repository.
How many sites can I build with one licence?
As many as you like, for yourself or for clients. The licence is per buyer, not per project. The one thing you may not do is resell or redistribute the source as a template, theme or starter kit.
Do I need to know Astro?
It helps, but the common case is editing content and colour. Content lives in typed objects under src/data, colour lives in one @theme block, and npm run dev shows the result. Deploying is a static folder — Cloudflare Pages, Netlify and Vercel all take it as-is.
Is anything loaded from a third party?
No. Fonts are self-hosted woff2, there is no analytics, no tag manager, no CDN script and no external CSS. The build ships static HTML under a strict Content-Security-Policy.
More health & fitness templates
IRONCLAD
Boxing & strength gym
Loud
Display type
Hale
Hot yoga studio
Loud
Imagery
Terra & Still
Wellness coaching
Loud
Palette
Northlight Dental Co.
Dental practice
Loud
Imagery
APLOMB
Chiropractic & spine clinic
Loud
Imagery