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 Astro 7, Tailwind CSS 4 and GSAP, with Lenis smooth scrolling and NumberFlow counters. All page copy lives in Markdown, and the output is plain static HTML.
Pages
- Home: twelve sections. 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 with numbers, durations and dates.
- Podcast episode: a cover, listen button and show notes written in Markdown. The demo ships six episodes.
- Contact: a contact form 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 between pages.
- 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: autoplaying slides 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 the content without the animations.
- Mobile menu: a full-screen menu with staggered links.
- FAQ accordion: accessible buttons with
aria-expanded.
Easy to edit
Site name, URL, email, footer text and the newsletter block are in src/config/config.json. Menus are in menu.json and social links in social.json.
Every page's copy is a Markdown file in src/content/. Shared sections such as the FAQ, offers, testimonials and call to action sit in src/content/sections/, so one edit updates every page that uses them. Adding a new Markdown file to src/content/podcast/ adds an episode page and puts it in the episode list.
Colours, fonts, easings and shadows are tokens in src/styles/variables.css. Images go through astro:assets and are resized to WebP at build time.
Each page has its own title, description, canonical link and Open Graph image. The site also generates a sitemap, robots.txt, llms.txt and JSON-LD structured data for the business, the coach, 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: a static site that runs on any static host. A Cloudflare Workers config is included.
- Requirements: Node 22.23.4 or newer, and Bun (npm works too).
Full documentation is included in the download.