---
title: "KINEO — Movement studio website · alekhin.dev"
description: "Movement studio website with programme filters, interactive class matching and four-step booking."
canonical_url: "https://alekhin.dev/en/projects/kineo/"
meta:
  "og:description": "Movement studio website with programme filters, interactive class matching and four-step booking."
  "og:image": "https://alekhin.dev/_og/s/o_b355075385a6449b.png"
  "og:image:height": "630"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "KINEO — Movement studio website"
  "twitter:image": "https://alekhin.dev/_og/s/o_b355075385a6449b.png"
---

> Index of every page on this site: [llms.txt](https://alekhin.dev/llms.txt)

[Back to projects](https://alekhin.dev/en/#projects)2024

Movement studio website

# KINEO

Movement studio website with programme filters, interactive class matching and four-step booking.

<dl>

<dt>Task</dt>
<dd>Help visitors understand the programs and book a suitable session.</dd>

<dt>What I built</dt>
<dd>Built a page with programs, answers to common questions and a booking form that protects entered data when closing.</dd>

<dt>Result</dt>
<dd>Visitors can choose a program and follow the booking flow, including on a phone.</dd></dl>

## My role

Interface, responsive development, filters, interactive programme matching, and four-step booking.

<dl>

<dt>Scope</dt>
<dd>Service landing / Booking / Frontend</dd>

<dt>Period</dt>
<dd>2024</dd>

<dt>Status</dt>
<dd>completed</dd>

</dl>

## Stack

- Vue
- Vite
- Tailwind CSS
- JavaScript

*Home page*

The opening screen introduces the movement studio and directs visitors towards choosing a programme.

## A path from the problem to the right programme

The landing page explains the approach, services, and specialists in a clear sequence.

*Full landing page*

The full page presents programmes, the studio approach, specialists and answers to questions before booking.

## Booking is designed for a phone

Fields, cards, and step navigation remain large and easy to understand.

*Landing page on a phone*

Programmes and information sections form a sequential mobile introduction to the studio.

*Mobile first screen*

The mobile opening screen keeps the sports photograph and a clear path to the programmes.

*Mobile navigation*

The full-screen menu provides access to the main sections and booking without small link targets.

## States of a complex dialog

Booking retains choices between steps and warns before closing.

*Service selection*

Booking is split into sequential steps, preserving the chosen service as the visitor moves through the form.

*Protecting entered data*

Closing an unfinished booking prompts for confirmation to help prevent accidental loss of entered information.

*Mobile booking*

Mobile booking keeps the same steps, with large choices and accessible actions.

*Mobile confirmation*

The phone version also confirms closing, offering a return to the form or an exit.

<details>

<summary>Technical details

</summary>

The Vue interface retains selections between booking steps. It also includes programme filters, a mobile menu and confirmation before closing a filled form.

</details>

## Let’s discuss your project

Tell me what you need: a website, store, service or workflow automation.

## Contact

[alekhin.v99@gmail.com](mailto:alekhin.v99@gmail.com)

[Telegram](https://t.me/alekhin_vv) [GitHub](https://github.com/ValentinAlekhin)

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://alekhin.dev/#website","@type":"WebSite","description":"Movement studio website with programme filters, interactive class matching and four-step booking.","inLanguage":"en-US","name":"KINEO","url":"/en/projects/kineo/","creator":{"@id":"https://alekhin.dev/#identity"},"image":{"@id":"https://alekhin.dev/#/schema/image/1"},"mainEntityOfPage":{"@id":"https://alekhin.dev/en/projects/kineo/#webpage"},"publisher":{"@id":"https://alekhin.dev/#identity"},"translationOfWork":{"@id":"https://alekhin.dev/#website"}},{"@id":"https://alekhin.dev/en/projects/kineo/#webpage","@type":"WebPage","description":"Movement studio website with programme filters, interactive class matching and four-step booking.","name":"KINEO — Movement studio website","url":"https://alekhin.dev/en/projects/kineo/","breadcrumb":{"@id":"https://alekhin.dev/en/projects/kineo/#breadcrumb"},"image":{"@id":"https://alekhin.dev/#/schema/image/2"},"isPartOf":{"@id":"https://alekhin.dev/en/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://alekhin.dev/en/projects/kineo/"]}]},{"@id":"https://alekhin.dev/#identity","@type":"Person","email":"mailto:alekhin.v99@gmail.com","jobTitle":"Website and web service developer","name":"Valentin Alekhin","url":"https://alekhin.dev/","knowsAbout":["TypeScript","Vue","Nuxt","Node.js","Go","SaaS"],"sameAs":["https://github.com/ValentinAlekhin","https://t.me/alekhin_vv"]},{"@id":"https://alekhin.dev/en/projects/kineo/#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"alekhin.dev","item":"https://alekhin.dev/en/","position":1},{"@type":"ListItem","name":"KINEO","item":"https://alekhin.dev/en/projects/kineo/","position":2}]},{"@id":"https://alekhin.dev/#/schema/image/1","@type":"ImageObject","contentUrl":"https://alekhin.dev/projects/kineo/og.webp","inLanguage":"en-US","url":"https://alekhin.dev/projects/kineo/og.webp"},{"@id":"https://alekhin.dev/#/schema/image/2","@type":"ImageObject","contentUrl":"https://alekhin.dev/projects/kineo/og.webp","inLanguage":"en-US","url":"https://alekhin.dev/projects/kineo/og.webp"}]}
```

## Sitemap

See the full [sitemap](https://alekhin.dev/sitemap.md) for all pages.