Solace

Overview#

Solace is a multi-page website template for a therapy and counseling practice. The demo is Budd Bay Counseling, a fictional group practice at 412 Legion Way SE in Olympia, Washington, with six clinicians (a psychologist, an LICSW, an LMFT, two LMHCs and a supervised associate) who see adults, couples, teens, children and families in person and by video. This version is built with Next.js 16 (App Router), React 19, TypeScript and Tailwind CSS v4, and is exported as a fully static site. This is version 1.0.0 (see template.json and CHANGELOG.md). Template page and live demo: freeframe.dev/templates/solace.

The demo never goes stale: office hours, holidays, the next free consultation, reply-by dates and group start dates are all worked out in the browser from today's date in Pacific time, from rules rather than fixed dates.

Mental health copy needs care. The template keeps to general information, makes no promises about outcomes, shows no client testimonials or reviews, asks people not to put health details in forms, and points to the real crisis routes (call or text 988, call 911) on every page. Keep it that way when you edit, and have your own clinicians review the wording.

Quick start#

Requires Node.js 24 and pnpm (npm works too).

pnpm install
pnpm dev        # http://localhost:3000

Open http://localhost:3000. Edits to pages, components and src/app/globals.css reload as you save. pnpm build writes the static site to out/.

Pages#

Project structure#

solace/
  src/
    app/
      layout.tsx            crisis bar, header, footer, toast, reveals and back to top around every page
      fonts.ts              Gilda Display and Rosario via next/font/local
      globals.css           Tailwind CSS v4: @theme tokens and components (buttons, cards, choices...)
      icon.svg              favicon (arch, sun and tide-line logo mark)
      page.tsx              home; one folder per route (approach, services, team, clinician, fees, match, faq, contact)
      not-found.tsx         404 page
    components/
      CrisisBar.tsx         "In crisis right now?" bar and the #crisis-panel disclosure
      SiteHeader.tsx        logo, main menu, mobile menu
      SiteFooter.tsx        footer with crisis routes, office hours, address and links
      live.tsx              clock-dependent pieces: hours, open-now pill, holiday note, reply-by, year, home cards
      people.tsx            clinician lists built from the data (home teaser, service chips, approach lists)
      ApproachTabs.tsx      tabs on /approach
      GroupsSection.tsx     groups with start dates and the interest-list form on /services
      TeamDirectory.tsx     filters, cards, Save buttons and shortlist bar on /team
      ClinicianProfile.tsx  the profile on /clinician
      FeesTools.tsx         sliding-scale calculator and insurance checker on /fees
      MatchQuiz.tsx         the quiz on /match
      IntakeForm.tsx        the consultation request on /contact
      FaqController.tsx     FAQ search, "Open all answers" and #topic links
      choices.tsx           radio/checkbox cards and the step progress list
      icons.tsx             line icons used by the components
      RevealController.tsx, BackToTop.tsx, Toast.tsx
    data/site.ts            practice data: hours, holidays, clinicians, fees, sliding scale, plans, groups, quiz
    lib/
      calendar.ts           Pacific dates, holidays, office hours, reply-by dates, ?now= preview
      practice.ts           next consultation, group dates, sliding scale, matchClinicians()
      client.ts             browser hooks: clock, URL, saved data, shortlist, toast
      safe-storage.ts       localStorage with an in-memory fallback
      asset.ts, metadata.ts base-path helper for files in public/, per-page metadata
    fonts/                  Gilda Display and Rosario woff2 files and their OFL licenses
  public/img/               SVG artwork, portraits, map and og-image.png
  next.config.ts            static export settings
  template.json, README.md, DOCS.md, CHANGELOG.md

Customizing#

Brand and colors#

The design tokens are in the @theme block at the top of src/app/globals.css. Every color becomes a Tailwind utility (bg-clay-600, text-fir-800, border-line...).

To change the brand color, replace the clay scale:

@theme {
  --color-clay-600: #7b4a8c; /* buttons */
  --color-clay-700: #643b72; /* links, eyebrows */
}

Keep white text on clay-600 and fir-800 at 4.5:1 contrast or more. A few colors are also written inside the SVG files and the logo mark (in SiteHeader.tsx, SiteFooter.tsx and src/app/icon.svg); change those by hand if you rebrand. The browser theme color is viewport.themeColor in src/app/layout.tsx.

Typography#

Headings use Gilda Display (an editorial serif, regular weight only) and body text uses Rosario (a humanist sans, weights 400–700 plus italic). Both are self-hosted from src/fonts/ with next/font/local in src/app/fonts.ts, using the same Latin files Google Fonts serves the HTML version, so text wraps the same way. Each face is registered under its real family name, and globals.css uses those names:

--font-display: "Gilda Display", ui-serif, Georgia, "Times New Roman", serif;
--font-sans: "Rosario", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

To swap a font, put its woff2 file in src/fonts/, point src in fonts.ts at it, change the font-family declaration and fallback there, and update the token in globals.css. Keep adjustFontFallback: false so no Arial-based fallback face takes over on macOS or Windows.

Content#

Page copy is written in each page file (src/app/<route>/page.tsx). Everything the pages calculate from lives in src/data/site.ts:

The weekly hours lists are written out in HOURS_ROWS in src/components/live.tsx; keep them in step with HOURS.

Adding a clinician

Add an entry to CLINICIANS and a 320 x 400 portrait to public/img/. The key is used in URLs (/clinician?id=underhill), so use lowercase letters only.

underhill: {
  name: "Sorrel Underhill", first: "Sorrel", short: "Sorrel", credential: "LMHC",
  role: "Licensed mental health counselor", pronouns: "they/them", tier: "licensed",
  clients: ["adults"], concerns: ["anxiety", "grief"], modalities: ["act", "cbt"],
  formats: ["inperson", "video"], days: { 1: ["09:00", "17:00"], 4: ["12:00", "20:00"] },
  accepting: "yes", insurance: ["soundshore"], sliding: false,
  languages: ["English"], since: 2020,
  focus: "One line for cards", summary: "Two sentences for the directory.",
  bio: ["Paragraph one.", "Paragraph two."], words: "A sentence in their own words.",
  training: ["MA, Counseling", "LMHC, Washington State"], art: "portrait-underhill.svg",
},

• tier picks the column of FEES.tiers (psychologist, licensed or associate).
• days are session hours. A shift that starts before DAYTIME_UNTIL ("15:00") counts as daytime, one that ends after EVENING_FROM ("17:00") counts as evenings, and day 6 counts as Saturdays.
• accepting is "yes" or "waitlist"; a waitlisted clinician needs wait: "about 6 weeks".
• insurance lists keys of PLANS; sliding: true means they hold sliding-scale spots.

The directory, profile, quiz, contact form, approach tabs and service lists all pick the new clinician up (TypeScript checks the fields). Also mention them in the home and team page copy where the number of clinicians appears ("Six therapists").

Fees and the sliding scale

FEES.tiers holds the fee per row id (consult, intake, individual, couples, extended). The table on /fees is built from it. The figures repeated in copy ($110, $165, $190 on the home page; $55 groups; $75 late cancellation) are written in the page files.

The sliding scale works out income as a share of the federal poverty guideline (slidingFee() in src/lib/practice.ts): guideline = base + perPerson × (household − 1), then the first band whose upTo percentage is not exceeded sets the fee. Update base and perPerson with each year's guidelines.

Insurance plans

PLANS entries have a type: "in" (in network with the clinicians who list the plan), "eap" (an employee assistance program with sessions free sessions) or "oon" (out of network: superbill). The plan names are fictional placeholders; use the plans your practice really works with. The out-of-network estimate is OON.allowed × share: with the defaults, 60% of $140 is about $84 back, so a $165 session costs about $81.

Groups

Each group in GROUPS starts on the nth weekday (0 = Sunday) of each month in months. The date shown is the first one at least GROUP_RULES.minLeadDays (7) days from today that isn't a holiday (observed, or the calendar date of a fixed-date holiday), so the list never shows a past date. weeks: 0 marks a one-day workshop. Opened on Nov 1, 2026 the demo shows Slack Tide from Thursday, Dec 10; Little Hours from Saturday, Jan 2, 2027; Steady Ground from Tuesday, Jan 5, 2027; Tide Pool from Wednesday, Jan 6, 2027; and Two Oars on Saturday, Mar 20, 2027.

To use fixed dates on a real site, replace the rule with your own logic in nextGroupStart() in src/lib/practice.ts, or simply edit months each term.

Images and artwork#

All artwork is SVG drawn for this template, in public/img/: the hero landscape, five service illustrations, page art, the map and six portraits. Each is a plain <img> (with the base path added by asset() from src/lib/asset.ts), so you can replace any of them with a photo of the same aspect ratio:

The social image is public/img/og-image.png (1200 x 630), generated from og-image.svg. Edit the SVG, then export it to PNG with any tool (or open it in a browser and take a 1200 x 630 screenshot). The favicon is src/app/icon.svg.

Navigation, header and footer#

The crisis bar (CrisisBar.tsx), header (SiteHeader.tsx) and footer (SiteFooter.tsx) wrap every page in src/app/layout.tsx. To add a page, create src/app/<route>/page.tsx with its own metadata (through pageMetadata()), then add it to the NAV list in SiteHeader.tsx; the desktop and mobile menus are built from it and mark the current page with aria-current="page".

Features#

Crisis panel#

Every page starts with a bar: "In crisis right now? Call or text 988, any time. In an emergency, call 911." The "More ways to get help now" button (data-crisis-toggle) opens a panel (#crisis-panel) with call buttons and the note that the practice can't respond to emergencies by form or email. It is a disclosure button with aria-expanded; Esc closes it while focus is inside. The home page, footer, match page and contact form repeat the same routes. Don't remove them, and check the numbers if you adapt the template for another country.

Office hours, open now and holidays#

src/components/live.tsx highlights today's row in every hours list (Hours), shows the open-now pills (OpenStatus), the next holiday within 14 days (HolidayNote) and the reply-by line (ReplyBy). The clock behind them (useNow() in src/lib/client.ts) refreshes every minute.

Holidays are the 11 US federal holidays, worked out for any year from the rules in HOLIDAYS (src/lib/calendar.ts). Fixed-date holidays move to the Friday before when they fall on a Saturday, and to the Monday after on a Sunday, so New Year's Day 2028 (a Saturday) is observed on Friday, Dec 31, 2027. Add one-off closures to EXTRA_CLOSED.

All dates use PRACTICE.timeZone (America/Los_Angeles), whatever the visitor's own time zone. For review, add ?now=2027-01-04T10:00 to any page URL to see it at that Pacific wall-clock time.

Anything that depends on the clock, the URL or saved data is rendered in the browser after the page loads (useSyncExternalStore hooks in src/lib/client.ts), so the static HTML shows the written text and never a date frozen at build time.

Next free consultation and reply-by dates#

nextConsult(id, now) in src/lib/practice.ts returns the first day at least consultLeadDays (2) days ahead when an accepting clinician works and it isn't a holiday; waitlisted clinicians show their wait instead. The home hero shows the earliest across the team (on Sunday, Nov 1, 2026: "Tue, Nov 3 with Eamon"). Reply-by dates are the next business day (Monday to Friday, not a holiday) after today.

Clinician directory and shortlist#

/team (TeamDirectory.tsx) filters the cards by concern, client group, in-network plan, format, "accepting new clients" and "sliding-scale spots". Filters are written to the URL (/team?concern=trauma&format=video&accepting=1), so filtered views can be shared; values are checked against the data before use. Example: concern trauma and format video shows Eamon only; plan Cascadia Mutual with accepting shows Eamon and Nadira.

The "Save" buttons (data-save-id) are toggle buttons with aria-pressed that add a clinician to the shortlist bar, which links to the consultation form with the first saved clinician. The profile page has the same button. The shortlist is shared through useShortlist() in src/lib/client.ts.

Clinician profiles#

/clinician?id=<key> renders one clinician from CLINICIANS (ClinicianProfile.tsx): name, role, pronouns, status, formats, bio, "in their own words", a Monday to Saturday hours grid, the next free consultation, an "at a glance" list and three related clinicians (most shared concerns and client groups). Without id it shows the first clinician; an unknown id shows a "We couldn't find that clinician" message. The tab title is set from the clinician in the browser.

Approach tabs#

/approach uses the ARIA tabs pattern (ApproachTabs.tsx: role="tablist", arrow keys, Home and End). The URL hash selects a tab (/approach#emdr), and profile pages link there. "Who offers it here" lists clinicians whose modalities include the tab's key. On phones the tabs are a scrolling row; the selected tab is scrolled into view inside the row without moving the page.

Match quiz#

/match (MatchQuiz.tsx) asks five questions: who it's for, up to three concerns (MATCH.maxConcerns), format, times and payment. matchClinicians(answers) in src/lib/practice.ts:

1. Keeps clinicians who see the chosen client group (WHO[who].client).
2. Drops those who don't offer the chosen format, unless that leaves nobody (then it says so).
3. Scores 3 points per matching concern, 1 per matching time, 2 for payment (in-network plan, sliding-scale spots or the EAP) and 2 for accepting new clients (MATCH.points).
4. Shows the top three, ties in data order, each with its reasons and a link to /contact?clinician=<key>&from=match.

Sliding scale and insurance checker#

On /fees (FeesTools.tsx), the calculator updates as you type and highlights the matching band; /fees?household=3&income=45000 prefills it. The plan checker (?plan= is kept in the URL) shows in-network clinicians, EAP details or the out-of-network explanation with a refund estimate by share (50–80%).

FAQ#

/faq uses <details> elements, so answers open with the keyboard and without JavaScript. The search box (FaqController.tsx) filters questions and answers as you type (/faq?q=insurance prefills it) and announces the count. "Open all answers" toggles every item, and linking to a topic (/faq#money) opens its first answer. To add a question, copy a <details className="faq" data-faq-item=""> block in src/app/faq/page.tsx.

Reveals, back to top and toast#

Sections fade in once as they scroll into view (RevealController.tsx, off with reduced motion; each element's delay is its --d style). A back-to-top button (BackToTop.tsx) appears after scrolling and moves focus to the main content; toast() (Toast.tsx) announces shortlist changes through a polite live region. The mobile menu button has aria-expanded and aria-controls, and Esc, a click outside or a link closes it.

Forms#

There are two forms, and neither sends anything until you connect it:

The consultation form reads ?clinician=, ?who=, ?format=, ?pay= and ?plan= from the URL and, with ?from=match, the saved quiz answers. Choose a clinician and it says whether they are accepting, their next free consultation, and whether they work in the chosen format or with the chosen client group.

To connect a form service such as Formspree, post the form data in the submit handler and show the success panel only when the service answers OK. In IntakeForm.tsx, find the comment "Connect your form service here" in onSubmit:

const res = await fetch("https://formspree.io/f/your-id", {
  method: "POST",
  body: new FormData(ev.currentTarget),
  headers: { Accept: "application/json" },
});
if (!res.ok) return toast("Sorry, that didn’t send. Please call us on (360) 555-0142.");
// ...then the existing setSuccess(...) code

Make onSubmit async and import toast from @/lib/client. Do the same in the group form's onSubmit. Every field has a name, so FormData picks them all up. If you drop the static export (see below), you can post to a Route Handler (src/app/api/request/route.ts with a POST function) or a Server Action instead. Choose a form service that offers a signed business associate agreement (BAA) if you might receive health information, and keep the form copy asking people not to include health details.

Saved data (localStorage)#

Names, email addresses, phone numbers and the free-text note are never stored. All access goes through safeStorage() in src/lib/safe-storage.ts: when localStorage is blocked (sandboxed iframes, strict privacy settings), it falls back to memory, so the shortlist, quiz and form keep working for the page view. To reset everything, clear the site's data in the browser or run localStorage.clear() in the console.

SEO and sharing#

Each page exports metadata built with pageMetadata(title, description) from src/lib/metadata.ts, which sets the title, description, Open Graph and Twitter tags (a page that sets openGraph would otherwise lose the layout's image). Social sites need an absolute image URL: set NEXT_PUBLIC_SITE_URL to your domain when you build (NEXT_PUBLIC_SITE_URL=https://yourpractice.example pnpm build); metadataBase in src/app/layout.tsx uses it. Add src/app/sitemap.ts and src/app/robots.ts if you want them generated. The 404 page sets robots: { index: false }. If you add structured data, the MedicalBusiness or Psychologist schema.org types fit.

Accessibility#

• Skip link, landmarks, one h1 per page and a logical heading order.
• Visible focus outlines; WCAG AA color contrast for text.
• Keyboard-accessible menu, crisis disclosure, tabs, <details> accordions, filters and toggle buttons with aria-pressed.
• Radio and checkbox cards are real inputs inside labels, grouped in <fieldset> with <legend>.
• Inline errors are tied to their fields with aria-describedby and aria-invalid; focus moves to the first problem. Step changes move focus to the new step's heading.
• Results and counts are announced with role="status".
• prefers-reduced-motion turns off reveals, the floating cards and smooth scrolling.

When editing, keep one h1, label every new input, and keep the crisis routes visible.

Building and deploying#

pnpm build writes a static site to out/ (output: "export" in next.config.ts). Upload that folder to any static host (Netlify, Cloudflare Pages, GitHub Pages or your own server), or deploy the project to Vercel, which runs the build for you. Use HTTPS, and connect the forms before you go live.

To serve the site from a sub-folder, set DEMO_BASE_PATH when building (DEMO_BASE_PATH=/solace pnpm build); next.config.ts passes it to basePath, and asset() adds it to image paths. Leave it unset for a site at the root of its domain.

If you need server features (Route Handlers for the forms, Server Actions), remove output: "export" and images: { unoptimized: true } from next.config.ts and deploy to a host that runs Next.js.

Troubleshooting#

• Times or "open now" look wrong. Everything uses PRACTICE.timeZone. If your practice isn't in Pacific time, change it and update the "Pacific time" wording in the pages.
• Dates show the written text for a moment. That's by design: the static HTML can't know today's date, so clock-dependent parts fill in right after the page loads.
• A new Tailwind class has no effect. Write class names as whole strings (not built from pieces like `bg-clay-${n}`), so Tailwind can find them.
• A new clinician doesn't appear in the quiz. Check that their clients include the answer's client group (WHO), and that their formats include the chosen format.
• The group date is not what you expected. It's the first date at least 7 days ahead in a listed month that isn't a holiday; preview other dates with ?now=YYYY-MM-DDTHH:MM.
• The shortlist or quiz answers don't survive a reload. The browser is blocking storage (private mode, a sandboxed preview); they still work for the page view.
• Images are missing when the site is in a sub-folder. Build with DEMO_BASE_PATH set to that folder, and use asset() for any new image path.
• The social image doesn't show when shared. Build with NEXT_PUBLIC_SITE_URL set to your domain.

License#

Freeframe Commercial License: use it in unlimited websites and apps for yourself and your clients; it may not be resold or redistributed as a template. The full terms, with your licensee details, are in LICENSE.txt and at https://freeframe.dev/license#commercial. Third-party components keep their own licenses. The fonts (Gilda Display and Rosario) are from Google Fonts under the SIL Open Font License. Budd Bay Counseling, its clinicians, insurance plans, groups and address are fictional placeholders.