← All projects

Madrid SportClinic

A high-impact sports interface connecting physiotherapy, return-to-sport work, training, facilities and booking in one continuous progression.

Explore demo Request a quote
portfolio.local/demos/madrid-sport-clinic
Madrid Sport Clinic hero on desktop
Madrid Sport Clinic hero on mobile
  • Immersive hero
  • Three service lines
  • Facilities gallery
  • Sports progression
Sector
Sports physiotherapy
Contribution
Strategy · UX/UI · Motion front end
01

The commercial challenge

Treatment and return to activity form one story.

Need

Physiotherapy, return-to-sport work and personal training form a related journey but could read as isolated services. Facilities and pricing also needed commercial presence.

Objective

Frame treatment and return to activity as a visible progression, keeping facilities, method, displayed prices and contact close to each decision.

Designed response

I designed the content strategy, hero, card system, gallery, pricing hierarchy, responsive layouts and scroll-driven motion.

Built with

HTML5CSS3JavaScriptIntersectionObserverrequestAnimationFrameResponsive UI

Validated with

Playwright QA1440 / 390 px
02

Interface evidence

The solution on screen

Madrid Sport Clinic original hero
01

Movement defines the hero

Image, message and actions make the opening screen immediate and connect activity with booking.

  • Clear proposition
  • Two action routes
  • Key facts visible
Sports gallery and interface on mobile
02

The facility informs the decision

The gallery changes the rhythm after service cards and places the physical space before method and pricing.

  • Editorial pace change
  • Mobile-specific composition
  • Visual context before price
03

Commercial journey

From recovering capacity to returning to sport.

  1. 01

    Activate

    The hero connects problem, movement and booking.

  2. 02

    Choose

    Three services organise the sports journey.

  3. 03

    Know

    Facilities and method provide context.

  4. 04

    Book

    Pricing and contact close the decision.

Madrid Sport Clinic mobile composition

Demonstrated capabilities

Visual impact with an immediate commercial path.

Composition, photography, service hierarchy and motion create a memorable sports experience that remains clear.

Discuss a project
04

Verifiable build

The engineering stays available without slowing the story.

Solution

The narrative presents them as stages in one return-to-activity journey.

Solution

Each block changes scale and follows the decision order.

Solution

Custom scrolling is limited to fine pointers while mobile keeps native scroll.

Built features

Interactions with a specific purpose.

  • Fixed header
  • Scroll progress
  • Three service cards
  • Facilities gallery
  • Three-step method
  • Two pricing cards
  • Phone and email CTA
05

Implementation quality

An interface that scans quickly and feels distinctive.

Responsive

Hero, gallery, prices and CTAs recompose to retain impact and readability at 390 px.

Interaction

Reveals, progress and light parallax accompany reading without replacing navigation.

Performance

JavaScript is limited to scrolling, observation and navigation; no heavy application runtime.

Delivered

  • Responsive hero and navigation
  • Three-service system
  • Gallery and working method
  • Pricing presentation and contact

Does your offer need this kind of clarity?

Let’s design a website that helps people understand, trust and act.

Tell me what the business sells, what content exists and where the decision stalls today. We will define scope before quoting.

Request a quote