Gym Website Template
Demo brand: IRONCLAD · Boxing & strength gym · 7 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this gym website template
A complete site for a boxing and strength gym: seven built routes covering the class schedule, the first-timer path, the visit page and a wired journal. Every page in the demo is a page in the repository — there is no "coming soon" behind the nav.
The register is brutalist fight poster. Near-black ground, signal orange, hazard yellow reserved for numbers only, and Anton set enormous. It is loud in exactly one channel — the type — and deliberately flat everywhere else: no gradients, no glass, no glow. A gym sells intensity, and the display face does all of that work so nothing else has to.
The signature move is the round. A 3:00 → 0:00 timer scrubs as you scroll, with hard-cut work intervals, so reading the page has the same shape as a round on the bag. It is the structure the whole business runs on, drawn rather than described.
The 7 pages you get
- Home
/ - Positioning, the round timer set-piece, the disciplines, coaches, and the first-class close.
- Class schedule
/schedule/ - The weekly timetable — the page members actually return to. Driven by a typed array, not hand-built HTML.
- Your first round
/first-round/ - The beginner path: what to expect, what to bring, what happens when you walk in. The page that converts nervous first-timers.
- Visit the gym
/visit/ - Location, hours, contact. Live tel: and mailto: links, so the page works before you own a booking system.
- Journal
/blog/ - A wired content collection — drop in an .mdx file and it appears here and in the sitemap.
- Article
/blog/example-post/ - A worked long-form post carrying every editorial component: pull quotes, figures, callouts and code.
- 404
/404 - Designed, not default. Keeps the navigation so a bad link does not end the visit.
What is in the build
- Scroll-scrubbed 3:00 round timer with hard-cut work intervals, built on GSAP and reduced-motion aware
- Weekly class schedule rendered from a typed array — change a time, not a table cell
- A dedicated first-timer route, which is the page a gym site most often lacks and most needs
- Anton display at poster scale with Archivo for text — two self-hosted woff2 families, no Google Fonts request
- Working
tel:andmailto:paths, so enquiries land the day you deploy - Two-ink fight-poster bleach treatment applied to all ten images, so stock photography reads as art direction
- Vitest and Playwright suites included in the repository
The design decision
Every template in this catalog is loud in exactly one channel and deliberately quiet in the other three. That single rule is what stops 65 different worlds reading as one design system in different paint.
- The world
- Brutalist fight-poster. Near-black with signal orange, hazard yellow on numbers only.
- The mechanic
- The round. A scrubbed 3:00 → 0:00 round timer with hard-cut work intervals.
- Loud channel
- Display type
- Imagery. Two-ink fight-poster bleach
- Type & palette
- Anton · Archivo
-
#0d0d0f#f2ede3#ff3d00
Who it is for
Built for boxing gyms, strength and conditioning studios, CrossFit-style boxes and martial arts academies — and the agencies that build for them. It suits an operator whose pitch is hard work rather than wellness. If you are selling calm, recovery and soft light, the yoga studio build is the same quality in the opposite register.
Under the hood
- Astro 7 · static output, zero client framework
- Tailwind 4 · one @theme block holds the palette
- MDX content collections for the blog
- GSAP + Lenis for the scroll work, reduced-motion aware
- Self-hosted woff2 — no Google Fonts request
- Sitemap, canonicals and per-route meta wired
- Vitest + Playwright suites in the repository
- Zero third-party requests · strict CSP-ready
How to get started
- 01 Accept the repository invite and clone it.
- 02 Run
npm install, thennpm run dev. - 03 Replace the content in
src/data/with your own — that is where the brand, the copy and every list live. - 04 Swap the images in
public/images/and the palette in the@themeblock. - 05 Run
npm run buildand deploydist/anywhere static.
Questions
Can I use this for a CrossFit box or a martial arts school?
Yes. The disciplines, coaches and class schedule are all data, and nothing in the layout is boxing-specific beyond the copy and the imagery. Swap the words and the photos and it reads as whatever you run.
Is the round timer real, or a video?
It is real: an SVG and transform set driven by scroll position, not a recording. That means it scrubs both ways, costs nothing to load, and stays sharp at any size. With reduced motion set it resolves to a static state.
Does it handle class booking?
No, and deliberately. Booking means a payment processor, a members database and a cancellation policy — decisions about your business, not ours. The schedule page presents the timetable and hands off to whatever booking system you already use, which is a one-line href change.
What exactly do I get for $49?
Access to a private GitHub repository holding the complete Astro source of this template — every route you see in the preview, the content model, the images and the tests. Updates arrive in that same repository.
How many sites can I build with one licence?
As many as you like, for yourself or for clients. The licence is per buyer, not per project. The one thing you may not do is resell or redistribute the source as a template, theme or starter kit.
Do I need to know Astro?
It helps, but the common case is editing content and colour. Content lives in typed objects under src/data, colour lives in one @theme block, and npm run dev shows the result. Deploying is a static folder — Cloudflare Pages, Netlify and Vercel all take it as-is.
Is anything loaded from a third party?
No. Fonts are self-hosted woff2, there is no analytics, no tag manager, no CDN script and no external CSS. The build ships static HTML under a strict Content-Security-Policy.
More health & fitness templates
Hale
Hot yoga studio
Loud
Imagery
Terra & Still
Wellness coaching
Loud
Palette
Northlight Dental Co.
Dental practice
Loud
Imagery
Havenoak Therapy
Counselling & psychotherapy
Loud
Imagery
APLOMB
Chiropractic & spine clinic
Loud
Imagery