Landing page - Arrow Fitness

A modern landing page for a fitness group training studio, featuring high-contrast dark visual design, interactive real-time class booking components, and coach showcase sections.

View Live Site

The Challenge

The fitness studio needed a high-energy online presence to convert casual visitors into active gym members. The original concept lacked clear class scheduling, trainer profiles, and an immediate call-to-action for free trial sign-ups.

The Solution

I designed a dark-themed UI system built around bold typography, high-contrast neon accents, live class schedules with capacity tracking, and direct conversion paths to claim a free introductory session.

Design Process

Wireframes for Landing page - Arrow Fitness — Wireframes

Design System for Landing page - Arrow Fitness — Design System

High Fidelity for Landing page - Arrow Fitness — High Fidelity

Development

1const reveal = new IntersectionObserver(
2  (entries) => {
3    entries.forEach((entry) => {
4      if (entry.isIntersecting) {
5        entry.target.classList.add("is-visible");
6      }
7    });
8  },
9  { threshold: 0.2 }
10);

Responsive

Landing page - Arrow Fitness shown across desktop, tablet and mobile breakpoints

Results

Lighthouse Performance: 98Lighthouse Performance
Service Tiers: 3Service Tiers
Largest Contentful Paint: 1.1sLargest Contentful Paint
Contrast Compliance: AAContrast Compliance

What I Learned

I learned the importance of simplifying complex flows and building components that are easy to maintain and scale. It also improved my understanding of user trust and micro-interactions.

Dark-mode design system execution
Real-time class capacity UI components
High-contrast CTA positioning
Component-driven layout architecture