Hylivo — Wellness Coach Next.js Template
A calm Next.js template for wellness coaches and therapists, with a scroll story, soft motion and every page in Markdown and data files.
Or get this and every other template for $99 with the All-Access Pass.
About this template
About this template
Hylivo is a calm, story-led Next.js template for wellness, life and burnout coaches, therapists and counsellors. Warm cream pages, portrait photography and an editorial serif make it feel personal. Every word on the site lives in typed data files and Markdown, so you change the copy without touching a component.
It is built with Next.js 16 (App Router, every route prerendered), React 19, TypeScript, Tailwind CSS v4, GSAP and Lenis.
Pages
- Home: a hero with rotating words and an optional video, a letter from the coach, a scroll story where a drawn thread links the photos, results with animated counters, a services dial, "why now" signs, a four-step process, testimonials, pricing, FAQ and a contact section
- About: the coach's story, approach and numbers
- Services: all services in one view
- Service pages: one detail page per Markdown file (four included), with length, sessions and who it's for
- Programs: two pricing plans with what's included
- FAQ: an accordion of common questions
- Contact: contact details and an enquiry form
- Privacy Policy and Terms of Service, written in Markdown
- 404
Built in
- Intro loader: the logo mark settles in once per visit, then flies into the header.
- Page transitions: a plum curtain with the logo between pages.
- Scroll story: GSAP ScrollTrigger draws a thread from photo to photo.
- Services dial: numbered services turn on a dial as you scroll.
- Counters and rotating words: NumberFlow results and a changing hero line.
- Smooth scrolling with Lenis, and a soft custom cursor on mouse devices.
- Navbar with a Services dropdown built from your services, plus a full-screen phone menu.
- Reduced motion: the site respects the visitor's reduced-motion setting and shows every section in place.
Easy to edit
- Site name, contact details, navigation, footer and social links live in
src/data/site.ts,src/data/menu.tsandsrc/data/social.ts. Each page's text has its own file insrc/data/. - Adding one Markdown file to
src/data/services/creates a new service page and adds it to the services list, the home dial and the menu. - Colours, fonts and the type scale are tokens in one file,
src/styles/variable.css. Fonts (Instrument Serif, Manrope and Geist) load throughnext/fontand are served from your own site. - Server components by default; client code only where something moves or responds.
- SEO is set up: per-page titles and descriptions, canonical URLs, Open Graph tags, and images through
next/image.
Good to know
- Images: the photos and hero video in the download are placeholders at the exact size the design uses, labelled with their size. Swap in your own.
- Forms: the contact form and newsletter field are front-end only. Point them at your form service.
- Hosting: every route is prerendered. Deploy to Vercel with no settings, any Node host (
bun run build && bun run start), or Cloudflare Workers with the included OpenNext setup. - Requirements: Node.js 20.9 or newer. Bun and npm both work.
The included documentation walks through setup, content, colours, images and deploying.