--- 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 | --- ## Макет сторінки (wireframe) ``` ┌──────────────────────────────────────────────────────────────────┐ │ GoodBrick Каталог Про нас Ціни Ще КОНТАКТИ │ ├──────────────────────────────────────────────────────────────────┤ │ │ │ ┌──────────────── HERO (full-width фото фасаду) ─────────────┐ │ │ │ │ │ │ │ ФАСАДИ, ЯКІ СЛУЖАТЬ ПОКОЛІННЯМ │ │ │ │ Фасадна плитка ручного формування. │ │ │ │ Єдині в Україні з мінеральною технологією. │ │ │ │ │ │ │ │ ╔══════════════════════╗ ╔══════════════════════╗ │ │ │ │ ║ Замовити зразок ║ ║ Переглянути каталог ║ │ │ │ │ ╚══════════════════════╝ ╚══════════════════════╝ │ │ │ └────────────────────────────────────────────────────────────┘ │ │ │ │ ── КАТЕГОРІЇ ПРОДУКЦІЇ ── │ │ │ │ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ │ │ [фото] │ │ [фото] │ │ [фото] │ │ │ │ │ │ │ │ │ │ │ │ ПЛИТКА │ │ ПОЛОВИНКА │ │ ЦЕГЛА │ │ │ │ 15–25 мм │ │ ЦЕГЛИ │ │ NF, WDF… │ │ │ │ товщина │ │ дешевша │ │ класична │ │ │ │ Каталог → │ │ логістика │ │ укладка │ │ │ │ │ │ Каталог → │ │ Каталог → │ │ │ └─────────────────┘ └─────────────────┘ └─────────────────┘ │ │ │ │ ── ЧОМУ GOODBRICK ── │ │ │ │ ┌────────────┐ ┌────────────┐ ┌────────────┐ ┌──────────┐ │ │ │ 🏭 │ │ 💪 │ │ 💧 │ │ 📅 │ │ │ │ Єдині │ │ М200, F300 │ │ 3–5% │ │ З 2022 │ │ │ │ в Україні │ │ міцність + │ │ вологопогл.│ │ року │ │ │ │ │ │ морозост. │ │ │ │ │ │ │ └────────────┘ └────────────┘ └────────────┘ └──────────┘ │ │ │ │ ── ПРОЕКТИ ── │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ [фото] │ │ [фото] │ │ [фото] │ │ [фото] │ │ │ │ Одеса │ │ Київ │ │ Хмельн. │ │ … │ │ │ │ 850 м² │ │ │ │ │ │ │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ [Усі проекти →] │ │ │ │ ── ЯК ЦЕ ПРАЦЮЄ ── │ │ │ │ ①─────────────────②─────────────────③ │ │ Замовте Оберіть Отримайте │ │ зразок колір і поверхню доставку │ │ │ │ ── ЧОМУ НАМ ДОВІРЯЮТЬ ── │ │ │ │ 23 5 3 2022 │ │ кольори поверхонь міста рік │ │ │ │ [фото] «Засновник» «Ми шукали плитку для власного…» │ │ │ │ ┌──────────── TELEGRAM CTA (темний фон) ─────────────────────┐ │ │ │ Залишились питання? Пишіть у Telegram │ │ │ │ Відповімо протягом години │ │ │ │ [Написати →] [Зателефонувати] │ │ │ └────────────────────────────────────────────────────────────┘ │ │ │ │ ── FOOTER ──────────────────────────────────────────────────── │ │ GoodBrick │ Каталог │ Інфо │ Контакти │ Соцмережі │ └──────────────────────────────────────────────────────────────────┘ ``` --- ## Блоки страницы ### 1. Hero (full-bleed, первый экран) > [!important] LCP-элемент — использовать `` для быстрой загрузки - Фото или видео готового фасада с продукцией 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 — Галерея проектов]]