Експерт з 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.