Сайт под ключ Краснодар

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

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

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

Открыть демо-версию →

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

// ЗАДАЧА

Задача

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

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

// РЕШЕНИЕ

Решение

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

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

Каталог, вёрстка и 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 находки собственного пре-лонч аудита, каждая перепроверена по файлам отдельно