Add new pages for sustainability, contacts, technical requirements, glossary, and related content

- Created a sustainability page with detailed eco-friendly practices and certifications.
- Added a contacts page featuring multiple communication channels and company details.
- Introduced a comprehensive technical requirements document covering Core Web Vitals and SEO best practices.
- Developed a glossary of terms related to performance, SEO, technical development, and marketing.
This commit is contained in:
2026-02-19 23:07:51 +02:00
parent 97f0036fe0
commit ef38a90059
50 changed files with 1040 additions and 236 deletions

View File

@@ -0,0 +1,297 @@
---
tags:
- сайт
- страница
- главная
- p0
url: /
approach: кастомная страница (замена placeholder)
effort: ~12ч
created: 2026-02-17
---
# 🏠 Головна
> [!tip] Роль страницы
> Первое впечатление, навигационный хаб, витрина бренда. Цель — попасть в шорт-лист покупателя, который исследует рынок 36 месяцев перед покупкой.
> [!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 |
---
## Макет сторінки (wireframe)
```
┌──────────────────────────────────────────────────────────────────┐
│ GoodBrick Каталог Про нас Ціни Ще КОНТАКТИ │
├──────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────── HERO (full-width фото фасаду) ─────────────┐ │
│ │ │ │
│ │ ФАСАДИ, ЯКІ СЛУЖАТЬ ПОКОЛІННЯМ │ │
│ │ Фасадна плитка ручного формування. │ │
│ │ Єдині в Україні з мінеральною технологією. │ │
│ │ │ │
│ │ ╔══════════════════════╗ ╔══════════════════════╗ │ │
│ │ ║ Замовити зразок ║ ║ Переглянути каталог ║ │ │
│ │ ╚══════════════════════╝ ╚══════════════════════╝ │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ ── КАТЕГОРІЇ ПРОДУКЦІЇ ── │
│ │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │
│ │ [фото] │ │ [фото] │ │ [фото] │ │
│ │ │ │ │ │ │ │
│ │ ПЛИТКА │ │ ПОЛОВИНКА │ │ ЦЕГЛА │ │
│ │ 1525 мм │ │ ЦЕГЛИ │ │ NF, WDF… │ │
│ │ товщина │ │ дешевша │ │ класична │ │
│ │ Каталог → │ │ логістика │ │ укладка │ │
│ │ │ │ Каталог → │ │ Каталог → │ │
│ └─────────────────┘ └─────────────────┘ └─────────────────┘ │
│ │
│ ── ЧОМУ GOODBRICK ── │
│ │
│ ┌────────────┐ ┌────────────┐ ┌────────────┐ ┌──────────┐ │
│ │ 🏭 │ │ 💪 │ │ 💧 │ │ 📅 │ │
│ │ Єдині │ │ М200, F300 │ │ 35% │ │ З 2022 │ │
│ │ в Україні │ │ міцність + │ │ вологопогл.│ │ року │ │
│ │ │ │ морозост. │ │ │ │ │ │
│ └────────────┘ └────────────┘ └────────────┘ └──────────┘ │
│ │
│ ── ПРОЕКТИ ── │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ [фото] │ │ [фото] │ │ [фото] │ │ [фото] │ │
│ │ Одеса │ │ Київ │ │ Хмельн. │ │ … │ │
│ │ 850 м² │ │ │ │ │ │ │ │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
│ [Усі проекти →] │
│ │
│ ── ЯК ЦЕ ПРАЦЮЄ ── │
│ │
│ ①─────────────────②─────────────────③ │
│ Замовте Оберіть Отримайте │
│ зразок колір і поверхню доставку │
│ │
│ ── ЧОМУ НАМ ДОВІРЯЮТЬ ── │
│ │
│ 23 5 3 2022 │
│ кольори поверхонь міста рік │
│ │
│ [фото] «Засновник» «Ми шукали плитку для власного…» │
│ │
│ ── ЧАСТІ ЗАПИТАННЯ ── │
│ │
│ ▶ Що таке плитка ручного формування і чим вона краща…? │
│ ▶ Які характеристики плитки GoodBrick? │
│ ▶ Скільки коштує фасадна плитка за м²? │
│ ▶ Чи вигоряє плитка на сонці? │
│ ▶ Як замовити безкоштовний зразок? │
│ [Усі запитання →] │
│ │
│ ┌──────────── TELEGRAM CTA (темний фон) ─────────────────────┐ │
│ │ Залишились питання? Пишіть у Telegram │ │
│ │ Відповімо протягом години │ │
│ │ [Написати →] [Зателефонувати] │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ ── FOOTER ──────────────────────────────────────────────────── │
│ GoodBrick │ Каталог │ Інфо │ Контакти │ Соцмережі │
└──────────────────────────────────────────────────────────────────┘
```
---
## Блоки страницы
### 1. Hero (full-bleed, первый экран)
> [!important] LCP-элемент — использовать `<CdnImage priority>` для быстрой загрузки
- Фото или видео готового фасада с продукцией GoodBrick
- **H1:** «Фасади, які служать поколінням»
- Подзаголовок: «Фасадна плитка ручного формування. Єдині в Україні з мінеральною технологією.»
- **2 CTA:**
- Главный: `Замовити безкоштовний зразок` → Telegram/форма заявки
- Вторичный: `Переглянути каталог``/products`
- Формат: AVIF/WebP через CdnImage с `priority` prop
**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 циклів морозостійкості |
| 💧 | «35% вологопоглинання» | Захищає фасад від вологи та руйнування |
| 📅 | «З 2022 року» | Власне виробництво в Одесі |
> [!note] Зачем объяснять М200, F300
> Большинство покупателей не знает что это значит. Краткое объяснение убирает барьер и сигнализирует экспертность.
---
### 4. Галерея проектов (мини, 34 фото)
- Фото завершённых фасадов из категории Live Images
- Каждое: фото + подпись «{Місто}, {кв.м}» (если есть данные)
- **CTA:** `Усі проекти``/projects` (когда будет готово)
- Данные: `GET /api/images?type=2&limit=4` (Live images)
**Scope cut:** Нет слайдера с паузой, нет lightbox — просто сетка.
---
### 5. Процесс / Как это работает (3 шага)
Статический блок, убирает страх «а как мне это всё купить?»:
1. **Замовте зразок** — надішліть нам місто, ми відправимо безкоштовний зразок
2. **Оберіть колір і поверхню** — 23 кольори × 5 поверхонь у каталозі
3. **Отримайте доставку** — доставляємо по всій Україні, дилери в Одесі, Хмельницькому, Києві
> [!tip] Конверсия
> «Как это работает» снижает тревогу у покупателя на раннем этапе исследования.
---
### 6. Блок доверия — «Чому нам довіряють»
- Счётчики (статические числа, заполнить реальными):
- `23` кольори продукції
- `5` поверхонь (Standart, Klasik, Khvylia, Loft, Heritage)
- `3` міста дилерів
- `2022` рік заснування
- Имя/фото владельца: «{Ім'я}, засновник» — короткая цитата о качестве
---
### 7. FAQ-блок на главной (5 вопросов, GEO-оптимизированные)
> [!important] GEO-эффект
> FAQ на главной странице — сильнейший сигнал для AI-поиска. Страницы с FAQPage schema в 3.2× чаще попадают в Google AI Overviews. Эти 5 вопросов снимают ключевые барьеры покупателя и одновременно привлекают AI-трафик.
Реализация: `FaqAccordion` с `withSchema={true}` — Schema.org FAQPage генерируется автоматически.
**Заголовок секции:** «Часті запитання»
**Подзаголовок:** «Відповіді на головні питання про фасадну плитку GoodBrick»
**CTA под блоком:** `Усі запитання →``/faq`
---
**Q1. Що таке плитка ручного формування і чим вона краща за звичайний клінкер?**
Плитка ручного формування — це фасадний матеріал, де кожна плитка формується вручну, що надає їй унікальну живу текстуру. GoodBrick поєднує естетику ручної роботи з характеристиками імпортного клінкера: міцність **М200**, морозостійкість **F300**, водопоглинання **35%** (протокол №24Б-101401 від 14.10.2024). Єдиний виробник в Україні з мінеральною технологією.
---
**Q2. Які характеристики плитки GoodBrick?**
Міцність **М200** (200 кг/см²), морозостійкість **F300** (300 циклів заморожування-відтавання), водопоглинання **35%**. Ці показники підтверджені протоколом випробувань №24Б-101401 від 14.10.2024 і значно перевищують стандарти для фасадних матеріалів в Україні (М75М100, F25F50). Склад: каолінова глина + натуральні мінерали (мармур, кварцит, доломіт, слюда, граніт, обсидіан).
---
**Q3. Скільки коштує фасадна плитка за м²?**
Ціна фасадної плитки GoodBrick — **від 1200 до 1800 грн/м²** залежно від формату та кольору. Це ~15% дорожче за бетонні аналоги, але значно дешевше за імпортний клінкер (від 20005000 грн/м²). При характеристиках на рівні імпорту — це оптимальне співвідношення ціни та якості для українського ринку.
---
**Q4. Чи вигоряє плитка на сонці?**
Ні. Колір плитки GoodBrick утворюється **натуральними мінералами** (мармур, граніт, обсидіан), а не хімічними барвниками. Мінеральний пігмент стабільний протягом сотень років — це підтверджується збереженістю давньої кераміки. Гарантія на колір — 50 років.
---
**Q5. Як замовити безкоштовний зразок?**
Напишіть у [Telegram](https://t.me/goodbrick_ua) або зателефонуйте — вкажіть місто та кольори, які вас цікавлять. Ми надішлемо безкоштовні зразки поштою або передамо через дилера у вашому місті (Одеса, Хмельницький, Київ). Зразок допоможе побачити текстуру та колір наживо перед замовленням.
---
### 8. Telegram CTA-баннер (перед футером)
- Фоновое фото
- Заголовок: «Залишились питання? Пишіть у Telegram»
- Подзаголовок: «Відповімо протягом години»
- **CTA:** `Написати``https://t.me/{username}`
- Второй вариант: `Зателефонувати``tel:{phone}`
---
## Конверсионные элементы (чеклист)
- [x] CTA на образцы — above-the-fold в Hero
- [x] CTA в Telegram — в Hero (вторичный) + отдельный баннер
- [x] Телефон — в header (уже есть в SiteHeader)
- [x] Trust-сигналы — УТП + счётчики + имя владельца
- [x] Внутренние ссылки — на `/products`, `/projects`
- [x] Двойной CTA — Hero + Telegram-баннер перед футером
---
## SEO-чеклист
- [x] H1 единственный, выше fold
- [x] Schema.org Organization + WebSite
- [x] OG image — 1200×630 из R2 CDN
- [x] Alt у всех изображений
- [x] CdnImage priority на hero-фото (LCP)
- [x] Внутренние ссылки на key-страницы
---
## Scope cuts относительно идеальной спецификации
| Убрано | Причина |
|---|---|
| Конфигуратор-тизер | Конфигуратора нет и не будет в ближайшие месяцы |
| Отзывы / Google Reviews | Интеграция требует времени, начать без этого |
| Подписка на рассылку | Email никто не использует |
| Exit-intent popup | Нет данных что работает, раздражает |
| Видео-фон в Hero | Тяжело на мобиле, LCP страдает |
| Блог-превью | Блог создаётся на неделе 2 |
---
## Связанные страницы
- [[00 — Обзор и приоритеты]]
- [[../site/01 — Главная|Идеальная версия]]
- [[02 — Контакты]]
- [[06 — Галерея проектов]]