,
info@smartsellgroup.ru
info@smartsellgroup.ru
Ты создаёшь HTML-код для вставки в WordPress-страницу. Твоя задача — сделать профессиональный одностраничный landing page на основе текстового файла с контентом.
ВХОДНЫЕ ДАННЫЕ
Текст для страницы: [ВСТАВЬ ТЕКСТ ИЗ MD-ФАЙЛА]
Изображения (используй все):
Фон hero: https://smartsellgroup.ru/wp-content/uploads/2022/02/rectangle_4.jpg
Машина CTA фон: https://smartsellgroup.ru/blocks/besplatnaya-konsultatsiya/contact-bg/
Car-marl: https://smartsellgroup.ru/blocks/etapy-privlecheniya-zakaza/car-marl/
Ноутбук: https://smartsellgroup.ru/wp-content/uploads/2022/02/laptop-2.png
Флаги большие: https://smartsellgroup.ru/wp-content/themes/paradise/img/flags.png
Флаг вариант 2: https://smartsellgroup.ru/wp-content/themes/paradise/img/flag-4.png
Флаг вариант 3: https://smartsellgroup.ru/wp-content/themes/paradise/img/flag-5.png
Важно по изображениям:
laptop-2.png — показывать рядом с текстом в hero и в calculator-секции. Не растягивать — max-width 320–380px
car-marl — декоративный элемент в hero (внизу правой колонки или позади ноутбука, opacity 0.35–0.5, position absolute). Следить чтобы не перекрывал текст
contact-bg — только как CSS background-image для CTA-секции с тёмным overlay
Флаги — ТОЛЬКО floating animated объекты (position absolute, анимация), не в контенте
ПРАВИЛА КОНТЕНТА
Текст из файла не менять вообще — не перефразировать, не сокращать, не дописывать
Все заголовки переносить точно как написаны
Кнопки из текста [Кнопка: «…»] → реализовать с правильным popup (см. ниже)
Блоки [Изображение: …] → заменить на визуальный HTML-элемент (инфографика, схема, карточки)
Блоки [Калькулятор: …] → сделать визуальный UI с input-рядами и блоком результата
Блоки [Блок с фотографиями: …] → сделать карточки с SVG-иконками и должностями
Блоки [Форма: …] → использовать существующий Contact Form 7 popup
ДИЗАЙН-СИСТЕМА (CSS переменные)
—bg: #0b0b0b;
—bg2: #131313;
—bg3: #1e1e1e;
—accent: #FF6B00;
—accent2: #FFA238;
—white: #f7f7f7;
—text: #d1d1d1;
—muted: #8a8a8a;
—border: rgba(255,255,255,0.07);
—font-main: ‘Raleway’,’Trebuchet MS’,sans-serif;
—font-body: ‘Open Sans’,’Arial’,sans-serif;
Типографика:
h1 — clamp(2.2rem, 4vw, 3.4rem), цвет var(—accent), weight 800
h2 — clamp(1.7rem, 2.8vw, 2.4rem), цвет var(—white), weight 800
h3 — 1.05rem, цвет var(—white), weight 800
p — цвет var(—text), line-height 1.75
КНОПКИ (всегда с !important)
.ssg-btn /* оранжевая заливка */
.ssg-btn-outline /* прозрачная с оранжевой обводкой */
.ssg-btn-white /* белая с оранжевым текстом */
.ssg-btn-full /* ширина 100% */
Все кнопки: border-radius: 0, font-family: var(—font-main), font-weight: 800, letter-spacing: 0.12em, text-transform: uppercase, padding: 19px 38px
POPUP-ЛОГИКА (строго соблюдать)
Кнопка
href
class
data-title
ЗАКАЗАТЬ / ОСТАВИТЬ ЗАЯВКУ / тарифы
#packet_form
popup_form_click_call
название тарифа/услуги
ПОЛУЧИТЬ АУДИТ / РАССЧИТАТЬ БЮДЖЕТ / ОБРАТНЫЙ ЗВОНОК
#callbacks_form
popup-with-form
—
ЗАПИСАТЬСЯ НА КОНСУЛЬТАЦИЮ
#callbacks_form
popup-with-form
—
jQuery в конце файла:
jQuery(document).ready(function($) {
$(‘.popup_form_click_call’).magnificPopup({
type: ‘inline’, preloader: false,
callbacks: {
open: function() {
var t = this.st.el.attr(‘data-title’);
if (t) { $(‘#packet_form input.hide_title’).val(t); $(‘#packet_form span.hide_title’).text(t); }
$(‘header’).css(‘padding-right’, getScrollbarWidth() + ‘px’);
},
close: function() { $(‘header’).css(‘padding-right’, ‘0’); }
}
});
$(‘.ssg-btn.popup-with-form, .ssg-btn-outline.popup-with-form, .ssg-btn-white.popup-with-form’).magnificPopup({
type: ‘inline’, preloader: false,
callbacks: {
open: function() { $(‘header’).css(‘padding-right’, getScrollbarWidth() + ‘px’); },
close: function() { $(‘header’).css(‘padding-right’, ‘0’); }
}
});
function getScrollbarWidth() {
var o=document.createElement(‘div’); o.style.cssText=’visibility:hidden;overflow:scroll;position:absolute;top:-9999px;width:50px;height:50px;’;
document.body.appendChild(o); var i=document.createElement(‘div’); i.style.width=’100%’; o.appendChild(i);
var w=o.offsetWidth-i.offsetWidth; o.parentNode.removeChild(o); return w;
}
});
СТРУКТУРА СЕКЦИЙ (строго в таком порядке)
1. HERO
Фон: rectangle_4.jpg с тёмным overlay + radial-gradient оранжевые пятна по углам
Grid: левая колонка (h1 + 2 абзаца + 2 кнопки) + правая колонка (визуальный блок)
Правая колонка: position: relative, высота ~440px. Внутри:
laptop-2.png — position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 300–320px; z-index: 3
car-marl — position: absolute; bottom: 0; right: -40px; width: 260–300px; opacity: 0.4; z-index: 2; filter: saturate(0.7)
3 floating flags — position: absolute по разным углам, z-index 4
border-bottom: 2px solid rgba(255,107,0,0.18)
2. STATS BAR
Полная ширина, фон var(—accent)
4 крупных числа из ключевых результатов страницы
.num — Raleway, 900, белый, clamp(2rem, 3vw, 2.8rem) + .lbl — uppercase 0.82rem
3. PRICING / ТАРИФЫ
Фон var(—bg2)
Grid 3 колонки без gap, через background: var(—border) (2px gap эффект)
Средняя карточка — featured с оранжевой меткой «ПОПУЛЯРНЫЙ» top-right
Каждая карточка: тег пакета → h3 → описание → срок → большая цена → кнопка
4. CALCULATOR / STATS
Grid: левая (текст + визуальные input-ряды + оранжевый блок результата + CTA)
Правая: laptop-2.png + 2 маленьких floating флага
Блок результата: оранжевый фон, 2 больших числа рядом
5. TASKS / ПРЕИМУЩЕСТВА
Фон var(—bg2)
Grid по числу задач в тексте (обычно 3 колонки)
Каждая карточка: border-top: 3px solid var(—accent), без border-radius
6. ERRORS / ОШИБКИ
Grid 4 колонки (4×2 для 8 ошибок)
Каждый item: большой faded номер (01–08) opacity 0.25 + bold заголовок + текст
7. METHODS / ИНСТРУМЕНТЫ
Grid 2 колонки
Каждая карточка: иконка-блок (52×52, оранжевый bg 10%) + SVG иконка + h3 + p
SVG иконки нарисовать вручную, тематически релевантные
8. STAGES / ЭТАПЫ
Grid 4 колонки
Каждая: гигантский faded номер (opacity 0.07) как background → Этап N badge → h3 → p
9. TEAM / КОМАНДА
Grid: левая (2 абзаца + 4 stat-блока с числами) + правая (4 expert-карточки 2×2)
Expert-карточки: SVG-аватар в оранжевом квадрате + должность + описание
10. CASES / КЕЙСЫ
Grid 3 колонки
Каждый: большая метрика (Raleway 900, clamp(2.4rem, 3.5vw, 3.2rem), accent) → caption → h3 → p
11. VIDEO/AUDIT BLOCK
Полная ширина, border-left: 4px solid var(—accent), bg3
Flex: badge (оранжевый) | текст | кнопка
12. FAQ
accordion, max-width 880px
summary::after { content: ‘+’ } → при open rotate(45deg)
13. CTA (финал)
Фон: contact-bg как background-image с overlay rgba(11,11,11,0.88)
border-top: 1px solid rgba(255,107,0,0.14)
Флаг flags.png — position absolute, right 0, bottom 0, opacity 0.08, pointer-events none
h2 + p + 2 кнопки (белая + outline)
SEO-СТРУКТУРА
Ровно один H1 на странице (в hero)
H2 — заголовок каждой секции
H3 — подзаголовки внутри секций
H4 — детали (имена экспертов, подписи)
Semantic HTML: