Презентация о нас

Что это за страница и чем отличается от главной

Главная отвечает человеку, который уже пришёл с бедой: у него шуршит в подвале, и ему нужно понять, куда звонить. Презентация отвечает другому: он получил ссылку от знакомого или ищет подрядчика на объект и хочет за пять минут понять, кто это вообще такие и можно ли им доверить объект.

Отсюда три отличия, и они определяют всё остальное:

По DESIGN-DIRECTION.md креатив разрешён именно здесь — вместе с первым экраном и подачей доказательств. Но правила остаются: одна идея на экран, одно жёлтое пятно, одно осмысленное движение.

Экран 1. Знак и обещание

На экране: полотно #101214 в край; тёмная версия знака; заголовок; одна строка под ним; две кнопки.

Движение — одно: туман расходится по прокрутке и открывает знак. Это и есть обещание услуги, поэтому оно проходит правило «убрать движение — смысл изменился». При prefers-reduced-motion показывается уже разошедшийся кадр, а не завеса.

Жёлтое пятно одно — глаз птицы в знаке. Больше жёлтого на этом экране нет.

Экран 2. Чем работаем

На экране: крупная типографика, заголовок и полная форма блока «кто мы».

Для объектов, где вредитель означает убыток, — абонентское обслуживание: график проверок, профилактика, мониторинг между визитами и отчётность.

После работы остаётся акт: состав препаратов и норма расхода. Препараты сертифицированные и разрешённые к применению в России.

Экран 3. Девять направлений — одним взглядом

На экране: сетка из девяти позиций, у каждой название и одна строка смысла. Без иконок, без карточек с тенями — различие несёт набор.

Экран 4. Поворот: одна из девяти устроена наоборот

На экране: одна мысль, крупно, на всю ширину. Здесь допустим второй акцент — зелёный, не жёлтый.

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

Экран 5. Как это устроено на деле

На экране: четыре пункта, набор без плашек.

Экран 6. Чем работаем — и как это выглядит

На экране: три снимка из разрешённых, подписанные тем, что на них.

Экран 7. Чего мы не делаем

На экране: список отказов — он же самый убедительный экран, и это не парадокс.

Экран 8. Связаться и забрать с собой

На экране: контакты, реквизиты, кнопка скачивания — повтор той же кнопки с первого экрана.

Как на неё попадают

Решение заказчика 18.08: презентация не мешает просмотру сайта. Её нет в меню и нет в поиске; единственный вход — тихая строка на странице контактов.

Строка для страницы контактов:

Ссылкой оформлено слово «Презентация о нас». Без «скачайте прямо сейчас», без восклицательных знаков, без кнопки: это сноска, а не призыв.

Что из этого следует для сборки — три пункта, каждый проверяемый:

follow оставлен намеренно: страница не индексируется, но ссылки с неё работают — иначе PDF и контакты выпадут из обхода вместе со страницей.

Файл должен работать без сайта

Его будут пересылать письмом, и он уйдёт дальше без нашей страницы. Поэтому:

• последняя страница PDF — контактная, и она всегда отдельная: в печатных стилях у подвала break-before: page, поэтому контакты не приклеиваются хвостом к предыдущему экрану;
• на ней телефон, почта, адрес сайта и география работы;
• контакты продублированы в колонтитуле каждой страницы — если файл распечатают и лист потеряется, связь с нами останется на любом другом.

Проверено на собранном файле: последняя страница даёт «+7 901 406-64-44 · iobiopestcontrol@gmail.com · BIOPESTCONTROL · biopestcontrol.ru · Одинцово и район: Истра, Новая Рига, Звенигород, Руза».

Что скачивается

Один файл: biopestcontrol-prezentaciya-<дата сборки>.pdf, лежит рядом со страницей, ссылка — обычная:

``html <a href="/prezentaciya/biopestcontrol-prezentaciya.pdf" download>Скачать презентацию (PDF)</a> ``

Ни строки JS, ни обработчика, ни редиректа. Статика.

Как собирается PDF: что фабрика уже умеет

Посмотрел, прежде чем предлагать.

Чего нет: генерации PDF нет ни в одном из 100 скриптов core/scripts/ — ни зависимости, ни кода. Искал по именам и по содержимому.

Что есть: готовый приём «нарисовать браузером». core/scripts/rasterize.mjs и shots.mjs подключаются к Chromium через playwright-core, который лежит в core/node_modules:

``js const browser = await chromium.connectOverCDP(process.env.SSF_CDP ?? 'http://172.16.6.1:9223'); ``

Сборка комплектов — core/scripts/build-all-kits.sh, внутри (cd web && SITE_KIT="$KIT" npx astro build) в свой каталог dist/.

И есть образец дисциплины, который здесь подходит целиком: сборщик плюс проверка, которая сверяет файл с тем, что даёт сборщик — пара build-hero-portrait.py / check-hero-portrait.py.

Предложение

Печатать готовую собранную страницу тем же Chromium — на сборке, один раз.

1. build-all-kits.sh собирает статику как сейчас; 2. следом build-presentation-pdf.mjs открывает уже собранный dist/<комплект>/prezentaciya/index.html, ждёт шрифты и печатает: page.pdf({ format: 'A4', printBackground: true, margin: … }); 3. файл кладётся рядом со страницей в dist/<комплект>/prezentaciya/; 4. check-presentation-pdf.mjs в общем прогоне проверяет: файл существует и не старше HTML, страниц от 4 до 10, размер меньше порога, внутри есть извлекаемый текст (значит шрифты встроены, а не картинка), и не встречается отложено.

Печатный вид задаётся @media print в стилях комплекта — то есть PDF и страница физически не могут разойтись: это одна вёрстка и одни токены.

Прототип, снимки и PDF — сделано 2026-08-18

PDF: механизм проверен, а не предложен. Прежняя оговорка «page.pdf() работает только в headless — не проверял» снята: печать выполнена локальным headless Chrome 151 через playwright-core, тем же приёмом, что rasterize.mjs в ядре. Результат: 70 КБ, 7 страниц A4, 4 встроенных шрифта, 1504 оператора текста — то есть внутри настоящий текст, а не картинка, и он ищется поиском. Контакты и номер страницы — в колонтитуле на каждой странице. Ни строки JS: на странице скрипта нет вовсе, ссылка на файл — обычный <a download>.

Проверка Д1–Д7 прогнана по собранной странице на обеих ширинах — все семь зелёные. Замеры: знаков в строке 60–66 при 1440; состояний полотна 3; кеглей 6 при 1440 и 5 при 390; девять услуг в одну колонку без фонов и рамок; анимация одна, 300 мс, только transform и opacity, canvas 0; жёлтых пятен не больше одного на экран; просветы 120 и 64 при порогах 120 и 64, в просвете виден фон страницы.

Что нашла проверка — и что из этого пришлось чинить

1. Просвет перед подвалом был нулевым. Правило Д7 писалось про секции, а подвал — footer, и селектор его не захватывал. Исправлено в прототипе; в инстансе то же место надо проверить отдельно. 2. Горизонтальная прокрутка на 390. Длинное слово в заголовке («мотоопрыскиватель») не влезало в 350 px и растягивало страницу до 418 px. Заголовок сокращён, заголовкам добавлен перенос. 3. Нижний порог меры (45 знаков) неприменим на узком экране. На 390 строка ограничена окном, а не мерой: получается 27–41 знак, и это нормально. Формулировку правила Д1 надо уточнить — порог 45 применяется только там, где ширина окна позволяет его выдержать.

Находка про словознак — решать не мне

В тёмной версии wordmark-dark.svg слово «Bio» набрано #005739, а это контраст 2.17 к полотну #101214. На снимке первого экрана оно почти пропадает: «PestControl» сталью читается, «Bio» — нет.

Формально это не нарушение (логотипы исключены из требований контраста), и знак не мой, поэтому я его не трогал. Но название бренда, которое не читается на собственном первом экране, — дефект по существу. Три выхода, выбирать заказчику и ведущему: светлее зелёный в тёмной версии (#3D9953 даёт 5.28), крупнее словознак, или оставить как есть осознанно.