Сайт для спортивного клуба: кейс UNLIM PADEL

Две недели. Корта нет. Контента нет.

Срочно нужен был многостраничный сайт для UNLIM PADEL. Срок: две недели. Корт при этом ещё достраивали. Нормальных фото не было, офферы и УТП не сформулированы, тренеры без описаний.

На руках было ТЗ. Формально список задач, по факту шаблон, который выплюнула нейронка. На вопрос «что и зачем делаем?» там ответа не было. Чем глубже я проектировал, тем чаще выяснялось, что нужный функционал в ТЗ вообще не заложен. Но цена-то уже посчитана. Ёпт.

Тогда я ответственно послал ТЗ нахуй и включил голову: как бы хотел видеть это я и что адекватно именно мне, а не залупной нейронке на бесплатной подписке.

Сначала пришлось выяснить, что мы вообще продаём

Абонементы. Логику переписывали четыре раза. На одном из витков оффер звучал так: «абонемент на 10 часов даёт скидку 5%». В чём суть и почему не сделать фикс-цену, до сих пор загадка. Итог: «цена по запросу))».

Первые 100 клиентов. Скидка 50% на любой час с 07:00 до 23:00, 14 дней с первого бронирования, только через сайт или приложение. Клиент сам считает цену от 3 500 и гадает, 99-й он или уже 101-й. Допустим, позвонил, уточнил: бронь № 90, запись на послезавтра. А за эти дни перед ним записались ещё 11 человек. И что теперь, он 101-й? Задача на самом деле простая: набрать максимум новых игроков в первый месяц. Фикс-цена на первый час и дата окончания решали её без калькулятора.

Финальный оффер. «2 часа по цене одного». Зачёркнутые 11 000 → 5 000, рядом 7 000 → 3 500, акция с 01.11 по 15.11, «предварительно, возможен сдвиг». Четыре суммы, плавающие даты и один вопрос: сколько платить. Пиздец, короче.

Пожелание №14. «Добавить блок: ежедневные игры разных уровней, сильное комьюнити». Куда? Что на нём? Звучит как «ежедневно едим еду» в ресторане. Ну да, вы же ресторан, вы работаете каждый день. Про «силу комьюнити» тоже хочется развёрнутую мысль. В чём сила-то, брат? Слово «комьюнити» комьюнити не создаёт, и сто человек на одном корте не сообщество. Сообщество начинается с закрытого или открытого чата, в который новичка сразу зовут. Ни один клуб из референсов не додумался даже до этого минимума.

В итоге на сайте сделали карточку «Комьюнити клуба» с конкретным действием «Вступить в Telegram». Она ведёт в Telegram клуба: у нового человека есть следующий шаг, а не просто обещание сообщества.

И ещё выяснилось, что в преимуществах клуба важно всё, каждая карточка. Поэтому их много, и разложены они по секциям и свайперам, а не простынёй текста.

Что запустили

На старте вышел сайт на 21 URL и пять статей для новичков. Но важнее, как он устроен: контент можно менять блоками, длинные подборки не превращают мобильную версию в бесконечный скролл, а с карточек клуба пользователь может перейти к бронированию.

Секции главной остались в коде, а тексты, изображения и элементы внутри них редактируются отдельно. Так команда может обновлять страницу без риска собрать из неё конструктор с неожиданным порядком блоков.

CMS, в которой сложно что-то сломать

Payload CMS. Через неё правятся страницы и содержимое каждого блока, статьи, турниры и тренеры. Команда клуба меняет контент без разработчика и без пересборки.

Конструктора «ставь любой блок куда хочешь» нет, и это сознательно. Структура секций задана кодом, из CMS правятся поля и контент. Иначе через месяц сайт превратится в винегрет из чужих экспериментов.

Мяч, который летит между страницами

При переходе между страницами мяч пролетает через экран и склеивает уходящую страницу с новой в одну анимацию. Живёт он в отдельном WebGL2-слое поверх сайта.

Сначала это была сцена на Three.js. Но тащить почти полмегабайта ради одного мяча перебор даже для падела. Я переписал всё на чистый WebGL2 и вырезал ~508 КБ raw. Заодно сайт стал быстрее грузиться и перестал мучить слабые устройства.

Дальше пошла уже тонкая настройка:

• Модуль переходов грузится по намерению перейти по ссылке.
• Тяжёлая сцена ждёт первого завершённого перехода и свободного времени браузера.
• На мобильных отключён след частиц и ограничен буфер.
• При долгих просадках кадров рендер сам снижает качество.
• Нет WebGL2? Работает обычная навигация, без мяча и без ошибок.

Тридцать экранов скроллить никто не будет

Секций на главной много, и все нужные. Просто сложить их в столбик мог бы только разработчик, который сам этот сайт не открывает. Поэтому карточки преимуществ, тренеров, тарифов и другие подборки сделаны свайперами. Листаешь внутри блока, страница не растёт.

Анимации появления не прячут контент до загрузки JS. Страницы отдаются готовым HTML, интерактив подключается только там, где он нужен. У картинок заданы размеры и варианты под карточки, мобильные экраны и крупные блоки. Огромный оригинал ради маленькой карточки не грузится, вёрстка не прыгает.

Аналитика: не только «сколько зашло»

Своя аналитика считает:

• просмотры страниц и активное время;
• клики по кнопкам записи и контактам;
• показы форм, начало заполнения, шаги, успешную отправку и ошибки;
• просмотры карточек тренеров, турниров, статей и абонементов;
• глубину чтения статей, источники и кампании;
• Core Web Vitals: LCP, INP, CLS, TTFB, FCP.

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

CRM оставили чужой

Бронирование и личный кабинет подключены через VivaCRM. Я предлагал свою CRM: по моей оценке, она окупилась бы за 1–2 года, в зависимости от объёма. Выбрали стороннюю, это тоже решение. Сайт интегрирован с CRM и не делает вид, что вся логика бронирования его.

Итог

За две недели: CMS, каталог тренеров, турниры, статьи, аналитика и мяч, который летает между страницами. Верстать блоки было самым лёгким. Тяжело было принимать продуктовые решения, пока вводные, материалы и сами офферы менялись под ногами.

Слово «комьюнити» комьюнити не создаёт. Зато мяч летает.