Yoga Fitness is a calm, editorial theme for yoga studios, wellness coaches and mindful-movement brands. The home page carries the whole studio experience - classes, a weekly timetable, coaches, memberships, retreats and more - alongside a real blog, a contact page and a custom 404. It builds to 10 static pages from the demo content and is written in Astro components, plain CSS and vanilla JavaScript. No React, no Vue, no Tailwind, no icon library. Five dependencies in total.
What's included
A hero with large display typography, a member highlight and an entrance animation
An approach section with six practice pillars around a feature image
Class cards with level, duration and intensity, driven by a typed data file
An interactive practice focus section where tabs and image hotspots stay in sync
A weekly schedule with a day picker and per-class booking links
Coach profiles, first-visit steps, a gallery and retreat cards
Membership pricing with a monthly/yearly toggle and a featured plan
A member stories slider and an accessible FAQ
A blog with a featured post, categories, tags, reading time, related posts, an RSS feed and BlogPosting structured data
A contact page with studio details, opening hours and a real, labelled form ready to connect to Formspree, Netlify Forms, Web3Forms or your own endpoint
A custom 404 page
Fast by construction
Static output, no hydration, no framework runtime. The homepage ships about 5 KB of JavaScript - roughly 2.6 KB over the wire - in small scripts that only load on pages that use them. One 38 KB stylesheet, 8 KB gzipped. Three self-hosted font files cover every weight, with metric-matched fallbacks to avoid layout shift. Every image is local, pre-optimised WebP with explicit dimensions; the hero is prioritised and everything below the fold is lazy-loaded. There are no third-party requests: no analytics, no font CDN, no embeds.
Accessible, and it stays that way without JavaScript
Skip link, visible focus rings, one H1 per page, and a palette tuned to meet WCAG AA contrast for small text. Tabs follow the ARIA pattern with arrow-key support, the pricing toggle and slider controls are labelled, and the FAQ is a native details accordion. The mobile menu handles Escape and focus return, and degrades to a visible list with scripting off; the schedule shows every day instead of tabs. Reduced motion is respected throughout, and content is never left hidden behind an animation.
Yours to change
Studio name, contact details, opening hours, social links, form endpoints and SEO defaults all live in one config file. Colours, type and spacing are CSS custom properties in one tokens file. Classes, schedule, coaches, pricing, retreats, testimonials and FAQ entries are typed TypeScript arrays, and blog posts are Markdown with a typed frontmatter schema and draft support. Subfolder deployments such as GitHub Pages project sites work with a single setting.
Included assets
A 21-icon SVG sprite and a flower monogram logo used for the header, footer and favicon, all drawn for this theme. Thirty-three CC0 photographs from pxhere.com stored locally as optimised WebP; nothing is hotlinked. Every image is credited with its source in the README.
MIT licensed. Fonts are SIL OFL 1.1 and photographs are CC0, both documented separately.
