Files

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

2026-02-18 00:04:25 +02:00

6.5 KiB

Raw 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

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

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

6.5 KiB Raw Blame History Unescape Escape