Solace

About This Template

Solace is a warm, editorial template for concierge clinics, private medical practices, and wellness groups. Twelve pages cover the homepage, a services index with detail pages carrying numbered process steps and an assigned physician, a team directory with full doctor profiles, patient stories, a health-insights blog with author lookup and reading time, an FAQ with category tabs, about, contact, and a 404. The hero is the standout: your consultation photo starts full-bleed, then clips inward to inset(40%) and dissolves while a soft sage circle emerges beneath it, scaling from 0.6 to 3 on scrub and pulsing on a four-second breathing keyframe. Four content collections, three color skins, animated trust counters, and 30 photographs ship with it.

Signature

The hero opens on a full-bleed consultation photograph. As you scroll, a scrub 1.5 timeline clips it inward to inset(40%) while the image counter-scales to 1.3 and fades — and in the space it leaves, a soft sage radial-gradient circle emerges, scaling from 0.6 to 3. That circle is simultaneously running a four-second CSS breathing keyframe, so it expands with the scroll while quietly inhaling and exhaling on its own. The headline — which entered word by word — lifts 25% and fades out above it, with the subtext and CTA staggered behind it.

Features

• 12 pages — Home, Services, Service detail, Team, Physician profile, About, Patient Stories, Blog, Post, FAQ, Contact, 404
• The Breath hero — the photo clips to inset(40%) and dissolves while a sage radial circle scales 0.6 → 3 on scrub
• Four-second CSS breathing keyframe on the hero circle, running underneath the scroll-linked GSAP timeline
• Word-by-word headline entrance (0.06s stagger, power4.out) with blur-to-sharp subtext and CTA reveal
• Animated trust counters — 12,000+ patients, 15+ years, 98% satisfaction, 6 board-certified physicians
• Velocity-reactive specialty marquee — eight disciplines whose timeScale accelerates up to 3x with scroll speed
• Services bento grid with blur-to-sharp card stagger and independent image parallax on every tile
• FAQ with 4 category tabs (General, Insurance, Procedures, Recovery) and 11 accordion items using useId-based ARIA
• 4 content collections — 6 services, 6 doctors, 4 blog posts, 8 testimonials, all Zod-validated JSON
• Physician profiles with credentials, education, spoken languages, an accepting-patients flag and a sticky portrait
• Relational content — testimonials filter by doctorSlug, services link to their physician and related services, posts resolve their author
• Service detail pages with numbered process steps, feature lists and cross-links between related treatments
• Contact page with opening hours, accepted-insurance list and a service-selector inquiry form
• 3 color skins via data-skin — Linen & Sage (default), Midnight Calm dark, Sand & Stone warm neutral
• GSAP and ScrollTrigger pulled in via dynamic import inside all 15 animated components, with the Lenis + ScrollTrigger lifecycle centralised in the layout
• 30 photographs included, Lenis smooth scroll, Astro View Transitions and prefers-reduced-motion fallbacks on every animation

Deployment