Пример сайта концерта: одна страница с программой вечера, местами и ценами, а кнопка «Купить билет» ведет на Яндекс Афишу
Другое · Стиль сайта: Kinetic

Задача
Когда артист или клуб объявляет концерт, нужна одна страница, где сразу видно главное: кто играет, когда и где, сколько стоит билет и где его купить. Люди часто открывают ее с телефона по ссылке из афиши или соцсети, поэтому главное должно быть видно без долгой прокрутки. Мы показываем такую страницу на примере концерта, но сайт из одной страницы для любого дела устроен так же: вверху то, что человеку нужно сразу, ниже подробности и кнопка, чтобы купить или оставить заявку.
Чтобы показать, как выглядит сайт из одной страницы (его еще называют лендингом), мы сделали пример — работающий сайт вымышленного концерта джаз-квартета «Медленный прилив» в клубе «Причал 9» в Калининграде. Квартета и клуба нет, концерта не будет. Но сайт настоящий и работает: откройте его кнопкой «Открыть пример сайта» и пролистайте, как обычный сайт. Чтобы никто не принял концерт за настоящий, в самом верху страницы — в той части, что видна сразу, без прокрутки, — стоит надпись: «Мероприятие вымышленное — это пример сайта».
Решение
В самом верху страницы, что видно сразу, — название квартета, дата и время начала, город, цена «от 1 500 ₽» и кнопка «Купить билет». Ниже — рассказ о квартете и расписание вечера: во сколько открываются двери, когда начинаются первое отделение, антракт и второе отделение и во сколько концерт заканчивается. Дальше — где проходит концерт и как добраться, с картой. Карта Яндекса появляется, только когда посетитель нажмет «Показать карту». Так страница открывается быстрее, а в тесте скорости Google карта, пока ее не открыли, не отнимает баллы. Нужна карта на вашем сайте — до договора скажем, сколько баллов обещаем с ней.
Билеты — три вида мест с ценами: балкон 1 500 ₽, партер 2 500 ₽, первые ряды 3 500 ₽. Сами билеты на сайте не продаются: их продает Яндекс Афиша — сервис, где покупают билеты на концерты и в театр. Все кнопки «Купить билет» на странице ведут туда. Афиша открывается отдельно, а страница концерта остается открытой.
На сайте настоящего концерта кнопка ведет сразу на страницу этого концерта — в Яндекс Афише или в другом сервисе, где продают билеты. Концерт в Афишу или другой сервис билетов заводите вы: договор заключаете с этим сервисом, и он сам устанавливает свои условия: комиссию с продаж и сервисный сбор для зрителя, если он есть. Мы ставим на сайт ссылку на страницу вашего концерта. Наш концерт выдуманный, в Афише его нет. Поэтому в примере кнопка открывает список всех событий Калининграда.
Еще на странице есть ответы на частые вопросы: с какого возраста можно прийти, что нужно для входа, как вернуть билет. И раздел с фотографиями «С прошлых концертов». Квартета нет, поэтому в примере там стоят чужие снимки с Unsplash — сайта, где фотографы выкладывают фото, которые можно бесплатно ставить на сайты. На сайте настоящего концерта здесь будут ваши фото. Если своих снимков с концертов нет, раздел уберем: чужие фото под видом ваших концертов не ставим.
Дата в примере меняется сама: сайт всегда показывает субботу через три-четыре недели от сегодняшнего дня, чтобы пример не выглядел устаревшим. На сайте настоящего концерта дата одна — дата вашего концерта.
Страница двигается: строки заголовка выезжают снизу, круглый значок с датой крутится, а две полосы с названием квартета бегут навстречу друг другу, как бегущая строка. В настройках телефона и компьютера есть пункт «Уменьшить движение». Его включают люди, которым мешает движение на экране. Если он включен, страница не двигается. Цвета сайта подстраиваются под телефон или компьютер: если у человека включена темная тема, сайт тоже темный, если светлая — светлый. Пример сделан на двух языках, русском и английском: язык переключается вверху страницы.
В примере нет формы заявки: билеты покупают на Афише. Тексты примера записаны прямо в файлах сайта, а не в админке, поэтому меняем их мы сами.
Похожую страницу для вашего дела сделаем по тарифу «Старт» — это сайт из одной страницы. В него входят дизайн, который мы рисуем для вас, форма заявки — посетитель заполняет ее на сайте, и заявка приходит вам, — статистика посещений и админка — раздел сайта, который посетители не видят. В админке вы сами меняете тексты, фото и цены, а для концерта — еще дату, программу и ссылку на билеты: концерт прошел — та же страница работает для следующего. Хотя билеты продает Афиша, на сайте концерта форма пригодится для другого — например, для вопросов организатору, заявок на корпоратив или аренду зала. Если она не нужна, скажите — уберем ее, цена тарифа от этого не меняется.
Стиль можно взять и как у этого примера — за ту же цену. Но готовый стиль может выбрать и другой клиент, а нарисованный для вас — только ваш. Движение и темная тема входят в цену в любом из них. Второй язык — опция за доплату. Хостинг и домен вы оплачиваете напрямую провайдеру и регистратору. До договора посчитаем, сколько это выйдет у вас за год. Цена, срок и все, что входит в тариф, — на странице тарифа.
На чем сделан сайт
- Next.js 16
- React 19
- TypeScript
- SCSS
- Yandex Maps
Результаты в цифрах
- 99Скорость из 100 — Google PageSpeed, телефон
- 100Доступность из 100 — Google PageSpeed, телефон
- 100Рекомендации из 100 — Google PageSpeed, телефон
- 100SEO из 100 — Google PageSpeed, телефон
Снимок экрана: тест скорости Google (Lighthouse)
