Auvexa — Sports Physiotherapy Astro Template
A calm, animated website for a sports physio or rehab clinic, with treatments, pricing and online booking.
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 Astro 7, Tailwind CSS 4, GSAP and Lenis, written in TypeScript. All of its copy lives in Markdown content collections with a schema for each one, so you change the text without touching components.
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, a photo gallery, the team and a call to action
- Treatments: list of treatments and the clinic's programs
- Treatment page: one static page per treatment from a single folder (six samples), with an overview, four 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 placeholder panel
- Privacy policy: written in Markdown
- 404
Built in
- Booking form: required-field checks and incomplete, sending, sent and error states. It posts to any form endpoint you set in one config line.
- Pricing tabs: a sliding tab pill, with prices that count to their new value through NumberFlow.
- FAQ accordions with 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, hero and CTA videos that play only while on screen, and pill buttons with a fill on hover. 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/content/as Markdown frontmatter.src/content.config.tschecks every field when you build. - Adding a Markdown file to
src/content/treatments/creates its treatment page. - Site name, contact details, the booking form endpoint, menus and social links live in
src/config/. - Colours and fonts are tokens in
src/styles/variables.css. - SEO is set up: per-page titles and descriptions, canonical URLs, Open Graph and Twitter tags, JSON-LD, a sitemap, robots.txt and llms.txt, all 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 swapped for plain grey clips of the same size.
- Forms: the booking form needs a form service URL (Formspree, Basin or your own endpoint) in
src/config/config.jsonbefore it sends anything. - Output: the build is a static site that deploys to Vercel, Netlify, Cloudflare or any static host.
- Requirements: Node.js 22.12 or newer. Bun (lockfile included) or npm.
The download includes documentation that covers setup, content, images, tokens and deploying.