---
title: "KINEO — Сайт студии движения · alekhin.dev"
description: "Сайт студии движения: фильтры программ, интерактивный подбор занятия и запись в четыре шага."
canonical_url: "https://alekhin.dev/projects/kineo/"
meta:
  "og:description": "Сайт студии движения: фильтры программ, интерактивный подбор занятия и запись в четыре шага."
  "og:image": "https://alekhin.dev/_og/s/o_16ee401aa89198c3.png"
  "og:image:height": "630"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "KINEO — Сайт студии движения"
  "twitter:image": "https://alekhin.dev/_og/s/o_16ee401aa89198c3.png"
---

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

[К проектам](https://alekhin.dev/#projects)2024

Сайт студии движения

# KINEO

Сайт студии движения: фильтры программ, интерактивный подбор занятия и запись в четыре шага.

<dl>

<dt>Задача</dt>
<dd>Помочь посетителю разобраться в программах и записаться на подходящее занятие.</dd>

<dt>Что сделано</dt>
<dd>Собрал страницу с программами, ответами на вопросы и формой записи с защитой введённых данных при закрытии.</dd>

<dt>Результат</dt>
<dd>Посетитель может выбрать программу и пройти сценарий записи, в том числе с телефона.</dd></dl>

## Моя роль

Интерфейс, адаптивная разработка, фильтры, интерактивный подбор программы и четырёхшаговая запись.

<dl>

<dt>Состав работ</dt>
<dd>Сервисный лендинг / Запись / Frontend</dd>

<dt>Период</dt>
<dd>2024</dd>

<dt>Статус</dt>
<dd>завершён</dd>

</dl>

## Стек

- Vue
- Vite
- Tailwind CSS
- JavaScript

*Главная страница*

Главный экран знакомит со студией движения и направляет к выбору программы.

## Путь от проблемы к подходящей программе

Лендинг последовательно объясняет подход, услуги и специалистов.

*Весь лендинг*

Полная страница раскрывает программы, подход студии, специалистов и ответы на вопросы перед записью.

## Запись рассчитана на телефон

Поля, карточки и навигация по шагам остаются крупными и понятными.

*Лендинг на телефоне*

Программы и информационные разделы выстроены в последовательный мобильный сценарий знакомства со студией.

*Первый экран на телефоне*

На телефоне первый экран сохраняет спортивную фотографию и понятный переход к программам.

*Мобильная навигация*

Полноэкранное меню открывает основные разделы и запись, не требуя попадать в мелкие ссылки.

## Состояния сложного диалога

Запись сохраняет выбор между шагами и предупреждает перед закрытием.

*Выбор услуги*

Запись разбита на последовательные шаги: выбранная услуга сохраняется при переходах внутри формы.

*Защита введённых данных*

При закрытии незавершённой записи появляется подтверждение, чтобы пользователь случайно не потерял введённые данные.

*Мобильная запись*

Мобильная запись сохраняет те же этапы, с крупными вариантами выбора и доступными действиями.

*Подтверждение на телефоне*

Подтверждение закрытия предусмотрено и на телефоне: можно вернуться к заполнению или выйти.

<details>

<summary>Технические детали

</summary>

Интерфейс на Vue хранит выбор пользователя между шагами записи. Отдельно предусмотрены фильтры программ, мобильное меню и подтверждение закрытия заполненной формы.

</details>

## Обсудим вашу задачу?

Расскажите, что нужно сделать: сайт, магазин, сервис или автоматизацию работы.

## Связаться

[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":"Сайт студии движения: фильтры программ, интерактивный подбор занятия и запись в четыре шага.","inLanguage":"ru-RU","name":"KINEO","url":"/projects/kineo/","creator":{"@id":"https://alekhin.dev/#identity"},"image":{"@id":"https://alekhin.dev/#/schema/image/1"},"mainEntityOfPage":{"@id":"https://alekhin.dev/projects/kineo/#webpage"},"publisher":{"@id":"https://alekhin.dev/#identity"},"workTranslation":{"@id":"https://alekhin.dev/en/#website"}},{"@id":"https://alekhin.dev/projects/kineo/#webpage","@type":"WebPage","description":"Сайт студии движения: фильтры программ, интерактивный подбор занятия и запись в четыре шага.","name":"KINEO — Сайт студии движения","url":"https://alekhin.dev/projects/kineo/","breadcrumb":{"@id":"https://alekhin.dev/projects/kineo/#breadcrumb"},"image":{"@id":"https://alekhin.dev/#/schema/image/2"},"isPartOf":{"@id":"https://alekhin.dev/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://alekhin.dev/projects/kineo/"]}]},{"@id":"https://alekhin.dev/#identity","@type":"Person","email":"mailto:alekhin.v99@gmail.com","jobTitle":"Разработчик сайтов и сервисов","name":"Валентин Алёхин","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/projects/kineo/#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"alekhin.dev","item":"https://alekhin.dev","position":1},{"@type":"ListItem","name":"KINEO","item":"https://alekhin.dev/projects/kineo/","position":2}]},{"@id":"https://alekhin.dev/#/schema/image/1","@type":"ImageObject","contentUrl":"https://alekhin.dev/projects/kineo/og.webp","inLanguage":"ru-RU","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":"ru-RU","url":"https://alekhin.dev/projects/kineo/og.webp"}]}
```

## Sitemap

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