Эксперт по Ghost CMS: Верстка кастомной темы из Figma - 3 шаблона постов и сниппеты (PageSpeed 90+)

Ищем опытного Front-End и Ghost CMS разработчика (реальный опыт работы с Ghost обязательное требование) для создания кастомной темы для B2B-техноблога Advio (платформа для автоматизации рекламы).

У нас полностью готовые, детализированные (pixel-perfect) макеты в Figma для десктопа и мобайла. Визуальный стиль строгий flat-дизайн с минималистичной двухцветной палитрой. Мы ожидаем чистый, легкий CSS/SCSS-код без тяжелых фреймворков (никакого Bootstrap или jQuery) и лишнего UI-мусора.

Ориентир для дизайна: Ближайший реальный пример структуры, чистой эстетики и логики сетки, к которому мы стремимся, это блог Buffer Resources (https://buffer.com/resources/).

Главная цель и архитектура: Максимальная гибкость контента. Авторы должны иметь возможность закрепить один из 3 специфических шаблонов за любым постом прямо в админке Ghost. Требуем правильной маршрутизации и архитектуры файлов:

1) Главная страница (index.hbs):

1. Главная статья (Featured Post): Размещается сверху. Большая обложка, заголовок H2, лид на 3 строки, бейдж категории.

2. Лента публикаций: Хронологическая сетка других постов. Карточка обычного поста имеет два визуальных состояния: с обложкой и без. Элементы карточки: заголовок H3, лид на 3 строки, бейдж категории и дата. (Автор НЕ отображается).

3. Мобильный UI: Сетка перестраивается в одну колонку. Главная статья сохраняет обложку, а другие посты (без изображений) идут ниже простым текстовым списком.

2) Страница категории (tag.hbs):

1. Полностью дублирует структуру index.hbs, но без блока Featured Post. Имеет большой заголовок сверху (например, "Категория: Название").

3) Результаты поиска (search.hbs):

1. Сетка карточек с релевантными результатами + задизайненный состояние "Ничего не найдено". В верхней части страницы всегда должны отображаться первые три категории (Теги).

4) Страница ошибки 404 (error-404.hbs):

1. Чистый брендовый макет с креативным текстом ошибки, кнопкой "Вернуться на главную" и блоком "Популярные статьи" (3 стандартные карточки без изображений). На мобильном экране контент выравнивается строго по центру вертикали.

5) Три базовых шаблона постов (post.hbs, custom-instruction.hbs, custom-rules.hbs):

1. Hero-блок: Хлебные крошки, большой H1, лид-абзац, под которыми идет обложка (Cover Image) на всю ширину текстовой колонки. Отображается лишь дата (БЕЗ автора). На мобильном обложка становится Edge-to-Edge (на весь экран без отступов).

2. Блок автора: Размещается в самом низу страницы. Простой текстовый формат: "Автор: Имя Фамилия" (без аватара/фото).

3. Левая фиксированная панель (Curriculum / Содержание): Для шаблонов инструкций и правил это пошаговый список, который "прилипает" во время скролла (Scroll Spy нужно реализовать на легком Vanilla JS). Мобильный UI: эта колонка исчезает и заменяется компактным аккордеоном "Содержание" сразу под заголовком, который разворачивается по клику.

Контентные модули и HTML-сниппеты: Все кастомные модули должны быть стилизованы глобально, чтобы идеально отображаться внутри тега content. Вы должны предоставить чистый HTML UI Kit / Шпаргалку, которая будет содержать точный HTML-код для этих элементов, чтобы наша команда могла легко сохранить их как нативные сниппеты в Ghost:

1. Блок "Главное" (TL;DR): Выделенный инфо-бокс с маркированным списком.

2. Врезки для инструкций (Callouts): Кастомные стили для блоков "Do/Don't" и сообщений Info/Warning/Alert.

3. Интерактивная галерея (в стиле OpenAI): Блок-карусель, где фото переключаются кликом по текстовым "таблеткам" с подписями (требует легкого Vanilla JS). Мобильный UI: должен поддерживать как клик по таблеткам, так и нативный свайп.

4. Видеоинтеграция: Адаптивный блок для встроенных плееров (YouTube/MP4) с аккуратными скруглениями.

5. Стандартные UI-элементы: Бейджи/Теги, Даты и Пагинация должны использовать стандартные хелперы Ghost, стилизованные согласно макетам Figma.

Суровые технические требования:

1. Качество кода: Семантический HTML5 и CSS/SCSS (методология BEM).

2. Производительность: Показатели Google PageSpeed Insights (Lighthouse) ДОЛЖНЫ быть 90+ (Зеленая зона) как для десктопа, так и для мобайла.

3. Ghost CMS (Handlebars): Полная динамика, никакого хардкода в шаблонах. Все модули, текстовые блоки и медиа должны управляться через админпанель Ghost.

4. Валидация: Финальный .zip архив с темой должен набрать ровно 100/100 баллов в официальном инструменте Ghost GScan без каких-либо ошибок или предупреждений.

Процесс оплаты и QA:Это контракт с жесткой привязкой к результату. Оплата осуществляется единовременно (100% milestone). Средства будут освобождены ТОЛЬКО после того, как полностью готовая .zip тема будет передана, интегрирована и успешно пройдет наше внутреннее ревью фронтенд-кода, проверку требований PageSpeed и валидацию GScan на 100/100.

Интеллектуальная собственность и эксклюзивность (NDA):Это проприетарный кастомный дизайн для платформы Advio. После завершения работ и оплаты 100% прав интеллектуальной собственности на код и дизайн принадлежат исключительно нам. Готовая тема, ее компоненты или предоставленные макеты Figma не могут быть перепроданы, использованы в других проектах или опубликованы где-либо.

Как откликнуться: Поскольку бюджет открыт, пожалуйста, укажите вашу реальную фиксированную стоимость и ориентировочные сроки выполнения для этого объема работ.(Примечание: для защиты нашей интеллектуальной собственности ссылка на Figma будет предоставлена ТОЛЬКО отобранным кандидатам на этапе интервью).

Важно: Начните свой отклик с ссылок на 2-3 кастомные темы Ghost CMS, которые вы разработали лично, чтобы мы могли проверить их через PageSpeed Insights.