ТЗ на создание страницы "Контакты"

Страница: Контакты

URL: https://be1st.pro/contacts

Цель: Создать адаптивную, семантически правильно сверстанную страницу "Контакты" с формой обратной связи, картой и контактной информацией, используя существующую CMS-инфраструктуру сайта (Drupal 9/10 с Layout Builder и Paragraphs).

1. Общие требования

Используемая платформа: Drupal (с модулями: Layout Builder, Paragraphs, Webform, Site Settings).

Верстка: Только через Twig-шаблоны компонентов Paragraphs и блоков. Запрещено вставлять HTML напрямую в редактор CKEditor.

Контент: Все текстовые элементы, ссылки, контакты должны управляться через административную панель (поля Paragraphs, Site Settings, Webform).

Разметка: Использовать семантические теги (<section>, <address>, <a>, <iframe> и т.д.). Никакого лишнего div-брака без необходимости.

Адаптивность: Верстка должна быть полностью адаптивной под мобильные устройства (iOS/Android) и планшеты. Приоритет — читаемость, простота, визуальная иерархия.

Шапка и подвал: Использовать существующие шаблоны. Ничего не менять.

Первый экран: Не верстать — он уже реализован как часть макета сайта.

2. Структура страницы

Страница состоит из трёх основных секций, каждая — отдельный Paragraph:

Порядок

Название Paragraph

Описание

Наши контактные данные

Выводит адрес, телефон, email, мессенджеры (Telegram, WhatsApp) из Site Settings

Яндекс Карта

Встраивание iframe с координатами компании

Форма обратной связи

Форма Webform с полями: Имя, Email, Тема, Сообщение

Ссылки на социальные сети

Ссылки формируемые через Site Settings

Важно: Все элементы добавляются в Layout Builder как Paragraphs. Никаких вложений в CKEditor!

3. Компоненты и их реализация

3.1. Paragraph: «Наши контактные данные»

Поля (в административной панели):

Поле текста: field_contact_title — заголовок (по умолчанию: "Наши контактные данные")

Выводимые данные (из Site Settings):

Адрес: site_settings.address → г. Москва, п. Первомайское, ул. Луговая, вл20Ас1

Телефон: site_settings.phone → +7 (495) 151-91-56

Email: site_settings.email → admin@be1st.pro

Telegram: site_settings.telegram → берётся из шапки

WhatsApp: site_settings.whatsapp → берётся из шапки

3.2. Paragraph: «Яндекс Карта»

Поля:

Поле текста: field_map_title — заголовок (по умолчанию: "Наше местоположение")

Поле текста с форматом вставки html: field_map_html

3.3. Paragraph: «Форма обратной связи»

Источник данных:

Использовать существующую форму Webform, созданную в /admin/structure/webform (например, webform_contact).

Форма должна содержать:

Поле: Имя (Text field)

Поле: Email (Email field)

Поле: Тема (Text field, опционально)

Поле: Сообщение (Textarea)

Кнопка: Отправить

4. Стили (CSS)

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

Адаптивность (примеры):

.contact-info { max-width: 800px; margin: 0 auto; padding: 2rem; } @media (max-width: 768px) { .contact-info, .map-section, .contact-form-section { padding: 1rem; } .map-container iframe { height: 300px; } .contact-list { gap: 1rem; } }

✅ Важно: Использовать rem, flexbox, grid. Избегать float.