«Сайты и веб-приложения | React, JS, Python | Telegram-боты»
- Опыт работы
- 4 года
- На сайте с
- 2026 года
Безопасная сделка
Деньги списываются после приёмки
Демонстрационный одностраничный сайт фотостудии, где зал можно арендовать по часам. Проект показывает, как выглядит современный лендинг для услуги с записью по времени: от первого экрана до подтверждения брони.
Задача: сделать сайт, который сразу объясняет, что предлагает студия, сколько это стоит и как забронировать зал без звонков и переписки. Студия вымышленная, цены и контакты условные, на сайте это прямо указано.
Структура страницы:
— первый экран с крупным фото студии, бегущей строкой с названием и кнопкой «Забронировать зал»;
— три зала (Циклорама, Графит, Лофт) с фото, описанием оснащения и ценой за час;
— блок цен с доплатами за ассистента, гримёрную и вечернее время;
— отзывы (демонстрационные тексты);
— форма онлайн-бронирования;
— частые вопросы и ответы;
— контакты.
Стиль тёмный: кремовый текст, один акцентный красно-оранжевый цвет, шрифты Manrope и Unbounded. Сайт одинаково удобен на компьютере и на телефоне.
Сайт собран на React и TypeScript, сборка через Vite, стили на Tailwind CSS. Это статический сайт без сервера и базы данных, поэтому он быстро открывается и бесплатно размещается на Cloudflare Pages, где и опубликован.
Что сделано:
— Форма бронирования: выбор зала, даты, времени (слоты с 09:00 до 20:00) и длительности от 1 до 6 часов. Итоговая стоимость пересчитывается сразу при любом изменении. Имя и телефон проверяются: имя от двух символов, телефон от десяти цифр. При ошибке проблемные поля подсвечиваются и появляется подсказка. После отправки открывается экран с деталями заявки и кнопкой «Новая запись».
— Кнопка «Выбрать этот зал» в карточке зала прокручивает страницу к форме и сразу подставляет нужный зал.
— Адаптивная вёрстка: на телефоне навигация превращается в выдвижное меню, сетки перестраиваются в одну колонку, первый экран занимает всю высоту экрана.
— Анимации: плавное появление блоков при прокрутке, бегущая строка, раскрывающиеся вопросы. Если у пользователя в системе отключены анимации, они выключаются автоматически.
— Доступность: у кнопки меню и раскрывающихся вопросов есть подписи и состояния для скринридеров.
— Залы, цены, доплаты, отзывы и вопросы вынесены в отдельные списки в коде, поэтому тексты и цены меняются в одном месте, без правки вёрстки.
В демо-версии заявка никуда не отправляется. Для реального заказчика к форме подключается отправка в Telegram, на почту или в CRM.
Готов и опубликован рабочий демо-сайт, который открывается по ссылке с любого устройства. Страница интерактивна: форма бронирования проходит весь путь от выбора зала до экрана подтверждения, стоимость считается автоматически, ошибки ввода обрабатываются, меню и раскрывающиеся вопросы работают. Внешний вид проверен на телефоне и на экране ноутбука.
Проект можно взять за основу для реального заказчика: достаточно заменить фото, тексты и цены и подключить приём заявок. Такой лендинг подойдёт для фотостудий, коворкингов, мастерских, салонов и других услуг с записью по времени.
Важно: проект демонстрационный. Реального заказчика, настоящих отзывов и статистики по заявкам нет, все цены и контакты условные.
