Velisse — Coaching & Mentorship Next.js Template
A calm, editorial Next.js site for coaches and mentors, with a podcast section, booking calls to action and GSAP motion.
Or get this and every other template for $99 with the All-Access Pass.
About this template
About this template
Velisse is a website template for coaches, mentors and consultants who sell programs, one-to-one sessions and a podcast. The demo brand is a business mentor for women founders, set in cream and wine with large italic serif headings and red-toned editorial photography.
It is built with Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS v4, GSAP and Lenis, with NumberFlow counters. Page copy lives in typed data files, podcast episodes are Markdown, and every route is prerendered to static HTML.
Pages
- Home: twelve sections after a preloader: a full-screen hero slider with thumbnails, an intro with a signature that draws itself, the coach, an "As seen in" logo row, a pinned gallery with rolling headline lines, a marquee, offers, testimonials, the method with counting stats, the latest podcast episodes, an FAQ and a call to action.
- About: the coach's story, the method with counting stats, testimonials and a call to action.
- Services: three numbered offers with their own buttons, a marquee and an FAQ.
- Podcast: the episode list as cards with cover, episode number, duration and summary.
- Podcast episode: a cover, a listen button, show notes written in Markdown and links to the previous and next episodes. The demo ships six episodes.
- Contact: a contact form with a program select, contact details and the FAQ.
- 404: a not found page with a spinning vinyl record.
Built in
- Page transitions: a two-layer wine and oxblood wipe with the logo mark and the name of the next page.
- Scroll motion: GSAP ScrollTrigger reveals for headings, letters and images, plus a pinned gallery section.
- Draggable testimonials: cards you can pick up and throw, with a spinning review badge that speeds up on press.
- Hero slider: slides that change every five seconds, with clickable thumbnails.
- Counters: numbers count up with NumberFlow when they scroll into view.
- Smooth scrolling: Lenis on mouse and trackpad devices, native scrolling on touch screens.
- Reduced motion: visitors who ask for less motion get every section in place without the animations.
- Mobile menu: a full-screen menu with staggered links.
- FAQ accordion: buttons with
aria-expandedfor screen readers.
Easy to edit
Site name, URL, email, footer text and the newsletter block are in src/data/site.ts. Menus are in src/data/menu.ts and social links in src/data/social.ts.
Each page's copy is a typed file in src/data/ (homepage.ts, about-page.ts, services-page.ts and so on). Shared sections such as the FAQ, offers, testimonials and call to action sit in src/data/sections/, so one edit updates every page that uses them. Adding a Markdown file to src/data/podcast/ adds an episode page at build time and puts it in the episode list.
Colours, fonts, easings and shadows are tokens in src/styles/variable.css. The four fonts are local WOFF2 files loaded through next/font in src/utils/font.ts, and photos go through next/image.
Each page has its own title, description, canonical link and Open Graph image from src/utils/generateMetaData.ts. The site also generates a sitemap, robots.txt, llms.txt and JSON-LD structured data for the business, the coach, the services, the podcast, each episode and the FAQ.
Good to know
- Images: the download uses placeholder images at the exact sizes of the demo photos. The demo photos are not included.
- Forms: the contact and newsletter forms work on the front end only. Connect them to a form service or your own backend.
- Output: every route is prerendered at build time.
- Hosting: Vercel, any Node host, or Cloudflare Workers through OpenNext (a
wrangler.jsoncand abun run deployscript are included). - Requirements: Node.js 20.9 or newer. npm and Bun both work.
Full documentation is included in the download.