Auvexa — Sports Physiotherapy Next.js Template
A calm, animated Next.js website for a sports physio or rehab clinic, with treatment pages, pricing tabs and a booking form.
Or get this and every other template for $99 with the All-Access Pass.
About this template
About this template
Auvexa is a website template for a sports physiotherapy or rehab clinic. It is set in cream and deep forest green, with Urbanist headings, an upright Italiana serif on accent words, a hero video and athletic treatment photography.
It is built with Next.js 16 (App Router), React 19, Tailwind CSS v4, GSAP and Lenis, written in TypeScript. The copy lives in typed data files and Markdown, so you change the text without opening a component.
Pages
- Home: hero video, a statement section, a WebGL image slider with a wave effect, the manifesto, patient results, a pinned "approach" section where six steps move around an orbit, a video CTA reveal, treatments, the team, pricing tabs and an FAQ
- About: hero, the clinic story, a four-step approach, the team, a photo gallery and a call to action
- Treatments: a treatment list you can filter by area, plus the clinic's programs
- Treatment page: one prerendered page per Markdown file (six samples), with an overview, recovery phases, patient results and a treatment FAQ
- Pricing: pricing tabs, every plan, a comparison table and the FAQ
- Contact: booking form, contact details and a map panel
- Privacy policy: written in Markdown
- 404
Built in
- Booking form: required-field checks and incomplete, sending, sent and error states. It posts to the form endpoint you set in
src/data/site.ts. - Pricing tabs: a sliding tab pill, with prices that count to their new value through NumberFlow.
- FAQ grouped in tabs, with accordions that have their own open and close easing.
- Page transitions between every page.
- Motion: GSAP headings that reveal on scroll, a thread line that draws across sections and bends toward the cursor, the pinned orbit section, team panels that open on hover, and hero and CTA videos. Lenis handles smooth scrolling.
- Reduced motion: with the visitor's reduced-motion setting on, the animation scripts don't run and content shows in its final state.
Easy to edit
- Page copy lives in
src/data/as typed TypeScript files, one per page plus shared sections. - Treatments are Markdown files in
src/data/treatments/. Adding a file there creates its treatment page and adds it to the list and the sitemap. - Site name, contact details, the form endpoint, menus and social links are in
src/data/site.ts,menu.tsandsocial.ts. - Colours and fonts are tokens in
src/styles/variable.css. The three font families are self-hosted frompublic/fonts. - Every page sets its own title, description, canonical URL, Open Graph image and JSON-LD through
src/utils/generateMetaData.ts. A sitemap, robots.txt and llms.txt are built from one site URL.
Good to know
- Images: the photos in the download are grey placeholders at the exact size the design uses, labelled with that size. Swap in your own. The two background videos are replaced with plain clips of the same size.
- Forms: the booking form needs a form service URL (Formspree, Basin or your own endpoint) in
src/data/site.tsbefore it sends anything. The footer newsletter field is front-end only. - Output: every route is prerendered at build time.
- Hosting: deploys to Cloudflare Workers through OpenNext with
bun run deploy, and also runs on Vercel or any Node host. - Requirements: Node.js 20.9 or newer. npm and Bun both work.
The download includes documentation that covers setup, content, images, tokens and deploying.