- Created FAQ page with structured questions and answers for customer support. - Added Sustainability page detailing eco-friendly practices and certifications. - Introduced Contacts page with comprehensive contact information and forms. - Established Technical Requirements page outlining SEO and performance standards. - Compiled a Glossary of terms related to performance, SEO, and construction materials.
8.2 KiB
tags, url, approach, effort, created
| tags | url | approach | effort | created | ||||
|---|---|---|---|---|---|---|---|---|
|
/ | кастомная страница (замена placeholder) | ~12ч | 2026-02-17 |
🏠 Головна
[!tip] Роль страницы Первое впечатление, навигационный хаб, витрина бренда. Цель — попасть в шорт-лист покупателя, который исследует рынок 3–6 месяцев перед покупкой.
[!warning] Реализация Кастомная страница — заменить
app/(site)/page.tsxцеликом. CMS catch-all тут не сработает. Новые компоненты:components/home/hero-section.tsx,product-categories.tsx,value-props.tsx
Мета-данные
| Поле | Значение |
|---|---|
| H1 | Фасади, які служать поколінням |
| Title | GoodBrick — Виробник фасадної плитки та цегли | Одеса, Україна |
| Description | Фасадна плитка та цегла ручного формування. Єдині в Україні з мінеральною технологією. М200, F300, 3-5% вологопоглинання. Виробництво в Одесі з 2022 року. |
| Schema | Organization + WebSite |
| OG Image | Лучшее фото фасада из R2 CDN |
Блоки страницы
1. Hero (full-bleed, первый экран)
[!important] LCP-элемент — использовать
<CdnImage priority>для быстрой загрузки
- Фото или видео готового фасада с продукцией GoodBrick
- H1: «Фасади, які служать поколінням»
- Подзаголовок: «Фасадна плитка ручного формування. Єдині в Україні з мінеральною технологією.»
- 2 CTA:
- Главный:
Замовити безкоштовний зразок→ Telegram/форма заявки - Вторичный:
Переглянути каталог→/products
- Главный:
- Формат: AVIF/WebP через CdnImage с
priorityprop
Scope cut: Нет конфигуратора-тизера в hero (отложен навсегда). Нет видео-фона на мобиле (тяжёло).
2. Категории продукции (сетка карточек)
Данные: вытащить из существующего API GET /api/sizes — группировка по ProductType enum (Tile / HalfBrick / Brick)
3 карточки:
- Фасадна плитка — фото + «від 15 до 25 мм товщина» →
/products?type=Tile - Половинка цегли — фото + «дешевша логістика» →
/products?type=HalfBrick - Цегла — фото + «класична укладка» →
/products?type=Brick
Каждая карточка: фото (CdnImage из R2) + название + короткое описание + стрелка. Alt: «фасадна плитка ручного формування GoodBrick»
Scope cut: Нет карточек для клинкера, термопанелей — их нет в продукте.
3. УТП / Почему GoodBrick (4 карточки с иконками)
Статический блок, без API:
| Иконка | Заголовок | Описание |
|---|---|---|
| 🏭 | «Єдині в Україні» | Мінеральна технологія ручного формування — лише у нас |
| 💪 | «М200, F300» | Міцність 200 кг/см², 300 циклів морозостійкості |
| 💧 | «3–5% вологопоглинання» | Захищає фасад від вологи та руйнування |
| 📅 | «З 2022 року» | Власне виробництво в Одесі |
[!note] Зачем объяснять М200, F300 Большинство покупателей не знает что это значит. Краткое объяснение убирает барьер и сигнализирует экспертность.
4. Галерея проектов (мини, 3–4 фото)
- Фото завершённых фасадов из категории Live Images
- Каждое: фото + подпись «{Місто}, {кв.м}» (если есть данные)
- CTA:
Усі проекти→/projects(когда будет готово) - Данные:
GET /api/images?type=2&limit=4(Live images)
Scope cut: Нет слайдера с паузой, нет lightbox — просто сетка.
5. Процесс / Как это работает (3 шага)
Статический блок, убирает страх «а как мне это всё купить?»:
- Замовте зразок — надішліть нам місто, ми відправимо безкоштовний зразок
- Оберіть колір і поверхню — 23 кольори × 5 поверхонь у каталозі
- Отримайте доставку — доставляємо по всій Україні, дилери в Одесі, Хмельницькому, Києві
[!tip] Конверсия «Как это работает» снижает тревогу у покупателя на раннем этапе исследования.
6. Блок доверия — «Чому нам довіряють»
- Счётчики (статические числа, заполнить реальными):
23кольори продукції5поверхонь (Standart, Klasik, Khvylia, Loft, Heritage)3міста дилерів2022рік заснування
- Имя/фото владельца: «{Ім'я}, засновник» — короткая цитата о качестве
7. Telegram CTA-баннер (перед футером)
- Фоновое фото
- Заголовок: «Залишились питання? Пишіть у Telegram»
- Подзаголовок: «Відповімо протягом години»
- CTA:
Написати→https://t.me/{username} - Второй вариант:
Зателефонувати→tel:{phone}
Конверсионные элементы (чеклист)
- CTA на образцы — above-the-fold в Hero
- CTA в Telegram — в Hero (вторичный) + отдельный баннер
- Телефон — в header (уже есть в SiteHeader)
- Trust-сигналы — УТП + счётчики + имя владельца
- Внутренние ссылки — на
/products,/projects - Двойной CTA — Hero + Telegram-баннер перед футером
SEO-чеклист
- H1 единственный, выше fold
- Schema.org Organization + WebSite
- OG image — 1200×630 из R2 CDN
- Alt у всех изображений
- CdnImage priority на hero-фото (LCP)
- Внутренние ссылки на key-страницы
Scope cuts относительно идеальной спецификации
| Убрано | Причина |
|---|---|
| Конфигуратор-тизер | Конфигуратора нет и не будет в ближайшие месяцы |
| Отзывы / Google Reviews | Интеграция требует времени, начать без этого |
| Подписка на рассылку | Email никто не использует |
| Exit-intent popup | Нет данных что работает, раздражает |
| Видео-фон в Hero | Тяжело на мобиле, LCP страдает |
| Блог-превью | Блог создаётся на неделе 2 |