Ivan Liashkevich
ef38a90059
- 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.
214 lines
12 KiB
Markdown
214 lines
12 KiB
Markdown
---
|
||
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 — Блог]]
|