Files

Ivan Liashkevich ef38a90059 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.

2026-02-19 23:07:51 +02:00

12 KiB

Raw Permalink Blame History

tags, url, approach, effort, created

🏗️ Галерея проектів

[!tip] Роль страницы Самый мощный trust-сигнал для high-ticket покупателя. Человек видит реальный дом с фасадом — сразу понимает масштаб, цвет, текстуру. «Такое же, как у меня».

[!warning] Реализация Кастомная страница — нужны новые сущность Project в БД и API-эндпоинты. Фронтенд: masonry grid + lightbox + страница отдельного проекта.

Мета-данные

Поле	Значение
H1	`Проєкти з фасадною плиткою GoodBrick`
Title	`Фото проєктів — Фасади з плиткою та цеглою GoodBrick`
Description	`Реальні проєкти з фасадною плиткою GoodBrick: котеджі, будинки, комерційні об'єкти. Фото до та після, використані матеріали, місто.`
Schema	`CollectionPage` + `ImageObject` per project
isIndexable	true

Макет сторінки (wireframe)

┌──────────────────────────────────────────────────────────────────┐
│ GoodBrick        Каталог  Про нас  Ціни  Ще          КОНТАКТИ  │
├──────────────────────────────────────────────────────────────────┤
│                                                                  │
│  Проєкти з фасадною плиткою GoodBrick                           │
│                                                                  │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐           │
│  │              │  │              │  │              │           │
│  │   [фото]     │  │   [фото]     │  │   [фото]     │           │
│  │              │  │  (вищий)     │  │              │           │
│  │ Одеса · 850м²│  │              │  │ Київ · 200м² │           │
│  └──────────────┘  │Хмельн.·450м²│  └──────────────┘           │
│                    └──────────────┘                              │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐           │
│  │   [фото]     │  │              │  │   [фото]     │           │
│  │  (вищий)     │  │   [фото]     │  │              │           │
│  │              │  │              │  │              │           │
│  │ Одеса · 120м²│  │ …            │  │ …            │           │
│  └──────────────┘  └──────────────┘  └──────────────┘           │
│                                                                  │
│ ┌─────────────────── STICKY BANNER ─────────────────────────┐   │
│ │  Хочете такий фасад?  [Замовити безкоштовний зразок →]    │   │
│ └───────────────────────────────────────────────────────────┘   │
│                                                                  │
│ ── СТОРІНКА ПРОЕКТУ /projects/{slug} ────────────────────────── │
│                                                                  │
│  Breadcrumb: Головна › Проєкти › Котеджне містечко, Одеса       │
│                                                                  │
│  # Котеджне містечко, Одеса                                     │
│  Приватний будинок  ·  850 м²  ·  2024                         │
│                                                                  │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐        │
│  │ [фото 1] │  │ [фото 2] │  │ [фото 3] │  │ [фото 4] │  …    │
│  └──────────┘  └──────────┘  └──────────┘  └──────────┘        │
│                                                                  │
│  Комбінація травертину та фасадної плитки. Для стриманішого     │
│  вигляду було прибрано помаранчеві акценти…                     │
│                                                                  │
│  Використані матеріали:                                         │
│  ┌────────────────────────┐  ┌────────────────────────┐         │
│  │ Колір Граніт · Khvylia │  │ Колір Охра · Standart  │         │
│  │ → /product/hranit      │  │ → /product/okhra        │         │
│  └────────────────────────┘  └────────────────────────┘         │
│                                                                  │
│  ╔══════════════════════════════════════════╗                    │
│  ║  Замовити матеріали для схожого проекту  ║                    │
│  ╚══════════════════════════════════════════╝                    │
│                                                                  │
│ ── FOOTER ──────────────────────────────────────────────────── │
│  GoodBrick  │  Каталог  │  Інфо  │  Контакти  │  Соцмережі    │
└──────────────────────────────────────────────────────────────────┘

Бэкенд — новая сущность

Entity `Project`

// GBSite.Data/Entities/Project.cs
public class Project {
    public int Id { get; set; }
    public string Title { get; set; }        // «Котеджне містечко Одеса»
    public string Slug { get; set; }          // «kotedzhne-mistechko-odesa»
    public string Description { get; set; }  // 100–300 слов о проекте
    public string City { get; set; }          // «Одеса»
    public string ObjectType { get; set; }    // «Приватний будинок» / «Комерційний об'єкт»
    public int? AreaSqm { get; set; }         // 850 (кв.м. фасада)
    public string ImageUrls { get; set; }     // JSON array ["url1", "url2"]
    public string ProductColorSlugs { get; set; } // JSON array ["shokolad", "okhra"]
    public bool IsPublished { get; set; }
    public DateTime CreatedAt { get; set; }
}

API эндпоинты

GET /api/projects           → list (только IsPublished=true, desc по дате)
GET /api/projects/{slug}    → detail (public)
POST /api/projects          → create (admin)
PUT /api/projects/{id}      → update (admin)
DELETE /api/projects/{id}   → delete (admin)

Фронтенд — листинг /projects

Компонент `ProjectsGallery`

app/(site)/projects/page.tsx
components/projects/projects-gallery.tsx

Верстка:

Masonry grid (3 колонки desktop / 2 tablet / 1 mobile)
Каждая карточка: главное фото + overlay с «{Місто}, {кв.м.}»
При наведении — подпись + кнопка «Детальніше»
Lightbox при клике на фото (библиотека yet-another-react-lightbox)

Без фильтров при запуске — добавить позже когда проектов >10.

Фронтенд — страница проекта /projects/{slug}

app/(site)/projects/[slug]/page.tsx

Структура страницы:

Шапка: H1 (название) + мета (город, тип объекта, площадь, год)
Галерея: masonry / slideshow из фото проекта + lightbox
Описание: текст о проекте, задачах, решениях
Использованные материалы: карточки-ссылки на product-страницы
- «Колір Шоколад, поверхня Khvylia» → /product/shokolad
CTA: «Замовити такі самі матеріали» → Telegram / каталог

SEO: динамические metadata + Schema.org Article / ImageObject

Контент на запуск (3–5 проектов-заготовок)

Заполнить реальными проектами (если есть фото) или создать «демо»-проекты из имеющихся live-фото:

#	Название	Город	Тип	Площадь	Материал
1	{Назва від клієнта}	Одеса	Приватний будинок	{кв.м.}	{колір/поверхня}
2	{Назва від клієнта}	Хмельницький	Приватний будинок	{кв.м.}	{колір/поверхня}
3	{Назва від клієнта}	Київ	Комерційний об'єкт	{кв.м.}	{колір/поверхня}

[!important] Данные для проектов Лучше 3 реальных проекта с реальными фото, чем 10 невнятных. Если нет согласия клиента — «Приватний будинок, Одеса» без имени.

Конверсия

На странице листинга:

Sticky баннер снизу: «Хочете такий фасад? Замовте безкоштовний зразок»

На странице проекта:

CTA после галереи: «Замовити матеріали для схожого проекту» → Telegram
Ссылки на продукты — внутренняя перелинковка на карточки товаров

Зависимости

Библиотека yet-another-react-lightbox — установить через npm
Опционально: react-masonry-css для masonry grid (или CSS columns)

Scope cuts

Убрано	Причина
Фильтры по городу / типу объекта	Добавить когда проектов >10
360° просмотр	Сложно технически, добавить Q2
«До/После» слайдер	Нет фото «до», добавить с новыми проектами
Карта с пинами проектов	Добавить Q2

12 KiB Raw Permalink Blame History Unescape Escape