---
tags:
  - сайт
  - страница
  - проекты
  - p1
url: /projects
approach: Кастомная страница + новая сущность Projects в БД
effort: ~12ч (бэкенд + фронтенд)
created: 2026-02-17
---

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

> [!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`

```csharp
// 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
```

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

1. **Шапка:** H1 (название) + мета (город, тип объекта, площадь, год)
2. **Галерея:** masonry / slideshow из фото проекта + lightbox
3. **Описание:** текст о проекте, задачах, решениях
4. **Использованные материалы:** карточки-ссылки на product-страницы
   - «Колір Шоколад, поверхня Khvylia» → `/product/shokolad`
5. **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 |

---

## Связанные страницы

- [[00 — Обзор и приоритеты]]
- [[01 — Главная]]
- [[05 — Блог]]