Сайт-каталог Краснодар

«Южные Порталы» — сайт-каталог для монтажной компании

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

Роль: вёрстка, бэкенд, антиспам, приём заявок Стек: HTML5 · CSS3 · Node.js · TypeScript Статус: сдан заказчику

Демонстрационная копия сайта, закрыта от индексации.

Главная страница сайта «Южные Порталы» — каталог ворот, рольставней и автоматики
Задача

Задача

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

Условие было принципиальным: без конструктора сайтов и без CMS — вручную, с полным контролем над каждой деталью вёрстки, разметки и поведения формы.

Решение

Решение

Статический многостраничный сайт на чистом HTML/CSS/JS, без единого стороннего фреймворка или сборщика, плюс собственный бэкенд на Node.js для приёма заявок. Каталог организован в три уровня — категория → подкатегория → товар, — чтобы клиент быстро находил нужную модель, а не листал плоский список из сотни позиций.

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

Каталог, вёрстка и SEO

82 HTML-страницы по единому шаблону, с полной поисковой разметкой на каждой.

82 HTML-страницы, свёрстаны вручную по единому шаблону — шапка и подвал совпадают на всех страницах
Каталог на 3 уровня: 5 корневых категорий → 15 хабов подкатегорий → 57 товарных/модельных страниц
Собственная CSS-система на переменных, CSS Grid с auto-fit/minmax, 19 медиа-запросов, включая prefers-reduced-motion
SEO-разметка (title, description, Open Graph) на 100% страниц — все title уникальны

Доступность

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

Полностью самописный доступный lightbox для фото товара: role="dialog", фокус-ловушка по кругу, управление с клавиатуры
Escape закрывает, стрелки листают, фокус возвращается на элемент-триггер после закрытия
Сотни ARIA-атрибутов по всему сайту и 100% изображений (576 из 576) с alt-текстом

Приём заявок и антиспам

Отдельный бэкенд на Express/TypeScript специально под форму заявки.

Zod-валидация, rate limit по IP (6 запросов за 10 минут), honeypot-поле, HMAC-подписанная кука минимального времени заполнения формы
Durable outbox-очередь на SQLite: атомарный захват записи, экспоненциальные повторы, восстановление после рестарта сервера
Доставка заявок в Telegram и резервно на почту через Nodemailer
Результат

Результат

Сайт технически завершён, приём заявок работает по цепочке «форма → антиспам-проверка → очередь → Telegram/почта» без потери заявок при сбоях сервера. Перед сдачей проведён собственный пре-лонч аудит по 6 направлениям (блокеры, SEO, доступность и разметка, CSS и адаптив, JS и бэкенд, скорость и медиа).

82
HTML-страницы, свёрстаны вручную по единому шаблону
100%
страниц с уникальным title, description и Open Graph
576/576
изображений с alt-текстом
62
находки собственного пре-лонч аудита, каждая перепроверена по файлам отдельно

Честно: sitemap.xml, JSON-LD/schema.org, rel="canonical" и twitter:card ещё не реализованы — это открыто зафиксировано в собственном чек-листе запуска проекта как задача с оценкой трудоёмкости, а не забытая недоработка.

Другой кейс

ещё 1 проект
Веб-платформа 64 автотеста

Сайт с оплатой и личным кабинетом

Было Нужен был не сайт-визитка о продукте, а сайт, который сам продаёт: принимает оплату и сразу открывает доступ. Стало Идемпотентная цепочка «оплата → доступ», личный кабинет, вход через OAuth и 64 автотеста за этим всем.
5 + 2 тарифных уровней — 5 платных планов и 2 бесплатных
Похожая задача?
Нужен сайт-каталог или многостраничный сайт с формой заявки — расскажите детали, предложим решение.
Оставить заявку