Add new pages for FAQ, Sustainability, Contacts, Technical Requirements, Glossary, and related content
- 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.
This commit is contained in:
171
site-v2/01 — Главная.md
Normal file
171
site-v2/01 — Главная.md
Normal file
@@ -0,0 +1,171 @@
|
||||
---
|
||||
tags:
|
||||
- сайт
|
||||
- страница
|
||||
- главная
|
||||
- p0
|
||||
url: /
|
||||
approach: кастомная страница (замена placeholder)
|
||||
effort: ~12ч
|
||||
created: 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 с `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 циклів морозостійкості |
|
||||
| 💧 | «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 шага)
|
||||
|
||||
Статический блок, убирает страх «а как мне это всё купить?»:
|
||||
|
||||
1. **Замовте зразок** — надішліть нам місто, ми відправимо безкоштовний зразок
|
||||
2. **Оберіть колір і поверхню** — 23 кольори × 5 поверхонь у каталозі
|
||||
3. **Отримайте доставку** — доставляємо по всій Україні, дилери в Одесі, Хмельницькому, Києві
|
||||
|
||||
> [!tip] Конверсия
|
||||
> «Как это работает» снижает тревогу у покупателя на раннем этапе исследования.
|
||||
|
||||
---
|
||||
|
||||
### 6. Блок доверия — «Чому нам довіряють»
|
||||
|
||||
- Счётчики (статические числа, заполнить реальными):
|
||||
- `23` кольори продукції
|
||||
- `5` поверхонь (Standart, Klasik, Khvylia, Loft, Heritage)
|
||||
- `3` міста дилерів
|
||||
- `2022` рік заснування
|
||||
- Имя/фото владельца: «{Ім'я}, засновник» — короткая цитата о качестве
|
||||
|
||||
---
|
||||
|
||||
### 7. 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 — Галерея проектов]]
|
||||
Reference in New Issue
Block a user