Kinetic

About this template

Kinetic is a complete website for Fenline Performance, a fictional two-coach personal training studio in Cambridge, UK. Italic condensed headlines, a cobalt and flare palette on warm paper, diagonal bands and SVG-drawn athletes give it an athletic-editorial feel. It includes a goal picker that recommends a programme, programmes filterable by goal, anonymised client progress stories with SVG charts, a sessions-per-week pricing calculator, a booking flow with a week view and a PAR-Q style health check, and a training plan builder with one-rep max and pace calculators.

Features

• Goal picker on the home page (strength, fat loss, mobility, sport, postnatal) that shows a recommended programme, coach, price and first six weeks, and remembers the choice
• Booking flow: session type, coach or no preference with each coach's next opening, a week view of times built from coach shifts, group classes and session length, and a confirmation with a downloadable .ics file
• PAR-Q style health questions in the booking flow: any yes turns a training booking into a carefully worded call-back request
• Pricing calculator comparing pay per session, the best session pack and a monthly membership for 1 to 4 sessions a week of 45 or 60 minutes
• Programmes and client stories filterable by goal, with shareable ?goal= links
• Client progress charts drawn as inline SVG from data in main.js, with screen-reader summaries
• Training plan builder that renders an illustrative weekly split from days, goal, equipment and session length, saved in localStorage and printable
• One-rep max estimator with a percentage table, and a running pace calculator with per-km, per-mile and race-distance times
• Live open-now status and today's hours in UK time, a next-free-consult badge and a contact form with inline validation
• SVG athlete pictograms, illustrated coach portraits, studio and map, accessible mobile menu, scroll reveals and back-to-top button

Pages included

• Homeindex.html
• Programmesprogrammes.html
• Pricingpricing.html
• Resultsresults.html
• Training toolstools.html
• Aboutabout.html
• Contactcontact.html
• Book onlinebook.html
• 404404.html

Quick start

unzip kinetic.zip && cd kineticopen index.html        # that's it # optional, after adding new Tailwind classes:npm install && npm run build

Changelog