03Freelancing
IconCrossfit.com
Multi-Branch Gym Website
Public website for a three-branch CrossFit studio, with branch-aware content, local SEO, and a registration funnel.
Visit live site ↗- Company
- Freelance Client
- Role
- Freelance Web Developer
- Category
- Web Development
/images/work/iconcrossfit/cover.webp
Full-bleed project cover. Wide editorial crop of the interface or its subject matter.
01Impact
By the numbers.
3
Branches served
6
Content sections
Local
SEO targeting
Live
In production
02Overview
The brief.
Icon CrossFit operates three studios around south Chennai — Perungalathur, Mappedu, and Irumbiliyur. Each branch needed its own address, contact details, and social proof without splitting the business into three separate websites. The build treats a branch as a data record rather than a duplicated route, so one codebase serves all three and adding a fourth is a content change.
Problem
A multi-branch gym competes on neighbourhood search — someone looking for a gym searches for their own suburb, not the brand. The site had to rank locally for three different areas while still presenting one coherent business, and let a visitor reach the right branch in a single interaction.
Solution
A Next.js site with a branch selector threaded through testimonials, contact details, and location content. Landing copy targets the surrounding neighbourhoods explicitly, and a registration flow converts visitors without requiring a phone call first.
03Features
What it does.
Branch switcher
One selector drives testimonials, contact details, and address blocks — branches are data, not duplicated pages.
- React state
- Content model
Branch-scoped social proof
Testimonials filter to the selected location, so a visitor reads reviews from the studio they would actually attend.
- Next.js
- React
Local SEO surface
Neighbourhood-targeted landing copy and metadata for the areas each branch draws from.
- Metadata API
- Semantic HTML
Registration funnel
Enquiry and sign-up path that converts without a phone call as the first step.
- Forms
- Validation
Services and schedule
Training categories, age-group programmes, and opening hours presented per branch.
- Next.js
- Tailwind CSS
04Architecture
How it's built.
frontend
- Next.js
- React
- Tailwind CSS
- Responsive layouts
content
- Branch records
- Testimonial sets
- Service catalogue
seo
- Per-area landing copy
- Metadata
- Semantic structure
delivery
- Image optimisation
- Mobile-first
- Production hosting
05Challenges
What was hard.
Three locations without three codebases
Modelled branch as data consumed by shared components, so content changes never require a new route or a copy-pasted page.
Ranking for three separate neighbourhoods at once
Area-specific landing copy and metadata per branch, rather than one generic page trying to rank everywhere.
06Gallery
A closer look.
/images/work/iconcrossfit/01.webp
Interface detail. Crop tight on one screen or one interaction — not a full-page screenshot shrunk down.
/images/work/iconcrossfit/02.webp
Interface detail. Crop tight on one screen or one interaction — not a full-page screenshot shrunk down.
/images/work/iconcrossfit/03.webp
Interface detail. Crop tight on one screen or one interaction — not a full-page screenshot shrunk down.
/images/work/iconcrossfit/04.webp
Interface detail. Crop tight on one screen or one interaction — not a full-page screenshot shrunk down.
07Stack
Built with.
- Next.js
- React
- Tailwind CSS
- SEO
Outcomes
- Three branches live under a single codebase
- Branch-aware contact details and social proof throughout
- Neighbourhood-level search targeting for each location