Jurassic PT
A site for a small group training studio in Cannington, redesigned in October 2026 in the club’s own colours, with Shelley’s badge as its crest.
The only thing I regret is not hiring Caleb sooner. After struggling with a useless website that was doing nothing for our business, we bit the bullet and reached out for help, not quite knowing what to expect. Well, we couldn't have been happier with the result! We are so happy with our new website and truly thank you for making this such a stress-free experience. The timeline was clear, and we knew exactly what we were getting: ideas, design, inclusions, additions and changes. This was all accomplished with prompt communication that was friendly and professional, especially when dealing with someone who is admittedly not technologically inclined, and we didn't go live until we were 100% happy. We never felt pressured, pushed or worried the entire time. Outstanding service at a reasonable cost. We would recommend you to everyone without hesitation. Thank you so much for helping us put the vision online!
Shelley
Jurassic PT
Overview
Jurassic PT is a small group training studio in Cannington, run by Shelley, a midwife and nurse who is also a specialist personal trainer. C4 built the studio’s site in early 2026, then redesigned it in October in a direction called the Home kit, which dresses the site like the club. The red comes from the team’s singlets. The ink, cream and gold come from Shelley’s badge, and the badge itself is the crest. The photos are hers, from her Instagram, each recorded with the post it came from. Two quick questions suggest classes, and the answers follow the visitor through the site and into the consult form. Member testimonials appear in full and word for word, and the build fails if a shorter excerpt stops matching its source. Every page ships as real HTML for search engines, and every page leads to the same first step, a free consult with Shelley.
Screenshots
What I Delivered
- A redesign of every page in the Home kit direction, with Shelley’s own badge as the crest
- Photos from Shelley’s Instagram, framed like a clubroom wall, each recorded with its source post
- A two-question finder that suggests classes and carries the answers into the consult form
- An honour board of twelve member testimonials, in full and word for word, filtered by situation
- A class list where each class opens to say what it involves, with a consult link that names the class
- Build-time prerendering, so every page ships real HTML with one h1 and its own title, description and canonical
- vercel.json rewritten so its security headers take effect, plus a real 404 page
- A share image made from the badge
Key Features
- The badge large and centred above “Welcome to Jurassic PT”
- One question at a time, with three plain answers and a result that lists only the classes that suit
- Finder answers carry through the site: they pre-select matching testimonials, open matching classes and fill in the consult form
- Testimonial excerpts quoted exactly, with an ellipsis wherever words are left out
- Class panels that open by height with a fade and drop out of the tab order when closed
- Below 1024 px the pages sit in a strip under the header, always in view, with no hamburger menu
- A consult bar on phones that rises after the first screen and stays off the contact page
- A Google map of the studio on the contact page
Stack & Tooling
- React 18 with Vite 6
- React Router 6
- Tailwind CSS 3.4
- Build-time prerender: a Vite SSR build and a Node script
- Big Shoulders Display and Atkinson Hyperlegible Next, self-hosted via Fontsource
- Lucide icons
- GSAP only in the C4 footer credit
- Vercel hosting
Integrations & Backend
- FormSubmit for the consult form, which emails Shelley
- Google Maps, embedded on the contact page and linked for directions
- Square Appointments ready for massage bookings: the button uses the enquiry form until Shelley has a link
- Instagram and Facebook links
- C4 Studios footer credit
Performance / SEO / Accessibility
- Text contrast measured on every page at 375 and 1280 px with every panel open: no failures
- One h1 per page in the prerendered HTML, no heading skips, no unnamed controls and no missing alt text
- Keyboard pass through the home page, the finder and the consult form
- Reduced motion turns off the crest settle and the panel transitions
- Every security header in vercel.json present on the deployed preview
Challenges & Constraints
- Building the identity from what the studio already has, down to the badge and the team singlets
- Keeping member words exact: every testimonial appears in full, and a shorter excerpt that drifts from its source fails the build
- Helping a nervous beginner find a starting point in two questions
- Fitting six pages into a phone header without hiding them behind a menu
What I'd Improve Next
- Shelley’s confirmation of the class effort labels, which are C4’s defaults for now
- A Square Appointments link for booking massage directly
- A screen-reader pass and testing on real phones
- More of Shelley’s own photos as she gathers them