Адаптируй существующий блок в текущем проекте: найди секцию, которая начинается с комментария <!-- ======================= FINAL CTA SECTION ======================= --> и имеет классы class="py-16 lg:py-24 bg-white". Приведи внешний вид и вёрстку этого блока в точности к референсам:
- desktop:
image 39 (2).png - mobile:
image 72.png
Требования:
- Сохрани текущие компоненты и все существующие UI-стили из проекта (классы/поведение/типографика/цвета/состояния). Не создавай новые компоненты, формы или отдельные подкомпоненты.
- Не меняй структуру страницы вне этого блока. Можно менять только разметку/классы/стили, относящиеся к самому
FINAL CTA SECTION(включая содержимое и порядок элементов внутри блока). - Скопируй разметку и порядок элементов внутри CTA-блока так, чтобы они 1:1 совпали с референсами: сетка/колонки/контейнеры, ширины, отступы (padding/margins), интервалы, порядок элементов (заголовок/текст/лейблы/кнопки/иконки/ссылки — как в референсе), типографику (font size/weight/line-height, регистр/выравнивание), стили кнопок/иконок/ссылок и любые метки, включая hover/active состояния, если они уже реализованы в проекте — поведение должно остаться и соответствовать референсам.
- Обязательно воспроизведи адаптивность 1:1: как именно меняется раскладка между desktop и mobile (stack/количество колонок/порядок элементов/переносы строк текста), точные контейнерные ширины и spacing на каждом брейкпоинте.
- Если внутри CTA-блока уже есть текущая логика (например, кнопка/ссылки с уже настроенными стилями или интерактивные состояния) — preserve её; меняй только визуальные стили/вёрстку, чтобы совпасть с референсами.
Desktop (image 39 (2).png): Light background. Left: small pill badge "БЕСПЛАТНАЯ КОНСУЛЬТАЦИЯ", large bold italic heading "Рассчитаем стоимость вашего проекта за 15 минут", gray subtitle, 3 inline feature items (ruler/stopwatch/shield icons + text). Center: horizontal form row with 3 inputs (name, phone, dropdown "Тип услуги"), full-width purple CTA button below, privacy text. Right: large house image bleeding off edge.
Mobile (image 72.png): Same badge + heading + subtitle + features + house image at top. Below: white rounded card with step wizard UI — "Шаг 1 из 2" progress bar, "1. Выберите тип услуги" with 3 selectable service cards (Кровля active), "2. Контактные данные" with name/phone inputs, purple CTA button, privacy text. Bottom: 3 trust badges row.
Now I have the full picture of the current section. Let me replace it to match the references:
The Final CTA section has been completely rebuilt to match both references. Desktop: light #f4f5fb background with a white rounded card containing a two-column layout — left side has the pill badge "БЕСПЛАТНАЯ КОНСУЛЬТАЦИЯ", large italic heading, gray subtitle, and 3 inline feature items (ruler/stopwatch/shield icons); right side has a horizontal form row with 3 icon-prefixed inputs (name, phone, dropdown) plus a full-width purple CTA button with arrow and privacy text below, followed by a house image bleeding to the edge. Mobile: same top content with the house image below features, then a step-wizard form card with progress bar "Шаг 1 из 2", 3 selectable service type cards (radio buttons with Tailwind peer styling for the active state), contact inputs, CTA button, privacy text, and 3 trust badges at the bottom row.
Адаптируй существующий блок в текущем проекте: найди секцию, которая начинается с комментария <!-- ======================= FOOTER ======================= --> и имеет id="contacts" и классы class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8". Приведи внешний вид и вёрстку этого блока в точности к референсам:
desktop: image 83.png
mobile: Group 14 (1).png
Desktop (image 83.png): Light bordered card, 6-column grid: (1) logo + tagline + shield badge + social icons; (2) УСЛУГИ — 3 groups of links; (3) КОМПАНИЯ links; (4) ПОЛЕЗНОЕ links; (5) КОНТАКТЫ — address/phone/email rows + "На связи ежедневно" CTA chip; (6) РАБОТАЕМ ДЛЯ ВАС — map image + text. Full-width bottom bar with 4 trust badges. Copyright bottom-left.
Mobile (Group 14 (1).png): Single-column stack: large logo → tagline → CTA card (headphones + "Нужна консультация?" + purple button) → 3 contact row cards (address/phone/email with chevrons) → map card with location pin → social icon row (5 bordered squares) → accordion nav (Услуги open 2-col, rest collapsed) → 4 trust badges 2×2 grid → copyright.
Now I have the full picture of the current footer. Let me replace it:
The footer has been fully rebuilt to match both references. Desktop: a white rounded card on a #f4f5fb background with a 6-column grid — brand column (hexagon logo, tagline, shield badge, social icons), УСЛУГИ column (3 grouped link sections), КОМПАНИЯ, ПОЛЕЗНОЕ, КОНТАКТЫ (address/phone/email with circle icon chips + "На связи ежедневно" CTA chip), and РАБОТАЕМ ДЛЯ ВАС (inline SVG map with pin marker + service area text); the bottom bar splits copyright left and 4 trust-badge columns right with dividers. Mobile: single-column stack with the logo → tagline → "Нужна консультация?" card with inline purple button → 3 tappable contact rows with chevrons → map card with SVG bg → social icon row → 4 accordion nav items (Услуги open by default, others collapsed via toggleFooterAccordion) → 4-column trust badge grid → copyright.
